Markup
[sourcecode language=”html”]<acidjs-xchmod permissions="755" id="chmod-1"></acidjs-xchmod>
<acidjs-xchmod permissions="644" id="chmod-2"></acidjs-xchmod>
<acidjs-xchmod permissions="666" id="chmod-6">
<acidjs-xchmod-lang>
{
"owner": "Eigentümer",
"group": "Gruppe",
"other": "Sonstige",
"read": "Lesen",
"write": "Schreiben",
"execute": "Ausführen"
}
</acidjs-xchmod-lang>
</acidjs-xchmod>
<acidjs-xchmod permissions="644" enabled="false" id="chmod-4"></acidjs-xchmod>[/sourcecode]
HTML Attributes
Apart from the standard HTML attributes (style, class, id, etc.), the tag also supports the following component-specific attributes:
permissions
– Required attribute. The value should be three-digit, and each digit value should be between 0
and 7
. If invalid value is set, the component will show an error message.enabled
– Optional boolean attribute, default value is true
. If set to false
, the component will be rendered as disabled.JavaScript Methods, Getters, Setters and Events
Methods
All standard JavaScript methods are supported, plus the component-specific:
setChmod(chmod)
– The chmod
parameter value should be three-digit, and each digit value should be between 0
and 7
. If invalid value is set, the component will show an error message. Usage:// JavaScript
document.querySelector("#chmod-1").setChmod(666);
// jQuery
$("#chmod-1").get(0).setChmod(666);
getChmod()
– Returns an object, containing the classes, octal, command values of the currently set CHMOD value:{ "classes":{ "owner":7, "group":5, "other":5 }, "octal":"755", "octalLeadingZero":"0755", "command":"-rwxr-xr-x"
}
Usage:
// JavaScript
document.querySelector("#chmod-1").getChmod();
// jQuery
$("#chmod-1").get(0).getChmod();
getData()
– Returns the DTO of the component, containing the chmod
object, returned by the getChmod()
method plus the lang
. Usage:// JavaScript
document.querySelector("#chmod-1").getData();
// jQuery
$("#chmod-1").get(0).getData();
enable()
– Enable the component. Usage:// JavaScript
document.querySelector("#chmod-1").enable();
// jQuery
$("#chmod-1").get(0).enable();
disable()
– Disable the component. Usage:// JavaScript
document.querySelector("#chmod-1").disable();
// jQuery
$("#chmod-1").get(0).disable();
Getters and Setters
All standard JavaScript setters/getters are supported, plus the component-specific:
chmod
– Sets/gets the CHMOD of the component. The setter returns an object, similar to the object, returned by the getChmod()
method. Usage:// getter JavaScript
document.querySelector("#chmod-1").chmod;
// setter JavaScript
document.querySelector("#chmod-1").chmod = 666;
// getter jQuery
$("#chmod-1").get(0).chmod;
// setter jQuery
$("#chmod-1").get(0).chmod = 666;
enabled
– Sets/gets the enabled
state of the component. The setter returns a Boolean
. Usage:// getter JavaScript
document.querySelector("#chmod-1").enabled;
// setter JavaScript
document.querySelector("#chmod-1").enabled = false;
document.querySelector("#chmod-1").enabled = true;
// getter jQuery
$("#chmod-1").get(0).enabled;
// setter JavaScript
$("#chmod-1").get(0).enabled = false;
$("#chmod-1").get(0).enabled = true;
Custom Events
"acidjs-xchmod-set"
– Returns the currently set CHMOD in several different formats. The event is triggered any time the CHMOD has been changed. Binding to the event:$("#chmod-1").on("acidjs-xchmod-set", function(e, data) { window.console.log(e.type, data);
});
Return object:
{ classes: { owner: 3, group: 5, other: 5 }, command: "--wxr-xr-x", octal: "355", octalLeadingZero: "0355"
}
Have a great day, and don’t forget to check the demo on this page.
If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScriptExperiments and Insight website.
© 2006 - 2023 Martin Ivanov