From 9b86435033a89e0d004f4fa3c4dbeff24f84c172 Mon Sep 17 00:00:00 2001 From: bebraw Date: Wed, 25 Oct 2023 09:02:50 +0000 Subject: [PATCH] deploy: e4e3cccea3f0aab3fa17bf62c2e6086b5991c267 --- assets/css/demo.css | 67 ++++++++++++++++++++++++++++++++ demo.js | 1 + index.html | 93 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 161 insertions(+) create mode 100644 assets/css/demo.css create mode 100644 demo.js create mode 100644 index.html diff --git a/assets/css/demo.css b/assets/css/demo.css new file mode 100644 index 0000000..8e57dfc --- /dev/null +++ b/assets/css/demo.css @@ -0,0 +1,67 @@ +#value { + position: fixed; + right: 0; + bottom: 0; + margin-right: 1em; + margin-bottom: 1em; +} + +#draggableParent { + position: relative; +} + +#draggable { + right: 0; + position: absolute; + background-color: #ada; + border: 1px solid black; + width: 100px; + height: 100px; + text-align: center; + cursor: move; +} + +#twodContainer { + top: 50px; + left: 50px; + overflow: scroll; + width: 150px; + height: 150px; +} + +.twod { + background-color: #aad; + border: 1px solid black; + width: 200px; + height: 200px; + cursor: move; +} + +.twod .pointer { + position: relative; + z-index: 2; + margin-left: -7px; + margin-top: -7px; + width: 10px; + height: 10px; + border: 2px solid black; + -mox-border-radius: 5px; + border-radius: 5px; +} + +.oned { + background-color: #daa; + border: 1px solid black; + width: 300px; + height: 30px; + cursor: move; +} + +.oned .pointer { + position: relative; + background-color: black; + z-index: 2; + margin-left: -2px; + width: 4px; + height: 30px; +} diff --git a/demo.js b/demo.js new file mode 100644 index 0000000..0abbbbd --- /dev/null +++ b/demo.js @@ -0,0 +1 @@ +function d({element:n,handle:e,xPosition:t},r){if(!n){console.warn("drag is missing elem!");return}p(n,"touchstart","touchmove","touchend",r,e,t),p(n,"mousedown","mousemove","mouseup",r,e,t)}function x(n){let e=l(n.class||"",n.parent),t=l("pointer",e);return l("shape shape1",t),l("shape shape2",t),l("bg bg1",e),l("bg bg2",e),d({element:e},T(n.cbs,t)),{background:e,pointer:t}}function C(n){let e=l(n.class,n.parent),t=l("pointer",e);return l("shape",t),l("bg",e),d({element:e},T(n.cbs,t)),{background:e,pointer:t}}function T(n,e){let t={};return Object.entries(n).forEach(([r,i])=>{t[r]=o=>{i({...o,pointer:e})}}),t}function l(n,e){return H("div",n,e)}function H(n,e,t){let r=document.createElement(n);return e&&(r.className=e),t.appendChild(r),r}function p(n,e,t,r,i,o,s){i=w(i,s);let c=i.begin,u=i.change,M=i.end;m(o||n,e,b=>{let y=L=>f(u,n,L);function h(){E(document,t,y),E(document,r,h),f(M,n,b)}m(document,t,y),m(document,r,h),f(c,n,b)})}function m(n,e,t){let r=!1;try{let i=Object.defineProperty({},"passive",{get:function(){r=!0}});globalThis.addEventListener("testPassive",null,i),globalThis.removeEventListener("testPassive",null,i)}catch(i){console.error(i)}n.addEventListener(e,t,r?{passive:!1}:!1)}function E(n,e,t){n.removeEventListener(e,t,!1)}function w(n,e="left"){let t,r,i={begin:o=>{let s=document.body.clientWidth;t={x:e==="left"?o.elem.offsetLeft:s-o.elem.offsetLeft-o.elem.clientWidth,y:o.elem.offsetTop},r=e==="left"?o.cursor:{x:s-o.cursor.x,y:o.cursor.y}},change:o=>{if(typeof t.x!="number"||typeof o.cursor.x!="number"||typeof r.x!="number")return;let s=document.body.clientWidth;v(o.elem,e,e==="left"?t.x+o.cursor.x-r.x+"px":t.x+(s-o.cursor.x)-r.x+"px"),!(typeof t.y!="number"||typeof o.cursor.y!="number"||typeof r.y!="number")&&v(o.elem,"top",t.y+o.cursor.y-r.y+"px")},end:k};return n?{begin:n.begin?o=>{if(n.begin&&n.begin(o))return i.begin(o)}:i.begin,change:n.change?o=>{let s=n.change&&n.change(o);if(console.log("at change",s),s)return i.change(o)}:i.change,end:n.end||i.end}:i}function v(n,e,t){n.style[e]=t}function k(){}function f(n,e,t){t.preventDefault();let r=P(e),i=e.clientWidth,o=e.clientHeight,s={x:W(e,t),y:B(e,t)};if(typeof s.x!="number"||typeof s.y!="number")return;let c=(s.x-r.x)/i,u=(s.y-r.y)/o;n({x:isNaN(c)?0:c,y:isNaN(u)?0:u,cursor:s,elem:e,e:t})}function P(n){let e=n.getBoundingClientRect();return{x:e.left,y:e.top}}function W(n,e){return window.TouchEvent&&e instanceof window.TouchEvent?e.touches.item(0)?.clientX:e.clientX}function B(n,e){return window.TouchEvent&&e instanceof window.TouchEvent?e.touches.item(0)?.clientY:e.clientY}window.onload=function(){let n=document.getElementById("draggable");n&&d({element:n},{change:({x:r,y:i})=>(a("draggable x:"+r.toFixed(2)+", y: "+i.toFixed(2)),!0)});let e=document.getElementById("onedContainer");e&&C({parent:e,class:"oned",cbs:{begin:()=>{a("2dslider: begin")},change:({x:r,pointer:i})=>{let o=g(r*100,0,100).toFixed(2)+"%";a("2dslider: "+o),i&&(i.style.left=o)},end:()=>{a("2dslider: end")}}});let t=document.getElementById("twodContainer");t&&x({parent:t,class:"twod",cbs:{change:({x:r,y:i,pointer:o})=>{let s=g(r*100,0,100).toFixed(2)+"%",c=g(i*100,0,100).toFixed(2)+"%";a("x: "+s+", y: "+c),o&&(o.style.left=s,o.style.top=c)}}})};function a(n){let e=document.getElementById("value");console.log(n),e&&(e.innerHTML=n)}function g(n,e,t){return Math.min(Math.max(n,e),t)} diff --git a/index.html b/index.html new file mode 100644 index 0000000..d27c8ce --- /dev/null +++ b/index.html @@ -0,0 +1,93 @@ +dragjs

✥dragjs

Easy dragging with JavaScript

dragjs has been designed to make it easy to create JavaScript based drag interactions. This includes use cases such as draggable panels and different types of sliders. The idea is that you use the logic from this package to build your own components as it captures concerns such as mouse and touch handling.

Demonstrations

 +
+ +

Simple draggable

 +
+
Drag me!
+
+ + +
import { draggable } from "dragjs";
+
+const draggableElement = document.getElementById("draggable");
+
+draggableElement && draggable({ element: draggableElement });
+
+

Draggable with a specific handle

 +
+
+
Header
+
Body
+
+
+ + +
import { draggable } from "dragjs";
+
+const element = document.getElementById("draggable");
+const handle = element.children[0];
+
+element && draggable({ element, handle });
+
+

1D slider

 +
+ +
import { slider } from "dragjs";
+
+const onedContainer = document.getElementById("onedContainer");
+
+onedContainer && slider({
+  parent: onedContainer,
+  "class": "oned",
+  cbs: {
+    begin: () => {
+      log("2dslider: begin");
+    },
+    change: ({ x, pointer }) => {
+      const newX = clamp(x * 100, 0, 100).toFixed(2) + "%";
+
+      console.log("2dslider: " + newX);
+
+      if (pointer) {
+        pointer.style.left = newX;
+      }
+    },
+    end: () => {
+      log("2dslider: end");
+    },
+  },
+});
+
+

2D slider

 +
+ +
import { xyslider } from "dragjs";
+
+const twodContainer = document.getElementById("twodContainer");
+
+twodContainer && xyslider({
+  parent: twodContainer,
+  "class": "twod",
+  cbs: {
+    change: ({ x, y, pointer }) => {
+      const newX = clamp(x * 100, 0, 100).toFixed(2) + "%";
+      const newY = clamp(y * 100, 0, 100).toFixed(2) + "%";
+
+      console.log("x: " + newX + ", y: " + newY);
+
+      if (pointer) {
+        pointer.style.left = newX;
+        pointer.style.top = newY;
+      }
+    },
+  },
+});
+
+

Contributors

 + +

Development

 +

Run the available commands through deno task.

To publish, tag a release with the desired version (i.e. git tag 0.13.0) and then git push.

License

 +

dragjs is available under MIT. See LICENSE for more details.

\ No newline at end of file