initialize: function (options) {
// Each cat image is placed inside a container with
// `overflow : hidden` to clip the content
var container = new ContainerSurface({
classes: ['cat'],
properties: {overflow: 'hidden'}
});
// Create the cat photo
var cat = new Surface({
tagName : 'img',
origin : [0.5,0.2],
proportions : [1, false],
aspectRatio : 4/3,
attributes : {src : options.src}
});
// Transform the image inside of the container by
// mapping the input (provided by the scrollview) to a translation
var parallaxTransform = this.input.map(function (data) {
var offset = options.parallaxAmount * (data.index + data.progress);
return Transform.translateY(offset)
});
// Build the render subtree inside the container
container
.add({
align : [.5, 0.2],
transform: Transform.compose(
Transform.translateY(-options.index * options.parallaxAmount),
Transform.skewY(options.skew)
)
})
.add({
transform: parallaxTransform
})
.add(cat);
// Build the render subtree for the view
this
.add({transform: Transform.skewY(-options.skew)})
.add(container);
}
QUnit.test('Remove Container Children', function(assert) {
var context = new Context();
var mountElement = document.createElement('div');
var surface1 = new Surface({classes : ['test1']});
var surface2 = new Surface({classes : ['test2']});
// create container
var container = new ContainerSurface();
container.add(surface1);
container.add(surface2);
// mount context
context.add(container);
context.mount(mountElement);
// assert both elements are in the DOM
var surface1El = mountElement.querySelector('.test1');
var surface2El = mountElement.querySelector('.test2');
assert.ok(surface1El instanceof Node);
assert.ok(surface2El instanceof Node);
// remove surface1
surface1.remove();
var surface1El = mountElement.querySelector('.test1');
assert.notOk(surface1El instanceof Node);
// remove surface2
surface2.remove();
var surface2El = mountElement.querySelector('.test2');
assert.notOk(surface1El instanceof Node);
// add surface1
container.add(surface1);
var surface1El = mountElement.querySelector('.test1');
assert.ok(surface1El instanceof Node);
// remove surface2
container.add(surface2);
var surface2El = mountElement.querySelector('.test2');
assert.ok(surface1El instanceof Node);
// check total number of surfaces in container is 2
var surfaces = container._currentTarget.querySelectorAll(surfaceClass);
assert.ok(surfaces.length == 2);
});
QUnit.test('Remove Container', function(assert) {
var context = new Context();
var mountElement = document.createElement('div');
var surface = new Surface();
// create container
var container = new ContainerSurface();
container.add(surface);
context.add(container);
// mount context
context.mount(mountElement);
container.remove();
var containerEl = mountElement.querySelector(containerClass);
assert.notOk(containerEl instanceof Node);
context.add(container);;
var containerEl = mountElement.querySelector(containerClass);
assert.ok(containerEl instanceof Node);
});