123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207 |
- /**
- * @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);
|