CHMOD Setter
X-CHMOD is 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.
<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>
Demo
CHMOD755
CHMOD644
Localized, CHMOD666
Disabled, CHMOD644
Error Messages
The permissions attribute has not been set:
The permissions attribute value is greater than 777:
The permissions attribute value is not numeric:
Register Mozilla's X-Tags
You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.
<script src="AcidJs.XChmod/lib/x-tag-components.js"></script>
Register the Component on the Page via HTML5 @import
You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.
<link rel="import" href="AcidJs.XChmod/classes/XChmod.html" />
HTML Attributes
Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).
JavaScript API: Methods, Getters and Setters
Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).
Usage and Code Insight
<h4>CHMOD755</h4>
<acidjs-xchmod permissions="755" id="chmod-1"></acidjs-xchmod>
<br />
<h4>CHMOD644</h4>
<acidjs-xchmod permissions="644" id="chmod-2"></acidjs-xchmod>
<br />
<h4>Localized, CHMOD666</h4>
<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>
<br />
<h4>Disabled, CHMOD644</h4>
<acidjs-xchmod permissions="644" enabled="false" id="chmod-4"></acidjs-xchmod>
<br />
<h4>Error Messages</h4>
<p>The <code>permissions</code> attribute has not been set:</p>
<acidjs-xchmod id="chmod-3"></acidjs-xchmod>
<br />
<p>The <code>permissions</code> attribute value is greater than 777:</p>
<acidjs-xchmod id="chmod-5"></acidjs-xchmod>
<br />
<p>The <code>permissions</code> attribute value is not numeric:</p>
<acidjs-xchmod permissions="ab3" id="chmod-5"></acidjs-xchmod>
<br />
/*
* X-Chmod HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
* More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
* @author Martin Ivanov
* @url developer website: http://wemakesites.net/
* @url developer twitter: https://twitter.com/wemakesitesnet
* @url developer blog http://martinivanov.net
**/
/*
* USAGE:
* 1. If you are planning to use this component for a personal project, please retain the credits in the code. Donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS), however is highly appreciated.
* 2. If you will use it on a live website, donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS) is required.
**/
acidjs-xchmod,
acidjs-xchmod code,
acidjs-xchmod error,
acidjs-xchmod input[type="text"],
acidjs-xchmod acidjs-xchmod-wrapper,
acidjs-xchmod permissions
{
display: block;
}
acidjs-xchmod code,
acidjs-xchmod input[type="text"],
acidjs-xchmod grid
{
width: 100%;
}
acidjs-xchmod code,
acidjs-xchmod input[type="text"],
acidjs-xchmod cell
{
text-align: center;
}
acidjs-xchmod code,
acidjs-xchmod error,
acidjs-xchmod input[type="text"]
{
font: normal 16px/26px Consolas, Arial, Helvetica, Sans-serif;
}
acidjs-xchmod error,
acidjs-xchmod input[invalid]
{
color: #f00;
border: solid 1px #f00;
}
acidjs-xchmod cell,
acidjs-xchmod input[type="text"]
{
padding: 4px;
}
acidjs-xchmod,
acidjs-xchmod *
{
margin: 0;
padding: 0;
list-style: none;
}
acidjs-xchmod acidjs-xswitch,
acidjs-xchmod cell
{
vertical-align: top;
}
acidjs-xchmod permissions
{
width: 250px;
}
acidjs-xchmod input[type="text"]
{
border: solid 1px #666;
outline: 0;
-webkit-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
acidjs-xchmod acidjs-xswitch
{
margin: 4px 0 0 4px;
width: 79px;
}
acidjs-xchmod
{
width: 333px;
font: normal 12px/26px Arial, Helvetica, Sans-serif;
cursor: default;
color: #333;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
acidjs-xchmod acidjs-xchmod-wrapper,
acidjs-xchmod[enabled="false"] input
{
background: #d4d0c8;
}
acidjs-xchmod grid
{
display: table;
border-collapse: collapse;
}
acidjs-xchmod row
{
display: table-row;
}
acidjs-xchmod cell
{
display: table-cell;
}
acidjs-xchmod [align="right"]
{
text-align: right;
}
acidjs-xchmod code
{
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
acidjs-xchmod[enabled="false"]
{
opacity: .75;
cursor: no-drop;
}
acidjs-xchmod[enabled="false"] *
{
-webkit-pointer-events: none;
-moz-pointer-events: none;
pointer-events: none;
}
acidjs-xchmod acidjs-xchmod-lang
{
display: none;
}
acidjs-xchmod grid[classes]
{
table-layout: fixed;
}
acidjs-xchmod error
{
padding: 4px;
background: #ffffcc;
line-height: 16px;
font-size: 11px;
}