Can't figure out how to select items in the Facebook newsfeed for a Chome Extension - facebook

I'm working on a Chrome extension that inserts a button on every item in the Facebook newsfeed. I started off by using Tampermonkey to install a script that installs a button next to the subscribe video of every Youtube page (chrome-extension://dhdgffkkebhmkfjojejmpbldmpobfkfo/ask.html?aid=994ff494-1242-452f-a334-1bd616e18bb6), which worked fine.
Then I tried to modify it so it acts on the Facebook newsfeed, rather than the Youtube subscribe button. I changed the // match to go to facebook.com and targeting it to go after class='_3vuz', the Facebook div that houses the "like" button. But nothing happens when I go on Facebook; no button appears.
Here's my Tampermonkey code. Many thanks!
// ==UserScript==
// #name Facebook Fake News Button
// #namespace https://www.youtubeinmp3.com
// #version 1.2.2
// #description Adds a button to show you whether a Facebook article is true
// #author Ilana
// #match https://www.facebook.com/*
// #run-at document-end
// ==/UserScript==
function polymerInject(){
/* Create button */
var buttonDiv = document.createElement("div");
buttonDiv.style.width = "100%";
buttonDiv.id = "parentButton";
var addButton = document.createElement("button");
addButton.appendChild(document.createTextNode("Fake News"));
if(typeof(document.getElementById("iframeDownloadButton")) != 'undefined' && document.getElementById("iframeDownloadButton") !== null){
document.getElementById("iframeDownloadButton").remove();
}
addButton.style.width = "100%";
addButton.style.backgroundColor = "#181717";
addButton.style.color = "white";
addButton.style.textAlign = "center";
addButton.style.padding = "10px 0";
addButton.style.marginTop = "5px";
addButton.style.fontSize = "14px";
addButton.style.border = "0";
addButton.style.cursor = "pointer";
addButton.style.borderRadius = "2px";
addButton.style.fontFamily = "Roboto, Arial, sans-serif";
addButton.onclick = function () {
this.remove();
/* Add large button on click */
var addIframe = document.createElement("iframe");
addIframe.src = '//www.convertmp3.io/widget/button/?color=ba1717&video=' + window.location.href;
addIframe.style.width = "100%";
addIframe.style.border = "none";
addIframe.style.height = "60px";
addIframe.style.marginTop = "10px";
addIframe.style.overflow = "hidden";
addIframe.scrolling = "no";
addIframe.id = "iframeDownloadButton";
var targetElement = document.querySelectorAll("[id='meta']");
for(var i = 0; i < targetElement.length; i++){
if(targetElement[i].className.indexOf("ytd-watch") > -1){
targetElement[i].insertBefore(addIframe, targetElement[i].childNodes[0]);
}
}
};
buttonDiv.appendChild(addButton);
/* Find and add to target */
var targetElement = document.querySelectorAll("[class='_3vuz']");
for(var i = 0; i < targetElement.length; i++){
if(targetElement[i].className.indexOf("ytd-video-secondary-info-renderer") > -1){
targetElement[i].appendChild(buttonDiv);
}
}
/* Fix hidden description bug */
var descriptionBox = document.querySelectorAll("ytd-video-secondary-info-renderer");
if(descriptionBox[0].className.indexOf("loading") > -1){
descriptionBox[0].classList.remove("loading");
}
}
function standardInject() {
var pagecontainer=document.getElementById('page-container');
if (!pagecontainer) return;
if (/^https?:\/\/www\.facebook.com\/watch\?/.test(window.location.href)) run();
var isAjax=/class[\w\s"'-=]+spf\-link/.test(pagecontainer.innerHTML);
var logocontainer=document.getElementById('logo-container');
if (logocontainer && !isAjax) { // fix for blocked videos
isAjax=(' '+logocontainer.className+' ').indexOf(' spf-link ')>=0;
}
var content=document.getElementById('content');
if (isAjax && content) { // Ajax UI
var mo=window.MutationObserver||window.WebKitMutationObserver;
if(typeof mo!=='undefined') {
var observer=new mo(function(mutations) {
mutations.forEach(function(mutation) {
if(mutation.addedNodes!==null) {
for (var i=0; i<mutation.addedNodes.length; i++) {
if (mutation.addedNodes[i].id=='watch7-container' ||
mutation.addedNodes[i].id=='watch7-main-container') { // old value: movie_player
run();
break;
}
}
}
});
});
observer.observe(content, {childList: true, subtree: true}); // old value: pagecontainer
} else { // MutationObserver fallback for old browsers
pagecontainer.addEventListener('DOMNodeInserted', onNodeInserted, false);
}
}
}
function onNodeInserted(e) {
if (e && e.target && (e.target.id=='watch7-container' ||
e.target.id=='watch7-main-container')) { // old value: movie_player
run();
}
}
function finalButton(){
var buttonIframeDownload = document.createElement("iframe");
buttonIframeDownload.src = '//www.convertmp3.io/widget/button/?color=ba1717&video=' + window.location.href;
buttonIframeDownload.id = "buttonIframe";
buttonIframeDownload.style.width = "100%";
buttonIframeDownload.style.height = "60px";
buttonIframeDownload.style.paddingTop = "20px";
buttonIframeDownload.style.paddingBottom = "20px";
buttonIframeDownload.style.overflow = "hidden";
buttonIframeDownload.scrolling = "no";
document.getElementById("watch-header").appendChild(buttonIframeDownload);
}
function run(){
if(!document.getElementById("parentButton") && window.location.href.substring(0, 25).indexOf("facebook.com") > -1 && window.location.href.indexOf("watch?") > -1){
var parentButton = document.createElement("div");
parentButton.className = "yt-uix-button yt-uix-button-default";
parentButton.id = "parentButton";
parentButton.style.height = "23px";
parentButton.style.marginLeft = "28px";
parentButton.style.paddingBottom = "1px";
parentButton.onclick = function () {
this.remove();
finalButton();
};
document.getElementById("watch7-user-header").appendChild(parentButton);
var childButton = document.createElement("span");
childButton.appendChild(document.createTextNode("Download MP3"));
childButton.className = "yt-uix-button-content";
childButton.style.lineHeight = "25px";
childButton.style.fontSize = "12px";
parentButton.appendChild(childButton);
}
}
if(document.getElementById("polymer-app") || document.getElementById("masthead") || window.Polymer){
setInterval(function(){
if(window.location.href.indexOf("watch?v=") < 0){
return false;
}
if(document.getElementById("count") && document.getElementById("parentButton") === null){
polymerInject();
}
}, 100);
}
else{
standardInject();
}

Related

How would I make only one tab open at a time in this accordion?

The original accordion is from the W3schools site. https://www.w3schools.com/howto/howto_js_accordion.asp.
I am trying to figure out how to only have one tab open a time? Any help would be greatly appreciated. Thanks.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
Answering my own question.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
var elems = document.getElementsByClassName("accordion");
for(var it of elems) {
it.classList.remove("active");
it.nextElementSibling.style.maxHeight = null;
}
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
this.nextUntil().addClass( "close" );
}
});
}

