/**
* select element for the page controller condition
- * @var jQuery
+ * @var jQuery[]
*/
- _pageControllers: null,
+ _pageInputs: [],
/**
* Initializes a new WCF.ACP.Ad.LocationHandler object.
*/
init: function() {
this._pageConditions = $('#pageConditions');
- this._pageControllers = $('#pageControllers');
+ this._pageInputs = $('input[name="pageIDs[]"]');
- var $dl = this._pageControllers.parents('dl:eq(0)');
+ var dl = $(this._pageInputs[0]).parents('dl:eq(0)');
// hide the page controller element
- $dl.hide();
+ dl.hide();
- var $fieldset = $dl.parent('fieldset');
- if (!$fieldset.children('dl:visible').length) {
- $fieldset.hide();
+ var section = dl.parent('section');
+ if (!section.children('dl:visible').length) {
+ section.hide();
}
- var $nextFieldset = $fieldset.next('fieldset');
- if ($nextFieldset) {
- $nextFieldset.data('margin-top', $nextFieldset.css('margin-top'));
- $nextFieldset.css('margin-top', 0);
+ var nextSection = section.next('section');
+ if (nextSection) {
+ var marginTop = nextSection.css('margin-top');
+ nextSection.css('margin-top', 0);
+
+ require(['EventHandler'], function(EventHandler) {
+ EventHandler.add('com.woltlab.wcf.pageConditionDependence', 'checkVisivility', function() {
+ if (section.is(':visible')) {
+ nextSection.css('margin-top', marginTop);
+ }
+ else {
+ nextSection.css('margin-top', 0);
+ }
+ });
+ });
}
// fix the margin of a potentially next page condition element
- $dl.next('dl').css('margin-top', 0);
+ dl.next('dl').css('margin-top', 0);
$('#objectTypeID').on('change', $.proxy(this._setPageController, this));
* Sets the page controller based on the selected ad location.
*/
_setPageController: function() {
- var $option = $('#objectTypeID').find('option:checked');
+ var option = $('#objectTypeID').find('option:checked');
- // check if the selected ad location is bound to a specific page
- if ($option.data('page')) {
+ require(['Core'], function(Core) {
+ var input, triggerEvent;
+
// select the related page
- this._pageControllers.val([this._pageControllers.find('option[data-object-type="' + $option.data('page') + '"]').val()]).change();
- }
- else {
- this._pageControllers.val([]).change();
- }
+ for (var i = 0, length = this._pageInputs.length; i < length; i++) {
+ input = this._pageInputs[i];
+ triggerEvent = false;
+
+ if (option.data('page') && elData(input, 'identifier') === option.data('page')) {
+ if (!input.checked) triggerEvent = true;
+
+ input.checked = true;
+ }
+ else {
+ if (input.checked) triggerEvent = true;
+
+ input.checked = false;
+ }
+
+ if (triggerEvent) Core.triggerEvent(this._pageInputs[i], 'change');
+ }
+ }.bind(this));
},
/**
else {
// reset page controller conditions to avoid creation of
// unnecessary conditions
- this._pageControllers.val([]);
+ for (var i = 0, length = this._pageInputs.length; i < length; i++) {
+ this._pageInputs[i].checked = false;
+ }
}
}
});
* @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
* @module WoltLab/WCF/Controller/Condition/Page/Dependence
*/
-define(['Dom/Traverse'], function(DomTraverse) {
+define(['Dom/ChangeListener', 'Dom/Traverse', 'EventHandler', 'ObjectMap'], function(DomChangeListener, DomTraverse, EventHandler, ObjectMap) {
"use strict";
var _pages = elBySelAll('input[name="pageIDs[]"]');
+ var _dependentElements = [];
+ var _pageIds = new ObjectMap();
+ var _hiddenElements = new ObjectMap();
- /**
- * @constructor
- */
- function ControllerConditionPageDependence(dependentElement, pageIds) {
- this._dependentElement = dependentElement;
- this._pageIds = pageIds;
-
- for (var i = 0, length = _pages.length; i < length; i++) {
- _pages[i].addEventListener('change', this._checkVisibility.bind(this));
- }
-
- // remove the dependent element before submit if it is hidden
- DomTraverse.parentByTag(this._dependentElement, 'FORM').addEventListener('submit', function() {
- if (this._dependentElement.style.getPropertyValue('display') === 'none') {
- this._dependentElement.remove();
+ var _didInit = false;
+
+ return {
+ register: function(dependentElement, pageIds) {
+ _dependentElements.push(dependentElement);
+ _pageIds.set(dependentElement, pageIds);
+ _hiddenElements.set(dependentElement, []);
+
+ if (!_didInit) {
+ for (var i = 0, length = _pages.length; i < length; i++) {
+ _pages[i].addEventListener('change', this._checkVisibility.bind(this));
+ }
+
+ _didInit = true;
}
- }.bind(this));
+
+ // remove the dependent element before submit if it is hidden
+ DomTraverse.parentByTag(dependentElement, 'FORM').addEventListener('submit', function() {
+ if (dependentElement.style.getPropertyValue('display') === 'none') {
+ dependentElement.remove();
+ }
+ });
+
+ this._checkVisibility();
+ },
- this._checkVisibility();
- };
- ControllerConditionPageDependence.prototype = {
/**
* Checks if any of the relevant pages is selected. If that is the case, the dependent
* element is shown, otherwise it is hidden.
* @private
*/
_checkVisibility: function() {
- var page;
- for (var i = 0, length = _pages.length; i < length; i++) {
- page = _pages[i];
+ var dependentElement, page, pageIds;
+
+ depenentElementLoop: for (var i = 0, length = _dependentElements.length; i < length; i++) {
+ dependentElement = _dependentElements[i];
+ pageIds = _pageIds.get(dependentElement);
- if (page.checked && this._pageIds.indexOf(~~page.value) !== -1) {
- elShow(this._dependentElement);
- return;
+ for (var j = 0, length2 = _pages.length; j < length2; j++) {
+ page = _pages[j];
+
+ if (page.checked && pageIds.indexOf(~~page.value) !== -1) {
+ this._showDependentElement(dependentElement);
+
+ continue depenentElementLoop;
+ }
}
+
+ this._hideDependentElement(dependentElement);
+ }
+
+ EventHandler.fire('com.woltlab.wcf.pageConditionDependence', 'checkVisivility');
+ },
+
+ _hideDependentElement: function(dependentElement) {
+ elHide(dependentElement);
+
+ var hiddenElements = _hiddenElements.get(dependentElement);
+ for (var i = 0, length = hiddenElements.length; i < length; i++) {
+ elHide(hiddenElements[i]);
}
- elHide(this._dependentElement);
+ _hiddenElements.set(dependentElement, [])
+ },
+
+ _showDependentElement: function(dependentElement) {
+ elShow(dependentElement);
+
+ // make sure that all parent elements are also visible
+ var parentNode = dependentElement;
+ while ((parentNode = parentNode.parentNode) && parentNode instanceof Element) {
+ if (parentNode.style.getPropertyValue('display') === 'none') {
+ _hiddenElements.get(dependentElement).push(parentNode);
+ }
+
+ elShow(parentNode);
+ }
}
};