Glyde Demo

by BradleyStaples

HTML

<header class="header">
    <h1 class="sitetitle">Glyde Demo</h1>
    <h2>by Bradley Staples</h2>
</header>
<div class="glus-container">
    <img class="glus-loading" src="http://resizive.com/img/loading2.gif" width="32" height="32" alt="Loading" />
</div><!-- .glus-container -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta2/handlebars.min.js"></script>
<script id="glus-template" type="text/x-handlebars-template">
    <ul class="glus-list">
      {{#each glus}}
        <li class="glus-item">
            <div class="glus-item-overview">
                <img class="glus-overview-image" src="http://assets0.glyde.com/static/{{img_hash}}/images/games/92x129/{{id}}.jpg" width="92" height="129" alt="{{title}}" />
                <span class="glus-overview-price">{{{calcGLUPrice}}}</span>
            </div>
            <div class="glus-item-details">
                <div class="glus-details-description">
                    <h1 class="glus-description-title">{{title}}</h1>
                    <p class="glus-description-platform">{{platform}}</p>
                </div>
                <div class="glus-details-data">
                    <a class="glus-data-buy" href="#">Buy</a>
                    <span class="glus-data-price">{{{calcGLUPrice}}}</span>
                </div>
            </div>
        </li>
      {{/each}}
    </ul>
</script>

CSS

* {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
    body {background:#ddd; font: 16px/28px Verdana,Arial,Helvetica,sans-serif; color:#333;}
    .glus-loading {display:block; margin:10px auto;}
    .glus-list {list-style:none; display:block; width:990px; margin:0 auto;}
        .glus-item {float:left; width:160px; height:180px; background:#fff; margin:20px 35px; padding:10px; border:1px solid #ccc; border-radius:5px; box-shadow:0 0 3px 0 #ccc; position:relative;}
        .glus-item:after {content:""; display:block; position:absolute; top:0; left:10px; width:138px; height:178px; border-radius:35px; box-shadow:0 5px 15px 0 #777; z-index:-5;}
            .glus-item-overview {}
                .glus-overview-image {display:block; margin:0 auto;}
                .glus-overview-price {display:block; padding:3px; color:#777; font-weight:bold;}
                .glus-overview-price>span {font-size:10px; vertical-align:top;}
            .glus-item-details {opacity:0; position:absolute; z-index:5; top:70px; left:-1px; width:162px; height:109px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .75s ease;}
            .glus-item:hover .glus-item-details {opacity:1;}
                .glus-details-description {height:75px; background:#000; padding:5px;}
                .glus-details-description:after {content:""; display:block; position:absolute; top:0; left:0; z-index:10; background:#000; width:0; height:0; border-right:15px solid #000; border-top:15px solid #fff;}
                    .glus-description-title {color:#fff; font:15px/17px "Times New Roman", Times, Serif; margin:0 0 3px 10px; text-align:left; font-style:italic;}
                    .glus-description-platform {margin:0; padding:0; font-size:10px; line-height:12px; color:#fff; font-weight:normal;}
                .glus-details-data {height:34px; background:#4dc48e;}
                   ...

JavaScript

// "use strict" within each function instead of global in case of strict errors in external scripts (jQuery, handlebars, etc)
// gloabl list below for JSHint.com's testing
/*global $, jQuery, Handlebars*/
var Glyde = {};
Glyde.jsonp_xhr = {};
Glyde.jsonp_xhr[1] = function (obj) {
    "use strict";
    Glyde.GLU.parseObject(obj);
};
// creating my own namespace for the GLU item data to prevent collesion with other Glyde functions
Glyde.GLU = {};
// create script made to accept parameters, this would allow easier pagination if built
Glyde.GLU.createScript = function (start, quantity) {
    "use strict";
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://glyde.com/stores/paging.js?storefront_id=164&offset=' + start + '&limit=' + quantity + '&vertical=games&search_query&sort=rank&category=xbox360&sort_directon=1&jsonp=1&format=js';
    $('head').append(script);
};
// parse the returned data
Glyde.GLU.parseObject = function (returnedObject) {
    "use strict";
    var source, template, output;
    if (!returnedObject.success) {
        // did not return a list of GLUs
        // in product, would inform user via displayed error so user would not sit waiting without reason
        // possibly also send the JSONP obj and other related variables/data to an ajax request to let server log failure
        return false;
    }
    // register a helper to take covert the price returned into currency and format
    Handlebars.registerHelper('calcGLUPrice', function () {
        var price = this.lowest_price_cents;
        if (isNaN(price)) {
            // price is invalid. in production, display error or perhaps link to help page, etc
            return false;
        }
        // in producton, also check to make sure decimal is not already present in data
        // and have separate formating branch if that condition occurs
        price = (price / 100).toFixed(2).toString();
        // add dollar sign, remove...