vue-gutter-resize
Version:
resize adjacent dom by dragging the gutter
2 lines (1 loc) • 9.87 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.VueGutterResize={})}(this,function(e){"use strict";var t={data:function(){return{target:void 0,areaSize:[],gutterComponent:{width:0,height:0,offsetX:0,offsetY:0}}},created:function(){this.divideArea()},mounted:function(){this.setPlaygroundRect()},methods:{draggingGutter:function(e,t,i,n){var r=this.getGutterSum(i,this.gutterSize,this.gutterSizes);if(this.isDraggingGutter(e)){var s=(t+r)/n*100;if(this.isGutterInRange(s)){for(var a=0,o=0;o<i;o++)a+=this.areaSize[o];var d=this.areaSize[i]+this.areaSize[i+1];0<=s-a&&0<=a+d-s&&(this.areaSize.splice(i,1,s-a),this.areaSize.splice(i+1,1,a+d-s))}}},specifyDivideArea:function(e){var i=this,n=e.reduce(function(e,t){return e+t});e.forEach(function(e){var t=100/n;i.areaSize.push(e*t)})},generalDivideArea:function(){for(var e=0;e<this.row;e++)this.areaSize.push(100/this.row)},dragstart:function(e,t){this.target&&this.target.classList&&this.target.classList.remove("active"),e.target.classList.add("active"),this.target=e.target},setPlaygroundRect:function(){var e=this.$refs.gutter.getBoundingClientRect();this.gutterComponent.width=e.width,this.gutterComponent.height=e.height,this.gutterComponent.offsetX=window.pageXOffset+e.left,this.gutterComponent.offsetY=window.pageYOffset+e.top},isDraggingGutter:function(e){return e&&0<e.clientX&&0<e.clientY},isGutterInRange:function(e){return e<100&&0<e},getCurrentMousePosition:function(e){return{mouseX:e.clientX-this.gutterComponent.offsetX,mouseY:e.clientY-this.gutterComponent.offsetY}},getGutterSum:function(e,t,i){var n=0;if(this.gutterSizes&&this.gutterSizes.length&&0<this.gutterSizes.length){for(var r=0;r<e;r++)n+=0|this.gutterSizes[r].match(/-?[0-9]+\.?[0-9]*/g).pop();n+=(0|this.gutterSizes[e].match(/-?[0-9]+\.?[0-9]*/g).pop())/2}else{for(var s=0;s<e;s++)n+=0|this.gutterSize.match(/-?[0-9]+\.?[0-9]*/g).pop();n+=(0|this.gutterSize.match(/-?[0-9]+\.?[0-9]*/g).pop())/2}return n}}},i="undefined"!=typeof __vue_render__?{render:__vue_render__,staticRenderFns:__vue_staticRenderFns__}:{};var n,r,s,a,o,d=(n=i,r=void 0===t?{}:t,a=s=void 0,"undefined"!=typeof __vue_create_injector_ssr__&&__vue_create_injector_ssr__,(o=("function"==typeof r?r.options:r)||{}).__file="/Users/tobashunsuke/development/vue-gutter-resize/src/mixins/gutter.vue",o.render||(o.render=n.render,o.staticRenderFns=n.staticRenderFns,o._compiled=!0,a&&(o.functional=!0)),o._scopeId=s,o),u={name:"columnGutter",mixins:[d],props:["width","height","gutterSize","gutterSizes","color","column","colors","columnSizes"],methods:{divideArea:function(){this.columnSizes&&this.columnSizes.length&&0<this.columnSizes.length?this.specifyDivideArea(this.columnSizes):this.generalDivideArea()},drag:function(e,t){var i=this.getCurrentMousePosition(e).mouseX;this.draggingGutter(e,i,t,this.gutterComponent.width),this.$emit("resize",{col:this.areaSize})}}},c=function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("section",{ref:"gutter",style:"width: "+i.width+"; height: "+i.height+";"},[n("div",{staticClass:"pane pane-v left",style:"width: calc("+i.areaSize[0]+"% - "+(i.gutterSize||i.gutterSizes[0])+");"},[i._t("col-0")],2),i._v(" "),i._l(i.column-1,function(t){return n("div",{key:t,staticClass:"afterCol",style:"width: calc("+i.areaSize[t]+"% - "+(i.gutterSize||i.gutterSizes[t-1])+");"},[n("div",{staticClass:"gutter gutter-v",style:"width: "+(i.gutterSize||i.gutterSizes[t-1])+"; height: "+i.height+"; background-color: "+(i.color||i.colors[t-1])+";",attrs:{draggable:"true"},on:{drag:function(e){i.drag(e,t-1)},dragstart:function(e){i.dragstart(e,t-1)}}}),i._v(" "),t!==i.column-1?n("div",{staticClass:"pane pane-v",style:"width: calc(100% - "+(i.gutterSize||i.gutterSizes[t-1])},[i._t("col-"+t)],2):n("div",{staticClass:"pane pane-v",style:"width: calc(100%}"},[i._t("col-"+t)],2)])})],2)};c._withStripped=!0;function h(){var u=document.head||document.getElementsByTagName("head")[0],c=h.styles||(h.styles={}),l="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(e,t){if(!document.querySelector('style[data-vue-ssr-id~="'+e+'"]')){var i=l?t.media||"default":e,n=c[i]||(c[i]={ids:[],parts:[],element:void 0});if(!n.ids.includes(e)){var r=t.source,s=n.ids.length;if(n.ids.push(e),l&&(n.element=n.element||document.querySelector("style[data-group="+i+"]")),!n.element){var a=n.element=document.createElement("style");a.type="text/css",t.media&&a.setAttribute("media",t.media),l&&(a.setAttribute("data-group",i),a.setAttribute("data-next-index","0")),u.appendChild(a)}if(l&&(s=parseInt(n.element.getAttribute("data-next-index")),n.element.setAttribute("data-next-index",s+1)),n.element.styleSheet)n.parts.push(r),n.element.styleSheet.cssText=n.parts.filter(Boolean).join("\n");else{var o=document.createTextNode(r),d=n.element.childNodes;d[s]&&n.element.removeChild(d[s]),d.length?n.element.insertBefore(o,d[s]):n.element.appendChild(o)}}}}}var l=function(e,t,i,n,r,s,a,o){var d=("function"==typeof i?i.options:i)||{};d.__file="/Users/tobashunsuke/development/vue-gutter-resize/src/components/column-gutter.vue",d.render||(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,r&&(d.functional=!0)),d._scopeId=n;var u=void 0;if(t&&(u=function(e){t.call(this,a(e))}),void 0!==u)if(d.functional){var c=d.render;d.render=function(e,t){return u.call(t),c(e,t)}}else{var l=d.beforeCreate;d.beforeCreate=l?[].concat(l,u):[u]}return d}(void 0!==c?{render:c,staticRenderFns:[]}:{},function(e){e&&e("data-v-4b1f587d_0",{source:"\n.pane-v[data-v-4b1f587d] {\n float: left;\n height: 100%;\n}\n.afterCol[data-v-4b1f587d] {\n height: 100%;\n display: inline-block;\n}\n.gutter[data-v-4b1f587d] {\n background: #ccc;\n overflow: hidden;\n position: relative;\n}\n.active[data-v-4b1f587d] {\n z-index: 1;\n}\n.gutter-v[data-v-4b1f587d] {\n float: left;\n width: 2px;\n height: 100%;\n cursor: ew-resize;\n}\n",map:void 0,media:void 0})},void 0===u?{}:u,"data-v-4b1f587d",!1,0,void 0!==h?h:function(){},"undefined"!=typeof __vue_create_injector_ssr__&&__vue_create_injector_ssr__),g={name:"rowGutter",mixins:[d],props:["width","height","gutterSize","gutterSizes","color","row","colors","rowSizes"],methods:{divideArea:function(){this.rowSizes&&this.rowSizes.length&&0<this.rowSizes.length?this.specifyDivideArea(this.rowSizes):this.generalDivideArea()},drag:function(e,t){var i=this.getCurrentMousePosition(e).mouseY;this.draggingGutter(e,i,t,this.gutterComponent.height),this.$emit("resize",{row:this.areaSize})}}},f=function(){var i=this,e=i.$createElement,n=i._self._c||e;return n("section",{ref:"gutter",style:"width: "+i.width+"; height: "+i.height+";"},[n("div",{style:"height: calc("+i.areaSize[0]+"%);"},[i._t("row-0")],2),i._v(" "),i._l(i.row-1,function(t){return n("div",{key:t,style:"height: calc("+i.areaSize[t]+"% - "+(i.gutterSize||i.gutterSizes[t-1])+");"},[n("div",{staticClass:"gutter gutter-h",style:"height: "+(i.gutterSize||i.gutterSizes[t-1])+"; width: "+i.width+"; background-color: "+(i.color||i.colors[t-1])+";",attrs:{draggable:"true"},on:{drag:function(e){i.drag(e,t-1)},dragstart:function(e){i.dragstart(e,t-1)}}}),i._v(" "),t!==i.row-1?n("div",{staticClass:"pane pane-h",style:"height: calc(100% - "+(i.gutterSize||i.gutterSizes[t-1])+");"},[i._t("row-"+t)],2):n("div",{staticClass:"pane pane-h",style:"height: calc(100%});"},[i._t("row-"+t)],2)])})],2)};f._withStripped=!0;function v(){var u=document.head||document.getElementsByTagName("head")[0],c=v.styles||(v.styles={}),l="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(e,t){if(!document.querySelector('style[data-vue-ssr-id~="'+e+'"]')){var i=l?t.media||"default":e,n=c[i]||(c[i]={ids:[],parts:[],element:void 0});if(!n.ids.includes(e)){var r=t.source,s=n.ids.length;if(n.ids.push(e),l&&(n.element=n.element||document.querySelector("style[data-group="+i+"]")),!n.element){var a=n.element=document.createElement("style");a.type="text/css",t.media&&a.setAttribute("media",t.media),l&&(a.setAttribute("data-group",i),a.setAttribute("data-next-index","0")),u.appendChild(a)}if(l&&(s=parseInt(n.element.getAttribute("data-next-index")),n.element.setAttribute("data-next-index",s+1)),n.element.styleSheet)n.parts.push(r),n.element.styleSheet.cssText=n.parts.filter(Boolean).join("\n");else{var o=document.createTextNode(r),d=n.element.childNodes;d[s]&&n.element.removeChild(d[s]),d.length?n.element.insertBefore(o,d[s]):n.element.appendChild(o)}}}}}var m=function(e,t,i,n,r,s,a,o){var d=("function"==typeof i?i.options:i)||{};d.__file="/Users/tobashunsuke/development/vue-gutter-resize/src/components/row-gutter.vue",d.render||(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,r&&(d.functional=!0)),d._scopeId=n;var u=void 0;if(t&&(u=function(e){t.call(this,a(e))}),void 0!==u)if(d.functional){var c=d.render;d.render=function(e,t){return u.call(t),c(e,t)}}else{var l=d.beforeCreate;d.beforeCreate=l?[].concat(l,u):[u]}return d}(void 0!==f?{render:f,staticRenderFns:[]}:{},function(e){e&&e("data-v-69001e36_0",{source:"\n.pane[data-v-69001e36] {\n height: 100%;\n}\n.pane-v[data-v-69001e36] {\n float: left;\n}\n.gutter[data-v-69001e36] {\n background: #ccc;\n overflow: hidden;\n position: relative;\n}\n.active[data-v-69001e36] {\n z-index: 1;\n}\n.gutter-h[data-v-69001e36] {\n width: 100%;\n height: 2px;\n cursor: ns-resize;\n}\n",map:void 0,media:void 0})},void 0===g?{}:g,"data-v-69001e36",!1,0,void 0!==v?v:function(){},"undefined"!=typeof __vue_create_injector_ssr__&&__vue_create_injector_ssr__),p={columnGutter:l,rowGutter:m};var _={install:function(t){Object.keys(p).forEach(function(e){t.component(e,p[e])})}};e.columnGutter=l,e.rowGutter=m,e.default=_,Object.defineProperty(e,"__esModule",{value:!0})});