jinql
/
blur-admin
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix(sidebar): sidebar should allow having random states inside of manually configured items

pull/46/head
Vladimir Lugovsky 2016-05-13 17:31:35 +03:00
parent d849b044f5
commit 5f3efda01d
3 changed files with 86 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/theme/components/baSidebar/ba-sidebar.html
View File

@ -2,14 +2,15 @@
ng-mouseleave="hoverElemTop=selectElemTop">
<ul class="al-sidebar-list" slimscroll="{height: '{{menuHeight}}px'}" slimscroll-watch="menuHeight" >
<li ng-repeat="item in ::menuItems" class="al-sidebar-list-item"
ng-class="::{'with-sub-menu': item.subMenu}" ui-sref-active="selected">
ng-class="::{'with-sub-menu': item.subMenu}" ui-sref-active="selected"
ba-sidebar-toggling-item="item">
<a ng-mouseenter="hoverItem($event, item)" ui-state="item.stateRef || ''" ng-href="{{::(item.fixedHref ? item.fixedHref: '')}}" ng-if="::!item.subMenu" class="al-sidebar-list-link">
<i class="{{ ::item.icon }}"></i><span>{{ ::item.title }}</span>
</a>
<a ng-mouseenter="hoverItem($event, item)" ng-if="::item.subMenu"
class="al-sidebar-list-link" ba-ui-sref-toggler="item.stateRef">
class="al-sidebar-list-link" ba-ui-sref-toggler>
<i class="{{ ::item.icon }}"></i><span>{{ ::item.title }}</span>
<b class="fa fa-angle-down" ui-sref-active="fa-angle-up"
ng-if="::item.subMenu"></b>
@ -17,16 +18,17 @@
<ul ng-if="::item.subMenu" class="al-sidebar-sublist"
ng-class="{'slide-right': item.slideRight}"
ba-ui-sref-toggling-submenu="item.stateRef">
<li ng-repeat="subitem in ::item.subMenu" ng-class="::{'with-sub-menu': subitem.subMenu}" ui-sref-active="selected" class="ba-sidebar-sublist-item">
<a ng-mouseenter="hoverItem($event, item)" ng-if="::subitem.subMenu" ba-ui-sref-toggler="subitem.stateRef"
ba-ui-sref-toggling-submenu>
<li ng-repeat="subitem in ::item.subMenu" ng-class="::{'with-sub-menu': subitem.subMenu}" ui-sref-active="selected"
ba-sidebar-toggling-item="subitem" class="ba-sidebar-sublist-item">
<a ng-mouseenter="hoverItem($event, item)" ng-if="::subitem.subMenu" ba-ui-sref-toggler
class="al-sidebar-list-link subitem-submenu-link"><span>{{ ::subitem.title }}</span>
<b class="fa" ng-class="{'fa-angle-up': subitem.expanded, 'fa-angle-down': !subitem.expanded}"
ng-if="::subitem.subMenu"></b>
</a>
<ul ng-if="::subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list"
ng-class="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}"
ba-ui-sref-toggling-submenu="subitem.stateRef">
ba-ui-sref-toggling-submenu>
<li ng-mouseenter="hoverItem($event, item)" ng-repeat="subSubitem in ::subitem.subMenu" ui-sref-active="selected">
<a ng-mouseenter="hoverItem($event, item)" ui-state="subSubitem.stateRef || ''" ng-href="{{::(subSubitem.fixedHref ? subSubitem.fixedHref: '')}}">{{
::subSubitem.title }}</a>

13
src/app/theme/components/baSidebar/baSidebar.service.js
View File

@ -50,6 +50,19 @@
isMenuCollapsed = !isMenuCollapsed;
};
this.getAllStateRefsRecursive = function(item) {
var result = [];
_iterateSubItems(item);
return result;
function _iterateSubItems(currentItem) {
currentItem.subMenu && currentItem.subMenu.forEach(function(subItem) {
subItem.stateRef && result.push(subItem.stateRef);
_iterateSubItems(subItem);
});
}
};
function defineMenuItemStates() {
return $state.get()
.filter(function(s) {

92
src/app/theme/components/baSidebar/baSidebarHelpers.directive.js
View File

@ -8,6 +8,7 @@
angular.module('BlurAdmin.theme.components')
.directive('baSidebarToggleMenu', baSidebarToggleMenu)
.directive('baSidebarCollapseMenu', baSidebarCollapseMenu)
.directive('baSidebarTogglingItem', baSidebarTogglingItem)
.directive('baUiSrefTogglingSubmenu', baUiSrefTogglingSubmenu)
.directive('baUiSrefToggler', baUiSrefToggler);
@ -43,34 +44,71 @@
};
}
/** @ngInject */
function baSidebarTogglingItem($state, baSidebarService) {
return {
restrict: 'A',
controller: function ($scope, $element, $attrs) {
var vm = this;
var menuItem = vm.$$menuItem = $scope.$eval($attrs.baSidebarTogglingItem);
if (menuItem && menuItem.subMenu && menuItem.subMenu.length) {
vm.$$expandSubmenu = function() { console.warn('$$expandMenu should be overwritten by baUiSrefTogglingSubmenu') };
vm.$$collapseSubmenu = function() { console.warn('$$collapseSubmenu should be overwritten by baUiSrefTogglingSubmenu') };
var subItemsStateRefs = baSidebarService.getAllStateRefsRecursive(menuItem);
vm.$expand = function() {
vm.$$expandSubmenu();
$element.addClass('ba-sidebar-item-expanded');
};
vm.$collapse = function() {
vm.$$collapseSubmenu();
$element.removeClass('ba-sidebar-item-expanded');
};
vm.$toggle = function() {
$element.hasClass('ba-sidebar-item-expanded') ?
vm.$collapse() :
vm.$expand();
};
if (_isState($state.current)) {
$element.addClass('ba-sidebar-item-expanded');
}
$scope.$on('$stateChangeStart', function (event, toState) {
if (!_isState(toState) && $element.hasClass('ba-sidebar-item-expanded')) {
vm.$collapse();
$element.removeClass('ba-sidebar-item-expanded');
}
});
$scope.$on('$stateChangeSuccess', function (event, toState) {
if (_isState(toState) && !$element.hasClass('ba-sidebar-item-expanded')) {
vm.$expand();
$element.addClass('ba-sidebar-item-expanded');
}
});
}
function _isState(state) {
return state && subItemsStateRefs.some(function(subItemState) {
return state.name.indexOf(subItemState) == 0;
});
}
}
};
}
/** @ngInject */
function baUiSrefTogglingSubmenu($state) {
return {
restrict: 'A',
link: function(scope, el, attrs) {
var stateToWatch = scope.$eval(attrs.baUiSrefTogglingSubmenu);
if (_isState($state.current)) {
el.parent().addClass('ba-sidebar-item-expanded');
}
scope.$on('$stateChangeStart', function (event, toState) {
if (!_isState(toState) && el.parent().hasClass('ba-sidebar-item-expanded')) {
el.slideToggle();
el.parent().removeClass('ba-sidebar-item-expanded');
}
});
scope.$on('$stateChangeSuccess', function (event, toState) {
if (_isState(toState) && !el.parent().hasClass('ba-sidebar-item-expanded')) {
el.slideToggle();
el.parent().addClass('ba-sidebar-item-expanded');
}
});
function _isState(state) {
return state && state.name.indexOf(stateToWatch) == 0;
}
require: '^baSidebarTogglingItem',
link: function(scope, el, attrs, baSidebarTogglingItem) {
baSidebarTogglingItem.$$expandSubmenu = function() { el.slideDown(); };
baSidebarTogglingItem.$$collapseSubmenu = function() { el.slideUp(); };
}
};
}
@ -79,10 +117,10 @@
function baUiSrefToggler() {
return {
restrict: 'A',
link: function(scope, el, attrs) {
require: '^baSidebarTogglingItem',
link: function(scope, el, attrs, baSidebarTogglingItem) {
el.on('click', function() {
el.next().slideToggle();
el.parent().toggleClass('ba-sidebar-item-expanded');
baSidebarTogglingItem.$toggle();
});
}
};