foam-framework
Version:
MVC metaprogramming framework
75 lines (69 loc) • 2.13 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.animated',
name: 'ImageView',
extends: 'foam.ui.SimpleView',
properties: [
{
name: 'data',
postSet: function(old, nu) {
if ( ! this.$ ) return;
var $ = this.$;
var height = $.querySelector('img').height;
var newImage = '<img ' + this.cssClassAttr() + ' src="' + this.data + '" style="position: absolute;transition:top .4s;top:' + height + '">';
$.insertAdjacentHTML('beforeend', newImage);
var vs = $.querySelectorAll('img');
if ( vs.length == 3 ) vs[0].remove();
setTimeout(function() {
vs[vs.length-2].style.top = '-' + height +'px';
vs[vs.length-1].style.top = 0;
}, 1);
}
},
{
name: 'displayWidth',
postSet: function(_, newValue) {
if ( this.$ ) {
this.$.style.width = newValue;
}
}
},
{
name: 'displayHeight',
postSet: function(_, newValue) {
if ( this.$ ) {
this.$.style.height = newValue;
}
}
},
{
name: 'className',
defaultValue: 'aImageView'
}
],
methods: {
initHTML: function() {
this.SUPER();
this.displayHeight = this.displayHeight;
this.displayWidth = this.displayWidth;
},
toHTML: function() {
return '<span id="' + this.id + '"><img ' + this.cssClassAttr() + ' src="' + this.data + '" style="position: absolute;transition:top .4s;top:0"></span>' ;
}
}
});