laroux.js - Demos

Making a GET request

HTML

<div id="text-ajax-get-request"></div>

Javascript

$l.ajax.getJson(
    'test.json'

).done(function (response) {
    $l.dom.replace($l.id('text-ajax-get-request'), response.testResponse);

}).fail(function (error) {
    $l.dom.replace(text, 'Error: ' + error.message);

});

Creating a variable animation

Javascript

$l.anim.set({
    object:   document.body,
    property: 'scrollTop',
    from:     null,
    to:       0,
    time:     800,
    unit:     '',
    reset:    false
});

Creating a CSS animation

HTML

<div class="box" id="div-anim-css-animate"></div>

Javascript

$l.anim.setCss({
    object:   $l.id('div-anim-css-animate'),
    property: 'top',
    from:     0, // current value
    to:       50,
    time:     1200,
    unit:     'px',
    reset:    false
});

Transitions

HTML

<div class="box" id="div-css-transition"></div>

Javascript

var box = $l.id('div-css-transition');

$l.css.setTransition(
    box,
    [
        'background-color',
        'width 1s linear'
    ]
);

$l.css.toggleClass(box, 'box-silver');

Dates

HTML

<div id="text-date-dates"></div>

Javascript

var text = $l.id('text-date-dates');

var now = new Date();
var yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);

$l.dom.clear(text);

$l.dom.append(text, '<div><strong>From yesterday to today:</strong></div>');
$l.dom.append(text, $l.date.parseEpoch(now.getTime() - yesterday.getTime()));

$l.dom.append(text, '<div><strong>Short Date:</strong></div>');
$l.dom.append(text, $l.date.getShortDateString(now) + '<br />');

$l.dom.append(text, '<div><strong>Short Date + month names:</strong></div>');
$l.dom.append(text, $l.date.getShortDateString(now, true) + '<br />');

$l.dom.append(text, '<div><strong>Long Date:</strong></div>');
$l.dom.append(text, $l.date.getLongDateString(now) + '<br />');

$l.dom.append(text, '<div><strong>Long Date + month names:</strong></div>');
$l.dom.append(text, $l.date.getLongDateString(now, true) + '<br />');

$l.dom.append(text, '<div><strong>Custom Date:</strong></div>');
$l.dom.append(text, $l.date.getCustomDateString('dd/MM/yyyy HH:ss', now) + '<br />');

Clone

Item

HTML

<ul id="target-dom-clone">
    <li>Item</li>
</ul>

Javascript

var target = $l.id('target-dom-clone');

$l.dom.clone(target.firstElementChild, $l.dom.cloneAppend);

Setting Events

Check me

HTML

<label><input id="checkbox-events-setting-events" type="checkbox" /> Check me</label>
<div id="text-events-setting-events"></div>

Javascript

var text = $l.id('text-events-setting-events');

$l.dom.setEvent(
    $l.id('checkbox-events-setting-events'),
    'change',
    function(ev, element) {
        if (element.checked) {
            $l.dom.replace(text, 'checked');
        } else {
            $l.dom.replace(text, 'unchecked');
        }

        return false;
    }
);

Serializing

HTML

<form id="target-forms-serializing">
    Username:<br />
    <input type="text" name="username" value="eserozvataf" /><br />
    Password:<br />
    <input type="password" name="password" value="123456" />
</form>

<div id="text-forms-serializing"></div>

Javascript

var serialized = $l.forms.serialize($l.id('target-forms-serializing'));
$l.dom.replace($l.id('text-forms-serializing'), JSON.stringify(serialized));

Toggle Form Editing

HTML

<form id="target-forms-toggle">
    Username:<br />
    <input type="text" name="username" value="eserozvataf" disabled="disabled" /><br />
    Password:<br />
    <input type="password" name="password" value="123456" /><br />
    <label><input type="checkbox" name="rememberme" value="1" /> Remember me</label>
</form>

<div id="text-forms-toggle"></div>

Javascript

$l.forms.toggleFormEditing($l.id('target-forms-toggle'));

Helpers

HTML

<div id="text-helpers-helpers"></div>

Javascript

var text = $l.id('text-helpers-helpers');

$l.dom.clear(text);

$l.dom.append(text, '<div><strong>Unique Id Generator:</strong></div>');
$l.dom.append(text, $l.helpers.getUniqueId() + '<br />');
$l.dom.append(text, $l.helpers.getUniqueId() + '<br />');

$l.dom.append(text, '<div><strong>Query String Generation:</strong></div>');
$l.dom.append(text, $l.helpers.buildQueryString({ pageId: 5, showAll: 'yes' }) + '<br />');

$l.dom.append(text, '<div><strong>Transform string into camel case:</strong></div>');
$l.dom.append(text, $l.helpers.camelCase('text-align') + '<br />');

