function BookView(Book) {
View.apply(this, arguments);
this.Book = Book;
var ratios = [3, 1, 1];
var layout = new FlexibleLayout({
direction: 1,
ratios: ratios
});
var surfaces = [];
content = '<div class="book-item">';
content += '<img class="book-icon" width="30" src="' + this.Book.getThumbnailUrl() + '" />';
content += '<div class="book-title">' + this.Book.getTitle() + '</div>';
content += '<div class="book-authors">' + this.Book.getAuthors() + '</div>';
content += '<div class="book-identifier">' + this.Book.getIdentifier() + '</div>';
content += '<div class="book-description">' + this.Book.getDescription() + '</div>';
content += '</div>';
var bookInfo = new Surface({
size: [undefined, undefined],
content: content,
properties: {
background: 'white',
color: 'black',
borderBottom: '1px solid lightgrey'
}
});
var addFav = new SubmitInputSurface({
origin: [0,0],
size: [undefined, undefined],
value: 'add to favorit'
});
var showMap = new SubmitInputSurface({
origin: [0,0],
size: [undefined, undefined],
value: 'show map'
});
addFav.on('click',this.writeToDatabase.bind(this));
showMap.on('click',this.showMap.bind(this));
surfaces.push(bookInfo);
surfaces.push(addFav);
surfaces.push(showMap);
layout.sequenceFrom(surfaces);
this.add(layout);
}
function _layoutLandscape() {
// create views
this.vTitle = new View();
this.vDescription = new View();
this.vDiagram = new View();
var layout = new FlexibleLayout({
ratios: [1, 3],
direction: 1
});
layout.sequenceFrom([this.vTitle, this.vDescription]);
var centerModifier = new Modifier({
origin: [0.5, 0.5],
align: [0.5, 0.5],
size: this.options.size
});
var layout2 = new FlexibleLayout({
ratios: [3, 4]
});
layout2.sequenceFrom([layout, this.vDiagram]);
this.add(centerModifier).add(layout2);
}
define(function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var FlexibleLayout = require('famous/views/FlexibleLayout');
var mainContext = Engine.createContext();
var colors = [
'rgba(256, 0, 0, .7)',
'rgba(0, 256, 0, .7)',
'rgba(0, 0, 256, .7)',
'rgba(256, 0, 0, .7)',
'rgba(0, 256, 0, .7)',
'rgba(0, 0, 256, .7)',
'rgba(256, 0, 0, .7)',
'rgba(0, 256, 0, .7)',
'rgba(0, 0, 256, .7)'
];
var initialRatios = [1, true, 1, true, 1, true, 1, true];
var flex = new FlexibleLayout({
ratios : initialRatios
});
var surfaces = [];
for (var i = 1; i <= 8; i++) {
size = (i % 2 === 0) ? [10, undefined] : [undefined, undefined]
surfaces.push(new Surface({
size: size,
properties: {
backgroundColor: colors[i-1]
}
}));
}
flex.sequenceFrom(surfaces);
var finalRatios = [4, true, 1, true, 0, true, 7, true];
var toggle = false;
Engine.on('click', function(){
var ratios = toggle ? initialRatios : finalRatios;
flex.setRatios(ratios, {curve : 'easeOut', duration : 500});
toggle = !toggle;
});
mainContext.add(flex);
});
define(function (require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var FlexibleLayout = require('famous/views/FlexibleLayout');
var mainContext = Engine.createContext();
var colors = [
'rgba(256, 0, 0, .7)',
'rgba(0, 256, 0, .7)',
'rgba(0, 0, 256, .7)'
];
var ratios = [1, 3, 5];
var layout = new FlexibleLayout({
ratios: ratios,
transition: {
curve: 'easeInOut',
duration: 2000
}
});
var surfaces = [];
for (var i = 0; i < 3; i++) {
surfaces.push(new Surface({
size: [undefined, undefined],
properties: {
backgroundColor: colors[i % 3]
}
}));
}
layout.sequenceFrom(surfaces);
mainContext.add(layout);
Engine.on('click', function() {
ratios = ratios.reverse();
layout.setRatios(ratios)
});
});
var FlexibleLayout = require('famous/views/FlexibleLayout');
var mainContext = Engine.createContext();
var colors = [
'rgba(256, 0, 0, .7)',
'rgba(0, 256, 0, .7)',
'rgba(0, 0, 256, .7)'
];
var ratios = [1, true, 2, 1, true, 2, 1, true, 2];
var layout = new FlexibleLayout({
ratios: ratios
});
var surfaces = [];
for (var i = 0; i < 9; i++) {
var size = i % 3 === 1 ? [20, undefined] : [undefined, undefined];
surfaces.push(new Surface({
size: size,
properties: {
backgroundColor: colors[i % 3]
}
}));
}
layout.sequenceFrom(surfaces);
mainContext.add(layout);
define(function(require, exports, module) {
// import dependencies
var Engine = require('famous/core/Engine');
var Entity = require('famous/core/Entity');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var RenderNode = require('famous/core/RenderNode');
var FlexibleLayout = require('famous/views/FlexibleLayout');
var GridLayout = require('famous/views/GridLayout');
var Modifier = require('famous/core/Modifier');
var ShortText = require('ksf-ui/widget/input/ShortText');
var Button = require('ksf-ui/widget/themed/base/Button');
var KSFVFlexLayout = require('ksf-ui/layout/VFlex');
var KSFInFamousAdapter = require('../KSFInFamousAdapter');
Engine.setOptions({
appMode: false
});
var root = document.createElement('div');
root.classList.add('famous-root');
root.style.height = "400px";
root.style.backgroundColor = "#EEE";
document.body.appendChild(root);
var mainContext = Engine.createContext(root);
var layout = new FlexibleLayout({
direction: FlexibleLayout.DIRECTION_Y,
ratios: [true, 1]
});
mainContext.add(layout);
var BackgroundLayout = function() {
RenderNode.apply(this, arguments);
};
BackgroundLayout.prototype = Object.create(RenderNode.prototype);
BackgroundLayout.prototype.getSize = function() {
return this._child[1].getSize();
};
var PaddingLayout = function(padding) {
this._padding = padding;
this._node = new RenderNode();
this._entityId = Entity.register(this);
};
PaddingLayout.prototype.add = function add() {
return this._node.add.apply(this._node, arguments);
};
PaddingLayout.prototype.getSize = function getSize() {
var size = this._node.getSize();
return [size[0] + this._padding.left + this._padding.right, size[1] + this._padding.top + this._padding.bottom];
};
PaddingLayout.prototype.render = function() {
return this._entityId;
};
PaddingLayout.prototype.commit = function(context) {
var padding = this._padding;
return {
size: [context.size[0] - padding.left - padding.right, context.size[1] - padding.top - padding.bottom],
transform: Transform.multiply(Transform.translate(padding.left, padding.top, 0), context.transform),
target: this._node.render()
};
};
// ========= top bar ===========
var topBar = new BackgroundLayout();
var topBarButtons = new FlexibleLayout({
ratios: [true, 1, true],
// transition: {
// curve: 'easeInOut',
// duration: 2000
// }
});
topBar.add(new Surface({
properties: {
background: 'black',
}
}));
topBar.add(new Modifier({
size: [undefined, 60]
})).add(topBarButtons);
var logoContent = new Surface({
size: [true, true],
content: "KADATA",
properties: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
zIndex: 1
}
});
var logo = new PaddingLayout({
left: 20, right: 20,
top: 0, bottom: 0
});
logo.add(new Modifier({
origin: [0, 0.5],
align: [0, 0.5],
transform: Transform.translate(0, 0, 1)
})).add(logoContent);
var input = new PaddingLayout({
left: 0, right: 20,
top: 0, bottom: 0
});
input.add(new Modifier({
origin: [0, 0.5],
align: [0, 0.5],
size: [undefined, 25],
transform: Transform.translate(0, 0, 1),
})).add(new KSFInFamousAdapter(new ShortText({
placeholder: "Nom du projet",
}), {
properties: {
background: 'transparent',
color: 'white',
border: 'none',
borderBottom: '1px solid gray',
zIndex: 1
}
}));
// })).add(new InputSurface({
// placeholder: "Nom du projet",
// properties: {
// background: 'transparent',
// color: 'white',
// border: 'none',
// borderBottom: '1px solid gray',
// padding: '0.5em'
// }
// }));
var connexionBtn = new PaddingLayout({
left: 0, right: 20,
top: 0, bottom: 0
});
connexionBtn.add(new Modifier({
origin: [0, 0.5],
align: [0, 0.5],
transform: Transform.translate(0, 0, 1),
})).add(new KSFInFamousAdapter(new Button("Connexion"), {
size: [true, true],
properties: {
zIndex: 1
}
}));
topBarButtons.sequenceFrom([
logo,
input,
connexionBtn
]);
var grid = new GridLayout({
dimensions: [2, 1]
});
var content1 = new RenderNode();
var centerModifier1 = new Modifier({
origin: [0.5, 0.5],
align: [0.5, 0.5],
});
content1.add(centerModifier1).add(new Surface({
size: [true, true],
content: 'content 1',
properties: {
padding: '1em',
background: 'yellow'
}
}));
var content2 = new RenderNode();
content2.add(new KSFInFamousAdapter(new KSFVFlexLayout().content([
new Button("Titre"),
[new Button("Contenu"), { flex: true }]
])));
grid.sequenceFrom([content1, content2]);
layout.sequenceFrom([topBar, grid]);
});
define(function(require, exports, module) {
/********************* Dependencies *********************/
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var InputSurface = require('famous/surfaces/InputSurface');
var Surface = require('famous/core/Surface');
var FlexibleLayout = require('famous/views/FlexibleLayout');
var RenderNode = require('famous/core/RenderNode');
var PlaylistView = require('views/PlaylistView');
var PlayerControlsView = require('views/PlayerControlsView');
require('famous/inputs/DesktopEmulationMode');
/********************* Views and Arrays *********************/
var mainContext = Engine.createContext();
var surfaces = [];
var middleBarItems = [];
var layout = new FlexibleLayout({
direction: 1,
ratios: [0.75, 5.25, 1]
});
var middleBarView = new FlexibleLayout({
direction: 0,
ratios: [0.35, 0.65]
});
var playlist = new PlaylistView({
sizeFunction: function() {
return [window.innerWidth * 0.65, window.innerHeight * 5.25 / 7 / 5 -0.5];
}
});
var playercontrols = new PlayerControlsView();
/********************* Main *********************/
var background = new Surface({
properties: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
zIndex: -1
}
});
// Middle Left Bar
middleBarItems.push(new Surface({
properties: {
boxShadow: '-2px -1px 5px black inset'
//borderRight: '1px solid black',
//borderTop: 'none'
}
}))
middleBarItems.push(playlist);
middleBarView.sequenceFrom(middleBarItems);
// Top Bar
surfaces.push(new Surface({
properties: {
//border: '1px solid black',
boxShadow: '0px -2px 5px black inset',
borderBottom: 'none',
zIndex: -1
}
}));
surfaces.push(middleBarView);
surfaces.push(playercontrols);
//setupInputBar();
layout.sequenceFrom(surfaces);
//mainContext.setPerspective(1000);
mainContext.add(background);
mainContext.add(layout);
/********************* Setup Functions *********************/
function setupInputBar() {
var inputnode = new RenderNode();
var inputMod = new Modifier({
align: [0.5, 0.5],
origin: [0.5, 0.5]
});
var input = new InputSurface({
//size: [50, 50],
type: 'search',
outline: 'none',
properties: {
//backgroundColor: 'black'
borderColor: 'rgba(255, 255, 255, 0.3)',
borderRadius: '30px',
backgroundColor: 'rgba(0, 0, 0, 0)',
color: 'white'
//borderColor: 'rgba(6, 148, 147, 237)'
}
});
inputMod.sizeFrom(function() {
return [mainContext._size[0] * 7/8, mainContext._size[1] / 12];
});
inputnode.add(inputMod).add(input);
input.on('focus', function() {
input.setProperties({
boxShadow: '0 0 5px rgba(6, 148, 147, 237)',
borderColor: 'rgba(255, 255, 255, 0)',
outline: 'none',
backgroundColor: 'rgba(255, 255, 255, 0.2)',
borderRadius: '30px',
color: 'white'
});
});
input.on('blur', function() {
input.setProperties({
borderColor: 'rgba(255, 255, 255, 0.3)',
boxShadow: 'none',
borderRadius: '30px',
backgroundColor: 'rgba(0, 0, 0, 0)',
color: 'white'
//borderColor: 'rgba(6, 148, 147, 237)'
});
});
surfaces.push(inputnode);
}
module.exports = [playlist, playercontrols];
});
LayoutBuilder.prototype.createFlexibleLayout = function(options){
var that = this;
var tmp = new FlexibleLayout({
direction: options.direction,
ratios: options.ratios
});
tmp.Views = [];
if(options.size){
// Expecting a True in either one
// - otherwise, returning undefined for h/w
// Used for true Height or Width(v2)
// - only allowing horizontal direction for now?
var h,w;
if(options.direction == 0 && options.size[1] === true){
tmp.getSize = function(){
var maxHeight = 0;
tmp.Views.forEach(function(v){
// console.log(v);
// console.log(v.getSize());
var h = 0;
try{
h = v.getSize(true)[1];
}catch(err){
console.log('nosize');
}
if(h > maxHeight){
maxHeight = h;
}
});
return [undefined, maxHeight];
}
}
}
// sequenceFrom
options.sequenceFrom.forEach(function(objs){
var nodes = [];
var tmpNode = new RenderNode();
if(!(objs instanceof Array)){
objs = [objs];
}
objs.forEach(function(obj){
var objTempNode;
if(obj instanceof ElementOutput ||
obj instanceof RenderNode ||
obj instanceof View ||
obj instanceof Surface){
objTempNode = obj;
} else if((typeof obj).toLowerCase() == 'object'){
var typofLayout = _.without(Object.keys(obj),'size','mods','deploy','dimensions','sequenceFrom','plane')[0]; // "surface"
var name = obj[typofLayout].key ? obj[typofLayout].key : Object.keys(obj[typofLayout])[0];
objTempNode = new LayoutBuilder(obj);
if(objTempNode.hasName){
tmp[objTempNode.hasName] = objTempNode[objTempNode.hasName];
tmp[objTempNode.hasName].NodeWithMods = objTempNode;
} else {
tmp[name] = objTempNode;
}
} else {
console.error('unknown type');
debugger;
}
// console.log(objTempNode);
tmpNode.add(objTempNode);
nodes.push(objTempNode);
});
tmpNode.getSize = nodes[0].getSize.bind(nodes[0]);
// console.info('tmpNode', tmpNode);
tmp.Views.push(tmpNode);
});
tmp.sequenceFrom(tmp.Views);
// constantly reset the ratios?
// Timer.setInterval(function(){
// // check if actually displayed?
// tmp.setRatios(tmp.options.ratios);
// },16);
var newNode = this.buildModsForNode( tmp, options );
newNode = this.buildMargins( newNode, options);
return [tmp, newNode];
};
initialize: function() {
this.callSuper();
var self = this;
var surfaces;
this.set("routes", [
["addtoqueue", "addtoqueue", function() {
self.set("active", true);
informant.set("backButtonRoute", "tracking");
informant.set("backButtonCallback", function() {});
if (surfaces.newCustomerButton.toggled) surfaces.newCustomerButton.toggle();
if (surfaces.existingCustomerButton.toggled) surfaces.existingCustomerButton.toggle();
surfaces.inputSurface.focus();
}]
]);
var mainView = new View();
var alignModifier = new Modifier();
// Back button
var backButtonContainer = new View();
var backButtonModifier = new Modifier({
align: [0.5, 1],
origin: [0.5, 1],
size: [250, 110]
});
var backButton = new Button({
content: "Cancel",
size: [undefined, undefined],
classes: ["back-btn"],
properties: {
borderRadius: "none"
}
}, {
"click": function() {
informant.navigateTo("tracking");
}
});
backButtonContainer.add(backButtonModifier).add(backButton.view);
// All people
var peopleContainer = new View();
surfaces = {
inputSurface: new InputSurface({
size: [undefined, 70],
properties: {
border: "2px solid #cccccc",
backgroundColor: "white",
fontSize: "30px",
boxShadow: "inset 3px 3px 3px #cccccc",
borderRadius: "5px",
paddingLeft: "15px",
outlineColor: "#428600"
}
}),
newCustomerButton: new Button({
content: "New",
sizeList: BUTTON_SIZES.TOGGLES,
centerView: true,
classes: ["back-btn"],
properties: {
borderRadius: "none"
}
}, {
"click": function(parent) {
parent.toggle();
if (surfaces.existingCustomerButton.toggled) surfaces.existingCustomerButton.toggle();
}
}),
existingCustomerButton: new Button({
content: "Existing",
sizeList: BUTTON_SIZES.TOGGLES,
centerView: true,
classes: ["back-btn"],
properties: {
borderRadius: "none"
}
}, {
"click": function(parent) {
parent.toggle();
if (surfaces.newCustomerButton.toggled) surfaces.newCustomerButton.toggle();
}
}),
addButton: new Button({
content: "Add",
sizeList: BUTTON_SIZES.CONTROLS,
classes: ["back-btn"],
centerView: true,
properties: {
borderRadius: "3px",
boxShadow: "1px 1px 3px #888888"
}
}, {
//TODO add workentry for queueing here NLK
"click": function(parent) {
if(surfaces.inputSurface.getValue() == undefined || surfaces.inputSurface.getValue() == "") {
alert("Try entering a name next time.");
return;
}
if (!surfaces.newCustomerButton.toggled && !surfaces.existingCustomerButton.toggled) {
alert("Please select a customer type: New or Existing.");
return;
}
informant.get("hostingManager").get("connector").add(surfaces.inputSurface.getValue(), timeSync.get("currentTime"));
informant.get("currentInteraction").end();
informant.completeQueueInteraction(0);
informant.navigateTo("tracking");
surfaces.inputSurface.setValue("");
}
}),
cancelButton: new Button({
content: "Cancel",
sizeList: BUTTON_SIZES.CONTROLS,
classes: ["back-btn"],
centerView: true,
properties: {
borderRadius: "3px",
boxShadow: "1px 1px 3px #888888"
}
}, {
"click": function(parent) {
surfaces.inputSurface.setValue("");
//informant.get("hostingManager").get("connector").add(surfaces.inputSurface.getValue(), (surfaces.existingCustomerButton.toggled ? "existing" : "new"));
informant.get("currentInteraction").end();
informant.completeQueueInteraction(1);
informant.resumeInteraction(informant.get("oldInteraction"));
informant.navigateTo("tracking");
}
})
};
this.set("buttonSurfaces", surfaces);
// Bottom Grid
var bottomGrid = new GridLayout({
dimensions: [1, 2]
});
bottomGrid.sequenceFrom([
surfaces.addButton.view,
surfaces.cancelButton.view
]);
var bottomGridModifier = new Modifier({
align: [0.5, 0.5],
origin: [0.5, 0.5],
size: [250, undefined]
});
var bottomGridView = new View();
bottomGridView.add(bottomGridModifier).add(bottomGrid);
// Top grid
var newExistingGrid = new GridLayout({
dimensions: [2, 1]
});
newExistingGrid.sequenceFrom([
surfaces.newCustomerButton.view,
surfaces.existingCustomerButton.view
]);
var topGrid = new GridLayout({
dimensions: [1, 2]
});
topGrid.sequenceFrom([
surfaces.inputSurface,
newExistingGrid
]);
var topGridModifier = new Modifier({
align: [0.5, 0.5],
origin: [0.5, 0.5],
size: [undefined, 250]
});
var topGridView = new View();
topGridView.add(topGridModifier).add(topGrid);
var flexLayout = new FlexibleLayout({
ratios: [5, 2],
direction: 1
});
flexLayout.sequenceFrom([
topGridView,
bottomGridView
]);
peopleContainer.add(flexLayout);
mainView.add(peopleContainer);
var nameSurface = new Surface({
content: informant.get("userName"),
size: [undefined,40],
properties: {
paddingRight:"20px",
fontSize: "24px",
lineHeight: "40px",
color:"#000",
textAlign:"right"
}
});
mainView.add(nameSurface);
this.addNode(mainView);
this.renderView();
this.hide();
}