define(function(requires,exports,module){
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var GridLayout = require("famous/views/GridLayout");
var mainContext = Engine.createContext();
var grid = new GridLayout({
dimensions: [4, 2]
});
var surfaces = [];
grid.sequenceFrom(surfaces);
for(var i = 0; i < 50; i++) {
surfaces.push(new Surface({
content: "panel " + (i + 1),
size: [undefined, undefined],
properties: {
backgroundColor: "hsl(" + (i * 360 / 50) + ", 100%, 50%)",
color: "#404040",
lineHeight: '200px',
textAlign: 'center'
}
}));
}
mainContext.add(grid);
});
function createGrid( section, dimensions ) {
var grid = new GridLayout({
dimensions: dimensions
});
var views = [];
grid.sequenceFrom(views);
for(var i = 0; i < 8; i++) {
var view = new View();
var centerModifier = new Modifier({
origin: [0.5, 0.5]
});
var surface = new Surface({
content: section + ' ' + (i + 1),
size: [100, 100],
classes: ['red-bg'],
properties: {
color: 'white',
textAlign: 'center',
lineHeight: '100px'
},
});
view.add(centerModifier).add(surface);
views.push(view);
}
return grid;
}
define(function(require, exports, module) {
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var Modifier = require("famous/core/Modifier");
var GridLayout = require("famous/views/GridLayout");
var mainContext = Engine.createContext();
var grid = new GridLayout({
dimensions: [4, 2]
});
var surfaces = [];
grid.sequenceFrom(surfaces);
for(var i = 0; i < 8; i++) {
surfaces.push(new Surface({
content: "I am panel " + (i + 1),
size: [undefined, 100],
properties: {
backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
color: "black",
lineHeight: '100px',
textAlign: 'center'
}
}));
}
mainContext.add(new Modifier({
size: [400, 200],
origin: [.5, .5],
align: [.5, .5]
})).add(grid);
});
function _createBody() {
var grid = new GridLayout({
dimensions: [3, 2]
});
var gridView = [];
grid.sequenceFrom(gridView);
imgObject = {
1: './assets/pic1.jpg',
2: './assets/pic2.jpg',
3: './assets/pic3.jpg',
4: './assets/pic4.jpg',
5: './assets/pic5.jpg',
6: './assets/pic6.jpg'
};
for(var i = 1; i < 8; i++) {
this.gridBox = new Surface({
// content: imgObject[1+i],
content: i,
size: [undefined, undefined],
properties: {
backgroundImage: 'url('+ imgObject[i] + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
// backgroundColor: "hsl(" + (i * 300 / 6) + ","+ (i * 10) + "%, "+ (i * 18) +"%)",
color: "#404040",
lineHeight: '200px',
textAlign: 'center',
class: i
}
});
gridView.push(this.gridBox);
}
function _setListeners() {
for(var i = 0; i < gridView.length; i++) {
var holder = gridView[i];
// console.log(gridView[i]);
function _listening() {
this.on('click', function() {
this.eventHandler.downstream.push('flipBoard');
console.log(this.content);
}.bind(this))
};
_listening.call(holder);
}
}
console.log(gridView);
_setListeners.call(this);
// this.contentModifier = new Modifier({
// transform: Transform.translate(0, this.options.screenHeight, 50)
// });
this.layout.content.add(grid);
}
define(function(require) {
'use strict';
// import dependencies
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var RenderNode = require('famous/core/RenderNode');
var GridLayout = require('famous/views/GridLayout');
var BkImageSurface = require('famous-bkimagesurface');
// create the main context
var mainContext = Engine.createContext();
// Create grid-layout
var renderables = [];
var grid = new GridLayout({
dimensions: [4, 3]
});
grid.sequenceFrom(renderables);
// Demo sizing-modes
var url = 'images/earth.png';
var sizeMode;
for (sizeMode in BkImageSurface.SizeMode) {
var bkImage = new BkImageSurface({
content: url,
sizeMode: BkImageSurface.SizeMode[sizeMode],
properties: {
backgroundColor: 'black'
}
});
var text = new Surface({
content: 'SizeMode.' + sizeMode,
properties: {
color: 'white',
padding: '10px',
textShadow: '0px 1px 2px rgba(0, 0, 0, 1)'
}
});
var modifier = new Modifier();
var renderNode = new RenderNode(modifier);
renderNode.add(bkImage);
renderNode.add(text);
renderables.push(renderNode);
}
mainContext.add(grid);
});
function _createButtons(draggable) {
var grid = new GridLayout({
dimensions: [this.options.cols, this.options.rows],
gutterSize: [5, 5]
});
var tools = [];
grid.sequenceFrom(tools);
var menuEvent = function() {
this.menu.current = this.content;
this.menu._eventOutput.emit('menu');
};
for (var i = 0; i < this.icons.length; i++) {
var toolView = new ToolView();
toolView.tool.setOptions({
content: this.icons[i],
properties: {
backgroundColor: 'pink',
lineHeight: '60px',
textAlign: 'center',
fontSize: '40px',
cursor: 'pointer'
}
});
toolView.tool.menu = this;
toolView.tool.on('click', menuEvent);
tools.push(toolView.tool);
}
var gridModifier = new StateModifier({
size: [this.options.spacing * this.options.cols,
this.options.spacing * this.options.rows],
origin: [0.5, 0],
align: [0.5, 0.12],
transform: Transform.translate(0, 0, 1),
properties: {
zIndex: 1
}
});
draggable.subscribe(grid);
this.add(draggable).add(gridModifier).add(grid);
}
QuadrantikView.prototype.sequenceFrom = function (sequence) {
var grid = new GridLayout({
dimensions: [2, 2],
transition: { duration: 1000, curve: 'easeInOut' }
});
if (sequence instanceof Array) {
grid.sequenceFrom(sequence);
this.panels = sequence;
};
this.mod = new StateModifier({
size: [this._WIDTH * 2, this._HEIGHT * 2],
origin: [.5, .5]
});
this.add(this.mod).add(grid);
};
define(function(require, exports, module) {
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var Modifier = require("famous/core/Modifier")
var GridLayout = require("famous/views/GridLayout");
var View = require('famous/core/View');
var ImageSurface = require("famous/surfaces/ImageSurface")
var mainContext = Engine.createContext();
var contextSize = window.innerWidth / 6;
var grid = new GridLayout({
dimensions: [2, 1]
});
var surfaces = [_createLeft(),_createRight()];
grid.sequenceFrom(surfaces);
function _createLeft(){
var view = new View()
var leftMod = new Modifier({
origin: [0.5,0.5]
})
var surface = new ImageSurface({
size: [contextSize,contextSize],
content: './2.png'
})
view.add(leftMod).add(surface)
return view
}
function _createRight(){
var view = new View()
var rightMod = new Modifier({
origin: [0.5,0.5]
})
var surface = new ImageSurface({
size: [contextSize,contextSize],
content: './2.png'
})
view.add(rightMod).add(surface)
return view
}
mainContext.add(grid);
console.log(contextSize);
});
function _createAuthors () {
var amar, joe;
var grid = new GridLayout({
dimensions: [2, 1]
});
var surfaces = [];
grid.sequenceFrom(surfaces);
// If the window width is less than 800 px use this layout (target mobile phone)
if (window.innerWidth < 800) {
// used html for contents on the surface
amar = new Surface({
content: '<br/><h2>Amar Patel</h2><center><img width="85%" src="content/images/amar.png"/></center><span display="inline-block"><a href="http://www.github.com/amarpatel"><img width="20%" src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"/></a> <a href="http://www.linkedin.com/in/amarmpatel"><img width="20%" src="http://press.linkedin.com/display-media/206/4"/></a></span><br/><a color="#000" href="http://www.amarpatel.io/">amarpatel.io</a>',
size: [undefined, undefined],
properties: this.options.bioProps
});
amar.setProperties({borderRight: '1px solid lightgrey'});
joe = new Surface({
content: '<br/><h2>Joe Dou</h2><center><img width="85%" src="content/images/joe.png"/></center><span display="inline-block"><a href="http://www.github.com/joedou"><img width="20%" src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"/></a> <a href="http://www.linkedin.com/in/joedou"><img width="20%" src="http://press.linkedin.com/display-media/206/4"/></a></span><br/><a color="#000" href="http://www.whatwouldjoedou.com/">whatwouldjoedou.com</a>',
size: [undefined, undefined],
properties: this.options.bioProps
});
} else { // If the window width is greater than 800 px use this layout (target desktop)
amar = new Surface({
content: '<br/><h2>Amar Patel</h2><center><img width="25%" src="content/images/amar.png"/></center><br/><br/><br/><span display="inline-block"><a href="http://www.github.com/amarpatel"><img width="6%" src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"/></a> <a href="http://www.linkedin.com/in/amarmpatel"><img width="5%" src="http://press.linkedin.com/display-media/206/4"/></a></span><br/><a color="#000" href="http://www.amarpatel.io/">amarpatel.io</a>',
size: [undefined, undefined],
properties: this.options.bioProps
});
amar.setProperties({borderRight: '1px solid lightgrey'});
joe = new Surface({
content: '<br/><h2>Joe Dou</h2><center><img width="25%" src="content/images/joe.png"/></center><br/><br/><br/><span display="inline-block"><a href="http://www.github.com/joedou"><img width="6%" src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"/></a> <a href="http://www.linkedin.com/in/joedou"><img width="5%" src="http://press.linkedin.com/display-media/206/4"/></a></span><br/><a color="#000" href="http://www.whatwouldjoedou.com/">whatwouldjoedou.com</a>',
size: [undefined, undefined],
properties: this.options.bioProps
});
}
surfaces.push(amar, joe);
this.add(grid);
}
function _createGrid() {
var grid = new GridLayout({
dimensions: this.options
});
var gridSurfaces = [];
grid.sequenceFrom(gridSurfaces);
for(var i = 0; i < 8; i++) {
gridSurfaces.push(new Surface({
content: "panel " + (i + 1),
size: [undefined, undefined],
properties: {
backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
color: "#404040",
lineHeight: '200px',
textAlign: 'center'
}
}));
}
}
function ContentView() {
View.apply(this, arguments);
var data = this.options.data;
var contentLayout = new GridLayout({
dimensions: [1, data.length],
});
var contentSurfaces = data.map(function(d, idx) {
return new Surface({
content: '<a href="'+d.url+'">'+d.title+'</a>',
size: [undefined, 60],
properties: {
backgroundColor: '#fce',
border: '2px solid hsl('+(360 * idx / data.length)+', 50%, 50%)'
},
});
});
contentLayout.sequenceFrom(contentSurfaces);
this.add(contentLayout);
}
define(function(require, exports, module) {
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var GridLayout = require("famous/views/GridLayout");
var mainContext = Engine.createContext();
var contextSize = mainContext.getSize();
var dimensions;
if (contextSize[0] < 480 || contextSize[1] < 480) {
dimensions = [2,8];
} else {
dimensions = [8,2];
};
var grid = new GridLayout({
dimensions: dimensions
});
var surfaces = [];
grid.sequenceFrom(surfaces);
for(var i = 0; i < 8; i++) {
surfaces.push(new Surface({
content: "I am panel " + (i + 1),
size: [undefined, undefined],
properties: {
backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
color: "black",
lineHeight: window.innerHeight / 2 + 'px',
textAlign: 'center'
}
}));
}
mainContext.add(grid);
});
function createMangaSelector()
{
var malList;
var sectionDisplaying = 1;
var reading = [];
var completed = [];
var onHold = [];
var dropped = [];
var planToRead = [];
var view = new View();
var headerHeight = 100;
var footerHeight = 25;
var layout = new HeaderFooterLayout();
view.add(layout);
var headerFooterColor = window.colorScheme.main;
layout.header.add(Surface({
properties: {
backgroundColor: headerFooterColor
}
}));
var date = new Date();
var logoSizer = new StateModifier();
var logo = new ImageSurface({
content: 'content/images/AnimeflixLogo.png?' + date.getTime()
});
layout.header.add(logoSizer).add(logo);
//#region Footer
layout.footer.add(Surface({
properties: {
backgroundColor: headerFooterColor
}
}));
var footerElements = [];
var footerGrid = new GridLayout({
size: [undefined, footerHeight],
dimensions: [4, 1]
});
footerGrid.sequenceFrom(footerElements);
layout.footer.add(footerGrid);
var byRichard = Surface({
content: 'By Richard Kopelow',
properties: {
size: [undefined, footerHeight],
color: 'white',
textAlign: 'center',
verticalAlign: 'middle'
}
});
footerElements.push(byRichard);
var supportContact = Surface({
content: '<a href="mailto:support@anime-flix.com">support@anime-flix.com</a>',
properties: {
size: [undefined, footerHeight],
color: 'white',
textAlign: 'center',
verticalAlign: 'middle',
}
});
footerElements.push(supportContact);
var featuresContact = Surface({
content: '<a href="mailto:features@anime-flix.com?subject=Feature Request">features@anime-flix.com</a>',
properties: {
size: [undefined, footerHeight],
color: 'white',
textAlign: 'center',
verticalAlign: 'middle',
}
});
footerElements.push(featuresContact);
var FAQButton = Surface({
content: 'FAQ',
properties: {
size: [undefined, footerHeight],
color: 'white',
textAlign: 'center',
verticalAlign: 'middle',
}
});
FAQButton.on('click', function ()
{
view._eventOutput.emit('showFAQ');
});
footerElements.push(FAQButton);
//#region IP Adress
/*
var ipAddress = Surface({
properties: {
size: [undefined, footerHeight],
color: 'white',
textAlign: 'center',
verticalAlign: 'middle',
}
});
footerElements.push(ipAddress);
var RTCPeerConnection = window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
var configuration = { "iceServers": [] };
var pc;
var localIP;
if (RTCPeerConnection)
{
pc = new RTCPeerConnection(configuration);
pc.createDataChannel('', { reliable: false });
pc.onicecandidate = function (evt)
{
if (evt.candidate)
{
if (!localIP)
{
localIP = getIpFromString(evt.candidate.candidate);
ipAddress.setContent('IP Address: ' + localIP);
}
}
};
pc.createOffer(function (offerDesc)
{;
pc.setLocalDescription(offerDesc);
}, function (e) { console.warn("offer failed", e); });
function getIpFromString(a)
{
var r = a.match(/\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/);
return r[0];
}
} else
{
//browser doesn't support webrtc
}
*/
//#endregion
//#endregion
var buttonProps = {
textAlign: 'center',
verticalAlign: 'middle',
color: 'white'
};
var buttonColorEvents = new EventHandler();
/*
buttonColorEvents.on('mouseover', function (button)
{
button.currentTarget.style.color = 'black';
button.currentTarget.style.backgroundColor = 'white';
});
buttonColorEvents.on('mouseout', function (button)
{
button.currentTarget.style.color = 'white';
button.currentTarget.style.backgroundColor = headerFooterColor;
});
*/
var logoutButtonTransform = new StateModifier({
origin: [1, 0],
align: [1, 0],
transform: Transform.translate(-5, -5, 10)
});
var logoutButton = Surface({
size: [100, 40],
content: 'Logout',
properties: buttonProps
});
logoutButton.on('click', function ()
{
sessionStorage.username = undefined;
sessionStorage.password = undefined;
localStorage.Gamma=undefined;
localStorage.Epsilon=undefined;
location.hash = '';
location.reload();
});
logoutButton.pipe(buttonColorEvents);
layout.header.add(logoutButtonTransform).add(logoutButton);
var spinButtonTransform = new StateModifier({
origin: [1, 0],
align: [1, 0],
transform: Transform.translate(-180, -5, 1)
});
var spinButton = Surface({
size: [200, 40],
content: 'Anime',
properties: buttonProps
});
spinButton.on('click', function ()
{
view._eventOutput.emit('spin');
});
spinButton.pipe(buttonColorEvents);
layout.header.add(spinButtonTransform).add(spinButton);
var gridHeight = headerHeight / 2;
var gridTransform = new StateModifier();
var grid = new GridLayout({
dimensions: [6, 1]
});
layout.header.add(gridTransform).add(grid);
//#region Catagory Buttons
var buttons = [];
grid.sequenceFrom(buttons);
var readingButton = Surface({
size: [undefined, gridHeight],
content: 'Reading',
properties: buttonProps
});
var buttonView = new View();
buttonView.add(readingButton);
buttons.push(buttonView);
readingButton.on('click', function ()
{
if(sectionDisplaying!=1)
{
lightbox.show(readingIconView);
}
sectionDisplaying = 1;
window.location.hash = 'mdisplay&1';
});
readingButton.pipe(buttonColorEvents);
var completedButton = Surface({
size: [undefined, gridHeight],
content: 'Completed',
properties: buttonProps
});
var buttonView = new View();
buttonView.add(completedButton);
buttons.push(buttonView);
completedButton.on('click', function ()
{
if(sectionDisplaying!=2) {
lightbox.show(completedIconView);
}
sectionDisplaying = 2;
window.location.hash = 'mdisplay&2';
});
completedButton.pipe(buttonColorEvents);
var onHoldButton = Surface({
size: [undefined, gridHeight],
content: 'On-Hold',
properties: buttonProps
});
var buttonView = new View();
buttonView.add(onHoldButton);
buttons.push(buttonView);
onHoldButton.on('click', function ()
{
if(sectionDisplaying!=3)
{
lightbox.show(onHoldIconView);
}
sectionDisplaying = 3;
window.location.hash = 'mdisplay&3';
});
onHoldButton.pipe(buttonColorEvents);
var droppedButton = Surface({
size: [undefined, gridHeight],
content: 'Dropped',
properties: buttonProps
});
var buttonView = new View();
buttonView.add(droppedButton);
buttons.push(buttonView);
droppedButton.on('click', function ()
{
if(sectionDisplaying!=4)
{
lightbox.show(droppedIconView);
}
sectionDisplaying = 4;
window.location.hash = 'mdisplay&4';
});
droppedButton.pipe(buttonColorEvents);
var planToReadButton = Surface({
size: [undefined, gridHeight],
content: 'Plan To Read',
properties: buttonProps
});
var buttonView = new View();
buttonView.add(planToReadButton);
buttons.push(buttonView);
planToReadButton.on('click', function ()
{
if(sectionDisplaying!=6)
{
lightbox.show(planToReadIconView);
}
sectionDisplaying = 6;
window.location.hash = 'mdisplay&6';
});
planToReadButton.pipe(buttonColorEvents);
var searchButton = Surface({
size: [undefined, gridHeight],
content: 'Search',
properties: buttonProps
});
var buttonView = new View();
buttonView.add(searchButton);
buttons.push(buttonView);
searchButton.on('click', function ()
{
if(sectionDisplaying!=7)
{
lightbox.show(searchView);
}
sectionDisplaying = 7;
window.location.hash = 'mdisplay&7';
});
searchButton.pipe(buttonColorEvents);
//#endregion
//#region Series Display
var seriesDisplayTransform = new StateModifier({
transform: Transform.translate(0, 0, 15)
});
var seriesDisplay = SeriesDisplay();
view.add(seriesDisplayTransform).add(seriesDisplay);
seriesDisplay.on('showSelected', function (data) {
view._eventOutput.emit('showSelected', data);
});
seriesDisplay.on('mangaSelected', function (data) {
view._eventOutput.emit('mangaSelected', data);
});
seriesDisplay.on('refreshList', function ()
{
view.refreshList();
});
//#endregion
view.resize = function ()
{
seriesDisplay.resize();
seriesDisplay.updatePosition();
readingButton.setOptions({
size: [undefined, window.formatting.scale * gridHeight]});
completedButton.setOptions({
size: [undefined, window.formatting.scale * gridHeight]});
onHoldButton.setOptions({
size: [undefined, window.formatting.scale * gridHeight]});
droppedButton.setOptions({
size: [undefined, window.formatting.scale * gridHeight]});
planToReadButton.setOptions({
size: [undefined, window.formatting.scale * gridHeight]});
searchButton.setOptions({
size: [undefined, window.formatting.scale * gridHeight]});
logoutButton.setOptions({
size: [window.formatting.scale * 100, window.formatting.scale * gridHeight]
});
spinButton.setOptions({
size: [window.formatting.scale * 200, window.formatting.scale * gridHeight]
});
readingButton.setProperties({
fontSize: window.formatting.scale * 20 + 'px'});
completedButton.setProperties({
fontSize: window.formatting.scale * 20 + 'px'});
onHoldButton.setProperties({
fontSize: window.formatting.scale * 20 + 'px'});
droppedButton.setProperties({
fontSize: window.formatting.scale * 20 + 'px'});
planToReadButton.setProperties({
fontSize: window.formatting.scale * 20 + 'px'});
searchButton.setProperties({
fontSize: window.formatting.scale * 20 + 'px'});
logoutButton.setProperties({
fontSize: window.formatting.scale * 20 + 'px'});
spinButton.setProperties({
fontSize: window.formatting.scale * 20 + 'px'});
byRichard.setProperties({
fontSize: window.formatting.scale * 14 + 'px'});
supportContact.setProperties({
fontSize: window.formatting.scale * 14 + 'px'});
featuresContact.setProperties({
fontSize: window.formatting.scale * 14 + 'px'});
FAQButton.setProperties({
fontSize: window.formatting.scale * 14 + 'px'});
//ipAddress.setProperties({ fontSize: window.formatting.scale * 14 + 'px' });
layout.setOptions({
headerSize: window.formatting.scale * headerHeight,
footerSize: window.formatting.scale * footerHeight
});
logoSizer.setSize([true, window.formatting.scale * 50]);
//logo.setProperties({ 'height': window.formatting.scale * 50 +'px'});
gridTransform.setTransform(Transform.translate(0, window.formatting.scale * (headerHeight - gridHeight), 1));
grid.setOptions({
size: [undefined, window.formatting.scale * gridHeight]});
}
//#region Background
var background = Surface({
properties: {
backgroundColor: window.colorScheme.background,
}
});
layout.content.add(background);
//#endregion
//#region Lightbox
var screenWidth = window.mainContext.getSize()[0];
var lightboxTransform = new StateModifier({
transform: Transform.translate(0, 0, 1)
});
var lightbox = new Lightbox({
inOpacity: 1,
outOpacity: 1,
inTransform: Transform.translate(screenWidth, 0, 1),
outTransform: Transform.translate(-1 * screenWidth, 0, 1),
inTransition: {duration: 1000, curve: Easing.outBack},
outTransition: {duration: 1000, curve: Easing.easeOut}
});
//#endregion
function searchShowWithID(title, id, callback)
{
searchMALAsync(title,'manga', function (obj)
{
if(obj.entry.length == undefined)
{
callback(obj.entry);
}
else
{
for(var i = 0; i < obj.entry.length; i++)
{
if(obj.entry[i].id == id)
{
callback(obj.entry[i]);
}
}
}
});
}
function createBlankListData()
{
var date = new Date();
return {
series_mangadb_id: 0,
series_title: "",
series_type: 1,
series_chapters: 0,
series_status: 0,
series_start: '0000-00-00',
series_end: '0000-00-00',
my_id: 0,
my_read_chapters: 0,
my_start_date: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(),
my_finish_date: '000-00-00',
my_score: 0,
my_status: 6,
my_rereading: 0,
my_rereadingg_ep: 0,
my_last_updated: 0
};
}
function createListDataFromSearchData(data)
{
var baseData = createBlankListData();
baseData.series_mangadb_id = data.id;
baseData.series_title = data.title;
baseData.series_image = data.image;
baseData.series_status=data.status=='Publishing'?1:0;
baseData.series_start = data.start_date;
baseData.series_end = data.end_date;
baseData.series_chapters = data.chapters;
baseData.series_synonyms = data.synonyms + '; ' + data.english;
baseData.localConstruction = true;
return baseData;
}
function showSelectedPassThrough(data)
{
searchShowWithID(data.series_title, data.series_mangadb_id, function (obj)
{
var series = {listData: data, searchData: obj};
seriesDisplay.setSeries(series);
seriesDisplay.show();
});
//view._eventOutput.emit('showSelected',data);
}
var readingIconView = IconView();
readingIconView.on('iconClick', showSelectedPassThrough);
var completedIconView = IconView();
completedIconView.on('iconClick', showSelectedPassThrough);
var onHoldIconView = IconView();
onHoldIconView.on('iconClick', showSelectedPassThrough);
var droppedIconView = IconView();
droppedIconView.on('iconClick', showSelectedPassThrough);
var planToReadIconView = IconView();
planToReadIconView.on('iconClick', showSelectedPassThrough);
var searchView = SearchView('manga');
searchView.on('searchSeriesSelected', function (data)
{
var listData;
var bail = false;
for(var i = 0; i < malList.manga.length && !bail; i++)
{
if(data.id == malList.manga[i].series_mangadb_id)
{
listData = malList.manga[i];
bail = true;
}
}
if(listData == undefined)
{
listData = createListDataFromSearchData(data);
}
var series = {listData: listData, searchData: data};
seriesDisplay.setSeries(series);
seriesDisplay.show();
});
layout.content.add(lightboxTransform).add(lightbox);
function sortMALList()
{
reading = [];
completed = [];
onHold = [];
dropped = [];
planToRead = [];
malList.manga.forEach(function (manga) {
switch(manga.my_status)
{
case '1':
reading.push(manga);
break;
case '2':
completed.push(manga);
break;
case '3':
onHold.push(manga);
break;
case '4':
dropped.push(manga);
break;
case '6':
planToRead.push(manga);
break;
}
});
}
view.refreshList = function ()
{
malList=getMALList(true);
sortMALList();
readingIconView.populate(reading);
completedIconView.populate(completed);
onHoldIconView.populate(onHold);
droppedIconView.populate(dropped);
planToReadIconView.populate(planToRead);
//lightbox.show(readingIconView);
}
view.selectShowById = function (id)
{
for(var i = 0; i < malList.manga.length; i++)
{
if(malList.manga[i].series_mangadb_id == id)
{
return malList.manga[i];
}
}
var blank = createBlankListData();
blank.series_mangadb_id = id;
blank.my_status = 1;
blank.localConstruction = true;
return blank;
}
view.showSection = function (section)
{
switch(section)
{
case '1':
lightbox.show(readingIconView);
sectionDisplaying=1;
break;
case '2':
lightbox.show(completedIconView);
sectionDisplaying=2;
break;
case '3':
lightbox.show(onHoldIconView);
sectionDisplaying=3;
break;
case '4':
lightbox.show(droppedIconView);
sectionDisplaying=4;
break;
case '6':
lightbox.show(planToReadIconView);
sectionDisplaying=6;
break;
case '7':
lightbox.show(searchView);
sectionDisplaying=7;
break;
}
}
view.getShowingSection = function ()
{
return sectionDisplaying;
}
return view;
}
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var GridLayout = require("famous/views/GridLayout");
var mainContext = Engine.createContext();
var grid = new GridLayout({
dimensions: [4, 2]
});
var surfaces = [];
grid.sequenceFrom(surfaces);
for(var i = 0; i < 50; i++) {
surfaces.push(new Surface({
content: "panel " + (i + 1),
size: [undefined, undefined],
properties: {
backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
color: "#404040",
lineHeight: '200px',
textAlign: 'center'
}
}));
}
mainContext.add(grid);
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();
}
function _createViews(){
this.recent = null;
var surfaceMod = new StateModifier({
align: [0.5, 0.117],
origin: [.5,.5]
});
var firstSurface = new Surface({
content: 'Select the day you want to attend dinner',
size:[window.innerWidth, 40],
properties: {
size: [undefined, undefined],
color: 'black',
textAlign: 'center',
backgroundColor: 'transparent'
}
});
this.add(surfaceMod).add(firstSurface);
var grid = new GridLayout({
dimensions: [7, 5]
});
this.surfaces = [];
grid.sequenceFrom(this.surfaces);
for(var i = 0; i < 31; i++) {
if(i == 0) {
this.surfaces.push(new Surface({
content: "",
size: [window.innerWidth / 7, window.innerHeight/ 10],
properties: {
textAlign: 'center'
}
}));
}
else {
this.surfaces.push(new Surface({
content: "" + i,
size: [window.innerWidth / 7, window.innerHeight/ 10],
properties: {
textAlign: 'center'
}
}));
}
}
var stateModifier = new StateModifier({
align: [.5 , .5],
origin: [.5,.5],
size:[window.innerWidth * 0.95, window.innerHeight * 0.5]
});
this.add(stateModifier).add(grid);
this.nextMod = new StateModifier({
align: [0.75, 0.9]
});
this.nextButton = new Surface({
content: "<i class='fa fa fa-chevron-right fa-2x'></i>",
size:[100, 70],
properties:{
zIndex: 10,
color: 'black',
textAlign: 'center',
backgroundColor: 'transparent'
}
});
// this.add(this.nextMod).add(this.nextButton);
}
function _createStrips() {
var grid = new GridLayout({
size: [320, 400],
dimensions: [3, 3]
});
var surfaces = [];
grid.sequenceFrom(surfaces);
var iconContents = this.options.filterData;
this.rowModifiers = [];
var contentCounter = 0;
var surface, view, availability;
var width = this.options.width;
var height = this.options.height;
// var scaledWidth = 50 * height / 320;
// var scaledHeight = 60 * height / 320;
var scaledWidth = 88;
var scaledHeight = 128;
for (var row = 0; row < 3; row++) {
for (var col = 0; col < 3; col++) {
this.rowModifiers[(row * 3) + col] = new StateModifier({
size: [scaledWidth, scaledHeight],
origin: [0.5, 0.5]
});
//create surface from iconContents
availability = iconContents[contentCounter].available ? 'available' : 'unavailable';
surface = new Surface({
size: [undefined, undefined],
classes: ['filterIcon'],
content: '<img class="filterIconImg" width="' + scaledWidth + '" src="' + iconContents[contentCounter].imageUrl + '"/>' +
'<div class="filterIconText ' + availability + '">' + iconContents[contentCounter].text + '</div>'
});
if ((row == 0) && (col == 0)) {
var that = this;
surface.on('click', function () {
console.log(that);
that.options.leave();
Timer.after(function () {
that.options.c.emit('邀请详情', {
action: 'ENTER',
isBack: true
});
}, 6);
});
}
//push view (modifier + surface) onto surfaces
view = new View();
view._add(this.rowModifiers[(row * 3) + col]).add(surface);
surfaces.push(view);
contentCounter++;
}
}
var gridModifier = new StateModifier({
size: [320, 400],
origin: [0.5, 0],
transform: Transform.translate(0, 30, 0)
});
this._add(gridModifier).add(grid);
// this._add(grid);
}
function _createStrips() {
var _super = this;
//create a grid for icons
var grid = new GridLayout({
//size:[undefined, undefined],
dimensions: [3, 3],
properties: {
backgroundColor: 'orange'
}
});
var surfaces = [];
grid.sequenceFrom(surfaces);
var iconContents = [
{text: 'ART', imageUrl: 'img/icon-menu/art.png', available: true},
{text: 'BARCHART', imageUrl: 'img/icon-menu/barchart.png', available: true},
{text: 'BIKE', imageUrl: 'img/icon-menu/bike.png', available: true},
{text: 'BLIMP', imageUrl: 'img/icon-menu/blimp.png', available: true},
{text: 'BOLT', imageUrl: 'img/icon-menu/bolt.png', available: true},
{text: 'BOMB', imageUrl: 'img/icon-menu/bomb.png', available: true},
{text: 'BOOKLET', imageUrl: 'img/icon-menu/booklet.png', available: true},
{text: 'BOOKSHELF', imageUrl: 'img/icon-menu/bookshelf.png', available: true},
{text: 'BRIEFCASE', imageUrl: 'img/icon-menu/briefcase.png', available: true},
];
this.rowModifiers = [];
var contentCounter = 0;
var surf, view, availability;
var width = IconMenuView.DEFAULT_OPTIONS.width; // window.innerWidth;
var height = IconMenuView.DEFAULT_OPTIONS.height; // window.innerHeight;
var scaledWidth = 50*height/320;
var scaledHeight = 60*height/320;
for(var row = 0; row < 3; row++) {
for(var col = 0; col < 3; col++) {
this.rowModifiers[(row * 3) + col] = new Modifier({
size: [scaledWidth, scaledHeight],
origin: [0.5, 0.5]
});
//create surface from iconContents
availability = iconContents[contentCounter].available ? 'available' : 'unavailable';
surf = new Surface({
size: [undefined,undefined],
classes: ['filterIcon'],
content: '<img class="filterIconImg" width="' + scaledWidth + '" src="'+ iconContents[contentCounter].imageUrl +'"/>'+
'<div class="filterIconText '+ availability +'">' + iconContents[contentCounter].text +'</div>'
});
//var id = contentCounter;
//Example of closure, notice id must be in the params so it will not hook to some variable
//http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
(function setEvent(id) {
surf.on('click', function () {
console.log("Icon Id:" + id);
//Need to fire custome even here with id as a parmeter
//IconClick id
// Document closure in the right page
_super._eventOutput.emit('app', {id: id});
});
})(contentCounter);
//push view (modifier + surface) onto surfaces
view = new View();
view._add(this.rowModifiers[(row * 3) + col]).add(surf);
surfaces.push(view);
contentCounter++;
}
}
this._add(grid);
}
define(function (require, exports, module) {
'use strict';
// import dependencies
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var RenderNode = require('famous/core/RenderNode');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var GridLayout = require('famous/views/GridLayout');
var BoxLayout = require('famous-boxLayout');
// Create the main context
var mainContext = Engine.createContext();
// Helper functions
function addSurface(boxLayout, name) {
if (boxLayout[name] !== undefined) {
var surface = new Surface({
classes: [name]
});
boxLayout[name].add(surface);
if (name === 'middle') {
surface.setContent('Margins: [' + boxLayout.options.margins + ']<div class="center">.middle</div>');
} else {
surface.setContent('<div class="center">.' + name + '</div>');
}
}
}
function setSurfaces(boxLayout) {
addSurface(boxLayout, 'topLeft');
addSurface(boxLayout, 'top');
addSurface(boxLayout, 'topRight');
addSurface(boxLayout, 'left');
addSurface(boxLayout, 'middle');
addSurface(boxLayout, 'right');
addSurface(boxLayout, 'bottomLeft');
addSurface(boxLayout, 'bottom');
addSurface(boxLayout, 'bottomRight');
}
var boxLayouts = [];
function createBoxLayout(margins) {
var boxLayout = new BoxLayout({
margins: margins
});
setSurfaces(boxLayout);
var modifier = new Modifier({
transform: Transform.scale(0.9, 0.9, 1.0),
align: [0.5, 0.5],
origin: [0.5, 0.5]
});
var renderable = new RenderNode(modifier);
renderable.add(boxLayout);
boxLayouts.push(renderable);
}
// Create example box-layouts
var SZ = 60;
createBoxLayout([]);
createBoxLayout([SZ]);
createBoxLayout([SZ, 0]);
createBoxLayout([0, SZ]);
createBoxLayout([SZ, 0, 0, 0]);
createBoxLayout([0, SZ, 0, 0]);
createBoxLayout([0, 0, SZ, 0]);
createBoxLayout([0, 0, 0, SZ]);
createBoxLayout([SZ - 10, SZ, SZ - 20, SZ + 10]);
// Show box-layouts in grid
var grid = new GridLayout({
dimensions: [3, 3]
});
grid.sequenceFrom(boxLayouts);
mainContext.add(grid);
});
define(function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Surface = require('famous/core/Surface');
var ImageSurface = require('famous/surfaces/ImageSurface');
var GridLayout = require('famous/views/GridLayout');
var Transitionable = require('famous/transitions/Transitionable');
var SpringTransition = require('famous/transitions/SpringTransition');
Transitionable.registerMethod('spring', SpringTransition);
var mainContext = Engine.createContext();
var gridSize = [5, 5];
//var buttonSize = Math.floor(100 / (gridSize[0] + gridSize[1])) + Math.floor((gridSize[0] * gridSize[1]) / (gridSize[0]));
var buttonSize = 128;
var grid = new GridLayout({
dimensions: [gridSize[0], gridSize[1]],
transition: {
curve: 'easeInOut',
duration: 0
}
});
var surfaces = [];
grid.sequenceFrom(surfaces);
for(var i = 0; i < (gridSize[0] * gridSize[1]); i++) {
// Generate a random color
// Famo.us doesn't like colors under images, though >_<
var bgColor = "#" + Math.random().toString(16).slice(2, 8);
surfaces.push(new ImageSurface({
size: [buttonSize, buttonSize],
properties: {
backgroundColor: bgColor,
borderRadius: (buttonSize) + "px",
boxShadow: '4px 4px 5px #888888'
}
}));
// Generate seed for buttons to vary images from placeholder service
var seed = Math.floor(Math.random() * ((gridSize[0] + gridSize[1]) / 2)) + 1;
// Scatter photo types
if ((i + 1) % 3 == 0)
surfaces[i].setContent("http://fillmurray.com/" + (buttonSize + seed) + "/" + (buttonSize + seed));
else if ((i + 1) % 2 == 0)
surfaces[i].setContent("http://placebear.com/" + (buttonSize + seed) + "/" + (buttonSize + seed));
else
surfaces[i].setContent("http://placecorgi.com/" + (buttonSize + seed) + "/" + (buttonSize + seed));
}
// Springy Entrance
var spring = {
method: 'spring',
period: 400,
dampingRatio: 0.3
};
var stateModifier = new StateModifier({
origin: [0.5, 0]
});
// Parent this modifier to the grid on the render tree
mainContext.add(stateModifier).add(grid);
// Set intitial position
stateModifier.setTransform(
Transform.translate(0, -300, 0)
);
// Set end position with spring bounce
stateModifier.setTransform(
Transform.translate(0, 0, 0), spring
);
/* When clicked, transpose the layout
var toggle = false;
Engine.on('click', function() {
if (toggle) {
grid.setOptions({dimensions: [gridSize[0], gridSize[1]]});
}
else {
grid.setOptions({dimensions: [gridSize[1], gridSize[0]]});
}
toggle = !toggle;
});
*/
});
function addContent() {
var grid = new GridLayout({
dimensions: [4, 7]
});
var views = [];
grid.sequenceFrom(views);
for (var i = 0; i < 26; i++) {
var view = new View();
var centerModifier = new Modifier({
origin: [.5, .5]
});
var surface = new Surface({
content: String.fromCharCode(i+97),
size: [50, 50],
//classes: ['red-bg'],
properties: {
backgroundColor:'yellow',
color: 'black',
textAlign: 'center',
//lineHeight: '100px',
fontSize:'30px'
}
});
view.add(centerModifier).add(surface);
views.push(view);
}
var v2 = new View();
var v2Center = new Modifier({
origin: [.5,.5]
});
var v2String = '0';
var v2Surf = new Surface({
content: v2String, //String.fromCharCode(i+65),
size: [50, 50],
//classes: ['red-bg'],
properties: {
backgroundColor:'red',
color: 'black',
textAlign: 'center',
//lineHeight: '100px',
fontSize:'30px'
}
});
var v2Drag = new Draggable({ });
v2Surf.pipe(v2Drag);
v2.add(v2Drag).add(v2Center).add(v2Surf);
//var v2Delay = 250;
views.push(v2);
layout.content.add(grid);
v2Surf.content = 'DragMe';
for (var iloop = 0; iloop<200; iloop++) {
var zInc = Transform.rotateZ(Math.PI*.1*iloop);
v2Center.setTransform(zInc,{duration: 0});
}
}
define(function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var RenderNode = require('famous/core/RenderNode');
var Modifier = require('famous/core/Modifier');
var Scrollview = require('famous/views/Scrollview');
var GridLayout = require('famous/views/GridLayout');
var context = Engine.createContext();
var scrollViews = [];
var scrollview = new Scrollview();
scrollview.sequenceFrom(scrollViews);
var gridCells = [];
var grid = new GridLayout();
grid.sequenceFrom(gridCells);
grid.mod = new Modifier();
var cellCount = 24;
var cellMinWidth = 200.0;
grid.mod.sizeFrom(function() {
var size = context.getSize();
var cellsX = Math.floor(size[0] / cellMinWidth);
var cellsY = Math.ceil(cellCount * 1.0 / cellsX);
var cellHeight = 300;// size[0] * 1.0 / cellsX;
grid.setOptions({dimensions: [cellsX, cellsY]});
var extra = size[0] - (cellsX * cellMinWidth);
var extraWidth = 0;
if(extra > 0){
extraWidth = Math.floor(extra / cellsX);
}
for(var i=0; i< 24; i++){
var s = gridCells[i];
s.setSize([cellMinWidth+extraWidth-20,280]);
}
return [undefined, cellsY * cellHeight];
});
grid.node = new RenderNode();
grid.node.add(grid.mod).add(grid);
for (var i = 0; i < cellCount; i++) {
var surface = new Surface({
size: [cellMinWidth, 280],
properties: {
//backgroundColor: 'hsl(' + (i * 360 / 12) + ',75%,50%)',
borderRadius: '5px',
borderStyle: 'solid',
borderWidth: '1px'
}
});
gridCells.push(surface);
surface.pipe(scrollview);
}
;
scrollViews.push(grid.node);
context.add(scrollview);
});
LayoutBuilder.prototype.createGridLayout = function(options){
var that = this;
var tmp = new GridLayout({
dimensions: options.dimensions || [] // 3 col, 4 row
});
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 calculating the Height at the moment
var h,w;
// Height
if(options.size[1] === true){
tmp.getSize = function(){
var columnCount = options.dimensions[0];
// Uses the number of rows to determine the max-height of an individual column
var maxHeights = _.map(_.range(columnCount), function(){return 0;}); // number of columns we're counting
tmp.Views.forEach(function(v,i){
var h = v.getSize(true)[1];
maxHeights[columnCount%(i+1)] += h;
// if(h > maxHeight){
// maxHeight = h;
// }
});
return [undefined, Math.max(maxHeights)];
}
}
// Width
// - todo
}
// sequenceFrom
options.sequenceFrom.forEach(function(obj){
var tmpNode;
if(obj instanceof ElementOutput ||
obj instanceof RenderNode ||
obj instanceof View ||
obj instanceof Surface){
tmpNode = obj;
} else if((typeof obj).toLowerCase() == 'object'){
var typofLayout = _.without(Object.keys(obj),'size','mods','deploy','plane')[0]; // "surface"
var name = obj[typofLayout].key ? obj[typofLayout].key : Object.keys(obj[typofLayout])[0];
tmpNode = new LayoutBuilder(obj);
if(tmpNode.hasName){
tmp[tmpNode.hasName] = tmpNode[tmpNode.hasName];
tmp[tmpNode.hasName].NodeWithMods = tmpNode;
} else {
console.log(name);
debugger;
tmp[name] = tmpNode;
}
} else {
console.error('unknown type');
debugger;
}
console.info('tmpNode', tmpNode);
tmp.Views.push(tmpNode);
});
tmp.sequenceFrom(tmp.Views);
// // size?
// if(options.size){
// tmp.getSize = function(){
// var combinedWidth = 0;
// var maxHeight = 0;
// if(options.size[0] == undefined)
// contestView.Layout.sequential.Top.Views.forEach(function(v){
// var h = v.getSize(true)[1];
// if(h > maxHeight){
// maxHeight = h;
// }
// });
// }
// }
var newNode = this.buildModsForNode( tmp, options );
newNode = this.buildMargins( newNode, options);
return [tmp, newNode];
};
define(function(require, exports, module) {
// import dependencies
var Transitionable = require('famous/transitions/Transitionable');
var Surface = require("famous/core/Surface");
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var ImageSurface = require('famous/surfaces/ImageSurface');
var StateModifier = require('famous/modifiers/StateModifier');
var PhysicsEngine = require('famous/physics/PhysicsEngine');
var Body = require('famous/physics/bodies/Body');
var Circle = require('famous/physics/bodies/Circle');
var Wall = require('famous/physics/constraints/Wall');
var Collision = require('famous/physics/constraints/Collision');
var GridLayout = require("famous/views/GridLayout");
var RenderNode = require('famous/core/RenderNode');
var Easing = require('famous/transitions/Easing');
var transitionable = new Transitionable(0);
var mainContext = Engine.createContext();
var PhysicsEngine = new PhysicsEngine();
var node = new RenderNode();
var physicsOrigin = [0.5, 0.5];
var radius = 50;
var ballCollision = new Collision();
var dimX = window.innerWidth;
var dimY = window.innerHeight;
var leftWall = new Wall({
normal: [1, 0, 0],
distance: Math.round(dimX / 2.0),
restitution: 0.5
});
var rightWall = new Wall({
normal: [-1, 0, 0],
distance: Math.round(dimX / 2.0),
restitution: 0.5
});
var topWall = new Wall({
normal: [0, 1, 0],
distance: Math.round(dimY / 2.0),
restitution: 0.5
});
var bottomWall = new Wall({
normal: [0, -1, 0],
distance: Math.round(dimY / 2.0),
restitution: 0.5
});
var balls = [];
var grid = new GridLayout({
dimensions: [2, 1]
});
PhysicsEngine.attach([leftWall, rightWall, topWall, bottomWall], balls);
var surfaces = [];
var backgrounds = ['grey', '#FA5C4F'];
var textColors = ['#FA5C4F', 'grey'];
var content = ['Click the particles...', '...and become Famo.us!'];
grid.sequenceFrom(surfaces);
for(var i = 0; i < 2; i++) {
surfaces.push(new Surface({
content: '<h1>' + content[i] + '</h1>',
properties: {
textAlign: 'center',
backgroundColor: backgrounds[i],
color: textColors[i]
}
}));
}
function createBall(x, y) {
var ball = new ImageSurface({
content: 'http://code.famo.us/assets/famous_logo.svg',classes: ['double-sided'],
size: [radius * 2, radius * 2],
properties: {
backgroundColor: 'grey'
}
})
// ball.setTransform(rotate);
ball.particle = new Circle({
radius: radius,
position: [2*Math.random()*window.innerWidth-window.innerWidth, 2*Math.random()*window.innerHeight-window.innerHeight, 0]
});
PhysicsEngine.addBody(ball.particle);
PhysicsEngine.attach(ballCollision, balls);
node.add(ball.particle).add(ball);
balls.push(ball.particle);
ball.on("click", function () {
var currentColor = ball.properties.backgroundColor;
if (currentColor == '#FA5c4F'){
var nextColor = 'grey';
} else if (currentColor == 'grey'){
var nextColor = '#FA5c4F';
}
ball.setOptions({properties: {backgroundColor: nextColor, borderRadius: '50px'}});
ball.particle.setVelocity([Math.random()*5, Math.random()*5, 0]);
});
}
for(var numBalls = 0; numBalls < 10; numBalls++){
createBall(dimX, dimY);
}
var modifier = new Modifier({
transform: function() {
var scale = transitionable.get();
return Transform.scale(scale, scale, 1);
},
opacity: function() {
return transitionable.get();
},
origin: physicsOrigin
})
mainContext.add(grid);
mainContext.add(modifier).add(node);
node.add(PhysicsEngine);
transitionable.set(1, {
duration: 2000, curve: Easing.outBack
});
});
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var GridLayout = require("famous/views/GridLayout");
var mainContext = Engine.createContext();
var grid = new GridLayout();
var surface = new Surface({
content: "I am a new Surface",
size: [undefined, undefined],
properties: {
backgroundColor: "red",
color: "#404040",
textAlign: 'center'
}
});
grid.sequenceFrom([surface]);
mainContext.add(grid);
define(function(require, exports, module) {
//core
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 EventHandler = require("famous/core/EventHandler");
var GridLayout = require("famous/views/GridLayout");
var Transitionable = require("famous/transitions/Transitionable");
//modifiers
var Draggable = require('famous/modifiers/Draggable');
var StateModifier = require('famous/modifiers/StateModifier');
//inputs
var ScrollSync = require("famous/inputs/ScrollSync");
var MouseSync = require("famous/inputs/MouseSync");
//transitions
var WallTransition = require('famous/transitions/WallTransition');
Transitionable.registerMethod('wall', WallTransition);
/**
*
* Toggle edit mode
*
**/
var images = ['http://m1.behance.net/rendition/modules/117187517/hd/0db08a292bd13b7899317a2d74ce63d0.png',
'http://m1.behance.net/rendition/modules/117187519/hd/fda8e9dfccdb318db8929df4dbeeb6db.jpg',
'http://m1.behance.net/rendition/modules/117187523/hd/27374b88bb711f63adfa74c96a31931f.jpg',
'http://m1.behance.net/rendition/modules/117187529/hd/7d0346d2d0df32462d256c2468938481.jpg',
'http://m1.behance.net/rendition/modules/117187511/hd/30399755dc75494b79eca5b67c40992d.jpg',
'http://m1.behance.net/rendition/modules/117187507/hd/a6188394c1c8e3760e9ca11591cd8601.jpg'];
var editing = false;
var editButtonModifier = new Modifier({
origin: [1, 0],
opacity: function() {
if (editing) {
return 0.5;
}
return 1;
},
size: [50, 40]
});
var editButton = new Surface({
content: 'Edit',
size: [undefined, undefined],
properties: {
background: 'black',
color: 'white',
textAlign: 'center',
lineHeight: '40px'
}
});
var editClickSync = new MouseSync();
editButton.pipe(editClickSync);
editClickSync.on('start', function(){
editing = !editing;
if (editing){
Engine.unpipe(panMouseSync);
Engine.pipe(selectMouseSync);
} else {
Engine.pipe(panMouseSync);
Engine.unpipe(selectMouseSync);
}
});
/**
*
* Grid and Select
*
**/
var size = new Transitionable([0, 0]);
var anchor = new Transitionable([0, 0]);
var selectBox = new Surface({
classes: ["grey-bg", "selectBox"]
});
var selectBoxSize = new Modifier({
size: function(){
var currentSize = size.get();
if((currentSize[0] < 0 && currentSize[1] > 0) || (currentSize[0] > 0 && currentSize[1] < 0)){
return [Math.abs(currentSize[1]), Math.abs(currentSize[0])];
}
return [Math.abs(currentSize[0]), Math.abs(currentSize[1])];
}
});
var selectBoxAnchor = new Modifier({
transform: function(){
var currentPosition = anchor.get();
return Transform.translate(currentPosition[0], currentPosition[1], 0);
}
});
var selectBoxRotation = new Modifier({
transform: function(){
var currentSize = size.get();
if(currentSize[0] < 0 && currentSize[1] < 0){
return Transform.rotateZ(Math.PI);
}
if(currentSize[0] < 0 && currentSize[1] > 0){
return Transform.rotateZ(Math.PI / 2);
}
if(currentSize[0] > 0 && currentSize[1] < 0){
return Transform.rotateZ(Math.PI * 3 / 2);
}
return 0;
}
});
var selectBoxOpacity = new Modifier({
opacity: 0.2
});
var selectMouseSync = new MouseSync();
var patches = 0;
var currentPatch;
selectMouseSync.on("start", function (data){
anchor.set([data.clientX, data.clientY]);
currentPatch = new Patch(patches, images[patches]);
});
selectMouseSync.on("update", function (data){
size.set(data.position);
//find overlap between cells and select box
var cells = document.getElementsByClassName('cell');
var selectBox = document.getElementsByClassName('selectBox')[0];
var selectBoxRect = selectBox.getBoundingClientRect();
for(var i = 0; i < cells.length; i++){
var cell = cells[i];
var cellRect = cell.getBoundingClientRect();
var overlap = !(cellRect.right < selectBoxRect.left ||
cellRect.left > selectBoxRect.right ||
cellRect.bottom < selectBoxRect.top ||
cellRect.top > selectBoxRect.bottom);
if(overlap) {
cell.style.opacity = 1;
} else {
cell.style.opacity = 0.5;
}
}
//find min and max row and column highlighted in grid
currentPatch.setDimensions(findMinMaxRow(), findMinMaxColumn());
//check if patch is to be inserted
if(currentPatch.valid()){
//set size and position of patch
currentPatch.addModifier();
currentPatch.addToGrid();
currentPatch.addImage();
}
});
selectMouseSync.on("end", function (){
//reset select box size and position
anchor.set([0,0]);
size.set([0,0]);
//reset opacity of cells
var cells = document.getElementsByClassName('cell');
for(var i = 0; i < cells.length; i++){
var cell = cells[i];
cell.style.opacity = 0.5;
}
patches++;
});
var mainContext = Engine.createContext();
var rows = 20;
var columns = 20;
var grid = new GridLayout({
dimensions: [rows, columns]
});
var surfaces = [];
grid.sequenceFrom(surfaces);
for(var j = 0; j < rows; j++){
for(var i = 0; i < columns; i++) {
surfaces.push(new Surface({
size: [undefined, undefined],
classes: ["cell", j + 1, i + 1],
properties: {
backgroundColor: "hsl(" + ((i * j) * 360 / (rows * columns)) + ", 100%, 50%)",
color: "black",
lineHeight: '100px',
textAlign: 'center'
}
}));
}
}
var gridSize = new Transitionable([400, 400]);
var gridModifier = new Modifier({
size: function(){
return gridSize.get();
},
origin: [.5, .5],
opacity: 0.5
});
/**
*
* Pan and Scale
*
**/
var maxScale = 200;
var minScale = 0;
var displaceThreshold = 50;
var maxDisplace = maxScale + displaceThreshold;
var minDisplace = minScale - displaceThreshold;
var perspective = maxDisplace + 120;
var scale = new Transitionable(0);
var position = new Transitionable([0, 0]);
var scrollSync = new ScrollSync();
var panMouseSync = new MouseSync();
mainContext.setPerspective(perspective);
//Dynamic positioning modifiers
var scaleModifier = new Modifier({
transform : function(){
var currentScale = scale.get();
return Transform.translate(0, 0, currentScale);
}
});
var panModifier = new Modifier({
transform: function(){
var currentPosition = position.get();
return Transform.translate(currentPosition[0], currentPosition[1]);
}
});
//Static positioning modifiers
var initScaleModifier = new Modifier({
transform: Transform.translate(0, 0, displaceThreshold + 50)
});
//Scaling listeners
Engine.pipe(scrollSync);
scrollSync.on("update", function(data) {
var currentScale = scale.get();
var delta = data.delta[1] /100;
if (currentScale > maxDisplace){
scale.set( currentScale );
} else if (currentScale < minDisplace){
scale.set( currentScale );
} else {
scale.set( currentScale + delta );
}
});
scrollSync.on("end", function() {
if(scale.get() < minScale){
scale.set(minScale, {method : 'wall', dampingRatio : 0.5, period : 500});
}
if(scale.get() > maxScale){
scale.set(maxScale, {method : 'wall', dampingRatio : 0.5, period : 500});
}
});
//Panning listeners
Engine.pipe(panMouseSync);
panMouseSync.on("update", function(data){
var currentPosition = position.get();
position.set([
currentPosition[0] + data.delta[0],
currentPosition[1] + data.delta[1]
]);
});
/**
*
* Patches
*
**/
function Patch(id, imageSrc) {
this.surface = new Surface({
size: [undefined, undefined],
classes: ['patch', id],
properties: {
background: 'blue'
}
});
this.id = id;
this.valid = function(){
return this.minRow && this.maxRow && this.minColumn && this.maxColumn;
}
this.image = imageSrc;
this.surface.pipe(patchAdditionEvent);
}
var patchAdditionEvent = new EventHandler();
patchAdditionEvent.on('deploy', function(){
currentPatch.addImage();
});
Patch.prototype.addToGrid = function() {
canvas.add(this.modifier).add(this.surface);
};
Patch.prototype.addImage = function() {
$('.patch.' + this.id).backstretch(this.image);
};
Patch.prototype.setDimensions = function(minMaxRow, minMaxColumn){
this.minRow = minMaxRow[0];
this.maxRow = minMaxRow[1];
this.minColumn = minMaxColumn[0];
this.maxColumn = minMaxColumn[1];
}
Patch.prototype.addModifier = function(){
var minRow = this.minRow;
var maxRow = this.maxRow;
var minColumn = this.minColumn;
var maxColumn = this.maxColumn;
this.modifier = new Modifier({
size: function(){
var currentGridSize = gridSize.get();
var cellWidth = currentGridSize[0] / columns;
var cellHeight = currentGridSize[1] / rows;
var width = (maxColumn + 1 - minColumn) * cellWidth;
var height = (maxRow + 1 - minRow) * cellHeight;
return [width, height];
},
align: function(){
var rowAlign = (minRow - 1) / rows;
var columnAlign = (minColumn - 1) /columns;
return [columnAlign, rowAlign];
},
opacity: 2
});
};
function findMinMaxRow(){
var cells = document.getElementsByClassName('cell');
var minRow = null;
var maxRow = null;
for(var i = 0; i < cells.length; i++){
var cell = cells[i];
if (cell.style.opacity == 1){
var cellClassName = cell.className;
var id = parseInt(cellClassName.split(" ")[2]);
if(maxRow == null || id > maxRow){
maxRow = id;
}
if (minRow == null || id < minRow){
minRow = id;
}
}
}
return [minRow, maxRow];
}
function findMinMaxColumn(){
var cells = document.getElementsByClassName('cell');
var minColumn = null;
var maxColumn = null;
for(var i = 0; i < cells.length; i++){
var cell = cells[i];
if (cell.style.opacity == 1){
var cellClassName = cell.className;
var stringId = (cellClassName.split(" ")[3] != undefined) ? cellClassName.split(" ")[3] : cellClassName.split(" ")[2];
var id = parseInt(stringId);
if(maxColumn == null || id > maxColumn){
maxColumn = id;
}
if (minColumn == null || id < minColumn){
minColumn = id;
}
}
}
return [minColumn, maxColumn];
}
/**
*
* DOM addition
*
**/
mainContext.add(editButtonModifier).add(editButton);
mainContext.add(selectBoxOpacity).add(selectBoxAnchor).add(selectBoxSize).add(selectBoxRotation).add(selectBox);
var canvas = mainContext.add(gridModifier).add(initScaleModifier).add(scaleModifier).add(panModifier);
canvas.add(grid);
});
define(function(require, exports, module) {
// import dependencies
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var ImageSurface = require('famous/surfaces/ImageSurface');
var Surface = require('famous/core/Surface');
var StateModifier = require('famous/modifiers/StateModifier');
var View = require('famous/core/View');
var InputSurface = require('famous/surfaces/InputSurface');
var GridLayout = require('famous/views/GridLayout');
var Easing = require('famous/transitions/Easing');
var Timer = require('famous/utilities/Timer');
// create the main context
var mainContext = Engine.createContext();
// your app here
//Update function
//Variables
var green = '#58c762';
var blue = '#42c0c0';
var peach = '#ce946b';
var squares = []
var squareNum = 0;
var targetSquare;
var targetMod;
var corkPop = new Audio('assets/sfx/corkPop.mp3');
var questions = [];
var questionNum = 0;
var quizData = 'https://docs.google.com/spreadsheet/ccc?key=0AqIHdSiFJOTzdEtyajk2R3o2NTIyVk5ZN0czRWR2RWc&usp=drive_web#gid=0'
var dataInitialized = false;
function tabletopInit() {
Tabletop.init({
key: quizData,
callback: transferData,
simpleSheet: true
})
}
function transferData(data) {
//TRANSFERS DATA FROM GOOGLE SPREADSHEET TO AN ARRAY
for (i=0; i<data.length; i++) {
pair = [data[i].q, data[i].a]
questions.push(pair);
console.log(questions[i][0]);
}
}
function setQuestionDisplayContent() {
console.log("working");
if (dataInitialized == true) {
}
console.log("still working");
}
tabletopInit();
//Layouts
var grid = new GridLayout({
dimensions: [4,2],
});
var gridMod = new StateModifier({
size: [250,100],
origin: [0.5,0.5],
align: [0.5,0.5]
});
grid.sequenceFrom(squares);
//Views
var squaresView = new View();
//Modifiers
var centerMod = new StateModifier({
origin: [0.5,0.5],
align: [0.5,0.5]
});
var inputPos = new StateModifier({
transform: Transform.translate(0,200,0)
});
var qDisplayPos = new StateModifier({
transform: Transform.translate(0,120,0)
});
//Surfaces
var questionDisplay = new Surface({
size: [200,100],
content: "Loading...",
properties: {
backgroundColor: peach,
textAlign: 'center',
lineHeight: '100px',
color: '#FFF'
}
});
Timer.every(function() {
questionDisplay.setContent(questions[questionNum][0]);
},100);
for(var i = 0; i<50; i++) {
var gridSquareView = new View();
gridSquareView.square = new Surface({
size: [25, 25],
//content: "hello" + i,
properties: {
color: 'black',
fontSize: 8,
textAlign:'center',
lineHeight: '60px',
borderStyle: 'solid',
borderColor: green
}
})
gridSquareView.square.targeted = false;
gridSquareView.mod = new Modifier({
origin: [0.5,0.5],
align: [0.5,0.5]
})
gridSquareView.add(gridSquareView.mod).add(gridSquareView.square);
squares.push(gridSquareView);
}
targetSquare = squares[squareNum].square;
targetMod = squares[squareNum].mod;
targetSquare.targeted = true;
function checkTargetedStatus() {
if (targetSquare.targeted == true) {
targetSquare.setProperties({
borderColor: blue,
borderStyle: 'dotted'
})
}
}
checkTargetedStatus(targetSquare);
var input = new InputSurface({
size: [200, 20],
name: 'inputSurface',
placeholder: 'Type text here',
value: '',
type: 'text'
});
//Events
input.on('keyup', function(event) {
var keyPressed = String.fromCharCode(event.charCode);
var inputValue = input.getValue();
var color;
//targetSquare.setContent(inputValue);
if (inputValue == questions[questionNum][1]) {
corkPop.play();
targetSquare.setProperties({
borderStyle: 'none',
backgroundColor: blue
})
targetMod.setTransform(
Transform.translate(0, -400, 0),
{ duration : 1000, curve: Easing.inOutQuint }
);
targetSquare.targeted = false;
squareNum+=1;
questionNum++;
targetSquare = squares[squareNum].square;
targetMod = squares[squareNum].mod;
targetSquare.targeted = true;
checkTargetedStatus(targetSquare);
questionDisplay.setContent(questions[questionNum][0]);
input.setValue('');
}
});
//Render Tree
var centeredNode = mainContext.add(centerMod);
centeredNode.add(inputPos).add(input);
centeredNode.add(squaresView);
centeredNode.add(qDisplayPos).add(questionDisplay);
centeredNode.add(gridMod).add(grid);
var initialTime = Date.now();
//mainContext.add(practiceModifier).add(practiceSurface);
});
function _createStories() {
this.container = new ContainerSurface({
size: [undefined, (this.options.height + this.options.margin) * (this.options.total / 2) + this.options.sloganHeight],
classes: ['stories-container']
});
var grid = [], surf, mod, container, view, data, masker;
var storiesContent = new SequentialLayout({
direction: Utility.Direction.Y
});
storiesContent.sequenceFrom(grid);
container = new ContainerSurface({
size: [this.options.width * 2 + this.options.margin, this.options.sloganHeight]
});
surf = new Surface({
size: [undefined, this.options.sloganHeight / 10],
classes: ['stories-slogan', 'text-uppercase'],
content: 'Featured stories'
});
mod = new Modifier({
origin: [0.5, 0.5]
});
container.add(mod).add(surf);
mod = new Modifier({
origin: [0.5, 0]
});
this.container.add(mod).add(container);
grid.push(container);
var gridLayout = new GridLayout({
dimensions: [2, 5],
cellSize: [this.options.width, this.options.height + this.options.margin]
});
gridLayout.sequenceFrom(this.stories);
for (var j = 0; j < this.options.total; j++) {
container = new ContainerSurface({
size: [this.options.width, this.options.height + this.options.margin]
});
surf = new Surface({
size: [this.options.width, this.options.height],
classes: ['story'],
properties: {
backgroundImage: 'url(http://placekitten.com/'+this.options.width+'/'+this.options.height+'?image='+j+')'
}
});
container.add(surf);
surf = new Surface({
size: [this.options.width, this.options.height],
classes: ['story-masker']
});
masker = new Modifier({
opacity: 0
});
this.maskers.push(masker);
container.add(masker).add(surf);
data = {
author: 'Hina Chen',
slogan: 'I\'m Hina.'
};
surf = new Surface({
size: [this.options.width / 2, this.options.height / 2],
classes: ['story-item-content'],
content: '<h3 class="author">'+data.author+'</h3><hr class="short-line"><h2 class="slogan">'+data.slogan+'</h2>'
});
mod = new Modifier({
origin: [0.5, 0.5]
});
container.add(mod).add(surf);
surf = new Surface({
size: [this.options.width, this.options.height],
classes: ['story-masker-trigger']
});
surf.on('mouseenter', function(key, event) {
if (this._maskerTimer !== undefined) clearTimeout(this._maskerTimer);
this._maskerTimer = setTimeout(function(key) {
this.maskers[key].setOpacity(1, this.options.transition);
}.bind(this, key), 300);
}.bind(this, j));
surf.on('mouseleave', function(key, event) {
if (this._maskerTimer !== undefined) clearTimeout(this._maskerTimer);
this.maskers[key].setOpacity(0, this.options.transition);
}.bind(this, j));
container.add(surf);
view = new View();
view.add(container);
this.stories.push(view);
}
container = new ContainerSurface({
size: [this.options.width * 2 + this.options.margin, (this.options.height + this.options.margin) * (this.options.total / 2)]
});
mod = new Modifier({
origin: [0.5, 0.9]
});
container.add(gridLayout);
this.container.add(mod).add(container);
this.container.pipe(this.options.scroller);
this.add(this.container);
}
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]);
});
function _createStrips() {
//create a grid for icons
var grid = new GridLayout({
size:[undefined, undefined],
dimensions: [3, 3]
});
var surfaces = [];
grid.sequenceFrom(surfaces);
var iconContents = [
{text: 'BAR', imageUrl: 'img/faded-drink-icon.png', available: false},
{text: 'BOOK', imageUrl: 'img/book-icon.png', available: true},
{text: 'FOOD', imageUrl: 'img/food-icon.png', available: true},
{text: 'IDEA', imageUrl: 'img/idea-icon.png', available: true},
{text: 'MOVIE', imageUrl: 'img/movie-icon.png', available: true},
{text: 'MUSIC', imageUrl: 'img/faded-music-icon.png', available: false},
{text: 'PERSON', imageUrl: 'img/person-icon.png', available: true},
{text: 'PLACE', imageUrl: 'img/pointer-icon.png', available: true},
{text: 'PRODUCT', imageUrl: 'img/product-icon.png', available: true},
];
this.rowModifiers = [];
var contentCounter = 0;
var surf, view, availability;
var width = window.innerWidth;
var height = window.innerHeight;
var scaledWidth = 50*height/320;
var scaledHeight = 60*height/320;
for(var row = 0; row < 3; row++) {
for(var col = 0; col < 3; col++) {
this.rowModifiers[(row * 3) + col] = new Modifier({
size: [scaledWidth, scaledHeight],
origin: [0.5, 0.5]
});
//create surface from iconContents
availability = iconContents[contentCounter].available ? 'available' : 'unavailable';
surf = new Surface({
size: [undefined,undefined],
classes: ['filterIcon'],
content: '<img class="filterIconImg" width="' + scaledWidth + '" src="'+ iconContents[contentCounter].imageUrl +'"/>'+
'<div class="filterIconText '+ availability +'">' + iconContents[contentCounter].text +'</div>'
});
//push view (modifier + surface) onto surfaces
view = new View();
view._add(this.rowModifiers[(row * 3) + col]).add(surf);
surfaces.push(view);
contentCounter++;
}
}
var gridMod = new Modifier({
size: [width, 360*height/568],
origin: [0.5, 0.5],
transform: Transform.translate(0, 30, 0)
});
this._add(gridMod).add(grid);
}