Skip to content

Instantly share code, notes, and snippets.

@jasonals

jasonals/index.html

Created August 22, 2014 20:59
Show Gist options
  • Save jasonals/63e91fcdd6c8e5d3530a to your computer and use it in GitHub Desktop.
Save jasonals/63e91fcdd6c8e5d3530a to your computer and use it in GitHub Desktop.
Download ZIP
Famous App // source http://jsbin.com/tejay/7
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Famous App</title>
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Famous/famous/master/core/famous.css">
<script src="https://cdn.rawgit.com/Famous/polyfills/master/classList.js"></script>
<script src="https://cdn.rawgit.com/Famous/polyfills/master/functionPrototypeBind.js"></script>
<script src="https://cdn.rawgit.com/Famous/polyfills/master/requestAnimationFrame.js"></script>
<script src="https://cdn.rawgit.com/jrburke/requirejs/master/require.js"></script>
<script src="https://cdn.rawgit.com/Famous/famous/master/dist/famous.min.js"></script>
<script type="text/javascript">require(['main']);</script>
<style id="jsbin-css">
html {
background: #fff;
}
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.double-font {
font-size: 2em;
}
</style>
</head>
<body class='famous-root'>
<script id="jsbin-javascript">
define('main', function (require, exports, module) {
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Splash = require('Splash');
var mainContext = Engine.createContext();
mainContext.setPerspective(1000);
var splash = new Splash({
content:'Famo.us rocks!'
});
mainContext.add(splash);
});
define('Splash', function(require, exports, module) {
var RenderNode = require('famous/core/RenderNode');
var OptionsManager = require('famous/core/OptionsManager');
var Utility = require('famous/utilities/Utility');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var ImageSurface = require('famous/surfaces/ImageSurface');
/**
* A class to show the logo and title of the app
* at a single point in the render tree
*
* @class Splash
* @constructor
*/
function Splash(options) {
this._node = new RenderNode();
this.options = this.constructor.DEFAULT_OPTIONS;
this._optionsManager = new OptionsManager(this.options);
if (options) this.setOptions(options);
var logo = new ImageSurface({
size: [200, 200],
content: this.options.imagePath || 'http://code.famo.us/assets/famous_logo.svg',
classes: ['double-sided']
});
logo.mod = new Modifier({
transform: Transform.translate(0, 0, 0)
});
var desc = new Surface({
size: [200, 20],
content: this.options.content || 'Title',
classes: ['double-sided', 'double-font'],
properties: {
textAlign: 'center',
lineHeight: '80px',
backgroundColor: 'rgba(76,8,30,1)'
}
});
desc.mod = new Modifier({
transform: Transform.translate(0, 110, 50)
});
var initialTime = Date.now();
var centerSpinModifier = new Modifier({
origin: [0.5, 0.5],
transform: function() {
return Transform.rotateY(0.002 * (Date.now() - initialTime));
}
});
this.renderNode = new RenderNode();
this.renderNode.add(logo.mod).add(logo);
this.renderNode.add(desc.mod).add(desc);
this._node.add(centerSpinModifier).add(this.renderNode);
}
Splash.DEFAULT_OPTIONS = {}; // no defaults
/**
* Look up options value by key
* @method getOptions
*
* @param {string} key key
* @return {Object} associated object
*/
Splash.prototype.getOptions = function getOptions() {
return this._optionsManager.value();
};
/*
* Set internal options.
* No defaults options are set in View.
*
* @method setOptions
* @param {Object} options
*/
Splash.prototype.setOptions = function setOptions(options) {
this._optionsManager.patch(options);
};
/**
* Generate a render spec from the contents of this component.
*
* @private
* @method render
* @return {number} Render spec for this component
*/
Splash.prototype.render = function render() {
return this._node.render();
};
module.exports = Splash;
});
</script>
</body>
</html>
Raw
jsbin.tejay.css
html {
background: #fff;
}
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.double-font {
font-size: 2em;
}
Raw
jsbin.tejay.js
define('main', function (require, exports, module) {
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Splash = require('Splash');
var mainContext = Engine.createContext();
mainContext.setPerspective(1000);
var splash = new Splash({
content:'Famo.us rocks!'
});
mainContext.add(splash);
});
define('Splash', function(require, exports, module) {
var RenderNode = require('famous/core/RenderNode');
var OptionsManager = require('famous/core/OptionsManager');
var Utility = require('famous/utilities/Utility');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var ImageSurface = require('famous/surfaces/ImageSurface');
/**
* A class to show the logo and title of the app
* at a single point in the render tree
*
* @class Splash
* @constructor
*/
function Splash(options) {
this._node = new RenderNode();
this.options = this.constructor.DEFAULT_OPTIONS;
this._optionsManager = new OptionsManager(this.options);
if (options) this.setOptions(options);
var logo = new ImageSurface({
size: [200, 200],
content: this.options.imagePath || 'http://code.famo.us/assets/famous_logo.svg',
classes: ['double-sided']
});
logo.mod = new Modifier({
transform: Transform.translate(0, 0, 0)
});
var desc = new Surface({
size: [200, 20],
content: this.options.content || 'Title',
classes: ['double-sided', 'double-font'],
properties: {
textAlign: 'center',
lineHeight: '80px',
backgroundColor: 'rgba(76,8,30,1)'
}
});
desc.mod = new Modifier({
transform: Transform.translate(0, 110, 50)
});
var initialTime = Date.now();
var centerSpinModifier = new Modifier({
origin: [0.5, 0.5],
transform: function() {
return Transform.rotateY(0.002 * (Date.now() - initialTime));
}
});
this.renderNode = new RenderNode();
this.renderNode.add(logo.mod).add(logo);
this.renderNode.add(desc.mod).add(desc);
this._node.add(centerSpinModifier).add(this.renderNode);
}
Splash.DEFAULT_OPTIONS = {}; // no defaults
/**
* Look up options value by key
* @method getOptions
*
* @param {string} key key
* @return {Object} associated object
*/
Splash.prototype.getOptions = function getOptions() {
return this._optionsManager.value();
};
/*
* Set internal options.
* No defaults options are set in View.
*
* @method setOptions
* @param {Object} options
*/
Splash.prototype.setOptions = function setOptions(options) {
this._optionsManager.patch(options);
};
/**
* Generate a render spec from the contents of this component.
*
* @private
* @method render
* @return {number} Render spec for this component
*/
Splash.prototype.render = function render() {
return this._node.render();
};
module.exports = Splash;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment