ax5ui-layout
Version:
A mediaViewer plugin that works with Bootstrap & jQuery
3 lines (2 loc) • 17.4 kB
JavaScript
"use strict";!function(){var t=ax5.ui,e=ax5.util;t.addClass({className:"layout"},function(){var t=function(){var t,i=this,n={mousedown:ax5.info.supportTouch?"touchstart":"mousedown",mousemove:ax5.info.supportTouch?"touchmove":"mousemove",mouseup:ax5.info.supportTouch?"touchend":"mouseup"},a=function(t){var e="changedTouches"in t.originalEvent&&t.changedTouches?t.originalEvent.changedTouches[0]:t;return{clientX:e.clientX,clientY:e.clientY}};this.instanceId=ax5.getGuid(),this.config={theme:"default",animateTime:250,splitter:{size:1},autoResize:!0},this.queue=[],this.openTimer=null,this.closeTimer=null,this.resizer=null,t=this.config;var o=function(){for(var t=this.queue.length;t--;)"undefined"==typeof this.queue[t].parentQueIdx&&this.queue[t].autoResize&&h.call(this,t,null,"windowResize")},s={width:function(t,e){return e?e.__width+(e.split?t.splitter.size:0):0},height:function(t,e){return e?e.__height+(e.split?t.splitter.size:0):0}},l=function(t,i){return"*"==t?void 0:"%"==e.right(t,1)?i*e.number(t)/100:Number(t)},h=function(){var t={split:{horizontal:function(t,e,i){e.splitter?e.__height=t.splitter.size:i==t.splitPanel.length-1&&0==t.splitPanel.asteriskLength?(e.height="*",e.__height=void 0,t.splitPanel.asteriskLength++):"*"==e.height&&t.splitPanel.asteriskLength++},vertical:function(t,e,i){e.splitter?e.__width=t.splitter.size:i==t.splitPanel.length-1&&0==t.splitPanel.asteriskLength?(e.width="*",e.__width=void 0,t.splitPanel.asteriskLength++):"*"==e.width&&t.splitPanel.asteriskLength++}}},i={top:function(t,e){e.$target.css({height:e.__height||0}),e.split&&e.$splitter.css({height:t.splitter.size,top:e.__height||0})},bottom:function(t,e){e.$target.css({height:e.__height||0}),e.split&&e.$splitter.css({height:t.splitter.size,bottom:e.__height||0})},left:function(t,e){var i={width:e.__width||0,height:t.targetDimension.height};t.dockPanel.top&&(i.height-=t.dockPanel.top.__height,i.top=t.dockPanel.top.__height,t.dockPanel.top.split&&(i.height-=t.splitter.size,i.top+=t.splitter.size)),t.dockPanel.bottom&&(i.height-=t.dockPanel.bottom.__height,t.dockPanel.bottom.split&&(i.height-=t.splitter.size)),e.$target.css(i),e.split&&e.$splitter.css({width:t.splitter.size,height:i.height,top:i.top,left:i.width})},right:function(t,e){var i={width:e.__width||0,height:t.targetDimension.height};t.dockPanel.top&&(i.height-=t.dockPanel.top.__height,i.top=t.dockPanel.top.__height,t.dockPanel.top.split&&(i.height-=t.splitter.size,i.top+=t.splitter.size)),t.dockPanel.bottom&&(i.height-=t.dockPanel.bottom.__height,t.dockPanel.bottom.split&&(i.height-=t.splitter.size)),e.$target.css(i),e.split&&e.$splitter.css({width:t.splitter.size,height:i.height,top:i.top,right:i.width})},center:function(t,e){var i={width:t.targetDimension.width,height:t.targetDimension.height};t.dockPanel.top&&(i.height-=t.dockPanel.top.__height||0,i.top=t.dockPanel.top.__height||0,t.dockPanel.top.split&&(i.height-=t.splitter.size,i.top+=t.splitter.size)),t.dockPanel.bottom&&(i.height-=t.dockPanel.bottom.__height||0,t.dockPanel.bottom.split&&(i.height-=t.splitter.size)),t.dockPanel.left&&(i.width-=t.dockPanel.left.__width||0,i.left=t.dockPanel.left.__width||0,t.dockPanel.left.split&&(i.width-=t.splitter.size,i.left+=t.splitter.size)),t.dockPanel.right&&(i.width-=t.dockPanel.right.__width||0,t.dockPanel.right.split&&(i.width-=t.splitter.size));var n=e.minWidth||0,a=e.minHeight||0;i.width<n&&(i.width=n,t.$target.css({minWidth:n+s.width(t.dockPanel.left,t.splitter.size)+s.width(t.dockPanel.right,t.splitter.size)})),i.height<a&&(i.height=a,t.$target.css({minHeight:a+s.height(t.dockPanel.top,t.splitter.size)+s.height(t.dockPanel.bottom,t.splitter.size)})),e.$target.css(i)},split:{horizontal:function(t,e,i,n,a){var o={display:"block"},s=i?Number(t.splitPanel[i-1].offsetEnd):0;e.splitter?o.height=t.splitter.size:"*"!=e.height||"undefined"!=typeof e.__height&&!a?o.height=e.__height||0:o.height=e.__height=(t.targetDimension.height-n)/t.splitPanel.asteriskLength,o.top=s,e.offsetStart=s,e.offsetEnd=Number(s)+Number(o.height),e.$target.css(o)},vertical:function(t,e,i,n,a){var o={display:"block"},s=i?Number(t.splitPanel[i-1].offsetEnd):0;e.splitter?o.width=t.splitter.size:"*"!=e.width||"undefined"!=typeof e.__width&&!a?o.width=e.__width||0:o.width=e.__width=(t.targetDimension.width-n)/t.splitPanel.asteriskLength,o.left=s,e.offsetStart=s,e.offsetEnd=Number(s)+Number(o.width),e.$target.css(o)}}},n={"dock-panel":function(t){for(var e in t.dockPanel)t.dockPanel[e].$target&&t.dockPanel[e].$target.get(0)&&e in i&&i[e].call(this,t,t.dockPanel[e])},"split-panel":function(n,a){var o;n.splitPanel.asteriskLength=0,n.splitPanel.forEach(function(e,i){t.split[n.orientation].call(this,n,e,i)}),o="horizontal"==n.orientation?e.sum(n.splitPanel,function(t){if("*"!=t.height)return e.number(t.__height)}):e.sum(n.splitPanel,function(t){if("*"!=t.width)return e.number(t.__width)}),n.splitPanel.forEach(function(t,e){i.split[n.orientation].call(this,n,t,e,o,a)})}},a=function(t,e,i){for(var n=t.childQueIdxs.length;n--;)h.call(this,t.childQueIdxs[n],e,i)};return function(t,e,i){var o=this.queue[t];o.targetDimension={height:o.$target.innerHeight(),width:o.$target.innerWidth()},o.layout in n&&n[o.layout].call(this,o,i),o.childQueIdxs&&a.call(this,o,e,i),o.onResize&&setTimeout(function(){this.onResize.call(this,this)}.bind(o),1),e&&e.call(o,o)}}(),r={on:function(t,e,a){var o=this.queue[t],l=a.position(),h={width:a.width(),height:a.height()},d={left:function(t){var i="changedTouches"in t.originalEvent&&t.changedTouches?t.originalEvent.changedTouches[0]:t;e.__da=i.clientX-e.mousePosition.clientX;var n=e.minWidth||0,a=e.maxWidth||o.targetDimension.width-s.width(o,o.dockPanel.left)-s.width(o,o.dockPanel.right);return e.__width+e.__da<n?e.__da=-e.__width+n:a<e.__width+e.__da&&(e.__da=a-e.__width),{left:e.$splitter.position().left+e.__da}},right:function(t){var i="changedTouches"in t.originalEvent&&t.changedTouches?t.originalEvent.changedTouches[0]:t;e.__da=i.clientX-e.mousePosition.clientX;var n=e.minWidth||0,a=e.maxWidth||o.targetDimension.width-s.width(o,o.dockPanel.left)-s.width(o,o.dockPanel.right);return e.__width-e.__da<n?e.__da=e.__width-n:a<e.__width-e.__da&&(e.__da=-a+e.__width),{left:e.$splitter.position().left+e.__da}},top:function(t){var i="changedTouches"in t.originalEvent&&t.changedTouches?t.originalEvent.changedTouches[0]:t;e.__da=i.clientY-e.mousePosition.clientY;var n=e.minHeight||0,a=e.maxHeight||o.targetDimension.height-s.height(o,o.dockPanel.top)-s.height(o,o.dockPanel.bottom);return e.__height+e.__da<n?e.__da=-e.__height+n:a<e.__height+e.__da&&(e.__da=a-e.__height),{top:e.$splitter.position().top+e.__da}},bottom:function(t){var i="changedTouches"in t.originalEvent&&t.changedTouches?t.originalEvent.changedTouches[0]:t;e.__da=i.clientY-e.mousePosition.clientY;var n=e.minHeight||0,a=e.maxHeight||o.targetDimension.height-s.height(o,o.dockPanel.top)-s.height(o,o.dockPanel.bottom);return e.__height-e.__da<n?e.__da=e.__height-n:a<e.__height-e.__da&&(e.__da=-a+e.__height),{top:e.$splitter.position().top+e.__da}},split:function(t){var i="changedTouches"in t.originalEvent&&t.changedTouches?t.originalEvent.changedTouches[0]:t;if("horizontal"==o.orientation){e.__da=i.clientY-e.mousePosition.clientY;var n=o.splitPanel[e.panelIndex-1],a=o.splitPanel[e.panelIndex+1],s=n.minHeight||0,l=a.minHeight||0;return e.offsetStart+e.__da<n.offsetStart+s?e.__da=n.offsetStart-e.offsetStart+s:e.offsetStart+e.__da>a.offsetEnd-l&&(e.__da=a.offsetEnd-e.offsetEnd-l),{top:e.$target.position().top+e.__da}}e.__da=i.clientX-e.mousePosition.clientX;var n=o.splitPanel[e.panelIndex-1],a=o.splitPanel[e.panelIndex+1],h=n.minWidth||0,r=a.minWidth||0;return e.offsetStart+e.__da<n.offsetStart+h?e.__da=n.offsetStart-e.offsetStart+h:e.offsetStart+e.__da>a.offsetEnd-r&&(e.__da=a.offsetEnd-e.offsetEnd-r),{left:Number(e.$target.position().left)+Number(e.__da)}}};e.__da=0,jQuery(document.body).bind(n.mousemove+".ax5layout-"+this.instanceId,function(t){i.resizer||(i.resizer=jQuery('<div class="ax5layout-resizer panel-'+e.resizerType+'" ondragstart="return false;"></div>'),i.resizer.css({left:l.left,top:l.top,width:h.width,height:h.height}),o.$target.append(i.resizer)),i.resizer.css(d[e.resizerType](t))}).bind(n.mouseup+".ax5layout-"+this.instanceId,function(n){r.off.call(i,t,e,a)}).bind("mouseleave.ax5layout-"+this.instanceId,function(n){r.off.call(i,t,e,a)}),jQuery(document.body).attr("unselectable","on").css("user-select","none").on("selectstart",!1)},off:function(t,e,a){var o=this.queue[t],s={"dock-panel":{left:function(t,e){e.__width+=e.__da},right:function(){e.__width-=e.__da},top:function(){e.__height+=e.__da},bottom:function(){e.__height-=e.__da}},"split-panel":{split:function(){"horizontal"==o.orientation?(o.splitPanel[e.panelIndex-1].__height+=e.__da,o.splitPanel[e.panelIndex+1].__height-=e.__da):(o.splitPanel[e.panelIndex-1].__width+=e.__da,o.splitPanel[e.panelIndex+1].__width-=e.__da)}},"tab-panel":{}};i.resizer&&(i.resizer.remove(),i.resizer=null,s[this.queue[t].layout][e.resizerType].call(this,t,e),h.call(this,t)),jQuery(document.body).unbind(n.mousemove+".ax5layout-"+this.instanceId).unbind(n.mouseup+".ax5layout-"+this.instanceId).unbind("mouseleave.ax5layout-"+this.instanceId),jQuery(document.body).removeAttr("unselectable").css("user-select","auto").off("selectstart")}},d={open:function(t,e,i){if(e.activePanelIndex!=i&&(e.tabPanel[i].active=!0,e.tabPanel[e.activePanelIndex].active=!1,e.$target.find('[data-tab-panel-label="'+i+'"]').attr("data-tab-active","true"),e.$target.find('[data-tab-panel-label="'+e.activePanelIndex+'"]').removeAttr("data-tab-active"),e.tabPanel[i].$target.attr("data-tab-active","true"),e.tabPanel[e.activePanelIndex].$target.removeAttr("data-tab-active"),e.activePanelIndex=i,e.onOpenTab)){var n={$target:e.$target,name:e.name,id:e.id,layout:e.layout,activePanelIndex:e.activePanelIndex,activePanel:e.tabPanel[e.activePanelIndex],tabPanel:e.tabPanel};e.onOpenTab.call(n)}}},u=function(){return'\n<div data-tab-panel-label-holder="{{id}}">\n <div data-tab-panel-label-border="{{id}}"></div>\n <div data-tab-panel-label-table="{{id}}">\n <div data-tab-panel-aside="left"></div>\n {{#tabPanel}}\n <div data-tab-panel-label="{{panelIndex}}" data-tab-active="{{active}}">\n <div data-tab-label="{{panelIndex}}">{{{label}}}</div>\n </div>\n {{/tabPanel}}\n <div data-tab-panel-aside="right"></div>\n </div>\n</div>\n'},c=function(){var t={"dock-panel":function(t){var o=this.queue[t];o.dockPanel={},o.$target.find(">[data-dock-panel]").each(function(){var s={};!function(t){e.isObject(t)&&!t.error&&(s=jQuery.extend(!0,s,t))}(e.parseJson(this.getAttribute("data-dock-panel"),!0)),"dock"in s&&(s.$target=jQuery(this),s.$target.addClass("dock-panel-"+s.dock),(s.split=s.split&&"true"==s.split.toString())&&(s.$splitter=jQuery('<div data-splitter="" class="dock-panel-'+s.dock+'"></div>'),s.$splitter.bind(n.mousedown,function(e){s.mousePosition=a(e),r.on.call(i,t,s,s.$splitter)}).bind("dragstart",function(t){return e.stopEvent(t),!1}),o.$target.append(s.$splitter)),"top"==s.dock||"bottom"==s.dock?s.__height=l(s.height,o.targetDimension.height):s.__width=l(s.width,o.targetDimension.width),s.resizerType=s.dock,o.dockPanel[s.dock]=s)})},"split-panel":function(t){var o=this.queue[t];o.splitPanel=[],o.$target.find(">[data-split-panel], >[data-splitter]").each(function(s){var h={};!function(t){e.isObject(t)&&!t.error&&(h=jQuery.extend(!0,h,t))}(e.parseJson(this.getAttribute("data-split-panel")||this.getAttribute("data-splitter"),!0)),h.$target=jQuery(this),h.$target.addClass("split-panel-"+o.orientation),h.panelIndex=s,this.getAttribute("data-splitter")?(h.splitter=!0,h.$target.bind(n.mousedown,function(e){h.panelIndex>0&&h.panelIndex<o.splitPanel.length-1&&(h.mousePosition=a(e),r.on.call(i,t,h,h.$target))}).bind("dragstart",function(t){return e.stopEvent(t),!1}),h.resizerType="split"):"horizontal"==o.orientation?h.__height=l(h.height,o.targetDimension.height):(o.orientation="vertical",h.__width=l(h.width,o.targetDimension.width)),o.splitPanel.push(h)})},"tab-panel":function(t){var n=this.queue[t],a=!1;n.tabPanel=[],n.$target.find(">[data-tab-panel]").each(function(t){var i={};!function(t){e.isObject(t)&&!t.error&&(i=jQuery.extend(!0,i,t))}(e.parseJson(this.getAttribute("data-tab-panel"),!0)),a&&(i.active=!1),i.$target=jQuery(this),i.active&&"false"!=i.active&&(a=!0,n.activePanelIndex=t,i.$target.attr("data-tab-active","true")),i.panelIndex=t,n.tabPanel.push(i)}),a||(n.tabPanel[0].active=!0,n.tabPanel[0].$target.attr("data-tab-active","true"),n.activePanelIndex=0),n.$target.append(jQuery(ax5.mustache.render(u.call(this,t),n))),n.$target.on("click","[data-tab-panel-label]",function(e){var a=this.getAttribute("data-tab-panel-label");d.open.call(i,t,n,a)})}};return function(e){var i=this.queue[e];i.targetDimension={height:i.$target.innerHeight(),width:i.$target.innerWidth()},i.$target.parents("[data-ax5layout]").get(0)&&p.call(this,i.$target.parents("[data-ax5layout]").get(0),e),i.layout in t&&t[i.layout].call(this,e),h.call(this,e)}}(),g=function(t){return e.isString(t)||(t=jQuery(t).data("data-ax5layout-id")),e.isString(t)?e.search(this.queue,function(){return this.id==t}):-1},p=function(t,i){var n=e.isNumber(t)?t:g.call(this,t);this.queue[n].childQueIdxs||(this.queue[n].childQueIdxs=[]),this.queue[n].childQueIdxs.push(i),this.queue[i].parentQueIdx=n};this.init=function(){this.onStateChanged=t.onStateChanged,this.onClick=t.onClick,jQuery(window).bind("resize.ax5layout-"+this.instanceId,function(){o.call(this)}.bind(this))},this.bind=function(i){var n,a={};return i=jQuery.extend(!0,a,t,i),i.target?(i.$target=jQuery(i.target),i.id||(i.id=i.$target.data("data-ax5layout-id")),i.id||(i.id="ax5layout-"+ax5.getGuid(),i.$target.data("data-ax5layout-id",i.id)),i.name=i.$target.attr("data-ax5layout"),i.options&&(i.options=JSON.parse(JSON.stringify(i.options))),function(t){e.isObject(t)&&!t.error&&(i=jQuery.extend(!0,i,t))}(e.parseJson(i.$target.attr("data-config"),!0)),n=e.search(this.queue,function(){return this.id==i.id}),n===-1?(this.queue.push(i),c.call(this,this.queue.length-1)):(this.queue[n]=jQuery.extend(!0,{},this.queue[n],i),c.call(this,n)),a=null,n=null,this):(console.log(ax5.info.getError("ax5layout","401","bind")),this)},this.align=function(t,i){var n=e.isNumber(t)?t:g.call(this,t);if(n===-1)for(var a=this.queue.length;a--;)h.call(this,a,null,i);else h.call(this,n,null,i);return this},this.onResize=function(t,i){var n=e.isNumber(t)?t:g.call(this,t);return n===-1?void console.log(ax5.info.getError("ax5layout","402","onResize")):(this.queue[n].onResize=i,this)},this.resize=function(){var t={"dock-panel":function(t,i){["top","bottom","left","right"].forEach(function(n){i[n]&&t.dockPanel[n]&&("top"==n||"bottom"==n?t.dockPanel[n].__height=e.isObject(i[n])?i[n].height:i[n]:"left"!=n&&"right"!=n||(t.dockPanel[n].__width=e.isObject(i[n])?i[n].width:i[n]))})},"split-panel":function(){},"tab-panel":function(){}};return function(i,n,a){var o=e.isNumber(i)?i:g.call(this,i);if(o===-1)for(var s=this.queue.length;s--;)t[this.queue[s].layout].call(this,this.queue[s],n),h.call(this,s,a);else this.queue[o]&&(t[this.queue[o].layout].call(this,this.queue[o],n),h.call(this,o,a));return this}}(),this.reset=function(){var t={"dock-panel":function(t){["top","bottom","left","right"].forEach(function(e){t.dockPanel[e]&&("top"==e||"bottom"==e?t.dockPanel[e].__height=t.dockPanel[e].height:"left"!=e&&"right"!=e||(t.dockPanel[e].__width=t.dockPanel[e].width))})},"split-panel":function(t){t.splitPanel.forEach(function(e){"vertical"==t.orientation?e.__width=l(e.width,t.targetDimension.width):"horizontal"==t.orientation&&(e.__height=l(e.height,t.targetDimension.height))})},"tab-panel":function(){}};return function(i,n){var a=e.isNumber(i)?i:g.call(this,i);return a===-1||(t[this.queue[a].layout].call(this,this.queue[a]),h.call(this,a,n)),this}}(),this.hide=function(){},this.tabOpen=function(){return function(t,i){var n=e.isNumber(t)?t:g.call(this,t);return n===-1?void console.log(ax5.info.getError("ax5layout","402","tabOpen")):(d.open.call(this,n,this.queue[n],i),this)}}(),this.getActiveTab=function(t){var i=e.isNumber(t)?t:g.call(this,t);return i===-1?void console.log(ax5.info.getError("ax5layout","402","tabOpen")):"undefined"!=typeof this.queue[i].activePanelIndex?this.queue[i].tabPanel[this.queue[i].activePanelIndex]:void 0},this.main=function(){arguments&&e.isObject(arguments[0])?this.setConfig(arguments[0]):this.init()}.apply(this,arguments)};return t}())}(),ax5.ui.layout_instance=new ax5.ui.layout,jQuery.fn.ax5layout=function(){return function(t){if(ax5.util.isString(arguments[0])){var e=arguments[0];switch(e){case"align":return ax5.ui.layout_instance.align(this,arguments[1]);case"resize":return ax5.ui.layout_instance.resize(this,arguments[1],arguments[2]);case"reset":return ax5.ui.layout_instance.reset(this,arguments[1]);case"hide":return ax5.ui.layout_instance.hide(this,arguments[1]);case"onResize":return ax5.ui.layout_instance.onResize(this,arguments[1]);case"tabOpen":return ax5.ui.layout_instance.tabOpen(this,arguments[1]);case"getActiveTab":return ax5.ui.layout_instance.getActiveTab(this,arguments[1]);default:return this}}else"undefined"==typeof t&&(t={}),jQuery.each(this,function(){var e={target:this};t=jQuery.extend({},t,e),ax5.ui.layout_instance.bind(t)});return this}}();
//# sourceMappingURL=ax5layout.min.js.map