HTML5, CSS3 & JS Experiments

By Martin Ivanov

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

{ "owner": "Eigentümer", "group": "Gruppe", "other": "Sonstige", "read": "Lesen", "write": "Schreiben", "execute": "Ausführen" }

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;
}