angular-material-sidenav
Version:
Component that build the same sidenav from official angular material website
1 lines • 6.89 kB
JavaScript
!function(a,b,c){"use strict";b.module("sasrio.angular-material-sidenav",[]).provider("ssSideNavSections",function(){var a,b,c=[];this.initWithSections=function(a){c=a?a:[]},this.initWithTheme=function(c){a=c.theme(),b=c._PALETTES},this.$get=[function(){var d=function(){this.sections=c,this.theme=a,this.palettes=b};return new d}]}).factory("ssSideNavSharedService",["$rootScope",function(a){var b={};return b.broadcast=function(b,c){a.$broadcast(b,c)},b.emit=function(b,c){a.$emit(b,c)},b}]).factory("ssSideNav",["$rootScope","$location","$state","$stateParams","ssSideNavSections","ssSideNavSharedService",function(a,b,c,d,e,f){var g,h=e.sections,i=function(a,b,c){var d=c?c.toState:null;if(!d)return console.warn("ss-sidenav: `toState` key not found");if(d.name===b.state){if(!g)return void console.warn("ss-sidenav: strange `self` is undef");g.selectSection(a),g.selectPage(a,b)}},j=function(a,b,c){var d={toState:b,toParams:c};h.forEach(function(a){a.children?a.children.forEach(function(a){a.pages?a.pages.forEach(function(b){i(a,b,d)}):"link"===a.type&&i(a,a,d)}):a.pages?a.pages.forEach(function(b){i(a,b,d)}):"link"===a.type&&i(a,a,d)})};return g={sections:h,forceSelectionWithId:function(a){f.broadcast("SS_SIDENAV_FORCE_SELECTED_ITEM",a)},selectSection:function(a){g.openedSection=a},toggleSelectSection:function(a){g.openedSection=g.openedSection===a?null:a},isSectionSelected:function(a){return g.openedSection===a},selectPage:function(a,b){g.currentSection=a,g.currentPage=b},isPageSelected:function(a){return g.currentPage?g.currentPage.state===a:!1},setVisible:function(a,b){return Array.prototype.every?void g.sections.every(function(c){return c.id===a?(c.hidden=!b,!1):(c.children&&c.children.every(function(c){return c.id===a?(c.hidden=!b,!1):(c.pages&&c.pages.every(function(c){return c.id===a?(c.hidden=!b,!1):!0}),!0)}),!0)}):console.error("every funct not implemented")},setVisibleFor:function(a){return Array.prototype.every?void a.forEach(function(a){g.setVisible(a.id,a.value)}):console.error("every funct not implemented")}},a.$on("$stateChangeStart",j),j(null,c.current,d),g}]).controller("menuToggleCtrl",["$scope","$state","ssSideNav",function(a,b,c){a.isOpen=function(a){return c.isSectionSelected(a)},a.toggle=function(a){c.toggleSelectSection(a)},this.isOpen=a.isOpen,a.$on("SS_SIDENAV_FORCE_SELECTED_ITEM",function(c,d){if(a.section&&a.section.pages)for(var e=a.section.pages.length-1;e>=0;e--){var f=a.section.pages[e];d===f.id&&(a.toggle(a.section),b.go(f.state))}})}]).controller("menuLinkCtrl",["$scope","$state","$mdSidenav","ssSideNav","ssSideNavSharedService",function(a,b,c,d,e){a.isSelected=function(a){return d.isPageSelected(a)},a.focusSection=function(a){c("left").close(),e.broadcast("SS_SIDENAV_CLICK_ITEM",a)},a.$state=b}]).directive("menuLink",[function(){return{scope:{section:"="},templateUrl:"views/ss/menu-link.tmpl.html",controller:"menuLinkCtrl"}}]).directive("menuToggle",["$timeout","$animateCss","$mdSidenav","$mdMedia",function(a,b,c,d){var e=function(e,f,g,h){var i=f.find("ul"),j=function(){var a;return i.addClass("no-transition"),i.css("height",""),a=i.prop("clientHeight"),i.css("height",0),i.removeClass("no-transition"),a};return i?void e.$watch(function(){return h.isOpen(e.section)},function(e){a(function(){(d("gt-sm")||c("left").isOpen()||!e)&&b(i,{from:{height:e?0:j()+"px"},to:{height:e?j()+"px":0},duration:.3}).start()},0,!1)}):console.warn("ss-sidenav: `menuToggle` cannot find ul element")};return{scope:{section:"="},templateUrl:"views/ss/menu-toggle.tmpl.html",controller:"menuToggleCtrl",link:e}}]).directive("ssSidenav",[function(){return{restrict:"E",replace:!0,scope:{menu:"="},templateUrl:"views/ss/menu-sidenav.tmpl.html"}}]).directive("ssStyleColor",["ssSideNavSections",function(a){return{restrict:"A",scope:{ssStyleColor:"="},link:function(b,c){var d=function(){for(var d in b.ssStyleColor)if(b.ssStyleColor.hasOwnProperty(d)){var e,f,g,h,i,j=a.theme.colors,k=(b.ssStyleColor[d]||"").split(".");k.length<2&&k.unshift("primary"),e=k[1]||"hue-1",f=k[0]||"primary",g=j[f]?j[f].name:f,h=j[f]?j[f].hues[e]||e:e,i=a.palettes[g][h]?a.palettes[g][h].value:a.palettes[g][500].value,c.css(d,"rgb("+i.join(",")+")"),c.parent().attr("md-component-id")&&c.parent().css(d,"rgb("+i.join(",")+")")}};return a.theme&&a.palettes?(b.$watch("ssStyleColor",function(a,b){a&&b&&a!==b&&d()}),void d()):console.warn("ss-sidenav: you probably want to ssSideNavSectionsProvider.initWithTheme($mdThemingProvider)")}}}]).run(["$templateCache",function(a){a.put("views/ss/menu-link.tmpl.html",'<md-button\n ss-style-color="{\'background-color\': (isSelected(section.state) || $state.includes(section.state)) ? \'primary.800\': \'primary.default\'}" class="md-raised md-primary" ui-sref="{{section.state}}"\n ng-click="focusSection(section)">\n <span ng-if="section.icon" class="{{section.icon}}"> </span>{{section.name}}\n <span class="md-visually-hidden"\n ng-if="isSelected(section.state)">\n current page\n </span>\n</md-button>\n'),a.put("views/ss/menu-toggle.tmpl.html",'<md-button class="md-raised md-primary md-button-toggle"\n ng-click="toggle(section)"\n aria-controls="docs-menu-{{section.name}}"\n aria-expanded="{{isOpen(section)}}">\n <div flex layout="row">\n <span ng-if="section.icon" class="{{section.icon}}"> </span>{{section.name}}\n <span flex></span>\n <span aria-hidden="true" class="md-toggle-icon"\n ng-class="{\'toggled\' : isOpen(section)}">\n <md-icon md-svg-src="md-toggle-arrow"></md-icon>\n </span>\n </div>\n <span class="md-visually-hidden">\n Toggle {{isOpen(section)? \'expanded\' : \'collapsed\'}}\n </span>\n</md-button>\n\n<ul id="docs-menu-{{section.name}}" class="menu-toggle-list">\n <li ng-repeat="page in section.pages" ng-if="!page.hidden">\n <menu-link section="page"></menu-link>\n </li>\n</ul>\n'),a.put("views/ss/menu-sidenav.tmpl.html",'<ul class="menu"> <li ss-style-color="{\'border-bottom-color\': \'primary.600\'}" ng-repeat="section in menu.sections" ng-if="!section.hidden"> <h2 ss-style-color="{\'color\': \'primary.A100\'}" class="menu-heading md-subhead" ng-if="section.type === \'heading\'"> <span ng-if="section.icon" class="{{section.icon}}"> </span>{{section.name}}\n </h2> <menu-link section="section" ng-if="section.type === \'link\'"></menu-link> <menu-toggle section="section" ng-if="section.type === \'toggle\'"></menu-toggle> <ul ng-if="section.children"> <li ng-repeat="child in section.children" ng-if="!child.hidden"> <menu-link section="child" ng-if="child.type === \'link\'"></menu-link> <menu-toggle section="child" ng-if="child.type === \'toggle\'"></menu-toggle> </li> </ul> </li></ul>')}])}(window,window.angular);