Skip to content

Instantly share code, notes, and snippets.

@rjmoggach

rjmoggach/index.html

Created March 4, 2015 08:34
Show Gist options
  • Save rjmoggach/4b3155e02c2bee9b342e to your computer and use it in GitHub Desktop.
Save rjmoggach/4b3155e02c2bee9b342e to your computer and use it in GitHub Desktop.
Download ZIP
Famous App BackSwapper View Famo.us 0.3.4 // source http://jsbin.com/notika
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="BackSwapper View Famo.us 0.3.4" />
<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" />
<script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<!-- famous -->
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.4/famous.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>
<script type="text/javascript" src="http://code.famo.us/famous/0.3.4/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 OptionsManager = require('famous/core/OptionsManager');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var RenderNode = require('famous/core/RenderNode');
var Transform = require('famous/core/Transform');
var BackSwapper = require('BackSwapper');
var mainContext = Engine.createContext();
mainContext.setPerspective(1000);
var swapper = new BackSwapper();
var primary = new Surface({
size: [400, 400],
content: "Primary",
properties: {
lineHeight: "400px",
textAlign: "center",
backgroundColor: 'rgba(0,0,0,0.25)'
}
});
var secondary = new Surface({
size: [400, 400],
content: "Secondary",
properties: {
lineHeight: "400px",
textAlign: "center",
backgroundColor: 'rgba(255,0,0,0.25)'
}
});
mainContext.add(swapper);
swapper.show(primary);
var showing = true;
Engine.on("click", function() {
if (showing) {
swapper.show(secondary);
showing = false;
} else {
swapper.show(primary);
showing = true;
}
});
// Attribution :)
var desc = new Surface({
content:'<a href="http://stackoverflow.com/users/2597114/talves"><img src="http://stackoverflow.com/users/flair/2597114.png" width="208" height="58" alt="profile for talves at Stack Overflow, Q&amp;A for Famo.us" title="profile for talves at Stack Overflow, Q&amp;A for Famo.us"></a>',
classes: ['double-sided', 'double-font'],
properties: {
textAlign: 'center',
lineHeight: '80px'
}
});
desc._mod = new Modifier({
size: [200, 20],
align: [0.5, 1],
origin: [0, 0],
transform: Transform.translate(-100, -100, 0)
});
mainContext.add(desc._mod).add(desc);
});
define('BackSwapper', function(require, exports, module) {
var CachedMap = require('famous/transitions/CachedMap');
var Entity = require('famous/core/Entity');
var EventHandler = require('famous/core/EventHandler');
var Transform = require('famous/core/Transform');
var RenderController = require('famous/views/RenderController');
/**
* Container which handles swapping renderables from the edge of its parent context.
* @class BackSwapper
* @constructor
* @param {Options} [options] An object of configurable options.
* Takes the same options as RenderController.
* @uses RenderController
*/
function BackSwapper(options) {
this._currentTarget = null;
this._size = [undefined, undefined];
this._controller = new RenderController(options);
this._controller.inTransformFrom(CachedMap.create(_transformMap.bind(this, 0.0001)));
this._controller.outTransformFrom(CachedMap.create(_transformMap.bind(this, -0.0001)));
this._eventInput = new EventHandler();
EventHandler.setInputHandler(this, this._eventInput);
this._entityId = Entity.register(this);
if (options) this.setOptions(options);
}
function _transformMap(zMax, progress) {
//return Transform.translate(this._size[0] * (1 - progress), 0, zMax * (1 - progress));
return Transform.translate(0, 0, -this._size[0] * (1 - progress));
}
/**
* Displays the passed-in content with the BackSwapper instance's default transition.
*
* @method show
* @param {Object} content The renderable you want to display.
*/
BackSwapper.prototype.show = function show(content) {
// stop sending input to old target
if (this._currentTarget) this._eventInput.unpipe(this._currentTarget);
this._currentTarget = content;
// start sending input to new target
if (this._currentTarget && this._currentTarget.trigger) this._eventInput.pipe(this._currentTarget);
this._controller.show.apply(this._controller, arguments);
};
/**
* Patches the BackSwapper instance's options with the passed-in ones.
*
* @method setOptions
* @param {Options} options An object of configurable options for the BackSwapper instance.
*/
BackSwapper.prototype.setOptions = function setOptions(options) {
this._controller.setOptions(options);
};
/**
* Generate a render spec from the contents of this component.
*
* @private
* @method render
* @return {number} Render spec for this component
*/
BackSwapper.prototype.render = function render() {
return this._entityId;
};
/**
* Apply changes from this component to the corresponding document element.
* This includes changes to classes, styles, size, content, opacity, origin,
* and matrix transforms.
*
* @private
* @method commit
* @param {Context} context commit context
*/
BackSwapper.prototype.commit = function commit(context) {
this._size[0] = context.size[0];
this._size[1] = context.size[1];
return {
transform: context.transform,
opacity: context.opacity,
origin: context.origin,
size: context.size,
target: this._controller.render()
};
};
module.exports = BackSwapper;
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="BackSwapper View Famo.us 0.3.4" />
<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" />
<script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"><\/script>
<script type="text/javascript" src="http://code.famo.us/lib/classList.js"><\/script>
<script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"><\/script>
<\!-- famous -->
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.4/famous.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"><\/script>
<script type="text/javascript" src="http://code.famo.us/famous/0.3.4/famous.min.js"><\/script>
<script type="text/javascript">require(['main']);console.log('------------start------------')<\/script>
</head>
<body class='famous-root'>
</body>
</html></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 OptionsManager = require('famous/core/OptionsManager');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var RenderNode = require('famous/core/RenderNode');
var Transform = require('famous/core/Transform');
var BackSwapper = require('BackSwapper');
var mainContext = Engine.createContext();
mainContext.setPerspective(1000);
var swapper = new BackSwapper();
var primary = new Surface({
size: [400, 400],
content: "Primary",
properties: {
lineHeight: "400px",
textAlign: "center",
backgroundColor: 'rgba(0,0,0,0.25)'
}
});
var secondary = new Surface({
size: [400, 400],
content: "Secondary",
properties: {
lineHeight: "400px",
textAlign: "center",
backgroundColor: 'rgba(255,0,0,0.25)'
}
});
mainContext.add(swapper);
swapper.show(primary);
var showing = true;
Engine.on("click", function() {
if (showing) {
swapper.show(secondary);
showing = false;
} else {
swapper.show(primary);
showing = true;
}
});
// Attribution :)
var desc = new Surface({
content:'<a href="http://stackoverflow.com/users/2597114/talves"><img src="http://stackoverflow.com/users/flair/2597114.png" width="208" height="58" alt="profile for talves at Stack Overflow, Q&amp;A for Famo.us" title="profile for talves at Stack Overflow, Q&amp;A for Famo.us"></a>',
classes: ['double-sided', 'double-font'],
properties: {
textAlign: 'center',
lineHeight: '80px'
}
});
desc._mod = new Modifier({
size: [200, 20],
align: [0.5, 1],
origin: [0, 0],
transform: Transform.translate(-100, -100, 0)
});
mainContext.add(desc._mod).add(desc);
});
define('BackSwapper', function(require, exports, module) {
var CachedMap = require('famous/transitions/CachedMap');
var Entity = require('famous/core/Entity');
var EventHandler = require('famous/core/EventHandler');
var Transform = require('famous/core/Transform');
var RenderController = require('famous/views/RenderController');
/**
* Container which handles swapping renderables from the edge of its parent context.
* @class BackSwapper
* @constructor
* @param {Options} [options] An object of configurable options.
* Takes the same options as RenderController.
* @uses RenderController
*/
function BackSwapper(options) {
this._currentTarget = null;
this._size = [undefined, undefined];
this._controller = new RenderController(options);
this._controller.inTransformFrom(CachedMap.create(_transformMap.bind(this, 0.0001)));
this._controller.outTransformFrom(CachedMap.create(_transformMap.bind(this, -0.0001)));
this._eventInput = new EventHandler();
EventHandler.setInputHandler(this, this._eventInput);
this._entityId = Entity.register(this);
if (options) this.setOptions(options);
}
function _transformMap(zMax, progress) {
//return Transform.translate(this._size[0] * (1 - progress), 0, zMax * (1 - progress));
return Transform.translate(0, 0, -this._size[0] * (1 - progress));
}
/**
* Displays the passed-in content with the BackSwapper instance's default transition.
*
* @method show
* @param {Object} content The renderable you want to display.
*/
BackSwapper.prototype.show = function show(content) {
// stop sending input to old target
if (this._currentTarget) this._eventInput.unpipe(this._currentTarget);
this._currentTarget = content;
// start sending input to new target
if (this._currentTarget && this._currentTarget.trigger) this._eventInput.pipe(this._currentTarget);
this._controller.show.apply(this._controller, arguments);
};
/**
* Patches the BackSwapper instance's options with the passed-in ones.
*
* @method setOptions
* @param {Options} options An object of configurable options for the BackSwapper instance.
*/
BackSwapper.prototype.setOptions = function setOptions(options) {
this._controller.setOptions(options);
};
/**
* Generate a render spec from the contents of this component.
*
* @private
* @method render
* @return {number} Render spec for this component
*/
BackSwapper.prototype.render = function render() {
return this._entityId;
};
/**
* Apply changes from this component to the corresponding document element.
* This includes changes to classes, styles, size, content, opacity, origin,
* and matrix transforms.
*
* @private
* @method commit
* @param {Context} context commit context
*/
BackSwapper.prototype.commit = function commit(context) {
this._size[0] = context.size[0];
this._size[1] = context.size[1];
return {
transform: context.transform,
opacity: context.opacity,
origin: context.origin,
size: context.size,
target: this._controller.render()
};
};
module.exports = BackSwapper;
});</script></body>
</html>
Raw
jsbin.notika.css
html {
background: #fff;
}
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.double-font {
font-size: 2em;
}
Raw
jsbin.notika.js
define('main', function (require, exports, module) {
var Engine = require('famous/core/Engine');
var OptionsManager = require('famous/core/OptionsManager');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var RenderNode = require('famous/core/RenderNode');
var Transform = require('famous/core/Transform');
var BackSwapper = require('BackSwapper');
var mainContext = Engine.createContext();
mainContext.setPerspective(1000);
var swapper = new BackSwapper();
var primary = new Surface({
size: [400, 400],
content: "Primary",
properties: {
lineHeight: "400px",
textAlign: "center",
backgroundColor: 'rgba(0,0,0,0.25)'
}
});
var secondary = new Surface({
size: [400, 400],
content: "Secondary",
properties: {
lineHeight: "400px",
textAlign: "center",
backgroundColor: 'rgba(255,0,0,0.25)'
}
});
mainContext.add(swapper);
swapper.show(primary);
var showing = true;
Engine.on("click", function() {
if (showing) {
swapper.show(secondary);
showing = false;
} else {
swapper.show(primary);
showing = true;
}
});
// Attribution :)
var desc = new Surface({
content:'<a href="http://stackoverflow.com/users/2597114/talves"><img src="http://stackoverflow.com/users/flair/2597114.png" width="208" height="58" alt="profile for talves at Stack Overflow, Q&amp;A for Famo.us" title="profile for talves at Stack Overflow, Q&amp;A for Famo.us"></a>',
classes: ['double-sided', 'double-font'],
properties: {
textAlign: 'center',
lineHeight: '80px'
}
});
desc._mod = new Modifier({
size: [200, 20],
align: [0.5, 1],
origin: [0, 0],
transform: Transform.translate(-100, -100, 0)
});
mainContext.add(desc._mod).add(desc);
});
define('BackSwapper', function(require, exports, module) {
var CachedMap = require('famous/transitions/CachedMap');
var Entity = require('famous/core/Entity');
var EventHandler = require('famous/core/EventHandler');
var Transform = require('famous/core/Transform');
var RenderController = require('famous/views/RenderController');
/**
* Container which handles swapping renderables from the edge of its parent context.
* @class BackSwapper
* @constructor
* @param {Options} [options] An object of configurable options.
* Takes the same options as RenderController.
* @uses RenderController
*/
function BackSwapper(options) {
this._currentTarget = null;
this._size = [undefined, undefined];
this._controller = new RenderController(options);
this._controller.inTransformFrom(CachedMap.create(_transformMap.bind(this, 0.0001)));
this._controller.outTransformFrom(CachedMap.create(_transformMap.bind(this, -0.0001)));
this._eventInput = new EventHandler();
EventHandler.setInputHandler(this, this._eventInput);
this._entityId = Entity.register(this);
if (options) this.setOptions(options);
}
function _transformMap(zMax, progress) {
//return Transform.translate(this._size[0] * (1 - progress), 0, zMax * (1 - progress));
return Transform.translate(0, 0, -this._size[0] * (1 - progress));
}
/**
* Displays the passed-in content with the BackSwapper instance's default transition.
*
* @method show
* @param {Object} content The renderable you want to display.
*/
BackSwapper.prototype.show = function show(content) {
// stop sending input to old target
if (this._currentTarget) this._eventInput.unpipe(this._currentTarget);
this._currentTarget = content;
// start sending input to new target
if (this._currentTarget && this._currentTarget.trigger) this._eventInput.pipe(this._currentTarget);
this._controller.show.apply(this._controller, arguments);
};
/**
* Patches the BackSwapper instance's options with the passed-in ones.
*
* @method setOptions
* @param {Options} options An object of configurable options for the BackSwapper instance.
*/
BackSwapper.prototype.setOptions = function setOptions(options) {
this._controller.setOptions(options);
};
/**
* Generate a render spec from the contents of this component.
*
* @private
* @method render
* @return {number} Render spec for this component
*/
BackSwapper.prototype.render = function render() {
return this._entityId;
};
/**
* Apply changes from this component to the corresponding document element.
* This includes changes to classes, styles, size, content, opacity, origin,
* and matrix transforms.
*
* @private
* @method commit
* @param {Context} context commit context
*/
BackSwapper.prototype.commit = function commit(context) {
this._size[0] = context.size[0];
this._size[1] = context.size[1];
return {
transform: context.transform,
opacity: context.opacity,
origin: context.origin,
size: context.size,
target: this._controller.render()
};
};
module.exports = BackSwapper;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment