diff --git a/wire/modules/Inputfield/InputfieldSubmit/InputfieldSubmit.module b/wire/modules/Inputfield/InputfieldSubmit/InputfieldSubmit.module
index 014db54f..7d38ac5b 100644
--- a/wire/modules/Inputfield/InputfieldSubmit/InputfieldSubmit.module
+++ b/wire/modules/Inputfield/InputfieldSubmit/InputfieldSubmit.module
@@ -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 = "$buttonText";
$out = "";
if($this->getSetting('small')) $out = "$out";
@@ -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 = "" . str_replace("dropdownRequired ? 'true' : 'false';
// script to initialize this dropdown immediately
- $out .= "InputfieldSubmitDropdown.init('#{$this->id}')";
+ $out .= "InputfieldSubmitDropdown.init('#{$this->id}', null, $required);";
return $out;
}
diff --git a/wire/modules/Inputfield/InputfieldSubmit/dropdown.js b/wire/modules/Inputfield/InputfieldSubmit/dropdown.js
index eca6e140..15272085 100644
--- a/wire/modules/Inputfield/InputfieldSubmit/dropdown.js
+++ b/wire/modules/Inputfield/InputfieldSubmit/dropdown.js
@@ -7,6 +7,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
@@ -67,6 +71,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 = $("")
.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')) {
@@ -174,19 +198,19 @@ var InputfieldSubmitDropdown = {
}
var $buttons = (typeof buttonSelector == "string") ? $(buttonSelector) : buttonSelector;
-
+
$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);
}
});
return true;
}
-}
\ No newline at end of file
+}
diff --git a/wire/modules/Inputfield/InputfieldSubmit/dropdown.min.js b/wire/modules/Inputfield/InputfieldSubmit/dropdown.min.js
index 59261f2f..62d663e8 100644
--- a/wire/modules/Inputfield/InputfieldSubmit/dropdown.min.js
+++ b/wire/modules/Inputfield/InputfieldSubmit/dropdown.min.js
@@ -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=$("").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}};
\ No newline at end of file
+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=$("").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}};
\ No newline at end of file