Almost there, but not quite - if anyoneâs willing to assist just for the fun of it
Iâm giving the wrapper element the classname âwrapâ. But I need to adjust the stored index-numbers because Iâve added (temporarily) new elements to the page. Hereâs the whole code (3 bookmarklets) I have so far:
[code]javascript:
(function(){
var d=document;
var wrap=d.createElement(âspanâ);
wrap.style.position=ârelativeâ;
wrap.className=âwrapâ;
var cmt=d.createElement(âtextareaâ);
cmt.style.backgroundColor=âyellowâ;
cmt.style.top=â1.5emâ;
cmt.style.position=âabsoluteâ;
cmt.style.zIndex=â99â;
cmt.className=âcmtâ;
cmt.style.height=â4emâ;
if(window.getSelection){
var sel=window.getSelection();
if(sel.rangeCount){
var rng=sel.getRangeAt(0).cloneRange();
rng.surroundContents(wrap);
sel.removeAllRanges();
sel.addRange(rng);
wrap.insertBefore(cmt,wrap.firstChild);
cmt.thetext=rng;
}
}
return false;
}
)();
javascript:
(function(){
var d=document;
var all=d.getElementsByTagName(ââ),j=0;
for(var i=0;i<all.length;i++){
if(all.className==âwrapâ){
localStorageâcmtâ+(i-j)]=all*.value;
localStorageâwrdâ+(i-j)]=all*.thetext;
j+=2;
}
}
return false;
}
)();
javascript:
(function(){
var d=document;
for(var i=localStorage.length-1;i>=0;iâ){
var skey=localStorage.key(i);
x=parseInt((skey).substr(3));
if(skey.substr(0,3)==âcmtâ){
alert(x+â â+localStorageâwrdâ+x]+â\nâ+localStorageâcmtâ+x]);
found=d.getElementsByTagName(â*â)[x];
found.style.color=âredâ;
}
}
return false;
}
)();
[/code]
The third section isnât quite working as itâs not applying red colouring to the correct (parent) element.
When Iâm searching to decide where to insert the previously saved comments (the 3rd code section) Iâll need to search from the bottom upwards, as I will be inserting new nodes.
I canât use querySelector() to find the previously stored word, because it returns an element. That is, it will return the *parent ***that contains the word - which I already have anyway. I might have to extract the text from the parent and just do a JS string search. It will then be a little messy as Iâll have to rebuild the whole text-content and re-insert it.
If I get this working I suppose it may have some uses. You can comment web-pages and, when you revisit the page later, youâll be able to reinstate the comments. I should even be able to reduce it to two (or possibly one) bookmarklet(s).*