Accordion Native Bootstrap

I have a problem with the accordion in Bootstrap Native. Everything works fine except for one thing. After expanding other .collapsed accordion, the class is not added to the former that was developed. I've tried several ways and still nothing. Adding the collapsed class is addClass (element, collapsed); just the other way removeClass ...
Below JS file:
// event targets and constants
var accordion = null, collapse = null, self = this,
isAnimating = false, // when true it will prevent click handlers
accordionData = element[getAttribute]('data-parent'),
// component strings
component = 'collapse',
collapsed = 'collapsed',
test = 'test'
// private methods
openAction = function(collapseElement) {
bootstrapCustomEvent.call(collapseElement, showEvent, component);
isAnimating = true;
addClass(collapseElement,collapsing);
addClass(collapseElement,showClass);
addClass(element,collapsed);
setTimeout(function() {
collapseElement[style][height] = getMaxHeight(collapseElement) + 'px';
(function(){
emulateTransitionEnd(collapseElement, function(){
isAnimating = false;
collapseElement[setAttribute](ariaExpanded,'true');
removeClass(collapseElement,collapsing);
collapseElement[style][height] = '';
bootstrapCustomEvent.call(collapseElement, shownEvent, component);
});
}());
}, 20);
},
closeAction = function(collapseElement) {
bootstrapCustomEvent.call(collapseElement, hideEvent, component);
isAnimating = true;
collapseElement[style][height] = getMaxHeight(collapseElement) + 'px';
setTimeout(function() {
addClass(collapseElement,collapsing);
collapseElement[style][height] = '0px';
(function() {
emulateTransitionEnd(collapseElement, function(){
isAnimating = false;
collapseElement[setAttribute](ariaExpanded,'false');
removeClass(collapseElement,collapsing);
removeClass(collapseElement,showClass);
collapseElement[style][height] = '';
bootstrapCustomEvent.call(collapseElement, hiddenEvent, component);
});
}());
},20);
},
getTarget = function() {
var href = element.href && element[getAttribute]('href'),
parent = element[getAttribute](dataTarget),
id = href || ( parent && targetsReg.test(parent) ) && parent;
return id && queryElement(id);
};
// public methods
this.toggle = function(e) {
e.preventDefault();
if (isAnimating) return;
if (!hasClass(collapse,showClass)) {
self.show();
} else {
self.hide();
}
};
this.hide = function() {
closeAction(collapse);
addClass(element,collapsed);
//jak się zwija dodaje klase
};
this.show = function() {
openAction(collapse);
removeClass(element,collapsed);
//jak się rozwija usuwa klase
if ( accordion !== null ) {
var activeCollapses = getElementsByClassName(accordion,component+' '+showClass);
for (var i=0, al=activeCollapses[length]; i<al; i++) {
if ( activeCollapses[i] !== collapse) closeAction(activeCollapses[i]);
}
}
};
// init
if ( !(stringCollapse in element ) ) { // prevent adding event handlers twice
on(element, clickEvent, this.toggle);
}
collapse = getTarget();
accordion = queryElement(options.parent) || accordionData && getClosest(element, accordionData);
element[stringCollapse] = this;
};
As you can see the code is not added to the previously developed(<a href...) .collapsed accordion.

