diff --git a/src/app/theme/components/baSidebar/BaSidebarCtrl.js b/src/app/theme/components/baSidebar/BaSidebarCtrl.js new file mode 100644 index 0000000..8967d6c --- /dev/null +++ b/src/app/theme/components/baSidebar/BaSidebarCtrl.js @@ -0,0 +1,30 @@ +/** + * @author v.lugovksy + * created on 16.12.2015 + */ +(function () { + 'use strict'; + + angular.module('BlurAdmin.theme.components') + .controller('BaSidebarCtrl', BaSidebarCtrl); + + /** @ngInject */ + function BaSidebarCtrl($scope, baSidebarService) { + + $scope.menuItems = baSidebarService.getMenuItems(); + $scope.defaultSidebarState = $scope.menuItems[0].stateRef; + + $scope.hoverItem = function ($event) { + $scope.showHoverElem = true; + $scope.hoverElemHeight = $event.currentTarget.clientHeight; + var menuTopValue = 66; + $scope.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - menuTopValue; + }; + + $scope.$on('$stateChangeSuccess', function () { + if (baSidebarService.canSidebarBeHidden()) { + baSidebarService.setMenuCollapsed(true); + } + }); + } +})(); \ No newline at end of file diff --git a/src/app/theme/components/baSidebar/ba-sidebar.html b/src/app/theme/components/baSidebar/ba-sidebar.html new file mode 100644 index 0000000..7dd1aca --- /dev/null +++ b/src/app/theme/components/baSidebar/ba-sidebar.html @@ -0,0 +1,42 @@ + \ No newline at end of file diff --git a/src/app/theme/components/baSidebar/baSidebar.directive.js b/src/app/theme/components/baSidebar/baSidebar.directive.js new file mode 100644 index 0000000..55d66ed --- /dev/null +++ b/src/app/theme/components/baSidebar/baSidebar.directive.js @@ -0,0 +1,60 @@ +/** + * @author v.lugovksy + * created on 16.12.2015 + */ +(function () { + 'use strict'; + + angular.module('BlurAdmin.theme.components') + .directive('baSidebar', baSidebar); + + /** @ngInject */ + function baSidebar($timeout, baSidebarService, baUtil, layoutSizes) { + var jqWindow = $(window); + return { + restrict: 'E', + templateUrl: 'app/theme/components/baSidebar/ba-sidebar.html', + controller: 'BaSidebarCtrl', + link: function(scope, el) { + + scope.menuHeight = el[0].childNodes[0].clientHeight - 84; + jqWindow.on('click', _onWindowClick); + jqWindow.on('resize', _onWindowResize); + + scope.$on('$destroy', function() { + jqWindow.off('click', _onWindowClick); + jqWindow.off('resize', _onWindowResize); + }); + + function _onWindowClick($evt) { + if (!baUtil.isDescendant(el[0], $evt.target) && + !$evt.originalEvent.$sidebarEventProcessed && + !baSidebarService.isMenuCollapsed() && + baSidebarService.canSidebarBeHidden()) { + $evt.originalEvent.$sidebarEventProcessed = true; + $timeout(function () { + baSidebarService.setMenuCollapsed(true); + }, 10); + } + } + + // watch window resize to change menu collapsed state if needed + function _onWindowResize() { + var newMenuCollapsed = baSidebarService.shouldMenuBeCollapsed(); + var newMenuHeight = _calculateMenuHeight(); + if (newMenuCollapsed != baSidebarService.isMenuCollapsed() || scope.menuHeight != newMenuHeight) { + scope.$apply(function () { + scope.menuHeight = newMenuHeight; + baSidebarService.setMenuCollapsed(newMenuCollapsed) + }); + } + } + + function _calculateMenuHeight() { + return el[0].childNodes[0].clientHeight - 84; + } + } + }; + } + +})(); \ No newline at end of file diff --git a/src/app/theme/components/sidebar/sidebar.service.js b/src/app/theme/components/baSidebar/baSidebar.service.js similarity index 71% rename from src/app/theme/components/sidebar/sidebar.service.js rename to src/app/theme/components/baSidebar/baSidebar.service.js index 1834c08..1917562 100644 --- a/src/app/theme/components/sidebar/sidebar.service.js +++ b/src/app/theme/components/baSidebar/baSidebar.service.js @@ -2,10 +2,13 @@ 'use strict'; angular.module('BlurAdmin.theme.components') - .service('sidebarService', sidebarService); + .service('baSidebarService', baSidebarService); /** @ngInject */ - function sidebarService($state) { + function baSidebarService($state, layoutSizes) { + + var isMenuCollapsed = shouldMenuBeCollapsed(); + var staticMenuItems = [ { title: 'Pages', icon: 'ion-document', @@ -58,6 +61,21 @@ return menuItems.concat(staticMenuItems); }; + this.shouldMenuBeCollapsed = shouldMenuBeCollapsed; + this.canSidebarBeHidden = canSidebarBeHidden; + + this.setMenuCollapsed = function(isCollapsed) { + isMenuCollapsed = isCollapsed; + }; + + this.isMenuCollapsed = function() { + return isMenuCollapsed; + }; + + this.toggleMenuCollapsed = function() { + isMenuCollapsed = !isMenuCollapsed; + }; + function defineMenuItemStates() { return $state.get() .filter(function(s) { @@ -71,12 +89,20 @@ level: (s.name.match(/\./g) || []).length, order: meta.order, icon: meta.icon, - root: '#/' + s.name.replace('.', '/'), + stateRef: s.name, }; }) .sort(function(a, b) { return (a.level - b.level) * 100 + a.order - b.order; }); } + + function shouldMenuBeCollapsed() { + return window.innerWidth <= layoutSizes.resWidthCollapseSidebar; + } + + function canSidebarBeHidden() { + return window.innerWidth <= layoutSizes.resWidthHideSidebar; + } } })(); diff --git a/src/app/theme/components/baSidebar/baSidebarHelpers.directive.js b/src/app/theme/components/baSidebar/baSidebarHelpers.directive.js new file mode 100644 index 0000000..682fefb --- /dev/null +++ b/src/app/theme/components/baSidebar/baSidebarHelpers.directive.js @@ -0,0 +1,91 @@ +/** + * @author v.lugovsky + * created on 03.05.2016 + */ +(function () { + 'use strict'; + + angular.module('BlurAdmin.theme.components') + .directive('baSidebarToggleMenu', baSidebarToggleMenu) + .directive('baSidebarCollapseMenu', baSidebarCollapseMenu) + .directive('baUiSrefTogglingSubmenu', baUiSrefTogglingSubmenu) + .directive('baUiSrefToggler', baUiSrefToggler); + + /** @ngInject */ + function baSidebarToggleMenu(baSidebarService) { + return { + restrict: 'A', + link: function(scope, elem) { + elem.on('click', function($evt) { + $evt.originalEvent.$sidebarEventProcessed = true; + scope.$apply(function() { + baSidebarService.toggleMenuCollapsed(); + }); + }); + } + }; + } + + /** @ngInject */ + function baSidebarCollapseMenu(baSidebarService) { + return { + restrict: 'A', + link: function(scope, elem) { + elem.on('click', function($evt) { + $evt.originalEvent.$sidebarEventProcessed = true; + if (!baSidebarService.isMenuCollapsed()) { + scope.$apply(function() { + baSidebarService.setMenuCollapsed(true); + }); + } + }); + } + }; + } + + /** @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; + } + } + }; + } + + /** @ngInject */ + function baUiSrefToggler() { + return { + restrict: 'A', + link: function(scope, el, attrs) { + el.on('click', function() { + el.next().slideToggle(); + el.parent().toggleClass('ba-sidebar-item-expanded'); + }); + } + }; + } + +})(); diff --git a/src/app/theme/components/pageTop/pageTop.directive.js b/src/app/theme/components/pageTop/pageTop.directive.js index b7c3cc6..ffa79d9 100644 --- a/src/app/theme/components/pageTop/pageTop.directive.js +++ b/src/app/theme/components/pageTop/pageTop.directive.js @@ -12,9 +12,6 @@ function pageTop() { return { restrict: 'E', - scope: { - isMenuCollapsed: '=', - }, templateUrl: 'app/theme/components/pageTop/pageTop.html' }; } diff --git a/src/app/theme/components/pageTop/pageTop.html b/src/app/theme/components/pageTop/pageTop.html index fcb4fc4..33919c2 100644 --- a/src/app/theme/components/pageTop/pageTop.html +++ b/src/app/theme/components/pageTop/pageTop.html @@ -1,6 +1,6 @@
- +
diff --git a/src/app/theme/components/sidebar/SidebarCtrl.js b/src/app/theme/components/sidebar/SidebarCtrl.js deleted file mode 100644 index 469e5aa..0000000 --- a/src/app/theme/components/sidebar/SidebarCtrl.js +++ /dev/null @@ -1,101 +0,0 @@ -/** - * @author v.lugovksy - * created on 16.12.2015 - */ -(function () { - 'use strict'; - - angular.module('BlurAdmin.theme.components') - .controller('SidebarCtrl', SidebarCtrl); - - /** @ngInject */ - function SidebarCtrl($scope, $rootScope, $timeout, $location, layoutSizes, sidebarService, $element) { - - $scope.menuItems = sidebarService.getMenuItems(); - $scope.menuHeight = $element[0].childNodes[0].clientHeight - 84; - - function selectMenuItem() { - $.each($scope.menuItems, function (index, menu) { - menu.selected = ('#' + $location.$$url).indexOf(menu.root) == 0; - menu.expanded = menu.expanded || menu.selected; - if (menu.subMenu) { - $.each(menu.subMenu, function (subIndex, subMenu) { - subMenu.selected = (('#' + $location.$$url).indexOf(subMenu.root) == 0) && !subMenu.disabled; - }); - } - }); - } - - selectMenuItem(); - - $scope.$on('$locationChangeSuccess', function () { - selectMenuItem(); - }); - - $scope.menuExpand = function () { - $scope.$isMenuCollapsed = false; - }; - - $scope.menuCollapse = function () { - $scope.$isMenuCollapsed = true; - }; - - - // watch window resize to change menu collapsed state if needed - $(window).resize(function () { - var isMenuShouldCollapsed = $(window).width() <= layoutSizes.resWidthCollapseSidebar; - var scopeApplied = false; - if ($scope.isMenuShouldCollapsed !== isMenuShouldCollapsed) { - $scope.$apply(function () { - $scope.menuHeight = $element[0].childNodes[0].clientHeight - 84; - $scope.$isMenuCollapsed = isMenuShouldCollapsed; - scopeApplied = true; - }); - } - if (!scopeApplied) { - $scope.$apply(function () { - $scope.menuHeight = $element[0].childNodes[0].clientHeight - 84; - }); - } - $scope.isMenuShouldCollapsed = isMenuShouldCollapsed; - - }); - - $scope.toggleSubMenu = function ($event, item) { - var submenu = $($event.currentTarget).next(); - if ($scope.$isMenuCollapsed) { - $scope.menuExpand(); - if (!item.expanded) { - $timeout(function () { - item.expanded = !item.expanded; - submenu.slideToggle(); - }); - } - } else { - item.expanded = !item.expanded; - submenu.slideToggle(); - } - - }; - - window.onclick = function () { - $timeout(function () { - - if ($scope.anySlideRight) { - $scope.menuItems.map(function (val) { - return val.slideRight = false; - }); - $scope.anySlideRight = false; - } - - }, 10); - }; - - $scope.hoverItem = function ($event) { - $scope.showHoverElem = true; - $scope.hoverElemHeight = $event.currentTarget.clientHeight; - var menuTopValue = 66; - $scope.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - menuTopValue; - }; - } -})(); \ No newline at end of file diff --git a/src/app/theme/components/sidebar/sidebar.directive.js b/src/app/theme/components/sidebar/sidebar.directive.js deleted file mode 100644 index 8b97558..0000000 --- a/src/app/theme/components/sidebar/sidebar.directive.js +++ /dev/null @@ -1,20 +0,0 @@ -/** - * @author v.lugovksy - * created on 16.12.2015 - */ -(function () { - 'use strict'; - - angular.module('BlurAdmin.theme.components') - .directive('sidebar', sidebar); - - /** @ngInject */ - function sidebar() { - return { - restrict: 'E', - templateUrl: 'app/theme/components/sidebar/sidebar.html', - controller: 'SidebarCtrl' - }; - } - -})(); \ No newline at end of file diff --git a/src/app/theme/components/sidebar/sidebar.html b/src/app/theme/components/sidebar/sidebar.html deleted file mode 100644 index 878d4df..0000000 --- a/src/app/theme/components/sidebar/sidebar.html +++ /dev/null @@ -1,40 +0,0 @@ - \ No newline at end of file diff --git a/src/app/theme/services/baUtil.js b/src/app/theme/services/baUtil.js new file mode 100644 index 0000000..146a4cd --- /dev/null +++ b/src/app/theme/services/baUtil.js @@ -0,0 +1,27 @@ +/** + * @author v.lugovsky + * created on 03.05.2016 + */ +(function () { + 'use strict'; + + angular.module('BlurAdmin.theme') + .service('baUtil', baUtil); + + /** @ngInject */ + function baUtil() { + + this.isDescendant = function(parent, child) { + var node = child.parentNode; + while (node != null) { + if (node == parent) { + return true; + } + node = node.parentNode; + } + return false; + }; + + } + +})(); diff --git a/src/app/theme/theme.run.js b/src/app/theme/theme.run.js index 014faaa..3e12cf7 100644 --- a/src/app/theme/theme.run.js +++ b/src/app/theme/theme.run.js @@ -9,7 +9,7 @@ .run(themeRun); /** @ngInject */ - function themeRun($timeout, $rootScope, layoutSizes, layoutPaths, preloader, $q) { + function themeRun($timeout, $rootScope, layoutSizes, layoutPaths, preloader, $q, baSidebarService) { $rootScope.$isMobile = (/android|webos|iphone|ipad|ipod|blackberry|windows phone/).test(navigator.userAgent.toLowerCase()); var whatToWait = [ @@ -34,7 +34,7 @@ } }, 7000); - $rootScope.$isMenuCollapsed = window.innerWidth <= layoutSizes.resWidthCollapseSidebar; + $rootScope.$baSidebarService = baSidebarService; } })(); \ No newline at end of file diff --git a/src/index.html b/src/index.html index c2872e3..b61227f 100644 --- a/src/index.html +++ b/src/index.html @@ -26,10 +26,10 @@
-
+
- - + +
diff --git a/src/sass/theme/components/_sidebar.scss b/src/sass/theme/components/_sidebar.scss index 0d3a58d..6dd3fe9 100644 --- a/src/sass/theme/components/_sidebar.scss +++ b/src/sass/theme/components/_sidebar.scss @@ -46,6 +46,20 @@ $angle-right: "\f101"; } } +.al-sidebar-list-item, .ba-sidebar-sublist-item { + &.ba-sidebar-item-expanded { + > .al-sidebar-list-link { + b { + transform: rotate(180deg); + } + } + + > .al-sidebar-sublist { + display: block; + } + } +} + a.al-sidebar-list-link { display: block; height: 42px; @@ -83,6 +97,7 @@ a.al-sidebar-list-link { padding: 0; text-align: center; color: #cccccc; + transition: transform 0.2s linear; } }