UNPKG

mcs-ng-material

Version:

MCS NG-Meterial is based on mcs-web.

7 lines 17.4 kB
/*! * AngularJS Material Design * https://github.com/angular/material * @license MIT * v1.1.5-master-515959d */ function MdTabsPaginationService(){function e(e,t){var a,s,r=e.canvas,i=n(e);for(a=0;a<i.length;a++)if(i[a]>=t){s=i[a];break}return Math.max(0,s-r.clientWidth)}function t(e,t){var s,r,i=e.canvas,o=a(e)-i.clientWidth,d=n(e);for(s=0;s<d.length,d[s]<=t+i.clientWidth;s++)r=d[s];return Math.min(o,r)}function n(e){var t,n,a=0,s=[];for(t=0;t<e.tabs.length;t++)n=e.tabs[t],s.push(a),a+=n.offsetWidth;return s}function a(e){var t,n,a=0;for(t=0;t<e.tabs.length;t++)n=e.tabs[t],a+=n.offsetWidth;return a}return{decreasePageOffset:e,increasePageOffset:t,getTabOffsets:n,getTotalTabsWidth:a}}function MdTab(){function e(e,n,a,s){if(s){var r=s.getTabElementIndex(n),i=t(n,"md-tab-body").remove(),o=t(n,"md-tab-label").remove(),d=s.insertTab({scope:e,parent:e.$parent,index:r,element:n,template:i.html(),label:o.html()},r);e.select=e.select||angular.noop,e.deselect=e.deselect||angular.noop,e.$watch("active",function(e){e&&s.select(d.getIndex(),!0)}),e.$watch("disabled",function(){s.refreshIndex()}),e.$watch(function(){return s.getTabElementIndex(n)},function(e){d.index=e,s.updateTabOrder()}),e.$on("$destroy",function(){s.removeTab(d)})}}function t(e,t){for(var n=e[0].children,a=0,s=n.length;a<s;a++){var r=n[a];if(r.tagName===t.toUpperCase())return angular.element(r)}return angular.element()}return{require:"^?mdTabs",terminal:!0,compile:function(n,a){var s=t(n,"md-tab-label"),r=t(n,"md-tab-body");if(0===s.length&&(s=angular.element("<md-tab-label></md-tab-label>"),a.label?s.text(a.label):s.append(n.contents()),0===r.length)){var i=n.contents().detach();r=angular.element("<md-tab-body></md-tab-body>"),r.append(i)}return n.append(s),r.html()&&n.append(r),e},scope:{active:"=?mdActive",disabled:"=?ngDisabled",select:"&?mdOnSelect",deselect:"&?mdOnDeselect"}}}function MdTabItem(){return{require:"^?mdTabs",link:function(e,t,n,a){a&&a.attachRipple(e,t)}}}function MdTabLabel(){return{terminal:!0}}function MdTabScroll(e){return{restrict:"A",compile:function(t,n){var a=e(n.mdTabScroll,null,!0);return function(e,t){t.on("mousewheel",function(t){e.$apply(function(){a(e,{$event:t})})})}}}}function MdTabsController(e,t,n,a,s,r,i,o,d,c,l,u){function b(){h("stretchTabs",v),G("focusIndex",k,be.selectedIndex||0),G("offsetLeft",w,0),G("hasContent",y,!1),G("maxTabWidth",I,V()),G("shouldPaginate",C,!1),T("noInkBar",B),T("dynamicHeight",F),T("noPagination"),T("swipeContent"),T("noDisconnect"),T("autoselect"),T("noSelectClick"),T("centerTabs",$,!1),T("enableDisconnect"),be.scope=e,be.parent=e.$parent,be.tabs=[],be.lastSelectedIndex=null,be.hasFocus=!1,be.styleTabItemFocus=!1,be.shouldCenterTabs=K(),be.tabContentPrefix="tab-content-",m()}function m(){be.selectedIndex=be.selectedIndex||0,f(),g(),p(),c(t),r.nextTick(function(){fe=_(),re(),te(),ie(),be.tabs[be.selectedIndex]&&be.tabs[be.selectedIndex].scope.select(),he=!0,J()})}function f(){var e=o.$mdTabsTemplate,n=angular.element(t[0].querySelector("md-tab-data"));n.html(e),d(n.contents())(be.parent),delete o.$mdTabsTemplate}function p(){angular.element(n).on("resize",E),e.$on("$destroy",x)}function g(){e.$watch("$mdTabsCtrl.selectedIndex",M)}function h(e,t){var n=o.$normalize("md-"+e);t&&G(e,t),o.$observe(n,function(t){be[e]=t})}function T(e,t){function n(t){be[e]="false"!==t}var a=o.$normalize("md-"+e);t&&G(e,t),o.hasOwnProperty(a)&&n(o[a]),o.$observe(a,n)}function x(){ge=!0,angular.element(n).off("resize",E)}function v(e){var t=_();angular.element(t.wrapper).toggleClass("md-stretch-tabs",z()),ie()}function $(e){be.shouldCenterTabs=K()}function I(e,t){if(e!==t){var n=_();angular.forEach(n.tabs,function(t){t.style.maxWidth=e+"px"}),angular.forEach(n.dummies,function(t){t.style.maxWidth=e+"px"}),r.nextTick(be.updateInkBarStyles)}}function C(e,t){e!==t&&(be.maxTabWidth=V(),be.shouldCenterTabs=K(),r.nextTick(function(){be.maxTabWidth=V(),te(be.selectedIndex)}))}function y(e){t[e?"removeClass":"addClass"]("md-no-tab-content")}function w(t){var n=_(),s=(be.shouldCenterTabs||ue()?"":"-")+t+"px";s=s.replace("--",""),angular.element(n.paging).css(a.CSS.TRANSFORM,"translate3d("+s+", 0, 0)"),e.$broadcast("$mdTabsPaginationChanged")}function k(e,t){e!==t&&_().tabs[e]&&(te(),ee())}function M(t,n){t!==n&&(be.selectedIndex=Y(t),be.lastSelectedIndex=n,be.updateInkBarStyles(),re(),te(t),e.$broadcast("$mdTabsChanged"),be.tabs[n]&&be.tabs[n].scope.deselect(),be.tabs[t]&&be.tabs[t].scope.select())}function S(e){var n=t[0].getElementsByTagName("md-tab");return Array.prototype.indexOf.call(n,e[0])}function P(){P.watcher||(P.watcher=e.$watch(function(){r.nextTick(function(){P.watcher&&t.prop("offsetParent")&&(P.watcher(),P.watcher=null,E())},!1)}))}function L(e){switch(e.keyCode){case a.KEY_CODE.LEFT_ARROW:e.preventDefault(),Z(-1,!0);break;case a.KEY_CODE.RIGHT_ARROW:e.preventDefault(),Z(1,!0);break;case a.KEY_CODE.SPACE:case a.KEY_CODE.ENTER:e.preventDefault(),me||W(be.focusIndex);break;case a.KEY_CODE.TAB:be.focusIndex!==be.selectedIndex&&(be.focusIndex=be.selectedIndex)}}function W(e,t){me||(be.focusIndex=be.selectedIndex=e),t&&be.noSelectClick||r.nextTick(function(){be.tabs[e].element.triggerHandler("click")},!1)}function O(e){be.shouldPaginate&&(e.preventDefault(),be.offsetLeft=de(be.offsetLeft-e.wheelDelta))}function D(){if(be.canPageForward()){var e=u.increasePageOffset(_(),be.offsetLeft);be.offsetLeft=de(e)}}function A(){if(be.canPageBack()){var e=u.decreasePageOffset(_(),be.offsetLeft);be.offsetLeft=de(e)}}function E(){be.lastSelectedIndex=be.selectedIndex,be.offsetLeft=de(be.offsetLeft),r.nextTick(function(){be.updateInkBarStyles(),J()})}function B(e){angular.element(_().inkBar).toggleClass("ng-hide",e)}function F(e){t.toggleClass("md-dynamic-height",e)}function q(e){if(!ge){var t=be.selectedIndex,n=be.tabs.splice(e.getIndex(),1)[0];se(),be.selectedIndex===t&&(n.scope.deselect(),be.tabs[be.selectedIndex]&&be.tabs[be.selectedIndex].scope.select()),r.nextTick(function(){J(),be.offsetLeft=de(be.offsetLeft)})}}function R(e,t){var n=he,a={getIndex:function(){return be.tabs.indexOf(s)},isActive:function(){return this.getIndex()===be.selectedIndex},isLeft:function(){return this.getIndex()<be.selectedIndex},isRight:function(){return this.getIndex()>be.selectedIndex},shouldRender:function(){return!be.noDisconnect||this.isActive()},hasFocus:function(){return be.styleTabItemFocus&&be.hasFocus&&this.getIndex()===be.focusIndex},id:r.nextUid(),hasContent:!(!e.template||!e.template.trim())},s=angular.extend(a,e);return angular.isDefined(t)?be.tabs.splice(t,0,s):be.tabs.push(s),ne(),ae(),r.nextTick(function(){J(),le(s),n&&be.autoselect&&r.nextTick(function(){r.nextTick(function(){W(be.tabs.indexOf(s))})})}),s}function _(){var e={},n=t[0];return e.wrapper=n.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=n.querySelector("md-next-button"),e.prevButton=n.querySelector("md-prev-button"),e.contents=n.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 H(){return be.offsetLeft>0}function j(){var e=_(),t=e.tabs[e.tabs.length-1];return ue()?be.offsetLeft<e.paging.offsetWidth-e.canvas.offsetWidth:t&&t.offsetLeft+t.offsetWidth>e.canvas.clientWidth+be.offsetLeft}function N(){var e=be.tabs[be.focusIndex];return e&&e.id?"tab-item-"+e.id:null}function z(){switch(be.stretchTabs){case"always":return!0;case"never":return!1;default:return!be.shouldPaginate&&n.matchMedia("(max-width: 600px)").matches}}function K(){return be.centerTabs&&!be.shouldPaginate}function U(){if(be.noPagination||!he)return!1;var e=t.prop("clientWidth");return angular.forEach(_().tabs,function(t){e-=t.offsetWidth}),e<0}function Y(e){if(e===-1)return-1;var t,n,a=Math.max(be.tabs.length-e,e);for(t=0;t<=a;t++){if(n=be.tabs[e+t],n&&n.scope.disabled!==!0)return n.getIndex();if(n=be.tabs[e-t],n&&n.scope.disabled!==!0)return n.getIndex()}return e}function G(e,t,n){Object.defineProperty(be,e,{get:function(){return n},set:function(e){var a=n;n=e,t&&t(e,a)}})}function J(){be.maxTabWidth=V(),be.shouldPaginate=U()}function Q(e){var t=0;return angular.forEach(e,function(e){t+=Math.max(e.offsetWidth,e.getBoundingClientRect().width)}),Math.ceil(t)}function V(){var e=_(),t=e.canvas.clientWidth,n=264;return Math.max(0,Math.min(t-1,n))}function X(){var e=be.tabs[be.selectedIndex],t=be.tabs[be.focusIndex];be.tabs=be.tabs.sort(function(e,t){return e.index-t.index}),be.selectedIndex=be.tabs.indexOf(e),be.focusIndex=be.tabs.indexOf(t)}function Z(e,t){var n,a=t?"focusIndex":"selectedIndex",s=be[a];for(n=s+e;be.tabs[n]&&be.tabs[n].scope.disabled;n+=e);n=(s+e+be.tabs.length)%be.tabs.length,be.tabs[n]&&(be[a]=n)}function ee(){be.styleTabItemFocus="keyboard"===l.getLastInteractionType(),_().tabs[be.focusIndex].focus()}function te(e){var t=_();if(angular.isNumber(e)||(e=be.focusIndex),t.tabs[e]&&!be.shouldCenterTabs){var n=t.tabs[e],a=n.offsetLeft,s=n.offsetWidth+a,r=32;if(0==e)return void(be.offsetLeft=0);if(ue()){var i=Q(Array.prototype.slice.call(t.tabs,0,e)),o=Q(Array.prototype.slice.call(t.tabs,0,e+1));be.offsetLeft=Math.min(be.offsetLeft,de(i)),be.offsetLeft=Math.max(be.offsetLeft,de(o-t.canvas.clientWidth))}else be.offsetLeft=Math.max(be.offsetLeft,de(s-t.canvas.clientWidth+r)),be.offsetLeft=Math.min(be.offsetLeft,de(a))}}function ne(){pe.forEach(function(e){r.nextTick(e)}),pe=[]}function ae(){for(var e=!1,t=0;t<be.tabs.length;t++)if(be.tabs[t].hasContent){e=!0;break}be.hasContent=e}function se(){be.selectedIndex=Y(be.selectedIndex),be.focusIndex=Y(be.focusIndex)}function re(){if(!be.dynamicHeight)return t.css("height","");if(!be.tabs.length)return pe.push(re);var e=_(),n=e.contents[be.selectedIndex],a=n?n.offsetHeight:0,s=e.wrapper.offsetHeight,o=a+s,d=t.prop("clientHeight");if(d!==o){"bottom"===t.attr("md-align-tabs")&&(d-=s,o-=s,void 0!==t.attr("md-border-bottom")&&++d),me=!0;var c={height:d+"px"},l={height:o+"px"};t.css(c),i(t,{from:c,to:l,easing:"cubic-bezier(0.35, 0, 0.25, 1)",duration:.5}).start().done(function(){t.css({transition:"none",height:""}),r.nextTick(function(){t.css("transition","")}),me=!1})}}function ie(){var e=_();if(!e.tabs[be.selectedIndex])return void angular.element(e.inkBar).css({left:"auto",right:"auto"});if(!be.tabs.length)return pe.push(be.updateInkBarStyles);if(!t.prop("offsetParent"))return P();var n=be.selectedIndex,a=e.paging.offsetWidth,s=e.tabs[n],i=s.offsetLeft,o=a-i-s.offsetWidth;if(be.shouldCenterTabs){var d=Q(e.tabs);a>d&&r.nextTick(ie,!1)}oe(),angular.element(e.inkBar).css({left:i+"px",right:o+"px"})}function oe(){var e=_(),t=be.selectedIndex,n=be.lastSelectedIndex,a=angular.element(e.inkBar);angular.isNumber(n)&&a.toggleClass("md-left",t<n).toggleClass("md-right",t>n)}function de(e){var t=_();if(!t.tabs.length||!be.shouldPaginate)return 0;var n=t.tabs[t.tabs.length-1],a=n.offsetLeft+n.offsetWidth;return ue()?(e=Math.min(t.paging.offsetWidth-t.canvas.clientWidth,e),e=Math.max(0,e)):(e=Math.max(0,e),e=Math.min(a-t.canvas.clientWidth,e)),e}function ce(e,t){var n=_(),a={colorElement:angular.element(n.inkBar)};s.attach(e,t,a)}function le(e){if(e.hasContent){var n=t[0].querySelectorAll('[md-tab-id="'+e.id+'"]');angular.element(n).attr("aria-controls",be.tabContentPrefix+e.id)}}function ue(){return"rtl"==r.bidi()}var be=this,me=!1,fe=_(),pe=[],ge=!1,he=!1;be.$onInit=b,be.updatePagination=r.debounce(J,100),be.redirectFocus=ee,be.attachRipple=ce,be.insertTab=R,be.removeTab=q,be.select=W,be.scroll=O,be.nextPage=D,be.previousPage=A,be.keydown=L,be.canPageForward=j,be.canPageBack=H,be.refreshIndex=se,be.incrementIndex=Z,be.getTabElementIndex=S,be.updateInkBarStyles=r.debounce(ie,100),be.updateTabOrder=r.debounce(X,100),be.getFocusedTabId=N,1===angular.version.major&&angular.version.minor<=4&&this.$onInit()}function MdTabs(e){return{scope:{selectedIndex:"=?mdSelected"},template:function(t,n){return n.$mdTabsTemplate=t.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="'+e.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="'+e.mdTabsArrow+'"></md-icon> </md-next-button> <md-tabs-canvas 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"> <md-tab-item tabindex="{{ tab.isActive() ? 0 : -1 }}" class="md-tab" 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-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(e,t){return{require:"^?mdTabs",link:function(n,a,s,r){if(r){var i,o,d=function(){r.updatePagination(),r.updateInkBarStyles()};if("MutationObserver"in t){var c={childList:!0,subtree:!0,characterData:!0};i=new MutationObserver(d),i.observe(a[0],c),o=i.disconnect.bind(i)}else{var l=e.debounce(d,15,null,!1);a.on("DOMSubtreeModified",l),o=a.off.bind(a,"DOMSubtreeModified",l)}n.$on("$destroy",function(){o()})}}}}function MdTabsTemplate(e,t){function n(n,a,s,r){function i(){n.$watch("connected",function(e){e===!1?o():d()}),n.$on("$destroy",d)}function o(){r.enableDisconnect&&t.disconnectScope(c)}function d(){r.enableDisconnect&&t.reconnectScope(c)}if(r){var c=r.enableDisconnect?n.compileScope.$new():n.compileScope;return a.html(n.template),e(a.contents())(c),t.nextTick(i)}}return{restrict:"A",link:n,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","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");