Broker

Publish & Subscription Example

by Couto

HTML

<script src="https://github.com/phiggins42/bloody-jquery-plugins/raw/master/pubsub.js"></script>
<script src="http://yourjavascript.com/12201161701/sha562.js"></script>
<form action="#" method="post" accept-charset="utf-8" id="brokerForm">
<fieldset id="broker_example" class="">
    <legend>Broker Example</legend>
    <label for="username">Username</label><input type="text" name="username" value="" id="username">
    <label for="password">Password</label><input type="password" name="password" value="" id="password">
    <input type="submit" id="login" value="Login &rarr;">
</fieldset>
</form>
<div id="msg" class="hide"></div>

CSS

*{
    font: 13px/1.231 "Helvetica Neue", Helvetica, Arial, FreeSans, sans-serif;
    color: #444;
}

legend { font-weight: bold; }

label,
input{
    float:left;
    vertical-align:middle;
}

label{
    clear: left;
    width: 60px;
    text-align: right;
    margin: 5px 0px;
    line-height: 2.5em;
    cursor: pointer;
    position: relative;
    left: 10px;
    z-index: 3;
}

input[type=text],
input[type=password]{
    width: 200px;
    height: 30px;
    margin: 5px 0;
    border: 1px solid #666;
    position:relative;
    left: -60px;
    text-indent: 10px;
    font-weight: bold;
}

input:focus{
    outline: none;
    -moz-box-shadow: 0 0px 3px #888;
    -webkit-box-shadow: 0 0px 3px #888;
}

input[type=submit]{
    width: 205px;
    clear: both;
    padding: 5px 10px 6px;
    color: #fff;
    border: 1px solid #666;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px #999;
    -webkit-box-shadow: 0 1px 3px #999;
    text-shadow: 0 -1px 1px #222;
    border-bottom: 1px solid #222;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.14, rgb(46,46,46)),
        color-stop(0.74, rgb(77,77,77))
        );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(46,46,46) 14%,
        rgb(77,77,77) 74%
        )
}

#msg{
    width: 100%;
    height: 30px;
    margin: 20px 0;
    border: 1px solid #8e8;
    text-indent: 10px;
    font-weight: bold;
    outline: none;
    -moz-box-shadow: 0 0px 5px #8e8, inset 0 0px 5px #ccc;
    -webkit-box-shadow: 0 0px 5px #8e8, inset 0 0px 5px #ccc;
    vertical-align: middle;
    text-shadow: 0 1px 1px...

JavaScript

(function() {
    var S4 = {
        hash: function() { /* Generate four random hex digits. */
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        },
        guid: function() { /* Generate a pseudo-GUID by concatenating random hexadecimal. */
            return (this.hash() + this.hash() + "-" + this.hash() + "-" + this.hash() + "-" + this.hash() + "-" + this.hash() + this.hash() + this.hash());
        }
    };

/*
    Local Storage Object Wrapper   
*/

    var LS = LS || {
        uid: function() {
            var uid = (localStorage.key(0)) ? localStorage.key(0) : S4.guid();
            return uid;
        },
        save: function(Obj) {
            localStorage.setItem(LS.uid(), JSON.stringify(Obj));
        },
        get: function() {
            return JSON.parse(localStorage.getItem(LS.guid()));
        },
        remove: function() {
            localStorage.removeItem(LS.uid());
            return LS.get();
        }
    };

/*
    Data Object
*/
    var Data = Data || {
        hash: function(str) { /* Converts the password to a Sha256 hash. I know it's not safe, but it's only educational =) */
            var h = (str.length) ? Sha256.hash(str) : '';
            $.publish('display/hash', [h]);
            return h;
        }, /* Gets the form info, parse into an Array, then create an Object to be saved on localStorage */
        parse: function(form) {
            var formValues = $(form).serializeArray(),
                finalObj = {},
                name, i; /* For() Counter */
            for (i = formValues.length - 1; i >= 0; i -= 1) {
                name = formValues[i].name;
                finalObj[name] = formValues[i].value;
            }
            finalObj.password = Data.hash(finalObj.password);
            $.publish('set/login', [finalObj]);
        },
        get: (function() {
            //Somehow get through publish the data needed
        }())
    };

/*
    User Interface Object
*/
   ...