vue-custom-horizontal-sliding - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

customHorizontalSliding.js

@@ -1,2 +0,1 @@
-// Use class 'trix-slider-selector' to select text in the v-trix-horizontal-slider slider
 import $ from 'jquery';
@@ -6,72 +5,73 @@
     install: (app, options) => {
-        app.directive('trix-horizontal-slider', (el, binding, vnode) => {
-            let addingClass = 'sliding';
-            if (binding.value) {
-                addingClass = binding.value
-            }
+        app.directive('trix-horizontal-slider', {
+            mounted(el, binding, vnode) {
+                console.log('Trix horizontal slider directive bound');
+                let addingClass = 'sliding';
+                if (binding.value) {
+                    addingClass = binding.value;
+                }
 
-            let mouseDownOnElement = false;
-            if (binding.modifiers) {
-                if (binding.modifiers.hasOwnProperty('overElement')) {
+                let mouseDownOnElement = false;
+                if (binding.modifiers && binding.modifiers.hasOwnProperty('overElement')) {
                     mouseDownOnElement = true;
                 }
-            }
 
-            el.addEventListener('mousedown', (e) => {
-                if (e.which !== 1) return
-                else if (el.scrollWidth <= el.clientWidth) return
+                const onMouseDown = (e) => {
+                    if (e.which !== 1) return;
+                    if (el.scrollWidth <= el.clientWidth) return;
 
-                for (const key in e.path) {
-                    const thisPath = e.path[key];
+                    for (const key in e.path) {
+                        const thisPath = e.path[key];
 
-                    if (thisPath == el) {
-                        break
-                    } else if (!mouseDownOnElement && thisPath.classList.contains('trix-slider-selector')) {
-                        return
+                        if (thisPath === el) {
+                            break;
+                        } else if (!mouseDownOnElement && thisPath.classList.contains('trix-slider-selector')) {
+                            return;
+                        }
                     }
-                }
-                let mouseStartX = e.screenX
-                let lastMousePosX = mouseStartX
-                let firstMouseMoveEmited = false
-                // console.log('onmousedown');
 
-                document.addEventListener('mousemove', onSlideMouseMove)
-                el.addEventListener('mouseleave', onSlideEnd)
-                document.addEventListener('mouseup', onSlideEnd)
+                    let mouseStartX = e.screenX;
+                    let lastMousePosX = mouseStartX;
+                    let firstMouseMoveEmited = false;
 
-                function onSlideEnd() {
-                    // console.log('onmouseup');
-                    el.classList.remove(addingClass)
-                    $(el).css({
-                        'scroll-snap-type': '',
-                        'scroll-behavior': ''
-                    })
-                    document.removeEventListener('mousemove', onSlideMouseMove)
-                    el.removeEventListener('mouseleave', onSlideEnd)
-                    document.removeEventListener('mouseup', onSlideEnd)
-                }
+                    const onSlideMouseMove = (e) => {
+                        if (!firstMouseMoveEmited) {
+                            firstMouseMoveEmited = true;
+                            el.classList.add(addingClass);
+                            $(el).css({
+                                'scroll-snap-type': 'none',
+                                'scroll-behavior': 'unset'
+                            });
+                        }
 
-                function onSlideMouseMove(e) {
-                    let thisScrollLeft = el.scrollLeft
-                    // if (thisScrollLeft <= 0 && lastMousePosX <= e.screenX) {
-                    //     lastMousePosX = e.screenX
-                    //     return
-                    // }
+                        let delta = lastMousePosX - e.screenX;
+                        el.scrollLeft += delta;
+                        lastMousePosX = e.screenX;
+                    };
 
-                    if (!firstMouseMoveEmited) {
-                        firstMouseMoveEmited = true
-                        el.classList.add(addingClass)
+                    const onSlideEnd = () => {
+                        el.classList.remove(addingClass);
                         $(el).css({
-                            'scroll-snap-type': 'none',
-                            'scroll-behavior': 'unset'
-                        })
-                    }
+                            'scroll-snap-type': '',
+                            'scroll-behavior': ''
+                        });
+                        document.removeEventListener('mousemove', onSlideMouseMove);
+                        el.removeEventListener('mouseleave', onSlideEnd);
+                        document.removeEventListener('mouseup', onSlideEnd);
+                    };
 
-                    let delta = lastMousePosX - e.screenX
-                    el.scrollLeft += delta
-                    lastMousePosX = e.screenX
-                }
-            })
-        })
+                    document.addEventListener('mousemove', onSlideMouseMove);
+                    el.addEventListener('mouseleave', onSlideEnd);
+                    document.addEventListener('mouseup', onSlideEnd);
+                };
+
+                el.__onMouseDown__ = onMouseDown; // Save reference to the handler
+                el.addEventListener('mousedown', onMouseDown);
+            },
+            beforeUnmount(el) {
+                el.removeEventListener('mousedown', el.__onMouseDown__);
+                delete el.__onMouseDown__;
+            }
+        });
     }
