From d5d355bb308614220a84e3a31a640b4780f87e63 Mon Sep 17 00:00:00 2001 From: Vova Date: Mon, 2 Jan 2023 15:10:04 +0100 Subject: [PATCH] className is not always a string (e.g. for svg elements) We need to add an additional check for cases where className is not a string and hence does not have a "match" property. --- dist/vue-multipane.esm.js | 2 +- dist/vue-multipane.js | 2 +- dist/vue-multipane.min.js | 2 +- src/multipane.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/dist/vue-multipane.esm.js b/dist/vue-multipane.esm.js index 06fc1ac..69e0e06 100644 --- a/dist/vue-multipane.esm.js +++ b/dist/vue-multipane.esm.js @@ -1 +1 @@ -var LAYOUT_HORIZONTAL="horizontal",LAYOUT_VERTICAL="vertical",__vue_module__={name:"multipane",props:{layout:{type:String,default:LAYOUT_VERTICAL}},data:function(){return{isResizing:!1}},computed:{classnames:function(){return["multipane","layout-"+this.layout.slice(0,1),this.isResizing?"is-resizing":""]},cursor:function(){return this.isResizing?this.layout==LAYOUT_VERTICAL?"col-resize":"row-resize":""},userSelect:function(){return this.isResizing?"none":""}},methods:{onMouseDown:function(e){var t=e.target,i=e.pageX,n=e.pageY;if(t.className&&t.className.match("multipane-resizer")){var s=this,o=s.$el,a=s.layout,u=t.previousElementSibling,r=u.offsetWidth,l=u.offsetHeight,d=!!(u.style.width+"").match("%"),c=window.addEventListener,p=window.removeEventListener,m=function(e,t){if(void 0===t&&(t=0),a==LAYOUT_VERTICAL){var i=o.clientWidth,n=e+t;return u.style.width=d?n/i*100+"%":n+"px"}if(a==LAYOUT_HORIZONTAL){var s=o.clientHeight,r=e+t;return u.style.height=d?r/s*100+"%":r+"px"}};s.isResizing=!0;var _=m();s.$emit("paneResizeStart",u,t,_);var h=function(e){var o=e.pageX,d=e.pageY;_=a==LAYOUT_VERTICAL?m(r,o-i):m(l,d-n),s.$emit("paneResize",u,t,_)},f=function(){_=m(a==LAYOUT_VERTICAL?u.clientWidth:u.clientHeight),s.isResizing=!1,p("mousemove",h),p("mouseup",f),s.$emit("paneResizeStop",u,t,_)};c("mousemove",h),c("mouseup",f)}}}};!function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style"),i=".multipane { display: flex; } .multipane.layout-h { flex-direction: column; } .multipane.layout-v { flex-direction: row; } .multipane > div { position: relative; z-index: 1; } .multipane-resizer { display: block; position: relative; z-index: 2; } .layout-h > .multipane-resizer { width: 100%; height: 10px; margin-top: -10px; top: 5px; cursor: row-resize; } .layout-v > .multipane-resizer { width: 10px; height: 100%; margin-left: -10px; left: 5px; cursor: col-resize; } ";t.type="text/css",t.styleSheet?t.styleSheet.cssText=i:t.appendChild(document.createTextNode(i)),e.appendChild(t)}}();var __$__vue_module__=Object.assign(__vue_module__,{render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{class:e.classnames,style:{cursor:e.cursor,userSelect:e.userSelect},on:{mousedown:e.onMouseDown}},[e._t("default")],2)},staticRenderFns:[]});__$__vue_module__.prototype=__vue_module__.prototype,function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",t.styleSheet?t.styleSheet.cssText="":t.appendChild(document.createTextNode("")),e.appendChild(t)}}();var MultipaneResizer={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"multipane-resizer"},[e._t("default")],2)},staticRenderFns:[]};"undefined"!=typeof window&&window.Vue&&(window.Vue.component("multipane",__$__vue_module__),window.Vue.component("multipane-resizer",MultipaneResizer));export{__$__vue_module__ as Multipane,MultipaneResizer}; +var LAYOUT_HORIZONTAL="horizontal",LAYOUT_VERTICAL="vertical",__vue_module__={name:"multipane",props:{layout:{type:String,default:LAYOUT_VERTICAL}},data:function(){return{isResizing:!1}},computed:{classnames:function(){return["multipane","layout-"+this.layout.slice(0,1),this.isResizing?"is-resizing":""]},cursor:function(){return this.isResizing?this.layout==LAYOUT_VERTICAL?"col-resize":"row-resize":""},userSelect:function(){return this.isResizing?"none":""}},methods:{onMouseDown:function(e){var t=e.target,i=e.pageX,n=e.pageY;if(t.className&&t.className.match&&t.className.match("multipane-resizer")){var s=this,o=s.$el,a=s.layout,u=t.previousElementSibling,r=u.offsetWidth,l=u.offsetHeight,d=!!(u.style.width+"").match("%"),c=window.addEventListener,p=window.removeEventListener,m=function(e,t){if(void 0===t&&(t=0),a==LAYOUT_VERTICAL){var i=o.clientWidth,n=e+t;return u.style.width=d?n/i*100+"%":n+"px"}if(a==LAYOUT_HORIZONTAL){var s=o.clientHeight,r=e+t;return u.style.height=d?r/s*100+"%":r+"px"}};s.isResizing=!0;var _=m();s.$emit("paneResizeStart",u,t,_);var h=function(e){var o=e.pageX,d=e.pageY;_=a==LAYOUT_VERTICAL?m(r,o-i):m(l,d-n),s.$emit("paneResize",u,t,_)},f=function(){_=m(a==LAYOUT_VERTICAL?u.clientWidth:u.clientHeight),s.isResizing=!1,p("mousemove",h),p("mouseup",f),s.$emit("paneResizeStop",u,t,_)};c("mousemove",h),c("mouseup",f)}}}};!function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style"),i=".multipane { display: flex; } .multipane.layout-h { flex-direction: column; } .multipane.layout-v { flex-direction: row; } .multipane > div { position: relative; z-index: 1; } .multipane-resizer { display: block; position: relative; z-index: 2; } .layout-h > .multipane-resizer { width: 100%; height: 10px; margin-top: -10px; top: 5px; cursor: row-resize; } .layout-v > .multipane-resizer { width: 10px; height: 100%; margin-left: -10px; left: 5px; cursor: col-resize; } ";t.type="text/css",t.styleSheet?t.styleSheet.cssText=i:t.appendChild(document.createTextNode(i)),e.appendChild(t)}}();var __$__vue_module__=Object.assign(__vue_module__,{render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{class:e.classnames,style:{cursor:e.cursor,userSelect:e.userSelect},on:{mousedown:e.onMouseDown}},[e._t("default")],2)},staticRenderFns:[]});__$__vue_module__.prototype=__vue_module__.prototype,function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",t.styleSheet?t.styleSheet.cssText="":t.appendChild(document.createTextNode("")),e.appendChild(t)}}();var MultipaneResizer={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"multipane-resizer"},[e._t("default")],2)},staticRenderFns:[]};"undefined"!=typeof window&&window.Vue&&(window.Vue.component("multipane",__$__vue_module__),window.Vue.component("multipane-resizer",MultipaneResizer));export{__$__vue_module__ as Multipane,MultipaneResizer}; diff --git a/dist/vue-multipane.js b/dist/vue-multipane.js index 2e60aab..946830c 100644 --- a/dist/vue-multipane.js +++ b/dist/vue-multipane.js @@ -46,7 +46,7 @@ var __vue_module__ = { var initialPageX = ref.pageX; var initialPageY = ref.pageY; - if (resizer.className && resizer.className.match('multipane-resizer')) { + if (resizer.className && resizer.className.match && resizer.className.match('multipane-resizer')) { var self = this; var container = self.$el; var layout = self.layout; diff --git a/dist/vue-multipane.min.js b/dist/vue-multipane.min.js index f7eb071..e357f29 100644 --- a/dist/vue-multipane.min.js +++ b/dist/vue-multipane.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.Multipane={})}(this,function(e){"use strict";var t={name:"multipane",props:{layout:{type:String,default:"vertical"}},data:function(){return{isResizing:!1}},computed:{classnames:function(){return["multipane","layout-"+this.layout.slice(0,1),this.isResizing?"is-resizing":""]},cursor:function(){return this.isResizing?"vertical"==this.layout?"col-resize":"row-resize":""},userSelect:function(){return this.isResizing?"none":""}},methods:{onMouseDown:function(e){var t=e.target,i=e.pageX,n=e.pageY;if(t.className&&t.className.match("multipane-resizer")){var s=this,o=s.$el,r=s.layout,a=t.previousElementSibling,u=a.offsetWidth,l=a.offsetHeight,c=!!(a.style.width+"").match("%"),d=window.addEventListener,p=window.removeEventListener,m=function(e,t){if(void 0===t&&(t=0),"vertical"==r){var i=o.clientWidth,n=e+t;return a.style.width=c?n/i*100+"%":n+"px"}if("horizontal"==r){var s=o.clientHeight,u=e+t;return a.style.height=c?u/s*100+"%":u+"px"}};s.isResizing=!0;var f=m();s.$emit("paneResizeStart",a,t,f);var h=function(e){var o=e.pageX,c=e.pageY;f="vertical"==r?m(u,o-i):m(l,c-n),s.$emit("paneResize",a,t,f)},y=function(){f=m("vertical"==r?a.clientWidth:a.clientHeight),s.isResizing=!1,p("mousemove",h),p("mouseup",y),s.$emit("paneResizeStop",a,t,f)};d("mousemove",h),d("mouseup",y)}}}};!function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style"),i=".multipane { display: flex; } .multipane.layout-h { flex-direction: column; } .multipane.layout-v { flex-direction: row; } .multipane > div { position: relative; z-index: 1; } .multipane-resizer { display: block; position: relative; z-index: 2; } .layout-h > .multipane-resizer { width: 100%; height: 10px; margin-top: -10px; top: 5px; cursor: row-resize; } .layout-v > .multipane-resizer { width: 10px; height: 100%; margin-left: -10px; left: 5px; cursor: col-resize; } ";t.type="text/css",t.styleSheet?t.styleSheet.cssText=i:t.appendChild(document.createTextNode(i)),e.appendChild(t)}}();var i=Object.assign(t,{render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{class:e.classnames,style:{cursor:e.cursor,userSelect:e.userSelect},on:{mousedown:e.onMouseDown}},[e._t("default")],2)},staticRenderFns:[]});i.prototype=t.prototype,function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",t.styleSheet?t.styleSheet.cssText="":t.appendChild(document.createTextNode("")),e.appendChild(t)}}();var n={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"multipane-resizer"},[e._t("default")],2)},staticRenderFns:[]};"undefined"!=typeof window&&window.Vue&&(window.Vue.component("multipane",i),window.Vue.component("multipane-resizer",n)),e.Multipane=i,e.MultipaneResizer=n,Object.defineProperty(e,"__esModule",{value:!0})}); +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.Multipane={})}(this,function(e){"use strict";var t={name:"multipane",props:{layout:{type:String,default:"vertical"}},data:function(){return{isResizing:!1}},computed:{classnames:function(){return["multipane","layout-"+this.layout.slice(0,1),this.isResizing?"is-resizing":""]},cursor:function(){return this.isResizing?"vertical"==this.layout?"col-resize":"row-resize":""},userSelect:function(){return this.isResizing?"none":""}},methods:{onMouseDown:function(e){var t=e.target,i=e.pageX,n=e.pageY;if(t.className&&t.className.match&&t.className.match("multipane-resizer")){var s=this,o=s.$el,r=s.layout,a=t.previousElementSibling,u=a.offsetWidth,l=a.offsetHeight,c=!!(a.style.width+"").match("%"),d=window.addEventListener,p=window.removeEventListener,m=function(e,t){if(void 0===t&&(t=0),"vertical"==r){var i=o.clientWidth,n=e+t;return a.style.width=c?n/i*100+"%":n+"px"}if("horizontal"==r){var s=o.clientHeight,u=e+t;return a.style.height=c?u/s*100+"%":u+"px"}};s.isResizing=!0;var f=m();s.$emit("paneResizeStart",a,t,f);var h=function(e){var o=e.pageX,c=e.pageY;f="vertical"==r?m(u,o-i):m(l,c-n),s.$emit("paneResize",a,t,f)},y=function(){f=m("vertical"==r?a.clientWidth:a.clientHeight),s.isResizing=!1,p("mousemove",h),p("mouseup",y),s.$emit("paneResizeStop",a,t,f)};d("mousemove",h),d("mouseup",y)}}}};!function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style"),i=".multipane { display: flex; } .multipane.layout-h { flex-direction: column; } .multipane.layout-v { flex-direction: row; } .multipane > div { position: relative; z-index: 1; } .multipane-resizer { display: block; position: relative; z-index: 2; } .layout-h > .multipane-resizer { width: 100%; height: 10px; margin-top: -10px; top: 5px; cursor: row-resize; } .layout-v > .multipane-resizer { width: 10px; height: 100%; margin-left: -10px; left: 5px; cursor: col-resize; } ";t.type="text/css",t.styleSheet?t.styleSheet.cssText=i:t.appendChild(document.createTextNode(i)),e.appendChild(t)}}();var i=Object.assign(t,{render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{class:e.classnames,style:{cursor:e.cursor,userSelect:e.userSelect},on:{mousedown:e.onMouseDown}},[e._t("default")],2)},staticRenderFns:[]});i.prototype=t.prototype,function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",t.styleSheet?t.styleSheet.cssText="":t.appendChild(document.createTextNode("")),e.appendChild(t)}}();var n={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"multipane-resizer"},[e._t("default")],2)},staticRenderFns:[]};"undefined"!=typeof window&&window.Vue&&(window.Vue.component("multipane",i),window.Vue.component("multipane-resizer",n)),e.Multipane=i,e.MultipaneResizer=n,Object.defineProperty(e,"__esModule",{value:!0})}); diff --git a/src/multipane.js b/src/multipane.js index a43bac8..8de3c3e 100644 --- a/src/multipane.js +++ b/src/multipane.js @@ -37,7 +37,7 @@ export default { methods: { onMouseDown({ target: resizer, pageX: initialPageX, pageY: initialPageY }) { - if (resizer.className && resizer.className.match('multipane-resizer')) { + if (resizer.className && resizer.className.match && resizer.className.match('multipane-resizer')) { let self = this; let { $el: container, layout } = self;