wiki.techinc.nl/resources/jquery/jquery.highlightText.js
Timo Tijhof 8d306686cf Lint: Go-go-gadget jshint! Passing entire JS code base (again).
There were still some files not passing jshint, and for files
that did, we managed to screw 'em up again.

Added more explicit settings in .jshintrc to avoid relying on a
kind of default somewhere. There are too many default-factors:
closest(.jshintrc), ~/.jshintrc, IDE/editor, node-jshint..

Added node_modules/ and extensions/ to .jshintignore.
Previously "$ jshint ." would recurse over all kinds of
unrelated code. Extensions should have their own jshint
dotfiles. When linting from Jenkins this won't be a problem as
those will be ran per repo (so when linting core it will skip extensions and when in an extension dir, the core dotfiles
don't apply as they'll be out of scope).

Some of our modules are really messy and should be refactored
to be less spaghetti-ish and have more descriptive variable
names and more manageable function-level complexity.
But for this commit, I'm keeping it as much as-is as possible,
because its hard/large enough to review as it is.

A few errors are cited below to give an impression of the kind
of warnings I addressed (for cases where the diff isn't
so obvious):

* jquery.hidpi.js: line 110, col 15, Empty block.
* mediawiki.jqueryMsg.js: line 34, col 17, Too many var statements.
* mediawiki.jqueryMsg.js: line 145, col 33, Strings must use singlequote.
* mediawiki.action.edit.js: line 74, col 73, 'selectText' is defined but never used.
* startup.js: line 19, col 22, 'isCompatible' is defined but never used.
* jquery.byteLength.test.js: line 26, col 9, Identifier 'U_00A2' is not in camel case.
* jquery.localize.test.js: line 63, col 29, 'attrs' is defined but never used.
* mediawiki.cldr.test.js: line 72, col 27, 'mw' is not defined.
* mediawiki.jscompat.test.js: line 6, col 17, Strings must use singlequote.
* mediawiki.api.parse.test.js: line 9, col 17, Strings must use singlequote.
* mediawiki.api.parse.test.js: line 7, col 15, 'mw' is not defined.
* mediawiki.api.parse.test.js: line 14, col 24, '$' is not defined.
* mediawiki.api.test.js: line 43, col 28, 'data' is defined but never used.

Other fixes:
* Add closures fix implied global errors ($, mw and more),
  and prevents local variables from becoming globals.
* Avoid jQ magic map arg etc. (per code conventions).
* Fix incorrect usage of jQuery methods (prop instead of attr,
  prop false instead of removeProp, ..).
* Unquote keys in object literals for consistency, and
  enforce single quotes (no magic quotes in javascript, as much
  as we might think "\n" and '/n' are really exactly the same).
  Chose single quotes over double quotes since that's what most
  code already had and what conventions seemed to prefer
  (both the old generic ones and the new per-lang ones since
  2011/2012).
* Enforce camelCase variable names with jshint per code
  conventions.
* $foo.on('x', fn).trigger('x') -> $foo.on('x', fn); fn()
  (No event simulation overhead, unless intended of course)
* Incorrect indentation (ignore whitespace in the diff!).
* Avoid proprietary selectors like ':first' when .eq(0)
  afterwards is just as possible (significantly faster in
  jQuery due to mostly avoiding the Sizzle engine and going
  native in modern browsers).
* When at it, convert deprecated jQuery methods to new ones.
  Mostly just .delegate(sel, type, fn) -> .on(type, sel, fn).
* Addressed whitespace here and there.

Interesting:
* mediawiki.js: local function "compare" wasn't used anymore
  (hasn't been in a while!) removed per jshint warning.

* mediawiki.special.recentchanges.js: Was a mess, only a few
  lines of code, rewritten.

Pfew, let's hope it's the last one before we lint from Jenkins!

Change-Id: I23ad60a1d804c542d9b91454aaa20ce7be4ff289
2012-11-10 12:23:43 +01:00

69 lines
2.7 KiB
JavaScript

/**
* Plugin that highlights matched word partials in a given element.
* TODO: Add a function for restoring the previous text.
* TODO: Accept mappings for converting shortcuts like WP: to Wikipedia:.
*/
( function ( $ ) {
$.highlightText = {
// Split our pattern string at spaces and run our highlight function on the results
splitAndHighlight: function ( node, pat ) {
var i,
patArray = pat.split( ' ' );
for ( i = 0; i < patArray.length; i++ ) {
if ( patArray[i].length === 0 ) {
continue;
}
$.highlightText.innerHighlight( node, patArray[i] );
}
return node;
},
// scans a node looking for the pattern and wraps a span around each match
innerHighlight: function ( node, pat ) {
var i, match, pos, spannode, middlebit, middleclone;
// if this is a text node
if ( node.nodeType === 3 ) {
// TODO - need to be smarter about the character matching here.
// non latin characters can make regex think a new word has begun: do not use \b
// http://stackoverflow.com/questions/3787072/regex-wordwrap-with-utf8-characters-in-js
// look for an occurrence of our pattern and store the starting position
match = node.data.match( new RegExp( '(^|\\s)' + $.escapeRE( pat ), 'i' ) );
if ( match ) {
pos = match.index + match[1].length; // include length of any matched spaces
// create the span wrapper for the matched text
spannode = document.createElement( 'span' );
spannode.className = 'highlight';
// shave off the characters preceding the matched text
middlebit = node.splitText( pos );
// shave off any unmatched text off the end
middlebit.splitText( pat.length );
// clone for appending to our span
middleclone = middlebit.cloneNode( true );
// append the matched text node to the span
spannode.appendChild( middleclone );
// replace the matched node, with our span-wrapped clone of the matched node
middlebit.parentNode.replaceChild( spannode, middlebit );
}
// if this is an element with childnodes, and not a script, style or an element we created
} else if ( node.nodeType === 1 && node.childNodes && !/(script|style)/i.test( node.tagName )
&& !( node.tagName.toLowerCase() === 'span' && node.className.match( /\bhighlight/ ) ) ) {
for ( i = 0; i < node.childNodes.length; ++i ) {
// call the highlight function for each child node
$.highlightText.innerHighlight( node.childNodes[i], pat );
}
}
}
};
$.fn.highlightText = function ( matchString ) {
return this.each( function () {
var $el = $( this );
$el.data( 'highlightText', { originalText: $el.text() } );
$.highlightText.splitAndHighlight( this, matchString );
} );
};
}( jQuery ) );