comparison war/scripts/sti/timeplot-modify.js @ 3:cf06b77a8bbd

Committed branch of the e4D repos sti-gwt branch 16384. git-svn-id: http://dev.dariah.eu/svn/repos/eu.dariah.de/ap1/sti-gwt-dariah-geobrowser@36 f2b5be40-def6-11e0-8a09-b3c1cc336c6b
author StefanFunk <StefanFunk@f2b5be40-def6-11e0-8a09-b3c1cc336c6b>
date Tue, 17 Jul 2012 13:34:40 +0000
parents
children
comparison
equal deleted inserted replaced
2:2897af43ccc6 3:cf06b77a8bbd
1 Timeplot.DefaultEventSource.prototype.loadData = function(events){
2
3 this._events.maxValues = new Array();
4 this._events.removeAll();
5 for (var i = 0; i < events.length; i++) {
6 var event = events[i];
7 var numericEvent = new Timeplot.DefaultEventSource.NumericEvent(event.date, event.value);
8 this._events.add(numericEvent);
9 }
10 this._fire("onAddMany", []);
11
12 };
13
14 Timeplot._Impl.prototype.resetPlots = function(plotInfos){
15
16 this._plotInfos = plotInfos;
17 this._painters = {
18 background: [],
19 foreground: []
20 };
21 this._painter = null;
22
23 var timeplot = this;
24 var painter = {
25 onAddMany: function(){
26 timeplot.update();
27 },
28 onClear: function(){
29 timeplot.update();
30 }
31 }
32
33 for (i = this._plots.length; i > 0; i--) {
34 this._plots[i-1].opacityPlot.removeChild( this._plots[i-1]._opacityCanvas );
35 this._plots[i - 1].dispose();
36 if (document.addEventListener) {
37 this._containerDiv.removeEventListener("mousemove", this._plots[i - 1].mousemove, false);
38 this._containerDiv.removeEventListener("mouseover", this._plots[i - 1].mouseover, false);
39 }
40 else
41 if (document.attachEvent) {
42 this._containerDiv.detachEvent("onmousemove", this._plots[i - 1].mousemove);
43 this._containerDiv.detachEvent("onmouseover", this._plots[i - 1].mouseover);
44 }
45 delete this._plots[i - 1];
46 }
47
48 this._plots = [];
49
50 for (i = 0; i < this._plotInfos.length; i++) {
51 var plot = new Timeplot.Plot(this, this._plotInfos[i]);
52 var dataSource = plot.getDataSource();
53 if (dataSource) {
54 dataSource.addListener(painter);
55 }
56 this.addPainter("background", {
57 context: plot.getTimeGeometry(),
58 action: plot.getTimeGeometry().paint
59 });
60 this.addPainter("background", {
61 context: plot.getValueGeometry(),
62 action: plot.getValueGeometry().paint
63 });
64 this.addPainter("foreground", {
65 context: plot,
66 action: plot.paint
67 });
68 this._plots.push(plot);
69 plot.initialize();
70 }
71
72 };
73
74 Timeplot.DefaultTimeGeometry.prototype._calculateGrid = function() {
75 var grid = [];
76
77 var time = SimileAjax.DateTime;
78 var u = this._unit;
79 var p = this._period;
80
81 if (p == 0)
82 return grid;
83
84 var periodUnit = -1;
85 do {
86 periodUnit++;
87 }
88 while (time.gregorianUnitLengths[periodUnit] < p);
89
90 var unit;
91 if (periodUnit < time.HALFMINUTE) {
92 unit = time.SECOND;
93 }
94 else if (periodUnit < time.WEEK) {
95 unit = periodUnit - 2;
96 }
97 else {
98 unit = periodUnit - 3;
99 }
100
101 if( unit < this._granularity ){
102 unit = this._granularity;
103 }
104
105 var t = u.cloneValue(this._earliestDate);
106 var timeZone;
107 do {
108 time.roundDownToInterval(t, unit, timeZone, 1, 0);
109 var x = this.toScreen(u.toNumber(t));
110 var l = SimileAjax.DateTime.getTimeLabel(unit,t);
111 if (x > 0) {
112 grid.push({ x: x, label: l });
113 }
114 time.incrementByInterval(t, unit, timeZone);
115 } while (t.getTime() < this._latestDate.getTime());
116
117 return grid;
118
119 };
120
121 //modified function to prevent from drawing left and right axis
122 Timeplot.DefaultValueGeometry.prototype.paint = function() {
123 if (this._timeplot) {
124 var ctx = this._canvas.getContext('2d');
125
126 ctx.lineJoin = 'miter';
127
128 // paint grid
129 if (this._gridColor) {
130 var gridGradient = ctx.createLinearGradient(0,0,0,this._canvas.height);
131 gridGradient.addColorStop(0, this._gridColor.toHexString());
132 gridGradient.addColorStop(0.3, this._gridColor.toHexString());
133 gridGradient.addColorStop(1, "rgba(255,255,255,0.5)");
134
135 ctx.lineWidth = this._gridLineWidth;
136 ctx.strokeStyle = gridGradient;
137
138 for (var i = 0; i < this._grid.length; i++) {
139 var tick = this._grid[i];
140 var y = Math.floor(tick.y) + 0.5;
141 if (typeof tick.label != "undefined") {
142 if (this._axisLabelsPlacement == "left") {
143 var div = this._timeplot.putText(this._id + "-" + i, tick.label,"timeplot-grid-label",{
144 left: 4,
145 bottom: y + 2,
146 color: this._gridColor.toHexString(),
147 visibility: "hidden"
148 });
149 this._labels.push(div);
150 } else if (this._axisLabelsPlacement == "right") {
151 var div = this._timeplot.putText(this._id + "-" + i, tick.label, "timeplot-grid-label",{
152 right: 4,
153 bottom: y + 2,
154 color: this._gridColor.toHexString(),
155 visibility: "hidden"
156 });
157 this._labels.push(div);
158 }
159 if (y + div.clientHeight < this._canvas.height + 10) {
160 div.style.visibility = "visible"; // avoid the labels that would overflow
161 }
162 }
163
164 // draw grid
165 ctx.beginPath();
166 if (this._gridType == "long" || tick.label == 0) {
167 ctx.moveTo(0, y);
168 ctx.lineTo(this._canvas.width, y);
169 } else if (this._gridType == "short") {
170 if (this._axisLabelsPlacement == "left") {
171 ctx.moveTo(0, y);
172 ctx.lineTo(this._gridShortSize, y);
173 } else if (this._axisLabelsPlacement == "right") {
174 ctx.moveTo(this._canvas.width, y);
175 ctx.lineTo(this._canvas.width - this._gridShortSize, y);
176 }
177 }
178 ctx.stroke();
179 }
180 }
181 }
182 };
183
184 //modified function to prevent from drawing hidden labels
185 Timeplot.DefaultTimeGeometry.prototype.paint = function() {
186 if (this._canvas) {
187 var unit = this._unit;
188 var ctx = this._canvas.getContext('2d');
189
190 var gradient = ctx.createLinearGradient(0,0,0,this._canvas.height);
191
192 ctx.strokeStyle = gradient;
193 ctx.lineWidth = this._gridLineWidth;
194 ctx.lineJoin = 'miter';
195
196 // paint grid
197 if (this._gridColor) {
198 gradient.addColorStop(0, this._gridColor.toString());
199 gradient.addColorStop(1, "rgba(255,255,255,0.9)");
200 for (var i = 0; i < this._grid.length; i++) {
201 var tick = this._grid[i];
202 var x = Math.floor(tick.x) + 0.5;
203 if (this._axisLabelsPlacement == "top") {
204 var div = this._timeplot.putText(this._id + "-" + i, tick.label,"timeplot-grid-label",{
205 left: x + 4,
206 top: 2,
207 visibility: "hidden"
208 });
209 this._labels.push(div);
210 } else if (this._axisLabelsPlacement == "bottom") {
211 var div = this._timeplot.putText(this._id + "-" + i, tick.label, "timeplot-grid-label",{
212 left: x + 4,
213 bottom: 2,
214 visibility: "hidden"
215 });
216 this._labels.push(div);
217 }
218 if (!this._hideLabels && x + div.clientWidth < this._canvas.width + 10) {
219 div.style.visibility = "visible"; // avoid the labels that would overflow
220 }
221
222 // draw separator
223 ctx.beginPath();
224 ctx.moveTo(x,0);
225 ctx.lineTo(x,this._canvas.height);
226 ctx.stroke();
227 }
228 }
229
230 // paint axis
231 gradient.addColorStop(0, this._axisColor.toString());
232 gradient.addColorStop(1, "rgba(255,255,255,0.5)");
233
234 ctx.lineWidth = 1;
235 gradient.addColorStop(0, this._axisColor.toString());
236
237 ctx.beginPath();
238 ctx.moveTo(0,0);
239 ctx.lineTo(this._canvas.width,0);
240 ctx.stroke();
241 }
242 };
243
244 Timeplot.Plot.prototype.initialize = function(){
245 if (this._dataSource && this._dataSource.getValue) {
246 this._timeFlag = this._timeplot.putDiv("timeflag", "timeplot-timeflag");
247 this._valueFlag = this._timeplot.putDiv(this._id + "valueflag", "timeplot-valueflag");
248 this._valueFlagLineLeft = this._timeplot.putDiv(this._id + "valueflagLineLeft", "timeplot-valueflag-line");
249 this._valueFlagLineRight = this._timeplot.putDiv(this._id + "valueflagLineRight", "timeplot-valueflag-line");
250 if (!this._valueFlagLineLeft.firstChild) {
251 this._valueFlagLineLeft.appendChild(SimileAjax.Graphics.createTranslucentImage(Timeplot.urlPrefix + "images/line_left.png"));
252 this._valueFlagLineRight.appendChild(SimileAjax.Graphics.createTranslucentImage(Timeplot.urlPrefix + "images/line_right.png"));
253 }
254 this._valueFlagPole = this._timeplot.putDiv(this._id + "valuepole", "timeplot-valueflag-pole");
255
256 var opacity = this._plotInfo.valuesOpacity;
257
258 SimileAjax.Graphics.setOpacity(this._timeFlag, opacity);
259 SimileAjax.Graphics.setOpacity(this._valueFlag, opacity);
260 SimileAjax.Graphics.setOpacity(this._valueFlagLineLeft, opacity);
261 SimileAjax.Graphics.setOpacity(this._valueFlagLineRight, opacity);
262 SimileAjax.Graphics.setOpacity(this._valueFlagPole, opacity);
263
264 var plot = this;
265
266 var mouseOverHandler = function(elmt, evt, target){
267 plot._timeFlag.style.visibility = "visible";
268 plot._valueFlag.style.visibility = "visible";
269 plot._valueFlagLineLeft.style.visibility = "visible";
270 plot._valueFlagLineRight.style.visibility = "visible";
271 plot._valueFlagPole.style.visibility = "visible";
272 if (plot._plotInfo.showValues) {
273 plot._valueFlag.style.display = "block";
274 mouseMoveHandler(elmt, evt, target);
275 }
276 }
277
278 var mouseOutHandler = function(elmt, evt, target){
279 plot._timeFlag.style.visibility = "hidden";
280 plot._valueFlag.style.visibility = "hidden";
281 plot._valueFlagLineLeft.style.visibility = "hidden";
282 plot._valueFlagLineRight.style.visibility = "hidden";
283 plot._valueFlagPole.style.visibility = "hidden";
284 }
285
286 var day = 24 * 60 * 60 * 1000;
287 var month = 30 * day;
288
289 var mouseMoveHandler = function(elmt, evt, target){
290 if (typeof SimileAjax != "undefined" && plot._plotInfo.showValues) {
291 var c = plot._canvas;
292 var x = Math.round(SimileAjax.DOM.getEventRelativeCoordinates(evt, plot._canvas).x);
293 if (x > c.width)
294 x = c.width;
295 if (isNaN(x) || x < 0)
296 x = 0;
297 var t = plot._timeGeometry.fromScreen(x);
298 if (t == 0) { // something is wrong
299 plot._valueFlag.style.display = "none";
300 return;
301 }
302
303 var validTime = plot._dataSource.getClosestValidTime(t);
304 x = plot._timeGeometry.toScreen(validTime);
305 var v = plot._dataSource.getValue(validTime);
306 if (plot._plotInfo.roundValues)
307 v = Math.round(v);
308 plot._valueFlag.innerHTML = v;
309
310 var t = new Date(validTime);
311 var unit = plot._timeGeometry.extendedDataSource.unit;
312 var time = SimileAjax.DateTime;
313 var l = SimileAjax.DateTime.getTimeLabel(unit,t);
314
315 plot._timeFlag.innerHTML = l;
316
317 var tw = plot._timeFlag.clientWidth;
318 var th = plot._timeFlag.clientHeight;
319 var tdw = Math.round(tw / 2);
320 var vw = plot._valueFlag.clientWidth;
321 var vh = plot._valueFlag.clientHeight;
322 var y = plot._valueGeometry.toScreen(v);
323
324 if (x + tdw > c.width) {
325 var tx = c.width - tdw;
326 }
327 else
328 if (x - tdw < 0) {
329 var tx = tdw;
330 }
331 else {
332 var tx = x;
333 }
334
335 if (plot._timeGeometry._timeValuePosition == "top") {
336 plot._timeplot.placeDiv(plot._valueFlagPole, {
337 left: x,
338 top: th - 5,
339 height: c.height - y - th + 6,
340 display: "block"
341 });
342 plot._timeplot.placeDiv(plot._timeFlag, {
343 left: tx - tdw,
344 top: -6,
345 display: "block"
346 });
347 }
348 else {
349 plot._timeplot.placeDiv(plot._valueFlagPole, {
350 left: x,
351 bottom: 0,
352 height: c.height,
353 display: "block"
354 });
355 plot._timeplot.placeDiv(plot._timeFlag, {
356 left: tx - tdw,
357 bottom: 0,
358 display: "block"
359 });
360 }
361
362 if (x + vw + 14 > c.width && y + vh + 4 > c.height) {
363 plot._valueFlagLineLeft.style.display = "none";
364 plot._timeplot.placeDiv(plot._valueFlagLineRight, {
365 left: x - 14,
366 bottom: y - 14,
367 display: "block"
368 });
369 plot._timeplot.placeDiv(plot._valueFlag, {
370 left: x - vw - 13,
371 bottom: y - vh - 13,
372 display: "block"
373 });
374 }
375 else
376 if (x + vw + 14 > c.width && y + vh + 4 < c.height) {
377 plot._valueFlagLineRight.style.display = "none";
378 plot._timeplot.placeDiv(plot._valueFlagLineLeft, {
379 left: x - 14,
380 bottom: y,
381 display: "block"
382 });
383 plot._timeplot.placeDiv(plot._valueFlag, {
384 left: x - vw - 13,
385 bottom: y + 13,
386 display: "block"
387 });
388 }
389 else
390 if (x + vw + 14 < c.width && y + vh + 4 > c.height) {
391 plot._valueFlagLineRight.style.display = "none";
392 plot._timeplot.placeDiv(plot._valueFlagLineLeft, {
393 left: x,
394 bottom: y - 13,
395 display: "block"
396 });
397 plot._timeplot.placeDiv(plot._valueFlag, {
398 left: x + 13,
399 bottom: y - 13,
400 display: "block"
401 });
402 }
403 else {
404 plot._valueFlagLineLeft.style.display = "none";
405 plot._timeplot.placeDiv(plot._valueFlagLineRight, {
406 left: x,
407 bottom: y,
408 display: "block"
409 });
410 plot._timeplot.placeDiv(plot._valueFlag, {
411 left: x + 13,
412 bottom: y + 13,
413 display: "block"
414 });
415 }
416 }
417 }
418
419 var timeplotElement = this._timeplot.getElement();
420 this.mouseover = SimileAjax.DOM.registerPlotEvent(timeplotElement, "mouseover", mouseOverHandler);
421 this.mouseout = SimileAjax.DOM.registerPlotEvent(timeplotElement, "mouseout", mouseOutHandler);
422 this.mousemove = SimileAjax.DOM.registerPlotEvent(timeplotElement, "mousemove", mouseMoveHandler);
423
424 this.opacityPlot = this._timeplot.putDiv( "opacityPlot"+this._timeplot._plots.length, "opacityPlot" );
425 SimileAjax.Graphics.setOpacity(this.opacityPlot, 50 );
426 // this.opacityPlot.style.zIndex = this._timeplot._plots.length;
427 this._timeplot.placeDiv( this.opacityPlot, { left: 0, bottom: 0, width: this._canvas.width, height: this._canvas.height });
428 this._opacityCanvas = document.createElement("canvas");
429 this.opacityPlot.appendChild(this._opacityCanvas);
430 if(!this._opacityCanvas.getContext && G_vmlCanvasManager)
431 this._opacityCanvas = G_vmlCanvasManager.initElement(this._opacityCanvas);
432 this._opacityCanvas.width = this._canvas.width;
433 this._opacityCanvas.height = this._canvas.height;
434 this.opacityPlot.style.visibility = "hidden";
435
436 }
437 };
438
439 SimileAjax.DOM.registerPlotEvent = function(elmt, eventName, handler){
440 var handler2 = function(evt){
441 evt = (evt) ? evt : ((event) ? event : null);
442 if (evt) {
443 var target = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
444 if (target) {
445 target = (target.nodeType == 1 || target.nodeType == 9) ? target : target.parentNode;
446 }
447
448 return handler(elmt, evt, target);
449 }
450 return true;
451 }
452
453 if (SimileAjax.Platform.browser.isIE) {
454 elmt.attachEvent("on" + eventName, handler2);
455 }
456 else {
457 elmt.addEventListener(eventName, handler2, false);
458 }
459
460 return handler2;
461 };
462
463 SimileAjax.DOM.getEventRelativeCoordinates = function(evt, elmt) {
464 if (SimileAjax.Platform.browser.isIE) {
465 var coords = SimileAjax.DOM.getPageCoordinates(elmt);
466 return {
467 x: evt.clientX - coords.left,
468 y: evt.clientY - coords.top
469 };
470 } else {
471 var coords = SimileAjax.DOM.getPageCoordinates(elmt);
472
473 if ((evt.type == "DOMMouseScroll") &&
474 SimileAjax.Platform.browser.isFirefox &&
475 (SimileAjax.Platform.browser.majorVersion == 2)) {
476 // Due to: https://bugzilla.mozilla.org/show_bug.cgi?id=352179
477
478 return {
479 x: evt.screenX - coords.left,
480 y: evt.screenY - coords.top
481 };
482 } else {
483 return {
484 x: evt.pageX - coords.left,
485 y: evt.pageY - coords.top
486 };
487 }
488 }
489 };
490
491 SimileAjax.Graphics.setOpacity = function(elmt, opacity) {
492 if (SimileAjax.Platform.browser.isIE) {
493 elmt.style.filter = "alpha(opacity = " + opacity + ")";
494 } else {
495 var o = (opacity / 100).toString();
496 elmt.style.opacity = o;
497 elmt.style.MozOpacity = o;
498 }
499 };
500
501 Timeplot.Plot.prototype.fullOpacityPlot = function( left, right, lp, rp, lft, rft, pixel, c ) {
502
503 var ctx = this._opacityCanvas.getContext('2d');
504
505 ctx.clearRect(0,0,this._canvas.width,this._canvas.height);
506 ctx.lineWidth = this._plotInfo.lineWidth;
507 ctx.lineJoin = 'miter';
508
509 var h = this._canvas.height;
510 ctx.fillStyle = this._plotInfo.lineColor.toString();
511
512 var data = this._dataSource.getData();
513 var times = data.times;
514 var values = data.values;
515 var first;
516
517 if( lft != null && lft.getTime() != left.getTime() ){
518 var gradient = ctx.createLinearGradient(lp-pixel, 0, lp, 0);
519 gradient.addColorStop(0, 'rgba('+c.r1+','+c.g1+','+c.b1+',0)');
520 gradient.addColorStop(1, 'rgba('+c.r1+','+c.g1+','+c.b1+',1)');
521 first = true;
522 ctx.beginPath();
523 for (var t = 0; t < times.length; t++){
524 var x = this._timeGeometry.toScreen(times[t]);
525 var y = this._valueGeometry.toScreen(values[t]);
526 if( times[t].getTime() == left.getTime() ){
527 ctx.lineTo(x, h - y);
528 ctx.lineTo(x, h);
529 ctx.fillStyle = gradient;
530 ctx.fill();
531 break;
532 }
533 else if ( times[t].getTime() >= lft.getTime() ) {
534 if (first) {
535 ctx.moveTo(x, h);
536 first = false;
537 }
538 ctx.lineTo(x, h - y);
539 }
540 }
541 }
542
543 if( rft != null && rft.getTime() != right.getTime() ){
544 var gradient = ctx.createLinearGradient(rp, 0, rp+pixel, 0);
545 gradient.addColorStop(0, 'rgba('+c.r1+','+c.g1+','+c.b1+',1)');
546 gradient.addColorStop(1, 'rgba('+c.r1+','+c.g1+','+c.b1+',0)');
547 first = true;
548 ctx.beginPath();
549 for (var t = 0; t < times.length; t++){
550 var x = this._timeGeometry.toScreen(times[t]);
551 var y = this._valueGeometry.toScreen(values[t]);
552 if( times[t].getTime() == rft.getTime() ){
553 ctx.lineTo(x, h - y);
554 ctx.lineTo(x, h);
555 ctx.fillStyle = gradient;
556 ctx.fill();
557 break;
558 }
559 else if ( times[t].getTime() >= right.getTime() ) {
560 if (first) {
561 ctx.moveTo(x, h);
562 first = false;
563 }
564 ctx.lineTo(x, h - y);
565 }
566 }
567 }
568
569 first = true;
570 ctx.beginPath();
571 ctx.fillStyle = this._plotInfo.lineColor.toString();
572 for (var t = 0; t < times.length; t++)
573 if (!(times[t].getTime() < left.getTime() || times[t].getTime() > right.getTime())) {
574 var x = this._timeGeometry.toScreen(times[t]);
575 var y = this._valueGeometry.toScreen(values[t]);
576 if (first) {
577 ctx.moveTo(x, h);
578 first = false;
579 }
580 ctx.lineTo(x, h - y);
581 if (times[t].getTime() == right.getTime() || t == times.length - 1 )
582 ctx.lineTo(x, h);
583 }
584 ctx.fill();
585
586 };
587
588 Timeplot._Impl.prototype.regularGrid = function(){
589
590 var canvas = this.getCanvas();
591 var ctx = canvas.getContext('2d');
592 var gradient = ctx.createLinearGradient(0,0,0,canvas.height);
593 gradient.addColorStop(0, "rgb(0,0,0)");
594 gradient.addColorStop(1, "rgba(255,255,255,0.9)");
595 ctx.strokeStyle = gradient;
596 ctx.lineWidth = 0.5;
597 ctx.lineJoin = 'miter';
598
599 var xDist = canvas.width / 9;
600 var positions = [];
601 for( var i=1; i<9; i++ ){
602 var x = i*xDist;
603 ctx.beginPath();
604 ctx.moveTo(x,0);
605 ctx.lineTo(x,canvas.height);
606 ctx.stroke();
607 positions.push({ label: '', x: x });
608 }
609 return positions;
610
611 };
612
613 Timeplot.Plot.prototype._plot = function(f) {
614 var ctx = this._canvas.getContext('2d');
615 f = function(x,y,draw) {
616 if( draw ){
617 ctx.lineTo(x,y);
618 }
619 else {
620 ctx.moveTo(x,y);
621 }
622 };
623 var data = this._dataSource.getData();
624 if (data) {
625 var times = data.times;
626 var values = data.values;
627 var T = times.length;
628 ctx.moveTo(0,0);
629 for (var t = 0; t < T; t++) {
630 var x = this._timeGeometry.toScreen(times[t]);
631 var y = this._valueGeometry.toScreen(values[t]);
632 var draw = false;
633 if( t > 0 && ( values[t-1] > 0 || values[t] > 0 ) ){
634 draw = true;
635 }
636 if( t == 0 ){
637 draw = true;
638 }
639 f(x,y,draw);
640 }
641 }
642 };
643
644 SimileAjax.DOM.registerEvent = function(elmt, eventName, handler) {
645 var handler2 = function(evt) {
646 evt = (evt) ? evt : ((event) ? event : null);
647 if (evt) {
648 var target = (evt.target) ?
649 evt.target : ((evt.srcElement) ? evt.srcElement : null);
650 if (target) {
651 target = (target.nodeType == 1 || target.nodeType == 9) ?
652 target : target.parentNode;
653 }
654
655 return handler(elmt, evt, target);
656 }
657 return true;
658 }
659
660 if (SimileAjax.Platform.browser.isIE) {
661 elmt.attachEvent("on" + eventName, handler2);
662 } else {
663 if( eventName == "mousewheel" ){
664 eventName = "DOMMouseScroll";
665 }
666 elmt.addEventListener(eventName, handler2, false);
667 }
668 };
669