define(function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var ModifierChain = require('famous/modifiers/ModifierChain');
var mainContext = Engine.createContext();
var modifierChain = new ModifierChain();
var modifierOne = new Modifier({
align: [.5, .5],
origin: [0.5, 0.5]
});
var modifierTwo = new Modifier({
transform: Transform.translate(0, 100, 0)
});
var surface = new Surface({
size: [200, 200],
content: "Click me to remove the center align/origin modifier",
classes: ["red-bg"],
properties: {
textAlign: "center",
}
});
modifierChain.addModifier(modifierOne);
modifierChain.addModifier(modifierTwo);
mainContext.add(modifierChain).add(surface);
surface.on('click', function() {
modifierChain.removeModifier(modifierOne);
surface.setContent('Success!');
});
});
define(function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var ModifierChain = require('famous/modifiers/ModifierChain');
var ContainerSurface = require('famous/surfaces/ContainerSurface');
var SequentialLayout = require('famous/views/SequentialLayout');
var Utility = require('famous/utilities/Utility');
var mainCtx = Engine.createContext();
var container = new ContainerSurface({
properties: {
overflow: 'auto'
}
});
container.context.setPerspective(800);
var surface, modifier, modifierChain, transform, content;
surface = new Surface({
size: [100, 100],
content: 'Hello World',
properties: {
backgroundColor: 'rgb(255, 66, 33)',
lineHeight: '100px',
fontSize: '14px',
color: 'white',
textAlign: 'center'
}
});
modifier = new Modifier({
transform: Transform.translate(0, 0, 0)
});
container.add(modifier).add(surface);
surface = new Surface({
content: 'Transform.translate(0, 0, 0) <pre>'+Transform.translate(0, 0, 0).toString()+'</pre>'
});
modifier = new Modifier({
transform: Transform.translate(110, 0, 0)
});
container.add(modifier).add(surface);
surface = new Surface({
size: [100, 100],
content: 'Hello World',
properties: {
backgroundColor: 'rgb(255, 66, 33)',
lineHeight: '100px',
fontSize: '14px',
color: 'white',
textAlign: 'center'
}
});
var translateModifier = new Modifier({
transform: Transform.translate(100, 110, 0)
});
container.add(translateModifier).add(surface);
surface = new Surface({
content: 'Transform.translate(100, 110, 0)<pre>'+Transform.translate(100, 110, 0).toString()+'</pre>'
});
modifier = new Modifier({
transform: Transform.translate(210, 110, 0)
});
container.add(modifier).add(surface);
surface = new Surface({
size: [100, 100],
content: 'Hello World',
properties: {
backgroundColor: 'rgb(255, 66, 33)',
lineHeight: '100px',
fontSize: '14px',
color: 'white',
textAlign: 'center'
}
});
modifierChain = new ModifierChain();
var scaleModifier = new Modifier({
transform: Transform.scale(2, 2, 1)
});
modifierChain.addModifier(
scaleModifier,
new Modifier({
transform: Transform.translate(0, 250, 0)
})
);
container.add(modifierChain).add(surface);
content = 'Transform.scale(2, 2, 1)<pre>'+Transform.scale(2, 2, 1).toString()+'</pre>';
content += 'Note: setPerspective(1000);';
surface = new Surface({
content: content
});
modifier = new Modifier({
transform: Transform.translate(130, 250, 0)
});
container.add(modifier).add(surface);
surface = new Surface({
size: [100, 100],
content: 'Hello World',
properties: {
backgroundColor: 'rgb(255, 66, 33)',
lineHeight: '100px',
fontSize: '14px',
color: 'white',
textAlign: 'center'
}
});
modifierChain = new ModifierChain();
var rotateModifier = new Modifier({
transform: Transform.rotateZ(Math.PI / 4)
});
modifierChain.addModifier(
rotateModifier,
new Modifier({
transform: Transform.translate(80, 360, 0)
})
);
container.add(modifierChain).add(surface);
content = 'Transform.rotateZ(Math.PI / 4)<pre>'+Transform.rotateZ(Math.PI / 4).toString();
content += '</pre> Note: setPerspective(1000);<br>Use ModifierChain here.';
surface = new Surface({
content: content
});
modifier = new Modifier({
transform: Transform.translate(160, 380, 0)
});
container.add(modifier).add(surface);
surface = new Surface({
size: [100, 100],
content: 'Hello World',
properties: {
backgroundColor: 'rgb(255, 66, 33)',
lineHeight: '100px',
fontSize: '14px',
color: 'white',
textAlign: 'center'
}
});
modifierChain = new ModifierChain();
var skewModifier = new Modifier({
transform: Transform.skew(Math.PI / 6, 0, 0)
});
modifierChain.addModifier(
new Modifier({
transform: Transform.rotateY(Math.PI / 8)
}),
skewModifier,
new Modifier({
transform: Transform.translate(10, 540, 0)
})
);
container.add(modifierChain).add(surface);
content = 'Transform.skew(Math.PI / 6, 0, 0)<pre>'+Transform.skew(Math.PI / 6, 0, 0).toString();
content += '</pre> Note: setPerspective(1000);<br>Use ModifierChain here, Transform.rotateY(Math.PI / 8) first.<br>';
content += 'See also: <a href="http://stackoverflow.com/questions/13206220/3d-skew-transformation-matrix-along-one-coordinate-axis">3D skew transformation matrix along one coordinate axis</a>';
surface = new Surface({
content: content
});
modifier = new Modifier({
transform: Transform.translate(160, 520, 0)
});
container.add(modifier).add(surface);
surface = new Surface({
size: [100, 100],
content: 'Hello World',
properties: {
backgroundColor: 'rgb(255, 66, 33)',
lineHeight: '100px',
fontSize: '14px',
color: 'white',
textAlign: 'center'
}
});
var inverseModifierChain = new ModifierChain();
var inverseRotate = new Modifier({
transform: Transform.inverse(Transform.rotateZ(Math.PI / 8))
});
inverseModifierChain.addModifier(
new Modifier({
transform: Transform.rotateZ(Math.PI / 4)
}),
inverseRotate,
new Modifier({
transform: Transform.translate(80, 680, 0)
})
);
container.add(inverseModifierChain).add(surface);
content = 'Transform.rotateZ(Math.PI / 8)<pre>'+Transform.rotateZ(Math.PI / 8).toString();
content += '</pre>Transform.inverse(Transform.rotateZ(Math.PI / 8))<pre>'+Transform.inverse(Transform.rotateZ(Math.PI / 8)).toString();
content += '</pre>Transform.transpose(Transform.rotateZ(Math.PI / 8))<pre>'+Transform.transpose(Transform.rotateZ(Math.PI / 8)).toString();
content += '</pre> Note: setPerspective(1000);<br>Use ModifierChain here, Transform.rotateY(Math.PI / 4) first.<br>';
surface = new Surface({
content: content
});
modifier = new Modifier({
transform: Transform.translate(160, 680, 0)
});
container.add(modifier).add(surface);
setIntervalCheck = false;
setInterval(function() {
if (setIntervalCheck) {
translateModifier.setTransform(Transform.translate(100, 110, 0), {
duration: 200,
curve: "easeInOut"
});
scaleModifier.setTransform(Transform.scale(2,2,1), {
duration: 200,
curve: "easeInOut"
});
rotateModifier.setTransform(Transform.rotateZ(Math.PI / 4), {
duration: 200,
curve: "easeInOut"
});
skewModifier.setTransform(Transform.skew(Math.PI / 6, 0, 0), {
duration: 200,
curve: "easeInOut"
});
inverseRotate.setTransform(Transform.rotateZ(Math.PI / 8), {
duration: 200,
curve: "easeInOut"
});
setIntervalCheck = false;
} else {
translateModifier.setTransform(Transform.translate(0, 110, 0), {
duration: 200,
curve: "easeInOut"
});
scaleModifier.setTransform(Transform.scale(1, 1, 1), {
duration: 200,
curve: "easeInOut"
});
rotateModifier.setTransform(Transform.rotateZ(0), {
duration: 200,
curve: "easeInOut"
});
skewModifier.setTransform(Transform.skew(0, 0, 0), {
duration: 200,
curve: "easeInOut"
});
inverseRotate.setTransform(Transform.inverse(Transform.rotateZ(Math.PI / 8)), {
duration: 200,
curve: "easeInOut"
});
setIntervalCheck = true;
}
}, 500);
mainCtx.add(container);
});
function _createElements() {
var context = this;
var table = new RenderNode();
context.elementElements = [];
var elementNumber = 0;
var columnNumber = -1;
var rowNumber = -1;
var distanceWidth = context.elementWidth + context.elementWidth / 25;
var distanceHeight = context.elementHeight + context.elementHeight / 25;
var notElements = [7,8,9,
10,17,18,19,
20,21,22,27,28,29,
30,31,32,37,
40,41,42,47,
50,51,52,57,
60,61,62,67,
70,71,72,77,
80,81,82,87,
90,91,92,97,
100,101,102,107,
110,111,112,117,
120,127,
130,137,
140,147,
150,157,
160,167,
177];
var elementColors = {
'none': 'rgba(255, 255, 255, 0.54)',
'hydrogen': 'rgba(102, 102, 102, 0.54)',
'alkaliMetal': 'rgba(245, 176, 120, 0.54)',
'alkaliEarthMetal': 'rgba(241, 245, 120, 0.54)',
'transitionMetal': 'rgba(242, 118, 118, 0.54)',
'poorMetals': 'rgba(120, 245, 220, 0.54)',
'otherNonMetals': 'rgba(132, 245, 120, 0.54)',
'nobleGases': 'rgba(120, 159, 245, 0.54)',
'lanthanoids': 'rgba(245, 120, 220, 0.54)',
'actinoids': 'rgba(195, 120, 245, 0.54)'
};
for (var i = 0; i < 180; i++) {
columnNumber++;
if (i % 10 == 0) {
columnNumber = -1;
columnNumber ++;
rowNumber++;
}
if (notElements.indexOf(i) > -1) {
//DONT ADD SURFACE
} else {
//ADD ELEMENT
elementNumber = elementNumber ++;
//*****************ADD ELEMENT FACE*************************//
var elementSurface = new Surface({
size: [context.elementWidth,context.elementHeight],
content: context.options.elementData[elementNumber].abreviation,
properties: {
lineHeight: context.elementHeight + 'px',
textAlign: 'center',
//backgroundColor: elementColors[context.options.elementData[elementNumber].type],
fontSize: context.elementWidth / 3 + 'px',
overflow: 'hidden',
color: 'white',
fontFamily: 'Roboto, sans-serif',
fontWeight: 100
}
});
elementSurface.addClass('periodicElement');
var individualRotation = new Modifier();
var originalTranslate = Transform.translate((-context.tableWidth/2)+(distanceWidth * rowNumber), (-context.tableHeight/2)+(distanceHeight*columnNumber),0);
var positionModifier = new Modifier({
align: [0.5,0.5],
transform: originalTranslate
});
var tableConnection = new Modifier({
origin: [0.5,0.5],
});
var flatConnection = new Modifier({
origin: [0.5,0.5]
});
var modifierChain = new ModifierChain();
modifierChain.addModifier(individualRotation);
modifierChain.addModifier(positionModifier);
modifierChain.addModifier(tableConnection);
tableConnection.transformFrom(function() {
return Transform.multiply(Transform.translate(0,0,context.zTransitionable.get()), Transform.multiply(Transform.rotateY(context.yTransitionable.get()), Transform.rotateX(context.xTransitionable.get())))
});
flatConnection.transformFrom(function() {
return Transform.multiply(Transform.translate(0,0,context.zTransitionable.get()), Transform.multiply(Transform.rotateY(context.yTransitionable.get()), Transform.rotateX(context.xTransitionable.get())))
});
//****************ADD ELEMENT BACK*********************************//
// var contentTemplate = function() {
// return "<div>" + context.options.elementData[elementNumber].number + "</div>" +
// "<div>" + context.options.elementData[elementNumber].name + "</div>" +
// "<div>" + context.options.elementData[elementNumber].atomicWeight + "</div>" +
// "<div>" + context.options.elementData[elementNumber].type + "</div>" +
// "<div><img src=\'" + context.options.elementData[elementNumber].icon + "\' alt=\'element diagram\' height=\'75\'></div>";
// };
var contentTemplate = function() {
return "<div>" + context.options.elementData[elementNumber].number + "</div>" +
"<div>" + context.options.elementData[elementNumber].name + "</div>" +
"<div>" + context.options.elementData[elementNumber].atomicWeight + "</div>" +
"<div>" + context.options.elementData[elementNumber].type + "</div>" +
"<div class=\'" + "element" + elementNumber + "\'></div>";
}
var elementBackSurface = new Surface({
size: [context.elementWidth,context.elementHeight],
content: contentTemplate(),
properties: {
textAlign: 'center',
lineHeight: context.elementHeight / 8 + 'px',
// backgroundColor: elementColors[context.options.elementData[elementNumber].type],
color: 'white',
fontSize: context.elementWidth / 10 + 'px',
overflow: 'hidden',
fontFamily: 'Roboto, sans-serif',
fontWeight: 100
}
});
elementBackSurface.addClass('periodicElement');
var individualBackRotation = new Modifier({
transform: Transform.rotateY(Math.PI)
});
var positionBackModifier = new Modifier({
align: [0.5,0.5],
transform: originalTranslate
});
var tableBackConnection = new Modifier({
origin: [0.5,0.5]
});
var flatBackConnection = new Modifier({
origin: [0.5,0.5]
});
var modifierBackChain = new ModifierChain();
modifierBackChain.addModifier(individualBackRotation);
modifierBackChain.addModifier(positionBackModifier);
modifierBackChain.addModifier(tableBackConnection);
tableBackConnection.transformFrom(function() {
return Transform.multiply(Transform.translate(0,0,context.zTransitionable.get()), Transform.multiply(Transform.rotateY(context.yTransitionable.get()), Transform.rotateX(context.xTransitionable.get())))
});
flatBackConnection.transformFrom(function() {
return Transform.multiply(Transform.translate(0,0,context.zTransitionable.get()), Transform.multiply(Transform.rotateY(context.yTransitionable.get()), Transform.rotateX(context.xTransitionable.get())))
});
context.elementElements.push({surface: elementSurface,
original: originalTranslate,
modifierChain: modifierChain,
position: positionModifier,
table: tableConnection,
flat: flatConnection,
individual: individualRotation,
backSurface: elementBackSurface,
modifierBackChain: modifierBackChain,
individualBack: individualBackRotation,
positionBack: positionBackModifier,
tableBack: tableBackConnection,
flatBack: flatBackConnection});
setElementSurfaceListener(context, elementNumber);
table.add(modifierChain).add(elementSurface);
table.add(modifierBackChain).add(elementBackSurface);
elementNumber++
}
}
return table;
}
