triptych · May 14, 2014 21:33
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 
 <meta charset="utf-8">
 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
 <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
 <style>
 .app {
  width: 300px;
  margin: 0 auto;
 }
 button {
  width: 260px;
 }
 </style>
 <title>Scotch</title>
 
 <div class="app"></div>
 
 <script src="http://yui.yahooapis.com/3.16.0/build/yui/yui-min.js"></script>
 <script>
 YUI().use('app', function (Y) {
  'use strict';
 
  // Initial view:
  Y.HomeView = Y.Base.create('homeView', Y.View, [], {
    render : function () {
      var html = '<h1>Scotch Regions</h1>';
      html += '<p><button class="pure-button">Cambletown</button>';
      html += '<p><button class="pure-button pure-button-disabled">Highland</button>';
      html += '<p><button class="pure-button pure-button-disabled">Islands</button>';
      html += '<p><button class="pure-button pure-button-disabled">Islay</button>';
      html += '<p><button class="pure-button pure-button-disabled">Lowland</button>';
      html += '<p><button class="pure-button pure-button-disabled">Speyside</button>';
      this.get('container').setHTML(html);
      return this;
    },
    events : {
      'button' : {
        click : function (e) {
          app.showView('cambletown');
        }
      }
    }
  });
 
  // A sample view we can go to and back from:
  Y.CambletownView = Y.Base.create('cambletownView', Y.View, [], {
    render : function () {
      var html = '<h1>Cambletown</h1>';
      html += '<p><button class="pure-button">Home</button>';
      html += '<p>At one point Cambletown had over 30 distilleries and ' + 
      'proclaimed itself "the whisky capital of the world". However, a focus ' +
      'on quantity rather than quality, and the combination of prohibition ' +
      'and the Great Depression in the United States, led to most ' +
      'distilleries going out of business. Today only three active ' +
      'distilleries remain in Campbeltown: Glen Scotia, Glengyle, and ' +
      'Springbank.<br>- Wikipedia';
      this.get('container').setHTML(html);
      return this;
    },
    events : {
      'button' : {
        click : function (e) {
          app.showView('home');
        }
      }
    }
  });
 
  var app = new Y.App({
    transitions : true,
    viewContainer : '.app',
    views: {
      home: {
        type     : 'HomeView',
        preserve : true
      },
      cambletown: {
        type   : 'CambletownView',
        parent : 'home'
      }
    }
  });
 
  app.render();
  app.showView('home');
 
 });
 </script>
	<!DOCTYPE html>

	<meta charset="utf-8">
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
	<style>
	.app {
	width: 300px;
	margin: 0 auto;
	}
	button {
	width: 260px;
	}
	</style>
	<title>Scotch</title>

	<div class="app"></div>

	<script src="http://yui.yahooapis.com/3.16.0/build/yui/yui-min.js"></script>
	<script>
	YUI().use('app', function (Y) {
	'use strict';

	// Initial view:
	Y.HomeView = Y.Base.create('homeView', Y.View, [], {
	render : function () {
	var html = '<h1>Scotch Regions</h1>';
	html += '<p><button class="pure-button">Cambletown</button>';
	html += '<p><button class="pure-button pure-button-disabled">Highland</button>';
	html += '<p><button class="pure-button pure-button-disabled">Islands</button>';
	html += '<p><button class="pure-button pure-button-disabled">Islay</button>';
	html += '<p><button class="pure-button pure-button-disabled">Lowland</button>';
	html += '<p><button class="pure-button pure-button-disabled">Speyside</button>';
	this.get('container').setHTML(html);
	return this;
	},
	events : {
	'button' : {
	click : function (e) {
	app.showView('cambletown');
	}
	}
	}
	});

	// A sample view we can go to and back from:
	Y.CambletownView = Y.Base.create('cambletownView', Y.View, [], {
	render : function () {
	var html = '<h1>Cambletown</h1>';
	html += '<p><button class="pure-button">Home</button>';
	html += '<p>At one point Cambletown had over 30 distilleries and ' +
	'proclaimed itself "the whisky capital of the world". However, a focus ' +
	'on quantity rather than quality, and the combination of prohibition ' +
	'and the Great Depression in the United States, led to most ' +
	'distilleries going out of business. Today only three active ' +
	'distilleries remain in Campbeltown: Glen Scotia, Glengyle, and ' +
	'Springbank.<br>- Wikipedia';
	this.get('container').setHTML(html);
	return this;
	},
	events : {
	'button' : {
	click : function (e) {
	app.showView('home');
	}
	}
	}
	});

	var app = new Y.App({
	transitions : true,
	viewContainer : '.app',
	views: {
	home: {
	type : 'HomeView',
	preserve : true
	},
	cambletown: {
	type : 'CambletownView',
	parent : 'home'
	}
	}
	});

	app.render();
	app.showView('home');

	});
	</script>