Merge pull request #4657 from Icinga/fix/always-running-behaviors-3795

Fix always running behaviors

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
 

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',

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;
 }

public/js/icinga/behavior/actiontable.js

@@ -348,8 +348,8 @@
          */
         this.loading = false;
 
-        this.on('rendered', this.onRendered, this);
+        this.on('rendered', '#main > .container', this.onRendered, this);
-        this.on('beforerender', this.beforeRender, 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'));

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

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);
 

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);
     };

public/js/icinga/behavior/expandable.js

@@ -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);

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('beforerender', '#main > .container', this.beforeRender, this);
-        this.on('rendered', this.onRendered, 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'));
 

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);
     }

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('beforerender', '#main > .container, #modal-content', this.onBeforeRender, this);
-        this.on('rendered', this.onRendered, this);
+        this.on('rendered', '#main > .container, #modal-content', this.onRendered, this);
 
         /**
          * Enriched inputs