Feature Bets Handlebars Partials

by amindunited

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script id="feature_bets_container" type="text/x-handlebars-template">

    <div class="data-module feature-bets cnr cnrfffx5px open">
      <div class="tabbed-content">
        <ul class="tabs cnr cnrEDx5px clearfix">
          <li class="title">
            <h2 class="module-title module-view-toggle">Feature Bets</h2>
              {{> feature_bets_tabs }}
          </li>
        </ul>
        <div class="tab-contents-wrap module-hideable">
            {{> feature_bets_tab_content }}            
        </div>
      </div>
</script>
<script id="feature_bets_tabs" type="text/x-handlebars-template">
{{resetParentIds}}
{{#each feature_bets.categories}}
{{registerAttr ../feature_bets.categories "parent_id"}}
{{contextualIndex ../feature_bets.categories}}
        {{#first_pId ../feature_bets.categories}}
            <li class="tab{{#first_index ../../feature_bets.categories}} active first{{/first_index}}{{#isLast ../../feature_bets.categories}} last{{/isLast}}" data-tab="tabs-B-{{get_index}}">

            <a href="#"><img src="{{image_path}}icons/category/light/{{category_image}}" alt=""/> {{parent_name}}</a>
                <span class="cnrTL"></span><span class="cnrTR"></span>
            </li>
        {{/first_pId}}
{{/each}}
</script>


<script id="feature_bets_tab_content" type="text/x-handlebars-template">
{{reset_index}}
{{#each feature_bets.categories}}
    {{! /*<-- Sets the context for this section of the loop -->*/ }}
                {{registerAttr ../feature_bets.categories "parent_id"}}
                {{contextualIndex ../feature_bets.categories}}
    <div class="tab-content{{#first_index  ../feature_bets.categories}} active{{/first_index}}" id="tabs-B-{{get_index}}">
        <ul class="columns-2 clearfix">
            {{> feature_bets_category}}
        </ul>
    </div>
    
{{/each}}
</script>
<script id="feature_bets_category"...

CSS

div.cluetip-default{color:white;padding:0px;}
div.cluetip-default .cluetip-outer{color:white;padding:0px;}
.cluetip-default{color:#ffffff;text-shadow:1px 1px #000;font-size:11px;font-weight:normal;text-align:left;padding:0px;}
.cluetip-default h3#cluetip-title{margin:0 0 1px;z-index:3000;text-align:left;max-width:250px;font-weight:normal;}
.ui-cluetip-content{max-height:300px;overflow:hidden;}
.hint-box .hb-tl,.hint-box .hb-tr,.hint-box .hb-bl,.hint-box .hb-br{height:12px;background:url("http://mr46shop.local/luxbet/images/head/head/tool-tip-tb.png") no-repeat 0 0 transparent;}
.hint-box .hb-tr{width:12px;background-position:100% 0;}
.hint-box .hb-bl,.hint-box .hb-br{height:17px;background-position:0 100%;}
.hint-box .hb-br{width:12px;background-position:100% 100%;}
.hint-box .hb-ml,.hint-box .hb-mr{height:26px;background:url("http://mr46shop.local/luxbet/images/head/head/tool-tip-mid.png") no-repeat 0 center transparent;}
.hint-box .hb-ml{max-width:204px;padding:2px 8px 2px 27px;font-size:12px;color:#fff;text-shadow:1px 1px 1px #000;-webkit-text-shadow:1px 1px 1px #000;-moz-text-shadow:1px 1px 1px #000;-o-text-shadow:1px 1px 1px #000;-khtml-text-shadow:1px 1px 1px #000;vertical-align:middle;}
.hint-box .hb-ml>*{max-width:204px;}
.hint-box .hb-mr{width:12px;background-position:100% center;}
div.more-bets-tooltip{width:250px;}
div.more-bets-tooltip div.content{background:url("http://mr46shop.local/luxbet/images/head/head/tool-tip-mid.png") no-repeat 0 center transparent;width:250px;}
div.more-bets-tooltip div.content span{overflow:auto;overflow-x:hidden;max-height:170px;padding-left:20px;padding-right:20px;width:200px;display:block;}
div.more-bets-tooltip div.top{height:12px;background:url("http://mr46shop.local/luxbet/images/head/head/tool-tip-tb.png") no-repeat top left transparent;}
div.more-bets-tooltip div.bottom{height:12px;background:url("http://mr46shop.local/luxbet/images/head/head/tool-tip-tb.png") no-repeat bottom left...

JavaScript

var add_handlebar_helper_functions = function () {
    /*global Handlebars*/

    var loop_index = 0;
    var odd = 0;
    var parent_ids = [];

    // **requires that reset_index is called at the start of the loop**
    //counts iterations and returns boolean if current iteration is the first
    Handlebars.registerHelper('first_index', function(context, block) {
        loop_index++;
        if (loop_index === 1) {
            return block.fn(this);
        }
        return block.inverse();
    });

    //returns current iteration count
    Handlebars.registerHelper('get_index', function () {
        return loop_index - 1;
    });

    //resets current index count
    Handlebars.registerHelper('reset_index', function () {
        loop_index = 0;
    });


    //alternates true/false for each call
    Handlebars.registerHelper('odd_not_even', function () {

        if (odd > 0) {
            odd = 0;
            return false;
        }

        odd++;

        return true;
    });


    // a iterate over a specific portion of a list.
    // usage: {{#slice items offset="1" limit="5"}}{{name}}{{/slice}} : items 1 thru 6
    // usage: {{#slice items limit="10"}}{{name}}{{/slice}} : items 0 thru 9
    // usage: {{#slice items offset="3"}}{{name}}{{/slice}} : items 3 thru context.length
    // defaults are offset=0, limit=5
    Handlebars.registerHelper('slice', function (context, block) {
        var ret = ""
        var offset = parseInt(block.hash.offset) || 0;
        var limit = parseInt(block.hash.limit) || 5;
        var i = (offset < context.length) ? offset : 0;
        var j = ((limit + offset) < context.length) ? (limit + offset) : context.length;

        for (i, j; i < j; i++) {
            ret += block.fn(context[i]);
        }

        return ret;
    });

    //Is first iteration within current contextual loop
    Handlebars.registerHelper('isFirst', function (context, block) {
        if (context[0] == this) {
            return block.fn(this);
    ...