Commit 7d2f3a3b authored by alexpott's avatar alexpott

Issue #2946603 by drpal, alexpott, dawehner: JS codestyle: no-use-before-define

parent 8b5cbee4
{
"extends": "./.eslintrc.json",
"rules": {
"no-use-before-define": "off",
"no-shadow": "off",
"no-new": "off",
"no-continue": "off",
......
......@@ -122,6 +122,9 @@
response(suggestions);
}
// Get the desired term and construct the autocomplete URL for it.
const term = autocomplete.extractLastTerm(request.term);
/**
* Transforms the data object into an array and update autocomplete results.
*
......@@ -135,9 +138,6 @@
showSuggestions(data);
}
// Get the desired term and construct the autocomplete URL for it.
const term = autocomplete.extractLastTerm(request.term);
// Check if the term is already cached.
if (autocomplete.cache[elementId].hasOwnProperty(term)) {
showSuggestions(autocomplete.cache[elementId][term]);
......
......@@ -73,14 +73,14 @@
response(suggestions);
}
var term = autocomplete.extractLastTerm(request.term);
function sourceCallbackHandler(data) {
autocomplete.cache[elementId][term] = data;
showSuggestions(data);
}
var term = autocomplete.extractLastTerm(request.term);
if (autocomplete.cache[elementId].hasOwnProperty(term)) {
showSuggestions(autocomplete.cache[elementId][term]);
} else {
......
......@@ -65,13 +65,6 @@
const dialog = {
open: false,
returnValue: undef,
show() {
openDialog({ modal: false });
},
showModal() {
openDialog({ modal: true });
},
close: closeDialog,
};
function openDialog(settings) {
......@@ -91,6 +84,14 @@
$(window).trigger('dialog:afterclose', [dialog, $element]);
}
dialog.show = () => {
openDialog({ modal: false });
};
dialog.showModal = () => {
openDialog({ modal: true });
};
dialog.close = closeDialog;
return dialog;
};
}(jQuery, Drupal, drupalSettings));
......@@ -23,15 +23,7 @@
var $element = $(element);
var dialog = {
open: false,
returnValue: undef,
show: function show() {
openDialog({ modal: false });
},
showModal: function showModal() {
openDialog({ modal: true });
},
close: closeDialog
returnValue: undef
};
function openDialog(settings) {
......@@ -51,6 +43,14 @@
$(window).trigger('dialog:afterclose', [dialog, $element]);
}
dialog.show = function () {
openDialog({ modal: false });
};
dialog.showModal = function () {
openDialog({ modal: true });
};
dialog.close = closeDialog;
return dialog;
};
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
......@@ -13,6 +13,31 @@
// autoResize option will turn off resizable and draggable.
drupalSettings.dialog = $.extend({ autoResize: true, maxHeight: '95%' }, drupalSettings.dialog);
/**
* Position the dialog's center at the center of displace.offsets boundaries.
*
* @function Drupal.dialog~resetPosition
*
* @param {object} options
* Options object.
*
* @return {object}
* Altered options object.
*/
function resetPosition(options) {
const offsets = displace.offsets;
const left = offsets.left - offsets.right;
const top = offsets.top - offsets.bottom;
const leftString = `${(left > 0 ? '+' : '-') + Math.abs(Math.round(left / 2))}px`;
const topString = `${(top > 0 ? '+' : '-') + Math.abs(Math.round(top / 2))}px`;
options.position = {
my: `center${left !== 0 ? leftString : ''} center${top !== 0 ? topString : ''}`,
of: window,
};
return options;
}
/**
* Resets the current options for positioning.
*
......@@ -61,31 +86,6 @@
.trigger('dialogContentResize');
}
/**
* Position the dialog's center at the center of displace.offsets boundaries.
*
* @function Drupal.dialog~resetPosition
*
* @param {object} options
* Options object.
*
* @return {object}
* Altered options object.
*/
function resetPosition(options) {
const offsets = displace.offsets;
const left = offsets.left - offsets.right;
const top = offsets.top - offsets.bottom;
const leftString = `${(left > 0 ? '+' : '-') + Math.abs(Math.round(left / 2))}px`;
const topString = `${(top > 0 ? '+' : '-') + Math.abs(Math.round(top / 2))}px`;
options.position = {
my: `center${left !== 0 ? leftString : ''} center${top !== 0 ? topString : ''}`,
of: window,
};
return options;
}
$(window).on({
'dialog:aftercreate': function (event, dialog, $element, settings) {
const autoResize = debounce(resetSize, 20);
......
......@@ -8,6 +8,20 @@
(function ($, Drupal, drupalSettings, debounce, displace) {
drupalSettings.dialog = $.extend({ autoResize: true, maxHeight: '95%' }, drupalSettings.dialog);
function resetPosition(options) {
var offsets = displace.offsets;
var left = offsets.left - offsets.right;
var top = offsets.top - offsets.bottom;
var leftString = (left > 0 ? '+' : '-') + Math.abs(Math.round(left / 2)) + 'px';
var topString = (top > 0 ? '+' : '-') + Math.abs(Math.round(top / 2)) + 'px';
options.position = {
my: 'center' + (left !== 0 ? leftString : '') + ' center' + (top !== 0 ? topString : ''),
of: window
};
return options;
}
function resetSize(event) {
var positionOptions = ['width', 'height', 'minWidth', 'minHeight', 'maxHeight', 'maxWidth', 'position'];
var adjustedOptions = {};
......@@ -37,20 +51,6 @@
event.data.$element.dialog('option', adjustedOptions).trigger('dialogContentResize');
}
function resetPosition(options) {
var offsets = displace.offsets;
var left = offsets.left - offsets.right;
var top = offsets.top - offsets.bottom;
var leftString = (left > 0 ? '+' : '-') + Math.abs(Math.round(left / 2)) + 'px';
var topString = (top > 0 ? '+' : '-') + Math.abs(Math.round(top / 2)) + 'px';
options.position = {
my: 'center' + (left !== 0 ? leftString : '') + ' center' + (top !== 0 ? topString : ''),
of: window
};
return options;
}
$(window).on({
'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) {
var autoResize = debounce(resetSize, 20);
......
......@@ -38,64 +38,56 @@
};
/**
* Registers a resize handler on the window.
*
* @type {Drupal~behavior}
*/
Drupal.behaviors.drupalDisplace = {
attach() {
// Mark this behavior as processed on the first pass.
if (this.displaceProcessed) {
return;
}
this.displaceProcessed = true;
$(window).on('resize.drupalDisplace', debounce(displace, 200));
},
};
/**
* Informs listeners of the current offset dimensions.
*
* @function Drupal.displace
*
* @prop {Drupal~displaceOffset} offsets
* Calculates displacement for element based on its dimensions and placement.
*
* @param {bool} [broadcast]
* When true or undefined, causes the recalculated offsets values to be
* broadcast to listeners.
* @param {HTMLElement} el
* The jQuery element whose dimensions and placement will be measured.
*
* @return {Drupal~displaceOffset}
* An object whose keys are the for sides an element -- top, right, bottom
* and left. The value of each key is the viewport displacement distance for
* that edge.
* @param {string} edge
* The name of the edge of the viewport that the element is associated
* with.
*
* @fires event:drupalViewportOffsetChange
* @return {number}
* The viewport displacement distance for the requested edge.
*/
function displace(broadcast) {
offsets = calculateOffsets();
Drupal.displace.offsets = offsets;
if (typeof broadcast === 'undefined' || broadcast) {
$(document).trigger('drupalViewportOffsetChange', offsets);
}
return offsets;
}
function getRawOffset(el, edge) {
const $el = $(el);
const documentElement = document.documentElement;
let displacement = 0;
const horizontal = (edge === 'left' || edge === 'right');
// Get the offset of the element itself.
let placement = $el.offset()[horizontal ? 'left' : 'top'];
// Subtract scroll distance from placement to get the distance
// to the edge of the viewport.
placement -= window[`scroll${horizontal ? 'X' : 'Y'}`] || document.documentElement[`scroll${horizontal ? 'Left' : 'Top'}`] || 0;
// Find the displacement value according to the edge.
switch (edge) {
// Left and top elements displace as a sum of their own offset value
// plus their size.
case 'top':
// Total displacement is the sum of the elements placement and size.
displacement = placement + $el.outerHeight();
break;
/**
* Determines the viewport offsets.
*
* @return {Drupal~displaceOffset}
* An object whose keys are the for sides an element -- top, right, bottom
* and left. The value of each key is the viewport displacement distance for
* that edge.
*/
function calculateOffsets() {
return {
top: calculateOffset('top'),
right: calculateOffset('right'),
bottom: calculateOffset('bottom'),
left: calculateOffset('left'),
};
case 'left':
// Total displacement is the sum of the elements placement and size.
displacement = placement + $el.outerWidth();
break;
// Right and bottom elements displace according to their left and
// top offset. Their size isn't important.
case 'bottom':
displacement = documentElement.clientHeight - placement;
break;
case 'right':
displacement = documentElement.clientWidth - placement;
break;
default:
displacement = 0;
}
return displacement;
}
/**
......@@ -142,58 +134,66 @@
}
/**
* Calculates displacement for element based on its dimensions and placement.
* Determines the viewport offsets.
*
* @param {HTMLElement} el
* The jQuery element whose dimensions and placement will be measured.
* @return {Drupal~displaceOffset}
* An object whose keys are the for sides an element -- top, right, bottom
* and left. The value of each key is the viewport displacement distance for
* that edge.
*/
function calculateOffsets() {
return {
top: calculateOffset('top'),
right: calculateOffset('right'),
bottom: calculateOffset('bottom'),
left: calculateOffset('left'),
};
}
/**
* Informs listeners of the current offset dimensions.
*
* @param {string} edge
* The name of the edge of the viewport that the element is associated
* with.
* @function Drupal.displace
*
* @return {number}
* The viewport displacement distance for the requested edge.
* @prop {Drupal~displaceOffset} offsets
*
* @param {bool} [broadcast]
* When true or undefined, causes the recalculated offsets values to be
* broadcast to listeners.
*
* @return {Drupal~displaceOffset}
* An object whose keys are the for sides an element -- top, right, bottom
* and left. The value of each key is the viewport displacement distance for
* that edge.
*
* @fires event:drupalViewportOffsetChange
*/
function getRawOffset(el, edge) {
const $el = $(el);
const documentElement = document.documentElement;
let displacement = 0;
const horizontal = (edge === 'left' || edge === 'right');
// Get the offset of the element itself.
let placement = $el.offset()[horizontal ? 'left' : 'top'];
// Subtract scroll distance from placement to get the distance
// to the edge of the viewport.
placement -= window[`scroll${horizontal ? 'X' : 'Y'}`] || document.documentElement[`scroll${horizontal ? 'Left' : 'Top'}`] || 0;
// Find the displacement value according to the edge.
switch (edge) {
// Left and top elements displace as a sum of their own offset value
// plus their size.
case 'top':
// Total displacement is the sum of the elements placement and size.
displacement = placement + $el.outerHeight();
break;
case 'left':
// Total displacement is the sum of the elements placement and size.
displacement = placement + $el.outerWidth();
break;
// Right and bottom elements displace according to their left and
// top offset. Their size isn't important.
case 'bottom':
displacement = documentElement.clientHeight - placement;
break;
case 'right':
displacement = documentElement.clientWidth - placement;
break;
default:
displacement = 0;
function displace(broadcast) {
offsets = calculateOffsets();
Drupal.displace.offsets = offsets;
if (typeof broadcast === 'undefined' || broadcast) {
$(document).trigger('drupalViewportOffsetChange', offsets);
}
return displacement;
return offsets;
}
/**
* Registers a resize handler on the window.
*
* @type {Drupal~behavior}
*/
Drupal.behaviors.drupalDisplace = {
attach() {
// Mark this behavior as processed on the first pass.
if (this.displaceProcessed) {
return;
}
this.displaceProcessed = true;
$(window).on('resize.drupalDisplace', debounce(displace, 200));
},
};
/**
* Assign the displace function to a property of the Drupal global object.
*
......
......@@ -13,58 +13,6 @@
left: 0
};
Drupal.behaviors.drupalDisplace = {
attach: function attach() {
if (this.displaceProcessed) {
return;
}
this.displaceProcessed = true;
$(window).on('resize.drupalDisplace', debounce(displace, 200));
}
};
function displace(broadcast) {
offsets = calculateOffsets();
Drupal.displace.offsets = offsets;
if (typeof broadcast === 'undefined' || broadcast) {
$(document).trigger('drupalViewportOffsetChange', offsets);
}
return offsets;
}
function calculateOffsets() {
return {
top: calculateOffset('top'),
right: calculateOffset('right'),
bottom: calculateOffset('bottom'),
left: calculateOffset('left')
};
}
function calculateOffset(edge) {
var edgeOffset = 0;
var displacingElements = document.querySelectorAll('[data-offset-' + edge + ']');
var n = displacingElements.length;
for (var i = 0; i < n; i++) {
var el = displacingElements[i];
if (el.style.display === 'none') {
continue;
}
var displacement = parseInt(el.getAttribute('data-offset-' + edge), 10);
if (isNaN(displacement)) {
displacement = getRawOffset(el, edge);
}
edgeOffset = Math.max(edgeOffset, displacement);
}
return edgeOffset;
}
function getRawOffset(el, edge) {
var $el = $(el);
var documentElement = document.documentElement;
......@@ -98,6 +46,58 @@
return displacement;
}
function calculateOffset(edge) {
var edgeOffset = 0;
var displacingElements = document.querySelectorAll('[data-offset-' + edge + ']');
var n = displacingElements.length;
for (var i = 0; i < n; i++) {
var el = displacingElements[i];
if (el.style.display === 'none') {
continue;
}
var displacement = parseInt(el.getAttribute('data-offset-' + edge), 10);
if (isNaN(displacement)) {
displacement = getRawOffset(el, edge);
}
edgeOffset = Math.max(edgeOffset, displacement);
}
return edgeOffset;
}
function calculateOffsets() {
return {
top: calculateOffset('top'),
right: calculateOffset('right'),
bottom: calculateOffset('bottom'),
left: calculateOffset('left')
};
}
function displace(broadcast) {
offsets = calculateOffsets();
Drupal.displace.offsets = offsets;
if (typeof broadcast === 'undefined' || broadcast) {
$(document).trigger('drupalViewportOffsetChange', offsets);
}
return offsets;
}
Drupal.behaviors.drupalDisplace = {
attach: function attach() {
if (this.displaceProcessed) {
return;
}
this.displaceProcessed = true;
$(window).on('resize.drupalDisplace', debounce(displace, 200));
}
};
Drupal.displace = displace;
$.extend(Drupal.displace, {
offsets: offsets,
......
......@@ -4,45 +4,6 @@
*/
(function ($, Drupal) {
/**
* Process elements with the .dropbutton class on page load.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
* Attaches dropButton behaviors.
*/
Drupal.behaviors.dropButton = {
attach(context, settings) {
const $dropbuttons = $(context).find('.dropbutton-wrapper').once('dropbutton');
if ($dropbuttons.length) {
// Adds the delegated handler that will toggle dropdowns on click.
const $body = $('body').once('dropbutton-click');
if ($body.length) {
$body.on('click', '.dropbutton-toggle', dropbuttonClickHandler);
}
// Initialize all buttons.
const il = $dropbuttons.length;
for (let i = 0; i < il; i++) {
DropButton.dropbuttons.push(new DropButton($dropbuttons[i], settings.dropbutton));
}
}
},
};
/**
* Delegated callback for opening and closing dropbutton secondary actions.
*
* @function Drupal.DropButton~dropbuttonClickHandler
*
* @param {jQuery.Event} e
* The event triggered.
*/
function dropbuttonClickHandler(e) {
e.preventDefault();
$(e.target).closest('.dropbutton-wrapper').toggleClass('open');
}
/**
* A DropButton presents an HTML list as a button with a primary action.
*
......@@ -127,6 +88,45 @@
}
}
/**
* Delegated callback for opening and closing dropbutton secondary actions.
*
* @function Drupal.DropButton~dropbuttonClickHandler
*
* @param {jQuery.Event} e
* The event triggered.
*/
function dropbuttonClickHandler(e) {
e.preventDefault();
$(e.target).closest('.dropbutton-wrapper').toggleClass('open');
}
/**
* Process elements with the .dropbutton class on page load.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach