UNPKG

@progress/kendo-ui

Version:

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

3 lines (2 loc) 17.4 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("kendo.resizable.js"),require("kendo.icons.js")):"function"==typeof define&&define.amd?define(["exports","kendo.resizable","kendo.icons"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).kendo=e.kendo||{},e.kendo._globals=e.kendo._globals||{},e.kendo._globals.Splitter={}))}(this,(function(e){!function(e){var t=window.kendo,n=t.ui,i=t.keys,r=e.extend,a=n.Widget,s=/^\d+(\.\d+)?px$/i,o=/^\d+(\.\d+)?%$/i,l=".kendoSplitter",d="expand",c="collapse",p="contentLoad",u="error",f="resizing",h="layoutChange",g="pane",m="k-focus",_="."+(w="k-"+g),z="k-scrollable",v="k-pane-static",k="k-splitter",x="k-splitbar",P="flex-basis",b="horizontal",y="vertical",S=Number.MAX_SAFE_INTEGER,w="k-pane",C="click",E="resize",A="px";function M(e){return o.test(e)}function T(e){return s.test(e)||/^\d+$/.test(e)}function O(e){return!M(e)&&!T(e)}function B(e,t){var n=parseInt(e,10);return M(e)&&(n=Math.floor(n*t/100)),n}function D(e,t){return function(n,i){var r=this.element.find(n).data(g);if(1==arguments.length)return r[e];(((this.options.panes||[]).find((e=>e.uid==r.uid))||{})[e]=i,r[e]=i,r.isFluid=O(r.size),t)&&this.element.data("kendo"+this.options.name).resize(!0)}}var I=a.extend({init:function(e,n){var r,s=this;a.fn.init.call(s,e,n),s.wrapper=s.element,s.options.orientation&&(r=s.options.orientation.toLowerCase()!=y),s.orientation=r?b:y,s._dimension=r?"width":"height",s._keys={decrease:r?i.LEFT:i.UP,increase:r?i.RIGHT:i.DOWN},s._resizeStep=10,s._marker=t.guid().substring(0,8),s.element.addClass(`${k} k-splitter-flex ${k}-${s.orientation}`),s.element.closest(w).removeClass(v).addClass("k-pane-flex"),s._initPanes(),s.resizing=new $(s),s.element.triggerHandler("init"+l)},events:[d,c,p,u,E,f,h],_addOverlays:function(){this._panes().append("<div class='k-splitter-overlay k-overlay' />")},_removeOverlays:function(){this._panes().children(".k-splitter-overlay").remove()},_attachEvents:function(){var t=this,n=t.options.orientation;t.element.children(".k-splitbar-draggable-"+n).on("keydown"+l,t._keydown.bind(t)).on("mousedown"+l,(function(e){e.currentTarget.focus({preventScroll:!0})})).on("focus"+l,(function(t){e(t.currentTarget).addClass(m)})).on("blur"+l,(function(n){e(n.currentTarget).removeClass(m),t.resizing&&t.resizing.end()})).on("mouseenter"+l,(function(){e(this).addClass("k-splitbar-"+t.orientation+"-hover")})).on("mouseleave"+l,(function(){e(this).removeClass("k-splitbar-"+t.orientation+"-hover")})).on("mousedown"+l,t._addOverlays.bind(t)).end().children(".k-splitbar").on("dblclick"+l,t._togglePane.bind(t)).children(".k-collapse-next, .k-collapse-prev").on(C+l,t._arrowClick(c)).end().children(".k-expand-next, .k-expand-prev").on(C+l,t._arrowClick(d)).end().end(),e(window).on("resize"+l+t._marker,t.resize.bind(t,!1)),e(document).on("mouseup"+l+t._marker,t._removeOverlays.bind(t))},_detachEvents:function(){var t=this;t.element.children(".k-splitbar-draggable-"+t.orientation).off(l).end().children(".k-splitbar").off("dblclick"+l).children(".k-collapse-next, .k-collapse-prev, .k-expand-next, .k-expand-prev").off(l),e(window).off(l+t._marker),e(document).off(l+t._marker)},options:{name:"Splitter",clickMoveClick:!0,orientation:b,panes:[]},destroy:function(){a.fn.destroy.call(this),this._detachEvents(),this.resizing&&this.resizing.destroy(),t.destroy(this.element),this.wrapper=this.element=null},_keydown:function(t){var n,r=this,a=t.keyCode,s=r.resizing,o=e(t.currentTarget),l=r._keys,p=a===l.increase,u=a===l.decrease;p||u?(t.ctrlKey?(n=o[u?"next":"prev"](),s&&s.isResizing()&&s.end(),n[r._dimension]()?r._triggerAction(c,o[u?"prev":"next"]()):r._triggerAction(d,n)):s&&s.move((u?-1:1)*r._resizeStep,o),t.preventDefault()):a===i.HOME?(n=o.prev(),r.collapse(n),t.preventDefault()):a===i.END?(n=o.prev(),r.expand(n),t.preventDefault()):a===i.ENTER&&s&&(s.end(),t.preventDefault(),r._togglePane(t))},_initPanes:function(){var t=this.options.panes||[],n=this;this.element.children().each((function(i,r){"script"!=r.nodeName.toLowerCase()&&(t[i]=e.extend(n._getDefaultPaneConfig(),t[i],{order:2*i}),t[i].isFluid=O(t[i].size),r.style.order=2*i,n._initPane(r,t[i]))})),this.resize()},_getDefaultPaneConfig:function(){return{scrollable:!0,resizable:!0,size:"auto",uid:t.guid()}},_updatePaneOrderStyles:function(t){e(t||this.element).children().each((function(e,t){if("script"!=t.nodeName.toLowerCase()){t.data(g).order=2*e,t.style.order=2*e}}))},_initPane:function(t,n){(n=e.extend({},this._getDefaultPaneConfig(),n)).fixedSize=n.size&&"auto"!==n.size,t=e(t).attr("role","group").attr("data-uid",n.uid).addClass(w);let i=!n.resizable&&!n.collapsible||n.fixedSize;t.css(P,n.size).data(g,n).toggleClass(v,Boolean(i)).toggleClass(z,Boolean(n.scrollable)),this.ajaxRequest(t)},ajaxRequest:function(e,n,i){var r,a=this;r=(e=a.element.find(e)).data(g),(n=n||r.contentUrl)&&(e.append("<span class='k-icon k-i-loading k-pane-loading' />"),t.isLocalUrl(n)?jQuery.ajax({url:n,data:i||{},type:"GET",dataType:"html",success:function(t){e.html(t),a.trigger(p,{pane:e[0]})},error:function(t,n){a.trigger(u,{pane:e[0],status:n,xhr:t})}}):e.removeClass(z).html("<iframe src='"+n+"' frameborder='0' class='k-content-frame'>This page requires frames in order to show content</iframe>"))},_triggerAction:function(e,t){var n=t.data(g),i=n.collapsed&&e==d||!n.collapsed&&e==c;n.collapsible&&(i&&!this.trigger(e,{pane:t[0]})&&this[e](t[0]),this.resizing.stop(),this.resizing.end())},_togglePane:function(t){var n,i=this,r=e(t.target);r.closest(".k-splitter")[0]==i.element[0]&&1===(n=r.children("span:not(.k-resize-handle)")).length&&(n.is(".k-collapse-prev")?i._triggerAction(c,r.prev()):n.is(".k-collapse-next")?i._triggerAction(c,r.next()):n.is(".k-expand-prev")?i._triggerAction(d,r.prev()):n.is(".k-expand-next")&&i._triggerAction(d,r.next()),i.resizing?.end())},_arrowClick:function(t){var n=this;return function(i){var r,a=e(i.currentTarget);a.closest(".k-splitter")[0]==n.element[0]&&(r=a.is(".k-"+t+"-prev")?a.parent().prev():a.parent().next(),n._triggerAction(t,r))}},_updatePaneOrders:function(){this._getPaneElements().forEach(((t,n)=>{var i=e(t).data(g);i&&(i.order=2*n,t.style.order=2*n)}))},_updateSplitBar:function(e,i,r,a){var s=function(e,t,i){var r=t?n.icon({icon:t,size:"xsmall"}):"";return i?"<span class='k-"+e+"'>"+r+"</span>":""},o=this.orientation,l=!1!==i.resizable&&!1!==r.resizable,d=i.collapsible,c=i.collapsed,p=r.collapsible,u=r.collapsed,f=a.attr("id");f||(f=t.guid(),a.attr("id",f));const h=t.support.isRtl(e),g=h?"caret-alt-right":"caret-alt-left",m=h?"caret-alt-left":"caret-alt-right";e.addClass("k-splitbar k-splitbar-"+o).attr("role","separator").attr("aria-valuemin","0").attr("aria-valuemax","100").attr("aria-controls",f).removeClass("k-splitbar-"+o+"-hover").toggleClass("k-splitbar-draggable-"+o,l&&!c&&!u).toggleClass("k-splitbar-static-"+o,!l&&!d&&!p).html(s("collapse-prev","caret-alt-up",d&&!c&&!u&&o==y)+s("collapse-prev",g,d&&!c&&!u&&o==b)+s("expand-prev","caret-alt-down",d&&c&&!u&&o==y)+s("expand-prev",m,d&&c&&!u&&o==b)+s("resize-handle",null,l&&o==y)+s("resize-handle",null,l&&o==b)+s("collapse-next","caret-alt-down",p&&!u&&!c&&o==y)+s("collapse-next",m,p&&!u&&!c&&o==b)+s("expand-next","caret-alt-up",p&&u&&!c&&o==y)+s("expand-next",g,p&&u&&!c&&o==b)),i.labelId?e.attr("aria-labelledby",i.labelId):i.label&&e.attr("aria-label",i.label),o==b&&e.attr("aria-orientation",y),l||d||p||e.removeAttr("tabindex")},_updateSplitBars:function(){var t=this;this.element.children(".k-splitbar").each((function(){var n=e(this),i=n.prevAll(_).first(),r=i.data(g),a=n.nextAll(_).first().data(g);n.css("order",r.order+1),a&&t._updateSplitBar(n,r,a,i)}))},_removeSplitBars:function(){this.element.children(".k-splitbar").remove()},_panes:function(){return this.element?this.element.children(_):e()},_resetAriaValueNow:function(e,t){var n,i,r;for(n=0;n<e.length;n++)r=t[n]+t[n+1]||1,i=Math.round(t[n]/r*100),e[n].setAttribute("aria-valuenow",i)},_resize:function(){var n=this,i=n.element,r=i.children(_),a=n.orientation==b,s=i.children(".k-splitbar"),o=s.length,l=a?"width":"height",d=i[l](),c=[];if(n.wrapper.addClass("k-splitter-resizing"),!n._suppressResize){0===o?(o=r.length-1,r.slice(0,o).after("<div tabindex='0' class='k-splitbar' data-marker='"+n._marker+"' />"),n._updateSplitBars(),s=i.children(".k-splitbar")):n._updateSplitBars(),s.each((function(){d-=this[a?"offsetWidth":"offsetHeight"]}));var p=0,u=e();r.each((function(){var t,n=e(this),i=n.data(g)||{};if(n.removeClass("k-collapsed"),i.collapsed)t=i.collapsedSize?B(i.collapsedSize,d):0,n.css("overflow","hidden").addClass("k-collapsed");else{if(i.isFluid||O(i.size))return u=u.add(this),void c.push(!1);t=B(i.size,d)}return p+=t,c.push(t),n.css(P,t+A),t})),d-=p;var f=u.length,m=Math.floor(d/f);u.slice(0,f-1).css(P,m+A).end().eq(f-1).css(P,d-(f-1)*m+A),c.forEach((function(e,t){!1===e&&(c[t]=m)})),n._resetAriaValueNow(s,c);var z=a?"offsetWidth":"offsetHeight";if(0===f){var v=r.filter((function(){return!(e(this).data(g)||{}).collapsed})).last();v.length&&v[l](d+v[0][z])}n._detachEvents(),n._attachEvents(),n.wrapper.removeClass("k-splitter-resizing"),t.resize(r),n.trigger(h)}},toggle:function(e,t){var n;n=(e=this.element.find(e)).data(g),(t||!0===n?.collapsible)&&(1==arguments.length&&(t=undefined!==n.collapsed&&n.collapsed),n.collapsed=!t,e.toggleClass("k-hidden",n.collapsed&&!n.collapsedSize),e.css("overflow",n.collapsed&&!n.collapsedSize?"hidden":"auto"),this.resize(!0))},collapse:function(e){this.toggle(e,!1)},expand:function(e){this.toggle(e,!0)},_addPane:function(e,t,n){const i=this;return n.length&&(i.options.panes.splice(t,0,e),i._initPane(n,e),i._removeSplitBars(),i._updatePaneOrders(),i.resize(!0)),n},append:function(t){t=t||{};var n=this,i=e("<div />").appendTo(n.element);return n._addPane(t,n.options.panes.length,i)},insertBefore:function(t,n){n=e(n),t=t||{};var i=this.wrapper.children(".k-pane").index(n),r=e("<div />").insertBefore(e(n));return this._addPane(t,i,r)},insertAfter:function(t,n){n=e(n),t=t||{};var i=this.wrapper.children(".k-pane").index(n),r=e("<div />").insertAfter(e(n));return this._addPane(t,i+1,r)},remove:function(n){var i=this;return(n=i.wrapper.find(n)).length&&(t.destroy(n),n.each((function(t,n){i.options.panes.splice(i.wrapper.children(".k-pane").index(n),1),e(n).remove()})),i._removeSplitBars(),i.options.panes.length&&i.resize(!0)),i},size:D("size",!0),min:D("min"),max:D("max"),_getPaneElement:function(e){return this._getPaneElements()[e]},_getPaneElements:function(){return Array.from(this.element.children()||[]).filter((t=>e(t).hasClass("k-pane")||e(t).hasClass("k-splitter")))},_dragSplitterBar:function(e,t){const n=this,{leftPane:i,rightPane:r}=n._getAdjacentPanes(e),a=i.computedSize+t,s=a>i.min&&a<i.max,o=n._getPaneElements().filter((e=>!e.style[P])),l=(i.size||r.size)&&o.length>1;return i.size&&r.size||l?s&&(n._resizePane(i,t),n._resizePane(r,-t)):r.size?n._resizePane(r,-t):n._resizePane(i,t),{leftPane:i,rightPane:r}},_getAdjacentPanes:function(e){const t=this,n=e,i=e+1,r=t._getPaneElement(n),a=t._getPaneElement(i),s=t._getPane(n),o=t._getPane(i),l=t._getPaneOffsetSize(n),d=t._getPaneOffsetSize(i),c=l+d,p=t._getElementClientSize(t.element,t.options.orientation),u=e=>t._calculatePixelSize(e,p),{leftPaneMaxSize:f,rightPaneMaxSize:h}=t._getAdjacentPanesMaxSize(n,i),g=u(o&&o.max),m=u(s&&s.max);return{leftPane:{index:n,computedSize:l,min:u(s&&s.min)||(g?c-g:0)||0,max:f,size:r.style[P],collapsible:s&&s.collapsible,uid:s.uid},rightPane:{index:i,computedSize:d,min:u(o&&o.min)||(m?c-m:0)||0,max:h,size:a.style[P],collapsible:o&&o.collapsible,uid:o.uid}}},_resizePane:function(e,n){const i=this,r=(a=e.computedSize+n,s=e.min,o=e.max,Math.min(o,Math.max(s,a)));var a,s,o;let l="";if(M(e.size)){l=function(e){return`${e}%`}(100*r/i._getElementClientSize(i.element,i.options.orientation))}else l=function(e){return t.parseFloat(e)+"px"}(r);e.size=l,e.isFluid=O(l),i._setPaneSize(e.index,l)},_allExpandedPanesHaveSize:function(){const e=this.options.panes.filter((e=>!e.collapsed));return!!e.length&&e.filter((e=>e.size)).length},_setPaneSize:function(t,n){const i=this,r=i._getPaneElement(t);if(!r)return;i._allExpandedPanesHaveSize()||e(r).addClass(v),r.style[P]=n;let a=e(r).data("pane");a.size=n,a.isFluid=O(n),i.trigger(f,{pane:r})},_getPaneSizes:function(e){const t=this,n=t._getElementClientSize(t.element,t.options.orientation),i=t._getPane(e);return{size:t._getPaneOffsetSize(e),min:i&&i.min?t._calculatePixelSize(i.min,n):0,max:i&&i.max?t._calculatePixelSize(i.max,n):S}},_calculatePixelSize:function(e,n){let i=t.parseFloat(e);return M(e)&&(i=n*i/100),i},_getPaneOffsetSize:function(e){const t=this,n=t._getPaneElement(e);return t._getElementOffsetSize(n,t.options.orientation)},_getElementOffsetSize:function(e,t){if(!e)return 0;const n=e.getBoundingClientRect();return t===b?n.width:n.height},_getElementClientSize:function(e,t){return this._getElementSize(e,t,"client")},_getElementSize:function(e,t,n){return e?(e=e[0],t===b?e[`${n}Width`]:e[`${n}Height`]):0},_getPane:function(e){return(this.options.panes||[])[e]},_getPaneIndex:function(e){return this.options.panes.indexOf(e)},_getAdjacentPanesMaxSize:function(e,t){const{size:n,min:i,max:r}=this._getPaneSizes(e),{size:a,min:s,max:o}=this._getPaneSizes(t),l=n+a;return{leftPaneMaxSize:Math.min(r,l-s),rightPaneMaxSize:Math.min(o,l-i)}},_getElementIndex:function(e,t){if(!e)return[].indexOf(e);let n=Array.from(e.parent().children());return t&&(n=n.filter((e=>e.matches(t)))),Array.from(n).indexOf(e[0])}});n.plugin(I);var j={sizingProperty:"height",sizingDomProperty:"offsetHeight",alternateSizingProperty:"width",positioningProperty:"top",mousePositioningProperty:"pageY"},R={sizingProperty:"width",sizingDomProperty:"offsetWidth",alternateSizingProperty:"height",positioningProperty:"left",mousePositioningProperty:"pageX"};function $(e){var n=this,i=e.orientation,a=".k-splitbar-draggable-"+i+"[data-marker="+e._marker+"]";e.options.clickMoveClick&&(a+=",.k-ghost-splitbar"),n.owner=e,n._element=e.element,n.orientation=i,r(n,i===b?R:j),n._resizable=new t.ui.Resizable(e.element,{orientation:i,handle:a,clickMoveClick:e.options.clickMoveClick,hint:n._createHint.bind(n),start:n._start.bind(n),max:n._max.bind(n),min:n._min.bind(n),invalidClass:"k-restricted-size-"+i,resize:n._resize.bind(n),resizeend:n._stop.bind(n)})}$.prototype={stop:function(){this._resizable._stop()},press:function(e){this._resizable.press(e),this.pressed=!0},move:function(e,t){if(!t.hasClass("k-splitbar-draggable-horizontal")&&!t.hasClass("k-splitbar-draggable-vertical"))return;const n=this.owner._getElementIndex(t,`.${x}`),{leftPane:i,rightPane:r}=this.owner._dragSplitterBar(n,e);this.owner.trigger(E,{leftPane:i,rightPane:r})},end:function(){this._resizable.end(),this.pressed=!1},destroy:function(){this._resizable.destroy(),this._resizable=this._element=this.owner=null},isResizing:function(){return this._resizable.resizing},_createHint:function(t){var n=this;return e("<div class='k-ghost-splitbar k-ghost-splitbar-"+n.orientation+"' />").css("z-index",99).css(n.alternateSizingProperty,t[n.alternateSizingProperty]())},_start:function(n){var i=this,r=e(n.currentTarget);const a=t.support.isRtl(i._element);let s=i.orientation===b?"offsetLeft":"offsetTop";const o=i.owner._getElementIndex(r,`.${x}`),l=i.owner._getPaneElement(o),d=i.owner._getPaneElement(o+1);let c=e(i.orientation===b&&a?d:l),p=e(i.orientation===b&&a?l:d);if(e(n.initialTarget).closest(".k-expand-next, .k-expand-prev, .k-collapse-next, .k-collapse-prev").length>0||!p.length||!c.length)n.preventDefault();else{var u=c.data(g),f=p.data(g),h=parseInt(c[0][s],10),m=parseInt(p[0][s],10)+p[0][i.sizingDomProperty]-r[0][i.sizingDomProperty],_=parseInt(i._element.css(i.sizingProperty),10),z=function(e){var t=parseInt(e,10);return(T(e)?t:_*t/100)||0};if(!u||!f)return n.preventDefault(),n.sender.draggable.clickMoveClick.cancel(),void i.owner.element.find(".k-ghost-splitbar").remove();var v=z(u.min),k=z(u.max)||m-h,P=z(f.min),y=z(f.max)||m-h;i.previousPane=c,i.nextPane=p,i._maxPosition=Math.min(m-P,h+k),i._minPosition=Math.max(h+v,m-y)}},_max:function(){return this._maxPosition},_min:function(){return this._minPosition},_resize:function(e){let n,i=this.owner,r=i.orientation,a=this.owner;const s=e.currentTarget||e.target;if(!s)return;const o=i._getElementIndex(s,`.${x}`),l=t.support.isRtl(this._element)?-1:1;n=r===b?e.x.delta*l:e.y.delta;let d=r===b?s.position().left:s.position().top,c=e.position;Math.abs(d-c)>2&&a._dragSplitterBar(o,n)},_stop:function(n){var i=e(n.currentTarget),r=this.owner;let a=t.support.isRtl(this._element);if(r._panes().children(".k-splitter-overlay").remove(),n.keyCode!==t.keys.ESC){let e=r.orientation===b?n.x.initialDelta:n.y.initialDelta,t=r.orientation===b?i.position().left:i.position().top,s=n.position,o=r.orientation===b&&a?-1:1;const l=this.owner._getElementIndex(n.currentTarget,`.${x}`);Math.abs(t-s)>2&&r._dragSplitterBar(l,e*o);const{leftPane:d,rightPane:c}=r._getAdjacentPanes(l);r.trigger(E,{leftPane:d,rightPane:c})}return!1}}}(window.kendo.jQuery);var t=kendo;e.__meta__={id:"splitter",name:"Splitter",category:"web",description:"The Splitter widget provides an easy way to create a dynamic layout of resizable and collapsible panes.",depends:["resizable","icons"]},e.default=t,Object.defineProperty(e,"__esModule",{value:!0})})); //# sourceMappingURL=kendo.splitter.min.js.map