Can't get tumblr feed to show up

Here is the Script i'm using to stream my tumblr blog posts to my website, i have the correct API Key, and Base host name, still nothing appears. Is there some other information I'm bypassing ? any help will be greatly appreciated.
<script type="text/javascript">
var $_api_key = 'PhLtoFx1aCBtu9IG3pIuT9BPd0Vxb602nPZtdMKxHvHM89VH28',
$_base_hostname = 'http://amongtheprimeblog.tumblr.com',
$_full_width = 1170;
$_rows = 2
$_cols = 3;
$_min_width = $_full_width / $_cols,
$_nsfw_tag = 'nsfw';
$_display_limit = $_rows * $_cols,
$_post_limit = $_display_limit * 2,
$_photos_api = 'https://api.tumblr.com/v2/blog/'+$_base_hostname+'/posts/photo?limit='+$_post_limit+'&api_key='+$_api_key,
jQuery.ajax($_photos_api,
{
dataType: 'jsonp',
success: function ($_posts) {
//console.log($_posts);
var $_photos = [],
$_displayed = 0 ;
for(var i=0; i < $_post_limit; i++) {
var $_post_url = $_posts.response.posts[i].post_url.replace('http://','https://'),
$_tag_count = $_posts.response.posts[i].tags.length,
$_photo_count = $_posts.response.posts[i].photos[0].alt_sizes.length,
$_post_photo_big = $_posts.response.posts[i].photos[0].original_size.url.replace('http://','https://'),
$_post_photo_big_width = $_posts.response.posts[i].photos[0].original_size.width,
$_post_photo_big_height = $_posts.response.posts[i].photos[0].original_size.height,
$_can_display = true;
// Check NSFW to keep Adroll happy!
for (var k=0; k < $_tag_count; k++ ){
if($_posts.response.posts[i].tags[k] == $_nsfw_tag) {
$_can_display = false;
}
}
// Iterate for most suitable image size.
if($_can_display) {
for (var j=0; j < $_photo_count; j++ ) {
if($_posts.response.posts[i].photos[0].alt_sizes[j].width > $_min_width) {
$_post_photo = $_posts.response.posts[i].photos[0].alt_sizes[j].url.replace('http://','https://');
} else {
break;
}
}
$_photos.push('<a id="tumblr_'+i+'" class="tumblr_post" href="'+$_post_url+'" target="_blank" data-src-big="'+$_post_photo_big+'" data-src-big-width="'+$_post_photo_big_width+'" data-src-big-height="'+$_post_photo_big_height+'"><img src="'+$_post_photo+'"/></a>');
$_displayed++;
if( $_displayed == $_display_limit) {
break;
}
}
}
jQuery('#tumblr_images').html($_photos.join(''));
},
}
);
function loadTumblrModal(id) {
var $_post = jQuery('#'+id),
$_post_next = $_post.next('.tumblr_post').attr('id'),
$_post_prev = $_post.prev('.tumblr_post').attr('id'),
$_post_link = $_post.attr('href'),
$_modal = jQuery('#tumblrModal'),
$_post_photo_src = $_post.attr('data-src-big').replace('http://','https://'),
$_post_photo_height = parseInt($_post.attr('data-src-big-height')),
$_post_photo_width = parseInt($_post.attr('data-src-big-width')),
$_post_photo_ratio = $_post_photo_width / $_post_photo_height,
$_window_height = jQuery(window).height(),
$_dialog_padding = 20,
$_dialog_margin = 20,
$_dialog_height = jQuery(window).height() - ($_dialog_margin * 2),
$_follow_iframe = '<iframe class="follow-button " src="https://platform.tumblr.com/v1/follow_button.html?button_type=1&tumblelog=theiloveuglyblog&color_scheme=dark" frameborder="0" scrolling="no" width="118" height="25"></iframe>';
// Re-Calibrate Dialog if Image is smaller than Window
if($_post_photo_height < $_dialog_height) {
$_dialog_height = $_post_photo_height;
}
// Set Dialog & Image Dimensions
var $_image_height = $_dialog_height - ($_dialog_padding *2),
$_image_width = $_image_height * $_post_photo_ratio,
$_dialog_width = $_image_width + ($_dialog_padding * 2);
// Force First/Last if Undefined for Next/Prev. Creates looping
if(typeof $_post_next === 'undefined') {
$_post_next = $_post.parent().find('.tumblr_post').first().attr('id');
}
if(typeof $_post_prev === 'undefined') {
$_post_prev = $_post.parent().find('.tumblr_post').last().attr('id');
}
// FireUp all the Modal
$_modal.find('.modal-dialog').css({
"width" : $_dialog_width + 'px',
"height" : $_dialog_height + 'px',
"margin-left" : -($_dialog_width/2) + 'px',
"margin-top" : -($_dialog_height/2) + 'px',
});
$_modal.find('.tumblr_img').html('<img src="'+$_post_photo_src+'" width="'+$_image_width+'" height="'+$_image_height+'"/>');
$_modal.find('.tumblr_iframe').html($_follow_iframe);
$_modal.find('#tumblr-next').attr('data-id',$_post_next);
$_modal.find('#tumblr-prev').attr('data-id',$_post_prev);
}
jQuery('#tumblr_images').on('click','a',function(e){
var $_modal = jQuery('#tumblrModal');
e.preventDefault();
loadTumblrModal(jQuery(this).attr('id'));
$_modal.modal('show');
});
jQuery(document).on('click','.tumblrLink',function(e){
loadTumblrModal(jQuery(this).attr('data-id'));
});
</script>

