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