X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=ux%2FTimePicker.js;h=231254e2681226101a46a946527513572b0408d1;hb=0b69a11b1055a6d3a3fd0719bdd58b5a235de0e4;hp=c8f86fb882872a1a8ca2ecd87ae6e2a18b32ed2a;hpb=13230073521644df69c32706a4e980f53ded93cf;p=roojs1 diff --git a/ux/TimePicker.js b/ux/TimePicker.js index c8f86fb882..231254e268 100644 --- a/ux/TimePicker.js +++ b/ux/TimePicker.js @@ -2,9 +2,9 @@ -Roo.ux.TimePicker = function(config){ - +Roo.form.TimePicker = function(config){ + Roo.log("CTOR CALLED"); // these are required... error out if not avail.. var deps = true; if (typeof(Raphael) == 'undefined') { @@ -14,22 +14,36 @@ Roo.ux.TimePicker = function(config){ deps = false; } if (!deps) { - alert("Error - required components not found - Raphael and piechart"); + Roo.log("Error - required components not found - Raphael and piechart"); return; } - Roo.ux.TimePicker.superclass.constructor.call(this, config); + Roo.form.TimePicker.superclass.constructor.call(this, config); + + this.addEvents({ + /** + * @event select + * Fires when a date is selected + * @param {DatePicker} this + * @param {Date} date The selected date + */ + 'select': true, + + }); + }; -Roo.extend(Roo.ux.TimePicker , Roo.form.DisplayField , { +Roo.extend(Roo.form.TimePicker , Roo.form.DisplayField , { paper : false, - width: 350, - height: 350, + width: 280, + height: 250, startHour : '7:30', endHour : '19:15', + tdisplay : false, + onRender : function(ct, position){ Roo.form.DisplayField.superclass.onRender.call(this, ct, position); @@ -47,48 +61,63 @@ Roo.extend(Roo.ux.TimePicker , Roo.form.DisplayField , { this.viewEl.setHeight(this.height); this.viewEl.setWidth(this.width); - - // let's create a pie chart... + var paper = this.paper = Raphael(this.viewEl.dom); paper.setSize(this.width,this.height); + + + this.renderPaper(this.startHour,this.endHour); + }, + + + + renderPaper : function( startHour , endHour ) + { + // let's create a pie chart... + var open = startHour.split(':').shift() * 1; + var close = endHour.split(':').shift() * 1; + + var late_night_close = false; + if (close < open || close >= 24) { + //endHour = '24:00'; + close = 24; + late_night_close = close; + } + + + var paper = this.paper; + this.paper.clear(); + var data = []; var colors = []; // say we open for 7 - 19 - var open = this.startHour.split(':').shift(); - var close = this.endHour.split(':').shift(); + + Roo.log([open, close]); data.push(open); // colours should be configurable... - colors.push('#003'); - var clr = [ '#003' , '#FCC' , '#Fee', '#FCC']; + colors.push('#003'); // off hour.. + //var clr = [ '#003' , '#FCC' , '#FEE', '#FCC']; + var clr = [ '#FEE', '#FCC' ]; var times = [ '' ]; - for (var i = (open*4); i < (close*4);i++) { + for (var i = open; i < close ;i++) { data.push(1); - - if (!i) { - times.push( 'midnight' ) - } else if (i == 48) { - times.push( 'noon' ); - } else { - var min = ( i % 4) * 15; - min = !min ? ':00' : (':' + min); - var hr = Math.floor(i/4); - var tail = hr < 12 ? 'am' : 'pm'; - hr = hr % 12; - times.push(hr + min + tail); + if (i < 10) { + times.push( '0' + i); + } else { + times.push( '' + i); } - colors.push(clr[i % clr.length]); } - data.push((24-close) * 4); + data.push( 24-close ); colors.push('#003'); //Roo.log(data.length); @@ -96,10 +125,10 @@ Roo.extend(Roo.ux.TimePicker , Roo.form.DisplayField , { //Roo.log(JSON.stringify(colors)); //Roo.log(colors.length); - var pie = paper.piechart( - paper.height / 2, + var outerpie = this.outerpie = paper.piechart( + paper.width / 2, paper.height / 2 , - (paper.height / 2) - 70, + 110, data , { cut: data.length , @@ -108,86 +137,227 @@ Roo.extend(Roo.ux.TimePicker , Roo.form.DisplayField , { start_angle : 270 } ); + + // fill in th emiddle... + paper.circle(outerpie.cx,outerpie.cy, 90).attr({fill: "#fff"}) + // fixme .. add the quater hour segments.. + + var innerpie = this.innerpie = paper.piechart( + paper.width / 2, + paper.height / 2 , + 80, + [ 1 , 1 ,1 , 1 ], + { + cut: 4 , + colors : [ '#FEE', '#FCC' ,'#FEE', '#FCC' ] , + no_sort : true, + start_angle : 135 + } + ); + + paper.circle(outerpie.cx,outerpie.cy, 60).attr({fill: "#fff"}) + + + + var tdisplay = this.tdisplay = paper.text(outerpie.cx,outerpie.cy, "Pick\nTime").attr({ + font: "32px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif", + weight: 'bold', fill: '#000' }); + - paper.circle(pie.cx,pie.cy, (paper.height / 2) - 100).attr({fill: "#fff"}) - var atime = "Pick\nTime"; - var asector = false; - var tdisplay = paper.text(pie.cx,pie.cy,atime).attr({ font: "32px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif", weight: 'bold', fill: '#000' }); - pie.hover( + for (var i = 0; i < (24/3); i++) { + var angle = ( (360/24) * i * -3 ) -90; + var p = outerpie.sector(outerpie.cx, outerpie.cy, 105, angle, angle, false); + var innerp = outerpie.sector(outerpie.cx, outerpie.cy, 70, angle, angle, false); + + Roo.log([p[4],p[5], (i*3)+':00']); + + var hr = (i*3); + + var txt = (hr < 12 ? hr : (hr-12)) + (hr < 12 ? 'am' : 'pm'); + if (!hr) { txt = ""; } + if (hr == 12) { + txt= '12 noon' + } + + paper.text(p[4],p[5], txt); + // inner... + if (i%2 ==1) { + continue; + } + paper.text(innerp[4],innerp[5], ((Math.floor(i/2) * 15) + 30) % 60); + + + } + var asector = false; + + var _t = this; + outerpie.hover( // in? function() { Roo.log(this.j); if (!this.j || this.j == data.length -1) { return; } - this.sector.stop(); - if (this.sector != asector) { + var ov = _t.getValue(); + + this.sector.stop(); + + + if (this.sector != asector) { this.sector.scale(1.1, 1.1, this.cx, this.cy); - } - tdisplay.attr( { text : times[this.j]} ); - if (this.label) { - this.label[0].stop(); - this.label[0].attr({ r: 7.5 }); - this.label[1].attr({ "font-weight": 800 }); - } - }, + } + + var min = ov ? _t.getValue().split(':').pop() : '00'; + var ntime = times[this.j] + ':' + min; + tdisplay.attr( { text : _t.formatTime(ntime) }); + + + }, // out..? - function () { + function () { if (!this.j || this.j == data.length) { return; } if (this.sector != asector) { this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce"); } - - if (this.label) { - this.label[0].animate({ r: 5 }, 500, "bounce"); - this.label[1].attr({ "font-weight": 400 }); - } - tdisplay.attr( { text : atime } ); + + tdisplay.attr( { text : _t.formatTime(_t.getValue()) } ); }); - pie.click(function() { + outerpie.click(function() { if (!this.j || this.j == data.length -1) { return; } - atime = times[this.j]; - tdisplay.attr( { text : atime } ); + + var ov = _t.getValue(); + var min = ov ? _t.getValue().split(':').pop() : '00'; + var ntime = times[this.j] + ':' + min; + _t.setValue(ntime); + _t.fireEvent('select', ntime); + if (asector) { - asector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce"); + // reset + asector.transform( 's1 1'); } - this.sector.scale(1.1, 1.1, this.cx, this.cy); + //this.sector.scale(1.1, 1.1, this.cx, this.cy); asector = this.sector; + + + }); + + var bsector = false; + innerpie.hover( + // in? + function() { + Roo.log(this.j); + /* + if (!this.j || this.j == data.length -1) { + return; + } + */ + this.sector.stop(); + if (this.sector != bsector) { + this.sector.scale(1.1, 1.1, this.cx, this.cy); + } + var min = this.j*15; + min = min ? min : '00'; + + var ov = _t.getValue(); + var hr = ov ? _t.getValue().split(':').shift() : '12'; + var ntime = hr + ':' + min; + tdisplay.attr( { text : _t.formatTime(ntime) }); + + + }, + // out..? + function () { + /* + if (!this.j || this.j == data.length) { + return; + } + */ + if (this.sector != bsector) { + this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce"); + } + + tdisplay.attr( { text : _t.formatTime(_t.getValue()) } ); + + }); + innerpie.click(function() { + + Roo.log(this.j); + var min = this.j*15; + min = min ? min : '00'; + + + var ov = _t.getValue(); + var hr = ov ? _t.getValue().split(':').shift() : '12'; + var ntime = hr + ':' + min; + _t.setValue(ntime); + _t.fireEvent('select', ntime); + //tdisplay.attr( { text : _t.formatTime(ntime) }); - }) - - - - for (var i = 0; i < (24/3); i++) { - var angle = ( (360/24) * i * -3 ) -90; - var p = pie.sector(pie.cx, pie.cy, 120, angle, angle, false); - Roo.log([p[4],p[5], (i*3)+':00']); + //var ov = _t.getValue(); + //var min = ov ? _t.getValue().split(':').pop() : '00'; + //var ntime = times[this.j] + ':' + min; + //_t.setValue(ntime); - var hr = (i*3); + if (bsector) { + bsector.transform( 's1 1'); + } - var txt = (hr < 12 ? hr : (hr-12)) + (hr < 12 ? 'am' : 'pm'); - if (!hr) { txt = ""; } - if (hr == 12) { txt= '12 noon'} - paper.text(p[4],p[5], txt); - } + //this.sector.scale(1.1, 1.1, this.cx, this.cy); + bsector = this.sector; + - //pie.each(function() { Roo.log(this)}); + }); this.setValue(this.value); - }); - + + + + + //pie.each(function() { Roo.log(this)}); + //this.setValue(this.value); + }, + setValue : function(v){ + this.value = v; + if (!this.viewEl) { + return; + } + //this.viewEl.dom.innerHTML = html; + Roo.form.DisplayField.superclass.setValue.call(this, v); + if (this.tdisplay) { + this.tdisplay.attr( { text : this.formatTime(v) } ); + } + + }, + formatTime : function(ntime) + { + if (!ntime) { + return "Pick\nTime"; + } + if (ntime == '00:00') { + return "Midnight"; + } + if (ntime == '12:00') { + return "12\nnoon"; + } + Roo.log(ntime); + var d = Date.parseDate(ntime, "H:i"); + return d.format('h:i') + "\n" + d.format('a') ; + + + + } }); \ No newline at end of file