UNPKG

@progress/kendo-ui

Version:

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

3 lines 13.8 kB
/* @license */ (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`kendo.core.min.js`),require(`kendo.draganddrop.min.js`),require(`kendo.resizable.min.js`)):typeof define==`function`&&define.amd?define([`exports`,`kendo.core.min`,`kendo.draganddrop.min`,`kendo.resizable.min`],t):(e=typeof globalThis<`u`?globalThis:e||self,t((e.kendo=e.kendo||{},e.kendo._globals=e.kendo._globals||{},e.kendo._globals.Tilelayout={}),e.kendo._globals.Core,e.kendo._globals.Draganddrop,e.kendo._globals.Resizable))})(this,function(e,t,n,r){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let i={id:`tilelayout`,name:`TileLayout`,category:`web`,depends:[`core`],features:[{id:`tilelayout-resizable`,name:`Resizable`,description:`Support for resizing`,depends:[`resizable`]},{id:`tilelayout-reorderable`,name:`Reorderable`,description:`Support for reordering`,depends:[`draganddrop`]}]};(function(e){var t=window.kendo,n=t.ui,r=n.Widget,i=n.Draggable,a=t.keys,o=t.selectorFromClasses,s=`resize`,c=`reorder`,l=`.kendoTileLayout`,u=`k-cursor-ns-resize`,d=`k-cursor-ew-resize`,f=`k-cursor-nwse-resize`,p=`k-cursor-nesw-resize`,m=`k-cursor-move`,h=`k-cursor-grabbing`,g=1,_=`k-cursor-nesw-resize k-cursor-nwse-resize k-cursor-ew-resize k-cursor-ns-resize`,v={wrapper:`k-tilelayout k-pos-relative`,item:`k-tilelayout-item k-card`,itemHeader:`k-tilelayout-item-header k-card-header`,itemHeaderTitle:`k-card-title`,itemBody:`k-tilelayout-item-body k-card-body`,reorderHint:`k-layout-item-hint k-layout-item-hint-reorder`,resizeHint:`k-layout-item-hint k-layout-item-hint-resize`},y=r.extend({init:function(t,n){var i=this;r.fn.init.call(i,t,n),i.element=e(t).addClass(y.styles.wrapper).attr({role:`list`}),i._setWrapperStyles(),i._initContainers(),i._resizable(),i._navigatable(),i._reorderable(),i._showWatermarkOverlay&&i._showWatermarkOverlay(i.element[0])},events:[s,c],options:{name:`TileLayout`,columns:null,gap:{columns:16,rows:16},containers:[],resizable:!1,reorderable:!1,navigatable:!1,columnsWidth:`1fr`,rowsHeight:`1fr`,height:``,width:``},destroy:function(){r.fn.destroy.call(this),this._draggableInstance&&=(this.element.find(`.k-tilelayout-item`).each(function(){var t=e(this);t.data(`kendoDropTarget`)&&t.data(`kendoDropTarget`).destroy()}),this._draggableInstance.destroy(),null),this.resizable&&=(this.resizable.destroy(),null),this.resizeHandle&&=(this.resizeHandle.off(l).remove(),null),this.element.off(l)},setOptions:function(e){this.destroy(),t.deepExtend(this.options,e),this.element.empty(),this.init(this.element,this.options)},getOptions:function(){var n=e.extend(!0,{},this.options);return n.containers=t.deepExtend([],this.items),n},_initContainers:function(){var n=this,r=n.options.containers,i=n.element.children(),a=!!i.length,o,s,c,l,u,d,f;if(n.items=[],n.itemsMap={},a)i.each(function(i,a){o=t.guid();var s=e(a).addClass(y.styles.item).attr({id:o,role:`listitem`,"aria-keyshortcuts":`Enter`});n._addContainer(s,r[i],i,o)});else for(var p=0;p<r.length;p++){if(o=t.guid(),d=r[p],s=e(`<div></div>`).addClass(y.styles.item).attr({id:o,role:`listitem`,"aria-keyshortcuts":`Enter`}),l=d.header,l&&(l.template||l.text)&&(c=e(`<div></div>`).addClass(y.styles.itemHeader),n.options.reorderable&&c.addClass(m),f=l.text?`<div class='`+y.styles.itemHeaderTitle+`'>`+l.text+`</div>`:null,c.append(f||t.template(l.template)({})),c.appendTo(s)),u=e(`<div></div>`).addClass(y.styles.itemBody),!d.bodyTemplate)throw Error(`Having a bodyTemplate for the container is mandatory`);u.append(t.template(d.bodyTemplate)({})),u.appendTo(s),s.appendTo(n.element),n._addContainer(s,d,p,o)}},_addContainer:function(e,n,r,i){var a=this;n.order=typeof n.order==`number`?n.order:r,e.attr(t.attr(`index`),n.order),n.id=i,a._setContainerCoordinates(e,n),a.itemsMap[i]=n,a.items.push(a.itemsMap[i])},_setWrapperStyles:function(){var e=this,n=e.options;e.element.css({"grid-template-columns":t.format(`repeat({0}, minmax(0, {1}))`,n.columns,typeof n.columnsWidth==`string`?n.columnsWidth:n.columnsWidth+`px`),"grid-auto-rows":t.format(`minmax(0, {0})`,typeof n.rowsHeight==`string`?n.rowsHeight:n.rowsHeight+`px`),"column-gap":n.gap.columns+`px`,width:typeof n.width==`string`?n.width:n.width+`px`,height:typeof n.height==`string`?n.height:n.height+`px`,padding:n.gap.rows+`px `+n.gap.columns+`px `,"row-gap":n.gap.rows+`px`})},_setContainerCoordinates:function(e,n){n&&e.css({order:n.order,"grid-column-end":t.format(`span {0}`,n.colSpan),"grid-row-end":t.format(`span {0}`,n.rowSpan)}).attr(t.attr(`index`),n.order)},_updateContainers:function(){for(var e=this,t=0;t<e.items.length;t++)e._setContainerCoordinates(e.element.find(`#`+e.items[t].id),e.items[t])},_createResizeHandle:function(t,n,r){var i=this;i._isresizing||(i.resizeHandle&&i.resizeHandle.data(`div`)[0]!==t[0]&&(i.resizeHandle.off(l).remove(),i.resizeHandle=null),i.resizeHandle||(i.resizeHandle=e(`<div class="k-resize-handle"></div>`),i.resizeHandle.appendTo(t)),i._positionResizeHandle(t,n,r))},_positionResizeHandle:function(e,n,r){var i=this,a=parseFloat(e.css(`borderRightWidth`)),o=parseFloat(e.css(`borderBottomWidth`)),s=e.height(),c=e.width(),l=r?s-6.5-o:0,m=n?c-4.5-a:0,h=9,g=9,v;n&&r?(g=h=25,l-=12.5,m-=12.5,v=t.support.isRtl(i.element)?p:f):n&&!r?(g=s,v=d):!n&&r&&(h=c,v=u),i.resizeHandle.css({top:l,left:m,height:g,width:h}).attr(`side`,n).attr(`down`,r).removeClass(_).addClass(v).data(`div`,e).show()},_createResizeHint:function(t){var n=this;if(!n.hint){var r=t.css(`grid-column-end`),i=t.css(`grid-row-end`),a=t.css(`order`);n.hint=e(`<div class='`+y.styles.resizeHint+`'></div>`).css({order:a,"grid-column-end":r,"grid-row-end":i}).insertAfter(t)}},_removeResizeHint:function(){this._isresizing||(this.hint&&=(this.hint.remove(),null))},_positionHint:function(e,n){var r=this;e&&r.hint.css(`grid-column-end`,t.format(`span {0}`,e)),n&&r.hint.css(`grid-row-end`,t.format(`span {0}`,n))},_removeAbsoluteStyles:function(e){e.css(`position`,``),e.css(`left`,``),e.css(`top`,``),e.css(`width`,``),e.css(`height`,``),e.css(`z-index`,``)},_positionAbsolutely:function(e){if(e.css(`position`)!=`absolute`){var t=e.position(),n=e.outerWidth(),r=e.outerHeight();e.css(`position`,`absolute`),e.css(`left`,t.left),e.css(`top`,t.top),e.css(`width`,n),e.css(`height`,r),e.css(`z-index`,2)}},_navigatable:function(){if(this.options.navigatable){var e=this;e.element.children().attr(`tabindex`,0),e.element.on(`keydown`+l,e,e._keyDown.bind(e))}},_keyDown:function(t){var n=e(t.target),r=!1;n.is(`.k-tilelayout-item.k-card`)&&(t.ctrlKey&&t.keyCode==a.LEFT&&(r=!0,this._resizeItem(n,`horizontal`,-1)),t.ctrlKey&&t.keyCode==a.RIGHT&&(r=!0,this._resizeItem(n,`horizontal`,1)),t.ctrlKey&&t.keyCode==a.UP&&(r=!0,this._resizeItem(n,`vertical`,-1)),t.ctrlKey&&t.keyCode==a.DOWN&&(r=!0,this._resizeItem(n,`vertical`,1)),t.shiftKey&&t.keyCode==a.LEFT&&(r=!0,this._reorderItem(n,-1)),t.shiftKey&&t.keyCode==a.RIGHT&&(r=!0,this._reorderItem(n,1)),r&&t.preventDefault())},_resizeItem:function(e,n,r){var i=this,a=e.attr(`id`),o,c;i.options.resizable&&(n===`horizontal`?(o=parseInt(e.css(`grid-column-end`).replace(`span`,``),10)+r,c=i.element.css(`grid-template-columns`).split(` `).length,c>=o&&o>0&&(i.itemsMap[a].colSpan=o,e.css({"grid-column-end":t.format(`span {0}`,o)}),i.trigger(s,{container:e}))):(o=parseInt(e.css(`grid-row-end`).replace(`span`,``),10)+r,c=i.element.css(`grid-template-rows`).split(` `).length,c>=o&&o>0&&(i.itemsMap[a].rowSpan=o,e.css({"grid-row-end":t.format(`span {0}`,o)}),i.trigger(s,{container:e}))))},_reorderItem:function(e,n){if(this.options.reorderable){var r=parseInt(e.css(`order`),10),i=this.element.children().length;if(n=r+n,n>=0&&n<i){var a=this.element.find(`> [`+t.attr(`index`)+`='`+n+`']`);this.itemsMap[e.attr(`id`)].order=n,this.itemsMap[a.attr(`id`)].order=r,this._updateContainers(),this._updateDOM(),e.trigger(`focus`),this.trigger(c,{newIndex:n,oldIndex:r,container:e})}}},_sortContainers:function(n){var r=t.attr(`index`);return[].sort.call(n,function(t,n){t=e(t),n=e(n);var i=t.attr(r),a=n.attr(r);return i===void 0&&(i=e(t).index()),a===void 0&&(a=e(n).index()),i=parseInt(i,10),a=parseInt(a,10),i>a?1:i<a?-1:0})},_updateDOM:function(){var t=this,n=t.element.children(`:visible`);n=t._sortContainers(n),n.each(function(){e(this).appendTo(t.element)})},_resizable:function(){var t=this,r,i,a,c,u,d,f=0,p=0,m=0,h=0,_=0,v=0,b=0,x;t.options.resizable&&(t.element.on(`mousemove`+l,o(y.styles.item),function(n){var r,i,a=e(this),o=a[0].getBoundingClientRect();r=Math.abs(o.right-n.clientX)<16,i=Math.abs(o.bottom-n.clientY)<16,r&&i?t._createResizeHandle(a,!0,!0):r?t._createResizeHandle(a,!0,!1):i&&t._createResizeHandle(a,!1,!0)}),t.resizable=new n.Resizable(t.element,{handle:`div.k-tilelayout-item > .k-resize-handle`,start:function(n){var o=e(n.currentTarget);d=o.data(`div`),a=d.attr(`id`),r=o.attr(`side`),i=o.attr(`down`),x=t.element.css(`grid-template-rows`).split(` `).length,r&&(c=t._calculateFractionWidth(),b=t._calculateRightEndSide(c),f=n.x.location,m=d.width(),_=parseInt(d.css(`grid-column-end`).replace(`span`,``),10)),i&&(u=(t.element[0].scrollHeight-(x+1)*t.options.gap.rows)/x,p=n.y.location,h=d.height(),v=parseInt(d.css(`grid-row-end`).replace(`span`,``),10)),t._isresizing=!0},resize:function(e){var n=0,o=0,s=0,l=0,y,x,S=0,C=0,w=0,T=t.element[0].getBoundingClientRect(),E=!!t.element[0].style.height;t._positionAbsolutely(d),t._createResizeHint(d),r==`true`&&(s=e.x.location-f,y=T.left+b-window.scrollX-e.x.location<t.options.gap.columns,x=m+s<c,!y&&!x?(w=s/(c+t.options.gap.columns),S=s-Math.floor(w)*(c+t.options.gap.columns),n=_+Math.floor(w)+(S>=c/2?1:0),t.itemsMap[a].colSpan=Math.max(n,g)):s=0),i==`true`&&(l=e.y.location-p,y=T.bottom+window.scrollY-e.y.location<t.options.gap.rows,x=h+l<=u,!x&&(!y||!E)?(C=l/(u+t.options.gap.rows),S=l-Math.floor(C)*(u+t.options.gap.rows),o=v+Math.floor(C)+(S>=u/2?1:0),t.itemsMap[a].rowSpan=Math.max(o,g)):l=0),t._positionHint(n,o),t._positionResizeHandle(d,r==`true`,i==`true`),l&&d.css(`height`,h+l),s&&d.css(`width`,m+s)},resizeend:function(){t._isresizing=!1,t._setContainerCoordinates(d,t.itemsMap[a]),t._removeAbsoluteStyles(d),t._removeResizeHint(),t.trigger(s,{container:d})}}))},_calculateFractionWidth:function(){var e=this,t=e.element.children().first(),n=e.itemsMap[t.attr(`id`)].colSpan;return(t.outerWidth()-(n-1)*e.options.gap.columns)/n},_calculateRightEndSide:function(e){var t=this,n=t.options.columns,r=t.options.gap.columns;return n*(e+r)+r},_createDropHint:function(n){this.dropHint=e(`<div class='`+y.styles.reorderHint+`'></div>`).css({order:n.order,"grid-column-end":n.columnEnd,"grid-row-end":n.rowEnd}).attr(t.attr(`index`),n.order).attr(`direction`,n.direction)},_insertDropHint:function(e,t){t==`right`?this.dropHint.insertAfter(e):this.dropHint.insertBefore(e)},_removeDropHint:function(){this.dropHint&&=(this.dropHint.remove(),null)},_reorderable:function(){if(this.options.reorderable){var n=this,r=n.element,a,s=o(y.styles.item),l=o(y.styles.itemHeader),u=t.guid();this._draggableInstance=new i(this.element,{filter:l+`,.k-layout-item-hint-reorder`,autoScroll:!0,ignore:`:input`,group:u,clickMoveClick:this.options.reorderable.clickMoveClick!==!1,hint:function(e){var t=e.closest(s),n=t.width(),r=t.height(),i=t.clone();return i.find(l).removeClass(m).addClass(h),i.width(n).height(r)},dragstart:function(t){a=e(t.currentTarget).closest(s),document.body.style.cursor=`move`},drag:function(r){var i=t.elementUnderCursor(r),o=r.sender.hint,c,l,u,d,f,p=n._draggableInstance.currentTarget.closest(s),m;if(b(o[0],i)){if(o.hide(),i=t.elementUnderCursor(r),!b(a[0],i)){if(n.dropHint&&n.dropHint[0]==i[0]){o.show();return}if(c=e(i),c=c.hasClass(y.styles.item)?c:c.closest(s),c.hasClass(y.styles.item))if(l=c[0].getBoundingClientRect(),u=r.clientX-l.left,d=l.right-r.clientX,f=u>d?`right`:`left`,m=c.css(`order`),n.dropHint&&n.dropHint.attr(`direction`)!==f){var h=n.dropHint.clone();h.css(`order`,m),n.dropHint.remove(),n.dropHint=h,n._insertDropHint(c,f),n.dropHint.attr(`direction`,f).attr(t.attr(`index`),m)}else n.dropHint||(f==`right`?c.next():c.prev())[0]!=a[0]&&(n._createDropHint({order:m,columnEnd:p.css(`grid-column-end`),rowEnd:p.css(`grid-row-end`),direction:f}),a.hide(),n._insertDropHint(c,f))}o.show()}},dragend:function(e){if(document.body.style.cursor=`auto`,!n.dropHint){e.sender.hint.remove(),n._removeDropHint();return}var r=parseInt(n.dropHint.css(`order`),10),i=e.currentTarget.closest(s),a=n.element.find(s),o=parseInt(i.css(`order`),10),l=i.attr(`id`),u=n.element.children(`:visible`),d,f,p,m;u=n._sortContainers(u),r=u.index(n.dropHint[0]),f=Math.max(r,o),d=Math.min(r,o),n.itemsMap[l].order=r,m=r>o?`right`:`left`,m==`left`?f--:d++;for(var h=d;h<=f;h++)p=a.filter(`[`+t.attr(`index`)+`='`+h+`']`),n.itemsMap[p.attr(`id`)].order+=m==`left`?1:-1;i.show(),n._updateContainers(),e.sender.hint.remove(),n._removeDropHint(),n.options.navigatable&&n._updateDOM(),n.trigger(c,{newIndex:r,oldIndex:o,container:i})},dragcancel:function(){document.body.style.cursor=`auto`,n._removeDropHint(),a&&a.show()}}),r.find(s).kendoDropTarget({group:u,dragenter:function(t){if(!n._isresizing){var r=e(t.dropTarget),i=n._draggableInstance.currentTarget.closest(s),o,c,l,u,d;if(a[0]!=r[0]){if(o=r[0].getBoundingClientRect(),c=t.clientX-o.left,l=o.right-t.clientX,d=c>l?`right`:`left`,u=d==`right`?r.next():r.prev(),u[0]==a[0])return;n._removeDropHint(),a.hide(),n._createDropHint({order:r.css(`order`),columnEnd:i.css(`grid-column-end`),rowEnd:i.css(`grid-row-end`),direction:d}),a.hide(),n._insertDropHint(r,d)}}}})}}});function b(t,n){try{return e.contains(t,n)||t==n}catch{return!1}}n.plugin(y),e.extend(!0,y,{styles:v})})(window.kendo.jQuery);var a=kendo;e.__meta__=i,e.default=a}); //# sourceMappingURL=kendo.tilelayout.min.js.map