| 1 | 2 | simandl | <!DOCTYPE html> |
| 2 | | | <html> |
| 3 | | | <head> |
| 4 | | | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| 5 | | | {% block styles %} |
| 6 | | | {% for style in styles %} |
| 7 | | | <link rel="stylesheet" href="{{style}}" /> |
| 8 | | | {% endfor %} |
| 9 | | | {% endblock %} |
| 10 | | | {% block scripts %} |
| 11 | | | {% for script in scripts %} |
| 12 | | | <script type="text/javascript" src="{{script}}"></script> |
| 13 | | | {% endfor %} |
| 14 | | | <script> |
| 15 | | | var conn; |
| 16 | | | var connId; |
| 17 | | | |
| 18 | | | function invokeStrongEvent(control, event) |
| 19 | | | { |
| 20 | | | |
| 21 | | | var eventName = "on" + event.type; |
| 22 | | | |
| 23 | | | var name = $(control).attr('id'); |
| 24 | | | var invokedBy = connId; |
| 25 | | | |
| 26 | | | //console.log(control.style); |
| 27 | | | |
| 28 | | | $.post("{{onStrongEventLink|raw}}", {name: name, value: JSON.stringify(elementToObject(control)), event: eventName,invokedBy:invokedBy}, function(data) { |
| 29 | | | if (data === "reload") location.reload(); |
| 30 | | | }); |
| 31 | | | |
| 32 | | | |
| 33 | | | //console.log(event); |
| 34 | | | } |
| 35 | | | |
| 36 | | | function invokeEvent(control, event) |
| 37 | | | { |
| 38 | | | var val = $(control).val(); |
| 39 | | | if (val === "") val = $(control).text(); |
| 40 | | | var name = $(control).attr('id'); |
| 41 | | | var invokedBy = connId; |
| 42 | | | eventName = "on" + event.type; |
| 43 | | | //console.log(event); |
| 44 | | | $.post("{{onEventLink|raw}}", {name: name, value: val, event: eventName, invokedBy: invokedBy}, function(data) { |
| 45 | | | if (data === "reload") location.reload(); |
| 46 | | | }); |
| 47 | | | |
| 48 | | | //console.log(event); |
| 49 | | | } |
| 50 | | | |
| 51 | | | function connectSocket() |
| 52 | | | { |
| 53 | | | conn = new WebSocket('ws://{{httpHost}}:80'); |
| 54 | | | conn.onclose = function() { |
| 55 | | | //try to reconnect in 2 seconds |
| 56 | | | setTimeout(function() { |
| 57 | | | connectSocket(); |
| 58 | | | }, 2000); |
| 59 | | | }; |
| 60 | | | |
| 61 | | | conn.onopen = function(e) { |
| 62 | | | |
| 63 | | | conn.send('{ "connection": { "user": "{{loggedUser.username}}", "session": "{{sessionId}}"} }'); |
| 64 | | | //console.log("Connection established!"); |
| 65 | | | }; |
| 66 | | | |
| 67 | | | conn.onmessage = function(e) { |
| 68 | | | var result = JSON.parse(e.data); |
| 69 | | | |
| 70 | | | if (result.acceptedConnection != null) |
| 71 | | | { |
| 72 | | | connId = result.acceptedConnection; |
| 73 | | | return; |
| 74 | | | } |
| 75 | | | |
| 76 | | | var changes = JSON.parse(result.changes); |
| 77 | | | var invokedBy = result.invokedBy; |
| 78 | | | for (change in changes) |
| 79 | | | { |
| 80 | | | var objectName = changes[change].objectName; |
| 81 | | | switch (changes[change].type) |
| 82 | | | { |
| 83 | | | default: |
| 84 | | | case 4: |
| 85 | | | if (!$("#" + objectName).is(":focus")) |
| 86 | | | { |
| 87 | | | $("#" + objectName).replaceWith($(changes[change].data)); |
| 88 | | | } |
| 89 | | | break; |
| 90 | | | case 5: |
| 91 | | | $("#" + objectName).attr(changes[change].attrName,changes[change].data); |
| 92 | | | if (changes[change].attrName === "value") |
| 93 | | | { |
| 94 | | | $("#" + objectName).val(changes[change].data); |
| 95 | | | } |
| 96 | | | break; |
| 97 | | | case 6: |
| 98 | | | var criticalAttrs = ["left", "top","width","height"]; |
| 99 | | | if ((invokedBy === connId)&&($.inArray(changes[change].attrName, criticalAttrs) > -1)) |
| 100 | | | { |
| 101 | | | break; |
| 102 | | | } |
| 103 | | | $("#" + objectName).css(changes[change].attrName,changes[change].data); |
| 104 | | | break; |
| 105 | | | case 7: |
| 106 | | | $("#" + objectName + " " + changes[change].attrName).html(changes[change].data); |
| 107 | | | break; |
| 108 | | | } |
| 109 | | | } |
| 110 | | | }; |
| 111 | | | } |
| 112 | | | |
| 113 | | | $(document).ready(function() { |
| 114 | | | |
| 115 | | | connectSocket(); |
| 116 | | | }); |
| 117 | | | </script> |
| 118 | | | {% endblock %} |
| 119 | | | <title> |
| 120 | | | {% block title %} |
| 121 | | | {{ title }} |
| 122 | | | {% endblock %} |
| 123 | | | </title> |
| 124 | | | |
| 125 | | | </head> |
| 126 | | | <body style="width:100%; |
| 127 | | | height:100%; |
| 128 | | | background-color: {{workspace.backgroundColor}};"> |
| 129 | | | {% block body %} |
| 130 | | | {% block content %} |
| 131 | | | {% for window in workspace.windows %} |
| 132 | | | {{ include('@Phem/UI/Window.twig', {component: window}, with_context = false) }} |
| 133 | | | {% endfor %} |
| 134 | | | {% endblock %} |
| 135 | | | {% endblock %} |
| 136 | | | {{loggedUser.username}} |
| 137 | | | </body> |
| 138 | | | </html> |
