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
1
2
3 (function() {
4 //GLOBALS
5 //globals for classMausWork
6 var gSelectedElement; //currently only one selection
7 var gHoverElement; //whatever element the mouse is over
8 var gHovering=false; //mouse is over something
9 var gObjArrMW=[]; //global array of classMausWork objects. for removing event listeners when done selecting.
10
11 //extended
12 var infoDiv; //currently just container for InfoDivHover, might add more here
13 var infoDivHover; //container for hoverText text node.
14 var hoverText; //show information about current element that the mouse is over
15 //const EXPERIMENTAL_NEW_CODE=true; //debugging. new features.
16
17
18 //START
19 SetupDOMSelection();
20
21
22
23
24 //(Section 1) Element Selection
25 function SetupDOMSelection()
26 {
27
28 {
29 //setup event listeners
30 //var pathx="//div | //span | //table | //td | //tr | //ul | //ol | //li | //p";
31 var pathx="//div | //span | //table | //th | //td | //tr | //ul | //ol | //li | //p | //iframe";
32 var selection=$XPathSelect(pathx);
33 for(var element, i=0;element=selection(i);i++)
34 {
35 if(element.tagName.match(/^(div|span|table|td|tr|ul|ol|li|p)$/i)) //redundant check.
36 {
37 var m = new classMausWork(element);
38 gObjArrMW.push(m);
39 attachMouseEventListeners(m);
40 }
41 }
42 document.body.addEventListener('mousedown',MiscEvent,false);
43 document.body.addEventListener('mouseover',MiscEvent,false);
44 document.body.addEventListener('mouseout',MiscEvent,false);
45 document.addEventListener('keypress',MiscEvent,false);
46 }
47 {
48 //setup informational div to show which element the mouse is over.
49 infoDiv=document.createElement('div');
50 var s=infoDiv.style;
51 s.position='fixed';
52 s.top='0';
53 s.right='0';
54
55 s.display='block';
56 s.width='auto';
57 s.padding='0px';
58
59 document.body.appendChild(infoDiv);
60 infoDivHover=document.createElement('div');
61
62 s=infoDivHover.style;
63 s.fontWeight='bold';
64 s.padding='3px';
65 s.Opacity='0.8';
66 s.borderWidth='thin';
67 s.borderStyle='solid';
68 s.borderColor='white';
69 s.backgroundColor='black';
70 s.color='white';
71
72 infoDiv.appendChild(infoDivHover);
73 hoverText=document.createTextNode('selecting');
74 infoDivHover.appendChild(hoverText);
75 }
76 }
77
78 function CleanupDOMSelection()
79 {
80 for(var m; m=gObjArrMW.pop(); )
81 {
82 detachMouseEventListeners(m);
83 }
84 ElementRemove(infoDiv);
85 document.body.removeEventListener('mousedown',MiscEvent,false);
86 document.body.removeEventListener('mouseover',MiscEvent,false);
87 document.body.removeEventListener('mouseout',MiscEvent,false);
88 document.removeEventListener('keypress',MiscEvent,false);
89 }
90
91 function attachMouseEventListeners(c)
92 {
93 //c is object of class classMausWork
94 c.element.addEventListener("mouseover",c.mouse_over,false);
95 c.element.addEventListener("mouseout",c.mouse_out,false);
96 c.element.addEventListener("mousedown",c.mouse_click,false);
97 }
98
99 function detachMouseEventListeners(c)
100 {
101 //c is object of class classMausWork
102 c.resetElementStyle();
103 c.element.removeEventListener("mouseover",c.mouse_over,false);
104 c.element.removeEventListener("mouseout",c.mouse_out,false);
105 c.element.removeEventListener("mousedown",c.mouse_click,false);
106 }
107
108 //mouse event handling class for element, el.
109 function classMausWork(element)
110 {
111 //store information about the element this object is assigned to handle. element, original style, etc.
112 this.element=element;
113
114 var elementStyle=element.getAttribute('style');
115 var target;
116
117 this.mouse_over=function(ev)
118 {
119 if(gHovering)return;
120 var e=element;
121 var s=e.style;
122 s.backgroundColor='yellow';
123 s.borderWidth='thin';
124 s.borderColor='lime';
125 s.borderStyle='solid';
126 InfoMSG(ElementInfo(e),'yellow','blue','yellow');
127 gHoverElement=e;
128 gHovering=true;
129 target=ev.target;
130 ev.stopPropagation();
131 };
132
133 this.mouse_out=function(ev)
134 {
135 if(!gHovering)return;
136 if(gHoverElement!=element ||ev.target!=target)return;
137 var e=element;
138 e.setAttribute('style',elementStyle);
139 InfoMSG('-','white','black','white');
140 gHoverElement=null;
141 gHovering=false;
142 target=null;
143 //ev.stopPropagation();
144 };
145
146 this.mouse_click=function(ev)
147 {
148 if(!gHovering)return;
149 if(gHoverElement!=element ||ev.target!=target)return;
150 var e=element;
151 e.setAttribute('style',elementStyle);
152 ev.stopPropagation();
153 CleanupDOMSelection();
154 gHoverElement=null;
155 gHovering=false;
156 target=null;
157
158 if(ev.button==0)
159 {
160 gSelectedElement=e;
161 ElementSelected(e); //finished selecting, cleanup then move to next part (section 2), element isolation.
162 }
163 };
164
165 this.resetElementStyle=function()
166 {
167 element.setAttribute('style',elementStyle);
168 };
169 }
170
171 function MiscEvent(ev) //keypress, and mouseover/mouseout/mousedown event on body. cancel selecting.
172 {
173 if(ev.type=='mouseout' && !gHovering)
174 {
175 InfoMSG('-','white','black','white');
176 }
177 else if(ev.type=='mouseover' && !gHovering)
178 {
179 InfoMSG('cancel','yellow','red','yellow');
180 }
181 else //keypress on document or mousedown on body, cancel ops.
182 {
183 CleanupDOMSelection();
184 }
185 }
186
187 function InfoMSG(text,color,bgcolor,border)
188 {
189
190 var s=infoDivHover.style;
191 if(color)s.color=color;
192 if(bgcolor)s.backgroundColor=bgcolor;
193 if(border)s.borderColor=border;
194 if(text)hoverText.data=text;
195 }
196
197
198
199
200
201 //(Section 2) Element Isolation
202 function ElementSelected(element) //finished selecting element. setup string to prompt user.
203 {
204 PromptUserXpath(ElementInfo(element));
205 }
206
207
208 function PromptUserXpath(defaultpath) //prompt user, isolate element.
209 {
210 var userpath = prompt("XPath of elements to isolate : ", defaultpath);
211 if(userpath && userpath.length>0)
212 {
213 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
214 var addPath = "//script | //form | //object | //embed"; //include these elements in selection for removal
215 var pathx=TransformXPath_NoAncestorDescendentSelf(userpath, addPredicate, addPath); //the xpath selection of all elements to be removed/deleted.
216
217 try
218 {
219 var element;
220 var elements=$XPathSelect(pathx);
221 for(var i=0;element=elements(i);i++)
222 {
223
224 if(!element.nodeName.match(/^(head|title)$/i)) //redundant check.
225 {
226 ElementRemove(element);
227 }
228 }
229 }
230
231 catch(err)
232 {
233 alert("wtf: "+err);
234 }
235
236 }
237 }
238
239
240
241 //support
242 function $XPathSelect(p, context)
243 {
244 if (!context) context = document;
245 var i, arr = [], xpr = document.evaluate(p, context, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
246 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).
247 }
248
249 function ElementRemove(e)
250 {
251 if(e)e.parentNode.removeChild(e);
252 }
253
254 function ElementInfo(element)
255 {
256 var txt='';
257 if(element)
258 {
259 txt=element.tagName.toLowerCase(); //txt=element.tagName;
260 txt=attrib(txt,element,'id');
261 txt=attrib(txt,element,'class');
262 txt='//'+txt;
263 }
264 return txt;
265
266 function attrib(t,e,a)
267 {
268 if(e.hasAttribute(a))
269 {
270 t+="[@"+a+"='"+e.getAttribute(a)+"']";
271 }
272 return t;
273 }
274
275 }
276
277
278
279 //function to 'invert' the XPath by selecting all elements that are not ancestor and not descendent and not self.
280 function TransformXPath_NoAncestorDescendentSelf(u, includePredicates, includePaths)
281 {
282
283 //sample input (u): //div[@class='sortbox']
284 //sample output //*[ not(./descendant-or-self::*=//div[@class='sortbox'])][ not(./ancestor-or-self::*=//div[@class='sortbox'])]
285 //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]
286
287 //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.
288 //input: table[@id='topbar']
289 //output: //*[not(./descendant-or-self::table[@id='topbar']) and not(./ancestor-or-self::table[@id='topbar'])]
290 //output (alternative): //*[count(./descendant-or-self::table[@id='topbar'])=0 and count(./ancestor-or-self::table[@id='topbar'])=0]
291
292
293 var o1= './descendant-or-self::*='+gr(u);
294 o1= 'not' + gr(o1);
295 o1= nt(o1);
296 var o2= './ancestor-or-self::*='+gr(u);
297 o2= 'not' + gr(o2);
298 o2= nt(o2);
299
300 var o= '//*'+o1+o2;
301 if(includePredicates && includePredicates.length>0) o += includePredicates;
302 if(includePaths && includePaths.length>0) o += ' | ' + includePaths;
303 return o;
304
305
306 function nt(term){return wrap(term,'[]');} //node test; predicate - enclose with bracket.
307 function gr(term){return wrap(term,'()');} //group - parenthesize.
308 function wrap(term, enclosure){return enclosure.charAt(0)+term+enclosure.charAt(1);}
309 }
310
311
312
313
314 })();
315
