Update 03 Version 1.3.0 JS Port

MustafaHi · MustafaHi · commit 6105fabd3e3d · 2021-03-29T01:16:53.000+03:00
- Javascript port
- License `The Unlicense`
- Number class extended by `limit()` function, like `Integer.limit()` in Sciter.TIS
- Now it's usable inside standard windows
- Versioning work as followed
`Major.Improve.Fix`, the last not needed to be synced between JS/TIS.
diff --git a/LICENCE b/LICENCE
@@ -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,4 +1,8 @@
-# MovableView v1.2
+# MovableView 
+```lua
+> Tiscript   : 1.3.0
+> Javascript : 1.3.0
+```
 Movable view for Sciter windows, allows you to move the window using any element in it.  
 Advantages:
 1. Cheating windows performance setting, you will see the full window and not just a rectangle while moving it in performance mode.
@@ -12,21 +16,24 @@ Using inside a compiled application should use less than 1% CPU (while moving th
 ## Install
 Add this file to your resources/UI folder
 ```php
-movableView.tis
+movableView.tis // OR
+movableView.js
 ```
 
 Then add the file to your project either from HTML :
 ```html
-<script src="movableView.tis" type="text/tiscript"></script>
+<script src="movableView.tis" type="text/tiscript"></script> // OR
+<script src="movableView.js"  type="text/javascript"></script>
 ```
 or from your main script file :
-```php
-include "movableView.tis";
+```js
+include "movableView.tis"; // OR
+import movableView from "movableView.js" // uncomment last line in `movableView.js`
 ```
 
 Then initiate it by calling
 ```js
 movableView("selector" [, screenBound:bool(false)]);
 ```
 with the selector being any CSS selector i.e. `div` `.div` `#div`  
-the second parameter will prevent window from going past the screen boundaries.
+the second parameter `true|false` to prevent window from going past the screen boundaries.
diff --git a/demo.htm b/demo.htm
@@ -12,14 +12,21 @@
     }
   </style>
   <script src="movableView.tis" type="text/tiscript"></script>
+  <script src="movableView.js"  type="text/javascript"></script>
   <script type="text/tiscript">
+    // include "movableView.tis";
+    movableView(".header");
+    movableView(".footer", true);
+  </script>
+  <script type="text/javascript" type="module">
+    // import movableView from "movableView.js";
     movableView(".header");
     movableView(".footer", true);
   </script>
 </head>
 <body>
   <div class="header">Header</div>
-  <div class="content">Content - Grab the header or footer to move (footer will not allow you to cross screen bounds)</div>
+  <div class="content">Grab the header or footer to move (footer will not allow you to cross screen bounds)</div>
   <div class="footer">Footer</div>
 </body>
 </html>
diff --git a/movableView.js b/movableView.js
@@ -1,12 +1,14 @@
-// Movable View v1.2 EXPERIMENTAL JS PORT 02
-// https://github.com/MustafaHi/Sciter-MovableView
+//| Movable View v1.3.0
+//| https://github.com/MustafaHi/Sciter-MovableView
 
-// Call movableView('selector' [, screenBound:bool(false)]);
+// Call movableView('selector', true|false);
 
-Number.prototype.limit = function(min,max) {
-  if (this < min) return min;
-  if (this > max) return max;
-  return this;
+if (!Number.prototype.limit) {
+  Number.prototype.limit = function(min,max) {
+    if (this < min) return min;
+    if (this > max) return max;
+    return this;
+  }
 }
 
 function movableView(s, screenBound = false)
@@ -26,46 +28,48 @@ function movableView(s, screenBound = false)
     }
     else
     {
-      maxX = Number.MAX_SAFE_INTEGER;
-      maxY = Number.MAX_SAFE_INTEGER;
+      maxX  = Number.MAX_SAFE_INTEGER;
+      maxY  = Number.MAX_SAFE_INTEGER;
       minXY = Number.MIN_SAFE_INTEGER;
     }
   }
 
   function onMouseDown(e)
   {
     screenBounds();
+    e.target.state.capture(true);
+
     var [x,y] = Window.this.box("position", "border", "screen");
     xoff = e.screenX - x; yoff = e.screenY - y;
-    dragging = true;
 
-    document.on("mouseup"  , onMouseUp   );
-    document.on("mousemove", onMouseMove );
-    e.preventDefault();
-    e.stopPropagation();
+    dragging = true;
   }
   
   function onMouseMove(e)
   {
     if(dragging)
     {
-      e.preventDefault();
       Window.this.move((e.screenX - xoff).limit(minXY, maxX), (e.screenY - yoff).limit(minXY, maxY));
     }
   }
 
   function onMouseUp(e)
   {
-    if(dragging) { dragging = false; }
-    document.off("mouseup");
-    document.off("mousemove");
-    e.preventDefault();
+    if(dragging)
+    {
+      dragging = false;
+      e.target.state.capture(false);
+    }
   }
 
   const elements = document.querySelectorAll(s);
   for(var i=0; i<elements.length; ++i) {
     elements[i].on("mousedown", onMouseDown );
+    elements[i].on("mousemove", onMouseMove );
+    elements[i].on("mouseup",   onMouseUp   );
   }