$l.dom.append(text, '<div><strong>Transform string back from camel case:</strong></div>');
$l.dom.append(text, $l.helpers.antiCamelCase('textAlign') + '<br />');

$l.dom.append(text, '<div><strong>Encoding special characters:</strong></div>');
$l.dom.append(text, $l.helpers.quoteAttr('<br clear="all" />') + '<br />');

$l.dom.append(text, '<div><strong>Generating random value:</strong></div>');
$l.dom.append(text, $l.helpers.random(1, 15) + '<br />');
$l.dom.append(text, $l.helpers.random(1, 15) + '<br />');

$l.dom.append(text, '<div><strong>Getting values from a single column:</strong></div>');
var arr = [{id: 1, count: 5}, {id: 2, count: 12}];
$l.dom.append(text, JSON.stringify($l.helpers.column(arr, 'count')) + '<br />');

$l.dom.append(text, '<div><strong>Shuffling values:</strong></div>');
$l.dom.append(text, $l.helpers.shuffle([1, 2, 3, 4, 5]) + '<br />');

$l.dom.append(text, '<div><strong>Merging objects:</strong></div>');
$l.dom.append(text, JSON.stringify($l.merge({id: 1}, {name: 'eser', count: 5})) + '<br />');

$l.dom.append(text, '<div><strong>Getting count of elements:</strong></div>');
$l.dom.append(text, $l.helpers.getLength({id: 1, name: 'eser', count: 5}) + '<br />');

$l.dom.append(text, '<div><strong>Getting elements with dot notation:</strong></div>');
$l.dom.append(text, $l.helpers.getElement({id: 1, child: { a: 1, b: 2 }}, 'child.a') + '<br />');

$l.dom.append(text, '<div><strong>Getting keys for dot notation:</strong></div>');
$l.dom.append(text, JSON.stringify($l.helpers.getKeysRecursive({id: 1, child: { a: 1, b: 2 }})) + '<br />');

Animation

HTML

<div class="box" id="div-storyboard-animation"></div>

Javascript

var box = $l.id('div-storyboard-animation');

var step1action1 = function () {
    $l.css.setProperty(box, 'background-color', 'blue');
};

var step1action2 = $l.anim.setCss({
    object:   box,
    property: 'left',
    from:     0, // current value
    to:       50,
    time:     1200,
    unit:     'px',
    reset:    false
});

var step2 = function () {
    var deferred = $l.anim.setCss({
        object:   box,
        property: 'left',
        from:     50, // current value
        to:       0,
        time:     600,
        unit:     'px',
        reset:    false
    });

    myStory.add('second-step', deferred);
};

var step3 = function () {
    $l.css.setProperty(box, 'background-color', 'red');
};

var myStory = new $l.storyboard();
myStory.addPhase('first-step');
myStory.addPhase('second-step');
myStory.addPhase('third-step');

myStory.add('first-step', step1action1);
myStory.add('first-step', step1action2);

myStory.add('second-step', step2);

myStory.add('third-step', step3);

myStory.start();

Keys

HTML

<div id="text-keys-assign"></div>

Javascript

var text = $l.id('text-keys-assign');
var pressCount = 0;

$l.keys.assign({
    target: document,
    key: 'f7',
    callback: function() {
        $l.dom.replace(text, 'pressed: ' + ++pressCount);
    }
});

Simple Model Binding

Name:
Entered:

HTML

<div id="mvcsimple">
    Name: <input id="textbox-mvc-simple" type="text" value="" placeholder="Enter text" />
    <br />
    Entered: <span lr-bind="prop.textContent: name">
</div>

Javascript

var myModel = new $l.types.observable({
    name: ''
});

$l.mvc.init('mvcsimple', myModel);

$l.dom.setEvent(
    $l.id('textbox-mvc-simple'),
    'keyup',
    function(ev, element) {
        myModel.name = element.value;

        return false;
    }
);

Model Binding with Calculation

A: B:
Total:

HTML

<div id="mvccalculation">
    A: <input type="text" name="a" value="3" size="3" lr-event="keyup, a: prop.value" />
    B: <input type="text" name="b" value="5" size="3" lr-event="keyup, b: prop.value" />
    <br />
    Total: <span lr-bind="prop.textContent: total"></span>
</div>

Javascript

var myModel = new $l.types.observable({
    a: 3,
    b: 5,
    total: function() {
        return parseInt(this.a) + parseInt(this.b);
    }
});

$l.mvc.init('mvccalculation', myModel);

Model Binding in two-way

Value:

HTML

<div id="mvctwoway">
    <input type="text" name="text" lr-bind="prop.value: text" lr-event="keyup, text: prop.value" />
    <input type="button" value="Set" lr-event="click, text: 'clicked'" />
    <br />
    Value: <span lr-bind="prop.textContent: text"></span>
