example.js

example

/*global TemplateDashboard, $*/

// on close logic
Backbone.View.prototype.close = function(){
  this.remove();
  this.unbind();
}

window.TemplateDashboard = {
  data:{},
  ui:{},
  Models: {
    Category: Backbone.Model.extend({
      defaults:{
        visible:true,
        checked: false
      },
      toggleVisibility: function(){
        this.attributes.visible = !this.attributes.visible;
        this.trigger("changeVisibility",{visibility:this.attributes.visible,category:this.attributes.id});
      },
      setVisibility: function(visibility){
        this.attributes.visible = visibility;
        this.trigger("changeVisibility",{visibility:this.attributes.visible,category:this.attributes.id});
      }
    }),
    Tier: Backbone.Model.extend({
      defaults:{
        visible:true,
        checked: false
      },
      toggleVisibility: function(){
        this.attributes.visible = !this.attributes.visible;
        this.trigger("changeVisibility",{visibility:this.attributes.visible,tier:this.attributes.id});
      },
      setVisibility: function(visibility){
        this.attributes.visible = visibility;
        this.trigger("changeVisibility",{visibility:this.attributes.visible,tier:this.attributes.id});
      }
    }),
    Template: Backbone.Model.extend({
      toJSON: function() {
        var json = Backbone.Model.prototype.toJSON.apply(this, arguments);
        json.cid = this.cid;
        return json;
      }
    })
  },
  Collections: {
    TierCollection: Backbone.Collection.extend({
      viewAll: function(){
        var self = this;
        this.each(function(model){
          model.setVisibility(true);
          self.set(model,{remove:false})
        });
      }
    }),
    CategoryCollection: Backbone.Collection.extend({
      viewAll: function(){
        var self = this;
        this.each(function(model){
          model.setVisibility(true);
          self.set(model,{remove:false})
        });
      },
      hideAll: function(){
        var self = this;
        this.each(function(model){
          model.setVisibility(false);
          self.set(model,{remove:false});
        });
      }
    }),
    TemplateCollection: Backbone.Collection.extend({
      initialize: function(){
        this.bind('reset',this.onReset,this);
        this.bind('add',this.onAdd,this);
      },
      onReset: function(modelRemoved){
        if(this.length === 0)
          return this.trigger("isEmpty",{});
      },
      onAdd: function(modelAdded){
        if(this.length !== 0)
          this.trigger("isNotEmpty",{});

        if(this.length <= 4)
          return this.trigger("lengthmin4",{});

        if(this.length > 4)
          return this.trigger("lengthmax4",{});
      },
      debugJson: function(){
        var templates = this.toJSON();
        return _.map(templates,function(template){ return template.title; });
      }
    })
  },
  Views: {
    Category: Backbone.View.extend({
      initialize: function(opts){
        this.template = opts.template;
        this.el = opts.el;
        this.render(); 
      },
      render: function(){
        this.$el.append(this.template(this.model.toJSON()));
      }
    }),
    Tier: Backbone.View.extend({
      initialize: function(opts){
        this.template = opts.template;
        this.el = opts.el;
        this.render(); 
      },
      render: function(){
        this.$el.append(this.template(this.model.toJSON()));
      }
    }),
    Template: Backbone.View.extend({
      initialize: function(opts){
        this.template = opts.template;
        this.el = opts.el;
        this.prepend = opts.prepend;
        this.render();
      },
      render: function(){
        if(this.prepend){
          this.$el.prepend(this.template(this.model.toJSON()));
          this.el = this.el + ' .template[data-cid="' + this.model.cid + '"]';
          this.$el = $(this.el);
          return;
        }
        this.$el.append(this.template(this.model.toJSON()));
        this.el = this.el + ' .template[data-cid="' + this.model.cid + '"]';
        this.$el = $(this.el);
      },
      onClose: function(){
        var self = this;
        this.$el.find('.template[data-cid="' + this.model.cid + '"]').removeClass('fadeIn').addClass('fadeOut');
        setTimeout(function(){
          self.$el.find('.template[data-cid="' + this.model.cid + '"]').dettach();
        },500); 
      }
    }),
    CategoryList: Backbone.View.extend({
      events:{
        "change input[type='checkbox']":"onCheck"
      },
      initialize: function(opts){
        this.app = opts.app;
        this.el = opts.el;
        this.app.ui.categoriesViews = [];
        this.app = opts.app;
        this.app.data.categories.bind('add',this.addToList,this);
      },
      addToList: function(modelAdded){
        var categoryView = new this.app.Views.Category({prepend:this.prepend,model:modelAdded,template:this.app.JST.category,el: this.el});
        this.app.ui.categoriesViews.push(categoryView);
      },
      onCheck: function(e){
        var id = $(e.target).attr('data-id'),
        isChecked = $(e.target).is(':checked');

        // set Sort Comparator for categories
        this.app.ui.templateList.setSortComparator(this.app.ui.templateList.comparator);

        // uncheck all boxes
        this.$el.find('input[type="checkbox"]:checked').each(function(){
          if(this != e.target)
            $(this).attr('checked',false);
        });

        // hide all categories
        this.app.data.categories.hideAll();

        // in case id == all
        if(id == "*"){
          if(isChecked){
            this.app.ui.templateList.setSortComparator();
            return this.app.data.categories.viewAll();
          }else{
            return this.app.data.categories.hideAll();
          }
        }

        if(this.$el.find('input[data-id="*"]').is(':checked')){
          this.$el.find('input[data-id="*"]').attr('checked',false);
          var categories = this.app.data.categories.where({visible:true})
          _.each(categories,function(model){
            model.setVisibility(false);
          });
          this.app.data.categories.set(categories,{remove:false});
        }
        
        if(!isChecked)
          return this.app.data.categories.hideAll();

        var category = this.app.data.categories.get({id:id});
        category.toggleVisibility();
        this.app.data.categories.set(category,{remove:false});
      }
    }),
    TierList: Backbone.View.extend({
      events:{
        "change input[type='checkbox']":"onCheck"
      },
      initialize: function(opts){
        this.app = opts.app;
        this.el = opts.el;
        this.app.ui.tierViews = [];
        this.app = opts.app;
        this.app.data.tiers.bind('add',this.addToList,this);
      },
      addToList: function(modelAdded){
        var tierView = new this.app.Views.Category({model:modelAdded,template:this.app.JST.tier,el: this.el});
        this.app.ui.tierViews.push(tierView);
      },
      onCheck: function(e){        
        this.$el.find('input[type="checkbox"]:checked').each(function(){
          if(this != e.target)
            $(this).attr('checked',false);
        });

        var id = $(e.target).attr('data-id');

        if(id == "*")
          return this.app.data.tiers.viewAll();

        var tier = this.app.data.tiers.get({id:id}),
        pastTiers = this.app.data.tiers.where({visible:true}),
        pastId = this.tierId;

        _.each(pastTiers,function(model){ model.toggleVisibility(); });
        tier.toggleVisibility();

        this.app.data.tiers.set(tier,{remove:false});
        this.app.data.tiers.set(pastTiers,{remove:false});    
      }
    }),
    TemplateList: Backbone.View.extend({
      events:{},
      initialize:function(opts){
        this.app = opts.app;
        this.el = opts.el;
        this.app.ui.templatesViews = {};
        this.app = opts.app;
        this.onList = new (this.app.Collections.TemplateCollection.extend({model:this.app.Models.Template}))();
        this.setSortComparator();
        this.onList.bind('add',this.sort,this);
        this.onList.bind('sort',this.render,this);
        this.onList.bind('reset',this.cleanListUI,this);
        this.app.data.templates.bind('add',this.addToList,this);
        this.onList.bind('isEmpty',this.showComingSoon,this);
        this.onList.bind('lengthmin4',this.showFeaturedTemplates,this);
        this.onList.bind('isNotEmpty',this.hideComingSoon,this);
        this.onList.bind('lengthmax4',this.hideFeaturedTemplates,this);
        this.app.data.categories.bind('changeVisibility',this.handleFilterChange,this);
        this.app.data.tiers.bind('changeVisibility',this.handleFilterChange,this);
      },
      setSortComparator: function(comparator){
        if(comparator)
          return this.onList.comparator = comparator;
        this.onList.comparator = "sort";
      },
      showComingSoon: function(){
        $('.coming-soon').show();
      },
      hideComingSoon: function(){
        $('.coming-soon').hide();
      },
      showFeaturedTemplates: function(){
        $('#popular-templates-list').show();
      },
      hideFeaturedTemplates: function(){
        $('#popular-templates-list').hide();
      },
      addToList: function(modelToAdd){
        this.onList.add(modelToAdd,{remove:false})
      },
      removeFromList: function(cid){
        this.onList.remove({cid:cid});
      },
      render: function(){
        var self = this;
        this.cleanListUI();
        this.onList.each(function(model){
          self.addView(model);
        });
      },
      addView: function(model){
        var categoryView = new this.app.Views.Template({prepend:this.prepend,model:model,template:this.app.JST.template,el: this.el + ' ul'});
        this.app.ui.templatesViews[model.cid] = categoryView;
      },
      cleanListUI: function(){
        var self = this;
        _.each(this.app.ui.templatesViews, function(view,index){
          view.close();
          delete self.app.ui.templatesViews[index];
        });
      },
      handleFilterChange: function(){
        var visibleCategories = this.app.data.categories.where({visible:true}),
        visibleTiers = this.app.data.tiers.where({visible:true}),
        templatesToAdd = [],
        self = this;

        if(visibleCategories.length === 0 || visibleTiers.length === 0)
          return this.onList.reset();

        visibleCategories = _.map(visibleCategories,function(model){ return model.get('id'); });
        visibleTiers = _.map(visibleTiers,function(model){ return model.get('id'); });
        _.each(visibleCategories,function(category){
          _.each(visibleTiers,function(tier){
            var models = self.app.data.templates.where({category:category,tier:tier});
            templatesToAdd = _.union(templatesToAdd,models);
          });
        });
        this.onList.reset();
        this.onList.set(templatesToAdd);
      },
      sortList: function(){
        this.onList.sort();
      },
      comparator: function(model1,model2){
        var model1CategoryId = model1.get('category'),
        model2CategoryId = model2.get('category'),
        model1Category = TemplateDashboard.data.categories.get({id:model1CategoryId}),
        model2Category = TemplateDashboard.data.categories.get({id:model2CategoryId});
        if(model1Category.get('sort') < model2Category.get('sort')){
          return -1;
        }

        if(model1Category.get('sort') > model2Category.get('sort')){
          return 1;
        }

        return model1.get('sort') < model2.get('sort') ? -1 : 1;
      },
      /* addToList: function(modelAdded){
        var categoryView = new this.app.Views.Template({model:modelAdded,template:this.app.JST.template,el: this.el + ' ul'});
        this.app.ui.templatesViews.push(categoryView);
      }, */
      
    }),
    FeaturedTemplateList: Backbone.View.extend({
      events:{},
      initialize:function(opts){
        this.app = opts.app;
        this.el = opts.el;
        this.app.ui.FeaturedTemplatesViews = [];
        this.app = opts.app;
        this.app.data.featuredTemplates.bind('add',this.addToList,this);
      },
      addToList: function(modelAdded){
        var categoryView = new this.app.Views.Template({model:modelAdded,template:this.app.JST.template,el: this.el + ' ul'});
        this.app.ui.FeaturedTemplatesViews.push(categoryView);
      },
    })
  },
  init: function (data) {
    'use strict';
    _.templateSettings.variable = 'data';
    this.loadTemplates();
    this.setupDataLayer();
    this.setupUILayer();
    this.loadData(data);
    console.log('Template Dashboard Initialized');
  },
  loadTemplates: function(){
    this.JST = {};
    var self = this;
    var $templates = $(".inline-template");

    $templates.each(function(i){
        self.JST[$(this).attr("data-id")] = _.template($(this).html());
    });
    console.log(this.JST);
  },
  setupDataLayer: function(){
    this.data.tiers = new (this.Collections.TierCollection.extend({model:this.Models.Tier}))();
    this.data.categories = new (this.Collections.CategoryCollection.extend({model:this.Models.Category}))();
    this.data.templates = new (this.Collections.TemplateCollection.extend({model:this.Models.Template}))();
    this.data.featuredTemplates = new (this.Collections.TemplateCollection.extend({model:this.Models.Template}))();
  },
  setupUILayer: function(){
    this.ui.tierList = new this.Views.TierList({app:this,el:"#templates-dashboard #tier-check ul"});
    this.ui.categoryList = new this.Views.CategoryList({app:this,el:"#templates-dashboard #categories-check ul"});
    this.ui.templateList = new this.Views.TemplateList({app:this,el:"#templates-dashboard #templates-list"});
    this.ui.featuredTemplateList = new this.Views.FeaturedTemplateList({app:this,el:"#templates-dashboard #popular-templates-list"});
  },
  loadData: function(data){
    this.data.tiers.add(data.tiers);
    this.data.categories.add(data.categories);
    this.data.templates.add(data.templates);
    this.data.featuredTemplates.add(data.featuredTemplates);
  }
};

$(document).ready(function () {
    'use strict';
    TemplateDashboard.init({categories:categoriesItems,templates:templatesItems,tiers:tierItems,featuredTemplates:featuredTemplatesItems});
});