simplify width calculation to use the browser width instead of the element widths + reuse dropdown component
This commit is contained in:
Mads Rasmussen
@@ -1,43 +1,79 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
function EditorNavigationDirective(eventsService, $timeout) {
|
||||
function EditorNavigationDirective($window, $timeout, eventsService, windowResizeListener) {
|
||||
|
||||
function link(scope, el, attr, ctrl) {
|
||||
|
||||
|
||||
var maxApps = 3;
|
||||
var contentAppsWidth = [];
|
||||
function link(scope) {
|
||||
|
||||
scope.showNavigation = true;
|
||||
scope.showMoreButton = false;
|
||||
scope.showTray = false;
|
||||
|
||||
scope.contentAppsLimit = maxApps;
|
||||
|
||||
scope.showDropdown = false;
|
||||
scope.overflowingItems = 0;
|
||||
scope.itemsLimit = 6;
|
||||
|
||||
scope.moreButton = {
|
||||
alias: "more",
|
||||
active: false,
|
||||
name: "More",
|
||||
icon: "icon-thumbnails-small",
|
||||
view: "views/content/apps/info/info.html"
|
||||
name: "More"
|
||||
};
|
||||
|
||||
scope.clickNavigationItem = function (selectedItem) {
|
||||
scope.showDropdown = false;
|
||||
runItemAction(selectedItem);
|
||||
eventsService.emit("app.tabChange", selectedItem);
|
||||
setItemToActive(selectedItem);
|
||||
};
|
||||
|
||||
scope.trayClick = function () {
|
||||
if (scope.showTray === false) {
|
||||
scope.showTray = true;
|
||||
} else {
|
||||
scope.showTray = false;
|
||||
}
|
||||
scope.toggleDropdown = function () {
|
||||
scope.showDropdown = !scope.showDropdown;
|
||||
};
|
||||
|
||||
scope.hideDropdown = function() {
|
||||
scope.showDropdown = false;
|
||||
};
|
||||
|
||||
function onInit() {
|
||||
|
||||
// hide navigation if there is only 1 item
|
||||
if (scope.navigation.length <= 1) {
|
||||
scope.showNavigation = false;
|
||||
}
|
||||
|
||||
$timeout(function(){
|
||||
if($window && $window.innerWidth) {
|
||||
calculateVisibleItems($window.innerWidth);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function calculateVisibleItems(windowWidth) {
|
||||
|
||||
// if we don't get a windowWidth stick with the default item limit
|
||||
if(!windowWidth) {
|
||||
return;
|
||||
}
|
||||
|
||||
scope.itemsLimit = 0;
|
||||
|
||||
// set visible items based on browser width
|
||||
if (windowWidth > 1500) {
|
||||
scope.itemsLimit = 6;
|
||||
}
|
||||
else if (windowWidth > 700) {
|
||||
scope.itemsLimit = 4;
|
||||
}
|
||||
|
||||
// toggle more button
|
||||
if(scope.navigation.length > scope.itemsLimit) {
|
||||
scope.showMoreButton = true;
|
||||
scope.overflowingItems = scope.itemsLimit - scope.navigation.length;
|
||||
} else {
|
||||
scope.showMoreButton = false;
|
||||
scope.overflowingItems = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function runItemAction(selectedItem) {
|
||||
if (selectedItem.action) {
|
||||
selectedItem.action(selectedItem);
|
||||
@@ -45,92 +81,42 @@
|
||||
}
|
||||
|
||||
function setItemToActive(selectedItem) {
|
||||
// set all other views to inactive
|
||||
if (selectedItem.view) {
|
||||
|
||||
for (var index = 0; index < scope.navigation.length; index++) {
|
||||
var item = scope.navigation[index];
|
||||
|
||||
// set 'more' button active if there is an active app in the app tray
|
||||
var selectedItemIndex = scope.navigation.indexOf(selectedItem);
|
||||
if (selectedItemIndex + 1 > scope.contentAppsLimit) {
|
||||
scope.moreButton.active = true;
|
||||
} else {
|
||||
scope.moreButton.active = false;
|
||||
}
|
||||
|
||||
|
||||
// deselect all items
|
||||
angular.forEach(scope.navigation, function(item, index){
|
||||
item.active = false;
|
||||
}
|
||||
|
||||
// set view to active
|
||||
selectedItem.active = true;
|
||||
}
|
||||
}
|
||||
|
||||
function activate() {
|
||||
|
||||
$timeout(function () {
|
||||
|
||||
$("#contentApps li").each(function (index) {
|
||||
contentAppsWidth.push($(this).outerWidth());
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// hide navigation if there is only 1 item
|
||||
if (scope.navigation.length <= 1) {
|
||||
scope.showNavigation = false;
|
||||
}
|
||||
}
|
||||
|
||||
function showMoreButton() {
|
||||
if (scope.showNavigation === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (scope.contentAppsLimit < maxApps) {
|
||||
scope.showMoreButton = true;
|
||||
|
||||
} else {
|
||||
scope.showMoreButton = false;
|
||||
}
|
||||
}
|
||||
|
||||
window.onresize = calculateWidth;
|
||||
|
||||
function calculateWidth() {
|
||||
$timeout(function () {
|
||||
//total width minus room for avatar, search and help icon
|
||||
var nameHeaderWidth = $(window).width() - 200;
|
||||
var appsWidth = 0;
|
||||
var totalApps = scope.navigation.length;
|
||||
|
||||
// detect how many apps we can show on the screen and tray
|
||||
for (var i = 0; i < contentAppsWidth.length; i++) {
|
||||
var appItemWidth = contentAppsWidth[i];
|
||||
appsWidth += appItemWidth;
|
||||
|
||||
// substract current content apps width to get a more accurate measurement of the name header width
|
||||
nameHeaderWidth -= appsWidth;
|
||||
|
||||
if (appsWidth > nameHeaderWidth) {
|
||||
scope.contentAppsLimit = i - 1;
|
||||
scope.contentAppsTrayLimit = scope.contentAppsLimit - totalApps;
|
||||
break;
|
||||
} else {
|
||||
scope.contentAppsLimit = maxApps;
|
||||
scope.contentAppsTrayLimit = scope.contentAppsLimit - totalApps;
|
||||
}
|
||||
|
||||
// set clicked item to active
|
||||
selectedItem.active = true;
|
||||
|
||||
// set more button to active if item in dropdown is clicked
|
||||
var selectedItemIndex = scope.navigation.indexOf(selectedItem);
|
||||
if (selectedItemIndex + 1 > scope.itemsLimit) {
|
||||
scope.moreButton.active = true;
|
||||
} else {
|
||||
scope.moreButton.active = false;
|
||||
}
|
||||
});
|
||||
|
||||
showMoreButton();
|
||||
}
|
||||
}
|
||||
|
||||
var resizeCallback = function(size) {
|
||||
if(size && size.width) {
|
||||
calculateVisibleItems(size.width);
|
||||
}
|
||||
};
|
||||
|
||||
windowResizeListener.register(resizeCallback);
|
||||
|
||||
//ensure to unregister from all events and kill jquery plugins
|
||||
scope.$on('$destroy', function () {
|
||||
windowResizeListener.unregister(resizeCallback);
|
||||
});
|
||||
|
||||
onInit();
|
||||
|
||||
activate();
|
||||
showMoreButton();
|
||||
}
|
||||
|
||||
var directive = {
|
||||
|
||||
@@ -64,11 +64,9 @@
|
||||
|
||||
.umb-editor-header {
|
||||
background: @white;
|
||||
// flex: 1 1 60px;
|
||||
position: absolute;
|
||||
padding: 0 20px;
|
||||
z-index: 1;
|
||||
// box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.16);
|
||||
z-index: @zindexFixedNavbar;
|
||||
border-bottom: 1px solid @gray-9;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -50,3 +50,25 @@
|
||||
font-size: 12px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.umb-sub-views-nav-item__more {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.umb-sub-views-nav-item__more i {
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
border-radius: 50%;
|
||||
background: @gray-3;
|
||||
display: inline-block;
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
|
||||
.umb-sub-views-nav-item__more i:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// make dots green the an item is active
|
||||
.umb-sub-views-nav-item.is-active .umb-sub-views-nav-item__more i {
|
||||
background-color: @turquoise-d1;
|
||||
}
|
||||
@@ -1,11 +1,12 @@
|
||||
<ul id="contentApps" class="umb-sub-views-nav" ng-show="showNavigation">
|
||||
<li ng-repeat="item in navigation | limitTo: contentAppsLimit ">
|
||||
<ul class="umb-sub-views-nav" ng-show="showNavigation">
|
||||
|
||||
<li ng-repeat="item in navigation | limitTo: itemsLimit ">
|
||||
<div ng-show="item.alias !== 'more'">
|
||||
<a data-element="sub-view-{{item.alias}}"
|
||||
tabindex="-1"
|
||||
class="umb-sub-views-nav-item"
|
||||
class="umb-sub-views-nav-item js-umb-sub-views-nav-item"
|
||||
href=""
|
||||
ng-click="clickNavigationItem(item)"
|
||||
ng-click="clickNavigationItem(item, $index)"
|
||||
hotkey="{{$index+1}}"
|
||||
ng-class="{'is-active': item.active, '-has-error': item.hasError}">
|
||||
<i class="icon {{ item.icon }}"></i>
|
||||
@@ -14,38 +15,31 @@
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li ng-show="showMoreButton" style="position: relative;">
|
||||
|
||||
<li>
|
||||
<div ng-show="showMoreButton === true">
|
||||
<a data-element="sub-view-{{moreButton.alias}}"
|
||||
tabindex="-1"
|
||||
class="umb-sub-views-nav-item"
|
||||
href=""
|
||||
ng-click="trayClick()"
|
||||
ng-class="{'is-active': moreButton.active}">
|
||||
<i class="icon {{ moreButton.icon }}"></i>
|
||||
<span class="umb-sub-views-nav-item-text">{{ moreButton.name }}</span>
|
||||
</a>
|
||||
<div ng-if="showTray === true" on-outside-click="trayClick()" style="position: fixed; right: 131px;">
|
||||
<a data-element="sub-view-{{moreButton.alias}}"
|
||||
class="umb-sub-views-nav-item"
|
||||
href=""
|
||||
ng-click="toggleDropdown()"
|
||||
ng-class="{'is-active': moreButton.active}">
|
||||
<div class="umb-sub-views-nav-item__more"><i></i><i></i><i></i></div>
|
||||
<span class="umb-sub-views-nav-item-text">{{ moreButton.name }}</span>
|
||||
</a>
|
||||
|
||||
<!--The triange above the app tray-->
|
||||
<div style="right: 5px; margin-left: 50px; width: 0; height: 0; border: solid 10px; border-color: transparent transparent white transparent;"></div>
|
||||
<umb-dropdown ng-show="showDropdown" on-close="hideDropdown()" style="left: auto; right: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; min-width: auto; margin-top: 10px;">
|
||||
<umb-dropdown-item ng-repeat="item in navigation | limitTo: overflowingItems">
|
||||
<a data-element="sub-view-{{item.alias}}"
|
||||
style="display: flex; border: none;"
|
||||
class="umb-sub-views-nav-item"
|
||||
ng-href=""
|
||||
ng-click="clickNavigationItem(item, $index)"
|
||||
ng-class="{'is-active': item.active, '-has-error': item.hasError}">
|
||||
<i class="icon {{ item.icon }}"></i>
|
||||
<span class="umb-sub-views-nav-item-text">{{ item.name }}</span>
|
||||
</a>
|
||||
</umb-dropdown-item>
|
||||
</umb-dropdown>
|
||||
|
||||
<ul class="shadow-depth-2" style="background-color: white; list-style: none;">
|
||||
<li ng-repeat="item in navigation | limitTo: contentAppsTrayLimit ">
|
||||
<a data-element="sub-view-{{item.alias}}"
|
||||
tabindex="-1"
|
||||
class="umb-sub-views-nav-item"
|
||||
href=""
|
||||
ng-click="clickNavigationItem(item)"
|
||||
ng-class="{'is-active': item.active, '-has-error': item.hasError}">
|
||||
<i class="icon {{ item.icon }}"></i>
|
||||
<span class="umb-sub-views-nav-item-text">{{ item.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user