-  return true;
+  return elements.length ? true : false;
 }
 
+//| Module export (uncomment bellow)
+// export { movableView as default };
diff --git a/movableView.tis b/movableView.tis
@@ -1,7 +1,8 @@
-// Movable View v1.2
-// https://github.com/MustafaHi/Sciter-MovableView
+//| Movable View v1.3.0
+//| https://github.com/MustafaHi/Sciter-MovableView
+
+// Call movableView('selector', true|false);
 
-// Call movableView('selector' [, screenBound:bool(false)]);
 function movableView(s, screenBound = false)
 {
   var xoff,yoff, minXY, maxX, maxY;
@@ -32,7 +33,10 @@ function movableView(s, screenBound = false)
 
     screenBounds();
     e.target.capture(true);
-    xoff = e.xView; yoff = e.yView;
+
+    var (x,y) = view.box(#position, #border, #screen);
+    xoff = e.xScreen - x; yoff = e.yScreen - y;
+
     dragging = true;
     doDrag();
   }
@@ -43,13 +47,15 @@ function movableView(s, screenBound = false)
     {
       view.move( (e.xScreen - xoff).limit(minXY, maxX), (e.yScreen - yoff).limit(minXY, maxY), false );
     }
-    return true;
   }
     
   function onMouseUp(e)
   {
-    if(dragging) { dragging = false; e.target.capture(false); }
-    return true;
+    if(dragging)
+    {
+      dragging = false;
+      e.target.capture(false);
+    }
   }
     
     const elements = $$({s});
@@ -58,6 +64,6 @@ function movableView(s, screenBound = false)
       elements[i].subscribe(onMouseUp,   Event.MOUSE, Event.MOUSE_UP   );
       elements[i].subscribe(onMouseMove, Event.MOUSE, Event.MOUSE_MOVE );
     }
-  return true;
+  return elements.length ? true : false;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -1,12 +1,14 @@`
`1`		`-// Movable View v1.2 EXPERIMENTAL JS PORT 02`
`2`		`-// https://github.com/MustafaHi/Sciter-MovableView`
	`1`	`+//\| Movable View v1.3.0`
	`2`	`+//\| https://github.com/MustafaHi/Sciter-MovableView`
`3`	`3`
`4`		`-// Call movableView('selector' [, screenBound:bool(false)]);`
	`4`	`+// Call movableView('selector', true\|false);`
`5`	`5`
`6`		`-Number.prototype.limit = function(min,max) {`
`7`		`- if (this < min) return min;`
`8`		`- if (this > max) return max;`
`9`		`- return this;`
	`6`	`+if (!Number.prototype.limit) {`
	`7`	`+ Number.prototype.limit = function(min,max) {`
	`8`	`+ if (this < min) return min;`
	`9`	`+ if (this > max) return max;`
	`10`	`+ return this;`
	`11`	`+ }`
`10`	`12`	`}`
`11`	`13`
`12`	`14`	`function movableView(s, screenBound = false)`
`@@ -26,46 +28,48 @@ function movableView(s, screenBound = false)`
`26`	`28`	`}`
`27`	`29`	`else`
`28`	`30`	`{`
`29`		`- maxX = Number.MAX_SAFE_INTEGER;`
`30`		`- maxY = Number.MAX_SAFE_INTEGER;`
	`31`	`+ maxX = Number.MAX_SAFE_INTEGER;`
	`32`	`+ maxY = Number.MAX_SAFE_INTEGER;`
`31`	`33`	`minXY = Number.MIN_SAFE_INTEGER;`
`32`	`34`	`}`
`33`	`35`	`}`
`34`	`36`
`35`	`37`	`function onMouseDown(e)`
`36`	`38`	`{`
`37`	`39`	`screenBounds();`
	`40`	`+ e.target.state.capture(true);`
	`41`	`+`
