From d7d31d00ea3ee337915241d5c047ab320f3d29f5 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Mon, 7 Feb 2022 14:11:48 +0100 Subject: [PATCH 1/8] Drop expandable.js --- doc/80-Upgrading.md | 2 ++ library/Icinga/Web/JavaScript.php | 1 - public/css/icinga/widgets.less | 45 ----------------------- public/js/icinga/behavior/expandable.js | 47 ------------------------- 4 files changed, 2 insertions(+), 93 deletions(-) delete mode 100644 public/js/icinga/behavior/expandable.js 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/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); From 30326dd1bbd218de0239fc634c60ac7b8bb7f3f6 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Mon, 7 Feb 2022 14:12:08 +0100 Subject: [PATCH 2/8] actiontable.js: Only handle top-level containers --- public/js/icinga/behavior/actiontable.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) 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')); From f932a4a44c64df16663a6db8841ec32000b1a396 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Mon, 7 Feb 2022 14:12:44 +0100 Subject: [PATCH 3/8] application-state.js: Only run once when the layout is rendered --- public/js/icinga/behavior/application-state.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) 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 From 29d0b8f2c75e5b89ab9c0b974f468cdff8e93656 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Mon, 7 Feb 2022 14:13:12 +0100 Subject: [PATCH 4/8] collapsible.js: Only handle content inside top-level or modal containers --- public/js/icinga/behavior/collapsible.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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); From 67da4ea757ff0cf98bdae71037b7961a158e1b54 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Mon, 7 Feb 2022 14:13:40 +0100 Subject: [PATCH 5/8] datetime-picker.js: Only handle content inside top-level or modal containers --- public/js/icinga/behavior/datetime-picker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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); }; From b03966c3548f4a13ea947b75ee13cf4c842811da Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Mon, 7 Feb 2022 14:14:10 +0100 Subject: [PATCH 6/8] filtereditor.js: Only handle top-level containers --- public/js/icinga/behavior/filtereditor.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) 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')); From 646d8928c391f3bb0536fd0375f48372d4c9b9eb Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Mon, 7 Feb 2022 14:14:43 +0100 Subject: [PATCH 7/8] flyover.js: Only handle content inside top-level containers --- public/js/icinga/behavior/flyover.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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); } From 57dc42dbf755b2ba702896e127d5e77cc21d5bb2 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Mon, 7 Feb 2022 14:15:23 +0100 Subject: [PATCH 8/8] input-enrichment.js: Only handle content inside top-level or modal containers --- public/js/icinga/behavior/input-enrichment.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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