Adds data-trigger-closest-parent to Trigger API
Test code:
<form id="form1">
<input
type="text" name="aa" value="aaa"
data-trigger-action="show"
data-trigger="input[name=bb]"
data-trigger-condition="checked"
data-trigger-closest-parent="form"
/>
<input type="checkbox" name="bb" />
</form>
<form id="form2">
<input
type="text" name="aa" value="aaa"
data-trigger-action="show"
data-trigger="input[name=bb]"
data-trigger-condition="checked"
data-trigger-closest-parent="form"
/>
<input type="checkbox" name="bb" />
</form>
This commit is contained in:
parent
858eb96a81
commit
7e3cf98a75
|
|
@ -69,8 +69,7 @@ if($.oc===undefined)
|
||||||
$.oc={}
|
$.oc={}
|
||||||
$.oc.escapeHtmlString=function(string){var htmlEscapes={'&':'&','<':'<','>':'>','"':'"',"'":''','/':'/'},htmlEscaper=/[&<>"'\/]/g
|
$.oc.escapeHtmlString=function(string){var htmlEscapes={'&':'&','<':'<','>':'>','"':'"',"'":''','/':'/'},htmlEscaper=/[&<>"'\/]/g
|
||||||
return(''+string).replace(htmlEscaper,function(match){return htmlEscapes[match];})}
|
return(''+string).replace(htmlEscaper,function(match){return htmlEscapes[match];})}
|
||||||
+function($){"use strict";var TriggerOn=function(element,options){var $el=this.$el=$(element);this.options=options||{};if(this.options.triggerType!==false&&this.options.triggerAction===false)this.options.triggerAction=this.options.triggerType
|
+function($){"use strict";var TriggerOn=function(element,options){var $el=this.$el=$(element);this.options=options||{};if(this.options.triggerCondition===false)
|
||||||
if(this.options.triggerCondition===false)
|
|
||||||
throw new Error('Trigger condition is not specified.')
|
throw new Error('Trigger condition is not specified.')
|
||||||
if(this.options.trigger===false)
|
if(this.options.trigger===false)
|
||||||
throw new Error('Trigger selector is not specified.')
|
throw new Error('Trigger selector is not specified.')
|
||||||
|
|
@ -80,14 +79,14 @@ this.triggerCondition=this.options.triggerCondition
|
||||||
if(this.options.triggerCondition.indexOf('value')==0){var match=this.options.triggerCondition.match(/[^[\]]+(?=])/g)
|
if(this.options.triggerCondition.indexOf('value')==0){var match=this.options.triggerCondition.match(/[^[\]]+(?=])/g)
|
||||||
this.triggerCondition='value'
|
this.triggerCondition='value'
|
||||||
this.triggerConditionValue=(match)?match:""}
|
this.triggerConditionValue=(match)?match:""}
|
||||||
if(this.triggerCondition=='checked'||this.triggerCondition=='value')
|
this.triggerParent=this.options.triggerClosestParent!==undefined?$el.closest(this.options.triggerClosestParent):undefined
|
||||||
$(document).on('change',this.options.trigger,$.proxy(this.onConditionChanged,this))
|
if(this.triggerCondition=='checked'||this.triggerCondition=='value'){$(document).on('change',this.options.trigger,$.proxy(this.onConditionChanged,this))}
|
||||||
var self=this
|
var self=this
|
||||||
$el.on('oc.triggerOn.update',function(e){e.stopPropagation()
|
$el.on('oc.triggerOn.update',function(e){e.stopPropagation()
|
||||||
self.onConditionChanged()})
|
self.onConditionChanged()})
|
||||||
self.onConditionChanged()}
|
self.onConditionChanged()}
|
||||||
TriggerOn.prototype.onConditionChanged=function(){if(this.triggerCondition=='checked'){this.updateTarget($(this.options.trigger+':checked').length>0)}
|
TriggerOn.prototype.onConditionChanged=function(){if(this.triggerCondition=='checked'){this.updateTarget($(this.options.trigger+':checked',this.triggerParent).length>0)}
|
||||||
else if(this.triggerCondition=='value'){this.updateTarget($(this.options.trigger).val()==this.triggerConditionValue)}}
|
else if(this.triggerCondition=='value'){this.updateTarget($(this.options.trigger,this.triggerParent).val()==this.triggerConditionValue)}}
|
||||||
TriggerOn.prototype.updateTarget=function(status){if(this.options.triggerAction=='show')
|
TriggerOn.prototype.updateTarget=function(status){if(this.options.triggerAction=='show')
|
||||||
this.$el.toggleClass('hide',!status).trigger('hide',[!status])
|
this.$el.toggleClass('hide',!status).trigger('hide',[!status])
|
||||||
else if(this.options.triggerAction=='hide')
|
else if(this.options.triggerAction=='hide')
|
||||||
|
|
@ -104,7 +103,7 @@ $(window).trigger('resize')}
|
||||||
TriggerOn.prototype.fixButtonClasses=function(){var group=this.$el.closest('.btn-group')
|
TriggerOn.prototype.fixButtonClasses=function(){var group=this.$el.closest('.btn-group')
|
||||||
if(group.length>0&&this.$el.is(':last-child'))
|
if(group.length>0&&this.$el.is(':last-child'))
|
||||||
this.$el.prev().toggleClass('last',this.$el.hasClass('hide'))}
|
this.$el.prev().toggleClass('last',this.$el.hasClass('hide'))}
|
||||||
TriggerOn.DEFAULTS={triggerAction:false,triggerCondition:false,trigger:false}
|
TriggerOn.DEFAULTS={triggerAction:false,triggerCondition:false,triggerClosestParent:undefined,trigger:false}
|
||||||
var old=$.fn.triggerOn
|
var old=$.fn.triggerOn
|
||||||
$.fn.triggerOn=function(option){return this.each(function(){var $this=$(this)
|
$.fn.triggerOn=function(option){return this.each(function(){var $this=$(this)
|
||||||
var data=$this.data('oc.triggerOn')
|
var data=$this.data('oc.triggerOn')
|
||||||
|
|
|
||||||
|
|
@ -191,9 +191,9 @@
|
||||||
this.options = options || {}
|
this.options = options || {}
|
||||||
this.cancelled = false
|
this.cancelled = false
|
||||||
|
|
||||||
var parent = options.inputPresetClosestParent !== undefined ?
|
var parent = options.inputPresetClosestParent !== undefined
|
||||||
$el.closest(options.inputPresetClosestParent) :
|
? $el.closest(options.inputPresetClosestParent)
|
||||||
undefined,
|
: undefined,
|
||||||
self = this,
|
self = this,
|
||||||
prefix = ''
|
prefix = ''
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,8 @@
|
||||||
* should satisfy in order the condition to be considered as "true".
|
* should satisfy in order the condition to be considered as "true".
|
||||||
* - value[somevalue]: determines if the value of data-trigger equals the specified value (somevalue)
|
* - value[somevalue]: determines if the value of data-trigger equals the specified value (somevalue)
|
||||||
* the condition is considered "true".
|
* the condition is considered "true".
|
||||||
|
* - data-trigger-closest-parent: optional, specifies a CSS selector for a closest common parent
|
||||||
|
* for the source and destination input elements.
|
||||||
*
|
*
|
||||||
* Example: <input type="button" class="btn disabled"
|
* Example: <input type="button" class="btn disabled"
|
||||||
* data-trigger-action="enable"
|
* data-trigger-action="enable"
|
||||||
|
|
@ -34,9 +36,6 @@
|
||||||
|
|
||||||
this.options = options || {};
|
this.options = options || {};
|
||||||
|
|
||||||
// @deprecated remove if year >= 2016
|
|
||||||
if (this.options.triggerType !== false && this.options.triggerAction === false) this.options.triggerAction = this.options.triggerType
|
|
||||||
|
|
||||||
if (this.options.triggerCondition === false)
|
if (this.options.triggerCondition === false)
|
||||||
throw new Error('Trigger condition is not specified.')
|
throw new Error('Trigger condition is not specified.')
|
||||||
|
|
||||||
|
|
@ -54,8 +53,13 @@
|
||||||
this.triggerConditionValue = (match) ? match : ""
|
this.triggerConditionValue = (match) ? match : ""
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.triggerCondition == 'checked' || this.triggerCondition == 'value')
|
this.triggerParent = this.options.triggerClosestParent !== undefined
|
||||||
|
? $el.closest(this.options.triggerClosestParent)
|
||||||
|
: undefined
|
||||||
|
|
||||||
|
if (this.triggerCondition == 'checked' || this.triggerCondition == 'value') {
|
||||||
$(document).on('change', this.options.trigger, $.proxy(this.onConditionChanged, this))
|
$(document).on('change', this.options.trigger, $.proxy(this.onConditionChanged, this))
|
||||||
|
}
|
||||||
|
|
||||||
var self = this
|
var self = this
|
||||||
$el.on('oc.triggerOn.update', function(e){
|
$el.on('oc.triggerOn.update', function(e){
|
||||||
|
|
@ -68,10 +72,10 @@
|
||||||
|
|
||||||
TriggerOn.prototype.onConditionChanged = function() {
|
TriggerOn.prototype.onConditionChanged = function() {
|
||||||
if (this.triggerCondition == 'checked') {
|
if (this.triggerCondition == 'checked') {
|
||||||
this.updateTarget($(this.options.trigger + ':checked').length > 0)
|
this.updateTarget($(this.options.trigger + ':checked', this.triggerParent).length > 0)
|
||||||
}
|
}
|
||||||
else if (this.triggerCondition == 'value') {
|
else if (this.triggerCondition == 'value') {
|
||||||
this.updateTarget($(this.options.trigger).val() == this.triggerConditionValue)
|
this.updateTarget($(this.options.trigger, this.triggerParent).val() == this.triggerConditionValue)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -103,6 +107,7 @@
|
||||||
TriggerOn.DEFAULTS = {
|
TriggerOn.DEFAULTS = {
|
||||||
triggerAction: false,
|
triggerAction: false,
|
||||||
triggerCondition: false,
|
triggerCondition: false,
|
||||||
|
triggerClosestParent: undefined,
|
||||||
trigger: false
|
trigger: false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -417,7 +417,8 @@ class FormField
|
||||||
$newAttributes = [
|
$newAttributes = [
|
||||||
'data-trigger' => '[name="'.$fullTriggerField.'"]',
|
'data-trigger' => '[name="'.$fullTriggerField.'"]',
|
||||||
'data-trigger-action' => $triggerAction,
|
'data-trigger-action' => $triggerAction,
|
||||||
'data-trigger-condition' => $triggerCondition
|
'data-trigger-condition' => $triggerCondition,
|
||||||
|
'data-trigger-closest-parent' => 'form'
|
||||||
];
|
];
|
||||||
|
|
||||||
$attributes = $attributes + $newAttributes;
|
$attributes = $attributes + $newAttributes;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue