foam-framework
Version:
MVC metaprogramming framework
101 lines (99 loc) • 2.88 kB
JavaScript
/**
* @license
* Copyright 2015 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.
*/
MODEL({
package: 'foam.demos.sevenguis',
name: 'Timer',
extends: 'foam.ui.View',
properties: [
{
name: 'progress',
label: 'Elapsed Time',
view: 'foam.ui.ProgressView'
},
{
name: 'elapsedTime',
units: 's',
label: '',
mode: 'read-only',
defaultValue: 0
},
{
model_: 'IntProperty',
name: 'duration',
units: 'ms',
view: { factory_: 'foam.ui.RangeView', maxValue: 10000 },
defaultValue: 5000
},
{
name: 'lastTick_',
hidden: true,
defaultValue: 0
}
],
methods: [
function init() {
this.SUPER();
this.X.dynamic(function() {
this.progress = this.duration ? 100 * Math.min(1, 1000 * this.elapsedTime / this.duration) : 100;
}.bind(this));
this.duration$.addListener(this.tick);
this.tick();
}
],
actions: [
{
name: 'reset',
code: function() {
this.elapsedTime = this.lastTick_ = 0;
this.tick();
}
}
],
templates: [
function CSS() {/*
.timer { padding: 10px !important; font-size: 18px; }
.timer .elapsed { margin-top: 10px; }
.timer .label { display: inline-block; width: 130px; }
.timer button { width: 332px !important; margin-top: 16px !important; }
.timer input { margin-left: 12px; }
.timer input[name="duration"] { width: 182px; }
.timer row { display: block; height: 30px; }
*/},
function toHTML() {/*
<div class="timer">
<row><span class="label">Elapsed Time:</span> $$progress{width: 50}</row>
<row class="elapsed">$$elapsedTime{model_: 'foam.ui.FloatFieldView', precision: 1, mode: 'read-only'}s</row>
<row><span class="label">Duration:</span> $$duration{onKeyMode: true}</row>
$$reset
</div>
*/}
],
listeners: [
{
name: 'tick',
isFramed: true,
code: function() {
if ( 1000 * this.elapsedTime >= this.duration ) return;
var now = Date.now();
if ( this.lastTick_ ) this.elapsedTime += (now - this.lastTick_)/1000;
this.elapsedTime = Math.min(this.duration/1000, this.elapsedTime);
this.lastTick_ = now;
this.tick();
}
}
]
});