diff --git a/doc/80-Upgrading.md b/doc/80-Upgrading.md index 26b6528d6..85e89f121 100644 --- a/doc/80-Upgrading.md +++ b/doc/80-Upgrading.md @@ -8,6 +8,8 @@ v2.6 to v2.8 requires to follow the instructions for v2.7 too. **Framework changes affecting third-party code** * Asset support for modules (#3961) introduced with v2.8 has now been removed. +* `expandable-toggle`-support has been removed. Use `class="collapsible" data-visible-height=0` + to achieve the same effect. (Available since v2.7.0) ## Upgrading to Icinga Web 2 2.9.1 diff --git a/library/Icinga/Web/JavaScript.php b/library/Icinga/Web/JavaScript.php index cce48d866..7d0eed8ec 100644 --- a/library/Icinga/Web/JavaScript.php +++ b/library/Icinga/Web/JavaScript.php @@ -38,7 +38,6 @@ class JavaScript 'js/icinga/behavior/form.js', 'js/icinga/behavior/actiontable.js', 'js/icinga/behavior/flyover.js', - 'js/icinga/behavior/expandable.js', 'js/icinga/behavior/filtereditor.js', 'js/icinga/behavior/selectable.js', 'js/icinga/behavior/modal.js', diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less index d8788a505..e539a5cb5 100644 --- a/public/css/icinga/widgets.less +++ b/public/css/icinga/widgets.less @@ -654,51 +654,6 @@ ul.tree li a.error:hover { } } -input[type="checkbox"].expandable-toggle { - display: none; - - & + label { - float: right; - margin-right: 1em; - - cursor: pointer; - user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - } - - & ~ .expandable-content { - clear: right; // Because the label is floating right - } - - &:checked ~ .expandable-content { - -webkit-transition: opacity 0.2s linear; - -moz-transition: opacity 0.2s linear; - -o-transition: opacity 0.2s linear; - transition: opacity 0.2s linear; - } - - &:not(:checked) ~ .expandable-content { - height: 0; - opacity: 0; - visibility: hidden; - - -webkit-transition: opacity 0.2s linear, visibility 0.2s; - -moz-transition: opacity 0.2s linear, visibility 0.2s; - -o-transition: opacity 0.2s linear, visibility 0.2s; - transition: opacity 0.2s linear, visibility 0.2s; - } - - &:checked ~ label .expandable-expand-label { - display: none; - } - - &:not(:checked) ~ label .expandable-collapse-label { - display: none; - } -} - html.no-js .progress-label { display: none; } diff --git a/public/js/icinga/behavior/actiontable.js b/public/js/icinga/behavior/actiontable.js index ad7b448b2..0fb2ed596 100644 --- a/public/js/icinga/behavior/actiontable.js +++ b/public/js/icinga/behavior/actiontable.js @@ -348,8 +348,8 @@ */ this.loading = false; - this.on('rendered', this.onRendered, this); - this.on('beforerender', this.beforeRender, this); + this.on('rendered', '#main > .container', this.onRendered, this); + this.on('beforerender', '#main > .container', this.beforeRender, this); this.on('click', 'table.action tr[href], table.table-row-selectable tr[href]', this.onRowClicked, this); }; ActionTable.prototype = new Icinga.EventListener(); @@ -436,6 +436,11 @@ var container = evt.target; var _this = evt.data.self; + if (evt.currentTarget !== container) { + // Nested containers are ignored + return; + } + // initialize all rows with the correct row action $('table.action tr, table.table-row-selectable tr', container).each(function(idx, el) { @@ -475,6 +480,11 @@ var container = evt.target; var _this = evt.data.self; + if (evt.currentTarget !== container) { + // Nested containers are ignored + return; + } + var active = _this.tables().find('tr.active'); if (active.length) { $(container).data('icinga-actiontable-former-href', active.attr('href')); diff --git a/public/js/icinga/behavior/application-state.js b/public/js/icinga/behavior/application-state.js index 7cd655b44..213c96c26 100644 --- a/public/js/icinga/behavior/application-state.js +++ b/public/js/icinga/behavior/application-state.js @@ -1,6 +1,5 @@ /*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */ -// @TODO(el): https://dev.icinga.com/issues/10646 (function(Icinga, $) { 'use strict'; @@ -9,13 +8,18 @@ var ApplicationState = function (icinga) { Icinga.EventListener.call(this, icinga); - this.on('rendered', this.onRendered, this); + this.on('rendered', '#layout', this.onRendered, this); this.icinga = icinga; }; ApplicationState.prototype = new Icinga.EventListener(); ApplicationState.prototype.onRendered = function(e) { + if (e.currentTarget !== e.target) { + // Nested containers are ignored + return; + } + if (! $('#application-state').length && ! $('#login').length && ! $('#guest-error').length diff --git a/public/js/icinga/behavior/collapsible.js b/public/js/icinga/behavior/collapsible.js index 9c9d8de53..498325fb2 100644 --- a/public/js/icinga/behavior/collapsible.js +++ b/public/js/icinga/behavior/collapsible.js @@ -15,7 +15,7 @@ Icinga.EventListener.call(this, icinga); this.on('layout-change', this.onLayoutChange, this); - this.on('rendered', '#layout', this.onRendered, this); + this.on('rendered', '#main > .container, #modal-content', this.onRendered, this); this.on('click', '.collapsible + .collapsible-control, .collapsible > .collapsible-control', this.onControlClicked, this); diff --git a/public/js/icinga/behavior/datetime-picker.js b/public/js/icinga/behavior/datetime-picker.js index 5a5f5d39a..fb0ddffc3 100644 --- a/public/js/icinga/behavior/datetime-picker.js +++ b/public/js/icinga/behavior/datetime-picker.js @@ -45,7 +45,7 @@ */ this._pickers = new Map(); - this.on('rendered', this.onRendered, this); + this.on('rendered', '#main > .container, #modal-content', this.onRendered, this); this.on('close-column', this.onCloseContainer, this); this.on('close-modal', this.onCloseContainer, this); }; diff --git a/public/js/icinga/behavior/expandable.js b/public/js/icinga/behavior/expandable.js deleted file mode 100644 index c7156e96a..000000000 --- a/public/js/icinga/behavior/expandable.js +++ /dev/null @@ -1,47 +0,0 @@ -/* Icinga Web 2 | (c) 2017 Icinga Development Team | GPLv2+ */ - -/** - * Icinga.Behavior.Expandable - * - * Initially collapsed, but expandable content - */ -(function(Icinga, $) { - - 'use strict'; - - var expandedExpandables = {}; - - function Expandable(icinga) { - Icinga.EventListener.call(this, icinga); - - this.on('rendered', this.onRendered, this); - this.on('click', this.onClick, this); - } - - Expandable.prototype = new Icinga.EventListener(); - - Expandable.prototype.onRendered = function(event) { - $(event.target).find('.expandable-toggle').each(function() { - var $this = $(this); - - if (typeof expandedExpandables['#' + $this.attr('id')] !== 'undefined') { - $this.prop('checked', true); - } - }); - }; - - Expandable.prototype.onClick = function(event) { - var $expandableToggle = $(event.target); - - if ($expandableToggle.prop('checked')) { - expandedExpandables['#' + $expandableToggle.attr('id')] = null; - } else { - delete expandedExpandables['#' + $expandableToggle.attr('id')]; - } - }; - - Icinga.Behaviors = Icinga.Behaviors || {}; - - Icinga.Behaviors.Expandable = Expandable; - -}) (Icinga, jQuery); diff --git a/public/js/icinga/behavior/filtereditor.js b/public/js/icinga/behavior/filtereditor.js index 9bdd17144..ffcad0110 100644 --- a/public/js/icinga/behavior/filtereditor.js +++ b/public/js/icinga/behavior/filtereditor.js @@ -15,13 +15,18 @@ function FilterEditor(icinga) { Icinga.EventListener.call(this, icinga); - this.on('beforerender', this.beforeRender, this); - this.on('rendered', this.onRendered, this); + this.on('beforerender', '#main > .container', this.beforeRender, this); + this.on('rendered', '#main > .container', this.onRendered, this); } FilterEditor.prototype = new Icinga.EventListener(); FilterEditor.prototype.beforeRender = function(event) { + if (event.currentTarget !== event.target) { + // Nested containers are ignored + return; + } + var $container = $(event.target); var match = containerId.exec($container.attr('id')); @@ -39,6 +44,11 @@ }; FilterEditor.prototype.onRendered = function(event) { + if (event.currentTarget !== event.target) { + // Nested containers are ignored + return; + } + var $container = $(event.target); var match = containerId.exec($container.attr('id')); diff --git a/public/js/icinga/behavior/flyover.js b/public/js/icinga/behavior/flyover.js index 67686138f..931b300bc 100644 --- a/public/js/icinga/behavior/flyover.js +++ b/public/js/icinga/behavior/flyover.js @@ -14,7 +14,7 @@ function Flyover(icinga) { Icinga.EventListener.call(this, icinga); - this.on('rendered', this.onRendered, this); + this.on('rendered', '#main > .container', this.onRendered, this); this.on('click', this.onClick, this); this.on('click', '.flyover-toggle', this.onClickFlyoverToggle, this); } diff --git a/public/js/icinga/behavior/input-enrichment.js b/public/js/icinga/behavior/input-enrichment.js index 824afffc1..58df5e6c2 100644 --- a/public/js/icinga/behavior/input-enrichment.js +++ b/public/js/icinga/behavior/input-enrichment.js @@ -27,8 +27,8 @@ var InputEnrichment = function (icinga) { Icinga.EventListener.call(this, icinga); - this.on('beforerender', this.onBeforeRender, this); - this.on('rendered', this.onRendered, this); + this.on('beforerender', '#main > .container, #modal-content', this.onBeforeRender, this); + this.on('rendered', '#main > .container, #modal-content', this.onRendered, this); /** * Enriched inputs