on.js Code

Integrated Performance Environment Library (client-side JavaScript)

Brought to you by: clayendisk

Tree [0c9696] master /

History

HTTPS access

File	Date	Author	Commit
benchmark	2015-04-30	clayendisk	[aa1220] Archive repository.
example	2015-05-04	clayendisk	[5ca613] Update syntax.html
script	2015-04-30	clayendisk	[aa1220] Archive repository.
LICENSE	2015-04-30	clayendisk	[aa1220] Archive repository.
README.md	2015-05-07	King DOM	[0c9696] Update README.md

Read Me

on.js

return true;

A JavaScript Library

What is on.js?

This free library aims to help client-side programmers maximize performance and functionality in the cross-browser environment, where the JavaScript run-time manages HTML/CSS content and presentation.

Allow me to thank some of the great people that can relate!

Supporters!

Thank(You);

XirSys, awesome, free WebRTC Cloud Service!
* making the web a better place

Alex Thomas, great guy and start-up founder of Pylon.io!
* seeing on's benefit in Pylon's future web success

Contributers!

Thank(You);

John-David Dalton, great guy and the creator of Lo-Dash!
* renaming on's toString return value

What is on.js?

A Javascript Library

It uniquely integrates the essentials of web JavaScript.

a.) Best-practices
b.) Cross-browser compatability (Wk/Ff/O/IE7+)
c.) DOM iteration/manipulation
d.) Event callbacks
e.) Ajax polling
f.) File-uploading
g.) Script-loading
h.) Asynchronous scope-intelligence
i.) Datatype-detection
j.) Iframes and more!

Including optional resources for development:

- Scope-intelligent console wiki

A Keyword

on

The single keyword, on, sweetens your javascript with two flavors of sugar!

A Syntax

(command)[on](data)(parameter);

Friendly and intuitive!

====================================

('mouseup')[on](theElement)
(   function(e)
    {   
        this;
    }
);

('for each img')[on](theElement)
(   function(i)
    {   
        this[i];
        return false;
    }
);

('POST applesauce=true')[on]('../ajax/url/?topic=food')
(   function()
    {   
        this.POST;
        this.GET;
        this.responseText;
    }
);

A Standard

on[type];

Conventional augmentation!

====================================

on.document.eachElementByAttribute
(   'the-attribute'
,   'the-value'
,   function(i)                        
    {
        this[i];                  
        return false;
    }
);

on.element.offsetLeft.call(theElement);

on.iframe.document(theIframeElement);

A Paradigm

this instanceof Cool;

Fluidly adapts to your HTML with

Hybrid functionality!
Nestable bindings!
Graceful degradation!
Polyfill!
& More!

====================================

<form id="TheUploadForm" action="../the/static/url">

    <input type="file" value="Select A File" />

    <input type="submit" value="Submit" />

</form>

('submit')[on](document.getElementById('TheUploadForm'))
(   function(e)
    {
        on.event.preventDefault.call(e);

        this.action = "../the/ajax/url";

        ('upload')[on](this)
        (   function(e)
            {
                console.log( 100 * ( e.loaded/e.total ) + "%" )
            }
        );

        ('POST')[on](this)
        (   function()
            {
                console.log( this.responseText )
            }
        );
    }
);

A Mentor

on.about();

Live console manual!

source: /opt/on.about.js
* Inject during development
* Delete during production

method: on.about()
* Call anywhere!
* Asynchronously scope-intelligent

====================================

var contentBody = document.getElementById('content-body');
var contentTabs = document.getElementById('content-tabs');

var activeTab;

('mouseover')[on](contentTabs.children)
(   function(e)
    {
        on.event.preventDefault.call(e);
        on.about(); //prints man page for Events on Elements

        var me = activeTab = this;

        ('GET')[on](this.href+"?ajax=true")
        (   function()
            {
                if (activeTab != me) return;

                on.about(); //prints man page for ajax GET on URL
                contentBody.innerHTML = this.responseText;
            }
        );
    }
);

on.about(); //prints man page for on.js