Adaptive multi-level menu of the site with self-registered items based on the AngularJS directive

1. AngularJS is a superheroic Google framework that implements the MVVM application architecture design pattern.
2. UI-router is an Angulyarovsky module, without which designing state- based applications is unthinkable.
3. Angular-permission is the Angulyarovsky module (only works in conjunction with ui-router), which simplifies access control and authorization on the client side.
4. Bootstrap 3 is a CSS framework that speeds up the layout of responsive pages.
5. Yeoman- generator is a console utility for automatic construction of the project structure.
6. Bower is a package manager that simplifies the installation and update of project dependencies.
7. Gulp - the stream collector of projects on JS.
8. NodeJS is a server-side development environment.

1. The latest version of the UI-router falls out with an error if there are fields in the params object with values ​​that equate to logical negation (false, 0, undefined, null, or an empty string). I did not find a solution to the problem, so I rolled back to the latest workable version “0.2.13”.
2. Yeoman generator offers a fairly convenient structure of the future application. In the root directory, in addition to the service directory, a src directory with the project itself is created. It contains the main html page and three directories:
   
   app - directory with application states (it is recommended to allocate a folder for each state).
   assets - a folder with static content.
   components - a folder for application elements that can be used many times (in our case, these are directives, services, factories, providers, etc.).
   In accordance with this structure, the Yeoman generator sets up gulp for monitoring changes and connecting files to the running application (everything is done automatically, no need to connect the dependencies to the html page manually).
   In the latest version of the generator, the components folder was moved to the app directory and, accordingly, the gulp settings were changed. In order for our project to see the components folder and not give an error on the absence of the navbar module in the developer’s console, edit the following files in the gulp folder:
   
   • inject.js script
     
     we add an element to the injectScripts array
     

     options.src + '/components/**/*.js' 

     
     add an element to the injectStyles array
     

      options.src + '/components/**/*.css' 

     
     
   • script watch.js - add the following rules:
     
     

      gulp.watch(options.src + '/components/**/*.css', function(event) { if(isOnlyChange(event)) { browserSync.reload(event.path); } else { gulp.start('inject'); } }); gulp.watch(options.src + '/components/**/*.js', function(event) { if(isOnlyChange(event)) { gulp.start('scripts'); } else { gulp.start('inject'); } }); gulp.watch(options.src + '/components/**/*.html', function(event) { browserSync.reload(event.path); }); 

     
     
   
   
3. Since the directive is written in the bootstrap, then, naturally, it requires its components, in particular, the jQuery library. When creating the project, Yeoman will ask about the need to connect jquery, bootstrap and how to work with it (Angulyar ui-bootstrap or AngularStrap directives, the official use of bootstrap with jQuery or pure CSS). There is a small catch. When installing, even before selecting the above options, you will be prompted to add to the jQuery project. Be sure to select this option, otherwise we will remain without important dependencies and everything will break.
   PS : actually fix the moment is not difficult. Just need to podshamanit the directive code itself and you can do without jQuery at all, but, as they say, “it works - do not touch (c)”.
   
   
4. If there is a desire to indulge in the project with Google's angular-material , which Yeoman proposes to include in the project, you need to know that in this case the old version of the library will be connected, for which the documentation from the official site is not suitable. Therefore, the correct option would be to connect the library using bower with the --save option.

 <div class="container" ng-mouseleave="closeMenu($event)"> <div class="navbar-header"> <button type="button" class="navbar-toggle" ng-click="collapseMenu($event)"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="link-kukuri" href="#" ui-sref="{{::sref}}" data-letters="{{::name}}">{{::name}}</a> </div> <div id="navbar" class="collapse navbar-collapse" aria-expanded="false" ng-class="navCollapsed"> <ul class="nav navbar-nav navbar-right"> <li ng-repeat="items in navbar" class="{{::menuClass(items.name, 'firstLevel')}} list-status"> <a href="#" ng-if="!items.name.pop" ui-sref="{{items.state}}" ng-mouseenter="closeOnMoveMenu()">{{items.name}}</a> <a href="#" ng-if="items.name.pop" class="dropdown-toggle dropdown-toggle-firstLevel" dropdown-toggle aria-expanded="false" ng-click="expandMenu($event)" ng-mouseenter="expandMenu($event)" ng-mouseleave="closeSubMenu($event)"> {{::items.name[0]}}<b class="caret"></b> </a> <ul ng-if="items.name.pop" class="dropdown-menu" ng-include="'submenu.template'"></ul> </li> </ul> </div> </div> <script type="text/ng-template" id="submenu.template"> <li ng-repeat="items in items.name" ng-if="$index !== 0" class="{{::menuClass(items.name)}} sub-menu"> <a href="#" class="sub-link" ng-if="!items.name.pop" ui-sref="{{::items.state}}" ng-mouseenter="closeOnMoveSubMenu($event)"> {{::items.name}}</a> <a href="#" ng-if="items.name.pop" class="dropdown-toggle" data-toggle="dropdown" ng-click="expandSubMenu($event)" ng-mouseenter="expandSubMenu($event)"> {{::items.name[0]}} </a> <ul ng-if="items.name.pop" class="dropdown-menu" ng-include="'submenu.template'"> </ul> </li> </script> 

