artabro/wire/modules/Inputfield/InputfieldSubmit/dropdown.js

201 lines
5.7 KiB
JavaScript
Raw Normal View History

2024-08-27 11:35:37 +02:00
/**
* 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 = $("<button type='button'><i class='fa fa-angle-down'></i></button>")
.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;
}
}