documentation

js/boilerplate.css

@@ -0,0 +1,3 @@
+body {
+	font-family: sans-serif;
+}

js/boilerplate.js

@@ -2,7 +2,11 @@
 if (window.rkt_event_queue === undefined) { window.rkt_event_queue = []; }
 
 window.rkt_put_evt = function(evt) {
+   evt.timestamp = Date.now();
    window.rkt_event_queue.push(evt);
+   if (window.rkt_evt_frame_el) {
+      window.rkt_evt_frame_win.print();
+   }
 };
 
 window.rkt_event_info = function(e, id, evt) {

js/menu.css

@@ -0,0 +1,113 @@
+div.menubar {
+   display: flex;
+   align-items: center;
+   width: 100%;
+   top: 0;
+   left: 0;
+   height: 2em;
+   background: #e0e0e0;
+   border-bottom: 1px solid black;
+   margin-bottom: 2px;
+}
+
+div.menubar-item {
+   display: inline-block;
+   height: 100%;
+   align-content: center;
+   padding-left: 0.5em;
+   padding-right: 0.5em;
+   cursor: default;
+}
+
+div.menu, div.submenu {
+   display: flex;
+   flex-direction: column;
+   background: #e0e0e0;
+   border: 1px solid black;
+   z-index: 9999;
+   margin-top: 0.4em;
+   margin-left: -0.5em;
+   position: absolute;
+}
+
+div.submenu {
+   position: absolute;
+   left: calc(100% + 1em);
+   top: 1em;
+}
+
+div.menu-item {
+   min-width: 150px;
+   height: 2em;
+   padding-left: 0.5em;
+   align-content: center;
+   align-items: center;
+   display: flex;
+   cursor: default;
+}
+
+div.menu-item span.menu-icon {
+   width: 2em;
+   height: 2em;
+   padding: 0;
+   margin: 0;
+   display: flex;
+   padding-left: 3px;
+}
+
+div.menu-item span.menu-name {
+   padding-left: 0.25em;
+   display: inline-block;
+   padding-right: 0.5em;
+}
+
+div.menu-item span.menu-submenu {
+   float: right;
+}
+
+span.menu-icon img {
+   width: 85%;
+   height: 85%;
+   align-self: center;
+}
+
+div.menu-item.separator {
+   border-top: 1px solid black;
+}
+
+div.menubar-item:hover, div.menu-item:hover {
+   background: #c0c0c0;;
+}
+
+.popup-menu, .popup-submenu {
+	display: flex;
+	flex-direction: column;
+	margin: 5px;
+	padding: 5px;
+	position: absolute;
+	z-index: 9999;
+	border: 1px solid black;
+	background: #e0e0e0;
+	color: black;
+}
+
+.popup-submenu {
+	display: none;
+}
+
+.menubar .menu-item span.menu-icon, .popup-menu .menu-item span.menu-icon {
+	min-width: unset;
+	width: unset;
+}
+
+.menubar .menu-item {
+	min-width: unset;
+	width: unset;
+	color: black;
+}
+
+.menu-item span.menu-name {
+	text-wrap: nowrap;
+}
+
+

js/menu.js

@@ -0,0 +1,132 @@
+
+
+window._web_wire_popup_menu = function(menu, x = -1, y = -1, kind = 'popup') {
+    if (menu.id == '#f') { menu.id = null; }
+    let menu_id = (kind == 'popup') ? '@@popup-menu@@' : '@@menubar@@';
+    let submenu_els = [];
+    let triggerMenuItem;
+    let clearPopupMenu = function() {
+        if (kind == 'popup') {
+            let el = document.getElementById(menu_id);
+            if (el !== null) {
+                el.innerHTML = '';
+                el.style.display = 'none';
+            }
+            if (menu.id !== null) {
+                // Delay this trigger, because one could have choosen a menu item and we want this
+                // to be triggered before the clear command is send.
+                // But if no menu item has been selected, the clear command should
+                // eventually be send.
+                setTimeout(function () {
+                    console.log("Sending clear trigger for menu clearance : " + menu.id);
+                    let obj = { evt: 'menu-item-choosen', id: menu.id, menu_item: menu.id };
+                    window.rkt_put_evt(obj);
+                }, 250);
+            }
+        } else {
+            // hide all submenus
+            submenu_els.forEach(function (el) { el.style.display = 'none'; });
+        }
+    };
+    triggerMenuItem = function(id) {
+        console.log("Triggering menu item : " + id);
+        let obj = { evt: 'menu-item-choosen', id: id, menu_item: id };
+        window.rkt_put_evt(obj);
+    };
+    let showSubMenu = function(menu_el, item_el, el, parent_type) {
+        if (parent_type == 'menu') {
+            el.style.display = 'flex';
+            let rect = item_el.getBoundingClientRect();
+            let r = rect.left;
+            let t = rect.height;
+            el.style.left = r + 'px';
+            el.style.top = t + 'px';
+        } else {
+            el.style.display = "flex";
+            let rect = menu_el.getBoundingClientRect();
+            let irect =item_el.getBoundingClientRect();
+            let r = rect.width + 5;
+            let t = irect.y - rect.y;
+            el.style.left =  r + "px";
+            el.style.top = t + "px";
+        }
+    };
+    let hideSubMenu = function(el) { el.style.display = "none"; };
+    let makePopupMenu = function(el, menu, visible, type) {
+        let i;
+        let N = menu.length;
+        for(i = 0; i < N; i++) {
+            let item = menu[i];
+            let item_el = document.createElement("div");
+            item_el.id = item.id;
+            item_el.classList.add("menu-item");
+            let item_el_icon = document.createElement('span');
+            item_el_icon.classList.add("menu-icon");
+            if (item.icon) {
+                let icon_img = document.createElement('img');
+                icon_img.setAttribute('src', item.icon);
+                item_el_icon.appendChild(icon_img);
+            }
+            if (item.separator) {
+                item_el.classList.add("separator");
+            }
+            let item_el_name = document.createElement('span');
+            item_el_name.classList.add('menu-name');
+            item_el_name.innerHTML = item.name;
+            let item_el_submenu = document.createElement('span');
+            item_el_submenu.classList.add('menu-submenu');
+            if (item.submenu) {
+                if (type == 'submenu' || kind == 'popup') {
+                    item_el_submenu.innerHTML = '&gt;';
+                }
+                item_el.setAttribute('type', 'submenu');
+                let submenu_el = document.createElement("div");
+                submenu_els.push(submenu_el);
+                submenu_el.classList.add("submenu");
+                submenu_el.classList.add("menu");
+                item_el.appendChild(submenu_el);
+                submenu_el.style.display = 'none';
+                makePopupMenu(submenu_el, item.submenu.menu, false, 'submenu');
+                item_el.addEventListener('mouseenter', function () { showSubMenu(el, item_el, submenu_el, type); });
+                item_el.addEventListener('mouseleave', function () { hideSubMenu(submenu_el); });
+            } else {
+                item_el.setAttribute('type', 'item');
+                item_el.addEventListener('click', function() { triggerMenuItem(item.id); });
+            }
+            item_el.appendChild(item_el_icon);
+            item_el.appendChild(item_el_name);
+            item_el.appendChild(item_el_submenu);
+            el.appendChild(item_el);
+        }
+    };
+    let el = document.getElementById(menu_id);
+    if (el === null) {
+        el = document.createElement("div");
+        el.id = menu_id;
+        el.classList.add((kind == 'popup') ? "popup-menu" : "menubar");
+        if (kind == 'popup') {
+            el.classList.add("menu");
+            document.body.appendChild(el);
+        } else {
+            document.body.prepend(el);
+        }
+    } else {
+        el.innerHTML = '';
+    }
+    makePopupMenu(el, menu.menu, true, 'menu');
+    el.style.left = x + "px";
+    el.style.top = y + "px";
+    el.style.display = "flex";
+    let clearer_f = function() {
+        clearPopupMenu();
+        document.body.removeEventListener('click', clearer_f);
+        document.body.removeEventListener('contextmenu', clearer_f);
+    };
+    document.body.addEventListener('click', clearer_f);
+    document.body.addEventListener('contextmenu', clearer_f);
+};
+
+window._web_wire_menu = function(_menubar) {
+    let menubar = JSON.parse(_menubar);
+    window._web_wire_popup_menu(menubar, -1, -1, 'menubar');
+};