Custom Menu Script AssistanceNeeded

I am using a custom menu extension from Magento. I have one issue. There is a popup dropdown box that appears on the menu. When I use firebug to trace the coding I find this:
<div id="popup6" class="wp-custom-menu-popup" onmouseover="wpPopupOver(this, event, 'popup6', 'menu6')" onmouseout="wpHideMenuPopup(this, event, 'popup6', 'menu6')" style="display: none; top: 20px; left: 20px; z-index: 10000;">
I cannot find this code any where in the files from the extension so I tracked down this:
<script type="text/javascript">
//<![CDATA[
var CUSTOMMENU_POPUP_WIDTH = <?php echo Mage::getStoreConfig('custom_menu/popup/width') + 0; ?>;
var CUSTOMMENU_POPUP_TOP_OFFSET = <?php echo Mage::getStoreConfig('custom_menu/popup/top_offset') + 0; ?>;
var CUSTOMMENU_POPUP_DELAY_BEFORE_DISPLAYING = <?php echo Mage::getStoreConfig('custom_menu/popup/delay_displaying') + 0; ?>;
var CUSTOMMENU_POPUP_DELAY_BEFORE_HIDING = <?php echo Mage::getStoreConfig('custom_menu/popup/delay_hiding') + 0; ?>;
var CUSTOMMENU_RTL_MODE = <?php echo $_rtl; ?>;
var wpCustommenuTimerShow = {};
var wpCustommenuTimerHide = {};
//]]>
I need to change the top:20px where should I look for this? Its not in the js file and not in the css file... Cannot find it anywhere. Any ideas? I am a beginer! From my understanding it would have to be the JS file, I am not sure how to read it. JS is here:
function wpShowMenuPopup(objMenu, popupId)
{
if (typeof wpCustommenuTimerHide[popupId] != 'undefined') clearTimeout(wpCustommenuTimerHide[popupId]);
objMenu = $(objMenu.id); var popup = $(popupId); if (!popup) return;
wpCustommenuTimerShow[popupId] = setTimeout(function() {
popup.style.display = 'block';
objMenu.addClassName('active');
var popupWidth = CUSTOMMENU_POPUP_WIDTH;
if (!popupWidth) popupWidth = popup.getWidth();
var pos = wpPopupPos(objMenu, popupWidth);
popup.style.top = pos.top + 'px';
popup.style.left = pos.left + 'px';
wpSetPopupZIndex(popup);
if (CUSTOMMENU_POPUP_WIDTH)
popup.style.width = CUSTOMMENU_POPUP_WIDTH + 'px';
// --- Static Block width ---
var block2 = $(popupId).select('div.block2');
if (typeof block2[0] != 'undefined') {
var wStart = block2[0].id.indexOf('_w');
if (wStart > -1) {
var w = block2[0].id.substr(wStart+2);
} else {
var w = 0;
$(popupId).select('div.block1 div.column').each(function(item) {
w += $(item).getWidth();
});
}
//console.log(w);
if (w) block2[0].style.width = w + 'px';
}
}, CUSTOMMENU_POPUP_DELAY_BEFORE_DISPLAYING);
}
function wpHideMenuPopup(element, event, popupId, menuId)
{
if (typeof wpCustommenuTimerShow[popupId] != 'undefined') clearTimeout(wpCustommenuTimerShow[popupId]);
element = $(element.id); var popup = $(popupId); if (!popup) return;
var current_mouse_target = null;
if (event.toElement) {
current_mouse_target = event.toElement;
} else if (event.relatedTarget) {
current_mouse_target = event.relatedTarget;
}
wpCustommenuTimerHide[popupId] = setTimeout(function() {
if (!wpIsChildOf(element, current_mouse_target) && element != current_mouse_target) {
if (!wpIsChildOf(popup, current_mouse_target) && popup != current_mouse_target) {
popup.style.display = 'none';
$(menuId).removeClassName('active');
}
}
}, CUSTOMMENU_POPUP_DELAY_BEFORE_HIDING);
}
function wpPopupOver(element, event, popupId, menuId)
{
if (typeof wpCustommenuTimerHide[popupId] != 'undefined') clearTimeout(wpCustommenuTimerHide[popupId]);
}
function wpPopupPos(objMenu, w)
{
var pos = objMenu.cumulativeOffset();
var wraper = $('custommenu');
var posWraper = wraper.cumulativeOffset();
var xTop = pos.top - posWraper.top
if (CUSTOMMENU_POPUP_TOP_OFFSET) {
xTop += CUSTOMMENU_POPUP_TOP_OFFSET;
} else {
xTop += objMenu.getHeight();
}
var res = {'top': xTop};
if (CUSTOMMENU_RTL_MODE) {
var xLeft = pos.left - posWraper.left - w + objMenu.getWidth();
if (xLeft < 0) xLeft = 0;
res.left = xLeft;
} else {
var wWraper = wraper.getWidth();
var xLeft = pos.left - posWraper.left;
if ((xLeft + w) > wWraper) xLeft = wWraper - w;
if (xLeft < 0) xLeft = 0;
res.left = xLeft;
}
return res;
}
function wpIsChildOf(parent, child)
{
if (child != null) {
while (child.parentNode) {
if ((child = child.parentNode) == parent) {
return true;
}
}
}
return false;
}
function wpSetPopupZIndex(popup)
{
$$('.wp-custom-menu-popup').each(function(item){
item.style.zIndex = '9999';
});
popup.style.zIndex = '10000';
}
enter code here
There is an option in custom menu settings - top offset, may be this option defines top: 20px; attribute.

