-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') {
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);
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...
for (var i = open; i < close ;i++) {
data.push(1);
-
- if (!i) {
- times.push( 'midnight')
- } else if (i == 12) {
- times.push( 'noon' );
- } else {
-
- times.push(hr );
+ if (i < 10) {
+ times.push( '0' + i);
+ } else {
+ times.push( '' + i);
}
-
colors.push(clr[i % clr.length]);
}
data.push( 24-close );
//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 ,
start_angle : 270
}
);
- // fill in th emiddle...
- paper.circle(pie.cx,pie.cy, (paper.height / 2) - 100).attr({fill: "#fff"})
+ // fill in th emiddle...
+
+ paper.circle(outerpie.cx,outerpie.cy, 90).attr({fill: "#fff"})
// fixme .. add the quater hour segments..
- var pie = paper.piechart(
- paper.height / 2,
+ var innerpie = this.innerpie = paper.piechart(
+ paper.width / 2,
paper.height / 2 ,
- (paper.height / 2) - 130,
+ 80,
[ 1 , 1 ,1 , 1 ],
{
cut: 4 ,
colors : [ '#FEE', '#FCC' ,'#FEE', '#FCC' ] ,
no_sort : true,
- start_angle : 270
+ 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) - 140).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
projects / roojs1 / blobdiff