Web Components test

gistfile1.js

var Wec = {
  Components: {},
  Renderers: {
    Ratchet: {}
  }
};

// Component
// ------
//
// This is the base view for all components,
// It allows you to choose which options are added
// to the instance

Wec.Component = Backbone.Marionette.View.extend({
  constructor: function(options) {
    Backbone.View.prototype.constructor.apply(this, arguments);

    this.options = options || {};
    this.includeOptions = this.includeOptions || {};

    _.each(options, function(value, key) {
      if(_.contains(this.includeOptions, key)) {
        this[key] = value;
      }
    }, this);
  }
});

// TitleBar
// ------
//
// A general purpose title bar

Wec.Components.TitleBar = Wec.Component.extend({
  
  includeOptions: ["backButton", "backButtonTitle", "title", "children"],

  close: function() {
    _.each(this.elements, function(element) {
      // Remove events etc.
    });
    // remove this.elements.container from DOM and clear the this.elements object
  },

  // Render the component
  render: function() {
    var elements = this.elements = {};

    // Create the container element
    var container = elements.container = this.make('header', {
      "class": "bar-title"
    });

    if(this.backButton) {
      // Reference
      var backButton = elements.backButton = this.backButton;
      // Append back button to the container
      container.appendChild(backButton);
    }
    else if(this.backButtonTitle) {
      // We only got a title for the back button,
      // let's create the button ourselves
      var backButton = elements.backButton = new Wec.Renderers.Ratchet.Button(this.backButtonTitle).render().el;
      // Append the back button to the container
      container.appendChild(backButton);
    }

    if(this.title) {
      // Create the title element
      var title = elements.title = this.make('h1', {
        "class": "title"
      }, this.title);

      // Append the title to the container
      container.appendChild(title);
    }

    if(this.children) {
      elements.children = [];
      _.each(this.children, function(child) {
        this.elements.children.push(child);
      }, this);
    }

    // Set the element
    this.setElement(container);
    
    return this;
  },

  // Post rendering methods
  // ------
  
  // Change the header's title
  setTitle: function(value) {
    this.title = value;
    this.elements.title.innerHTML = value;
  },

  // Change the backbutton's text
  setBackButtonTitle: function(value) {
    this.backButtonTitle = value;
    this.elements.backButton.setTitle(value);
  },

  // Hide the backbutton
  hideBackButton: function() {
    this.elements.backButton.style.display = "none";
  },

  // Show to backbuton
  showBackButton: function() {
    this.elements.backButton.style.display = "block";
  }

});

$(function() {
  var header = new Wec.Components.TitleBar({
    title: "Hi!",
  //  backButtonTitle: "Hello!"
  }).render();

  $('#header-region').append(header.el);

  setTimeout(function() {
    header.setTitle('Hi to you too!');
  }, 2000);
});