</div>

Javascript

var myModel = new $l.types.observable({
    text: 'initial'
});

$l.mvc.init('mvctwoway', myModel);

Routes Examples

Wiki Page

Routing

HTML

<div id="text-routes-routing"></div>
<button id="button-routes-routing-1" class="btn btn-default">Route 1</button>
<button id="button-routes-routing-2" class="btn btn-default">Route 1</button>
<button id="button-routes-routing-3" class="btn btn-default">Route 1</button>

Javascript

var text = $l.id('text-routes-routing');
var button1 = $l.id('button-routes-routing-1');
var button2 = $l.id('button-routes-routing-2');
var button3 = $l.id('button-routes-routing-3');

$l.routes.add(
    'test/:name',
    function (name, trans) {
        $l.dom.clear(text);

        $l.dom.append(text, '<div><strong>Name:</strong></div>');
        $l.dom.append(text, name + '<br />');

        $l.dom.append(text, '<div><strong>Transition Data:</strong></div>');
        $l.dom.append(text, JSON.stringify(trans) + '<br />');
    }
);
$l.routes.reload();

$l.dom.setEvent(button1, 'click', function () { $l.routes.go('test/route1'); });
$l.dom.setEvent(button2, 'click', function () { $l.routes.go('test/route2'); });
$l.dom.setEvent(button3, 'click', function () { $l.routes.go('test/route3'); });

Named Routing

HTML

<div id="text-routes-namedrouting"></div>
<button id="button-routes-namedrouting-1" class="btn btn-default">Route 1</button>
<button id="button-routes-namedrouting-2" class="btn btn-default">Route 1</button>
<button id="button-routes-namedrouting-3" class="btn btn-default">Route 1</button>

Javascript

var text = $l.id('text-routes-namedrouting');
var button1 = $l.id('button-routes-namedrouting-1');
var button2 = $l.id('button-routes-namedrouting-2');
var button3 = $l.id('button-routes-namedrouting-3');

$l.routes.addNamed(
    'test2',
    'testNamed/:name',
    function (name, trans) {
        $l.dom.clear(text);

        $l.dom.append(text, '<div><strong>Name:</strong></div>');
        $l.dom.append(text, name + '<br />');

        $l.dom.append(text, '<div><strong>Transition Data:</strong></div>');
        $l.dom.append(text, JSON.stringify(trans) + '<br />');
    }
);
$l.routes.reload();

$l.dom.setEvent(button1, 'click', function () { $l.routes.goNamed('test2', { name: 'route1' }); });
$l.dom.setEvent(button2, 'click', function () { $l.routes.goNamed('test2', { name: 'route2' }); });
$l.dom.setEvent(button3, 'click', function () { $l.routes.goNamed('test2', { name: 'route3' }); });

Templates Examples

Wiki Page

Plain Example

HTML

<script id="script-templates-example" type="text/plain-template">
    Name: {{name.first}} Age: {{age}}
</script>
<div id="text-templates-example"></div>

Javascript

var text = $l.id('text-templates-example');
var script = $l.id('script-templates-example');

var model = { name: { first: 'Jane', last: 'Doe' }, age: 25 };
var result = $l.templates.apply(script, model);
$l.dom.replace(text, result);

Timers Examples

Wiki Page

Setting a timer

HTML

<div id="text-timers-set"></div>

Javascript

var text = $l.id('text-timers-set');
$l.dom.replace(text, 'waiting...<br />');

$l.timers.set({
    'timeout': 500,
    'reset': false,
    'ontick': function() {
        $l.dom.append(text, 'time\'s up');
    }
});

Touch Examples

Wiki Page

Touch Events

Try Tap, Double Tap or Long Tap on the box

HTML

<div class="box" id="div-touch-events"></div>
<ul id="target-touch-events"></ul>

Javascript

var box = $l.id('div-touch-events');
var target = $l.id('target-touch-events');

$l.dom.setEvent(
    box,
    'tap',
    function(event) {
        var createdElement = $l.dom.createElement('LI', { }, 'tap');
        target.appendChild(createdElement);
    }
);

$l.dom.setEvent(
    box,
    'dbltap',
    function(event) {
        var createdElement = $l.dom.createElement('LI', { }, 'dbltap');
        target.appendChild(createdElement);
    }
);

$l.dom.setEvent(
    box,
    'longtap',
    function(event) {
        var createdElement = $l.dom.createElement('LI', { }, 'longtap');
        target.appendChild(createdElement);
    }
);

Types Examples

Wiki Page

Types Example

HTML

<div id="text-types-example"></div>

Javascript

var myModel = new $l.types.observable();
myModel.set('id', 1);
myModel.setRange({count: 15, name: 'eser'});

