208 lines
6.3 KiB
JavaScript
208 lines
6.3 KiB
JavaScript
/**
|
|
* @file
|
|
* Javascript enhancements for the Search API admin pages.
|
|
*/
|
|
|
|
(function ($) {
|
|
|
|
/**
|
|
* Allows the re-ordering of enabled data alterations and processors.
|
|
*/
|
|
// Copied from filter.admin.js
|
|
Drupal.behaviors.searchApiStatus = {
|
|
attach: function (context, settings) {
|
|
$('.search-api-status-wrapper input.form-checkbox', context).once('search-api-status', function () {
|
|
var $checkbox = $(this);
|
|
// Retrieve the tabledrag row belonging to this processor.
|
|
var $row = $('#' + $checkbox.attr('id').replace(/-status$/, '-weight'), context).closest('tr');
|
|
// Retrieve the vertical tab belonging to this processor.
|
|
var $tab = $('#' + $checkbox.attr('id').replace(/-status$/, '-settings'), context).data('verticalTab');
|
|
|
|
// Bind click handler to this checkbox to conditionally show and hide the
|
|
// filter's tableDrag row and vertical tab pane.
|
|
$checkbox.bind('click.searchApiUpdate', function () {
|
|
if ($checkbox.is(':checked')) {
|
|
$row.show();
|
|
if ($tab) {
|
|
$tab.tabShow().updateSummary();
|
|
}
|
|
}
|
|
else {
|
|
$row.hide();
|
|
if ($tab) {
|
|
$tab.tabHide().updateSummary();
|
|
}
|
|
}
|
|
// Restripe table after toggling visibility of table row.
|
|
Drupal.tableDrag['search-api-' + $checkbox.attr('id').replace(/^edit-([^-]+)-.*$/, '$1') + '-order-table'].restripeTable();
|
|
});
|
|
|
|
// Attach summary for configurable items (only for screen-readers).
|
|
if ($tab) {
|
|
$tab.fieldset.drupalSetSummary(function (tabContext) {
|
|
return $checkbox.is(':checked') ? Drupal.t('Enabled') : Drupal.t('Disabled');
|
|
});
|
|
}
|
|
|
|
// Trigger our bound click handler to update elements to initial state.
|
|
$checkbox.triggerHandler('click.searchApiUpdate');
|
|
});
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Processes elements with the .dropbutton class on page load.
|
|
*/
|
|
Drupal.behaviors.searchApiDropButton = {
|
|
attach: function (context, settings) {
|
|
var $dropbuttons = $(context).find('.dropbutton-wrapper').once('dropbutton');
|
|
if ($dropbuttons.length) {
|
|
//$('.dropbutton-toggle', $dropbuttons).click(dropbuttonClickHandler);
|
|
// Initialize all buttons.
|
|
for (var i = 0, il = $dropbuttons.length; i < il; i++) {
|
|
DropButton.dropbuttons.push(new DropButton($dropbuttons[i], settings.dropbutton));
|
|
}
|
|
// Adds the delegated handler that will toggle dropdowns on click.
|
|
$('.dropbutton-toggle', $dropbuttons).click(dropbuttonClickHandler);
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Delegated callback for opening and closing dropbutton secondary actions.
|
|
*/
|
|
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.
|
|
*
|
|
* All secondary actions beyond the first in the list are presented in a
|
|
* dropdown list accessible through a toggle arrow associated with the button.
|
|
*
|
|
* @param {jQuery} dropbutton
|
|
* A jQuery element.
|
|
*
|
|
* @param {Object} settings
|
|
* A list of options including:
|
|
* - {String} title: The text inside the toggle link element. This text is
|
|
* hidden from visual UAs.
|
|
*/
|
|
function DropButton(dropbutton, settings) {
|
|
// Merge defaults with settings.
|
|
var options = $.extend({'title': Drupal.t('List additional actions')}, settings);
|
|
var $dropbutton = $(dropbutton);
|
|
this.$dropbutton = $dropbutton;
|
|
this.$list = $dropbutton.find('.dropbutton');
|
|
// Find actions and mark them.
|
|
this.$actions = this.$list.find('li').addClass('dropbutton-action');
|
|
|
|
// Add the special dropdown only if there are hidden actions.
|
|
if (this.$actions.length > 1) {
|
|
// Identify the first element of the collection.
|
|
var $primary = this.$actions.slice(0, 1);
|
|
// Identify the secondary actions.
|
|
var $secondary = this.$actions.slice(1);
|
|
$secondary.addClass('secondary-action');
|
|
// Add toggle link.
|
|
$primary.after(Drupal.theme('dropbuttonToggle', options));
|
|
// Bind mouse events.
|
|
this.$dropbutton
|
|
.addClass('dropbutton-multiple')
|
|
/**
|
|
* Adds a timeout to close the dropdown on mouseleave.
|
|
*/
|
|
.bind('mouseleave.dropbutton', $.proxy(this.hoverOut, this))
|
|
/**
|
|
* Clears timeout when mouseout of the dropdown.
|
|
*/
|
|
.bind('mouseenter.dropbutton', $.proxy(this.hoverIn, this))
|
|
/**
|
|
* Similar to mouseleave/mouseenter, but for keyboard navigation.
|
|
*/
|
|
.bind('focusout.dropbutton', $.proxy(this.focusOut, this))
|
|
.bind('focusin.dropbutton', $.proxy(this.focusIn, this));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Extend the DropButton constructor.
|
|
*/
|
|
$.extend(DropButton, {
|
|
/**
|
|
* Store all processed DropButtons.
|
|
*
|
|
* @type {Array}
|
|
*/
|
|
dropbuttons: []
|
|
});
|
|
|
|
/**
|
|
* Extend the DropButton prototype.
|
|
*/
|
|
$.extend(DropButton.prototype, {
|
|
/**
|
|
* Toggle the dropbutton open and closed.
|
|
*
|
|
* @param {Boolean} show
|
|
* (optional) Force the dropbutton to open by passing true or to close by
|
|
* passing false.
|
|
*/
|
|
toggle: function (show) {
|
|
var isBool = typeof show === 'boolean';
|
|
show = isBool ? show : !this.$dropbutton.hasClass('open');
|
|
this.$dropbutton.toggleClass('open', show);
|
|
},
|
|
|
|
hoverIn: function () {
|
|
// Clear any previous timer we were using.
|
|
if (this.timerID) {
|
|
window.clearTimeout(this.timerID);
|
|
}
|
|
},
|
|
|
|
hoverOut: function () {
|
|
// Wait half a second before closing.
|
|
this.timerID = window.setTimeout($.proxy(this, 'close'), 500);
|
|
},
|
|
|
|
open: function () {
|
|
this.toggle(true);
|
|
},
|
|
|
|
close: function () {
|
|
this.toggle(false);
|
|
},
|
|
|
|
focusOut: function (e) {
|
|
this.hoverOut.call(this, e);
|
|
},
|
|
|
|
focusIn: function (e) {
|
|
this.hoverIn.call(this, e);
|
|
}
|
|
});
|
|
|
|
$.extend(Drupal.theme, {
|
|
/**
|
|
* A toggle is an interactive element often bound to a click handler.
|
|
*
|
|
* @param {Object} options
|
|
* - {String} title: (optional) The HTML anchor title attribute and
|
|
* text for the inner span element.
|
|
*
|
|
* @return {String}
|
|
* A string representing a DOM fragment.
|
|
*/
|
|
dropbuttonToggle: function (options) {
|
|
return '<li class="dropbutton-toggle"><button type="button" role="button"><span class="dropbutton-arrow"><span class="visually-hidden">' + options.title + '</span></span></button></li>';
|
|
}
|
|
});
|
|
|
|
// Expose constructor in the public space.
|
|
Drupal.DropButton = DropButton;
|
|
|
|
})(jQuery);
|