Web Component: j-Exec
j-Exec
The component executes a method when the user clicks on the same element with the exec
, exec2
, or exec3
class. More information is below. The component is a singleton, and it works for the whole HTML document.
Configuration:
selector
is a selector for capturingclick
(default:.exec
)selector2
is a selector for capturingdblclick
(default:.exec2
)selector3
is a selector for capturingcontextmenu
(default:.exec3
)
Elements:
- Elements can contain
data-exec
attribut with a method name which will be execute when the user click on the element. - Elements can contain these attributes
data-path="some.path
anddata-value="'STRING'"
ordata-value="340"
(number) ordata-value="{}"
(object). Clicking on the element setsdata-value
todata-path
. - Elements can contain
data-href
attribute and the component performsREDIRECT()
.
Attributes:
data-exec="METHOD_NAME"
executes a method when user clicks (supports scope via?
char)data-prevent="true"
prevents continuing in theclick
eventdata-href="URL"
performsREDIRECT()
data-path="path.to.property"
a path for setting of value (supports scope via?
char)data-value=""
sets a value according to thedata-path=""
attributedata-def="path.*"
performs default values (supports scope via?
char)data-reset="path.*"
performs a state reseting (supports scope via?
char)
Attributes for the double click:
data-exec2="METHOD_NAME"
executes a method when user clicks (supports scope via?
char)data-prevent2="true"
prevents continuing in theclick
eventdata-href2="URL"
performsREDIRECT()
data-path2="path.to.property"
a path for setting of value (supports scope via?
char)data-value2=""
sets a value according to thedata-path=""
attributedata-def2="path.*"
performs default values (supports scope via?
char)data-reset2="path.*"
performs a state reseting (supports scope via?
char)
Attributes for the context-menu:
data-exec3="METHOD_NAME"
executes a method when user clicks (supports scope via?
char)data-href3="URL"
performsREDIRECT()
data-path3="path.to.property"
a path for setting of value (supports scope via?
char)data-value3=""
sets a value according to thedata-path=""
attributedata-def3="path.*"
performs default values (supports scope via?
char)data-reset3="path.*"
performs a state reseting (supports scope via?
char)
Hints:
- toggles boolean
data-value="!value"
- scopes:
data-path="?.name"
replaces?
char with a scope path
Good to know:
- the component executes a target function in the form
function(element, event)
data-exec=
,data-exec2=
,data-exec3=
can contain@METHOD_NAME
that will be executed in the current component scopecomponent/METHOD_NAME(element, e)
NEW: Extensions:
SETTER('exec/register', function(exec, el, e, type) {
// @exec {String} a value from data-exec
// @el {jQuery element}
// @e {Event}
// @type {String} empty '': cick, '2': double-click '3': context menu
// registers a new extension
if (exec.charAt(0) === '/') {
EXEC('myinstance.' + exec.substring(1), el, e);
// "return true" stops the next processing of j-Exec
return true;
}
});
Author
- Peter Širka petersirka@gmail.com
- License
Created
18. october 2016
Updated
10. january 2024
Version
v1
License
https://www.totaljs.com/license/
Responsive
Yes
Author
Peter Širka
Email
petersirka@gmail.com