1. The list of menu items is generated using the ng-repeat directive, which clones the prepared html template, substituting data from the menu item array, which is defined in the current directive's scopes, into it. I note that the template uses the so-called one-time assignment ( one time binding ), the syntax of which is two points near the variable (for example {{:: name}} ). The fact is that for each variable an angular creates a separate listener (watcher), which checks its change with each digest (checking for changes of all variables in the current scopa as long as their values ​​change, at the end DOM is drawn with new values) . Since our menu items are constant, it makes sense to draw them once, reducing the number of listeners and increasing productivity.
   
   
2. Nested subclauses are collected recursively using ng-include . The recursive part of the template is stored in the script tag with the type = "text / ng-template" attribute. The browser does not know this type of script and does not handle this part of the DOM, but the ng-include directive inserts only the contents of the script in the right place, which allows the browser to handle the DOM element normally.
   The nesting itself is controlled by the ng-if directive, which checks whether the current element is an array of items or a string with the name of the item. The check is carried out using the so-called “ duck typing ”, if we have an array before us, then it has array methods (push, pop, etc.), the access to which without () will return a function that equates to a logical true. If we have a string before us, such a call to the array method will return undefined.
   
   
3. There is an unspoken rule for working with angular directives, which says: "The directive should not change the elements of a DOM tree outside its element." The work of the drop-down menu items requires listeners who will track the events of a click, a hover and an cursor leave the item. It would be possible to use the usual search for elements by the selectors of the DOM elements of the tree and hang listeners on them. But in a large project, there is a possibility that someone else will use identical selector names. The consequences of such an event are unpredictable :) For such cases, the directives ng-click, ng-mouseenter and ng-mouseleave are provided , which were hung on the corresponding elements.

 'use strict'; (function () { angular.module('navbar') .directive('navbar', function ($document, $state, navbarList, navPermission) { return { restrict: 'A', scope: { name: '@', sref: '@' }, templateUrl: '/components/navbar.directive/navbar.template.html', link: function (scope, elem) { var openedMenu = null, openedSubMenu = null, username = navPermission.getUser($state.params); //   DOM        bootstrap elem.addClass('navbar navbar-inverse navbar-fixed-top'); elem.attr('role', 'navigation'); //             scope  if(username) { navPermission.acceptPermission(navbarList.list, username); } scope.navbar = navbarList.list; // /         scope.collapseMenu = function ($event) { var navbar = elem.find('#navbar'), expanded = navbar.hasClass('in'); navbar.attr('aria-expanded', !expanded); scope.navCollapsed = (expanded) ? '' : 'in'; closeAllMenu(); stopBubleAndPropagation($event); }; //          ,     scope.menuClass = function (item, level) { var status = false, activePage = getActivePage($state.current.name), currentPage = (item.pop) ? item[0] : item, classList = (level === 'firstLevel') ? 'dropdown dropdown-firstLevel ' : 'menu-item dropdown dropdown-submenu ', activeClass = (currentPage === activePage || isActive(item, activePage, status) ) ? 'menu-active' : ''; if(item.pop) { return classList + activeClass; } else { return activeClass; } }; //           () function getActivePage(state, currentList) { var name; if(!currentList) { currentList = scope.navbar; } for(var i = (currentList[0].name) ? 0 : 1; i < currentList.length; i++) { if(currentList[i].state === state) { return currentList[i].name; } else if(currentList[i].name.pop) { name = getActivePage(state, currentList[i].name); } } return name; } // ,      function isActive (item, activePage, status) { if(item.pop) { for(var i = 1; i < item.length; i++) { if(item[i].name.pop) { status = isActive(item[i].name, activePage, status); } else if(item[i].name === activePage) { return true; } } } else if(item === activePage) { return true; } return status; } //          ( , ..     ) scope.expandMenu = function ($event) { var clickedElem = $($event.currentTarget), parentClicked = $($event.currentTarget.parentElement), expanded = clickedElem.attr('aria-expanded'), isOpened = parentClicked.hasClass('open'), attrExpanded = (expanded === 'false'), allOpenedMenu = parentClicked.parent().find('.open'), smallWindow = window.innerWidth < 768, eventMouseEnter = $event.type === 'mouseenter', subMenuAll = elem.find('.dropdown-submenu'); if(!smallWindow || !eventMouseEnter) { allOpenedMenu.removeClass('open'); clickedElem.attr('aria-expanded', attrExpanded); if(isOpened && !eventMouseEnter) { parentClicked.removeClass('open'); } else { parentClicked.addClass('open'); openedMenu = clickedElem; //** } } subMenuAll.removeClass('dropdown-submenu-small dropdown-submenu-big'); if(smallWindow) { subMenuAll.addClass('dropdown-submenu-small'); } else { subMenuAll.addClass('dropdown-submenu-big'); } stopBubleAndPropagation($event); }; //           scope.closeOnMoveMenu = function () { var smallWindow = window.innerWidth < 768; if(openedMenu && !smallWindow) { var clickedLink = openedMenu, clickedElement = clickedLink.parent(); clickedElement.removeClass('open'); clickedLink.attr('aria-expanded', false); openedMenu = null; } }; //     (   92 ) scope.expandSubMenu = function ($event) { var elemClicked = $($event.currentTarget.parentElement), smallWindow = window.innerWidth < 768, eMouseEnter = $event.type === 'mouseenter', sameElement = elemClicked.hasClass('open'); if(!smallWindow || !eMouseEnter) { //     if(!sameElement && !eMouseEnter || !eMouseEnter || !sameElement) { elemClicked.parent().find('.open').removeClass('open'); } if(!sameElement) { elemClicked.addClass('open'); openedSubMenu = elemClicked; } } stopBubleAndPropagation($event); }; //          (  :)) scope.closeOnMoveSubMenu = function ($event) { var smallWindow = window.innerWidth < 768; if(openedSubMenu && !smallWindow) { var clickedElement = openedSubMenu, savedList = clickedElement.parent(), currentList = $($event.target).parent().parent(); if(savedList[0] === currentList[0]) { clickedElement.removeClass('open'); openedSubMenu = null; } } }; scope.closeMenu = closeMenu; //         var $body = $document.find('html'); elem.bind('$destroy', function() { $body.unbind(); //      }); //     -     $body.bind('click', closeMenu); function closeMenu ($event) { var elemClicked = $event.relatedTarget || $event.target; if(isClickOutNavbar(elemClicked)) { closeAllMenu(); } } //     ,  ,       function isClickOutNavbar(elem) { if($(elem).hasClass('dropdown-firstLevel')) { return false; } if(elem.parentElement !== null) { return isClickOutNavbar(elem.parentElement); } else { return true; } } //        function closeAllMenu() { elem.find('.open').removeClass('open'); elem.find('[aria-expanded=true]').attr('aria-expanded', false); } //          function stopBubleAndPropagation($event) { $event.stopPropagation(); $event.preventDefault(); } } }; }); })(); 

 'use strict'; (function () { angular.module('navbar') .provider('navbarList', function () { var list = []; //       this.add = function (obj) { //        if(obj.location) { if(obj.location.place.length !== obj.location.priority.length || !obj.location.place.pop || !obj.location.priority.pop) { console.log('Warning! Bad location params for menu "' + obj.name + '". Skip item'); return; } } //          if(!obj.location) { var name = obj.name; for(var i = 0; i < list.length; i++) { //        var currentName = (list[i].name.pop) ? list[i].name[0] : list[i].name; if(currentName === name) { console.log('Warning! Duplicate menu "' + name + '". Skip item'); return; } } list.push(obj); list.sort(sortByPriority); return; } //  ,        var place = obj.location.place.shift(), priority = obj.location.priority.shift(); for(i = 0; i < list.length; i++) { //   ,  i    JS var currentSubName = (list[i].name.pop) ? list[i].name[0] : null; if(place === currentSubName) { list[i].name = changeExistPart(obj, list[i].name); if(priority !== list[i].priority) { console.log('Warning! Priority of menu "' + list[i].name + '" has been changed from "' + list[i].priority + '" to "' + priority + '"'); list[i].priority = priority; list.sort(sortByPriority); } return; } currentName = list[i].name; if(place === currentName) { console.log('Warning! Duplicate submenu "' + place + '". Skip item'); return; } } //      ,       list.push( { name: [place, makeOriginalPart(obj)], priority: priority } ); list.sort(sortByPriority); }; //           function changeExistPart(obj, list) { var place = obj.location.place.shift(), priority = obj.location.priority.shift(), //      searchName = (place) ? place : obj.name; for(var i = 1; i < list.length; i++) { var currentName = (list[i].name.pop) ? list[i].name[0] : list[i].name; if(searchName === currentName) { if(!list[i].name.pop || (!place && list[i].name.pop) ) { console.log('Warning! Duplicate menu "' + searchName + '". Skip item'); return list; } else { list[i].name = changeExistPart(obj, list[i].name); if(priority !== list[i].priority) { console.log('Warning! Priority of menu "' + list[i].name + '" has been changed from "' + list[i].priority + '" to "' + priority + '"'); list[i].priority = priority; list.sort(sortByPriority); } return list; } } } if(!place) { delete obj.location; list.push(obj); } else { list.push({ name: [place, makeOriginalPart(obj)], priority: priority }); } list.sort(sortByPriority); return list; } //   ,       function makeOriginalPart (obj) { var place = obj.location.place.shift(), priority = obj.location.priority.shift(); if(place) { var menu = { priority: priority, name: [place, makeOriginalPart(obj)] }; } else { delete obj.location; menu = obj; } return menu; } //       function sortByPriority(a, b) { return a.priority - b.priority; } //      angularJS this.$get = function () { return { list: list, add: this.add }; }; }); })(); 

 'use strict'; (function () { angular.module('navbar') .factory('navPermission', function (Permission, $q) { //          function getUser(params) { var users = Permission.roleValidations, names = Object.keys(users), promisesArr = []; for(var i = 0; i < names.length; i++) { var current = names[i], validUser = $q.when( users[current](params) ); promisesArr.push(validUser); } return $q.all(promisesArr).then(function (users) { for(var i = 0; i < users.length; i++) { if(users[i]) { return names[i]; } } return null; }); } //   ,      ,   -    function acceptPermission (list, username) { if(!username.then) { return changeList(list, username); } else { return username.then(function (username) { return changeList(list, username); }); } } //        ,      function changeList(list, username) { for(var i = (list[0].name) ? 0 : 1; i < list.length; i++) { if(list[i].permissions) { if(list[i].permissions.except) { var except = list[i].permissions.except; for(var j = 0; j < except.length; j++) { if(except[j] === username) { list.splice(i--, 1); } } } else if(list[i].permissions.only) { var only = list[i].permissions.only, accessDenided = true; for(j = 0; j < only.length; j++) { if(only[j] === username) { accessDenided = false; } } if(accessDenided) { list.splice(i--, 1); } } } else if(list[i].name.pop) { list[i].name = changeList( list[i].name, username); if(list[i].name.length === 1 ) { list.splice(i--, 1); } } } return list; } //     return { getUser: getUser, acceptPermission: acceptPermission }; }); })(); 

 'use strict'; (function() { angular.module('navbar') .config(function ($stateProvider, navbarListProvider) { //    state     $stateProvider.decorator('state', function (obj) { var menu = obj.menu, permissions = (obj.data) ? obj.data.permissions : null; //           -    if(!menu) { return; } menu.state = obj.name; //        if(permissions) { menu.permissions = {}; if(permissions.except) { menu.permissions.except = permissions.except; } else if(permissions.only) { menu.permissions.only = permissions.only; } else { delete menu.permissions; } } //       menu navbarListProvider.add(menu); }); }); })();