Last active
December 3, 2020 21:05
-
-
Save chrisciampoli/8a5dac6473652a7dd66b to your computer and use it in GitHub Desktop.
My plugin version
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! | |
* URL Highlighter by Christopher Ciampoli (2014) | |
* | |
! | |
*/ | |
(function($) { | |
$.fn.highlightit = function() { | |
$this = this; | |
var debug = false; | |
/** | |
* Handler for keyup, and spacebar | |
*/ | |
$(this).on('keyup', function(jqEvent) { | |
$this.node = $this.getCaret(); | |
if(jqEvent.keyCode == 86) { | |
jqEvent.preventDefault(); | |
$this.styleUrls($(this)); | |
} | |
if(jqEvent.keyCode == 32) { | |
jqEvent.preventDefault(); | |
$this.styleUrls($(this)); | |
$this.setCaret($this.node, $this.node.pos, $(this)); | |
} | |
}); | |
/** | |
* @name StyleUrls | |
* @param (Element) self | |
* | |
*/ | |
this.styleUrls = function(self) { | |
var message = $(self), | |
messageValue = message.text(), | |
range, | |
selection; | |
message.text(message.text()); | |
messageValue.replace(/(^|\s)((https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)/gim, function (val) { | |
if (!$('span[data-val="' + val + '"]').length) { | |
messageValue = messageValue.replace(val, '<span class="highlight_url" data-val="' + val + '">' + val + '</span>'); | |
message.html(messageValue); | |
} | |
}); | |
$(self).focus(); | |
if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { | |
range = document.createRange(); | |
range.selectNodeContents(message[0]); | |
range.collapse(false); | |
selection = window.getSelection(); | |
selection.removeAllRanges(); | |
selection.addRange(range); | |
} else if (typeof document.body.createTextRange != "undefined") { | |
var textRange = document.body.createTextRange(); | |
textRange.moveToElementText(self); | |
textRange.collapse(false); | |
textRange.select(); | |
} | |
}; | |
/** | |
* @name GetCaret | |
* @desc Gets the current node and position of the caret | |
* @returns (Object) {node: the node, pos: position of the caret} | |
* | |
*/ | |
this.getCaret = function() { | |
var caretOffset = 0; | |
if (typeof window.getSelection != "undefined") { | |
var range = window.getSelection().getRangeAt(0); | |
var preCaretRange = range.cloneRange(); | |
s = window.getSelection(); | |
node = s.focusNode; | |
preCaretRange.selectNodeContents(node); | |
preCaretRange.setEnd(range.endContainer, range.endOffset); | |
caretOffset = preCaretRange.toString().length; | |
} else if (typeof document.selection != "undefined" && document.selection.type != "Control") { | |
var textRange = document.selection.createRange(); | |
var preCaretTextRange = document.body.createTextRange(); | |
preCaretTextRange.moveToElementText(node); | |
preCaretTextRange.setEndPoint("EndToEnd", textRange); | |
caretOffset = preCaretTextRange.text.length; | |
} | |
return { | |
node: node, | |
pos: caretOffset | |
}; | |
}; | |
/** | |
* @name SetCaret | |
* @desc Sets the caret to a position within the passed node | |
* @param (Element) node | |
* @param (Int) pos | |
* @param (Element) self | |
* | |
*/ | |
this.setCaret = function(node, pos, self) { | |
var el = self,//document.getElementById(self.context.attributes.id.value), | |
range = document.createRange(), | |
sel = window.getSelection(), | |
theNodes = $(el).context.childNodes, | |
theIndex = ($this.findIndex(theNodes, node.node.data)); | |
// After any urls | |
if ( theIndex > 0 ) { | |
console.log('In one'); | |
range.setStart(theNodes[theIndex], pos); | |
// Before any urls | |
} else if (theIndex === 0) { | |
console.log('In Two'); | |
range.setStart(theNodes[0], pos); | |
// At the urls | |
} else { | |
console.log('In Three'); | |
var htmlIndex = $this.findIndexByHtml(theNodes, $(node.node).text()); | |
if (null != htmlIndex) { | |
htmlIndex += 1; | |
} | |
try { | |
if (pos <= 2) { | |
var htmlIndex = $this.findIndexByHtml(theNodes, $(node.node).text()); | |
htmlIndex -= 1; | |
range.setStartAfter(theNodes[htmlIndex]); | |
} else { | |
range.selectNodeContents(node.node); | |
var htmlIndex = $this.findIndexByHtml(theNodes, $(node.node).text()); | |
range.setStart(theNodes[htmlIndex], range.endOffset-1); | |
} | |
} catch (e) { | |
//console.log(e.toString()); | |
return; | |
} | |
} | |
range.collapse(true); | |
sel.removeAllRanges(); | |
sel.addRange(range); | |
el.focus(); | |
}; | |
/** | |
* @name FindIndex | |
* @param (Array) arraytosearch | |
* @param (String) key | |
* @desc Finds the index using text within an array of objects | |
* @return (Int) the index found | |
*/ | |
this.findIndex = function(arraytosearch, key) { | |
for (var i = 0; i < arraytosearch.length; i++) { | |
if (key == arraytosearch[i].data) { | |
return i; | |
} | |
} | |
return null; | |
}; | |
/** | |
* @name FindIndexByHtml | |
* @param (Array) arraytosearch | |
* @param (String) key - html() | |
* @desc Finds the index using html within an array of objects | |
* @return (Int) the index found | |
*/ | |
this.findIndexByHtml = function(arraytosearch, key) { | |
for (var i = 0; i < arraytosearch.length; i++) { | |
if (key.replace(/\s+/g, '') == $(arraytosearch[i]).text().replace(/\s+/g, '')) { | |
return i; | |
} | |
} | |
return null; | |
}; | |
}; | |
})(jQuery); | |
$('.facebook_share').highlightit(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment