am.js

a javascript library for using attributes and their values rather than classes for styling HTML elements.

Based on AMCSS Attribute Modules for CSS - Specification github.com/amcss/attribute-module-specification.

** Works on all browsers which supports attribute and ~= selectors **

---

Installation

<script src="am.js"></script>

On older browsers which don't support Array.IsArray and Array.indexOf include es5-shim github.com/es-shims/es5-shim before am.js

some Issues:

• works only on browsers which supports attribute and ~= selectors (no IE6 and below)
• module names are case sensitive on IE only.
• value names are case sensitive everywhere.
• strange results on ie7 if you use module-names with seperator as mentioned in specification. If you want to support IE7 dont use seperators in module-names (i.e. am-Button => amButton)

---

API:

$am(element)

$am(element) gives you a new chainable am instance (like jQuery) containing the element.

• element is a single DOM element

var testam=$am(document.getElementById("test")); //get a new am instance
testam.setModule("am-Button"); //sets the module on #test

** Once you have a instance, you can call any of the $am methods on it.**

.hasModule(module)

.hasModule(module) returns true if the element has the module or false if not.

• module Modulename (string)

    <div id="test" am-Button="green"></div>

console.log(
    $am(document.getElementById("test"))
    .hasModule("am-Button")
    ); //logs true
console.log(
    $am(document.getElementById("test"))
    .hasModule("am-Grid")
    ); //logs false

.getModules()

.getModules() returns a array with all modules (i.e. uncommon attribute names).

    <div id="test" am-Button="green" am_Grid="1/3" title="Hallo"></div>

console.log(
    $am(document.getElementById("test")).getModules()K
    ); //logs ["am-Button","am-Grid"]

.setModule(module[,values])

.setModule(module[,values]) add a module to a element and optional set its value. Module Values, if any, are saved between toggle

• module Modulename (string)
• values Values to set. Array of valuenames or string with one or more space-seperated value-names

    <div id="test"></div>
    <div id="test2"></div>
    <div id="test3"></div>

    $am(document.getElementById("test")).setModule("am-Button"); //<div id="test" am-Button=""></div>
    $am(document.getElementById("test2")).setModule("am-Button","green"); //<div id="test2" am-Button="green"></div>
    $am(document.getElementById("test3")).setModule("am-Button",["green","round","big"]); //<div id="test3" am-Button="green round big"></div>
    //same as
    $am(document.getElementById("test3")).setModule("am-Button","green round big");

.removeModule(module)

.removeModule(module) remove a module from a element.

• module Modulename (string)

    <div id="test"></div>

    $am(document.getElementById("test")).setModule("am-Button"); //<div id="test" am-Button=""></div>
    $am(document.getElementById("test")).setModule("am-Grid"); //<div id="test" am-Button="" am-Grid=""></div>
    $am(document.getElementById("test")).removeModule("am-Button"); //<div id="test" am-Button=""></div>

.toggleModule(modules)

.toggleModule(modules) toggles (switch on/off) one or more modules of a element.

• modules Modules to toggle. Array of module-names or string with one or more space-seperated module-names

    <div id="test" am-Button="round"></div>

    $am(document.getElementById("test")).toggleModule("am-Button"); //<div id="test"></div>
    $am(document.getElementById("test")).toggleModule("am-Button"); //<div id="test" am-Button="round"></div>

.getModule(module)

.getModule(module) returns array of value-names if module is set or empty array.

• module Modulename (string)

    <div id="test" am-Button="round green"></div>

    $am(document.getElementById("test")).getModule("am-Button"); //returns ["round","green"]
    $am(document.getElementById("test")).getModule("am-Grid"); //returns []

.setVal(module,values)

.setVal(module,values) Add one or more values to a module. Create the Module if it dosn't exists'

• module Modulename (string)
• values Values to set. Array of valuenames or string with one or more space-seperated value-names

    <div id="test" am-Button="round"></div>

    $am(document.getElementById("test")).setVal("am-Button","big"); //<div id="test" am-Button="round big"></div>
    $am(document.getElementById("test")).setVal("am-Grid","1/3"); //<div id="test" am-Button="round big" am-Grid="1/3"></div>

.hasVal(module,values)

.hasVal(module,values) returns true if all values exists, otherwith false

• module Modulename (string)
• values Values to check. Array of valuenames or string with one or more space-seperated value-names

    <div id="test" am-Button="round"></div>

    $am(document.getElementById("test")).hasVal("am-Button","big"); //returns false
    $am(document.getElementById("test")).hasVal("am-Button","round"); //returns true;
    $am(document.getElementById("test")).hasVal("am-Button","round big"); //returns false;

.removeVal(module,values)

.removeVal(module,values) Remove one or more values from a module.

• module Modulename (string)
• values Values to remove. Array of valuenames or string with one or more space-seperated value-names

    <div id="test" am-Button="round"></div>

    $am(document.getElementById("test")).setVal("am-Button","big"); //<div id="test" am-Button="round big"></div>
    $am(document.getElementById("test")).removeVal("am-Button","round"); //<div id="test" am-Button="big"></div>
    $am(document.getElementById("test")).removeVal("am-Button","big"); //<div id="test" am-Button=""></div>

.toggleVal(module,values)

.toggleVal(module,values) Toggles (switch on/off) one or more values from a module.

• module Modulename (string)
• values Values to toggle. Array of valuenames or string with one or more space-seperated value-names

    <div id="test" am-Button="round"></div>

    $am(document.getElementById("test")).toggleVal("am-Button","round"); //<div id="test" am-Button=""></div>
    $am(document.getElementById("test")).removeVal("am-Button","big"); //<div id="test" am-Button="big"></div>
    $am(document.getElementById("test")).removeVal("am-Button","round big"); //<div id="test" am-Button="round"></div>

---

Other functions:

$am.getVersion() returns version string

$am.useForcedRefresh() returns true if elements are not automatically updated on module change

---

Licence

MIT License. (Copyright) Oliver Jean EIfler ([email protected]).