52 | Visual Event is a bookmarklet which will visually show you which elements on an HTML 53 | page have Javascript events assigned to them. This page can be used to generate the 54 | bookmarklet that you want to use for testing or deployment of Visual Event. 55 |
56 |57 | To generate a bookmarklet, modify the Javascript in the textarea below, the 58 | bookmarklet link will be updated as you type (typically you will only need to 59 | change the URL to load Visual Event) and then click and drag the 60 | Visual Event link to your bookmarklet bar. 61 |
62 | 63 |64 | Visual Event 65 |
66 | 67 | 88 |Visual Event will show which elements on any given page have Javascript events attached '+ 176 | 'to them, what those events are and the code associated with the events. In Webkit '+ 177 | 'browsers and Opera, Visual Event will also indicate where the code in question was '+ 178 | 'defined.
'+ 179 | 'Note that Visual Event is only able to show events for Javascript libraries for which '+ 180 | 'it has a parser. This is currently: DOM0 events, Glow, jQuery, MooTools, Prototype and YUI2.
'+ 181 | 'Commands:
'+ 182 | '| Double click element with event | '+ 185 | 'Hide event indicator. Allows access to nodes underneath | '+ 186 | '
| Key: space | '+ 189 | 'Restore all events to be visible | '+ 190 | '
| Key: esc | '+ 193 | 'Quit out of Visual Event | '+ 194 | '
| Key: h | '+ 197 | 'Show / hide this help box | '+ 198 | '
| Key: r | '+ 201 | 'Reload and display events on page | '+ 202 | '
The colour of the elements that have been detected to have an event reflect the type of '+ 205 | 'events that are attached to the element:
'+ 206 | '| '+ 209 | ' | '+ 210 | ' | '+ 211 | ' | '+ 212 | ' | '+ 213 | ' | '+ 214 | ' | '+ 215 | ' |
| Mouse event | '+ 218 | 'UI event | '+ 219 | 'HTML event | '+ 220 | 'Mouse + HTML | '+ 221 | 'Mouse + UI | '+ 222 | 'HTML + UI | '+ 223 | 'Mouse + HTML + UI | '+ 224 | '
Visual Event is open source software (GPLv2). If you would like to contribute an '+ 227 | 'enhancement, please fork the project on '+ 228 | 'Github!
'+ 229 | 'Click anywhere to close this help box.
'+ 230 | ''+type+
764 | ' event subscribed by '+source+'
'+
765 | this._scriptSource( func )+
766 | '
'+type+
770 | ' event subscribed by '+source+' ('+
771 | 'trigger event)
'+
772 | this._scriptSource( func )+
773 | '
{ target: DOMElement, params: Object } objects.
254 | */
255 | findElements: function(globalParams, element)
256 | {
257 | var elements = element ? [element] : toArray(document.getElementsByTagName(sh.config.tagName)),
258 | conf = sh.config,
259 | result = []
260 | ;
261 |
262 | // support for feature
263 | if (conf.useScriptTags)
264 | elements = elements.concat(getSyntaxHighlighterScriptTags());
265 |
266 | if (elements.length === 0)
267 | return result;
268 |
269 | for (var i = 0, l = elements.length; i < l; i++)
270 | {
271 | var item = {
272 | target: elements[i],
273 | // local params take precedence over globals
274 | params: merge(globalParams, parseParams(elements[i].className))
275 | };
276 |
277 | if (item.params['brush'] == null)
278 | continue;
279 |
280 | result.push(item);
281 | }
282 |
283 | return result;
284 | },
285 |
286 | /**
287 | * Shorthand to highlight all elements on the page that are marked as
288 | * SyntaxHighlighter source code.
289 | *
290 | * @param {Object} globalParams Optional parameters which override element's
291 | * parameters. Only used if element is specified.
292 | *
293 | * @param {Object} element Optional element to highlight. If none is
294 | * provided, all elements in the current document
295 | * are highlighted.
296 | */
297 | highlight: function(globalParams, element)
298 | {
299 | var elements = this.findElements(globalParams, element),
300 | propertyName = 'innerHTML',
301 | highlighter = null,
302 | conf = sh.config
303 | ;
304 |
305 | if (elements.length === 0)
306 | return;
307 |
308 | for (var i = 0, l = elements.length; i < l; i++)
309 | {
310 | var element = elements[i],
311 | target = element.target,
312 | params = element.params,
313 | brushName = params.brush,
314 | code
315 | ;
316 |
317 | if (brushName == null)
318 | continue;
319 |
320 | // Instantiate a brush
321 | if (params['html-script'] == 'true' || sh.defaults['html-script'] == true)
322 | {
323 | highlighter = new sh.HtmlScript(brushName);
324 | brushName = 'htmlscript';
325 | }
326 | else
327 | {
328 | var brush = findBrush(brushName);
329 |
330 | if (brush)
331 | highlighter = new brush();
332 | else
333 | continue;
334 | }
335 |
336 | code = target[propertyName];
337 |
338 | // remove CDATA from tags if it's present
339 | if (conf.useScriptTags)
340 | code = stripCData(code);
341 |
342 | // Inject title if the attribute is present
343 | if ((target.title || '') != '')
344 | params.title = target.title;
345 |
346 | params['brush'] = brushName;
347 | highlighter.init(params);
348 | element = highlighter.getDiv(code);
349 |
350 | // carry over ID
351 | if ((target.id || '') != '')
352 | element.id = target.id;
353 |
354 | target.parentNode.replaceChild(element, target);
355 | }
356 | },
357 |
358 | /**
359 | * Main entry point for the SyntaxHighlighter.
360 | * @param {Object} params Optional params to apply to all highlighted elements.
361 | */
362 | all: function(params)
363 | {
364 | attachEvent(
365 | window,
366 | 'load',
367 | function() { sh.highlight(params); }
368 | );
369 | }
370 | }; // end of sh
371 |
372 | /**
373 | * Checks if target DOM elements has specified CSS class.
374 | * @param {DOMElement} target Target DOM element to check.
375 | * @param {String} className Name of the CSS class to check for.
376 | * @return {Boolean} Returns true if class name is present, false otherwise.
377 | */
378 | function hasClass(target, className)
379 | {
380 | return target.className.indexOf(className) != -1;
381 | };
382 |
383 | /**
384 | * Adds CSS class name to the target DOM element.
385 | * @param {DOMElement} target Target DOM element.
386 | * @param {String} className New CSS class to add.
387 | */
388 | function addClass(target, className)
389 | {
390 | if (!hasClass(target, className))
391 | target.className += ' ' + className;
392 | };
393 |
394 | /**
395 | * Removes CSS class name from the target DOM element.
396 | * @param {DOMElement} target Target DOM element.
397 | * @param {String} className CSS class to remove.
398 | */
399 | function removeClass(target, className)
400 | {
401 | target.className = target.className.replace(className, '');
402 | };
403 |
404 | /**
405 | * Converts the source to array object. Mostly used for function arguments and
406 | * lists returned by getElementsByTagName() which aren't Array objects.
407 | * @param {List} source Source list.
408 | * @return {Array} Returns array.
409 | */
410 | function toArray(source)
411 | {
412 | var result = [];
413 |
414 | for (var i = 0, l = source.length; i < l; i++)
415 | result.push(source[i]);
416 |
417 | return result;
418 | };
419 |
420 | /**
421 | * Splits block of text into lines.
422 | * @param {String} block Block of text.
423 | * @return {Array} Returns array of lines.
424 | */
425 | function splitLines(block)
426 | {
427 | return block.split(/\r?\n/);
428 | }
429 |
430 | /**
431 | * Generates HTML ID for the highlighter.
432 | * @param {String} highlighterId Highlighter ID.
433 | * @return {String} Returns HTML ID.
434 | */
435 | function getHighlighterId(id)
436 | {
437 | var prefix = 'highlighter_';
438 | return id.indexOf(prefix) == 0 ? id : prefix + id;
439 | };
440 |
441 | /**
442 | * Finds Highlighter instance by ID.
443 | * @param {String} highlighterId Highlighter ID.
444 | * @return {Highlighter} Returns instance of the highlighter.
445 | */
446 | function getHighlighterById(id)
447 | {
448 | return sh.vars.highlighters[getHighlighterId(id)];
449 | };
450 |
451 | /**
452 | * Finds highlighter's DIV container.
453 | * @param {String} highlighterId Highlighter ID.
454 | * @return {Element} Returns highlighter's DIV element.
455 | */
456 | function getHighlighterDivById(id)
457 | {
458 | return document.getElementById(getHighlighterId(id));
459 | };
460 |
461 | /**
462 | * Stores highlighter so that getHighlighterById() can do its thing. Each
463 | * highlighter must call this method to preserve itself.
464 | * @param {Highilghter} highlighter Highlighter instance.
465 | */
466 | function storeHighlighter(highlighter)
467 | {
468 | sh.vars.highlighters[getHighlighterId(highlighter.id)] = highlighter;
469 | };
470 |
471 | /**
472 | * Looks for a child or parent node which has specified classname.
473 | * Equivalent to jQuery's $(container).find(".className")
474 | * @param {Element} target Target element.
475 | * @param {String} search Class name or node name to look for.
476 | * @param {Boolean} reverse If set to true, will go up the node tree instead of down.
477 | * @return {Element} Returns found child or parent element on null.
478 | */
479 | function findElement(target, search, reverse /* optional */)
480 | {
481 | if (target == null)
482 | return null;
483 |
484 | var nodes = reverse != true ? target.childNodes : [ target.parentNode ],
485 | propertyToFind = { '#' : 'id', '.' : 'className' }[search.substr(0, 1)] || 'nodeName',
486 | expectedValue,
487 | found
488 | ;
489 |
490 | expectedValue = propertyToFind != 'nodeName'
491 | ? search.substr(1)
492 | : search.toUpperCase()
493 | ;
494 |
495 | // main return of the found node
496 | if ((target[propertyToFind] || '').indexOf(expectedValue) != -1)
497 | return target;
498 |
499 | for (var i = 0, l = nodes.length; nodes && i < l && found == null; i++)
500 | found = findElement(nodes[i], search, reverse);
501 |
502 | return found;
503 | };
504 |
505 | /**
506 | * Looks for a parent node which has specified classname.
507 | * This is an alias to findElement(container, className, true).
508 | * @param {Element} target Target element.
509 | * @param {String} className Class name to look for.
510 | * @return {Element} Returns found parent element on null.
511 | */
512 | function findParentElement(target, className)
513 | {
514 | return findElement(target, className, true);
515 | };
516 |
517 | /**
518 | * Finds an index of element in the array.
519 | * @ignore
520 | * @param {Object} searchElement
521 | * @param {Number} fromIndex
522 | * @return {Number} Returns index of element if found; -1 otherwise.
523 | */
524 | function indexOf(array, searchElement, fromIndex)
525 | {
526 | fromIndex = Math.max(fromIndex || 0, 0);
527 |
528 | for (var i = fromIndex, l = array.length; i < l; i++)
529 | if(array[i] == searchElement)
530 | return i;
531 |
532 | return -1;
533 | };
534 |
535 | /**
536 | * Generates a unique element ID.
537 | */
538 | function guid(prefix)
539 | {
540 | return (prefix || '') + Math.round(Math.random() * 1000000).toString();
541 | };
542 |
543 | /**
544 | * Merges two objects. Values from obj2 override values in obj1.
545 | * Function is NOT recursive and works only for one dimensional objects.
546 | * @param {Object} obj1 First object.
547 | * @param {Object} obj2 Second object.
548 | * @return {Object} Returns combination of both objects.
549 | */
550 | function merge(obj1, obj2)
551 | {
552 | var result = {}, name;
553 |
554 | for (name in obj1)
555 | result[name] = obj1[name];
556 |
557 | for (name in obj2)
558 | result[name] = obj2[name];
559 |
560 | return result;
561 | };
562 |
563 | /**
564 | * Attempts to convert string to boolean.
565 | * @param {String} value Input string.
566 | * @return {Boolean} Returns true if input was "true", false if input was "false" and value otherwise.
567 | */
568 | function toBoolean(value)
569 | {
570 | var result = { "true" : true, "false" : false }[value];
571 | return result == null ? value : result;
572 | };
573 |
574 | /**
575 | * Opens up a centered popup window.
576 | * @param {String} url URL to open in the window.
577 | * @param {String} name Popup name.
578 | * @param {int} width Popup width.
579 | * @param {int} height Popup height.
580 | * @param {String} options window.open() options.
581 | * @return {Window} Returns window instance.
582 | */
583 | function popup(url, name, width, height, options)
584 | {
585 | var x = (screen.width - width) / 2,
586 | y = (screen.height - height) / 2
587 | ;
588 |
589 | options += ', left=' + x +
590 | ', top=' + y +
591 | ', width=' + width +
592 | ', height=' + height
593 | ;
594 | options = options.replace(/^,/, '');
595 |
596 | var win = window.open(url, name, options);
597 | win.focus();
598 | return win;
599 | };
600 |
601 | /**
602 | * Adds event handler to the target object.
603 | * @param {Object} obj Target object.
604 | * @param {String} type Name of the event.
605 | * @param {Function} func Handling function.
606 | */
607 | function attachEvent(obj, type, func, scope)
608 | {
609 | function handler(e)
610 | {
611 | e = e || window.event;
612 |
613 | if (!e.target)
614 | {
615 | e.target = e.srcElement;
616 | e.preventDefault = function()
617 | {
618 | this.returnValue = false;
619 | };
620 | }
621 |
622 | func.call(scope || window, e);
623 | };
624 |
625 | if (obj.attachEvent)
626 | {
627 | obj.attachEvent('on' + type, handler);
628 | }
629 | else
630 | {
631 | obj.addEventListener(type, handler, false);
632 | }
633 | };
634 |
635 | /**
636 | * Displays an alert.
637 | * @param {String} str String to display.
638 | */
639 | function alert(str)
640 | {
641 | window.alert(sh.config.strings.alert + str);
642 | };
643 |
644 | /**
645 | * Finds a brush by its alias.
646 | *
647 | * @param {String} alias Brush alias.
648 | * @param {Boolean} showAlert Suppresses the alert if false.
649 | * @return {Brush} Returns bursh constructor if found, null otherwise.
650 | */
651 | function findBrush(alias, showAlert)
652 | {
653 | var brushes = sh.vars.discoveredBrushes,
654 | result = null
655 | ;
656 |
657 | if (brushes == null)
658 | {
659 | brushes = {};
660 |
661 | // Find all brushes
662 | for (var brush in sh.brushes)
663 | {
664 | var info = sh.brushes[brush],
665 | aliases = info.aliases
666 | ;
667 |
668 | if (aliases == null)
669 | continue;
670 |
671 | // keep the brush name
672 | info.brushName = brush.toLowerCase();
673 |
674 | for (var i = 0, l = aliases.length; i < l; i++)
675 | brushes[aliases[i]] = brush;
676 | }
677 |
678 | sh.vars.discoveredBrushes = brushes;
679 | }
680 |
681 | result = sh.brushes[brushes[alias]];
682 |
683 | if (result == null && showAlert)
684 | alert(sh.config.strings.noBrush + alias);
685 |
686 | return result;
687 | };
688 |
689 | /**
690 | * Executes a callback on each line and replaces each line with result from the callback.
691 | * @param {Object} str Input string.
692 | * @param {Object} callback Callback function taking one string argument and returning a string.
693 | */
694 | function eachLine(str, callback)
695 | {
696 | var lines = splitLines(str);
697 |
698 | for (var i = 0, l = lines.length; i < l; i++)
699 | lines[i] = callback(lines[i], i);
700 |
701 | // include \r to enable copy-paste on windows (ie8) without getting everything on one line
702 | return lines.join('\r\n');
703 | };
704 |
705 | /**
706 | * This is a special trim which only removes first and last empty lines
707 | * and doesn't affect valid leading space on the first line.
708 | *
709 | * @param {String} str Input string
710 | * @return {String} Returns string without empty first and last lines.
711 | */
712 | function trimFirstAndLastLines(str)
713 | {
714 | return str.replace(/^[ ]*[\n]+|[\n]*[ ]*$/g, '');
715 | };
716 |
717 | /**
718 | * Parses key/value pairs into hash object.
719 | *
720 | * Understands the following formats:
721 | * - name: word;
722 | * - name: [word, word];
723 | * - name: "string";
724 | * - name: 'string';
725 | *
726 | * For example:
727 | * name1: value; name2: [value, value]; name3: 'value'
728 | *
729 | * @param {String} str Input string.
730 | * @return {Object} Returns deserialized object.
731 | */
732 | function parseParams(str)
733 | {
734 | var match,
735 | result = {},
736 | arrayRegex = XRegExp("^\\[(?' + line + '';
822 | });
823 |
824 | return str;
825 | };
826 |
827 | /**
828 | * Pads number with zeros until it's length is the same as given length.
829 | *
830 | * @param {Number} number Number to pad.
831 | * @param {Number} length Max string length with.
832 | * @return {String} Returns a string padded with proper amount of '0'.
833 | */
834 | function padNumber(number, length)
835 | {
836 | var result = number.toString();
837 |
838 | while (result.length < length)
839 | result = '0' + result;
840 |
841 | return result;
842 | };
843 |
844 | /**
845 | * Replaces tabs with spaces.
846 | *
847 | * @param {String} code Source code.
848 | * @param {Number} tabSize Size of the tab.
849 | * @return {String} Returns code with all tabs replaces by spaces.
850 | */
851 | function processTabs(code, tabSize)
852 | {
853 | var tab = '';
854 |
855 | for (var i = 0; i < tabSize; i++)
856 | tab += ' ';
857 |
858 | return code.replace(/\t/g, tab);
859 | };
860 |
861 | /**
862 | * Replaces tabs with smart spaces.
863 | *
864 | * @param {String} code Code to fix the tabs in.
865 | * @param {Number} tabSize Number of spaces in a column.
866 | * @return {String} Returns code with all tabs replaces with roper amount of spaces.
867 | */
868 | function processSmartTabs(code, tabSize)
869 | {
870 | var lines = splitLines(code),
871 | tab = '\t',
872 | spaces = ''
873 | ;
874 |
875 | // Create a string with 1000 spaces to copy spaces from...
876 | // It's assumed that there would be no indentation longer than that.
877 | for (var i = 0; i < 50; i++)
878 | spaces += ' '; // 20 spaces * 50
879 |
880 | // This function inserts specified amount of spaces in the string
881 | // where a tab is while removing that given tab.
882 | function insertSpaces(line, pos, count)
883 | {
884 | return line.substr(0, pos)
885 | + spaces.substr(0, count)
886 | + line.substr(pos + 1, line.length) // pos + 1 will get rid of the tab
887 | ;
888 | };
889 |
890 | // Go through all the lines and do the 'smart tabs' magic.
891 | code = eachLine(code, function(line)
892 | {
893 | if (line.indexOf(tab) == -1)
894 | return line;
895 |
896 | var pos = 0;
897 |
898 | while ((pos = line.indexOf(tab)) != -1)
899 | {
900 | // This is pretty much all there is to the 'smart tabs' logic.
901 | // Based on the position within the line and size of a tab,
902 | // calculate the amount of spaces we need to insert.
903 | var spaces = tabSize - pos % tabSize;
904 | line = insertSpaces(line, pos, spaces);
905 | }
906 |
907 | return line;
908 | });
909 |
910 | return code;
911 | };
912 |
913 | /**
914 | * Performs various string fixes based on configuration.
915 | */
916 | function fixInputString(str)
917 | {
918 | var br = /regexList collection.
1012 | * @return {Array} Returns a list of Match objects.
1013 | */
1014 | function getMatches(code, regexInfo)
1015 | {
1016 | function defaultAdd(match, regexInfo)
1017 | {
1018 | return match[0];
1019 | };
1020 |
1021 | var index = 0,
1022 | match = null,
1023 | matches = [],
1024 | func = regexInfo.func ? regexInfo.func : defaultAdd
1025 | pos = 0
1026 | ;
1027 |
1028 | while((match = XRegExp.exec(code, regexInfo.regex, pos)) != null)
1029 | {
1030 | var resultMatch = func(match, regexInfo);
1031 |
1032 | if (typeof(resultMatch) == 'string')
1033 | resultMatch = [new sh.Match(resultMatch, match.index, regexInfo.css)];
1034 |
1035 | matches = matches.concat(resultMatch);
1036 | pos = match.index + match[0].length;
1037 | }
1038 |
1039 | return matches;
1040 | };
1041 |
1042 | /**
1043 | * Turns all URLs in the code into tags.
1044 | * @param {String} code Input code.
1045 | * @return {String} Returns code with tags.
1046 | */
1047 | function processUrls(code)
1048 | {
1049 | var gt = /(.*)((>|<).*)/;
1050 |
1051 | return code.replace(sh.regexLib.url, function(m)
1052 | {
1053 | var suffix = '',
1054 | match = null
1055 | ;
1056 |
1057 | // We include < and > in the URL for the common cases like ' + spaces + '' : '') + line
1494 | );
1495 | }
1496 |
1497 | return html;
1498 | },
1499 |
1500 | /**
1501 | * Returns HTML for the table title or empty string if title is null.
1502 | */
1503 | getTitleHtml: function(title)
1504 | {
1505 | return title ? '| ' + this.getLineNumbersHtml(code) + ' | ' : '') 1626 | + ''
1627 | + ' '
1628 | + html
1629 | + ' '
1630 | + ' | '
1631 | + '
.*?)" +
1722 | "(?" + regex.end + ")",
1723 | "sgi"
1724 | )
1725 | };
1726 | }
1727 | }; // end of Highlighter
1728 |
1729 | return sh;
1730 | }(); // end of anonymous function
1731 |
1732 | // CommonJS
1733 | typeof(exports) != 'undefined' ? exports.VisualEventSyntaxHighlighter = VisualEventSyntaxHighlighter : null;
1734 |
1735 |
1736 |
1737 | // JS brush
1738 | ;(function()
1739 | {
1740 | // CommonJS
1741 | VisualEventSyntaxHighlighter = VisualEventSyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').VisualEventSyntaxHighlighter : null);
1742 |
1743 | function Brush()
1744 | {
1745 | var keywords = 'break case catch class continue ' +
1746 | 'default delete do else enum export extends false ' +
1747 | 'for function if implements import in instanceof ' +
1748 | 'interface let new null package private protected ' +
1749 | 'static return super switch ' +
1750 | 'this throw true try typeof var while with yield';
1751 |
1752 | var r = VisualEventSyntaxHighlighter.regexLib;
1753 |
1754 | this.regexList = [
1755 | { regex: r.multiLineDoubleQuotedString, css: 'string' }, // double quoted strings
1756 | { regex: r.multiLineSingleQuotedString, css: 'string' }, // single quoted strings
1757 | { regex: r.singleLineCComments, css: 'comments' }, // one line comments
1758 | { regex: r.multiLineCComments, css: 'comments' }, // multiline comments
1759 | { regex: /\s*#.*/gm, css: 'preprocessor' }, // preprocessor tags like #region and #endregion
1760 | { regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' } // keywords
1761 | ];
1762 |
1763 | this.forHtmlScript(r.scriptScriptTags);
1764 | };
1765 |
1766 | Brush.prototype = new VisualEventSyntaxHighlighter.Highlighter();
1767 | Brush.aliases = ['js', 'jscript', 'javascript', 'json'];
1768 |
1769 | VisualEventSyntaxHighlighter.brushes.JScript = Brush;
1770 |
1771 | // CommonJS
1772 | typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
1773 | })();
1774 |
1775 | window.VisualEventSyntaxHighlighter = VisualEventSyntaxHighlighter;
1776 |
1777 | })();
1778 |
--------------------------------------------------------------------------------