how to highlight user selected text within a piece of text which has already been highlighted?

I have a page where I am displaying some text in a div and I need to highlight this text in certain parts. I have done this by surrounding the text I need to highlight with a tag and appropriate css styling.
E.g.
<div>
My text will look like this with <span class="highlight">highlighted bits</span> in it.
</div>
This works fine. However, another requirement for this page is that the user must be able to select texts, click a button, and the selected text must be highlighted too.
The problem I have is when trying to identify the range of the selected text to grab (using window.getSelection.getRangeAt(0)), this gives me the range which resets after every <span> tag in the text, not from the beginning of the text.
For those who would like to know in the future this is how I did it:
jQuery.fn.highlight = function(startOffset,endOffset,type) {
function innerHighlight(node, startOffset,endOffset) {
var calledStartOffset = parseInt(startOffset);
var startOffsetNode=getChildNodeForOffset(node,parseInt(startOffset));
var endOffsetNode=getChildNodeForOffset(node,parseInt(endOffset));
startOffset = resizeOffsetForNode(startOffsetNode,parseInt(startOffset));
if (startOffsetNode == endOffsetNode){
endOffset = resizeOffsetForNode(endOffsetNode,parseInt(endOffset));
highlightSameNode(startOffsetNode, parseInt(startOffset),parseInt(endOffset),type,calledStartOffset);
} else {
highlightDifferentNode(startOffsetNode,endOffsetNode,parseInt(startOffset),parseInt(endOffset),type,calledStartOffset);
}
}
return this.each(function() {
innerHighlight(this, startOffset,endOffset);
});
};
function resizeOffsetForNode(offsetNode,offset){
if (offsetNode.id >= 0){
offset = parseInt(offset)-parseInt(offsetNode.id);
} else if (offsetNode.previousSibling != null && offsetNode.previousSibling.id > 0){
offset = parseInt(offset)-parseInt(offsetNode.previousSibling.id)-parseInt(offsetNode.previousSibling.textContent.length);
}
return offset;
}
function getChildNodeForOffset(testNode,offset) {
if (testNode.nodeType == 1 && testNode.childNodes && !/(script|style)/i.test(testNode.tagName)) {
var offsetNode=null;
var currentNode;
for (var i = 0; i < testNode.childNodes.length; ++i) {
currentNode=testNode.childNodes[i];
if (currentNode.id >= 0 && parseInt(currentNode.id) <= parseInt(offset) && ((parseInt(currentNode.id) + parseInt(currentNode.textContent.length)) >= parseInt(offset))){
offsetNode = currentNode;
break;
} else if (currentNode.id >= 0 && parseInt(currentNode.id) > parseInt(offset)){
offsetNode = currentNode.previousSibling;
break;
}
}
if (offsetNode==null){
offsetNode = testNode.childNodes[testNode.childNodes.length-1];
}
return offsetNode;
}
}
function highlightSameNode(node, startOffset,endOffset,type,calledStartOffset) {
var skip = 0;
if (node.nodeType == 3) {
if (startOffset >= 0) {
var spannode = document.createElement('span');
spannode.className = 'entity '+ type;
spannode.id=calledStartOffset;
var middlebit = node.splitText(startOffset);
var endbit = middlebit.splitText(endOffset-startOffset);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit);
}
} else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
var childnode = node.childNodes[0];
highlightSameNode(childnode, startOffset,endOffset,type,calledStartOffset);
}
}
function highlightDifferentNode(startnode, endnode, startOffset,endOffset,type,calledStartOffset) {
var skip = 0;
if (startnode.nodeName == "#text") {
if (startOffset >= 0) {
var spannode = document.createElement('span');
spannode.className = 'entity '+ type;
spannode.id=calledStartOffset;
var endbit = node.splitText(startOffset);
var endclone = endbit.cloneNode(true);
spannode.appendChild(endclone);
endbit.parentNode.replaceChild(spannode, endbit);
}
} else if (startnode.nodeName == "SPAN") {
if (startOffset >= 0) {
var spannode = document.createElement('span');
spannode.className = 'entity '+ type;
spannode.id=calledStartOffset;
var endTextbit = startnode.childNodes[0].splitText(startOffset);
spannode.appendChild(endTextbit);
startnode.parentNode.insertBefore(spannode, startnode.nextSibling);
}
}
var currentTestNode=startnode.nextSibling;
while (currentTestNode!=endnode){
if (currentTestNode.nodeName == "#text") {
var spannode = document.createElement('span');
spannode.className = 'entity '+ type;
spannode.id=parseInt(currentTestNode.previousSibling.id)+parseInt(currentTestNode.previousSibling.textContent.length);
var currentNodeClone=currentTestNode.cloneNode(true);
spannode.appendChild(currentNodeClone);
endbit.parentNode.replaceChild(spannode, currentTestNode);
} else if (currentTestNode.nodeName == "SPAN") {
currentTestNode.className = 'entity overlap';
}
currentTestNode=currentTestNode.nextSibling;
}
var previousNodeEnd = parseInt(endnode.previousSibling.id)+parseInt(endnode.previousSibling.textContent.length);
var spannode = document.createElement('span');
spannode.className = 'entity '+ type;
spannode.id=previousNodeEnd;
if (endnode.nodeName == "#text") {
if (endOffset >= 0) {
//end offset here is the original end offset from the beginning of the text, not node
var unwantedbit = endnode.splitText(parseInt(endOffset)-parseInt(previousNodeEnd));
var endclone = endnode.cloneNode(true);
spannode.appendChild(endclone);
endnode.parentNode.replaceChild(spannode, endnode);
}
} else if (endnode.nodeName == "SPAN") {
if (endOffset >= 0) {
var wantTextbit = endnode.childNodes[0].splitText(parseInt(endOffset)-parseInt(previousNodeEnd));
spannode.appendChild(wantTextbit);
wantTextbit.parentNode.parentNode.insertBefore(spannode, endnode);
}
}
if (startnode.textContent.length < 1){
startnode.parentNode.removeChild(startnode);
}
if (endnode.textContent.length < 1){
endnode.parentNode.removeChild(endnode);
}
}
jQuery.fn.removeHighlight = function() {
return this.find("span.entity").each(function() {
this.parentNode.firstChild.nodeName;
with (this.parentNode) {
replaceChild(this.firstChild, this);
normalize();
}
}).end();
};
function contains(a, b){
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
}