X-CHMOD: HTML5 Web Component

A new HTML5 Web Component has just joined my ever-growing collection of custom tags.

Meet AcidJs.XChmod – a HTML5 Web Component that can be used to set/display the CHMOD settings of a file. Since it emits a client-side event which returns what is currently set it can be easily connected to a server-side script. It was built using another HTML5 Web Component – AcidJs.XSwitch.

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.