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 data-bind="component: { name: 'stopwatch' }"></div>
|
||||
<div class="ui-widget ui-corner-all" data-bind="foreach: watches">
|
||||
<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>
|
||||
<button data-bind="button: { label: 'Add', icons: { primary: ' ui-icon-plusthick' } }, click: addWatch"></button>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
define([
|
||||
'jquery', 'knockout', 'text!./Stopwatch.html', 'kojqui/button'
|
||||
'jquery', 'knockout', 'text!./Stopwatch.html', 'jquery-ui/dialog', 'kojqui/button'
|
||||
], function(jquery, ko, htmlString) {
|
||||
|
||||
function ViewModel(params) {
|
||||
|
@ -10,6 +10,17 @@ define([
|
|||
self.addWatch = function() {
|
||||
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() {
|
||||
|
|
|
@ -1,14 +1,9 @@
|
|||
|
||||
<div class="ui-widget ui-corner-all">
|
||||
<div class="ui-widget-header">Stopwatch</div>
|
||||
<div class="ui-widget-content ui-corner-all">
|
||||
<div class="ui-state-highlight" style="font-size: 200%; font-weight: bold;"">
|
||||
<span data-bind="text: hoursDisplay"></span> : <span data-bind="text: minutesDisplay"></span> : <span
|
||||
data-bind="text: secondsDisplay"></span>
|
||||
</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>
|
||||
<div class="ui-state-highlight" style="font-size: 200%; font-weight: bold;"">
|
||||
<span data-bind="text: hoursDisplay"></span> : <span data-bind="text: minutesDisplay"></span> : <span
|
||||
data-bind="text: secondsDisplay"></span>
|
||||
</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>
|
||||
|
|
Loading…
Add table
Reference in a new issue