Playlist.prototype.createPlayer = function() {
var playPauseNode = new RenderNode();
this.audioPlayer = document.createElement('audio');
this.playPauseSurface = new Surface({
content: this.audioPlayer,
classes: ['button'],
size: [70, 70]
});
playPauseNode.link(new Modifier({
origin : [0.5,0],
transform : FM.translate(5, 20, 3)
}))
playPauseNode.link(this.playPauseSurface);
this.containerSurface.add(playPauseNode);
//on-off functionality
this.playPauseSurface.on('click', function() {
if(this.audioPlayer.paused) {
this.audioPlayer.play();
this.playPauseSurface.removeClass('play');
this.playPauseSurface.addClass('pause');
} else {
this.audioPlayer.pause();
this.playPauseSurface.removeClass('pause');
this.playPauseSurface.addClass('play');
}
}.bind(this));
};
LightBox.prototype.show = function(renderable, callback) {
if(!renderable) {
return this.hide(callback);
}
if(this._showing) {
if(this.options.overlap) this.hide();
else {
this.hide(this.show.bind(this, renderable, callback));
return;
}
}
this._showing = true;
var transform = new Modifier({
transform: this.options.inTransform,
opacity: this.options.inOpacity,
origin: this.options.inOrigin
});
var node = new RenderNode();
node.link(transform).link(renderable);
this.nodes.push(node);
this.transforms.push(transform);
var _cb = callback ? Utility.after(3, callback) : undefined;
transform.setTransform(this.options.showTransform, this.options.inTransition, _cb);
transform.setOpacity(this.options.showOpacity, this.options.inTransition, _cb);
transform.setOrigin(this.options.showOrigin, this.options.inTransition, _cb);
};
LightBox.prototype.show = function (surface, i, onComplete) {
if (!surface)
return this.hide(onComplete);
if (i instanceof Function && (onComplete = i, i = void 0), this._showing) {
if (!this.options.overlap)
return this.hide(this.show.bind(this, surface, onComplete)), void 0;
this.hide()
}
this._showing = !0;
var modifier = new Modifier({
transform: this.options.inTransform,
opacity: this.options.inOpacity,
origin: this.options.inOrigin
});
var modifierNode = new RenderNode;
modifierNode.link(modifier).link(surface);
this.nodes.push(modifierNode);
this.transforms.push(modifier);
var after = onComplete ? Utility.after(3, onComplete) : void 0;
i || (i = this.options.inTransition);
modifier.setTransform(this.options.showTransform, i, after);
modifier.setOpacity(this.options.showOpacity, i, after);
modifier.setOrigin(this.options.showOrigin, i, after);
};
var createTouchDisplay = function() {
var node = new RenderNode();
var mod = new Modifier({
opacity: 0.5,
// origin: [0.5, 0.5],
// transform: FM.translate(0, 0, 400)
scale: [0, 0, 1]
});
var surface = new Surface({
size: [20, 20],
properties: {
'background-color': 'white',
'border-radius': '20px'
}
});
var down = false;
window.addEventListener('touchstart', function(e) {
mod.setTransform(FM.move(FM.scale(1, 1, 1), [e.pageX, e.pageY, 244]));
}, false);
window.addEventListener('touchmove', function(e) {
mod.setTransform(FM.translate(e.pageX, e.pageY, 244));
}, false);
window.addEventListener('touchend', function(e) {
mod.setTransform(FM.scale(0, 0, 1));
}, false);
node.link(mod).link(surface);
this._add(node);
}
var createSlidersMenu = function() {
var sliderNode = new RenderNode();
var self = this;
this.sliderModifier = new Modifier({
transform: FM.translate(window.innerWidth-this.navWidth, 0, -1)
});
var sliderSurf = new ContainerSurface({
size: [this.navWidth, undefined],
classes: ['slider-container']
});
var slider = new Slider({
size: [this.navWidth, 30],
defaultValue: 1500,
range: [600,2000],
precision: 0,
name: 'Camera Distance'
});
slider.init();
slider.on('change', function (e) {
console.log(e);
self.mainDisplay.setPerspective(e.value);
});
sliderSurf.add([
slider
]);
sliderNode.link(this.sliderModifier).link(sliderSurf);
this._add(sliderNode);
};
Playlist.prototype.showCard = function() {
Timer.clear(this.cardTimer);
this.cardSurface = new Surface({
content: '<img class="topImage" src="' + this.collection.models[currentSong].get('imageUrl') + '"< />',
classes: ['topImage', 'removable'],
size: [60, 60]
});
var showCardNode = new RenderNode();
showCardNode.link(new Modifier({
origin : [.5,0],
transform: FM.translate(-90, 20, 3)
}));
showCardNode.link(this.cardSurface);
this.containerSurface.add(showCardNode);
}
TitleNav.prototype.show = function(title) {
var widget = this.options.widget;
if(!(title in this._surfaces)) {
var surface = new widget({
size: this.options.size
});
var node = new RenderNode();
var mod = new Modifier({
opacity: 1
});
node.link(mod).link(surface);
surface.pipe(this.eventInput);
surface.setOptions(this.options.look);
var bar = document.createDocumentFragment();
var titleName = document.createElement('div');
titleName.classList.add('header-title');
titleName.innerHTML = title;
bar.appendChild(titleName);
var leftMenu = document.createElement('div');
leftMenu.className = 'menu-cover';
bar.appendChild(leftMenu);
// var rightMenu = document.createElement('div');
// rightMenu.className = 'gear-menu';
// bar.appendChild(rightMenu);
// leftMenu.addEventListener('click', function() {
// this.eventOutput.emit('leftMenu')
// }.bind(this));
// rightMenu.addEventListener('click', function() {
// this.eventOutput.emit('rightMenu')
// }.bind(this));
surface.setContent(bar);
this._surfaces[title] = node;
leftMenu.addEventListener('touchstart', function() {
this.eventOutput.emit('leftMenu')
}.bind(this));
// rightMenu.addEventListener('touchstart', function() {
// this.eventOutput.emit('rightMenu')
// }.bind(this));
}
this.lightbox.show(this._surfaces[title]);
};
Playlist.prototype.nextSong = function() {
var nextNode = new RenderNode();
this.nextButtonSurface = new Surface({
size : [70, 70],
content: '<div></div>',
classes: ['button', 'next']
});
nextNode.link(new Modifier({
origin : [.5, 0],
transform : FM.translate(90, 20, 3)
}));
nextNode.link(this.nextButtonSurface);
this.containerSurface.add(nextNode);
this.nextButtonSurface.on('click', function() {
this.updateSong();
}.bind(this));
}
Playlist.prototype.importCards = function() {
//Set up event handlers
this.eventInput = new EventHandler();
EventHandler.setInputHandler(this, this.eventInput); // binds certain methods of event handler to module so can do things like module.pipe and module.on outside of the module. Pipe() is how you send things.
this.eventOutput = new EventHandler();
EventHandler.setOutputHandler(this, this.eventOutput); // if want surface to react while outside module, do this.eventOutput.on('event', callback)
var spacing = 50; //spacing between particles on grid
var N = this.collection.models.length; //number of particles. is all in collection
this.particleRadius = 1;
//force strengths
var rodStiffness = 0.7;
var gravityStrength = 0.006; // if higher than zero, unanchor bottom row
var dragStrength = 0.005;
//grid parameters
this.Nrows = 5; // Math.floor(Math.sqrt(N)) to make more dynamic
this.Ncols = 5; // fixed number of columns to fit screen
var width = (this.Ncols-1) * spacing;
var height = (this.Nrows-1) * spacing;
var marginX = -width/2;
var marginY = -height/2;
//creates particle grid
var grid = [[]];
for (var row = 0; row < this.Nrows; row++){
grid[row] = [];
var y = marginY + spacing * row;
for (var col = 0; col < this.Ncols; col++){
var x = marginX + spacing * col;
var p = [x,y,0];
var particle = PE.createBody({ // particle not being shown; add surface for content
m : 2,
shape : PE.BODIES.CIRCLE,
r : 30,
classes: ['imageParticles'],
p : p
});
var particleSurface = new Surface({
size : [20, 20],
content: '<img class="savedImage" src="' + this.collection.models[row*this.Ncols + col+1].get('imageUrl') + '"< />',
classes: ['savedImage']
});
surfaceArray.push(particleSurface);
particle.add(particleSurface);
// this.physicsTracker = new PhysicsTracker(particle);
// particleSurface.pipe(this.physicsTracker);
grid[row][col] = particle;
};
};
//creates additional surface to reduce load lag
var particleSurface = new Surface({
size : [20, 20],
content: '<img class="savedImage" src="' + this.collection.models[this.Nrows*this.Ncols+1].get('imageUrl') + '"< />',
classes: ['savedImage']
});
surfaceArray.push(particleSurface);
//current constraint being used
var rod = new Rod({
length : spacing,
stiffness : rodStiffness
});
//apply constraint to grid
var particleRight, particleDown, particleCenter;
for (var row = 0; row < this.Nrows; row++){
for (var col = 0; col < this.Ncols; col++){
particleCenter = grid[row][col];
if (row < this.Nrows-1) {
particleDown = grid[row+1][col];
PE.attach(rod, particleDown, particleCenter);
};
if (col < this.Ncols-1) {
particleRight = grid[row][col+1];
PE.attach(rod, particleRight, particleCenter);
};
};
};
//anchor top particles by setting their immunity to true
for (var col = 0; col < this.Ncols; col++) {
grid[0][col].setImmunity(Particle.IMMUNITIES.ALL);
};
this.gravity = new VectorField({
field : VectorField.FIELDS.CONSTANT,
strength : gravityStrength
});
this.drag = new Drag({strength : dragStrength});
this.walls = new Walls({restitution : 0});
PE.attach([this.gravity, this.drag, this.walls]);
var physicsNode = new RenderNode();
physicsNode.link(new Modifier({
origin : [.49,0],
transform : FM.translate(-10, 220, 4)
}))
physicsNode.link(PE);
this.containerSurface.add(physicsNode);
particleSurface.pipe(this.eventOutput);
};