-}
+};

customHorizontalSliding.min.js

@@ -1,1 +0,1 @@
-import $ from"jquery";export default{install:(e,t)=>{e.directive("trix-horizontal-slider",((e,t,s)=>{let r="sliding";t.value&&(r=t.value);let n=!1;t.modifiers&&t.modifiers.hasOwnProperty("overElement")&&(n=!0),e.addEventListener("mousedown",(t=>{if(1!==t.which)return;if(e.scrollWidth<=e.clientWidth)return;for(const s in t.path){const r=t.path[s];if(r==e)break;if(!n&&r.classList.contains("trix-slider-selector"))return}let s=t.screenX,o=!1;function i(){e.classList.remove(r),$(e).css({"scroll-snap-type":"","scroll-behavior":""}),document.removeEventListener("mousemove",l),e.removeEventListener("mouseleave",i),document.removeEventListener("mouseup",i)}function l(t){e.scrollLeft;o||(o=!0,e.classList.add(r),$(e).css({"scroll-snap-type":"none","scroll-behavior":"unset"}));let n=s-t.screenX;e.scrollLeft+=n,s=t.screenX}document.addEventListener("mousemove",l),e.addEventListener("mouseleave",i),document.addEventListener("mouseup",i)}))}))}};
+import $ from"jquery";export default{install:(e,o)=>{e.directive("trix-horizontal-slider",{mounted(e,o,t){console.log("Trix horizontal slider directive bound");let s="sliding";o.value&&(s=o.value);let n=!1;o.modifiers&&o.modifiers.hasOwnProperty("overElement")&&(n=!0);const r=o=>{if(1!==o.which)return;if(e.scrollWidth<=e.clientWidth)return;for(const t in o.path){const s=o.path[t];if(s===e)break;if(!n&&s.classList.contains("trix-slider-selector"))return}let t=o.screenX,r=!1;const i=o=>{r||(r=!0,e.classList.add(s),$(e).css({"scroll-snap-type":"none","scroll-behavior":"unset"}));let n=t-o.screenX;e.scrollLeft+=n,t=o.screenX},l=()=>{e.classList.remove(s),$(e).css({"scroll-snap-type":"","scroll-behavior":""}),document.removeEventListener("mousemove",i),e.removeEventListener("mouseleave",l),document.removeEventListener("mouseup",l)};document.addEventListener("mousemove",i),e.addEventListener("mouseleave",l),document.addEventListener("mouseup",l)};e.__onMouseDown__=r,e.addEventListener("mousedown",r)},beforeUnmount(e){e.removeEventListener("mousedown",e.__onMouseDown__),delete e.__onMouseDown__}})}};

package.json

 {
   "name": "vue-custom-horizontal-sliding",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
@@ -5,0 +5,0 @@ "main": "customHorizontalSliding.min.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8187

increased by66.47%

Number of package files

5

increased by25%

Lines of code

129

increased by98.46%

No dependency changes