add windows.html demo #25

jcubic · Feb 13, 2022 · 4e669f8 · 4e669f8
1 parent 2fa40d7
commit 4e669f8
Show file tree

Hide file tree

Showing 2 changed files with 206 additions and 0 deletions.
diff --git a/.npmignore b/.npmignore
@@ -4,5 +4,6 @@ assets
 bower.json
 demo.html
 iframe.html
+windows.html
 sysend.php
 test.ts
diff --git a/windows.html b/windows.html
@@ -0,0 +1,205 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <title>Window Management Demo</title>
+    <meta name="Description" content=""/>
+    <!--[if IE]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <style>
+     :root {
+         --scale: 0.5;
+     }
+     body {
+         margin: 0;
+     }
+     html, body {
+         height: 100%;
+     }
+     #output {
+         position: absolute;
+         top: 0;
+         left: 0;
+         opactity: 0.4;
+     }
+     .primary #monitor {
+         width: calc(var(--width) * var(--scale) * 1px);
+         height: calc(var(--height) * var(--scale) * 1px);
+         border: 1px solid green;
+         position: relative;
+         overflow: hidden;
+     }
+     .window {
+         background: red;
+         border: 2px solid black;
+         position: absolute;
+         left: calc(var(--left) * var(--scale) * 1px);
+         top: calc(var(--top) * var(--scale) * 1px);
+         width: calc(var(--width) * var(--scale) * 1px);
+         height: calc(var(--height) * var(--scale) * 1px);
+         transition: all 0.5s linear;
+     }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/sysend"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+</head>
+<body>
+  <pre id="output"></pre>
+  <div id="monitor"></div>
+    <script>
+     function geometry() {
+         const left = window.screenX;
+         const top = window.screenY;
+         const width = window.innerWidth;
+         const height = window.innerHeight;
+         return {
+             top,
+             left,
+             width,
+             height
+         };
+     }
+
+     function log(message) {
+         if (typeof message === 'object') {
+             message = JSON.stringify(message);
+         }
+         if (output.innerHTML) {
+             message = '\n' + message;
+         }
+         output.innerHTML += message;
+     }
+
+     function same(a, b) {
+         return a.every((element, i) => {
+             return b[i] === element;
+         });
+     }
+
+     function diff(a, b) {
+         var keys_a = Object.keys(b).sort();
+         var keys_b = Object.keys(a).sort();
+         if (!same(keys_a, keys_b)) {
+             return true;
+         }
+         var diff = keys_a.filter(key_a => {
+             return a[key_a] !== b[key_a];
+         });
+         return diff.length > 0;
+     }
+
+     function sendToPrimary(data) {
+         return sysend.list().then(list => {
+             console.log(list);
+             return list.find(window => window.primary);
+         }).then(primary => {
+             sysend.post(primary.id, data);
+         });
+     }
+
+     class EventEmitter {
+         constructor() {
+             this.hadlers = {};
+         }
+         on(event, handler) {
+             if (typeof handler === 'function') {
+                 this.hadlers[event] ??= [];
+                 this.hadlers[event].push(handler);
+             }
+         }
+         trigger(event, ...args) {
+             this.hadlers[event].forEach(fn => {
+                 fn?.(...args);
+             });
+         }
+     }
+
+     function onWindowGeometryChannge(callback, delay = 100) {
+         var events = new EventEmitter();
+         let oldGeometry = geometry();
+         events.on('resize', callback);
+         setInterval(() => {
+             const newGeometry = geometry();
+             if (diff(newGeometry, oldGeometry)) {
+                 oldGeometry = newGeometry;
+                 events.trigger('resize', newGeometry);
+             }
+         }, delay);
+     }
+     function style(geometry) {
+         return Object.keys(geometry).map(name => {
+             return `--${name}: ${geometry[name]}`;
+         }).join(';');
+     }
+     function div(geometry, text = '') {
+         console.log(new Error().stack);
+         return `<div class="window" style="${style(geometry)}">${text}</div>`;
+     };
+     function geometrySync(local, other) {
+         monitor.innerHTML = div(local, 'Self (Primary)') +
+                             Object.keys(other).map(key => {
+                                 return div(other[key], key)
+                             }).join('');
+     }
+     var windowCount = 0;
+     var windowGeometries = {};
+     var localGeometry;
+
+     function setMonitorSize() {
+         monitor.style.setProperty('--width', window.screen.width);
+         monitor.style.setProperty('--height', window.screen.height);
+     }
+
+     onWindowGeometryChannge(function(geometry) {
+         if (sysend.isPrimary()) {
+             localGeometry = geometry;
+             geometrySync(localGeometry, windowGeometries);
+         } else {
+             sendToPrimary({geometry});
+         }
+     });
+     sysend.track('open', () => ++windowCount);
+     sysend.track('close', ({id}) => {
+         --windowCount;
+         delete windowGeometries[id];
+     });
+     // window manager is main page
+     sysend.track('primary', () => {
+         document.body.classList.add('primary');
+         setMonitorSize();
+         sysend.track('message', ({data, origin}) => {
+             if (data.geometry) {
+                 windowGeometries[origin] = data.geometry;
+                 geometrySync(localGeometry, windowGeometries);
+             }
+         });
+     });
+     sysend.track('ready', function() {
+         localGeometry = geometry();
+         if (sysend.isPrimary()) {
+             geometrySync(localGeometry, windowGeometries);
+         } else {
+             sendToPrimary({geometry: localGeometry});
+         }
+     });
+    </script>
+    <!-- Start Open Web Analytics Tracker -->
+    <script type="text/javascript">
+     //<![CDATA[
+     var owa_baseUrl = 'http://stats.jcubic.pl/';
+     var owa_cmds = owa_cmds || [];
+     owa_cmds.push(['setSiteId', 'b0fda2fd267289c39125653957851823']);
+     owa_cmds.push(['trackPageView']);
+     owa_cmds.push(['trackClicks']);
+     (function() {
+         var _owa = document.createElement('script'); _owa.type = 'text/javascript'; _owa.async = true;
+         owa_baseUrl = ('https:' == document.location.protocol ? window.owa_baseSecUrl || owa_baseUrl.replace(/http:/, 'https:') : owa_baseUrl );
+         _owa.src = owa_baseUrl + 'modules/base/js/owa.tracker-combined-min.js';
+         var _owa_s = document.getElementsByTagName('script')[0]; _owa_s.parentNode.insertBefore(_owa, _owa_s);
+     }());
+     //]]>
+    </script>
+    <!-- End Open Web Analytics Code -->
+</body>
+</html>