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

JS: Implement ResponsiveTabBar behavior

Browse Source 
refs #8590
This commit is contained in:
Florian Strohmaier 2016-03-24 11:44:26 +01:00
parent 92edd65291
commit 28b8b32290
1 changed files with 18 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,85 +4,41 @@
'use strict'; 'use strict';
function onRendered(e) { function onWindowResized(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);
if ($this.find('.tabs')) {
cacheBreakpoints($this, _this);
updateBreakIndex($this, _this);
}
});
} else {
var $this = $(this);
if ($this.find('.tabs')) {
cacheBreakpoints($this, _this);
updateBreakIndex($this, _this);
}
}
}
function onWindowResized(e) {
console.log(e.type);
var _this = e.data.self;
$('#col1, #col2').each(function() { $('#col1, #col2').each(function() {
var $this = $(this); var $this = $(this);
cacheBreakpoints($this, _this);
if (_this.containerData[$this.attr("id")]) {
if ($this.find('.tabs')) {
updateBreakIndex($this, _this);
}
}
}); });
} }
function onLayoutchange(e) { function onFixControls(e) {
console.log(e.type); var $this = $(this);
var _this = e.data.self; var _this = e.data.self;
$('#col1, #col2').each(function() { if ($this.find('.tabs')) {
var $this = $(this); updateBreakIndex($this, _this);
if ($this.find('.tabs')) { }
cacheBreakpoints($this, _this);
updateBreakIndex($this, _this);
}
});
} }
function cacheBreakpoints($container, e) { function cacheBreakpoints($container, e) {
var containerData = {}; var containerData = {};
containerData.breakPoints = [];
var w = $container.find('.dropdown-nav-item').outerWidth(true)+1; var w = $container.find('.dropdown-nav-item').outerWidth(true)+1;
$container.find(".tabs").not(".cloned").show(); containerData.breakPoints = [];
$container.find(".tabs").not(".cloned").children("li").not('.dropdown-nav-item').each(function() { $container.find(".tabs").not(".cloned").show().children("li").not('.dropdown-nav-item').each(function() {
containerData.breakPoints.push(w += $(this).outerWidth(true) + 1); containerData.breakPoints.push(w += $(this).outerWidth(true) + 1);
}); });
e.containerData[$container.attr('id')] = containerData; e.containerData[$container.attr('id')] = containerData;
// console.log("cacheBreak", e.containerData);
} }
function updateBreakIndex($container, e) { function updateBreakIndex($container, e) {
var b = false; var b = false;
// show container before calculating dimensions
var $tabContainer = $container.find('.tabs').show();
var breakPoints = e.containerData[$container.attr('id')].breakPoints; var breakPoints = e.containerData[$container.attr('id')].breakPoints;
var dw = $tabContainer.find('.dropdown-nav-item').outerWidth(true) + 1;
var tw = $tabContainer.width();
// var w = tw - dw;
var w = $tabContainer.width();
for (var i = 0; i < breakPoints.length; i++) { for (var i = 0; i < breakPoints.length; i++) {
if ( breakPoints[i] > w) { if ( breakPoints[i] > $container.find('.tabs').width()) {
b = i; b = i;
break; break;
} }
} }
// console.log("updateBreak", e.containerData);
setBreakIndex($container, b, e); setBreakIndex($container, b, e);
} }
@ -94,13 +50,7 @@
* @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) {
// console.log("setBreak", e.containerData);
var containerData = e.containerData[$container.attr("id")]; 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) { if (newIndex === containerData.breakIndex) {
return; return;
} else { } else {
@ -162,15 +112,14 @@
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);
var _this = this;
$('#col1, #col2').each(function() {
cacheBreakpoints($(this), _this);
});
$(window).resize({self: this}, onWindowResized); $(window).resize({self: this}, onWindowResized);
this.on('fix-controls', '#col1, #col2', onFixControls, this);
this.on('layout-change', onLayoutchange, this);
/*
this.on('close-column', '#col1, #col2', onRendered, this);
*/
}; };
ResponsiveTabBar.prototype = new Icinga.EventListener(); ResponsiveTabBar.prototype = new Icinga.EventListener();