1/** 2 * main.js 3 * http://www.codrops.com 4 * 5 * Licensed under the MIT license. 6 * http://www.opensource.org/licenses/mit-license.php 7 * 8 * Copyright 2016, Codrops 9 * http://www.codrops.com 10 */ 11;(function(window) { 12 13 'use strict'; 14 15 // Helper vars and functions. 16 function extend( a, b ) { 17 for( var key in b ) { 18 if( b.hasOwnProperty( key ) ) { 19 a[key] = b[key]; 20 } 21 } 22 return a; 23 } 24 25 /** 26 * Line obj. 27 */ 28 function Line(options) { 29 this.options = extend({}, this.options); 30 extend(this.options, options); 31 this._init(); 32 } 33 34 Line.prototype.options = { 35 // top, left, width, height: numerical for pixels or string for % and viewport units. Examples: 2 || '20%' || '50vw'. 36 // color: the (bg)color of the line. 37 // hidden: defines if the line is rendered initially or hidden by default. 38 // animation: animation properties for the line 39 // duration: animation speed. 40 // easing: animation easing (animejs easing. To see all possible values console animejs.easings). 41 // delay: animation delay. 42 // direction: line animation direction. Possible values: TopBottom || BottomTop || LeftRight || RightLeft || CenterV || CenterH. 43 width: 1, 44 height: '100%', 45 left: '50%', 46 top: '0%', 47 color: '#000', 48 hidden: false, 49 animation: { 50 duration: 500, 51 easing: 'linear', 52 delay: 0, 53 direction: 'TopBottom' 54 } 55 }; 56 57 /** 58 * Set style. 59 */
60 Line.prototype._init = function() { 61 this.el = document.createElement('div'); 62 this.el.className = 'decoline'; 63 var opts = this.options; 64 this.el.style.width = typeof opts.width === 'number' ? opts.width + 'px' : opts.width; 65 this.el.style.height = typeof opts.height === 'number' ? opts.height + 'px' : opts.height; 66 this.el.style.left = typeof opts.left === 'number' ? opts.left + 'px' : opts.left; 67 this.el.style.top = typeof opts.top === 'number' ? opts.top + 'px' : opts.top; 68 this.el.style.background = opts.color || opts.color; 69 this.el.style.opacity = opts.hidden ? 0 : 1; 70 this._setOrigin(); 71 this.rendered = !opts.hidden; 72 }; 73 74 /** 75 * Transform origin is set according to the animation direction. 76 */ 77 Line.prototype._setOrigin = function() { 78 var opts = this.options, tOrigin = '50% 50%'; 79 80 if( opts.animation.direction === 'TopBottom' ) { 81 tOrigin = '50% 0%'; 82 } 83 else if( opts.animation.direction === 'BottomTop' ) { 84 tOrigin = '50% 100%'; 85 } 86 else if( opts.animation.direction === 'LeftRight' ) { 87 tOrigin = '0% 50%'; 88 } 89 else if( opts.animation.direction === 'RightLeft' ) { 90 tOrigin = '100% 50%'; 91 } 92 93 this.el.style.WebkitTransformOrigin = this.el.style.transformOrigin = tOrigin; 94 }; 95 96 /** 97 * Animates the line. 98 */ 99 Line.prototype.animate = function(settings) { 100 if( this.isAnimating ) { 101 return false; 102 } 103 this.isAnimating = true; 104 105 var animeProps = { 106 targets: this.el, 107 duration: settings && settings.duration != undefined ? settings.duration : this.options.animation.duration, 108 easing: settings && settings.easing != undefined ? settings.easing : this.options.animation.easing, 109 delay: settings && settings.delay != undefined ? settings.delay : this.options.animation.delay 110 }; 111 112 if( settings && settings.direction ) { 113 this.options.animation.direction = settings.direction; 114 } 115 116 // Sets origin again. Settings might contain a different animation direction? 117 this._setOrigin(); 118 119 if( this.options.animation.direction === 'TopBottom' || this.options.animation.direction === 'BottomTop' || this.options.animation.direction === 'CenterV' ) { 120 animeProps.scaleY = this.rendered ? [1, 0] : [0, 1]; 121 } 122 else { 123 animeProps.scaleX = this.rendered ? [1, 0] : [0, 1]; 124 } 125 126 if( !this.rendered ) { 127 this.el.style.opacity = 1; 128 } 129 130 var self = this; 131 animeProps.complete = function() { 132 self.rendered = !self.rendered; 133 self.isAnimating = false; 134 if( settings && settings.complete ) { 135 settings.complete(); 136 } 137 } 138 139 anime(animeProps); 140 }; 141 142 /** 143 * Show the line. 144 */ 145 Line.prototype.show = function() { 146 this.el.style.opacity = 1; 147 this.el.style.WebkitTransform = this.el.style.transform = 'scale3d(1,1,1)'; 148 this.rendered = true; 149 }; 150 151 /** 152 * Hide the line. 153 */ 154 Line.prototype.hide = function() { 155 this.el.style.opacity = 0; 156 this.rendered = false; 157 }; 158 159 /** 160 * LineMaker obj. 161 */ 162 function LineMaker(options) { 163 this.options = extend({}, this.options); 164 extend(this.options, options); 165 this._init(); 166 } 167 168 /** 169 * LineMaker options. 170 */ 171 LineMaker.prototype.options = { 172 // Where to insert the lines container. 173 // element: the DOM element or a string to specify the selector, e.g. '#id' or '.classname'. 174 // position: Whether to prepend or append to the parent.element 175 parent: {element: document.body, position: 'prepend'}, 176 // position: if fixed the lines container will have fixed position. 177 position: 'absolute', 178 // The lines settings. 179 lines: [] 180 }; 181 182 /** 183 * Create the lines and its structure. 184 */ 185 LineMaker.prototype._init = function() { 186 this.lines = []; 187 188 this.decolines = document.createElement('div'); 189 this.decolines.className = 'decolines'; 190 if( this.options.position === 'fixed' ) { 191 this.decolines.className += ' decolines--fixed'; 192 } 193 194 for(var i = 0, len = this.options.lines.length; i < len; ++i) { 195 var lineconfig = this.options.lines[i], 196 line = new Line(lineconfig); 197 198 this.decolines.appendChild(line.el); 199 this.lines.push(line); 200 } 201 202 var p = this.options.parent, 203 pEl = typeof p.element === 'string' ? document.querySelector(p.element) : p.element; 204 205 if( p.position === 'prepend' ) { 206 pEl.insertBefore(this.decolines, pEl.firstChild); 207 } 208 else { 209 pEl.appendChild(this.decolines); 210 } 211 }; 212 213 /** 214 * Shows/Hides one line with an animation. 215 */ 216 LineMaker.prototype._animateLine = function(lineIdx, dir, settings) { 217 var line = this.lines[lineIdx]; 218 if( line && dir === 'in' && !line.rendered || dir === 'out' && line.rendered ) {
219 line.animate(settings); 220 } 221 }; 222 223 /** 224 * Shows/Hides all lines with an animation. 225 */ 226 LineMaker.prototype._animateLines = function(dir, callback) { 227 var completed = 0, totalLines = this.lines.length; 228 229 if( totalLines === 0 ) { 230 callback(); 231 return; 232 } 233 234 var checkCompleted = function() { 235 completed++; 236 if( completed === totalLines && typeof callback === 'function' ) { 237 callback(); 238 } 239 }; 240 241 for(var i = 0; i < totalLines; ++i) { 242 var line = this.lines[i]; 243 if( dir === 'in' && !line.rendered || dir === 'out' && line.rendered ) { 244 line.animate({ 245 complete: function() { 246 checkCompleted(); 247 } 248 }); 249 } 250 else { 251 checkCompleted(); 252 } 253 } 254 }; 255 256 /** 257 * Shows/Hides one line. 258 */ 259 LineMaker.prototype._toggleLine = function(lineIdx, action) { 260 var line = this.lines[lineIdx]; 261 if( !line ) { return; } 262 263 if( action === 'show' && !line.rendered ) { 264 line.show(); 265 } 266 else if( action === 'hide' && line.rendered ) { 267 line.hide(); 268 } 269 }; 270 271 /** 272 * Shows/Hides all lines. 273 */ 274 LineMaker.prototype._toggleLines = function(action) { 275 for(var i = 0, len = this.lines.length; i < len; ++i) { 276 this._toggleLine(i, action); 277 } 278 }; 279 280 /** 281 * Shows one line with an animation. 282 * lineIndex: index/position of the line in the LineMaker.options.lines array. 283 * animationSettings is optional: if not passed, the animation settings defined in LineMaker.options.lines for each line will be used. 284 */ 285 LineMaker.prototype.animateLineIn = function(lineIdx, settings) { 286 this._animateLine(lineIdx, 'in', settings); 287 }; 288 289 /** 290 * Hides one line with an animation. 291 * lineIndex: index/position of the line in the LineMaker.options.lines array. 292 * animationSettings is optional: if not passed, the animation settings defined in LineMaker.options.lines for each line will be used. 293 */ 294 LineMaker.prototype.animateLineOut = function(lineIdx, settings) { 295 this._animateLine(lineIdx, 'out', settings); 296 }; 297 298 /** 299 * Shows all lines with an animation. 300 */ 301 LineMaker.prototype.animateLinesIn = function(callback) { 302 this._animateLines('in', callback); 303 }; 304 305 /** 306 * Hides all lines with an animation. 307 */ 308 LineMaker.prototype.animateLinesOut = function(callback) { 309 this._animateLines('out', callback); 310 }; 311 312 /** 313 * Shows one line. 314 * lineIndex: index/position of the line in the LineMaker.options.lines array. 315 */ 316 LineMaker.prototype.showLine = function(lineIdx) { 317 this._toggleLine(lineIdx, 'show'); 318 }; 319 320 /** 321 * Hides one line. 322 * lineIndex: index/position of the line in the LineMaker.options.lines array. 323 */ 324 LineMaker.prototype.hideLine = function(lineIdx) { 325 this._toggleLine(lineIdx, 'hide'); 326 }; 327 328 /** 329 * Shows all lines. 330 */ 331 LineMaker.prototype.showLines = function() { 332 this._toggleLines('show'); 333 }; 334 335 /** 336 * Hides all lines. 337 */ 338 LineMaker.prototype.hideLines = function() { 339 this._toggleLines('hide'); 340 }; 341 342 /** 343 * Removes a line. 344 * lineIndex: index/position of the line in the LineMaker.options.lines array. 345 */ 346 LineMaker.prototype.removeLine = function(lineIdx) { 347 var line = this.lines[lineIdx]; 348 if( line ) { 349 this.lines.splice(lineIdx, 1); 350 this.decolines.removeChild(this.decolines.children[lineIdx]); 351 } 352 }; 353 354 /** 355 * Removes all lines. 356 */ 357 LineMaker.prototype.removeLines = function() { 358 this.lines = []; 359 this.decolines.innerHTML = ''; 360 }; 361 362 /** 363 * Creates a line. 364 * settings is optional: same settings passed in LineMaker.options.lines for one line. 365 */ 366 LineMaker.prototype.createLine = function(settings) { 367 var line = new Line(settings); 368 this.decolines.appendChild(line.el); 369 this.lines.push(line); 370 }; 371 372 /** 373 * Returns the total number of lines. 374 */ 375 LineMaker.prototype.getTotalLines = function() { 376 return this.lines.length; 377 } 378 379 window.LineMaker = LineMaker; 380 381})(window);
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.