$l.dom.clear(text);

$l.dom.append(text, '<div><strong>Element with key \'id\':</strong></div>');
$l.dom.append(text, myModel.get('id') + '<br />');

$l.dom.append(text, '<div><strong>Elements with keys \'id\' and \'name\':</strong></div>');
$l.dom.append(text, JSON.stringify(myModel.getRange(['id', 'name'])) + '<br />');

$l.dom.append(text, '<div><strong>Keys:</strong></div>');
$l.dom.append(text, JSON.stringify(myModel.keys()) + '<br />');

$l.dom.append(text, '<div><strong>Length:</strong></div>');
$l.dom.append(text, JSON.stringify(myModel.length()) + '<br />');

$l.dom.append(text, '<div><strong>Check if it has element with key \'name\':</strong></div>');
$l.dom.append(text, JSON.stringify(myModel.exists('name')) + '<br />');

Vars Examples

Wiki Page

Set / Read / Remove

HTML

<select id="select-vars" class="form-control">
    <option value="cookie">Cookies</option>
    <option value="local">LocalStorage</option>
    <option value="session">SessionStorage</option>
</select>
<br />
<button id="button-vars-set" class="btn btn-default">Set</button>
<button id="button-vars-read" class="btn btn-default">Read</button>
<button id="button-vars-remove" class="btn btn-default">Remove</button>
<div id="text-vars"></div>

Javascript

var text = $l.id('text-vars');
var select = $l.id('select-vars');

$l.dom.setEvent(
    $l.id('button-vars-set'),
    'click',
    function() {
        var storage = select.options[select.selectedIndex].value;
        $l.vars.set(storage, 'demopage', 'a ' + storage + ' test<br />');
        $l.dom.append(text, storage + ' set');

        return false;
    }
);

$l.dom.setEvent(
    $l.id('button-vars-read'),
    'click',
    function() {
        var storage = select.options[select.selectedIndex].value;
        var value = $l.vars.get(storage, 'demopage');
        if (value !== null) {
            $l.dom.append(text, storage + '\'s value is: ' + value + '<br />');
        } else {
            $l.dom.append(text, 'you need to set a ' + storage + ' first<br />');
        }

        return false;
    }
);

$l.dom.setEvent(
    $l.id('button-vars-remove'),
    'click',
    function() {
        var storage = select.options[select.selectedIndex].value;
        $l.vars.remove(storage, 'demopage');
        $l.dom.append(text, storage + ' is removed<br />');

        return false;
    }
);

When Examples

Wiki Page

Triggers

HTML

<button id="button-when-set-1" class="btn btn-default">Button 1</button>
<button id="button-when-set-2" class="btn btn-default">Button 2</button>
<div id="text-when-set"></div>

Javascript

var text = $l.id('text-when-set');
$l.dom.replace(text, 'click both buttons in any order<br />');

var promise1 = new $l.deferred();
var promise2 = new $l.deferred();

new $l.when(promise1, promise2)
    .then(function() {
        $l.dom.append(text, 'all set<br />');
    });

$l.dom.setEvent(
    $l.id('button-when-set-1'),
    'click',
    function() {
        $l.dom.append(text, 'button1 clicked...<br />');
        promise1.resolve();

        return false;
    }
);

$l.dom.setEvent(
    $l.id('button-when-set-2'),
    'click',
    function() {
        $l.dom.append(text, 'button2 clicked...<br />');
        promise2.resolve();

        return false;
    }
);

To add your own demos to this page, please don't hesitate to send your pull requests to this branch, all you need to do is editing index.html and placing your scripts into assets/js/demos.js file.

laroux.js 2.1.0

laroux.js is right for you if you:

Ajax Examples

Making a GET request

HTML

Javascript

Anim Examples

Creating a variable animation

Javascript

Creating a CSS animation

HTML

Javascript

CSS Examples

Transitions

HTML

Javascript

Date Examples

Dates

HTML

Javascript

DOM Examples

Clone

HTML

Javascript

Events Examples

Setting Events

HTML

Javascript

Forms Examples

Serializing

HTML

Javascript

Toggle Form Editing

HTML

Javascript

Helpers Examples

Helpers

HTML

Javascript

Storyboard Examples

Animation

HTML

Javascript

Keys Examples

Keys

HTML

Javascript

MVC Examples

Simple Model Binding

HTML

Javascript

Model Binding with Calculation

HTML

Javascript

Model Binding in two-way

HTML

Javascript

Routes Examples

Routing

HTML

Javascript

Named Routing

HTML

Javascript

Templates Examples

Plain Example

HTML

Javascript

Timers Examples

Setting a timer

HTML

Javascript

Touch Examples

Touch Events

HTML

Javascript

Types Examples

Types Example

HTML

Javascript