Skip to content

Instantly share code, notes, and snippets.

@justinriggio

justinriggio/index.html

Created September 24, 2014 23:35
Show Gist options
  • Save justinriggio/a44d874e8dbaa45ae113 to your computer and use it in GitHub Desktop.
Save justinriggio/a44d874e8dbaa45ae113 to your computer and use it in GitHub Desktop.
Download ZIP
Famo.us Mobile App Example Famo.us Mobile App Example // source http://jsbin.com/poyah/5
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Famo.us Mobile App Example" />
<meta charset="utf-8">
<title>Famo.us Mobile App Example</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']);console.log('------------start------------')</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 App = require('App');
var mainContext = Engine.createContext();
var app = new App({
size: [undefined, undefined]
});
app.setHeaderFooterLayout();
app.setContent();
mainContext.add(app);
});
define('App', function(require, exports, module) {
var Engine = require('famous/core/Engine');
var View = require('famous/core/View');
var Surface = require('famous/core/Surface');
var OptionsManager = require('famous/core/OptionsManager');
var HeaderFooterLayout = require('famous/views/HeaderFooterLayout');
var GridLayout = require("famous/views/GridLayout");
var RenderController = require("famous/views/RenderController");
var grid = new GridLayout({
dimensions: [4, 1]
});
var surfaces = [];
var viewSurfaces = [];
var layout = new HeaderFooterLayout({
headerSize: 50,
footerSize: 50
});
var renderController = new RenderController();
function App(options) {
View.apply(this, arguments);
this.options = this.constructor.DEFAULT_OPTIONS;
this._optionsManager = new OptionsManager(this.options);
if (options) this.setOptions(options);
}
App.prototype = Object.create(View.prototype);
App.prototype.constructor = App;
App.DEFAULT_OPTIONS = {}; // no defaults
/**
* Look up options value by key
* @method getOptions
*
* @param {string} key key
* @return {Object} associated object
*/
App.prototype.getOptions = function getOptions() {
return this._optionsManager.value();
};
/*
* Set internal options.
* No defaults options are set in View.
*
* @method setOptions
* @param {Object} options
*/
App.prototype.setOptions = function setOptions(options) {
this._optionsManager.patch(options);
};
App.prototype.getHeaderFooterLayout = function getHeaderFooterLayout() {
console.log(layout);
return this.layout;
};
App.prototype.setContent = function setContent() {
var counter = 0;
for (var i = 0; i < 4; i++) {
viewSurfaces.push(new Surface({
content: "Surface: " + (i + 1),
size: [undefined, undefined],
properties: {
backgroundColor: "hsl(" + (i * 360 / 10) + ", 100%, 50%)",
lineHeight: "200px",
textAlign: 'center'
}
}));
}
renderController.show(viewSurfaces[0]);
layout.content.add(renderController);
};
App.prototype.setHeaderFooterLayout = function setHeaderFooterLayout() {
grid.sequenceFrom(surfaces);
for(var i = 0; i < 4; i++) {
surfaces.push(new Surface({
content: "Menu Btn " + (i + 1),
size: [undefined, 50],
properties: {
backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
color: "black",
lineHeight: 50 + 'px',
textAlign: 'center'
}
}));
clickHandler(i);
}
function clickHandler(index) {
surfaces[index].on("click", function() {
renderController.show(viewSurfaces[index]);
}.bind(renderController));
}
layout.content.add(new Surface({
size: [undefined, undefined],
content: "Content",
classes: ["grey-bg"],
properties: {
lineHeight: window.innerHeight - 150 + 'px',
textAlign: "center"
}
}));
layout.footer.add(new Surface({
size: [undefined, 50],
content: "Footer",
properties: {
backgroundColor: "#c3c3c3",
lineHeight: "50px",
textAlign: "center"
}
}));
layout.header.add(grid);
this.add(layout);
};
/**
* Generate a render spec from the contents of this component.
*
* @private
* @method render
* @return {number} Render spec for this component
*/
App.prototype.render = function render() {
return this._node.render();
};
module.exports = App;
});
</script>
<script id="jsbin-source-css" type="text/css">html {
background: #fff;
}
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.double-font {
font-size: 2em;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">define('main', function (require, exports, module) {
var Engine = require('famous/core/Engine');
var App = require('App');
var mainContext = Engine.createContext();
var app = new App({
size: [undefined, undefined]
});
app.setHeaderFooterLayout();
app.setContent();
mainContext.add(app);
});
define('App', function(require, exports, module) {
var Engine = require('famous/core/Engine');
var View = require('famous/core/View');
var Surface = require('famous/core/Surface');
var OptionsManager = require('famous/core/OptionsManager');
var HeaderFooterLayout = require('famous/views/HeaderFooterLayout');
var GridLayout = require("famous/views/GridLayout");
var RenderController = require("famous/views/RenderController");
var grid = new GridLayout({
dimensions: [4, 1]
});
var surfaces = [];
var viewSurfaces = [];
var layout = new HeaderFooterLayout({
headerSize: 50,
footerSize: 50
});
var renderController = new RenderController();
function App(options) {
View.apply(this, arguments);
this.options = this.constructor.DEFAULT_OPTIONS;
this._optionsManager = new OptionsManager(this.options);
if (options) this.setOptions(options);
}
App.prototype = Object.create(View.prototype);
App.prototype.constructor = App;
App.DEFAULT_OPTIONS = {}; // no defaults
/**
* Look up options value by key
* @method getOptions
*
* @param {string} key key
* @return {Object} associated object
*/
App.prototype.getOptions = function getOptions() {
return this._optionsManager.value();
};
/*
* Set internal options.
* No defaults options are set in View.
*
* @method setOptions
* @param {Object} options
*/
App.prototype.setOptions = function setOptions(options) {
this._optionsManager.patch(options);
};
App.prototype.getHeaderFooterLayout = function getHeaderFooterLayout() {
console.log(layout);
return this.layout;
};
App.prototype.setContent = function setContent() {
var counter = 0;
for (var i = 0; i < 4; i++) {
viewSurfaces.push(new Surface({
content: "Surface: " + (i + 1),
size: [undefined, undefined],
properties: {
backgroundColor: "hsl(" + (i * 360 / 10) + ", 100%, 50%)",
lineHeight: "200px",
textAlign: 'center'
}
}));
}
renderController.show(viewSurfaces[0]);
layout.content.add(renderController);
};
App.prototype.setHeaderFooterLayout = function setHeaderFooterLayout() {
grid.sequenceFrom(surfaces);
for(var i = 0; i < 4; i++) {
surfaces.push(new Surface({
content: "Menu Btn " + (i + 1),
size: [undefined, 50],
properties: {
backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
color: "black",
lineHeight: 50 + 'px',
textAlign: 'center'
}
}));
clickHandler(i);
}
function clickHandler(index) {
surfaces[index].on("click", function() {
renderController.show(viewSurfaces[index]);
}.bind(renderController));
}
layout.content.add(new Surface({
size: [undefined, undefined],
content: "Content",
classes: ["grey-bg"],
properties: {
lineHeight: window.innerHeight - 150 + 'px',
textAlign: "center"
}
}));
layout.footer.add(new Surface({
size: [undefined, 50],
content: "Footer",
properties: {
backgroundColor: "#c3c3c3",
lineHeight: "50px",
textAlign: "center"
}
}));
layout.header.add(grid);
this.add(layout);
};
/**
* Generate a render spec from the contents of this component.
*
* @private
* @method render
* @return {number} Render spec for this component
*/
App.prototype.render = function render() {
return this._node.render();
};
module.exports = App;
});
</script></body>
</html>
Raw
jsbin.poyah.css
html {
background: #fff;
}
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.double-font {
font-size: 2em;
}
Raw
jsbin.poyah.js
define('main', function (require, exports, module) {
var Engine = require('famous/core/Engine');
var App = require('App');
var mainContext = Engine.createContext();
var app = new App({
size: [undefined, undefined]
});
app.setHeaderFooterLayout();
app.setContent();
mainContext.add(app);
});
define('App', function(require, exports, module) {
var Engine = require('famous/core/Engine');
var View = require('famous/core/View');
var Surface = require('famous/core/Surface');
var OptionsManager = require('famous/core/OptionsManager');
var HeaderFooterLayout = require('famous/views/HeaderFooterLayout');
var GridLayout = require("famous/views/GridLayout");
var RenderController = require("famous/views/RenderController");
var grid = new GridLayout({
dimensions: [4, 1]
});
var surfaces = [];
var viewSurfaces = [];
var layout = new HeaderFooterLayout({
headerSize: 50,
footerSize: 50
});
var renderController = new RenderController();
function App(options) {
View.apply(this, arguments);
this.options = this.constructor.DEFAULT_OPTIONS;
this._optionsManager = new OptionsManager(this.options);
if (options) this.setOptions(options);
}
App.prototype = Object.create(View.prototype);
App.prototype.constructor = App;
App.DEFAULT_OPTIONS = {}; // no defaults
/**
* Look up options value by key
* @method getOptions
*
* @param {string} key key
* @return {Object} associated object
*/
App.prototype.getOptions = function getOptions() {
return this._optionsManager.value();
};
/*
* Set internal options.
* No defaults options are set in View.
*
* @method setOptions
* @param {Object} options
*/
App.prototype.setOptions = function setOptions(options) {
this._optionsManager.patch(options);
};
App.prototype.getHeaderFooterLayout = function getHeaderFooterLayout() {
console.log(layout);
return this.layout;
};
App.prototype.setContent = function setContent() {
var counter = 0;
for (var i = 0; i < 4; i++) {
viewSurfaces.push(new Surface({
content: "Surface: " + (i + 1),
size: [undefined, undefined],
properties: {
backgroundColor: "hsl(" + (i * 360 / 10) + ", 100%, 50%)",
lineHeight: "200px",
textAlign: 'center'
}
}));
}
renderController.show(viewSurfaces[0]);
layout.content.add(renderController);
};
App.prototype.setHeaderFooterLayout = function setHeaderFooterLayout() {
grid.sequenceFrom(surfaces);
for(var i = 0; i < 4; i++) {
surfaces.push(new Surface({
content: "Menu Btn " + (i + 1),
size: [undefined, 50],
properties: {
backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
color: "black",
lineHeight: 50 + 'px',
textAlign: 'center'
}
}));
clickHandler(i);
}
function clickHandler(index) {
surfaces[index].on("click", function() {
renderController.show(viewSurfaces[index]);
}.bind(renderController));
}
layout.content.add(new Surface({
size: [undefined, undefined],
content: "Content",
classes: ["grey-bg"],
properties: {
lineHeight: window.innerHeight - 150 + 'px',
textAlign: "center"
}
}));
layout.footer.add(new Surface({
size: [undefined, 50],
content: "Footer",
properties: {
backgroundColor: "#c3c3c3",
lineHeight: "50px",
textAlign: "center"
}
}));
layout.header.add(grid);
this.add(layout);
};
/**
* Generate a render spec from the contents of this component.
*
* @private
* @method render
* @return {number} Render spec for this component
*/
App.prototype.render = function render() {
return this._node.render();
};
module.exports = App;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment