1/** 2 * An object to overlay a dynamically created baseline grid 3 * on a webpage. 4 * 5 * @version 1.0 6 * @author John Keyes <[email protected]> 7 * @copyright Copyright (c) 2011, John Keyes 8 * @link https://github.com/jkeyes/baseline 9 * @license http://jkeyes.mit-license.org/ 10 * 11 */ 12 13var merge = function(src, dest) { 14 for (prop in src) { 15 if (prop in dest) { continue; } 16 dest[prop] = src[prop]; 17 } 18} 19 20/* From jQuery: dimensions.js */ 21function getDimension(elem, name) { 22 if (elem === window) { 23 var docElemProp = elem.document.documentElement[ "client" + name ], 24 body = elem.document.body; 25 return elem.document.compatMode === "CSS1Compat" && docElemProp || 26 body && body[ "client" + name ] || docElemProp; 27 } else { 28 return Math.max( 29 elem.documentElement["client" + name], 30 elem.body["scroll" + name], elem.documentElement["scroll" + name], 31 elem.body["offset" + name], elem.documentElement["offset" + name] 32 ); 33 } 34} 35 36/** 37 * Baseliner. 38 */ 39var Baseliner = function(options) { 40 var defaults = { 41 'gridColor': [196, 196, 196], 42 'gridHeight': 10, 43 'gridOffset': 0, 44 'gridOpacity': 100, 45 'gridSpace': 1 46 } 47 if (options == null) { 48 options = {}; 49 } else { 50 var optint = parseInt(options); 51 if (optint != 0 && !isNaN(optint) ) { 52 options = { 'gridHeight': optint }; 53 } 54 } 55 merge(defaults, options); 56 this.opts = options; 57 58 var baseliner = this; 59 this.overlay_id = 'baseline-overlay' 60 this.overlay = null; 61 this.showText = document.createTextNode("Show Baseline"); 62 this.hideText = document.createTextNode("Hide Baseline"); 63 64 this.resize = function() { 65 if (!this.overlay) return; 66 67 height = getDimension(document, "Height"); 68 width = getDimension(window, "Width"); 69 this.overlay.style.width = width + "px"; 70 this.overlay.style.height = height + "px"; 71 } 72 this.create = function() { 73 var _already_overlaid = document.getElementById(this.overlay_id); 74 if (_already_overlaid) return; 75 76 this.overlay = document.createElement('div'); 77 this.overlay.id = this.overlay_id; 78 document.body.appendChild(this.overlay); 79 var svgURL = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='" + this.opts.gridSpace + "' height='" + this.opts.gridHeight + "'><rect style='fill: " + this.opts.gridColor + ";' width='1' height='0.25px' x='0' y='" + (this.opts.gridHeight - 1) + "'/></svg>\")"; 80 this.overlay.style.backgroundImage = svgURL; 81 this.overlay.style.position = 'absolute'; 82 this.overlay.style.top = this.opts.gridOffset + 'px'; 83 this.overlay.style.left = '0px'; 84 this.overlay.style.zIndex = 9998; 85 this.overlay.style.pointerEvents = 'none'; 86 this.overlay.style.opacity = this.opts.gridOpacity / 100; 87 this.resize() 88 } 89 this.toggle = function(forced) { 90 if (forced) { 91 var elem = document.getElementById(this.overlay_id); 92 if (elem) { 93 document.body.removeChild(elem); 94 } 95 } 96 this.create(); 97 if (forced || this.overlay.style.display != 'block') { 98 if (this.showText.parentNode) { 99 this.overlay_it.replaceChild(this.hideText, this.showText); 100 } 101 this.overlay.style.display = 'block'; 102 } else { 103 if (this.hideText.parentNode) { 104 this.overlay_it.replaceChild(this.showText, this.hideText); 105 } 106 this.overlay.style.display = 'none'; 107 } 108 } 109 this.refresh = function(value) { 110 var value = parseInt(value); 111 if (value < 1 || isNaN(value)) { 112 this.value = baseliner.opts.gridHeight; 113 baseliner.grid_size.style.backgroundColor = "red"; 114 baseliner.grid_size.style.color = "white"; 115 return; 116 } 117 baseliner.grid_size.style.backgroundColor = "white"; 118 baseliner.grid_size.style.color = "black"; 119 if (baseliner.overlay) { 120 document.body.removeChild(baseliner.overlay); 121 baseliner.overlay = null; 122 } 123 baseliner.opts.gridHeight = value; 124 baseliner.toggle(true); 125 } 126 this.refreshOffset = function(value) { 127 var value = parseInt(value); 128 if (value < 0 || isNaN(value)) { 129 this.value = baseliner.opts.gridOffset; 130 baseliner.grid_offset.style.backgroundColor = "red"; 131 baseliner.grid_offset.style.color = "white"; 132 return; 133 } 134 baseliner.grid_offset.style.backgroundColor = "white"; 135 baseliner.grid_offset.style.color = "black"; 136 if (baseliner.overlay) { 137 document.body.removeChild(baseliner.overlay);
138 baseliner.overlay = null; 139 } 140 baseliner.opts.gridOffset = value; 141 baseliner.toggle(true); 142 } 143 144 init = function() { 145 switch(baseliner.opts.gridColor) { 146 case 'green': 147 baseliner.opts.gridColor = [0, 0xFF, 0]; break; 148 case 'blue': 149 baseliner.opts.gridColor = [0, 0, 0xFF]; break; 150 case 'red': 151 baseliner.opts.gridColor = [0xFF, 0, 0]; break; 152 case 'black': 153 baseliner.opts.gridColor = [0, 0, 0]; break; 154 } 155 // convert the array to rgb 156 baseliner.opts.gridColor = "rgb(" + baseliner.opts.gridColor[0] + "," + baseliner.opts.gridColor[1] + "," + baseliner.opts.gridColor[2] + ")"; 157 158 var overlay_it = document.createElement('a'); 159 overlay_it.setAttribute('href', ''); 160 overlay_it.style.color = '#EEE'; 161 overlay_it.style.marginRight = '12px'; 162 overlay_it.appendChild(baseliner.showText); 163 164 overlay_it.onclick = function(evt) { 165 if (!evt) var evt = window.event; 166 baseliner.toggle(); 167 evt.cancelBubble = true; 168 if (evt.stopPropagation) { 169 evt.stopPropagation(); 170 evt.preventDefault(); 171 } 172 return false; 173 } 174 baseliner.overlay_it = overlay_it; 175 176 var grid_size_label = document.createElement('label'); 177 grid_size_label.setAttribute('for', 'baseliner-grid-size'); 178 grid_size_label.innerText = 'Grid Size: '; 179 180 var grid_size = document.createElement('input'); 181 grid_size.setAttribute('name', 'baseliner-grid-size'); 182 grid_size.size = 3; 183 grid_size.type = 'number'; 184 grid_size.value = baseliner.opts.gridHeight; 185 grid_size.style.textAlign = 'center'; 186 grid_size.style.border = '1px solid #CCC'; 187 grid_size.style.padding = '1px'; 188 grid_size.style.marginRight = '5px'; 189 baseliner.grid_size = grid_size; 190 191 var grid_offset_label = document.createElement('label'); 192 grid_offset_label.setAttribute('for', 'baseliner-grid-size'); 193 grid_offset_label.innerText = 'Grid Offset: '; 194 195 var grid_offset = document.createElement('input'); 196 grid_offset.setAttribute('name', 'baseliner-grid-size'); 197 grid_offset.size = 3; 198 grid_offset.type = 'number'; 199 grid_offset.value = baseliner.opts.gridOffset; 200 grid_offset.style.textAlign = 'center'; 201 grid_offset.style.border = '1px solid #CCC'; 202 grid_offset.style.padding = '1px'; 203 baseliner.grid_offset = grid_offset; 204 205 var parent = document.createElement('div'); 206 parent.style.position = 'relative'; 207 parent.style.zIndex = 20000; 208 parent.style.marginTop = '20px'; 209 210 var action = document.createElement('div'); 211 action.id = 'overlay-it'; 212 action.style.position = 'fixed'; 213 action.style.bottom = '0px'; 214 action.style.left = '10px'; 215 action.style.display = 'inline'; 216 action.style.padding = '5px 15px'; 217 action.style.fontFamily = 'Arial, sans-serif'; 218 action.style.fontSize = '12px'; 219 action.style.fontWeight = 'bold'; 220 action.style.textAlign = 'center'; 221 action.style.backgroundColor = '#333'; 222 action.style.color = '#EEE'; 223 224 action.appendChild(overlay_it); 225 action.appendChild(grid_size_label); 226 action.appendChild(grid_size); 227 action.appendChild(grid_offset_label); 228 action.appendChild(grid_offset); 229 parent.appendChild(action); 230 document.body.appendChild(parent); 231 232 var timer; 233 234 var _heightChanged = function() { 235 window.clearTimeout(timer); 236 timer = window.setTimeout(function() { 237 baseliner.refresh(grid_size.value); 238 }, 400); 239 }; 240 241 grid_size.onchange = grid_size.onkeyup = _heightChanged; 242 243 var _offsetChanged = function() { 244 window.clearTimeout(timer); 245 timer = window.setTimeout(function() { 246 baseliner.refreshOffset(grid_offset.value); 247 }, 400); 248 }; 249 250 grid_offset.onchange = grid_offset.onkeyup = _offsetChanged; 251 252 window.onresize = function() { 253 baseliner.resize(); 254 }; 255 document.onkeyup = function(evt) { 256 if (!evt) var evt = window.event; 257 var keyCode = evt.keyCode || evt.which; 258 259 if (keyCode == 27) { 260 window.clearTimeout(timer); 261 timer = window.setTimeout(function() {
262 baseliner.toggle(); 263 }, 400); 264 } 265 }; 266 } 267 init(); 268} 269
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.