gbone.js

(function($) {
  

  
  var root = this,
  

      Gbone,

      observer, cleanup, transitions, state,

      Manager;
  
  if (typeof exports !== 'undefined') {
    Gbone = exports;
  } else {
    Gbone = root.Gbone = {};
  }

  Gbone.VERSION = '0.1.0';
  

  if (!root.Backbone && (typeof require !== 'undefined')) 
    root.Backbone = require('backbone');
  

  if (!root._ && (typeof require !== 'undefined')) 
    root._ = require('underscore')._;
  
  

  observer = function (obj) {

    obj.bindTo = function (source, event, callback) {
      source.bind(event, callback, this);
      this.bindings = this.bindings || [];
      this.bindings.push({ source: source, event: event, callback: callback });
    };

    obj.unbindFromAll = function () {
      _.each(this.bindings, function (binding) {
        binding.source.unbind(binding.event, binding.callback);
      });
      this.bindings = [];
    };
  };
  
  

  cleanup = function (obj) {
    

    obj.cleanup = function () {
      this.unbind();
      if (this.unbindFromAll) this.unbindFromAll();
      this._cleanupChildren();
      this.removeFromParent();
      this.remove();
    };
 

    obj.appendChild = function (view) {
      this._addChild(view);
      $(this.el).append(view.el);
    };

    obj.appendChildInto = function (view, container) {
      this._addChild(view);
      this.$(container).append(view.el);
    };

    obj._addChild = function (view) {
      this.children = this.children || [];
      this.children.push(view);
      view.parent = this;
    };

    obj._cleanupChildren = function () {
      _.each(this.children, function (view) {
        if (view.cleanup) view.cleanup();
      });
    };

    obj.removeFromParent = function () {
      this.parent && this.parent.removeChild(this);
    };

    obj.removeChild = function (view) {
      var index = _.indexOf(this.children, view);
      this.children.splice(index, 1);
    };
  };
  
  

  transitions = function (obj) {
    

    var effectOptions = {
      duration: 450,
      easing: 'cubic-bezier(.25, .1, .25, 1)'
    },
    

    handleTransition = function (that, anim, options, callback) {
      
      var l = that.transitionBindings.length,

          animate = function (container, ops, index) {

            if (!$.fn[anim]) throw new Error('$.fn.' + anim + ' is not available');
            
            if ($.fn.gfx) {

              container[anim](ops);

              if (index === l-1) container.queueNext(callback);
            } else {

              (index === l-1) ? container[anim](ops, callback) : container[anim](ops);
            }
          };
      

      _.each(that.transitionBindings, function(elm, index) {
        var container = that.$(elm);
        if (container.length === 0)
          throw new Error('The container element to animate is not \
          availabe in this view.');
        
        animate(container, options, index);
      });
    };
    

    obj.transitionBindings = ['.container'];
    

    obj.effects = {
      

        left: function (callback) {
          var $el = $(this.el),
              options = _.extend({}, effectOptions, {direction: 'left'})
          
          handleTransition(this, 'gfxSlideIn', options, callback);
        },

        right: function (callback) {
          var $el = $(this.el),
              options = _.extend({}, effectOptions, {direction: 'right'});
           
          handleTransition(this, 'gfxSlideIn', options, callback);
        }
    };
    
    

    obj.reverseEffects = { 

      left: function (callback) {
        var $el = $(this.el),
            options = _.extend({}, effectOptions, {direction: 'right'});
         
        handleTransition(this, 'gfxSlideOut', options, callback);
      },
      

      right: function (callback) {
        var $el = $(this.el),
            options = _.extend({}, effectOptions, {direction: 'left'});
         
        handleTransition(this, 'gfxSlideOut', options, callback);
      }
    };
    

    obj.addTransition = function (transition) {
      if (!transition.effects) throw new Error('transition.effects is not set.');
      if (!transition.reverseEffects) throw new Error('transition.reverseEffects \
      is not set.');
      _.extend(this.effects, transition.effects);
      _.extend(this.reverseEffects, transition.reverseEffects);
    };
    
  };
  
  

  state = function (obj) {
    
    obj.active = function () {

      Array.prototype.unshift.call(arguments, 'active');
      this.trigger.apply(this, arguments);
    };

    obj.isActive = function () {
      return $(this.el).hasClass('active');
    };

    obj._activate = function (params) {
      var that = this;
      
      $(this.el).addClass('active').show();

      if (params && params.trans && this.effects && 
        this.effects[params.trans]) {
        this.effects[params.trans].call(this, function() {
          that.trigger('activated');
        });
      } else {
        this.trigger('activated');
      }
    };

    obj._deactivate = function (params) {
      if (!this.isActive()) return;

      var that = this,
          callback = function () {
            $(that.el).removeClass('active').hide();
            that.trigger('deactivated');
          };

      if (params && params.trans && this.reverseEffects && 
        this.reverseEffects[params.trans]) {
        this.reverseEffects[params.trans].call(this, callback);
      } else {
        callback();
      }
    };
  };
  
  

  Manager = function () {
    this._setup.apply(this, arguments);
  };

  _.extend(Manager.prototype, Backbone.Events, {
    
    _setup: function () {
      this.views = [];
      this.bind('change', this._change, this);
      this.add.apply(this, arguments);
    },

    add: function () {
      _.each(Array.prototype.slice.call(arguments), function (view) {
        this.addOne(view);
      }, this);
    },

    addOne: function (view) {
      view.bind('active', function () {
        Array.prototype.unshift.call(arguments, view);
        Array.prototype.unshift.call(arguments, 'change');
        this.trigger.apply(this, arguments);
      }, this);

      this.views.push(view);
    },
    

    deactivateAll: function () {
      Array.prototype.unshift.call(arguments, false);
      Array.prototype.unshift.call(arguments, 'change');
      this.trigger.apply(this, arguments);
    },
    

    _change: function (current) {
      var args = Array.prototype.slice.call(arguments, 1);

      _.each(this.views, function (view) {
        if (view === current) {
          view._activate.apply(view, args);
        } else {
          view._deactivate.apply(view, args);
        }
      }, this);
    }
  });
  
  

  Gbone.Stage = function (options) {
    this._setup(options, 'stage');
    Backbone.View.call(this, options);
  };

  _.extend(Gbone.Stage.prototype,
           Backbone.View.prototype, {
    

    skeleton: _.template('<header></header><article class="viewport"> \
    </article><footer></footer>'),
      
    

    add: function () {
      this._manager = this._manager || new Manager();
      this._manager.add.apply(this._manager, arguments);
      this._append.apply(this, arguments);
    },
    

    getPanel: function(name) {

      if (!this._manager) return null;

      var views = this._manager.views;
      return _.find(this._manager.views, function (panel) {
        return panel.name === name;
      });
    },

    _append: function () {
      if (this.$('.viewport').length === 0) {
        throw new Error('The Stage must have an element with \
        class \'viewport\' that will be used to append the Panels to.');
      }
      
      _.each(Array.prototype.slice.call(arguments), function (panel) {
        if (panel.stage !== this) panel.stage = this;
        this.appendChildInto(panel, '.viewport');
      }, this);
      
    },
    

    _setup: function (options) {
      _.bindAll(this);

      options.el ? this.el = options.el : this._ensureElement();
      

      this.name = options.name || _.uniqueId('stage-');

      $(this.el).addClass('stage').html(this.skeleton());
      

      this.router = options.router || Backbone.Router.extend();
    }
    
  });
  
  observer(Gbone.Stage.prototype);
  cleanup(Gbone.Stage.prototype);
  
  

  Gbone.Panel = function (options) {
    this._setup(options, 'panel');
    Backbone.View.call(this, options);
  };

  _.extend(Gbone.Panel.prototype,
           Backbone.View.prototype, {
         

     skeleton: _.template('<div class="container"><header></header><article></article></div>'),

     routePanel: function (callback) {
       if (this.stage) {
         this.stage.router.route(this.stage.name + '/' + this.name + '/trans-:trans', this.name, callback);
         this.stage.router.route(this.stage.name + '/' + this.name, this.name, callback);
       } else {
         throw new Error('A Stage for this Panel is not available.');
       }
     },
        

     _setup: function (options) {
       _.bindAll(this);

       options.el ? this.el = options.el : this._ensureElement();

       this.name = options.name || _.uniqueId('panel-');

       $(this.el).addClass('panel').html(this.skeleton());

       if (options.stage) {
         this.stage = options.stage;
         this.stage.add(this);
       }
    }
  });

  observer(Gbone.Panel.prototype);
  state(Gbone.Panel.prototype);
  cleanup(Gbone.Panel.prototype);
  transitions(Gbone.Panel.prototype);
  
  Gbone.Stage.extend = Gbone.Panel.extend = Backbone.View.extend;

}).call(this, this.Zepto || this.jQuery);