foam-framework
Version:
MVC metaprogramming framework
80 lines (70 loc) • 2.25 kB
JavaScript
/**
* @license
* Copyright 2014 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
CLASS({
package: 'foam.ui',
name: 'GalleryView',
extends: 'foam.ui.SwipeAltView',
requires: [
'foam.ui.ViewChoice',
'foam.ui.GalleryImageView'
],
properties: [
{
name: 'images',
required: true,
help: 'List of image URLs for the gallery',
postSet: function(old, nu) {
this.views = nu.map(function(src) {
return this.ViewChoice.create({
view: this.GalleryImageView.create({ source: src })
});
});
}
},
{
name: 'height',
help: 'Optionally set the height'
},
{
name: 'headerView',
factory: function() { return null; }
}
],
methods: {
initHTML: function() {
this.SUPER();
// Add an extra div to the outer one.
// It's absolutely positioned at the bottom, and contains the circles.
var circlesDiv = document.createElement('div');
circlesDiv.classList.add('galleryCirclesOuter');
for ( var i = 0 ; i < this.views.length ; i++ ) {
var circle = document.createElement('div');
//circle.appendChild(document.createTextNode('*'));
circle.classList.add('galleryCircle');
if ( this.index == i ) circle.classList.add('selected');
circlesDiv.appendChild(circle);
}
this.$.appendChild(circlesDiv);
this.$.classList.add('galleryView');
this.$.style.height = this.height;
this.index$.addListener(function(obj, prop, old, nu) {
circlesDiv.children[old].classList.remove('selected');
circlesDiv.children[nu].classList.add('selected');
});
}
}
});