5 Roo.ux.TimePicker = function(config){
8 // these are required... error out if not avail..
10 if (typeof(Raphael) == 'undefined') {
13 if (deps && typeof(Raphael.prototype) == 'undefined') {
17 alert("Error - required components not found - Raphael and piechart");
21 Roo.ux.TimePicker.superclass.constructor.call(this, config);
24 Roo.extend(Roo.ux.TimePicker , Roo.form.DisplayField , {
33 onRender : function(ct, position){
35 Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
36 //if(this.inputValue !== undefined){
37 this.wrap = this.el.wrap();
39 this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
44 this.viewEl.applyStyles(this.bodyStyle);
46 //this.viewEl.setStyle('padding', '2px');
48 this.viewEl.setHeight(this.height);
49 this.viewEl.setWidth(this.width);
51 // let's create a pie chart...
53 var paper = this.paper = Raphael(this.viewEl.dom);
55 paper.setSize(this.width,this.height);
60 // say we open for 7 - 19
61 var open = this.startHour.split(':').shift();
62 var close = this.endHour.split(':').shift();
66 // colours should be configurable...
68 colors.push('#003'); // off hour..
69 //var clr = [ '#003' , '#FCC' , '#FEE', '#FCC'];
70 var clr = [ '#FEE', '#FCC' ];
74 for (var i = open; i < close ;i++) {
78 times.push( 'midnight')
86 colors.push(clr[i % clr.length]);
88 data.push( 24-close );
91 //Roo.log(data.length);
92 //Roo.log(JSON.stringify(data));
93 //Roo.log(JSON.stringify(colors));
94 //Roo.log(colors.length);
96 var outerpie = this.outerpie = paper.piechart(
99 (paper.height / 2) - 70,
108 // fill in th emiddle...
110 paper.circle(pie.cx,pie.cy, (paper.height / 2) - 100).attr({fill: "#fff"})
112 // fixme .. add the quater hour segments..
114 var innerpie = this.innerpie = paper.piechart(
117 (paper.height / 2) - 130,
121 colors : [ '#FEE', '#FCC' ,'#FEE', '#FCC' ] ,
127 paper.circle(pie.cx,pie.cy, (paper.height / 2) - 140).attr({fill: "#fff"})
130 var atime = "Pick\nTime";
133 var tdisplay = paper.text(pie.cx,pie.cy,atime).attr({
134 font: "32px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif",
135 weight: 'bold', fill: '#000' });
141 if (!this.j || this.j == data.length -1) {
145 if (this.sector != asector) {
146 this.sector.scale(1.1, 1.1, this.cx, this.cy);
148 tdisplay.attr( { text : times[this.j]} );
150 this.label[0].stop();
151 this.label[0].attr({ r: 7.5 });
152 this.label[1].attr({ "font-weight": 800 });
157 if (!this.j || this.j == data.length) {
160 if (this.sector != asector) {
161 this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
165 this.label[0].animate({ r: 5 }, 500, "bounce");
166 this.label[1].attr({ "font-weight": 400 });
168 tdisplay.attr( { text : atime } );
171 pie.click(function() {
172 if (!this.j || this.j == data.length -1) {
175 atime = times[this.j];
176 tdisplay.attr( { text : atime } );
178 asector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
181 this.sector.scale(1.1, 1.1, this.cx, this.cy);
182 asector = this.sector;
190 for (var i = 0; i < (24/3); i++) {
191 var angle = ( (360/24) * i * -3 ) -90;
192 var p = pie.sector(pie.cx, pie.cy, 120, angle, angle, false);
193 Roo.log([p[4],p[5], (i*3)+':00']);
197 var txt = (hr < 12 ? hr : (hr-12)) + (hr < 12 ? 'am' : 'pm');
198 if (!hr) { txt = ""; }
199 if (hr == 12) { txt= '12 noon'}
200 paper.text(p[4],p[5], txt);
203 //pie.each(function() { Roo.log(this)});
204 this.setValue(this.value);