1
0
mirror of https://github.com/processwire/processwire.git synced 2025-08-25 07:41:30 +02:00

Update InputfieldSubmit to support disabling of populating selected dropdown value to submit button value

This commit is contained in:
Ryan Cramer
2019-03-17 07:43:20 -04:00
parent 6013f16c96
commit 23208d1ade
3 changed files with 24 additions and 6 deletions

View File

@@ -10,7 +10,8 @@
* @property bool $header Whether or not button will also appear in header (default=false).
* @property bool $secondary Whether or not button is secondary (default=false).
* @property bool $small Whether or not button should be small, where supported (default=false).
* @property string $dropdownInputName #pw-internal
* @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
*
*/
class InputfieldSubmit extends Inputfield {
@@ -55,6 +56,10 @@ class InputfieldSubmit extends Inputfield {
// name of 'hidden' input that will receive the clicked dropdown item value
$this->set('dropdownInputName', '_action_value');
// Selected dropdown value becomes submit value? If set to false, then only the
// dropdownInputName above will contain the selected value
$this->set('dropdownSubmit', true);
}
public function set($key, $value) {
@@ -209,8 +214,11 @@ class InputfieldSubmit extends Inputfield {
if($numValues) {
// there are values that can be populated to a hidden input
$inputID = $dropdownID . '_value';
$out = "<input type='hidden' name='{$this->dropdownInputName}' id='$inputID' value='' />" .
str_replace("<ul ", "<ul data-pw-dropdown-input='#$inputID' ", $out);
$attr = "type='hidden' name='{$this->dropdownInputName}' id='$inputID' value='' ";
// copy the submitted dropdown value to the submit button value?
if($this->dropdownSubmit) $attr .= "data-pw-dropdown-submit='1' ";
// render the output
$out = "<input $attr />" . str_replace("<ul ", "<ul data-pw-dropdown-input='#$inputID' ", $out);
}
// script to initialize this dropdown immediately

View File

@@ -20,6 +20,7 @@ var InputfieldSubmitDropdown = {
var href = $a.attr('href');
var $dropdown = $a.closest('.pw-button-dropdown');
var $button;
var $input = null;
if(!$dropdown.length) return true;
@@ -33,12 +34,13 @@ var InputfieldSubmitDropdown = {
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
var $input = $(selector);
$input = $(selector);
if(!$input.length) return true;
$input.val(value);
} else if(href.length > 1) {
@@ -47,7 +49,15 @@ var InputfieldSubmitDropdown = {
}
// populate button 'value' attribute
if($button) $button.attr('value', value);
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;

View File

@@ -1 +1 @@
var InputfieldSubmitDropdown={click:function(){var e=$(this);var b=e.attr("href");var f=e.closest(".pw-button-dropdown");var d;if(!f.length){return true}d=f.data("pw-button");if(e.hasClass("pw-button-dropdown-default")){}else{var c=e.attr("data-pw-dropdown-value");var a=f.attr("data-pw-dropdown-input");if(!c){return true}if(a){var g=$(a);if(!g.length){return true}g.val(c)}else{if(b.length>1){return true}}if(d){d.attr("value",c)}}if(!d){return true}$(":input:focus").blur();d.click();return false},dropdownCnt:0,initDropdown:function(e,d){var c=$("<button type='button'><i class='fa fa-angle-down'></i></button>").attr("id","pw-dropdown-toggle-"+d.attr("id"));d.after(c);c.button();var h=null;if(e.hasClass("pw-button-dropdown-template")){h=e;e=h.clone();h.hide()}InputfieldSubmitDropdown.dropdownCnt++;var g="pw-button-dropdown-"+InputfieldSubmitDropdown.dropdownCnt;e.addClass("pw-dropdown-menu pw-dropdown-menu-rounded pw-button-dropdown-init "+g);e.data("pw-button",d);var a=d.find(".ui-button-text");var b=$.trim(a.text());var f=a.html();e.find("a").each(function(){var j=$(this);if(h){var i=j.html();if(i.indexOf("%s")>-1){j.html(i.replace("%s",b))}}j.click(InputfieldSubmitDropdown.click)});d.addClass("pw-button-dropdown-main");c.after(e).addClass("pw-dropdown-toggle-click pw-dropdown-toggle pw-button-dropdown-toggle").attr("data-pw-dropdown","."+g);if(d.hasClass("ui-priority-secondary")){c.addClass("ui-priority-secondary")}if(d.hasClass("pw-head-button")){c.addClass("pw-head-button")}c.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(b,c){if($("body").hasClass("modal")){$("ul.pw-button-dropdown").hide();return false}var a=(typeof b=="string")?$(b):b;a.each(function(){var d=$(this);if(typeof c!="undefined"){c.addClass("pw-button-dropdown-template");InputfieldSubmitDropdown.initDropdown(c,d)}else{var e=$("#"+$(this).prop("id")+"_dropdown");if(e.length){InputfieldSubmitDropdown.initDropdown(e,d)}}});return true}};
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}};