Update 05 v4.0.0 JS port

- Javascript port - Screen bound - License `The Unlicense` - API change to align with Sciter.JS/TIS - Improve algorithm - Versioning work as followed `Major.Improve.Fix`, the last not needed to be synced between JS/TIS.
MustafaHi · Mar 26, 2021 · e4e4a40 · e4e4a40
1 parent 904d38c
commit e4e4a40
Show file tree

Hide file tree

Showing 7 changed files with 216 additions and 87 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>
diff --git a/README.md b/README.md
@@ -1,38 +1,42 @@
 # Sciter-Tray
-Sciter Tray Menu in Tiscript - v3.2
-
+Sciter Tray Menu
+```lua
+> Tiscript   : 4.0.0
+> Javascript : 4.0.0
+```
 
 ## Install
 Just include those files to your resources/UI folder
+```c#
+tray.tis     // OR tray.js
+tray.htm     // if you want to use as separate window for menu
+trayicon.png // optional, replace with your own tray icon
 ```
-tray.tis
-tray.htm
-TrayIcon06.png // optional, replace with your own tray icon
-```
-then include tray.tis in your project either
+Then include script file in your project either  
 in HTML :
 ```html
-<script src="tray.tis" type="text/tiscript"></script>
+<script src="tray.tis" type="text/tiscript"></script> // OR
+<script src="tray.js"  type="text/javascript"></script>
 ```
 or in script file:
-```php
-include "tray.tis";
+```js
+include "tray.tis"; // OR
+import { Tray } from "tray.js"; // Prefix line:16 in tray.js with `export`
 ```
 then
 ```js
-initTray(true); // false to remove
+// default arguments, pass `false` to remove
+Tray.init(init = true, text = "Welcome!", icon = "trayicon.png")
 ```
-or add your own create tray icon function
-
+or add your own create tray icon function.
 
 ## Customizing
-To set the menu to a popup set `trayMenu = $(popup selector)`, check `demo.htm` for further guidance.
-
-To change the items in tray menu edit `tray.htm`
-
-To uncenter the tray menu set `trayCentered = false;`
+To set the menu to a popup set `Tray.menu = Element;` check `demo.htm` for further guidance.
 
-If you want your app to close to tray:
 ```js
-event click $(close button selector) { view.trayIcon(#place) ? view.state = View.WINDOW_HIDDEN : view.close(); }
+Tray {
+    center: true,      // Center Tray menu
+    menu  : undefined, // Will create window for menu unless given one.
+    init  : function (True|False, "text", "iconPath")
+}
 ```
diff --git a/demo.htm b/demo.htm
@@ -1,5 +1,5 @@
 <!-- 
-  Sciter Tray Menu v3.0
+  Sciter Tray Menu
   https://github.com/MustafaHi/Sciter-Tray
 -->
 <html>
@@ -25,34 +25,49 @@
       background: #ddd;
   }
   .header { font-weight: bold; font-size: 12dip; }
-  b {
-      display: block;
-      border-bottom: 1dip solid #aaa;
-  }
   button {
     min-width: 4.5em;
   }
 </style>
 
-<script src="tray.tis" type="text/tiscript"></script>  <!-- Add tray.tis -->
+<script src="tray.tis" type="text/tiscript"></script>  <!-- TISCRIPT -->
 <script type="text/tiscript">