`38`	`42`	`var [x,y] = Window.this.box("position", "border", "screen");`
`39`	`43`	`xoff = e.screenX - x; yoff = e.screenY - y;`
`40`		`- dragging = true;`
`41`	`44`
`42`		`- document.on("mouseup" , onMouseUp );`
`43`		`- document.on("mousemove", onMouseMove );`
`44`		`- e.preventDefault();`
`45`		`- e.stopPropagation();`
	`45`	`+ dragging = true;`
`46`	`46`	`}`
`47`	`47`
`48`	`48`	`function onMouseMove(e)`
`49`	`49`	`{`
`50`	`50`	`if(dragging)`
`51`	`51`	`{`
`52`		`- e.preventDefault();`
`53`	`52`	`Window.this.move((e.screenX - xoff).limit(minXY, maxX), (e.screenY - yoff).limit(minXY, maxY));`
`54`	`53`	`}`
`55`	`54`	`}`
`56`	`55`
`57`	`56`	`function onMouseUp(e)`
`58`	`57`	`{`
`59`		`- if(dragging) { dragging = false; }`
`60`		`- document.off("mouseup");`
`61`		`- document.off("mousemove");`
`62`		`- e.preventDefault();`
	`58`	`+ if(dragging)`
	`59`	`+ {`
	`60`	`+ dragging = false;`
	`61`	`+ e.target.state.capture(false);`
	`62`	`+ }`
`63`	`63`	`}`
`64`	`64`
`65`	`65`	`const elements = document.querySelectorAll(s);`
`66`	`66`	`for(var i=0; i<elements.length; ++i) {`
`67`	`67`	`elements[i].on("mousedown", onMouseDown );`
	`68`	`+ elements[i].on("mousemove", onMouseMove );`
	`69`	`+ elements[i].on("mouseup", onMouseUp );`
`68`	`70`	`}`
`69`		`- return true;`
	`71`	`+ return elements.length ? true : false;`
`70`	`72`	`}`
`71`	`73`
	`74`	`+//\| Module export (uncomment bellow)`
	`75`	`+// export { movableView as default };`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,8 @@`
`1`		`-// Movable View v1.2`
`2`		`-// https://github.com/MustafaHi/Sciter-MovableView`
	`1`	`+//\| Movable View v1.3.0`
	`2`	`+//\| https://github.com/MustafaHi/Sciter-MovableView`
	`3`	`+`
	`4`	`+// Call movableView('selector', true\|false);`
`3`	`5`
`4`		`-// Call movableView('selector' [, screenBound:bool(false)]);`
`5`	`6`	`function movableView(s, screenBound = false)`
`6`	`7`	`{`
`7`	`8`	`var xoff,yoff, minXY, maxX, maxY;`
`@@ -32,7 +33,10 @@ function movableView(s, screenBound = false)`
`32`	`33`
`33`	`34`	`screenBounds();`
`34`	`35`	`e.target.capture(true);`
`35`		`- xoff = e.xView; yoff = e.yView;`
	`36`	`+`
	`37`	`+ var (x,y) = view.box(#position, #border, #screen);`
	`38`	`+ xoff = e.xScreen - x; yoff = e.yScreen - y;`
	`39`	`+`
`36`	`40`	`dragging = true;`
`37`	`41`	`doDrag();`
`38`	`42`	`}`
`@@ -43,13 +47,15 @@ function movableView(s, screenBound = false)`
`43`	`47`	`{`
`44`	`48`	`view.move( (e.xScreen - xoff).limit(minXY, maxX), (e.yScreen - yoff).limit(minXY, maxY), false );`
`45`	`49`	`}`
`46`		`- return true;`
`47`	`50`	`}`
`48`	`51`
`49`	`52`	`function onMouseUp(e)`
`50`	`53`	`{`
`51`		`- if(dragging) { dragging = false; e.target.capture(false); }`
`52`		`- return true;`
	`54`	`+ if(dragging)`
	`55`	`+ {`
	`56`	`+ dragging = false;`
	`57`	`+ e.target.capture(false);`
	`58`	`+ }`
`53`	`59`	`}`
`54`	`60`
`55`	`61`	`const elements = $$({s});`
`@@ -58,6 +64,6 @@ function movableView(s, screenBound = false)`
`58`	`64`	`elements[i].subscribe(onMouseUp, Event.MOUSE, Event.MOUSE_UP );`
`59`	`65`	`elements[i].subscribe(onMouseMove, Event.MOUSE, Event.MOUSE_MOVE );`
`60`	`66`	`}`
`61`		`- return true;`
	`67`	`+ return elements.length ? true : false;`
`62`	`68`	`}`
`63`	`69`