├── index.html ├── css └── style.css └── js ├── app.js ├── underscore-min.js └── backbone-min.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0 auto; 3 | } 4 | 5 | #font-preview { 6 | padding: 0 100px; 7 | } 8 | 9 | .layout { 10 | padding: 20px; 11 | } 12 | 13 | .layout h1 { 14 | font-size: 3em; 15 | font-weight: bold; 16 | 17 | overflow: hidden; 18 | } 19 | 20 | .layout ul { 21 | margin-top: 0.5em; 22 | } 23 | 24 | .layout ul li { 25 | list-style: disc; 26 | list-style-position: inside; 27 | margin-top: 1em; 28 | } 29 | 30 | .layout h3 { 31 | font-size: 1.5em; 32 | font-weight: bold; 33 | 34 | overflow: hidden; 35 | } 36 | 37 | .layout h2 { 38 | font-size: 2em; 39 | font-weight: bold; 40 | 41 | overflow: hidden; 42 | } 43 | 44 | .layout section { 45 | position: relative; 46 | margin-top: 2em; 47 | 48 | overflow: hidden; 49 | } 50 | 51 | .layout .column { 52 | display: table-cell; 53 | padding-left: 2em; 54 | } 55 | 56 | .layout .column:first-child { 57 | padding-left: 0; 58 | } 59 | 60 | .layout.masked * { 61 | cursor: pointer; 62 | } 63 | 64 | .layout.masked { 65 | font-size: 30%; 66 | padding: 0; 67 | } 68 | 69 | .layout section { 70 | max-height: 31em; 71 | overflow: hidden; 72 | } 73 | 74 | .layout.masked > div { 75 | opacity: 0.6; 76 | margin-bottom: 10em; 77 | } 78 | 79 | .layout.masked > div:hover { 80 | opacity: 1; 81 | color: pointer; 82 | } 83 | 84 | .layout.masked p, .layout.masked li { 85 | background-color: #eee; 86 | color: #eee; 87 | } 88 | 89 | 90 | .layout.masked h2, .layout.masked h3, .layout.masked.h1, .layout.masked header *, .layout.masked footer * { 91 | background-color: #bbb; 92 | color: #bbb; 93 | } 94 | 95 | .layout p { 96 | line-height: 130%; 97 | margin-top: 1em; 98 | overflow: hidden; 99 | } 100 | 101 | .layout section p:first-child { 102 | margin-top: 0; 103 | } 104 | 105 | .layout footer { 106 | clear: both; 107 | } 108 | 109 | .layout footer p { 110 | max-height: 1.3em; 111 | } 112 | 113 | #font-preview > div { 114 | display: table-cell; 115 | vertical-align: top; 116 | } 117 | 118 | #font-preview .panel { 119 | width: 200px; 120 | padding: 20px; 121 | } 122 | 123 | #font-preview .panel .select_layout { 124 | width: 150px; 125 | } 126 | 127 | .menu_right .column:first-child { 128 | width: 70%; 129 | } 130 | 131 | .menu_left .column:first-child { 132 | width: 30%; 133 | } 134 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | var lorem_ipsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis risus a urna feugiat mollis in vel elit. Vivamus nibh ipsum, ultrices in tristique vitae, bibendum id orci. Praesent mollis mollis auctor. Nam sapien purus, placerat in aliquam lacinia, scelerisque at diam. Morbi nec enim non metus porttitor adipiscing nec nec urna. Nunc malesuada lectus dui, eget convallis diam. Nulla hendrerit imperdiet magna nec feugiat. Quisque malesuada vehicula facilisis. Morbi nibh erat, vehicula eget pulvinar non, aliquam vel magna. Donec faucibus viverra urna, ac mollis risus tempor ut. Praesent erat quam, gravida at tristique a, tempus vel leo. Nulla neque elit, ultrices pretium varius ut, egestas vel arcu. Vivamus eros ligula, rhoncus in interdum sit amet, mattis at urna. Duis at risus metus, vel varius ligula. Pellentesque non risus nec urna eleifend mollis ac at eros. Nunc pellentesque lobortis nisi id varius. "; 2 | lorem_ipsum += lorem_ipsum + lorem_ipsum; 3 | 4 | var sample_list = ""; 5 | for (var i=0; i<6; i++) { 6 | sample_list += "
  • Item "+i+"
    • "; 7 | } 8 | 9 | var LayoutModel = Backbone.Model.extend({ 10 | }); 11 | 12 | var layouts = { 13 | 'simple': _.template([ 14 | "

    ", 15 | "
    ", 16 | "
    ", 17 | "

    ", 18 | "
    ", 19 | "
    ", 20 | "" 21 | ].join('')), 22 | 23 | 'two_column': _.template([ 24 | "

    ", 25 | "
    ", 26 | "
    ", 27 | "

    ", 28 | "
    ", 29 | "
    ", 30 | "

    ", 31 | "
    ", 32 | "
    ", 33 | "" 34 | ].join('')), 35 | 36 | 'three_column': _.template([ 37 | "

    ", 38 | "
    ", 39 | "
    ", 40 | "

    ", 41 | "
    ", 42 | "
    ", 43 | "

    ", 44 | "
    ", 45 | "
    ", 46 | "

    ", 47 | "
    ", 48 | "
    ", 49 | "" 50 | ].join('')), 51 | 52 | 'menu_left': _.template([ 53 | "

    ", 54 | "
    ", 55 | "
    ", 56 | "

    ", 57 | "", 58 | "
    ", 59 | "
    ", 60 | "

    ", 61 | "

    ", 62 | "
    ", 63 | "
    ", 64 | "" 65 | ].join('')), 66 | 67 | 'menu_right': _.template([ 68 | "

    ", 69 | "
    ", 70 | "
    ", 71 | "

    ", 72 | "
    ", 73 | "
    ", 74 | "

    ", 75 | "", 76 | "
    ", 77 | "
    ", 78 | "" 79 | ].join('')), 80 | } 81 | 82 | var LayoutView = Backbone.View.extend({ 83 | initialize: function(layout){ 84 | this.layout = layout; 85 | 86 | if (!this.layout) 87 | this.layout = 'simple'; 88 | 89 | $(this.el).addClass(this.layout); 90 | }, 91 | 92 | render: function(){ 93 | $(this.el).html(layouts[this.layout]); 94 | this.fillContent(); 95 | 96 | return this.el; 97 | }, 98 | 99 | fillContent: function(){ 100 | $(this.el).find('p').html(lorem_ipsum); 101 | $(this.el).find('ul').html(sample_list); 102 | $(this.el).find('h1').html("Sample Header H1"); 103 | $(this.el).find('h2').html("Sample Header H2"); 104 | $(this.el).find('h3').html("Sample Header H3"); 105 | } 106 | }); 107 | 108 | var AppView = Backbone.View.extend({ 109 | el: $("#font-preview"), 110 | 111 | template: _.template([ 112 | "
    ", 113 | "
    " 114 | ].join('')), 115 | 116 | initialize: function(){ 117 | var self = this; 118 | $(this.el).html(this.template()); 119 | 120 | this.renderLayout(); 121 | 122 | var percent = 100*150.0/this.$('>.layout').width(); 123 | 124 | _.each(layouts, function(value, key){ 125 | var layout = new LayoutView(key).render(); 126 | this.$('.panel .select_layout').append(layout) 127 | .css({ 'font-size': percent+'%' }); 128 | 129 | $(layout).bind('click', function(){ 130 | self.renderLayout(this.className); 131 | }); 132 | 133 | }); 134 | }, 135 | 136 | renderLayout: function(layout){ 137 | var el = new LayoutView(layout).render(); 138 | this.$('>.layout').html(el); 139 | } 140 | }); 141 | 142 | new AppView(); 143 | -------------------------------------------------------------------------------- /js/underscore-min.js: -------------------------------------------------------------------------------- 1 | // Underscore.js 1.1.6 2 | // (c) 2011 Jeremy Ashkenas, DocumentCloud Inc. 3 | // Underscore is freely distributable under the MIT license. 4 | // Portions of Underscore are inspired or borrowed from Prototype, 5 | // Oliver Steele's Functional, and John Resig's Micro-Templating. 6 | // For all details and documentation: 7 | // http://documentcloud.github.com/underscore 8 | (function(){var p=this,C=p._,m={},i=Array.prototype,n=Object.prototype,f=i.slice,D=i.unshift,E=n.toString,l=n.hasOwnProperty,s=i.forEach,t=i.map,u=i.reduce,v=i.reduceRight,w=i.filter,x=i.every,y=i.some,o=i.indexOf,z=i.lastIndexOf;n=Array.isArray;var F=Object.keys,q=Function.prototype.bind,b=function(a){return new j(a)};typeof module!=="undefined"&&module.exports?(module.exports=b,b._=b):p._=b;b.VERSION="1.1.6";var h=b.each=b.forEach=function(a,c,d){if(a!=null)if(s&&a.forEach===s)a.forEach(c,d);else if(b.isNumber(a.length))for(var e= 9 | 0,k=a.length;e=e.computed&&(e={value:a,computed:b})});return e.value};b.min=function(a, 13 | c,d){if(!c&&b.isArray(a))return Math.min.apply(Math,a);var e={computed:Infinity};h(a,function(a,b,f){b=c?c.call(d,a,b,f):a;bd?1:0}),"value")};b.sortedIndex=function(a,c,d){d||(d=b.identity);for(var e=0,f=a.length;e>1;d(a[g])=0})})};b.zip=function(){for(var a=f.call(arguments),c=b.max(b.pluck(a,"length")),d=Array(c), 16 | e=0;e=0;d--)b=[a[d].apply(this,b)];return b[0]}};b.after=function(a,b){return function(){if(--a<1)return b.apply(this,arguments)}};b.keys=F||function(a){if(a!==Object(a))throw new TypeError("Invalid object");var b=[],d;for(d in a)l.call(a,d)&&(b[b.length]=d);return b};b.values=function(a){return b.map(a, 20 | b.identity)};b.functions=b.methods=function(a){return b.filter(b.keys(a),function(c){return b.isFunction(a[c])}).sort()};b.extend=function(a){h(f.call(arguments,1),function(b){for(var d in b)b[d]!==void 0&&(a[d]=b[d])});return a};b.defaults=function(a){h(f.call(arguments,1),function(b){for(var d in b)a[d]==null&&(a[d]=b[d])});return a};b.clone=function(a){return b.isArray(a)?a.slice():b.extend({},a)};b.tap=function(a,b){b(a);return a};b.isEqual=function(a,c){if(a===c)return!0;var d=typeof a;if(d!= 21 | typeof c)return!1;if(a==c)return!0;if(!a&&c||a&&!c)return!1;if(a._chain)a=a._wrapped;if(c._chain)c=c._wrapped;if(a.isEqual)return a.isEqual(c);if(b.isDate(a)&&b.isDate(c))return a.getTime()===c.getTime();if(b.isNaN(a)&&b.isNaN(c))return!1;if(b.isRegExp(a)&&b.isRegExp(c))return a.source===c.source&&a.global===c.global&&a.ignoreCase===c.ignoreCase&&a.multiline===c.multiline;if(d!=="object")return!1;if(a.length&&a.length!==c.length)return!1;d=b.keys(a);var e=b.keys(c);if(d.length!=e.length)return!1; 22 | for(var f in a)if(!(f in c)||!b.isEqual(a[f],c[f]))return!1;return!0};b.isEmpty=function(a){if(b.isArray(a)||b.isString(a))return a.length===0;for(var c in a)if(l.call(a,c))return!1;return!0};b.isElement=function(a){return!!(a&&a.nodeType==1)};b.isArray=n||function(a){return E.call(a)==="[object Array]"};b.isArguments=function(a){return!(!a||!l.call(a,"callee"))};b.isFunction=function(a){return!(!a||!a.constructor||!a.call||!a.apply)};b.isString=function(a){return!!(a===""||a&&a.charCodeAt&&a.substr)}; 23 | b.isNumber=function(a){return!!(a===0||a&&a.toExponential&&a.toFixed)};b.isNaN=function(a){return a!==a};b.isBoolean=function(a){return a===!0||a===!1};b.isDate=function(a){return!(!a||!a.getTimezoneOffset||!a.setUTCFullYear)};b.isRegExp=function(a){return!(!a||!a.test||!a.exec||!(a.ignoreCase||a.ignoreCase===!1))};b.isNull=function(a){return a===null};b.isUndefined=function(a){return a===void 0};b.noConflict=function(){p._=C;return this};b.identity=function(a){return a};b.times=function(a,b,d){for(var e= 24 | 0;e/g,interpolate:/<%=([\s\S]+?)%>/g};b.template=function(a,c){var d=b.templateSettings;d="var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('"+a.replace(/\\/g,"\\\\").replace(/'/g,"\\'").replace(d.interpolate,function(a,b){return"',"+b.replace(/\\'/g,"'")+",'"}).replace(d.evaluate|| 25 | null,function(a,b){return"');"+b.replace(/\\'/g,"'").replace(/[\r\n\t]/g," ")+"__p.push('"}).replace(/\r/g,"\\r").replace(/\n/g,"\\n").replace(/\t/g,"\\t")+"');}return __p.join('');";d=new Function("obj",d);return c?d(c):d};var j=function(a){this._wrapped=a};b.prototype=j.prototype;var r=function(a,c){return c?b(a).chain():a},H=function(a,c){j.prototype[a]=function(){var a=f.call(arguments);D.call(a,this._wrapped);return r(c.apply(b,a),this._chain)}};b.mixin(b);h(["pop","push","reverse","shift","sort", 26 | "splice","unshift"],function(a){var b=i[a];j.prototype[a]=function(){b.apply(this._wrapped,arguments);return r(this._wrapped,this._chain)}});h(["concat","join","slice"],function(a){var b=i[a];j.prototype[a]=function(){return r(b.apply(this._wrapped,arguments),this._chain)}});j.prototype.chain=function(){this._chain=!0;return this};j.prototype.value=function(){return this._wrapped}})(); 27 | -------------------------------------------------------------------------------- /js/backbone-min.js: -------------------------------------------------------------------------------- 1 | // Backbone.js 0.3.3 2 | // (c) 2010 Jeremy Ashkenas, DocumentCloud Inc. 3 | // Backbone may be freely distributed under the MIT license. 4 | // For all details and documentation: 5 | // http://documentcloud.github.com/backbone 6 | (function(){var e;e=typeof exports!=="undefined"?exports:this.Backbone={};e.VERSION="0.3.3";var f=this._;if(!f&&typeof require!=="undefined")f=require("underscore")._;var h=this.jQuery||this.Zepto;e.emulateHTTP=false;e.emulateJSON=false;e.Events={bind:function(a,b){this._callbacks||(this._callbacks={});(this._callbacks[a]||(this._callbacks[a]=[])).push(b);return this},unbind:function(a,b){var c;if(a){if(c=this._callbacks)if(b){c=c[a];if(!c)return this;for(var d=0,g=c.length;d/g,">").replace(/"/g, 9 | """)},set:function(a,b){b||(b={});if(!a)return this;if(a.attributes)a=a.attributes;var c=this.attributes,d=this._escapedAttributes;if(!b.silent&&this.validate&&!this._performValidation(a,b))return false;if("id"in a)this.id=a.id;for(var g in a){var i=a[g];if(!f.isEqual(c[g],i)){c[g]=i;delete d[g];if(!b.silent){this._changed=true;this.trigger("change:"+g,this,i,b)}}}!b.silent&&this._changed&&this.change(b);return this},unset:function(a,b){b||(b={});var c={};c[a]=void 0;if(!b.silent&&this.validate&& 10 | !this._performValidation(c,b))return false;delete this.attributes[a];delete this._escapedAttributes[a];if(!b.silent){this._changed=true;this.trigger("change:"+a,this,void 0,b);this.change(b)}return this},clear:function(a){a||(a={});var b=this.attributes,c={};for(attr in b)c[attr]=void 0;if(!a.silent&&this.validate&&!this._performValidation(c,a))return false;this.attributes={};this._escapedAttributes={};if(!a.silent){this._changed=true;for(attr in b)this.trigger("change:"+attr,this,void 0,a);this.change(a)}return this}, 11 | fetch:function(a){a||(a={});var b=this,c=j(a.error,b,a);(this.sync||e.sync)("read",this,function(d){if(!b.set(b.parse(d),a))return false;a.success&&a.success(b,d)},c);return this},save:function(a,b){b||(b={});if(a&&!this.set(a,b))return false;var c=this,d=j(b.error,c,b),g=this.isNew()?"create":"update";(this.sync||e.sync)(g,this,function(i){if(!c.set(c.parse(i),b))return false;b.success&&b.success(c,i)},d);return this},destroy:function(a){a||(a={});var b=this,c=j(a.error,b,a);(this.sync||e.sync)("delete", 12 | this,function(d){b.collection&&b.collection.remove(b);a.success&&a.success(b,d)},c);return this},url:function(){var a=k(this.collection);if(this.isNew())return a;return a+(a.charAt(a.length-1)=="/"?"":"/")+this.id},parse:function(a){return a},clone:function(){return new this.constructor(this)},isNew:function(){return!this.id},change:function(a){this.trigger("change",this,a);this._previousAttributes=f.clone(this.attributes);this._changed=false},hasChanged:function(a){if(a)return this._previousAttributes[a]!= 13 | this.attributes[a];return this._changed},changedAttributes:function(a){a||(a=this.attributes);var b=this._previousAttributes,c=false,d;for(d in a)if(!f.isEqual(b[d],a[d])){c=c||{};c[d]=a[d]}return c},previous:function(a){if(!a||!this._previousAttributes)return null;return this._previousAttributes[a]},previousAttributes:function(){return f.clone(this._previousAttributes)},_performValidation:function(a,b){var c=this.validate(a);if(c){b.error?b.error(this,c):this.trigger("error",this,c,b);return false}return true}}); 14 | e.Collection=function(a,b){b||(b={});if(b.comparator){this.comparator=b.comparator;delete b.comparator}this._boundOnModelEvent=f.bind(this._onModelEvent,this);this._reset();a&&this.refresh(a,{silent:true});this.initialize(a,b)};f.extend(e.Collection.prototype,e.Events,{model:e.Model,initialize:function(){},toJSON:function(){return this.map(function(a){return a.toJSON()})},add:function(a,b){if(f.isArray(a))for(var c=0,d=a.length;c').hide().appendTo("body")[0].contentWindow; 22 | "onhashchange"in window&&!a?h(window).bind("hashchange",this.checkUrl):setInterval(this.checkUrl,this.interval);return this.loadUrl()},route:function(a,b){this.handlers.push({route:a,callback:b})},checkUrl:function(){var a=this.getFragment();if(a==this.fragment&&this.iframe)a=this.getFragment(this.iframe.location);if(a==this.fragment||a==decodeURIComponent(this.fragment))return false;if(this.iframe)window.location.hash=this.iframe.location.hash=a;this.loadUrl()},loadUrl:function(){var a=this.fragment= 23 | this.getFragment();return f.any(this.handlers,function(b){if(b.route.test(a)){b.callback(a);return true}})},saveLocation:function(a){a=(a||"").replace(l,"");if(this.fragment!=a){window.location.hash=this.fragment=a;if(this.iframe&&a!=this.getFragment(this.iframe.location)){this.iframe.document.open().close();this.iframe.location.hash=a}}}});e.View=function(a){this._configure(a||{});this._ensureElement();this.delegateEvents();this.initialize(a)};var q=/^(\w+)\s*(.*)$/;f.extend(e.View.prototype,e.Events, 24 | {tagName:"div",$:function(a){return h(a,this.el)},initialize:function(){},render:function(){return this},remove:function(){h(this.el).remove();return this},make:function(a,b,c){a=document.createElement(a);b&&h(a).attr(b);c&&h(a).html(c);return a},delegateEvents:function(a){if(a||(a=this.events)){h(this.el).unbind();for(var b in a){var c=a[b],d=b.match(q),g=d[1];d=d[2];c=f.bind(this[c],this);d===""?h(this.el).bind(g,c):h(this.el).delegate(d,g,c)}}},_configure:function(a){if(this.options)a=f.extend({}, 25 | this.options,a);if(a.model)this.model=a.model;if(a.collection)this.collection=a.collection;if(a.el)this.el=a.el;if(a.id)this.id=a.id;if(a.className)this.className=a.className;if(a.tagName)this.tagName=a.tagName;this.options=a},_ensureElement:function(){if(!this.el){var a={};if(this.id)a.id=this.id;if(this.className)a["class"]=this.className;this.el=this.make(this.tagName,a)}}});var m=function(a,b){var c=r(this,a,b);c.extend=m;return c};e.Model.extend=e.Collection.extend=e.Controller.extend=e.View.extend= 26 | m;var s={create:"POST",update:"PUT","delete":"DELETE",read:"GET"};e.sync=function(a,b,c,d){var g=s[a];a=a==="create"||a==="update"?JSON.stringify(b.toJSON()):null;b={url:k(b),type:g,contentType:"application/json",data:a,dataType:"json",processData:false,success:c,error:d};if(e.emulateJSON){b.contentType="application/x-www-form-urlencoded";b.processData=true;b.data=a?{model:a}:{}}if(e.emulateHTTP)if(g==="PUT"||g==="DELETE"){if(e.emulateJSON)b.data._method=g;b.type="POST";b.beforeSend=function(i){i.setRequestHeader("X-HTTP-Method-Override", 27 | g)}}h.ajax(b)};var n=function(){},r=function(a,b,c){var d;d=b&&b.hasOwnProperty("constructor")?b.constructor:function(){return a.apply(this,arguments)};n.prototype=a.prototype;d.prototype=new n;b&&f.extend(d.prototype,b);c&&f.extend(d,c);d.prototype.constructor=d;d.__super__=a.prototype;return d},k=function(a){if(!(a&&a.url))throw Error("A 'url' property or function must be specified");return f.isFunction(a.url)?a.url():a.url},j=function(a,b,c){return function(d){a?a(b,d):b.trigger("error",b,d,c)}}})(); 28 | --------------------------------------------------------------------------------