tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-09-22 09:27:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

JS: WIP draft before implementing fix-controls event

Browse Source
This commit is contained in:
Florian Strohmaier 2016-03-23 13:21:22 +01:00
parent 9f4b84501c
commit b21732c58c
2 changed files with 112 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
public/js/icinga/behavior/responsive-tabbar.js
View File

@ -4,76 +4,88 @@
'use strict'; 'use strict';
function onRendered(e) { function onRendered(e) {
console.log(e.type);
var _this = e.data.self; var _this = e.data.self;
if ($('#layout').hasClass('twocols')) {
$('#col1, #col2').each( function() {
var $this = $(this); var $this = $(this);
console.log("on rendered", e.type); if ($this.find('.tabs')) {
if ($this.find(".tabs")) { cacheBreakpoints($this, _this);
cacheTabWidths($this, _this);
updateBreakIndex($this, _this); updateBreakIndex($this, _this);
} }
});
} else {
var $this = $(this);
if ($this.find('.tabs')) {
cacheBreakpoints($this, _this);
updateBreakIndex($this, _this);
}
}
} }
function onWindowResized(e) { function onWindowResized(e) {
console.log("window resize", e); console.log(e.type);
var _this = e.data.self; var _this = e.data.self;
$('#col1, #col2').each(function() {
$('#col1, #col2').each(function(i) {
var $this = $(this); var $this = $(this);
if ($this.find(".tabs")) {
if (_this.containerData[$this.attr("id")]) { if (_this.containerData[$this.attr("id")]) {
console.log("update"); if ($this.find('.tabs')) {
updateBreakIndex($this, _this); updateBreakIndex($this, _this);
} }
} }
}); });
} }
function onLayoutChange (e) { function onLayoutchange(e) {
console.log(e.type);
var _this = e.data.self; var _this = e.data.self;
$('#col1, #col2').each(function() {
$('#col1, #col2').each(function(i) {
var $this = $(this); var $this = $(this);
if ($this.find(".tabs")) { if ($this.find('.tabs')) {
cacheTabWidths($this, _this); cacheBreakpoints($this, _this);
updateBreakIndex($this, _this); updateBreakIndex($this, _this);
} }
}); });
} }
/** function cacheBreakpoints($container, e) {
* Calculate the breakIndex according to tabs container width var containerData = {};
* containerData.breakPoints = [];
* @param {jQuery} $container Element containing the tabs var w = $container.find('.dropdown-nav-item').outerWidth(true)+1;
* $container.find(".tabs").not(".cloned").show();
* @param {object} e Event $container.find(".tabs").not(".cloned").children("li").not('.dropdown-nav-item').each(function() {
*/ containerData.breakPoints.push(w += $(this).outerWidth(true) + 1);
});
e.containerData[$container.attr('id')] = containerData;
// console.log("cacheBreak", e.containerData);
}
function updateBreakIndex($container, e) { function updateBreakIndex($container, e) {
var breakIndex = false; var b = false;
var w = 0; // show container before calculating dimensions
var tabsElWidth = $container.find('.tabs').not(".cloned").width() - parseFloat($container.find('.tabs').not(".cloned").css("padding-left")); var $tabContainer = $container.find('.tabs').show();
var tabWidths = e.containerData[$container.attr("id")].tabWidths;
for (var i = 0; i < tabWidths.length; i++) { var breakPoints = e.containerData[$container.attr('id')].breakPoints;
w += tabWidths[i]; var dw = $tabContainer.find('.dropdown-nav-item').outerWidth(true) + 1;
if (w > Math.floor(tabsElWidth)) { var tw = $tabContainer.width();
breakIndex = i; // var w = tw - dw;
} else { var w = $tabContainer.width();
breakIndex = false;
for (var i = 0; i < breakPoints.length; i++) {
if ( breakPoints[i] > w) {
b = i;
break;
} }
} }
console.log("w : tabsW", w, tabsElWidth, $container, tabWidths); // console.log("updateBreak", e.containerData);
setBreakIndex($container, b, e);
setBreakIndex($container, breakIndex, e);
} }
/** /**
* Set the breakIndex and if value has changed render Tabs * Set the breakIndex and if value has changed render Tabs
* *
@ -82,65 +94,56 @@
* @param {Int} NewIndex New Value for the breakIndex * @param {Int} NewIndex New Value for the breakIndex
*/ */
function setBreakIndex($container, newIndex, e) { function setBreakIndex($container, newIndex, e) {
if (newIndex == e.containerData[$container.attr("id")].breakIndex) { // console.log("setBreak", e.containerData);
var containerData = e.containerData[$container.attr("id")];
console.log("event", e);
console.log("container", $container);
console.log("data", containerData);
console.log("new : old", newIndex, containerData.breakIndex)
if (newIndex === containerData.breakIndex) {
return; return;
} else { } else {
$container.breakIndex = newIndex; e.containerData[$container.attr('id')].breakIndex = newIndex;
renderTabs($container); renderTabs($container, e);
console.log("break index change", $container, $container.breakIndex);
} }
} }
/**
* Save horizontal dimensions of the tabs once
*
* @param {jQuery} $container Element containing the tabs
*
* @param {object} e Event
*/
function cacheTabWidths($container, e) {
var containerData = {};
containerData.tabWidths = [];
$container.find(".tabs").not(".cloned").children("li").each(function () {
containerData.tabWidths.push($(this).width() + parseFloat($(this).css("margin-right")));
});
e.containerData[$container.attr("id")] = containerData;
console.log("tab widths cached", $container, containerData, e.containerData);
}
/** /**
* Render Tabs of a container according to the updated breakIndex * Render Tabs of a container according to the updated breakIndex
* *
* @param {jQuery} $container Element containing the tabs * @param {jQuery} $container Element containing the tabs
*/ */
function renderTabs($container) { function renderTabs($container, e) {
var breakIndex = e.containerData[$container.attr('id')].breakIndex;
$container.find('.tabs.cloned').remove(); $container.find('.tabs.cloned').remove();
var $tabs = $container.find(".tabs").show(); if (breakIndex) {
if ($container.breakIndex) { var $tabsClone = $container.find('.tabs').not('.cloned').hide().clone().addClass("cloned");
var $additionalTabsDropdown = $('<li class="dropdown-nav-item additional-items"><a href="#" class="dropdown-toggle"><i class="icon-ellipsis"></i></a><ul class="nav"></ul></li>');
var $clonedTabs = $tabs.clone().addClass("cloned");
var $tabItems = $clonedTabs.children('li');
for (var i = $container.breakIndex-1; i < $tabItems.length + 1; i++) { // if not exists, create dropdown
var $item = $($tabItems.get(i)); var $dropdown = null;
if ( $tabsClone.children(".dropdown-nav-item").length > 0 ) {
if ($item.children('ul.nav').length > 0) { $dropdown = $tabsClone.children(".dropdown-nav-item");
$item.children('ul.nav').children('li').each(function(j) {
$additionalTabsDropdown.children("ul").append(this);
});
$item.remove();
} else { } else {
$additionalTabsDropdown.children("ul").append($item); $dropdown = $('<li class="dropdown-nav-item"><a href="#" class="dropdown-toggle" title="Dropdown menu" aria-label="Dropdown menu"><i aria-hidden="true" class="icon-down-open"></i></a><ul class="nav"></ul></li>');
$item.children("a").append($item.children("a").attr("title")); $tabsClone.append($dropdown);
} } // END if not exists, create dropdown
}
$clonedTabs.append($additionalTabsDropdown);
$container.find(".controls").prepend($clonedTabs);
$tabs.hide(); // insert tab items into dropdown
var l = $tabsClone.children("li").not('.dropdown-nav-item').length;
for (var i = breakIndex; i < l; i++) {
var $tab = $($tabsClone.children("li").not('.dropdown-nav-item').get(i));
$dropdown.children('ul').append($tab.clone());
$tab.hide();
} // END insert tab items into dropdown
$container.find('.tabs').not('.cloned').hide();
$container.find(".controls").prepend($tabsClone.show());
} else {
//breakIndex false: No need for cloned tabs
$container.find('.tabs').not('.cloned').show();
} }
} }
@ -157,12 +160,17 @@
* @constructor * @constructor
*/ */
var ResponsiveTabBar = function(icinga) { var ResponsiveTabBar = function(icinga) {
this.containerData = []; this.containerData = {};
Icinga.EventListener.call(this, icinga); Icinga.EventListener.call(this, icinga);
this.on('rendered', '#col1, #col2', onRendered, this); this.on('rendered', '#col1, #col2', onRendered, this);
$(window).resize({self: this}, onWindowResized); $(window).resize({self: this}, onWindowResized);
this.on('layout-change', '#col1, #col2', onLayoutChange, this);
this.on('layout-change', onLayoutchange, this);
/*
this.on('close-column', '#col1, #col2', onRendered, this); this.on('close-column', '#col1, #col2', onRendered, this);
*/
}; };
ResponsiveTabBar.prototype = new Icinga.EventListener(); ResponsiveTabBar.prototype = new Icinga.EventListener();

1
public/js/icinga/ui.js
View File

@ -245,6 +245,7 @@
if (this.currentLayout === 'poor' || this.currentLayout === 'minimal') { if (this.currentLayout === 'poor' || this.currentLayout === 'minimal') {
this.layout1col(); this.layout1col();
} }
$(this).trigger('layout-change');
return true; return true;
} }
} }