so that the textarea and
- // overlay don't get out if sync when the textarea contains something
- // HTML (e.g. "&" or
).
- text = htmlDecode(text);
-
- var matches = [];
- $.each(this.settings.words, function(color, words) {
- var wordsRe = htmlDecode(words.join("|"));
- var re = that.spacer + '(' + wordsRe + ')' + that.spacer;
- var regex = new RegExp(re, that.regParam);
-
- var wordMatches = text.match(regex);
- if (wordMatches) {
- var evaluated = [];
- $.each(words, function(index, match) {
- match = htmlDecode(match);
-
- matches.push(match);
- if (evaluated.indexOf(match) === -1) {
- text = text.replace(
- new RegExp(match, that.regParam),
- function(innerMatch, start, contents) {
- var encodedMatch = innerMatch
- .replace(/[&"<>]/g, function (c) {
- return {
- '&': "&",
- '"': """,
- '<': "<",
- '>': ">"
- }[c];
- });
-
- return '' + encodedMatch + '';
- }
- );
-
- evaluated.push(match);
- }
- });
- }
- });
-
- $.each(this.settings.ranges, function(i, range) {
- if (range.start < text.length) {
- text = Utilities.strInsert(text, range.end, '');
-
- var mark = '= left && mouseY >= top && mouseX <= left + width && mouseY <= top + height) {
- mouseOverElement = this;
- return;
- }
- });
-
- if(mouseOverElement != lastMouseOverElement) {
- if(lastMouseOverElement != null) {
- $(lastMouseOverElement).trigger('mouseout');
- }
- if(mouseOverElement != null) {
- $(mouseOverElement).trigger('mouseover');
- }
- }
- });
-
- Highlighter.documentEventsBound = true;
- };
-
- /*
- * Attach event listeners
- */
- Highlighter.prototype.bindEvents = function() {
- if (this.active) {
- return;
- }
- this.active = true;
-
- var that = this;
-
- // prevent positioning errors by always focusing the textarea
- this.$highlighter.bind({
- 'this.highlighter': function() {
- that.$el.focus();
- }
- });
-
- // add triggers to textarea
- this.$el.bind({
- 'input.highlightTextarea': Utilities.throttle(function() {
- this.highlight();
- }, 100, this),
-
- 'resize.highlightTextarea': Utilities.throttle(function() {
- this.updateSizePosition(true);
- }, 50, this),
-
- 'scroll.highlightTextarea select.highlightTextarea': Utilities.throttle(function() {
- this.updateSizePosition();
- }, 50, this)
- });
-
- if (this.isInput) {
- this.$el.bind({
- // Prevent Cmd-Left Arrow and Cmd-Right Arrow on Mac strange behavior
- 'keydown.highlightTextarea keypress.highlightTextarea keyup.highlightTextarea': function() {
- setTimeout($.proxy(that.updateSizePosition, that), 1);
- },
-
- // Force Chrome behavior on all browsers: reset input position on blur
- 'blur.highlightTextarea': function() {
- this.value = this.value;
- this.scrollLeft = 0;
- that.updateSizePosition.call(that);
- }
- });
- }
- };
-
- /*
- * Detach event listeners
- */
- Highlighter.prototype.unbindEvents = function() {
- if (!this.active) {
- return;
- }
- this.active = false;
-
- this.$highlighter.off('.highlightTextarea');
- this.$el.off('.highlightTextarea');
- };
-
- /*
- * Update CSS of wrapper and containers
- */
- Highlighter.prototype.updateCss = function() {
- // the main container has the same size and position than the original textarea
- Utilities.cloneCss(this.$el, this.$main, [
- 'float','vertical-align'
- ]);
- this.$main.css({
- 'width': this.$el.outerWidth(true),
- 'height': this.$el.outerHeight(true)
- });
-
- // the highlighter container is positionned at "real" top-left corner of the textarea and takes its background
- Utilities.cloneCss(this.$el, this.$container, [
- 'background-image','background-color','background-position','background-repeat',
- 'background-origin','background-clip','background-size','background-attachment',
- 'padding-top','padding-right','padding-bottom','padding-left'
- ]);
- this.$container.css({
- 'top': Utilities.toPx(this.$el.css('margin-top')) + Utilities.toPx(this.$el.css('border-top-width')),
- 'left': Utilities.toPx(this.$el.css('margin-left')) + Utilities.toPx(this.$el.css('border-left-width')),
- 'width': this.$el.width(),
- 'height': this.$el.height()
- });
-
- // the highlighter has the same size than the "inner" textarea and must have the same font properties
- Utilities.cloneCss(this.$el, this.$highlighter, [
- 'font-size','font-family','font-style','font-weight','font-variant','font-stretch',
- 'vertical-align','word-spacing','text-align','letter-spacing', 'text-rendering'
- ]);
-
- // now make the textarea transparent to see the highlighter through
- this.$el.css({
- 'background': 'none'
- });
- };
-
- /*
- * Apply jQueryUi Resizable if available
- */
- Highlighter.prototype.applyResizable = function() {
- if (jQuery.ui) {
- var resizableOptionsDefaults = {
- 'handles': 'se',
- 'resize': Utilities.throttle(function() {
- this.updateSizePosition(true);
- }, 50, this)
- };
- var resizableOptions = $.extend({}, resizableOptionsDefaults, this.settings.resizableOptions);
- this.$el.resizable(resizableOptions);
- }
- };
-
- /*
- * Update size and position of the highlighter
- * @param forced {boolean} true to resize containers
- */
- Highlighter.prototype.updateSizePosition = function(forced) {
- // resize containers
- if (forced) {
- this.$main.css({
- 'width': this.$el.outerWidth(true),
- 'height': this.$el.outerHeight(true)
- });
- this.$container.css({
- 'width': this.$el.width(),
- 'height': this.$el.height()
- });
- }
-
- var padding = 0, width;
-
- if (!this.isInput) {
- // account for vertical scrollbar width
- if (this.$el.css('overflow') == 'scroll' ||
- this.$el.css('overflow-y') == 'scroll' ||
- (
- this.$el.css('overflow') != 'hidden' &&
- this.$el.css('overflow-y') != 'hidden' &&
- this.$el[0].clientHeight < this.$el[0].scrollHeight
- )
- ) {
- padding = this.scrollbarWidth;
- }
-
- width = this.$el.width()-padding;
- }
- else {
- // TODO: There's got to be a better way of going about this than just using 99999px...
- width = 99999;
- }
-
- this.$highlighter.css({
- 'width': width,
- 'height': this.$el.height() + this.$el.scrollTop(),
- 'top': -this.$el.scrollTop(),
- 'left': -this.$el.scrollLeft()
- });
- };
-
-
- // Utilities CLASS DEFINITON
- // ===============================
- var Utilities = function(){};
-
- /*
- * Get the scrollbar with on this browser
- */
- Utilities.getScrollbarWidth = function() {
- var parent = $('').appendTo('body'),
- child = parent.children(),
- width = child.innerWidth() - child.height(100).innerWidth();
-
- parent.remove();
-
- return width;
- };
-
- /*
- * Copy a list of CSS properties from one object to another
- * @param from {jQuery}
- * @param to {jQuery}
- * @param what {string[]}
- */
- Utilities.cloneCss = function(from, to, what) {
- for (var i=0, l=what.length; i