-
-
Notifications
You must be signed in to change notification settings - Fork 190
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Rewrite and expand input trigger functionality #1163
base: develop
Are you sure you want to change the base?
Conversation
Niiice! |
This comment has been minimized.
This comment has been minimized.
…tion, minor tweaks
…rigger functionality
); | ||
break; | ||
case 'within': | ||
case 'notWithin': |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
case 'notWithin': | |
case 'notwithin': |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Did you miss this one @bennothommo ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, yes I did. :)
Workshop theme PR: wintercms/wn-workshop-theme#3
Original docs: https://wintercms.com/docs/v1.2/ui/script/input-trigger
This PR rewrites and expands upon the Input trigger functionality present in Winter CMS, and makes it available as an optional extra to themes in the front-end.
Whilst still remaining fully backwards-compatible with the current Trigger functionality included in the Storm UI library, this expands on the trigger functionality significantly.
Multiple triggers supported
An element may now have multiple triggers, by adding a specific name in the middle of the
data-trigger
attributes. For example, a button could have an enable or disable trigger depending on certain exclusive conditions:In the example above, the name
enable
anddisable
have been used to differentiate the triggers, but you may use any name you wish, as long as it has a trigger element, a condition and a target.Naming changes and new trigger parameters
A new trigger parameter -
trigger-priority
- is available to order triggers if you use more than one trigger on the same element. Priorities are ordered ascendingly, with higher priority triggers being fired after lower priority triggers.The following trigger parameters have been renamed to be shorter, but the original names will still be compatible.
trigger-closest-parent
parameter has been renamed totrigger-parent
trigger-condition
parameter has been renamed totrigger-when
trigger-action
parameter has been renamed totrigger-do
New conditions and parameters
In addition to the
checked
,unchecked
andvalue
conditions, additional conditions have been made available. Conditions also take into account multiple inputs.empty
- triggered when the selected input(s) are empty/unchecked.oneOf:value, value...
- triggered when the selected input(s) values match one of the given values.allOf:value, value...
- triggered when the selected input(s) values match all of the given values.focus
- triggered when the selected input(s) are focused on.blur
- triggered when the selected input(s) lose focus.attr:attributeName, attributeValue
- triggered when the selected input(s) have a specific attribue name and value.class:className
- triggered when the selected input(s) have a specific class name.Parameters can be provided in the format
condition:param1, param2
similar to Laravel's validation rules. If a comma needs to be used within a parameter, the parameter can be quoted to prevent that comma from being used to split the parameters.The
checked
condition has an optional parameter which can be a number, indicating that at least that number of checkboxes must be checked.New actions
In addition to the
show
,hide
,enable
,disable
andempty
actions, additional actions have been made available, similar in format to the conditions, to run on the trigger element.value:newValue
- sets the value of the trigger element to the new value.valueOf:selector, newValue
- sets the value of a child element(s) of a trigger element that matches the selector.check
- checks a checkbox/radio trigger element.unchceck
- unchecks a checkbox/radio trigger element.class:className, unmetClassName
- defines a class to add to the trigger element when the condition is met. Optionally, can also provide a class when the condition is unmet.classOf:selector, className, unmetClassName
- defines a class to add to a child element of the trigger element when the condition is met. Optionally, can also provide a class when the condition is unmet.attr:attributeName, attributeValue, unmetAttributeValue
- sets the given attribute name with the given value on the trigger element when the condition is met. Optionally, can also provide an unmet value.attrOf:selector, attributeName, attributeValue, unmetAttributeValue
- sets the given attribute name with the given value on a child element of the trigger element when the condition is met. Optionally, can also provide an unmet value.style:styleName, styleValue, unmetStyleValue
- sets the given styling attribute with the given value on the trigger element when the condition is met. Optionally, can also provide an unmet value.styleOf:selector, styleName, styleValue, unmetStyleValue
- sets the given styling attribute with the given value on a child element of the trigger element when the condition is met. Optionally, can also provide an unmet value.For the
value
,class
,attr
andstyle
actions, the value of the target element can be inserted into the parameters. In order to prevent this from being abused, the value will be HTML encoded.For the
value
action, if this is targeted on a non-input type element, it will change the inner text of that element.Multiple conditions and actions
Both conditions and actions support multiple commands, by using a pipe (
|
) symbol between commands, again similar to Laravel. Conditions will always been treated asAND
-type conditions - all conditions need to pass for the trigger to occur.