Created
December 8, 2012 13:24
-
-
Save vespakoen/4240266 to your computer and use it in GitHub Desktop.
Web Components test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.el = container; | |
this.$el = this.$(this.el); | |
return this; | |
}, | |
// Post rendering methods | |
// ------ | |
// Change the header's title | |
setTitle: function(value) { | |
this.elements.title.innerHTML = value; | |
}, | |
// Change the backbutton's text | |
setBackButtonText: function(value) { | |
this.elements.backButton.setText(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); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment