Skip to content

Instantly share code, notes, and snippets.

@fhpriamo

fhpriamo/timer.html

Last active July 11, 2019 19:48
Show Gist options
  • Save fhpriamo/11235580 to your computer and use it in GitHub Desktop.
Save fhpriamo/11235580 to your computer and use it in GitHub Desktop.
Download ZIP
My first approach to @Flight. This is a small app I cooked up in order to grasp some Twitter Flight basics.
Raw
timer.html
<!DOCTYPE html>
<html>
<head>
<title>Twitter Flight Timer</title>
<meta http-equiv="Cache-Control" content="no-store" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.3.0/es5-shim.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.3.0/es5-sham.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/flight/1.1.3/flight.min.js"></script>
<style type="text/css">
/* Yep, not much of a UI designer... */
body {
margin: 0;
padding: 0;
font-family: "Lucida Console", Monaco, monospace;
text-align:center;
}
.container {
padding: 20px;
}
.timer-widget {
display: inline-block;
background-color: rgb(231,236,238);
border: 1px solid black;
}
.timer-widget .controls {
margin: 8px;
}
.timer-widget .controls button {
font-family: "Lucida Console", Monaco, monospace;
background-color: #BBB;
border: 1px solid black;
padding: 4px;
width: 96px;
}
.timer-widget .display {
margin: 8px;
padding: 8px;
background-color: lime;
border: 1px solid black;
border-top-width: 2px;
text-align: center;
font-size: 36px;
}
.timer-widget .display.frozen {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<div class="container">
<div class="timer-widget">
<div class="controls">
<button class="btn-toggle">Start</button>
<button class="btn-reset">Stop</button>
</div>
<div class="display frozen">0</div>
</div>
</div>
<script type="text/javascript">
// ==========================================
// Licensed under The MIT License
// http://opensource.org/licenses/MIT
//
// My first approach to @flight. This is a
// small app I cooked up in order to grasp
// some Twitter Flight basics.
// Beware the rough edges!
// @fhpriamo
// ==========================================
// ==========================================
// Timer Data Component
// ==========================================
var TimerData = flight.component(function () {
this.defaultAttrs({
secondsElapsed: 0,
clockRunning: false
});
this.startClock = function () {
var that = this;
this.interval = window.setInterval(function () {
that.tick();
}, 1000);
this.attr.clockRunning = true;
this.trigger('dataClockStarted');
};
this.stopClock = function () {
window.clearInterval(this.interval);
this.attr.clockRunning = false;
this.trigger('dataClockStopped');
};
this.tick = function () {
this.attr.secondsElapsed += 1;
this.trigger('dataTick', {
secondsElapsed: this.attr.secondsElapsed
});
};
this.toggleClock = function () {
if (this.attr.clockRunning) {
this.stopClock();
} else {
this.startClock();
}
};
this.resetClock = function () {
this.attr.secondsElapsed = 0;
this.stopClock();
this.trigger('dataClockReset', {
secondsElapsed: this.attr.secondsElapsed
});
};
this.after('initialize', function () {
this.on(document, 'uiToggleRequested', this.toggleClock);
this.on(document, 'uiResetRequested', this.resetClock);
});
});
// ==========================================
// Display UI Component
// ==========================================
var DisplayUI = flight.component(function () {
this.render = function (e, data) {
this.$node.html(data.secondsElapsed)
};
this.freeze = function () {
this.$node.addClass('frozen');
};
this.unfreeze = function () {
this.$node.removeClass('frozen');
}
this.after('initialize', function () {
this.on(document, 'dataTick', this.render);
this.on(document, 'dataClockStarted', this.unfreeze);
this.on(document, 'dataClockStopped', this.freeze);
this.on(document, 'dataClockReset', this.render);
});
});
// ==========================================
// Toggle UI
// ==========================================
var ToggleUI = flight.component(function () {
this.click = function () {
console.log('clicked!');
this.trigger('uiToggleRequested');
};
this.renderResumeLabel = function () {
this.$node.html('Resume');
};
this.renderPauseLabel = function () {
this.$node.html('Pause');
};
this.renderStartLabel = function () {
this.$node.html('Start');
}
this.after('initialize', function () {
this.on('click', this.click);
this.on(document, 'dataClockStarted', this.renderPauseLabel);
this.on(document, 'dataClockStopped', this.renderResumeLabel);
this.on(document, 'dataClockReset', this.renderStartLabel);
});
});
// ==========================================
// Reset UI
// ==========================================
var ResetUI = flight.component(function () {
this.click = function () {
this.trigger('uiResetRequested');
};
this.after('initialize', function () {
this.on('click', this.click);
});
});
$(document).ready(function () {
TimerData.attachTo(document);
DisplayUI.attachTo('.timer-widget .display');
ToggleUI.attachTo('.timer-widget .btn-toggle');
ResetUI.attachTo('.timer-widget .btn-reset');
});
</script>
</body>
</html>
@fhpriamo
Copy link
Author

If you want to try it, you can play around with this fiddle. Optionally, you can try this on your own environment, in which case It must work without any major complications.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment