From c4d31153e76caf0dbccdfe108574afc4b030c926 Mon Sep 17 00:00:00 2001 From: Peter Wu Date: Sat, 2 Aug 2014 16:26:17 +0200 Subject: Merge (a)sync code, reformat CGP.js Best viewed with `git diff -w`. Since CGP-sync.js and CGP-async.js are almost equal except for one function call, merge them into a single function. While at it, reformat CGP.js to expose a single namespace (`CGP`) which exports the symbol `drawAll`. Remove `alert()` and add a `console.error()` call instead. This is less intrustive to users (who will notice a broken graph anyway) and be more helpful for developers (who can examine the call trace in the Developer Console. Add `"use strict"` and use the standard four spaces as indent. Process the script through `js-beautify` which re-indented the code and added some spaces between operators. Replace double by single quotes for consistency. Rename `catch(e)` to `catch(ex)` to supress a jshint warning about IE8. --- inc/html.inc.php | 17 ++--- js/CGP-async.js | 21 ----- js/CGP-sync.js | 21 ----- js/CGP.js | 227 +++++++++++++++++++++++++++++++------------------------ 4 files changed, 136 insertions(+), 150 deletions(-) delete mode 100644 js/CGP-async.js delete mode 100644 js/CGP-sync.js diff --git a/inc/html.inc.php b/inc/html.inc.php index c8cfbaf..117d61d 100644 --- a/inc/html.inc.php +++ b/inc/html.inc.php @@ -99,21 +99,18 @@ function html_end() { EOT; if ($CONFIG['graph_type'] == 'canvas') { - echo << - -EOT; if ($CONFIG['rrd_fetch_method'] == 'async') { - echo << - -EOT; + $js_async = 'true'; } else { + $js_async = 'false'; + } echo << + + EOT; - } } echo << 0) { - this.rrdgraph.end -= difffactor; - this.rrdgraph.start -= difffactor; - } else { - this.rrdgraph.end += difffactor; - this.rrdgraph.start += difffactor; - } - this.rrdgraph.mousex = x; - try { - this.rrdgraph.graph_paint(); - } catch (e) { - alert(e+"\n"+e.stack); - } - } -}; -var mouse_up = function (e) { - this.rrdgraph.mousedown = false; - this.style.cursor="default"; -}; -var mouse_down = function (e) { - var x = e.pageX - this.offsetLeft; - this.rrdgraph.mousedown = true; - this.rrdgraph.mousex = x; - this.style.cursor="move"; -}; -var mouse_scroll = function (e) { - e = e ? e : window.event; - var wheel = e.detail ? e.detail * -1 : e.wheelDelta / 40; - var cstime = this.stime[this.stidx]; - if (wheel < 0) { - this.stidx++; - if (this.stidx >= this.stlen) this.stidx = this.stlen-1; - } else { - this.stidx--; - if (this.stidx < 0) this.stidx = 0; - } - if (cstime !== this.stime[this.stidx]) { - var middle = this.rrdgraph.start + Math.abs(Math.round((this.rrdgraph.end - this.rrdgraph.start)/2)); - this.rrdgraph.start = Math.round(middle - this.stime[this.stidx]/2); - this.rrdgraph.end = this.rrdgraph.start + this.stime[this.stidx]; +var CGP = (function() { + 'use strict'; - try { - this.rrdgraph.graph_paint(); - } catch (e) { - alert(e+"\n"+e.stack); - } - } + var mouse_move = function(e) { + if (this.rrdgraph.mousedown) { + var factor = (this.rrdgraph.end - this.rrdgraph.start) / this.rrdgraph.xsize; + var x = e.pageX - this.offsetLeft; + var diff = x - this.rrdgraph.mousex; + var difffactor = Math.abs(Math.round(diff * factor)); + if (diff > 0) { + this.rrdgraph.end -= difffactor; + this.rrdgraph.start -= difffactor; + } else { + this.rrdgraph.end += difffactor; + this.rrdgraph.start += difffactor; + } + this.rrdgraph.mousex = x; + try { + this.rrdgraph.graph_paint(); + } catch (ex) { + console.error('mouse_move:', ex, ex.stack); + } + } + }; + var mouse_up = function(e) { + this.rrdgraph.mousedown = false; + this.style.cursor = 'default'; + }; + var mouse_down = function(e) { + var x = e.pageX - this.offsetLeft; + this.rrdgraph.mousedown = true; + this.rrdgraph.mousex = x; + this.style.cursor = 'move'; + }; + var mouse_scroll = function(e) { + e = e ? e : window.event; + var wheel = e.detail ? e.detail * -1 : e.wheelDelta / 40; + var cstime = this.stime[this.stidx]; + if (wheel < 0) { + this.stidx++; + if (this.stidx >= this.stlen) this.stidx = this.stlen - 1; + } else { + this.stidx--; + if (this.stidx < 0) this.stidx = 0; + } + if (cstime !== this.stime[this.stidx]) { + var middle = this.rrdgraph.start + Math.abs(Math.round((this.rrdgraph.end - this.rrdgraph.start) / 2)); + this.rrdgraph.start = Math.round(middle - this.stime[this.stidx] / 2); + this.rrdgraph.end = this.rrdgraph.start + this.stime[this.stidx]; - if(e.stopPropagation) - e.stopPropagation(); - if(e.preventDefault) - e.preventDefault(); - e.cancelBubble = true; - e.cancel = true; - e.returnValue = false; - return false; -}; + try { + this.rrdgraph.graph_paint(); + } catch (ex) { + console.error('mouse_scroll:', ex, ex.stack); + } + } -function prepare_draw(id) { - RrdGraph.prototype.mousex = 0; - RrdGraph.prototype.mousedown = false; + if (e.stopPropagation) + e.stopPropagation(); + if (e.preventDefault) + e.preventDefault(); + e.cancelBubble = true; + e.cancel = true; + e.returnValue = false; + return false; + }; - var cmdline = document.getElementById(id).textContent; - var gfx = new RrdGfxCanvas(id); - var fetch = new RrdDataFile(); - var rrdcmdline = null; + function prepare_draw(id) { + RrdGraph.prototype.mousex = 0; + RrdGraph.prototype.mousedown = false; - try { - rrdcmdline = new RrdCmdLine(gfx, fetch, cmdline); - } catch (e) { - alert(e+"\n"+e.stack); - } + var cmdline = document.getElementById(id).textContent; + var gfx = new RrdGfxCanvas(id); + var fetch = new RrdDataFile(); + var rrdcmdline = null; - var rrdgraph = rrdcmdline.graph; + try { + rrdcmdline = new RrdCmdLine(gfx, fetch, cmdline); + } catch (e) { + console.error('prepare_draw:', e, e.stack); + } - gfx.canvas.stime = [ 300, 600, 900, 1200, 1800, 3600, 7200, 21600, 43200, 86400, 172800, 604800, 2592000, 5184000, 15768000, 31536000 ]; - gfx.canvas.stlen = gfx.canvas.stime.length; - gfx.canvas.stidx = 0; + var rrdgraph = rrdcmdline.graph; - gfx.canvas.rrdgraph = rrdgraph; - gfx.canvas.removeEventListener('mousemove', mouse_move, false); - gfx.canvas.addEventListener('mousemove', mouse_move, false); - gfx.canvas.removeEventListener('mouseup', mouse_up, false); - gfx.canvas.addEventListener('mouseup', mouse_up, false); - gfx.canvas.removeEventListener('mousedown', mouse_down, false); - gfx.canvas.addEventListener('mousedown', mouse_down, false); - gfx.canvas.removeEventListener('mouseout', mouse_up, false); - gfx.canvas.addEventListener('mouseout', mouse_up, false); - gfx.canvas.removeEventListener('DOMMouseScroll', mouse_scroll, false); - gfx.canvas.addEventListener('DOMMouseScroll', mouse_scroll, false); - gfx.canvas.removeEventListener('mousewheel', mouse_scroll, false); - gfx.canvas.addEventListener('mousewheel', mouse_scroll, false); + gfx.canvas.stime = [300, 600, 900, 1200, 1800, 3600, 7200, 21600, 43200, 86400, 172800, 604800, 2592000, 5184000, 15768000, 31536000]; + gfx.canvas.stlen = gfx.canvas.stime.length; + gfx.canvas.stidx = 0; - var diff = rrdgraph.end - rrdgraph.start; - for (var i=0; i < gfx.canvas.stlen; i++) { - if (gfx.canvas.stime[i] >= diff) break; - } - if (i === gfx.canvas.stlen) gfx.canvas.stidx = gfx.canvas.stlen-1; - else gfx.canvas.stidx = i; + gfx.canvas.rrdgraph = rrdgraph; + gfx.canvas.removeEventListener('mousemove', mouse_move, false); + gfx.canvas.addEventListener('mousemove', mouse_move, false); + gfx.canvas.removeEventListener('mouseup', mouse_up, false); + gfx.canvas.addEventListener('mouseup', mouse_up, false); + gfx.canvas.removeEventListener('mousedown', mouse_down, false); + gfx.canvas.addEventListener('mousedown', mouse_down, false); + gfx.canvas.removeEventListener('mouseout', mouse_up, false); + gfx.canvas.addEventListener('mouseout', mouse_up, false); + gfx.canvas.removeEventListener('DOMMouseScroll', mouse_scroll, false); + gfx.canvas.addEventListener('DOMMouseScroll', mouse_scroll, false); + gfx.canvas.removeEventListener('mousewheel', mouse_scroll, false); + gfx.canvas.addEventListener('mousewheel', mouse_scroll, false); - return rrdgraph; -} + var diff = rrdgraph.end - rrdgraph.start; + for (var i = 0; i < gfx.canvas.stlen; i++) { + if (gfx.canvas.stime[i] >= diff) break; + } + if (i === gfx.canvas.stlen) gfx.canvas.stidx = gfx.canvas.stlen - 1; + else gfx.canvas.stidx = i; + + return rrdgraph; + } + + function draw(id, async) { + var rrdgraph = prepare_draw(id); + try { + if (async) { + rrdgraph.graph_paint_async(); + } else { + rrdgraph.graph_paint(); + } + } catch (e) { + console.error('draw(' + id + '):', e, e.stack); + } + } + + /** + * For each canvas.rrd element, initialize a draggable graph. + */ + function drawAll(async) { + var canvases = document.getElementsByClassName('rrd'); + for (var i = 0; i < canvases.length; i++) { + draw(canvases[i].id, async); + } + } + + return { + drawAll: drawAll + }; +}()); -- cgit v1.1