function _createNavButton(direction) {
// Prev, Next button
container = new ContainerSurface({
size: [115, undefined],
classes: ['nav-buttons']
});
surf = new Surface({
size: [96, 96],
classes: ['button-'+direction],
content: '<i class="fa fa-angle-'+(direction === 'prev' ? 'left' : 'right')+'"></i>',
properties: {
textAlign: 'center',
fontSize: '96px',
lineHeight: '96px'
}
});
mod = new Modifier({
origin: [0.5, 0.5]
});
container.add(mod).add(surf);
mod = new Modifier({
origin: [(direction === 'prev' ? 0 : 1), 0]
});
container.on('click', function() {
this.slidingPage(direction);
}.bind(this));
this.container.add(mod).add(container);
}
function _addItem(bodySurface, index, data) {
var positionModifier = new StateModifier({
align: [0, 0.3],
origin: [0, 0.3]
});
var imageModifier = new StateModifier({
align: [0.5, 0.5],
origin: [0.5, 0.5]
});
var scaleModifier = new StateModifier({
transform: Transform.scale(0.75, 0.75, 1)
});
var surface = new ContainerSurface({
size: [0.9 * smallerDimension, 0.9 * smallerDimension],
classes: ["item-preview"]
});
var photo = new ImageSurface({
size: [0.89 * smallerDimension, 0.89 * smallerDimension],
content: data.mainImage
});
surface.add(imageModifier).add(photo);
var overlay = new Surface({
size: [0.89 * smallerDimension, 0.89 * smallerDimension],
classes: ["overlay"],
properties: {
zIndex: '102'
}
});
var contentHTML = "<div class='content-title'>" + data.title + "</div><i>" + data.date + "</i><br><br>" + data.body;
var content = new Surface({
content: contentHTML,
classes: ["content"],
properties: {
lineHeight: "120%",
textAlign: "center",
zIndex: '103'
}
});
var overlayModifier = new StateModifier({
opacity: 0,
align: [0.5, 0.5],
origin: [0.5, 0.5]
});
var contentModifier = new StateModifier({
opacity: 0,
transform: Transform.translate(0, 0, -100)
});
surface.add(overlayModifier).add(overlay);
surface.add(contentModifier).add(content);
surface.on('mouseenter', function() {
overlayModifier.setOpacity(0.8, { duration: 500, curve: 'easeIn' });
contentModifier.setOpacity(1, { duration: 500, curve: 'easeIn' });
contentModifier.setTransform(Transform.translate(0, 0, 1));
});
surface.on('mouseleave', function() {
overlayModifier.setOpacity(0, { duration: 500, curve: 'easeIn' });
contentModifier.setOpacity(0, { duration: 500, curve: 'easeIn' });
contentModifier.setTransform(Transform.translate(0, 0, -100));
});
surface.on('click', function() {
if (overlayModifier.getOpacity() == 0) {
overlayModifier.setOpacity(0.8, { duration: 500, curve: 'easeIn' });
contentModifier.setOpacity(1, { duration: 500, curve: 'easeIn' });
contentModifier.setTransform(Transform.translate(0, 0, 1));
} else {
overlayModifier.setOpacity(0, { duration: 500, curve: 'easeIn' });
contentModifier.setOpacity(0, { duration: 500, curve: 'easeIn' });
contentModifier.setTransform(Transform.translate(0, 0, -100));
}
alert(contentModifier.zIndex());
});
scaleModifier.setTransform(
Transform.scale(.9, .9, 1),
{ duration : 1000, curve: Easing.outBack }
);
if (index > 0) {
var shiftModifier = new StateModifier({
transform: Transform.translate((horizontalPositioningFactor * index), 0, 0)
});
bodySurface.add(positionModifier).add(shiftModifier).add(scaleModifier).add(surface);
} else {
bodySurface.add(positionModifier).add(scaleModifier).add(surface);
}
// add date below
var positionModifier = new StateModifier({
align: [0, 1],
origin: [0, 0]
});
var shiftModifier = new StateModifier({
transform: Transform.translate((index > 0 ? (horizontalPositioningFactor * index) : 0) + 4, -22, 0)
});
var rotateModifier = new StateModifier({
transform: Transform.rotateZ(Math.PI/-2)
});
var dateSurface = new Surface({
content: data.date,
size: [true, true],
classes: ["date"],
properties: {
zIndex: '110'
}
});
bodySurface.add(positionModifier).add(shiftModifier).add(rotateModifier).add(dateSurface);
}
function _createFace(params) {
var faceContainer = new ContainerSurface({
size: params.size,
properties: this.options.properties,
classes : this.options.classes
});
// RIPPLE START
faceContainer.on('click', function(ev) {
var rect = ev.target.getBoundingClientRect();
var x = ev.clientX - rect.left;
var y = ev.clientY - rect.top;
var ripple = new Ripple({
x : rect.width-x,
y : rect.height-y
});
ripple.start();
faceContainer.add(ripple);
// console.log(x, 'from the left and', y, 'from the top');
// rt = new Transitionable(0);
// rt.set(3, { duration : 10000}, function() {
// this.set(0, {duration : 0 });
// }.bind(rt));
// rs = new Surface({
// size : [500, 500],
// properties : {
// border : '1px solid rgba(107,203,255,1)',
// '-webkit-box-shadow' : '0px 0px 3px 1px rgba(107,203,255,1)',
// // backgroundColor : 'rgba(107,203,255,0.2)',
// borderRadius : '50%',
// pointerEvents : 'none'
// },
// classes : ['backface']
// });
// var hit = new Surface({
// properties : {
// backgroundColor: 'red'
// },
// size : [50, 50]
// });
// var hitMod = new Modifier({
// origin: [0.5, 0.5],
// transform: function() {
// var t = Transform.translate(rect.width-x, rect.height-y, 0);
// var s = Transform.scale(rt.get(), rt.get(), 1);
// return Transform.multiply(t, s);
// // return s;
// }
// });
// faceContainer.add(hitMod).add(rs);
}.bind(faceContainer));
// RIPPLE END
// var face = new Surface({
// size: params.size,
// // properties: this.options.properties,
// // classes : this.options.classes
// });
// faceContainer.add(face);
var faceModifier = new Modifier({
orign: [0.5, 0.5],
align: [0.5, 0.5],
opacity: this.options.opacity,
transform: _generateTransformFunction.call(this, params)
});
this._faces.push(faceContainer);
this.add(faceModifier).add(faceContainer);
}