-  initTray();
-  //trayMenu = $(#trayPopup);
+  // include "tray.tis"
+  Tray.init();
+
   event click $(#toggleMenu)
   {
-    trayMenu   = trayMenu ?  null   : $(#trayPopup);
-    this.value = trayMenu ? "POPUP" : "WINDOW";
+    Tray.menu  = Tray.menu?.isElement ? undefined : $(#trayPopup);
+    this.value = Tray.menu ? "POPUP" : "WINDOW";
   }
   event click $(#toggleCentered)
   {
-    trayCentered = !trayCentered;
-    this.value   =  trayCentered ? "CENTERED" : "NOT CENTERED";
+    Tray.center = !Tray.center;
+    this.value  =  Tray.center ? "CENTERED" : "NOT CENTERED";
   }
-  event click $(#show) { view.state = View.WINDOW_SHOWN;  trayMenu.closePopup(); }
-  event click $(#hide) { view.state = View.WINDOW_HIDDEN; trayMenu.closePopup(); }
+  event click $(#show) { view.state = View.WINDOW_SHOWN;  }
+  event click $(#hide) { view.state = View.WINDOW_HIDDEN; }
   event click $(#exit) { view.close(); }
 </script>
 
+<script src="tray.js" type="text/javascript"></script>  <!-- JAVASCRIPT -->
+<script type="text/javascript" type="module">
+  // import { Tray } from "tray.js"; // Prefix line:16 in tray.js with `export`
+  Tray.init();
+
+  document.getElementById("toggleMenu").on("click", function(evt, el) {
+      Tray.menu     = Tray.menu instanceof Element ? undefined : document.getElementById("trayPopup");
+      el.innerHTML  = Tray.menu ? "POPUP" : "WINDOW";
+  });
+  document.getElementById("toggleCentered").on("click", function(evt, el) {
+      Tray.center  = !Tray.center;
+      el.innerHTML =  Tray.center ? "CENTERED" : "NOT CENTERED";
+  });
+  document.$("#show").on("click", () => { Window.this.state = Window.WINDOW_SHOWN;  });
+  document.$("#hide").on("click", () => { Window.this.state = Window.WINDOW_HIDDEN; });
+  document.$("#exit").on("click", () => { Window.this.close(); });
+</script>
+
 <popup #trayPopup>
     <div>
       <li #show>Show</li>

diff --git a/tray.htm b/tray.htm
@@ -9,13 +9,14 @@
 html {
     /* YOU MUST SET A WIDTH TO YOUR LIKING */
     min-width: 150dip;
-    /* width: max-content; */
+    width: max-content;
 
     height: max-content;
     background: transparent;
     overflow: hidden;
 }
 body {
+    width: max-content;
     height: max-content;
     border-radius: 4dip;
     overflow: hidden;
@@ -36,26 +37,18 @@
     background: #ddd;
 }
 .header { font-weight: bold; font-size: 12dip; }
-b {
-    display: block;
-    border-bottom: 1dip solid #aaa;
-}
 </style>
 <script type="text/tiscript">
-    event click $(#show) { view.parameters.show(); }
-    event click $(#hide) { view.parameters.hide(); }
-    event click $(#exit) { view.parameters.close(); }
-    view << event activate (as) { if( as === false ) { view.parameters.inactive(); } }
 </script>
 </head>
 <body>
 <ul>
     <li.header>Sciter TrayMenu</li>
-    <b/>
+    <hr/>
     <li #show>Show app</li>
     <li>More app</li>
     <li #hide>Hide app</li>
-    <b/>
+    <hr/>
     <li #exit>Exit!</li>
 </ul>
 </body>

diff --git a/tray.js b/tray.js
@@ -0,0 +1,78 @@
+//| Sciter Tray Menu v4.0.0
+//| https://github.com/MustafaHi/Sciter-Tray
+
+// Tray.menu   = undefined; Give it a Window or Element to use as menu.
+// Tray.center = true;      True to center the menu to the TrayIcon.
+// document.url is not relative if this is inside a folder you must name the folder document.url("folder/tray.htm")
+
+if(!Number.prototype.limit) {
+    Number.prototype.limit = function(min,max) {
+      if (this < min) return min;
+      if (this > max) return max;
+      return this;
+    }
+}
+
+const Tray = { // Prefix with `export` to use as module
+    center: true,
+    menu  : undefined,
+    init  : async function(init = true, content = "Welcome!", icon = "trayicon.png") {
+        if (init) {
+            Window.this.trayIcon ({
+              image: await Graphics.Image.load(document.url(icon)),
+              text: content
+            });
+        } else {
+            Window.this.trayIcon("remove"); 
+        }
+    }
+};
+
+Window.this.on("trayiconclick", function(evt) {
+// if the main app window not showing on top add  Window.this.isTopmost = true;  then  Window.this.isTopmost = false;
+    var view = Window.this;
+    if (evt.data.buttons == 1) { view.state = Window.WINDOW_SHOWN; view.isTopmost = true; view.isTopmost = false; }
+    else {
+        if (Tray.menu instanceof Element) {
+            Tray.menu.focus();
+            var [tx,ty] = view.trayIcon("place");
+            var [sx,sy] = view.box("position", "client", "screen");
+            Tray.menu.popupAt(tx-sx, ty-sy, (Tray.center ? 2 : 1));
+        }
+        else {
+
+            if (Tray.menu == undefined) {
+                Tray.menu = new Window({
+                    url  : document.url("tray.htm"),
+                    state: Window.WINDOW_HIDDEN,
+                    type : Window.POPUP_WINDOW,
+                });
+            }
+
+            var x, y;
+            var w = Tray.menu.document.state.contentWidths()[0];
+            var h = Tray.menu.document.state.contentHeight(w);
+            var [tx,ty,tw,th]     = view.trayIcon("place");
+            var [sX1,sY1,sX2,sY2] = view.screenBox("workarea", "rect");
+            if (Tray.center) {
+                tx < sX1 ? x = sX1 : (tx > sX2 ? x = (sX2 - w) : x = (tx-(w/2))+(tw/2));
+                ty < (sY1*4) ? y = (ty + th) : (ty > sY2 ? y = (sY2 - h) : y = ty-h);
+                tx < sX1 || tx - sX2 > 0 ? y += (h/2) : "";
+            } else {
+                tx < (sX1*4) ? x = tx : (tx > sX2 ? x = (sX2 - w) : x = tx);
+                ty < (sY1*4) ? y = (ty + th) : (ty > sY2 ? y = (sY2 - h) : y = ty-h);
+            }
+
+            Tray.menu.move(x.limit(0, sX2-w), y.limit(0, sY2-h), w, h, true);
+            Tray.menu.state = Window.WINDOW_SHOWN;
+            Tray.menu.isTopmost = true;
+            Tray.menu.document.state.focus = true;
+
+            // Functions for tray.htm
+            Tray.menu.document.on("click", "#show", () => { view.state = Window.WINDOW_SHOWN;      });
+            Tray.menu.document.on("click", "#hide", () => { view.state = Window.WINDOW_HIDDEN;     });
+            Tray.menu.document.on("click", "#exit", () => { view.trayIcon("remove"); view.close(); });
+            Tray.menu.on("activate", (evt) => { if (evt.reason == 0) Tray.menu.state = Window.WINDOW_HIDDEN; });
+        }
+    }
+});
diff --git a/tray.tis b/tray.tis
@@ -1,58 +1,73 @@
-// Sciter Tray Menu v3.2
-// https://github.com/MustafaHi/Sciter-Tray
+//| Sciter Tray Menu v4.0.0
+//| https://github.com/MustafaHi/Sciter-Tray
 
-var trayMenu = null; // keep null to use tray.htm or give it a selector to use a popup
-var trayCentered = true; // True to center the menu to the TrayIcon
+// var Tray.menu   = undefined; Give it a View window or Element to use as menu.
+// var Tray.center = true;      True to center the menu to the TrayIcon.
 // self.url is not relative if this is inside a folder you must name the folder self.url("folder/tray.htm")
 
-function initTray(trayIcon = true) {
-    if(trayIcon) {
-        view.trayIcon {
-          image: self.loadImage(self.url("TrayIcon06.png")),
-          text: "Welcome!"
-        };
-    } else {
-        view.trayIcon(#remove); 
+const Tray = {
+    center: true,
+    menu  : undefined,
+    init  : function(init = true, content = "Welcome!", icon = "trayicon.png") {
+        if (init) {
+            view.trayIcon {
+            image: self.loadImage(self.url(icon)),
+            text: content
+            };
+        } else {
+            view.trayIcon(#remove); 
+        }
     }
 }
 
 view << event trayicon-click(evt) {
-  // if the main app window not showing on top add  view.windowTopmost = true;  then  view.windowTopmost = false;
-    if (evt.buttons == 1) {view.state = View.WINDOW_SHOWN; view.focus = self; view.windowTopmost = true; view.windowTopmost = false; }
+// if the main app window not showing on top add  view.windowTopmost = true;  then  view.windowTopmost = false;
+    if (evt.buttons == 1) { view.state = View.WINDOW_SHOWN; view.focus = self; view.windowTopmost = true; view.windowTopmost = false; }
     else {
-        if(!trayMenu) {
-            function show() { trayMenu.close(); view.state = View.WINDOW_SHOWN; }
-            function hide() { trayMenu.close(); view.state = View.WINDOW_HIDDEN; }
-            function inactive() { trayMenu.close(); trayMenu=null; }
-            function close() { trayMenu.close(); view.close(); }
-            trayMenu = view.window{
-                url: self.url("tray.htm"),
-                state: View.WINDOW_HIDDEN,
-                parameters: { show: show, hide: hide, inactive: inactive, close: close }
-            };
-            var x, y;
-            var (w,h) = trayMenu.box(#dimension);
+        if (Tray.menu?.isElement) {
+            Tray.menu.focus = self;
             var (tx,ty) = view.trayIcon(#place);
+            var (sx,sy) = view.box(#position,#client,#screen);
+            self.popup(Tray.menu, (Tray.center ? 2 : 1), tx - sx, ty - sy);
+        }
+        else {
+
+            if (Tray.menu == undefined)
+                Tray.menu = View.all.find(:v: v.id == "traymenu");
+            if (Tray.menu == undefined) {
+                Tray.menu = view.window{
+                    url  : self.url("tray.htm"),
+                    state: View.WINDOW_HIDDEN,
+                    type : View.POPUP_WINDOW,
+                };
+                Tray.menu.id = "traymenu";
+            }
+
+            var x, y;
+            var (w,h) = Tray.menu.box(#dimension);
+            // var w = Tray.menu.root.intrinsicWidthMax();
+            // var h = Tray.menu.root.intrinsicHeight();
+            var (tx,ty,tw,th)     = view.trayIcon(#place);
             var (sX1,sY1,sX2,sY2) = view.screenBox(#workarea, #rect);
-            if (trayCentered) {
-                tx < sX1 ? x = sX1 : (tx > sX2 ? x = (sX2 - w) : x = (tx-(w/2.5)));
-                ty < (sY1*4) ? y = (ty + 32) : (ty > sY2 ? y = (sY2 - h) : y = ty-h);
-                tx < sX1 || tx - sX2 > 20 ? y += (h/2) : "";
+            if (Tray.center) {
+                tx < sX1 ? x = sX1 : (tx > sX2 ? x = (sX2 - w) : x = (tx-(w/2))+(tw/2));
+                ty < (sY1*4) ? y = (ty + th) : (ty > sY2 ? y = (sY2 - h) : y = ty-h);
+                tx < sX1 || tx - sX2 > 0 ? y += (h/2) : "";
             } else {
                 tx < (sX1*4) ? x = tx : (tx > sX2 ? x = (sX2 - w) : x = tx);
-                ty < (sY1*4) ? y = (ty + 32) : (ty > sY2 ? y = (sY2 - h) : y = ty-h);
+                ty < (sY1*4) ? y = (ty + th) : (ty > sY2 ? y = (sY2 - h) : y = ty-h);
             }
-            trayMenu.move(x.toInteger(), y, w, h);
-            trayMenu.state = View.WINDOW_SHOWN;
-            trayMenu.windowTopmost = true;
-            trayMenu.focus = self;
-        }
-        else if(trayMenu?.isElement) {
-            trayMenu.focus = self;
-            var (tx,ty) = view.trayIcon(#place);
-            var (sx,sy) = view.box(#position,#client,#screen);
-            self.popup(trayMenu, (trayCentered ? 2 : 1), tx - sx, ty - sy);
-            // self.popup(trayMenu, 1, evt.x - sx, evt.y - sy - 10);
+
+            Tray.menu.move(x.limit(0, sX2-w), y.limit(0, sY2-h), w, h, true);
+            Tray.menu.state = View.WINDOW_SHOWN;
+            Tray.menu.windowTopmost = true;
+            Tray.menu.focus = self;
+
+            // Functions for tray.htm
+            Tray.menu.root.on("click", "#show", () => { view.state = View.WINDOW_SHOWN;  });
+            Tray.menu.root.on("click", "#hide", () => { view.state = View.WINDOW_HIDDEN; });
+            Tray.menu.root.on("click", "#exit", () => { Tray.menu.close(); view.close(); });
+            Tray.menu.on("activate", (as) => { if (as === false) Tray.menu.state = View.WINDOW_HIDDEN; });
         }
     }
 }
diff --git a/TrayIcon06.png → trayicon.png b/TrayIcon06.png → trayicon.png