mirror/processwire
1
0
Fork 0
mirror of https://github.com/processwire/processwire.git synced 2025-08-12 17:54:44 +02:00
Code Issues Releases Wiki Activity

Updates to InputfieldSubmit dropdown option to support a required state where there is no default action by just clicking the button, so you have to click a dropdown action

Browse Source
This commit is contained in:
Ryan Cramer
2021-06-04 14:35:57 -04:00
parent 8e9d2f80e8
commit 04e2de28f0
3 changed files with 45 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
wire/modules/Inputfield/InputfieldSubmit/InputfieldSubmit.module
View File

@@ -3,7 +3,7 @@
/**
* An Inputfield for handling "submit" buttons
*
* ProcessWire 3.x, Copyright 2019 by Ryan Cramer
* ProcessWire 3.x, Copyright 2021 by Ryan Cramer
* https://processwire.com
* License: MPL 2.0
*
@@ -12,6 +12,7 @@
* @property bool $small Whether or not button should be small, where supported (default=false).
* @property string $dropdownInputName Name of input to receive selected dropdown value (default='_action_value') #pw-internal
* @property bool $dropdownSubmit Selected dropdown value becomes submit value? (default=true) #pw-internal
* @property bool $dropdownRequired Require dropdown selection, when true, click submit without selection opens dropdown @since 3.0.180 #pw-internal
* @property string $html Button inner HTML label (default='') @since 3.0.134
* @property string $text Button inner TEXT label, if $html not provided. (default='') @since 3.0.134
* @property string $value Button value attribute and inner TEXT label, if $text it provided (default='Submit')
@@ -25,9 +26,9 @@ class InputfieldSubmit extends Inputfield {
return array(
'title' => 'Submit', // Module Title
'summary' => __('Form submit button', __FILE__), // Module Summary
'version' => 102,
'version' => 103,
'permanent' => true,
);
);
}
/**
@@ -69,6 +70,9 @@ class InputfieldSubmit extends Inputfield {
// Selected dropdown value becomes submit value? If set to false, then only the
// dropdownInputName above will contain the selected value
$this->set('dropdownSubmit', true);
// dropdown selection required? (when true, clicking submit without dropdown selection opens dropdown)
$this->set('dropdownRequired', false);
}
public function set($key, $value) {
@@ -168,8 +172,9 @@ class InputfieldSubmit extends Inputfield {
*
*/
public function ___render() {
$sanitizer = $this->wire()->sanitizer;
$attrs = $this->getAttributesString();
$icon = $this->icon ? $this->wire('sanitizer')->name($this->icon) : '';
$icon = $this->icon ? $sanitizer->name($this->icon) : '';
$icon = $icon ? wireIconMarkup($icon) . ' ' : '';
$buttonText = $this->getSetting('html'); // option for non-encoded button text
if(empty($buttonText)) {
@@ -178,7 +183,7 @@ class InputfieldSubmit extends Inputfield {
$buttonText = $this->entityEncode($buttonText);
}
$buttonText = $icon . $buttonText;
$textClass = $this->wire('sanitizer')->entities($this->getSetting('textClass'));
$textClass = $sanitizer->entities($this->getSetting('textClass'));
if(!empty($textClass)) $buttonText = "<span class='$textClass'>$buttonText</span>";
$out = "<button $attrs>$buttonText</button>";
if($this->getSetting('small')) $out = "<small>$out</small>";
@@ -196,7 +201,7 @@ class InputfieldSubmit extends Inputfield {
if($this->wire('input')->get('modal')) return '';
$config = $this->wire('config');
$config = $this->wire()->config;
$file = $config->debug ? 'dropdown.js' : 'dropdown.min.js';
$config->scripts->add($config->urls->InputfieldSubmit . $file);
$numValues = 0;
@@ -238,8 +243,9 @@ class InputfieldSubmit extends Inputfield {
$out = "<input $attr />" . str_replace("<ul ", "<ul data-pw-dropdown-input='#$inputID' ", $out);
}
$required = $this->dropdownRequired ? 'true' : 'false';
// script to initialize this dropdown immediately
$out .= "<script" . ">InputfieldSubmitDropdown.init('#{$this->id}')</script>";
$out .= "<script" . ">InputfieldSubmitDropdown.init('#{$this->id}', null, $required);</script>";
return $out;
}

34
wire/modules/Inputfield/InputfieldSubmit/dropdown.js
View File

@@ -8,6 +8,8 @@
*/
var InputfieldSubmitDropdown = {
itemClicked: false,
/**
* Click event for dropdown item
*
@@ -26,6 +28,8 @@ var InputfieldSubmitDropdown = {
$button = $dropdown.data('pw-button');
InputfieldSubmitDropdown.itemClicked = true;
if($a.hasClass('pw-button-dropdown-default')) {
// just click the button
@@ -68,6 +72,8 @@ var InputfieldSubmitDropdown = {
// click the button
$button.click();
InputfieldSubmitDropdown.itemClicked = false;
return false;
},
@@ -82,9 +88,10 @@ var InputfieldSubmitDropdown = {
*
* @param $dropdown An instance of ul.pw-button-dropdown
* @param $mainButton An instance of button
* @param bool required
*
*/
initDropdown: function($dropdown, $mainButton) {
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'));
@@ -155,6 +162,19 @@ var InputfieldSubmitDropdown = {
$(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;
}
});
}
},
/**
@@ -162,10 +182,14 @@ var InputfieldSubmitDropdown = {
*
* @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) {
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')) {
@@ -177,12 +201,12 @@ var InputfieldSubmitDropdown = {
$buttons.each(function() {
var $button = $(this);
if(typeof $dropdownTemplate != "undefined") {
if($dropdownTemplate !== null) {
$dropdownTemplate.addClass('pw-button-dropdown-template');
InputfieldSubmitDropdown.initDropdown($dropdownTemplate, $button);
InputfieldSubmitDropdown.initDropdown($dropdownTemplate, $button, required);
} else {
var $dropdown = $('#' + $(this).prop('id') + '_dropdown');
if($dropdown.length) InputfieldSubmitDropdown.initDropdown($dropdown, $button);
if($dropdown.length) InputfieldSubmitDropdown.initDropdown($dropdown, $button, required);
}
});

2
wire/modules/Inputfield/InputfieldSubmit/dropdown.min.js vendored
View File

@@ -1 +1 @@
var InputfieldSubmitDropdown={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");if($a.hasClass("pw-button-dropdown-default")){}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){$input=$(selector);if(!$input.length)return true;$input.val(value)}else if(href.length>1){return true}if($button){if($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;$(":input:focus").blur();$button.click();return false},dropdownCnt:0,initDropdown:function($dropdown,$mainButton){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=$.trim($buttonText.text());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.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.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()})},init:function(buttonSelector,$dropdownTemplate){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(typeof $dropdownTemplate!="undefined"){$dropdownTemplate.addClass("pw-button-dropdown-template");InputfieldSubmitDropdown.initDropdown($dropdownTemplate,$button)}else{var $dropdown=$("#"+$(this).prop("id")+"_dropdown");if($dropdown.length)InputfieldSubmitDropdown.initDropdown($dropdown,$button)}});return true}};
var InputfieldSubmitDropdown={itemClicked:false,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")){}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){$input=$(selector);if(!$input.length)return true;$input.val(value)}else if(href.length>1){return true}if($button){if($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;$(":input:focus").blur();$button.click();InputfieldSubmitDropdown.itemClicked=false;return false},dropdownCnt:0,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=$.trim($buttonText.text());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.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.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");$mainButton.on("click",function(){if(InputfieldSubmitDropdown.itemClicked){return true}else{$toggleButton.mousedown();return false}})}},init:function(buttonSelector,$dropdownTemplate,required){if(typeof $dropdownTemplate==="undefined")$dropdownTemplate=null;if(typeof required==="undefined")required=false;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}};