Transformer JS

jQuery based Javascript library for applying themes and/or translation of text (and image) content.

Executes text / attribute transformation in HTML DOM runtime.

(C) 2014 www.ikx.no
Updated: 12.06.2018 12:30

De­pen­den­ci­es

Dependencies used by the transformer js library.

Inc­lude­s

Required resources files to be included before transformer JS.
Description Type Url
jQuery 1.9+ javascript www.jquery.com


Func­tion­s

Trans­for­m­er([t­ran­sform­To]­) - jQue­ry const­ruc­t­or

Plugin constructor to use from jQuery selectors.
Parameter Type Description
transformTo javascript object Optional transform object. See description in Transform method below.

Trans­for­m(t­rans­fo­rma­tions­)

Changes text, html and attributes within the DOM from the specified transformations object.
Example transformation object
Select all 
var transforms = {
    Status: { "type": "number", placeholder:"Hint text" }, // Sets the type and placeholder attributes of elements with attribute data-control="Status"
    LoginLabel: { InnerText: "Login" },
    SignUpLabel: { InnerHtml: "Sign up<br />" }, // Sets inner html property (allows tags)
    ForgotPinLabel: { InnerText: "Forgot Pin?" }, // Sets inner text (tags are shown as text)
    Test2Label: { InnerHtmlFile: "text.html" }, // Sets inner html property (allows tags)
    Test3Label: "test", // Short hand for innerhtml
};

$("article").transformer(transforms);
HTML markup for example code above'.
Select all 
<article>
<label data-control="LoginLabel">Logg inn</label>
<input type="text" placeholder="Old hint" data-control="Status" />

<button class="btn btn-block btn-primary">
    <span class="glyphicon glyphicon-user"></span>
    <span data-control="SignUpLabel">Opprett konto</span>
</button>

<button class="btn btn-block btn-primary">
    <span class="glyphicon glyphicon-user"></span>
    <span data-control="ForgotPinLabel">Glemt pin?</span>
</button>
<span data-control="Test2Label">Load text from a file</span>
<span data-control="Test3Label">test</span>
</article>