DZone Snippets: userscript code

DOM Mouse-Over Element Selection and Isolation

jczerg68 (Jon C) — Sun, 09 Sep 2007 01:25:47 GMT

DOM ISO.v.0.3.0.7.bookmarklet.js
bookmarklet for selecting and isolating an element on a page.

two sections:
section 1: Mouseover DOM, setup and handle mouse events and show information about element in informational div. Click to select, Any key to cancel.
section 2: Element Isolation with help of XPath. prompt user for XPath expression e.g., //DIV[@id='post-body']. then use XPath to select all elements not(ancestor or descendant or self), then delete those elements. also ignore self-or-descendants of head and title.

tools:
Ruderman's javascript development environment: https://www.squarefree.com/bookmarklets/webdevel.html#jsenv
Mielczarek's js to bookmarklet generator: http://ted.mielczarek.org/code/mozilla/bookmarklet.html





(function() {

	//GLOBALS

		//globals for classMausWork

		var gSelectedElement;	//currently only one selection

		var gHoverElement;		//whatever element the mouse is over

		var gHovering=false;	//mouse is over something

		var gObjArrMW=[];	//global array of classMausWork objects.  for removing event listeners when done selecting.

		

		//extended	

		var infoDiv;		//currently just container for InfoDivHover, might add more here

		var infoDivHover;	//container for hoverText text node.

		var hoverText;		//show information about current element that the mouse is over

		//const EXPERIMENTAL_NEW_CODE=true;	//debugging. new features.

	

	

	//START

	SetupDOMSelection();	







		

	//(Section 1) Element Selection

	function SetupDOMSelection()

	{



		{

			//setup event listeners

			//var pathx="//div | //span | //table | //td | //tr | //ul | //ol | //li | //p";

			var pathx="//div | //span | //table | //th | //td | //tr | //ul | //ol | //li | //p | //iframe";

			var selection=$XPathSelect(pathx);

			for(var element, i=0;element=selection(i);i++)

			{			

				if(element.tagName.match(/^(div|span|table|td|tr|ul|ol|li|p)$/i))	//redundant check.

				{

					var m = new classMausWork(element);

					gObjArrMW.push(m);

					attachMouseEventListeners(m);

				}

			}

			document.body.addEventListener('mousedown',MiscEvent,false);

			document.body.addEventListener('mouseover',MiscEvent,false);

			document.body.addEventListener('mouseout',MiscEvent,false);

			document.addEventListener('keypress',MiscEvent,false);

		}

		{

			//setup informational div to show which element the mouse is over.

			infoDiv=document.createElement('div');

			var s=infoDiv.style;

			s.position='fixed';

			s.top='0';

			s.right='0';

			

			s.display='block';

			s.width='auto';

			s.padding='0px';



			document.body.appendChild(infoDiv);

			infoDivHover=document.createElement('div');



			s=infoDivHover.style;

			s.fontWeight='bold';			

			s.padding='3px';

			s.Opacity='0.8';

			s.borderWidth='thin';

			s.borderStyle='solid';

			s.borderColor='white';

			s.backgroundColor='black';

			s.color='white';

			

			infoDiv.appendChild(infoDivHover);			

			hoverText=document.createTextNode('selecting');

			infoDivHover.appendChild(hoverText);

		}

	}

	

	function CleanupDOMSelection()

	{

		for(var m; m=gObjArrMW.pop(); )

		{

			detachMouseEventListeners(m);

		}

		ElementRemove(infoDiv);

		document.body.removeEventListener('mousedown',MiscEvent,false);

		document.body.removeEventListener('mouseover',MiscEvent,false);

		document.body.removeEventListener('mouseout',MiscEvent,false);		

		document.removeEventListener('keypress',MiscEvent,false);

	}	



	function attachMouseEventListeners(c)

	{

		//c is object of class classMausWork

		c.element.addEventListener("mouseover",c.mouse_over,false);				

		c.element.addEventListener("mouseout",c.mouse_out,false);	

		c.element.addEventListener("mousedown",c.mouse_click,false);		

	}



	function detachMouseEventListeners(c)

	{

		//c is object of class classMausWork

		c.resetElementStyle();

		c.element.removeEventListener("mouseover",c.mouse_over,false);				

		c.element.removeEventListener("mouseout",c.mouse_out,false);	

		c.element.removeEventListener("mousedown",c.mouse_click,false);		

	}



	//mouse event  handling class for element, el.

	function classMausWork(element)

	{	

		//store information about the element this object is assigned to handle. element,  original style, etc.	

		this.element=element;

		

		var elementStyle=element.getAttribute('style');

		var target;

		

		this.mouse_over=function(ev)

		{	

			if(gHovering)return;

			var e=element;			

			var s=e.style;

			s.backgroundColor='yellow';

			s.borderWidth='thin';

			s.borderColor='lime';

			s.borderStyle='solid';					

			InfoMSG(ElementInfo(e),'yellow','blue','yellow');

			gHoverElement=e;

			gHovering=true;

			target=ev.target;

			ev.stopPropagation();		

		};

		

		this.mouse_out=function(ev)

		{

			if(!gHovering)return;

			if(gHoverElement!=element ||ev.target!=target)return;

			var e=element;

			e.setAttribute('style',elementStyle);

			InfoMSG('-','white','black','white');	

			gHoverElement=null;

			gHovering=false;

			target=null;

			//ev.stopPropagation();

		};

		

		this.mouse_click=function(ev)

		{

			if(!gHovering)return;

			if(gHoverElement!=element ||ev.target!=target)return;

			var e=element;

			e.setAttribute('style',elementStyle);

			ev.stopPropagation();			

			CleanupDOMSelection();			

			gHoverElement=null;

			gHovering=false;

			target=null;

			

			if(ev.button==0)

			{

				gSelectedElement=e;

				ElementSelected(e);	//finished selecting, cleanup then move to next part (section 2), element isolation.

			}

		};

		

		this.resetElementStyle=function()

		{

			element.setAttribute('style',elementStyle);

		};		

	}



	function MiscEvent(ev)		//keypress, and mouseover/mouseout/mousedown event on body.  cancel selecting.

	{

		if(ev.type=='mouseout' && !gHovering)

		{

			InfoMSG('-','white','black','white');

		}

		else if(ev.type=='mouseover' && !gHovering)

		{

			InfoMSG('cancel','yellow','red','yellow');

		}

		else //keypress on document or mousedown on body, cancel ops.

		{

			CleanupDOMSelection();

		}

	}

	

	function InfoMSG(text,color,bgcolor,border)

	{

		

		var s=infoDivHover.style;

		if(color)s.color=color;

		if(bgcolor)s.backgroundColor=bgcolor;

		if(border)s.borderColor=border;

		if(text)hoverText.data=text;

	}

	





	

	

	//(Section 2) Element Isolation

	function ElementSelected(element)	//finished selecting element.  setup string to prompt user.

	{

		PromptUserXpath(ElementInfo(element));

	}

	

	

	function PromptUserXpath(defaultpath)		//prompt user, isolate element.

	{

		var userpath = prompt("XPath of elements to isolate : ", defaultpath);

		if(userpath && userpath.length>0)

		{

			var addPredicate = "[count(./ancestor-or-self::head)=0][count(./ancestor-or-self::title)=0]";	//exclude head & title elements from selection so they aren't removed

			var addPath = "//script | //form | //object | //embed";	//include these elements in selection for removal

			var pathx=TransformXPath_NoAncestorDescendentSelf(userpath, addPredicate, addPath);		//the xpath selection of all elements to be removed/deleted.

			

			try

			{

				var element;

				var elements=$XPathSelect(pathx);	

				for(var i=0;element=elements(i);i++)

				{			



					if(!element.nodeName.match(/^(head|title)$/i))	//redundant check.

					{

						ElementRemove(element);

					}

				}

			}

			

			catch(err)

			{

				alert("wtf: "+err);

			}

			

		}

	}

	

		

	

	//support

	function $XPathSelect(p, context) 

	{

	  if (!context) context = document;

	  var i, arr = [], xpr = document.evaluate(p, context, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

	  return function(x) { return xpr.snapshotItem(x); };	//closure.  wooot!  returns function-type array of elements (usually elements, or something else depending on the xpath expression).

	}

	

	function ElementRemove(e)

	{

		if(e)e.parentNode.removeChild(e);

	}

	

	function ElementInfo(element)

	{

		var txt='';

		if(element)

		{

			txt=element.tagName.toLowerCase();		//txt=element.tagName;

			txt=attrib(txt,element,'id');

			txt=attrib(txt,element,'class');	

			txt='//'+txt;

		}

		return txt;

		

		function attrib(t,e,a)

		{			

			if(e.hasAttribute(a))

			{

				t+="[@"+a+"='"+e.getAttribute(a)+"']";

			}

			return t;

		}

		

	}





	

	//function to 'invert' the XPath by selecting all elements that are not ancestor and not descendent and not self.

	function TransformXPath_NoAncestorDescendentSelf(u, includePredicates, includePaths)

	{	

		

		//sample input (u):					//div[@class='sortbox']

		//sample output						//*[  not(./descendant-or-self::*=//div[@class='sortbox'])][  not(./ancestor-or-self::*=//div[@class='sortbox'])]

		//sample output with additional conditions:		//*[  not(./descendant-or-self::*=//div[@class='sortbox'])][  not(./ancestor-or-self::*=//div[@class='sortbox'])][count(./ancestor-or-self::head)=0][count(./ancestor-or-self::title)=0]

		

			//obsolete method.  much faster but can only be used for limited types of (simple) xpath expressions -- unlike the current version, which should be able to convert any xpath.

			//input:			table[@id='topbar']

			//output:			//*[not(./descendant-or-self::table[@id='topbar']) and not(./ancestor-or-self::table[@id='topbar'])]

			//output (alternative):	//*[count(./descendant-or-self::table[@id='topbar'])=0 and count(./ancestor-or-self::table[@id='topbar'])=0]

		

		

		var o1=	'./descendant-or-self::*='+gr(u);

		o1=	'not' + gr(o1);

		o1=	nt(o1);	

		var o2= './ancestor-or-self::*='+gr(u);

		o2=	'not' + gr(o2);

		o2=	nt(o2);



		var o=	'//*'+o1+o2;

		if(includePredicates && includePredicates.length>0)	o += includePredicates;

		if(includePaths && includePaths.length>0) o += ' | ' + includePaths;

		return o;

		

		

		function nt(term){return wrap(term,'[]');}	//node test; predicate - enclose with bracket.

		function gr(term){return wrap(term,'()');}	//group - parenthesize.

		function wrap(term, enclosure){return enclosure.charAt(0)+term+enclosure.charAt(1);}

	}	

	





	

})();

BlockFlash-Revisited.user.js

mcandre (Andrew Pennebaker) — Wed, 29 Nov 2006 01:03:18 GMT



// ==UserScript==

// @name		BlockFlash-Revisited

// @namespace		http://snippets.dzone.com/posts/show/3054

// @description	Do not start Flash animation until you click on them.

// @include		*

// @exclude		http://www.macromedia.com/*

// @exclude		http://www.atomfilms.com/*

// @exclude		http://uploads.ungrounded.net/*

// @exclude		http://www.albinoblacksheep.com/*

// ==/UserScript==



/*

	Revised by Andrew Pennebaker (andrew.pennebaker@gmail.com)



	Author: Jos van den Oever (jos@vandenoever.info)



	License: GPL



	Version history:

		2006-02-12: initial version

		2006-11-28: changed appearance



Inspiration for this script comes from the removeFlash script and the FlashBlock firefox extension.

*/



(function () {

	var objects=document.getElementsByTagName("object");



	for (i=0; i		var flash=objects[i];



		if (flash.innerHTML.match(/.swf|shockwave|flash/)) {

			var placeholder=document.createElement("div");



			placeholder.style.cursor='pointer';

			placeholder.style.background='orange'; // 'gray '

			placeholder.style.textAlign='center';

			placeholder.style.color='black';

			placeholder.innerHTML="[Play Flash]";



			flash.parentNode.insertBefore(placeholder, flash);

			flash.on=false;



			placeholder.addEventListener(

				'click',

				function() {

					if (flash.on) {

						flash.style.display='none';

						placeholder.innerHTML="[Play Flash]";

						flash.on=false;

					}

					else {

						flash.style.display='';

						placeholder.innerHTML="[Stop Flash]";

						flash.on=true;

					}

				},

				true

			);



			flash.style.display='none';

		}

	}

})();

Anidar comentarios en Meneame.net 1ª referencia(UserScript)

jnsntndr (jnsntndr) — Sat, 02 Sep 2006 20:54:52 GMT

Anida los comentarios usando el número de comentario (#XX) que los usuarios de Meneame utilizan para referirse a otros comentarios, pero únicamente tiene en cuenta la 1ª referencia.



// ==UserScript==

// @name          Meneame.net: anidar comentarios (1 ref)

// @description   Anida comentarios en meneame.net

// @include       http://meneame.net/story/*

// ==/UserScript==

(function() {

var cl = document.getElementById("comments-list"); //cl = lista de comentarios

var l = null; //l = cada elemento hijo de cl

for(var i in cl.childNodes)

{

 l = cl.childNodes.item(i);

 if(l && (l.tagName) && (l.tagName.toUpperCase() == "LI")) //ignora lo que no sean elementos LI

 {

  var d = l.firstChild; //d = el div que contiene cada el texto del comentario

  var nc = parseInt(d.id.slice(8)); //nc = numero de comentario

  var r = d.firstChild.nextSibling.nextSibling.innerHTML.match(/#[0-9]+/g); //r = lista de comentarios referenciados

  var nr = 0; //nr = numero del comentario referenciado

  var anidado = false;

  for(var j in r) // j = cada referencia

  {

   nr = parseInt(r[j].slice(1));

   if((anidado = (nr > 0) && (nc > nr))) //si el numero del comentario es mayor que el referenciado...

   {

    var lr = document.getElementById("comment-" + nr).parentNode; //lr = el elemento LI referenciado

    if(lr.lastChild.name != "anidados")

    {

     var a = document.createElement("ul");

     a.name = "anidados";

     a.style.borderLeft = "1px dotted #aaaaaa";

     lr.appendChild(a);

    }

    lr.lastChild.appendChild(l.cloneNode(true));

    try{cl.removeChild(l);} catch(e){}

    break;

   }

  }

 }

}

})();

Enlaces entre comentarios en Meneame.net (userscript)

jnsntndr (jnsntndr) — Sat, 02 Sep 2006 18:56:15 GMT

Funciona como el script de anidar pero enlazando a los comentarios



// ==UserScript==

// @name          Meneame.net: enlazar comentarios

// @description   Enlaza comentarios en meneame.net

// @include       http://meneame.net/story/*

// ==/UserScript==

(function() {

var cl = document.getElementById("comments-list"); //cl = lista de comentarios

var l = null; //l = cada elemento hijo de cl

for(var i in cl.childNodes)

{

 l = cl.childNodes.item(i);

 if(l && (l.tagName) && (l.tagName.toUpperCase() == "LI")) //ignora lo que no sean elementos LI

 {

  var d = l.firstChild;

  var nc = parseInt(d.id.slice(8)); //nc = numero de comentario

  var nr = 0; //nr = numero del comentario referenciado

  var o = d.firstChild.nextSibling.nextSibling;

  var t = o.innerHTML;

  var r = t.match(/#[0-9]+/g); //lista de comentarios referenciados

  for(var j in r)

  {

   nr = parseInt(r[j].slice(1));

   if((nr >0) && (nc > nr))

    t = t.replace(r[j],"" + r[j] +"");

    o.innerHTML = t;

  }

 }

}

})();

Anidar comentarios en Meneame.net (UserScript)

jnsntndr (jnsntndr) — Sat, 02 Sep 2006 15:59:25 GMT

Anida los comentarios usando el número de comentario (#XX) que los usuarios de Meneame utilizan para referirse a otros comentarios



// ==UserScript==

// @name          Meneame.net: anidar comentarios

// @description   Anida comentarios en meneame.net

// @include       http://meneame.net/story/*

// ==/UserScript==

(function() {

var cl = document.getElementById("comments-list"); //cl = lista de comentarios

var l = null; //l = cada elemento hijo de cl

for(var i in cl.childNodes)

{

 l = cl.childNodes.item(i);

 if(l && (l.tagName) && (l.tagName.toUpperCase() == "LI")) //ignora lo que no sean elementos LI

 {

  var d = l.firstChild; //d = el div que contiene cada el texto del comentario

  var nc = parseInt(d.id.slice(8)); //nc = numero de comentario

  var r = d.firstChild.nextSibling.nextSibling.innerHTML.match(/#[0-9]+/g); //r = lista de comentarios referenciados

  var nr = 0; //nr = numero del comentario referenciado

  var anidado = false;

  for(var j in r) // j = cada referencia

  {

   nr = parseInt(r[j].slice(1));

   if((anidado = (nr > 0) && (nc > nr))) //si el numero del comentario es mayor que el referenciado...

   {

    var lr = document.getElementById("comment-" + nr).parentNode; //lr = el elemento LI referenciado

    if(lr.lastChild.name != "anidados")

    {

     var a = document.createElement("ul");

     a.name = "anidados";

     a.style.borderLeft = "1px dotted #aaaaaa";

     lr.appendChild(a);

    }

    lr.lastChild.appendChild(l.cloneNode(true));

    try{cl.removeChild(l);} catch(e){}

   }

  }

 }

}

})();