1/** 2 * The Debug scope of the Responsiville framework. Contains debugging methods 3 * and properties which assist in the development of responsive web pages with 4 * the Responsiville framework. Not meant to be used autonomously. 5 6 * @namespace Responsiville.Debug 7 */ 8 9Responsiville.Debug = {}; 10 11 12 13/** 14 * Internet Explorer (at least up to version 10) does not support the console 15 * group and groupEnd functions, so we point them to the usual log function. 16 */ 17 18if ( typeof console.group === 'undefined' || typeof console.groupEnd === 'undefined' ) { 19 20 console.group = console.log; 21 console.groupEnd = console.log; 22 23} 24 25 26 27/** 28 * @var {boolean} RESPONSIVILLE_DEBUG 29 * 30 * Global setting/flag for the framework debugging messages. If set before the 31 * framework runs then that value is taken into account, otherwise it is 32 * initialised to "false". This setting is useful only when the framework 33 * initialises automatically. In other cases it is up to the developer to 34 * set it properly or leave it to its default value. 35 * 36 * @global 37 */ 38 39var RESPONSIVILLE_DEBUG = typeof RESPONSIVILLE_DEBUG !== "undefined" ? RESPONSIVILLE_DEBUG : false; 40 41 42 43/** 44 * @var {boolean} RESPONSIVILLE_AUTO_INIT 45 * 46 * Global setting/flag for the framework automatic initialisation process. If 47 * set before the framework scripts are included in the page HTML then that 48 * value is taken into account, otherwise it is initialised to "true". It is 49 * mainly useful when one wants to alter the default framework behaviour, which 50 * is set to automatically initialise. 51 * 52 * @global 53 */ 54 55var RESPONSIVILLE_AUTO_INIT; 56 57 58 59/** 60 * Special scope which contains debugging functions that may be injected in any 61 * object's prototype so that it is extended with debugging capabilities as if 62 * it had inherited them. Not meant to be used autonomously. 63 * 64 * @namespace Responsiville.Debug.Extensions 65 */ 66 67Responsiville.Debug.Extensions = {}; 68 69 70 71/** 72 * Prints the available functions of the current scope object. A quick and 73 * convenient way of printing an object's API. Responsiville objects are 74 * injected (ie they inherit) this method for convienence in debugging. It 75 * follows the debug option of the main Responsiville object in order to be 76 * verbose or quiet. 77 * 78 * @return {void} 79 */ 80 81Responsiville.Debug.Extensions.printAPI = function () { 82 83 var debug = this.options.debug; 84 85 this.options.debug = true; 86 87 88 89 var toLog = [ 'API' ]; 90 91 for ( var parameter in this ) { 92 93 // Only print functions. 94 95 if ( jQuery.isFunction( this[parameter] ) ) { 96 97 toLog.push( parameter ); 98 toLog.push( this[parameter] ); 99 100 } 101 } 102 103 104 105 this.log.apply( this, toLog ); 106 107 this.options.debug = debug; 108 109}; 110 111 112 113/** 114 * Wrapper for the console log function that pretty prints log messages inside 115 * the log scope of the current scope object using its code name. Responsiville 116 * objects are injected (ie they inherit) this method for convienence in 117 * debugging. It follows the debug option of the main Responsiville object in 118 * order to be verbose or quiet. 119 * 120 * @param {...String} arguments Arbitrary number of string messages to be logged 121 * in the browser console. 122 * 123 * @return {void} 124 */ 125 126Responsiville.Debug.Extensions.log = function () { 127 128 if ( ! this.options.debug ) { 129 return; 130 } 131 132 133 134 // The current log entry is wrapped in a group in console. 135 136 console.group( '[' + this.codeName + ']' ); 137 138 139 140 // Logs all given arguments one afer the other. 141 142 for ( var k in arguments ) { 143 console.log( arguments[k] ); 144 } 145 146 console.groupEnd(); 147 148}; 149 150 151 152/** 153 * 154 * Wrapper for the console dir function that pretty prints an object inside the 155 * log scope of the current scope object using its code name. Responsiville 156 * objects are (ie they inherit) this method for convienence in debugging. It 157 * follows the debug option of the main Responsiville object in order to be 158 * verbose or quiet. 159 * 160 * @param {...Object} arguments Arbitrary number of objects to be displayed in 161 * a pretty printed way in the browser console. 162 * 163 * @return {void} 164 */ 165 166Responsiville.Debug.Extensions.dir = function () { 167 168 if ( ! this.options.debug ) { 169 return; 170 } 171 172 173 174 // The current dir entry is wrapped in a group in console. 175
176 console.group( '[' + this.codeName + ']' ); 177 178 179 180 // Dirs all given arguments one afer the other. 181 182 for ( var k in arguments ) { 183 184 if ( jQuery.type( arguments[k] ) == 'string' ) { 185 console.log( arguments[k] ); 186 } else if ( jQuery.isFunction( arguments[k] ) ) { 187 console.log( arguments[k] ); 188 } else { 189 console.dir( arguments[k] ); 190 } 191 192 } 193 194 console.groupEnd(); 195 196}; 197 198 199 200/** 201 * Sets up the little debug panel of the Responsiville framework which lies 202 * quietly at the edge of the screen to assist in responsive web page building. 203 * It provides info on page load times, screen sizes and breakpoints, web 204 * development documentation links and Responsiville documentation links. It is 205 * supposed to be turned off in production mode. It follows the debugUI option 206 * of the main responsiville object in order to appear on hide. 207 * 208 * @return {void} 209 */ 210 211Responsiville.Debug.setupDebug = function () { 212 213 var responsiville = Responsiville.Main.getInstance(); 214 215 if ( ! responsiville.options.debugUI ) { 216 return; 217 } 218 219 // Mark debug state in the body. 220 221 responsiville.$body.addClass( 'responsiville-debug-grid responsiville-debug-blocks' ); 222 223 224 225 // Create the debug panel. 226 227 responsiville.$body.append( 228 229 '<aside class = "responsiville-debug-controls ' + responsiville.options.debugPos + '">' + 230 231 // For debugging the grid. 232 233 '<section class = "responsiville-debug-layout">' + 234 '<p>' + 235 '<label for = "responsiville-debug-grid">' + 236 'Grid debug <input type = "checkbox" id = "responsiville-debug-grid" name = "responsiville-debug-grid" value = "responsiville-debug-grid">' + 237 '</label>' + 238 '</p>' + 239 '<p>' + 240 '<label for = "responsiville-debug-blocks">' + 241 'Text debug <input type = "checkbox" id = "responsiville-debug-blocks" name = "responsiville-debug-blocks" value = "responsiville-debug-blocks">' + 242 '</label>' + 243 '</p>' + 244 '</section>' + 245 246 // For debugging screen sizes. 247 248 '<section class = "responsiville-debug-dimensions">' + 249 '<p>...</p>' + 250 '</section>' + 251 252 // For monitoring browser performance. 253 254 '<section class = "responsiville-debug-performance">' + 255 '<p>…</p>' + 256 '</section>' + 257 258 // Link to the responsiville test page, if we are in a page of the theme. 259 260 '<section class = "responsiville-debug-text">' + 261 '<p>' + 262 '<a class = "button" href = "http://codex.wordpress.org/Function_Reference/" title = "WordPress function reference" target = "_blank">Codex functions</a>' + 263 '<a class = "button" href = "http://codex.wordpress.org/Plugin_API/Action_Reference" title = "Codex hooks reference" target = "_blank">Codex hooks</a>' + 264 '<a class = "button" href = "https://codex.wordpress.org/Plugin_API/Filter_Reference" title = "Codex filters reference" target = "_blank">Codex filters</a>' + 265 '<a class = "button" href = "http://www.advancedcustomfields.com/resources/" title = "ACF docs" target = "_blank">ACF docs</a>' + 266 '<a class = "button" href = "http://www.php.net/" title = "PHP.net documentation" target = "_blank">PHP.net</a> <br />' + 267 '<a class = "button" href = "http://devdocs.io/html/" title = "Devdocs HTML" target = "_blank">Devdocs HTML</a>' + 268 '<a class = "button" href = "http://devdocs.io/css/" title = "Devdocs CSS" target = "_blank">Devdocs CSS</a>' + 269 '<a class = "button" href = "http://devdocs.io/javascript/" title = "Devdocs JS" target = "_blank">Devdocs JS</a> <br />' + 270 '<a class = "button" href = "http://vanilla.nevma.gr/" title = "Vanilla website" target = "_blank">Vanilla</a>' + 271 '<a class = "button" href = "http://vanilla.nevma.gr/w
271p-content/docs/vanilla-apigen/" title = "Vanilla documentation" target = "_blank">Vanilla docs</a>' + 272 '<a class = "button" href = "http://vanilladev.nevma.gr/" title = "Vanilla demo" target = "_blank">Vanilla demo</a> <br />' + 273 '<a class = "button" href = "http://vanilla.nevma.gr/wp-content/docs/responsiville-jsdoc/" title = "Responsiville documentation" target = "_blank">Responsiville docs</a>' + 274 '<a class = "button" href = "http://vanilla.nevma.gr/wp-content/themes/vforvanilla/inc/vanilla/responsiville/demo" title = "Responsiville demo page" target = "_blank">Responsiville demo</a>' + 275 '</p>' + 276 '</section>' + 277 278 // Toggles the panel on and off. 279 280 '<button class = "responsiville-debug-toggle"></button>' + 281 282 '</aside>' 283 284 ); 285 286 287 288 // Cache important debug elements. 289 290 this.$debugControls = jQuery( '.responsiville-debug-controls' ); 291 this.$debugPerformance = jQuery( '.responsiville-debug-dimensions' ); 292 this.$debugToggle = jQuery( '.responsiville-debug-toggle' ); 293 294 295 296 // Handlers for grid layout debugging. 297 298 jQuery( '.responsiville-debug-layout input[type="checkbox"]' ).on( 'change', function () { 299 300 if ( jQuery( this ).is( ':checked' ) ) { 301 jQuery( 'body' ).addClass( jQuery( this ).val() ); 302 } else { 303 jQuery( 'body' ).removeClass( jQuery( this ).val() ); 304 } 305 306 }).trigger( 'change' ); 307 308 jQuery( '[class*="column"], .row' ).each( function () { 309 310 jQuery( this ). 311 append( '<p class = "class-info start">' + this.tagName.toLowerCase() + '.“' + jQuery( this ).attr( 'class' ) + '” start</p>' ). 312 append( '<p class = "class-info end">' + this.tagName.toLowerCase() + '.“' + jQuery( this ).attr( 'class' ) + '” end </p>' ); 313 314 }); 315 316 317 318 // Handler for the button that toggles the debug panel itself. 319 320 this.$debugToggle.on( 'click', (function () { 321 322 if ( this.$debugToggle.is( '.responsiville-debug-toggle-closed' ) ) { 323 this.openDebugPanel(); 324 } else { 325 this.closeDebugPanel(); 326 } 327 328 }).bind( this ) ); 329 330 if ( responsiville.getProperty( 'debug-panel-on' ) ) { 331 this.openDebugPanel(); 332 } else { 333 this.closeDebugPanel(); 334 } 335 336 337 338 // Shows load performance data on page load (use jQuery ready function to make sure). 339 340 responsiville.$window.on( 'load', (function () { 341 342 // Delay just a tad, so that the load event has had time to complete. 343 344 window.setTimeout( this.showDebugLoadPerformance, 10 ); 345 346 347 }).bind( this )); 348 349 350 351 // Show dimensions debug on window resize. 352 353 responsiville.on( 'resize', this.showDebugUIDimensions.bind( this ) ); 354 355 jQuery( this.showDebugUIDimensions.bind( this ) ); 356 357}; 358 359 360 361/** 362 * Shows the dimensions of the current browser inner window in the Responsiville 363 * debug panel. This is intended to represent the current device screen when 364 * developing and debugging. It also shows the current responsive breakpoint 365 * along with a respective icon. 366 * 367 * @return {void} 368 */ 369 370Responsiville.Debug.showDebugUIDimensions = function () { 371 372 var responsiville = Responsiville.Main.getInstance(); 373 374 if ( ! responsiville.options.debugUI ) { 375 return; 376 } 377 378 this.$debugPerformance.html( 379 '<p>' + 380 window.innerWidth + 'x' + window.innerHeight + 'px ' + 381 responsiville.currentBreakpoint.name + ' ' + 382 '<span class = "responsiville-debug-dimensions-icon ' + responsiville.currentBreakpoint.name + '">' + 383 responsiville.currentBreakpoint.icon + 384 '</span> ' + 385 '</p>' 386 ); 387 388}; 389 390 391 392/** 393 * Shows the most significant page loading performance statistics inside the 394 * Responsiville debug panel (like DOMContentReady and load events). 395 * 396 * @return {void} 397 */ 398 399Responsiville.Debug.showDebugLoadPerformance = function () { 400 401 // Get the performance data. 402 403 var performance = 404 window.performance || 405 window.mozPerformance || 406 window.msPerformance || 407 window.webkitPerformance; 408 409 var responseStart = ( ( performance.timing.responseStart - performance.timing.requestStart ) / 1000 ).toFixed( 2 ); 410 var responseEnd = ( ( performance.timing.responseEnd - performance.timing.requestStart ) / 1000 ).toFixed( 2 ); 411 var domLoading = ( ( performance.timing.domLoading - performance.timing.requestStart ) / 1000 ).toFixed( 2 ); 412 var domInteractive = ( ( performance.timing.domInteractive - performance.timing.requestStart ) / 1000 ).toFixed( 2 ); 413 var domContentLoaded = ( ( performance.timing.domContentLoadedEventEnd - performance.timing.requestStart ) / 1000 ).toFixed( 2 ); 414 var domComplete = ( ( performance.timing.domComplete - performance.timing.requestStart ) / 1000 ).toFixed( 2 ); 415 var load = ( ( performance.timing.loadEventEnd - performance.timing.requestStart ) / 1000 ).toFixed( 2 ); 416 417 var responseStartDiff = ( responseStart - 0 ).toFixed( 2 ); 418 var domContentLoadedDiff = ( domContentLoaded - responseStart ).toFixed( 2 ); 419 var loadDiff = ( load - domContentLoaded ).toFixed( 2 ); 420 421 422 423 // Add it to the debug panel. 424 425 jQuery( '.responsiville-debug-performance' ).html( 426 427 '<table class = "vanilla" cellspacing = "0" cellpadding = "0"><tbody>' + 428 429 // Request sent. 430 431 '<tr title = "Browser sends the request">' + 432 '<td>Request Start</td><td>—>' + '</td><td>' + '0.00' + '</td><td>' + '—' + '</td>' + 433 '</tr>' + 434 435 // Requested statred receiving. 436 437 '<tr title = "Time to first byte - browser received the first byte of the response">' + 438 '<td>TtFB</td><td>—>' + '</td><td>' + responseStart + '</td><td>' + responseStartDiff + '</td>' + 439 '</tr>' + 440 441 // DOM and CSSOM is ready. 442 443 '<tr title = "Synchronous scripts run, DOM & CSSOM ready, render tree formed">' + 444 '<td>DOMContentLoaded</td><td>—>' + '</td><td>' + domContentLoaded + '</td><td>' + domContentLoadedDiff + '</td>' + 445 '</tr>' + 446 447 // Page fully loaded. 448 449 '<tr title = "Page is fully loaded and rendered, images are loaded">' + 450 '<td>Load</td><td>—>' + '</td><td>' + load + '</td><td>' + loadDiff + '</td>' + 451 '</tr>' + 452 453 '</tbody></table>' 454 455 ); 456 457}; 458 459 460 461/** 462 * Opens up the Responsiville debug panel. 463 * 464 * @return {void} 465 */ 466 467Responsiville.Debug.openDebugPanel = function () { 468 469 this.$debugToggle.removeClass( 'responsiville-debug-toggle-closed' ); 470 this.$debugControls.removeClass( 'responsiville-debug-control
470s-closed' ); 471 472 Responsiville.Main.getInstance().setProperty( 'debug-panel-on', true ); 473 474}; 475 476 477 478 479/** 480 * Closes the Responsiville debug panel. 481 * 482 * @return {void} 483 */ 484 485Responsiville.Debug.closeDebugPanel = function () { 486 487 this.$debugToggle.addClass( 'responsiville-debug-toggle-closed' ); 488 this.$debugControls.addClass( 'responsiville-debug-controls-closed' ); 489 490 Responsiville.Main.getInstance().setProperty( 'debug-panel-on', false ); 491 492};
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.