7 lines
17 KiB
JavaScript
7 lines
17 KiB
JavaScript
/*!
|
|
* AngularJS Material Design
|
|
* https://github.com/angular/material
|
|
* @license MIT
|
|
* v1.1.18-master-97a1616
|
|
*/
|
|
function MdTabsPaginationService(){return{decreasePageOffset:function(e,t){var a,n,s=e.canvas,r=o(e);for(a=0;a<r.length;a++)if(r[a]>=t){n=r[a];break}return Math.max(0,n-s.clientWidth)},increasePageOffset:function(e,t){var a,n,s=e.canvas,r=d(e)-s.clientWidth,i=o(e);for(a=0;i.length,i[a]<=t+s.clientWidth;a++)n=i[a];return Math.min(r,n)},getTabOffsets:o,getTotalTabsWidth:d};function o(e){var t,a,n=0,s=[];for(t=0;t<e.tabs.length;t++)a=e.tabs[t],s.push(n),n+=a.offsetWidth;return s}function d(e){var t,a=0;for(t=0;t<e.tabs.length;t++)a+=e.tabs[t].offsetWidth;return a}}function MdTab(){return{require:"^?mdTabs",terminal:!0,compile:function(e,t){var a=d(e,"md-tab-label"),n=d(e,"md-tab-body");if(0===a.length&&(a=angular.element("<md-tab-label></md-tab-label>"),t.label?a.text(t.label):a.append(e.contents()),0===n.length)){var s=e.contents().detach();(n=angular.element("<md-tab-body></md-tab-body>")).append(s)}return e.append(a),n.html()&&e.append(n),r},scope:{active:"=?mdActive",disabled:"=?ngDisabled",select:"&?mdOnSelect",deselect:"&?mdOnDeselect",tabClass:"@mdTabClass"}};function r(e,t,a,n){if(n){var s=n.getTabElementIndex(t),r=d(t,"md-tab-body").remove(),i=d(t,"md-tab-label").remove(),o=n.insertTab({scope:e,parent:e.$parent,index:s,element:t,template:r.html(),label:i.html()},s);e.select=e.select||angular.noop,e.deselect=e.deselect||angular.noop,e.$watch("active",function(e){e&&n.select(o.getIndex(),!0)}),e.$watch("disabled",function(){n.refreshIndex()}),e.$watch(function(){return n.getTabElementIndex(t)},function(e){o.index=e,n.updateTabOrder()}),e.$on("$destroy",function(){n.removeTab(o)})}}function d(e,t){for(var a=e[0].children,n=0,s=a.length;n<s;n++){var r=a[n];if(r.tagName===t.toUpperCase())return angular.element(r)}return angular.element()}}function MdTabItem(){return{require:"^?mdTabs",link:function(e,t,a,n){n&&n.attachRipple(e,t)}}}function MdTabLabel(){return{terminal:!0}}function MdTabScroll(n){return{restrict:"A",compile:function(e,t){var a=n(t.mdTabScroll,null,!0);return function(t,e){e.on("wheel",function(e){t.$apply(function(){a(t,{$event:e})})})}}}}function MdTabsController(c,l,t,a,s,b,d,r,n,e,i,u,o){var m=this,f=!1,g=[],p=!1,h=!1;function T(t,e){var a=r.$normalize("md-"+t);function n(e){m[t]="false"!==e}e&&E(t,e),r.hasOwnProperty(a)&&n(r[a]),r.$observe(a,n)}function x(){p=!0,angular.element(t).off("resize",P)}function v(){var e=O();angular.element(e.wrapper).toggleClass("md-stretch-tabs",function(){switch(m.stretchTabs){case"always":return!0;case"never":return!1;default:return!m.shouldPaginate&&t.matchMedia("(max-width: 600px)").matches}}()),Y()}function $(){m.shouldCenterTabs=D()}function C(t,e){if(t!==e){var a=O();angular.forEach(a.tabs,function(e){e.style.maxWidth=t+"px"}),angular.forEach(a.dummies,function(e){e.style.maxWidth=t+"px"}),b.nextTick(m.updateInkBarStyles)}}function I(e,t){e!==t&&(m.maxTabWidth=q(),m.shouldCenterTabs=D(),b.nextTick(function(){m.maxTabWidth=q(),_(m.selectedIndex)}))}function y(e){l[e?"removeClass":"addClass"]("md-no-tab-content")}function w(e){var t=(m.shouldCenterTabs||z()?"":"-")+e+"px";t=t.replace("--",""),angular.element(O().paging).css(a.CSS.TRANSFORM,"translate("+t+", 0)"),c.$broadcast("$mdTabsPaginationChanged")}function k(e,t){e!==t&&O().tabs[e]&&(_(),H())}function M(e,t){e!==t&&(m.selectedIndex=A(e),m.lastSelectedIndex=t,m.updateInkBarStyles(),j(),_(e),c.$broadcast("$mdTabsChanged"),m.tabs[t]&&m.tabs[t].scope.deselect(),m.tabs[e]&&m.tabs[e].scope.select())}function S(e,t){f||(m.focusIndex=m.selectedIndex=e),t&&m.noSelectClick||b.nextTick(function(){m.tabs[e].element.triggerHandler("click")},!1)}function P(){m.lastSelectedIndex=m.selectedIndex,m.offsetLeft=U(m.offsetLeft),b.nextTick(function(){m.updateInkBarStyles(),B()})}function L(e){angular.element(O().inkBar).toggleClass("ng-hide",e)}function W(e){l.toggleClass("md-dynamic-height",e)}function O(){var e={},t=l[0];return e.wrapper=t.querySelector("md-tabs-wrapper"),e.canvas=e.wrapper.querySelector("md-tabs-canvas"),e.paging=e.canvas.querySelector("md-pagination-wrapper"),e.inkBar=e.paging.querySelector("md-ink-bar"),e.nextButton=t.querySelector("md-next-button"),e.prevButton=t.querySelector("md-prev-button"),e.contents=t.querySelectorAll("md-tabs-content-wrapper > md-tab-content"),e.tabs=e.paging.querySelectorAll("md-tab-item"),e.dummies=e.canvas.querySelectorAll("md-dummy-tab"),e}function D(){return m.centerTabs&&!m.shouldPaginate}function A(e){if(-1===e)return-1;var t,a,n=Math.max(m.tabs.length-e,e);for(t=0;t<=n;t++){if((a=m.tabs[e+t])&&!0!==a.scope.disabled)return a.getIndex();if((a=m.tabs[e-t])&&!0!==a.scope.disabled)return a.getIndex()}return e}function E(e,a,n){Object.defineProperty(m,e,{get:function(){return n},set:function(e){var t=n;n=e,a&&a(e,t)}})}function B(){m.maxTabWidth=q(),m.shouldPaginate=function(){var e;if(m.noPagination||!h)return!1;var t=l.prop("clientWidth");return angular.forEach(O().tabs,function(e){t-=e.offsetWidth}),e=t<0,b.msie&&(O().paging.style.width=e?"999999px":void 0),e}()}function F(e){var t=0;return angular.forEach(e,function(e){t+=Math.max(e.offsetWidth,e.getBoundingClientRect().width)}),Math.ceil(t)}function q(){var e=O().canvas.clientWidth;return Math.max(0,Math.min(e-1,264))}function R(e,t){var a,n=t?"focusIndex":"selectedIndex",s=m[n];for(a=s+e;m.tabs[a]&&m.tabs[a].scope.disabled;a+=e);a=(s+e+m.tabs.length)%m.tabs.length,m.tabs[a]&&(m[n]=a)}function H(){m.styleTabItemFocus="keyboard"===i.getLastInteractionType();var e=O().tabs[m.focusIndex];e&&e.focus()}function _(e){var t=O();if(angular.isNumber(e)||(e=m.focusIndex),t.tabs[e]&&!m.shouldCenterTabs){var a=t.tabs[e],n=a.offsetLeft,s=a.offsetWidth+n;if(0!==e)if(z()){var r=F(Array.prototype.slice.call(t.tabs,0,e)),i=F(Array.prototype.slice.call(t.tabs,0,e+1));m.offsetLeft=Math.min(m.offsetLeft,U(r)),m.offsetLeft=Math.max(m.offsetLeft,U(i-t.canvas.clientWidth))}else m.offsetLeft=Math.max(m.offsetLeft,U(s-t.canvas.clientWidth+32)),m.offsetLeft=Math.min(m.offsetLeft,U(n));else m.offsetLeft=0}}function N(){m.selectedIndex=A(m.selectedIndex),m.focusIndex=A(m.focusIndex)}function j(){if(!m.dynamicHeight)return l.css("height","");if(!m.tabs.length)return g.push(j);var e=O(),t=e.contents[m.selectedIndex],a=t?t.offsetHeight:0,n=e.wrapper.offsetHeight,s=a+n,r=l.prop("clientHeight");if(r!==s){"bottom"===l.attr("md-align-tabs")&&(r-=n,s-=n,void 0!==l.attr("md-border-bottom")&&++r),f=!0;var i={height:r+"px"},o={height:s+"px"};l.css(i),d(l,{from:i,to:o,easing:"cubic-bezier(0.35, 0, 0.25, 1)",duration:.5}).start().done(function(){l.css({transition:"none",height:""}),b.nextTick(function(){l.css("transition","")}),f=!1})}}function Y(e,t){if(!m.noInkBar){var a=O();if(a.tabs[m.selectedIndex])if(m.tabs.length)if(l.prop("offsetParent")){var n=m.selectedIndex,s=a.paging.offsetWidth,r=a.tabs[n],i=r.offsetLeft,o=s-i-r.offsetWidth;if(m.shouldCenterTabs){var d=F(a.tabs);d<s&&e!==s&&t!==d&&u(Y,0,!0,s,d)}!function(){var e=O(),t=m.selectedIndex,a=m.lastSelectedIndex,n=angular.element(e.inkBar);if(!angular.isNumber(a))return;n.toggleClass("md-left",t<a).toggleClass("md-right",a<t)}(),angular.element(a.inkBar).css({left:i+"px",right:o+"px"})}else(function e(){e.watcher||(e.watcher=c.$watch(function(){b.nextTick(function(){e.watcher&&l.prop("offsetParent")&&(e.watcher(),e.watcher=null,P())},!1)}))})();else g.push(m.updateInkBarStyles);else angular.element(a.inkBar).css({left:"auto",right:"auto"})}}function U(e){var t=O();if(!t.tabs.length||!m.shouldPaginate)return 0;var a=t.tabs[t.tabs.length-1],n=a.offsetLeft+a.offsetWidth;return e=z()?(e=Math.min(t.paging.offsetWidth-t.canvas.clientWidth,e),Math.max(0,e)):(e=Math.max(0,e),Math.min(n-t.canvas.clientWidth,e))}function z(){return"rtl"===b.bidi()}m.$onInit=function(){(function(t,e){var a=r.$normalize("md-"+t);e&&E(t,e);r.$observe(a,function(e){m[t]=e})})("stretchTabs",v),E("focusIndex",k,m.selectedIndex||0),E("offsetLeft",w,0),E("hasContent",y,!1),E("maxTabWidth",C,q()),E("shouldPaginate",I,!1),T("noInkBar",L),T("dynamicHeight",W),T("noPagination"),T("swipeContent"),T("noDisconnect"),T("autoselect"),T("noSelectClick"),T("centerTabs",$),T("enableDisconnect"),m.scope=c,m.parent=c.$parent,m.tabs=[],m.lastSelectedIndex=null,m.hasFocus=!1,m.styleTabItemFocus=!1,m.shouldCenterTabs=D(),m.tabContentPrefix="tab-content-",m.navigationHint="Use the left and right arrow keys to navigate between tabs",m.selectedIndex=m.selectedIndex||0,function(){var e=r.$mdTabsTemplate,t=angular.element(l[0].querySelector("md-tab-data"));t.html(e),n(t.contents())(m.parent),delete r.$mdTabsTemplate}(),c.$watch("$mdTabsCtrl.selectedIndex",M),angular.element(t).on("resize",P),c.$on("$destroy",x),e(l),b.nextTick(function(){j(),_(),Y(),m.tabs[m.selectedIndex]&&m.tabs[m.selectedIndex].scope.select(),h=!0,B()})},m.updatePagination=b.debounce(B,100),m.redirectFocus=H,m.attachRipple=function(e,t){var a=O(),n={colorElement:angular.element(a.inkBar)};s.attach(e,t,n)},m.insertTab=function(e,t){var a=h,n={getIndex:function(){return m.tabs.indexOf(s)},isActive:function(){return this.getIndex()===m.selectedIndex},isLeft:function(){return this.getIndex()<m.selectedIndex},isRight:function(){return this.getIndex()>m.selectedIndex},shouldRender:function(){return!m.noDisconnect||this.isActive()},hasFocus:function(){return m.styleTabItemFocus&&m.hasFocus&&this.getIndex()===m.focusIndex},id:b.nextUid(),hasContent:!(!e.template||!e.template.trim())},s=angular.extend(n,e);angular.isDefined(t)?m.tabs.splice(t,0,s):m.tabs.push(s);return function(){g.forEach(function(e){b.nextTick(e)}),g=[]}(),function(){var e,t=!1;for(e=0;e<m.tabs.length;e++)if(m.tabs[e].hasContent){t=!0;break}m.hasContent=t}(),b.nextTick(function(){B(),function(e){if(e.hasContent){var t=l[0].querySelectorAll('[md-tab-id="'+e.id+'"]');angular.element(t).attr("aria-controls",m.tabContentPrefix+e.id)}}(s),a&&m.autoselect&&b.nextTick(function(){b.nextTick(function(){S(m.tabs.indexOf(s))})})}),s},m.removeTab=function(e){if(p)return;var t=m.selectedIndex,a=m.tabs.splice(e.getIndex(),1)[0];N(),m.selectedIndex===t&&(a.scope.deselect(),m.tabs[m.selectedIndex]&&m.tabs[m.selectedIndex].scope.select());b.nextTick(function(){B(),m.offsetLeft=U(m.offsetLeft)})},m.select=S,m.scroll=function(e){if(!m.shouldPaginate)return;e.preventDefault(),e.deltaY?m.offsetLeft=U(m.offsetLeft+e.deltaY):e.deltaX&&(m.offsetLeft=U(m.offsetLeft+e.deltaX))},m.nextPage=function(){if(!m.canPageForward())return;var e=o.increasePageOffset(O(),m.offsetLeft);m.offsetLeft=U(e)},m.previousPage=function(){if(!m.canPageBack())return;var e=o.decreasePageOffset(O(),m.offsetLeft);m.offsetLeft=U(e)},m.keydown=function(e){switch(e.keyCode){case a.KEY_CODE.LEFT_ARROW:e.preventDefault(),R(-1,!0);break;case a.KEY_CODE.RIGHT_ARROW:e.preventDefault(),R(1,!0);break;case a.KEY_CODE.SPACE:case a.KEY_CODE.ENTER:e.preventDefault(),f||S(m.focusIndex);break;case a.KEY_CODE.TAB:m.focusIndex!==m.selectedIndex&&(m.focusIndex=m.selectedIndex)}},m.canPageForward=function(){var e=O(),t=e.tabs[e.tabs.length-1];if(z())return m.offsetLeft<e.paging.offsetWidth-e.canvas.offsetWidth;return t&&t.offsetLeft+t.offsetWidth>e.canvas.clientWidth+m.offsetLeft},m.canPageBack=function(){return 0<m.offsetLeft},m.refreshIndex=N,m.incrementIndex=R,m.getTabElementIndex=function(e){var t=l[0].getElementsByTagName("md-tab");return Array.prototype.indexOf.call(t,e[0])},m.updateInkBarStyles=b.debounce(Y,100),m.updateTabOrder=b.debounce(function(){var e=m.tabs[m.selectedIndex],t=m.tabs[m.focusIndex];m.tabs=m.tabs.sort(function(e,t){return e.index-t.index}),m.selectedIndex=m.tabs.indexOf(e),m.focusIndex=m.tabs.indexOf(t)},100),m.getFocusedTabId=function(){var e=m.tabs[m.focusIndex];return e&&e.id?"tab-item-"+e.id:null},1===angular.version.major&&angular.version.minor<=4&&this.$onInit()}function MdTabs(a){return{scope:{navigationHint:"@?mdNavigationHint",selectedIndex:"=?mdSelected"},template:function(e,t){return t.$mdTabsTemplate=e.html(),'<md-tabs-wrapper> <md-tab-data></md-tab-data> <md-prev-button tabindex="-1" role="button" aria-label="Previous Page" aria-disabled="{{!$mdTabsCtrl.canPageBack()}}" ng-class="{ \'md-disabled\': !$mdTabsCtrl.canPageBack() }" ng-if="$mdTabsCtrl.shouldPaginate" ng-click="$mdTabsCtrl.previousPage()"> <md-icon md-svg-src="'+a.mdTabsArrow+'"></md-icon> </md-prev-button> <md-next-button tabindex="-1" role="button" aria-label="Next Page" aria-disabled="{{!$mdTabsCtrl.canPageForward()}}" ng-class="{ \'md-disabled\': !$mdTabsCtrl.canPageForward() }" ng-if="$mdTabsCtrl.shouldPaginate" ng-click="$mdTabsCtrl.nextPage()"> <md-icon md-svg-src="'+a.mdTabsArrow+'"></md-icon> </md-next-button> <md-tabs-canvas tabindex="{{ $mdTabsCtrl.hasFocus ? -1 : 0 }}" ng-focus="$mdTabsCtrl.redirectFocus()" ng-class="{ \'md-paginated\': $mdTabsCtrl.shouldPaginate, \'md-center-tabs\': $mdTabsCtrl.shouldCenterTabs }" ng-keydown="$mdTabsCtrl.keydown($event)"> <md-pagination-wrapper ng-class="{ \'md-center-tabs\': $mdTabsCtrl.shouldCenterTabs }" md-tab-scroll="$mdTabsCtrl.scroll($event)" role="tablist" aria-label="{{::$mdTabsCtrl.navigationHint}}"><md-tab-item tabindex="{{ tab.isActive() ? 0 : -1 }}" class="md-tab {{::tab.scope.tabClass}}" ng-repeat="tab in $mdTabsCtrl.tabs" role="tab" id="tab-item-{{::tab.id}}" md-tab-id="{{::tab.id}}" aria-selected="{{tab.isActive()}}" aria-disabled="{{tab.scope.disabled || \'false\'}}" ng-click="$mdTabsCtrl.select(tab.getIndex())" ng-focus="$mdTabsCtrl.hasFocus = true" ng-blur="$mdTabsCtrl.hasFocus = false" ng-class="{ \'md-active\': tab.isActive(), \'md-focused\': tab.hasFocus(), \'md-disabled\': tab.scope.disabled }" ng-disabled="tab.scope.disabled" md-swipe-left="$mdTabsCtrl.nextPage()" md-swipe-right="$mdTabsCtrl.previousPage()" md-tabs-template="::tab.label" md-scope="::tab.parent"></md-tab-item> <md-ink-bar></md-ink-bar> </md-pagination-wrapper> <md-tabs-dummy-wrapper aria-hidden="true" class="md-visually-hidden md-dummy-wrapper"> <md-dummy-tab class="md-tab" tabindex="-1" ng-focus="$mdTabsCtrl.hasFocus = true" ng-blur="$mdTabsCtrl.hasFocus = false" ng-repeat="tab in $mdTabsCtrl.tabs" md-tabs-template="::tab.label" md-scope="::tab.parent"></md-dummy-tab> </md-tabs-dummy-wrapper> </md-tabs-canvas> </md-tabs-wrapper> <md-tabs-content-wrapper ng-show="$mdTabsCtrl.hasContent && $mdTabsCtrl.selectedIndex >= 0" class="_md"> <md-tab-content id="{{:: $mdTabsCtrl.tabContentPrefix + tab.id}}" class="_md" role="tabpanel" aria-labelledby="tab-item-{{::tab.id}}" md-swipe-left="$mdTabsCtrl.swipeContent && $mdTabsCtrl.incrementIndex(1)" md-swipe-right="$mdTabsCtrl.swipeContent && $mdTabsCtrl.incrementIndex(-1)" ng-if="tab.hasContent" ng-repeat="(index, tab) in $mdTabsCtrl.tabs" ng-class="{ \'md-no-transition\': $mdTabsCtrl.lastSelectedIndex == null, \'md-active\': tab.isActive(), \'md-left\': tab.isLeft(), \'md-right\': tab.isRight(), \'md-no-scroll\': $mdTabsCtrl.dynamicHeight }"> <div md-tabs-template="::tab.template" md-connected-if="tab.isActive()" md-scope="::tab.parent" ng-if="$mdTabsCtrl.enableDisconnect || tab.shouldRender()"></div> </md-tab-content> </md-tabs-content-wrapper>'},controller:"MdTabsController",controllerAs:"$mdTabsCtrl",bindToController:!0}}function MdTabsDummyWrapper(d,c){return{require:"^?mdTabs",link:function(e,t,a,n){if(n){function s(){n.updatePagination(),n.updateInkBarStyles()}var r,i;if("MutationObserver"in c){(r=new MutationObserver(s)).observe(t[0],{childList:!0,subtree:!0,characterData:!0}),i=r.disconnect.bind(r)}else{var o=d.debounce(s,15,null,!1);t.on("DOMSubtreeModified",o),i=t.off.bind(t,"DOMSubtreeModified",o)}e.$on("$destroy",function(){i()})}}}}function MdTabsTemplate(i,o){return{restrict:"A",link:function(e,t,a,n){if(!n)return;var s=n.enableDisconnect?e.compileScope.$new():e.compileScope;return t.html(e.template),i(t.contents())(s),o.nextTick(function(){e.$watch("connected",function(e){!1===e?n.enableDisconnect&&o.disconnectScope(s):r()}),e.$on("$destroy",r)});function r(){n.enableDisconnect&&o.reconnectScope(s)}},scope:{template:"=mdTabsTemplate",connected:"=?mdConnectedIf",compileScope:"=mdScope"},require:"^?mdTabs"}}goog.provide("ngmaterial.components.tabs"),goog.require("ngmaterial.components.icon"),goog.require("ngmaterial.core"),angular.module("material.components.tabs",["material.core","material.components.icon"]),angular.module("material.components.tabs").service("MdTabsPaginationService",MdTabsPaginationService),angular.module("material.components.tabs").directive("mdTab",MdTab),angular.module("material.components.tabs").directive("mdTabItem",MdTabItem),angular.module("material.components.tabs").directive("mdTabLabel",MdTabLabel),MdTabScroll.$inject=["$parse"],angular.module("material.components.tabs").directive("mdTabScroll",MdTabScroll),MdTabsController.$inject=["$scope","$element","$window","$mdConstant","$mdTabInkRipple","$mdUtil","$animateCss","$attrs","$compile","$mdTheming","$mdInteraction","$timeout","MdTabsPaginationService"],angular.module("material.components.tabs").controller("MdTabsController",MdTabsController),MdTabs.$inject=["$$mdSvgRegistry"],angular.module("material.components.tabs").directive("mdTabs",MdTabs),MdTabsDummyWrapper.$inject=["$mdUtil","$window"],angular.module("material.components.tabs").directive("mdTabsDummyWrapper",MdTabsDummyWrapper),MdTabsTemplate.$inject=["$compile","$mdUtil"],angular.module("material.components.tabs").directive("mdTabsTemplate",MdTabsTemplate),ngmaterial.components.tabs=angular.module("material.components.tabs"); |