Phi: Detachable Stopwatch
This commit is contained in:
parent
19c57ca01d
commit
166de9c7e3
3 changed files with 35 additions and 16 deletions
|
@ -1,4 +1,17 @@
|
||||||
<div data-bind="foreach: watches">
|
<div class="ui-widget ui-corner-all" data-bind="foreach: watches">
|
||||||
<div data-bind="component: { name: 'stopwatch' }"></div>
|
<div class="ui-widget-header">
|
||||||
|
Stopwatch
|
||||||
|
<button style="float: right"
|
||||||
|
data-bind="button: {
|
||||||
|
icons: {
|
||||||
|
primary: 'ui-icon-newwin'
|
||||||
|
},
|
||||||
|
text: false
|
||||||
|
},
|
||||||
|
click: $parent.toDialog"
|
||||||
|
title="Detach"
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
|
<div class="ui-widget-content ui-corner-all" data-bind="component: { name: 'Stopwatch' }"></div>
|
||||||
</div>
|
</div>
|
||||||
<button data-bind="button: { label: 'Add', icons: { primary: ' ui-icon-plusthick' } }, click: addWatch"></button>
|
<button data-bind="button: { label: 'Add', icons: { primary: ' ui-icon-plusthick' } }, click: addWatch"></button>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
define([
|
define([
|
||||||
'jquery', 'knockout', 'text!./Stopwatch.html', 'kojqui/button'
|
'jquery', 'knockout', 'text!./Stopwatch.html', 'jquery-ui/dialog', 'kojqui/button'
|
||||||
], function(jquery, ko, htmlString) {
|
], function(jquery, ko, htmlString) {
|
||||||
|
|
||||||
function ViewModel(params) {
|
function ViewModel(params) {
|
||||||
|
@ -10,6 +10,17 @@ define([
|
||||||
self.addWatch = function() {
|
self.addWatch = function() {
|
||||||
self.watches.push(self.watches().length);
|
self.watches.push(self.watches().length);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
self.toDialog = function(a,evt) {
|
||||||
|
var p = jquery(evt.target).parent();
|
||||||
|
p.next().dialog({
|
||||||
|
title: p.text(),
|
||||||
|
closeOnEscape: false,
|
||||||
|
});
|
||||||
|
p.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
self.addWatch();
|
||||||
}
|
}
|
||||||
|
|
||||||
ViewModel.prototype.dispose = function() {
|
ViewModel.prototype.dispose = function() {
|
||||||
|
|
|
@ -1,14 +1,9 @@
|
||||||
|
|
||||||
<div class="ui-widget ui-corner-all">
|
<div class="ui-state-highlight" style="font-size: 200%; font-weight: bold;"">
|
||||||
<div class="ui-widget-header">Stopwatch</div>
|
<span data-bind="text: hoursDisplay"></span> : <span data-bind="text: minutesDisplay"></span> : <span
|
||||||
<div class="ui-widget-content ui-corner-all">
|
data-bind="text: secondsDisplay"></span>
|
||||||
<div class="ui-state-highlight" style="font-size: 200%; font-weight: bold;"">
|
</div>
|
||||||
<span data-bind="text: hoursDisplay"></span> : <span data-bind="text: minutesDisplay"></span> : <span
|
<div>
|
||||||
data-bind="text: secondsDisplay"></span>
|
<button data-bind="button: { refreshOn: startIcons, text: false, icons: startIcons, label: startLabel }, click: startStopPause">Start</button>
|
||||||
</div>
|
<button data-bind="button: { text: false, icons: { primary: ' ui-icon-refresh' } }, click: clear">Restart</button>
|
||||||
<div>
|
</div>
|
||||||
<button data-bind="button: { refreshOn: startIcons, text: false, icons: startIcons, label: startLabel }, click: startStopPause">Start</button>
|
|
||||||
<button data-bind="button: { text: false, icons: { primary: ' ui-icon-refresh' } }, click: clear">Restart</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue