/** * Helper class for InputfieldSubmit to support dropdown items for the submit button * * ProcessWire 3.x, Copyright 2015 by Ryan Cramer * https://processwire.com * License: MPL 2.0 * */ var InputfieldSubmitDropdown = { itemClicked: false, /** * Click event for dropdown item * * @returns {boolean} * */ click: function() { var $a = $(this); var href = $a.attr('href'); var $dropdown = $a.closest('.pw-button-dropdown'); var $button; var $input = null; if(!$dropdown.length) return true; $button = $dropdown.data('pw-button'); InputfieldSubmitDropdown.itemClicked = true; if($a.hasClass('pw-button-dropdown-default')) { // just click the button } else { var value = $a.attr('data-pw-dropdown-value'); var selector = $dropdown.attr('data-pw-dropdown-input'); var dropdownSubmit = 1; if(!value) return true; if(selector) { // populate a hidden input with dropdown value $input = $(selector); if(!$input.length) return true; $input.val(value); } else if(href.length > 1) { // link to URL return true; } // populate button 'value' attribute if($button) { if($input) { // attribute data-pw-dropdown-submit on the hidden input indicates if selected dropdown // value should become submit value in addition to populating the hidden input dropdownSubmit = $input.attr('data-pw-dropdown-submit'); dropdownSubmit = typeof dropdownSubmit == "undefined" ? 0 : parseInt(dropdownSubmit); } if(dropdownSubmit > 0) $button.attr('value', value); } } if(!$button) return true; // if any inputs are currently focused, blur them $(":input:focus").trigger('blur'); // click the button $button.trigger('click'); InputfieldSubmitDropdown.itemClicked = false; return false; }, /** * Counter for tracking quantity of dropdowns * */ dropdownCnt: 0, /** * Initialize the given dropdown * * @param $dropdown An instance of ul.pw-button-dropdown * @param $mainButton An instance of button * @param bool required * */ initDropdown: function($dropdown, $mainButton, required) { var $toggleButton = $("") .attr('id', 'pw-dropdown-toggle-' + $mainButton.attr('id')); $mainButton.after($toggleButton); $toggleButton.button(); var $dropdownTemplate = null; if($dropdown.hasClass('pw-button-dropdown-template')) { $dropdownTemplate = $dropdown; $dropdown = $dropdownTemplate.clone(); $dropdownTemplate.hide(); } InputfieldSubmitDropdown.dropdownCnt++; var dropdownCntClass = 'pw-button-dropdown-' + InputfieldSubmitDropdown.dropdownCnt; $dropdown.addClass('pw-dropdown-menu pw-dropdown-menu-rounded pw-button-dropdown-init ' + dropdownCntClass); $dropdown.data('pw-button', $mainButton); var $buttonText = $mainButton.find('.ui-button-text'); var labelText = $buttonText.text().trim(); var labelHTML = $buttonText.html(); $dropdown.find('a').each(function() { var $a = $(this); if($dropdownTemplate) { var html = $a.html(); if(html.indexOf('%s') > -1) $a.html(html.replace('%s', labelText)); } $a.on('click', InputfieldSubmitDropdown.click); }); $mainButton.addClass('pw-button-dropdown-main'); $toggleButton.after($dropdown) .addClass('pw-dropdown-toggle-click pw-dropdown-toggle pw-button-dropdown-toggle') .attr('data-pw-dropdown', '.' + dropdownCntClass); if($mainButton.hasClass('ui-priority-secondary')) $toggleButton.addClass('ui-priority-secondary'); if($mainButton.hasClass('pw-head-button')) $toggleButton.addClass('pw-head-button'); $toggleButton.on('click', function() { return false; }).on('pw-button-dropdown-off', function() { $(this).siblings('.pw-button-dropdown-main') .removeClass('pw-button-dropdown-main') .addClass('pw-button-dropdown-disabled'); $(this).hide(); }).on('pw-button-dropdown-on', function() { $(this).siblings('.pw-button-dropdown-disabled') .addClass('pw-button-dropdown-main') .removeClass('pw-button-dropdown-disabled') $(this).show(); }); if(required) { $mainButton.addClass('pw-button-dropdown-required'); // make a click on the main button open/close the dropdown $mainButton.on('click', function() { if(InputfieldSubmitDropdown.itemClicked) { return true; } else { $toggleButton.mousedown(); return false; } }); } }, /** * Initialize button(s) to dropdown * * @param buttonSelector String selector to find button(s) or jQuery object of button instances * @param $dropdownTemplate Optionally specify template to use (for cases where multiple buttons share same dropdown) * @param bool required Dropdown selection required? (i.e. clicking submit opens dropdown) * @returns {boolean} False if dropdowns not setup, true if they were * */ init: function(buttonSelector, $dropdownTemplate, required) { if(typeof $dropdownTemplate === "undefined") $dropdownTemplate = null; if(typeof required === "undefined") required = false; // don't use dropdowns when in modal window if($('body').hasClass('modal')) { $("ul.pw-button-dropdown").hide(); return false; } var $buttons = (typeof buttonSelector == "string") ? $(buttonSelector) : buttonSelector; $buttons.each(function() { var $button = $(this); if($dropdownTemplate !== null) { $dropdownTemplate.addClass('pw-button-dropdown-template'); InputfieldSubmitDropdown.initDropdown($dropdownTemplate, $button, required); } else { var $dropdown = $('#' + $(this).prop('id') + '_dropdown'); if($dropdown.length) InputfieldSubmitDropdown.initDropdown($dropdown, $button, required); } }); return true; } }