Jump to content

Sky Slate Blueberry Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate
Photo

Forum [code] sections: green comments and scrollbars


  • Please log in to reply
180 replies to this topic
PhiLho
  • Moderators
  • 6850 posts
  • Last active: Jan 02 2012 10:09 PM
  • Joined: 27 Dec 2005
I just finished my GM script. I dropped a bit of IE code here, of course, but it is trivial to restore it.
I finally resolved the last problem, to have a function working by explicit call or as event handler. I was a bit baffled by the type of the event ([object XPCNativeWrapper [object Window]]) and curiously didn't found much info on this on the Net. foom's function shown that event.target was really usable.
function ChangeTD(d)
{
  if (d.target !== undefined)
    d = d.target;
  var h = 0;
  // FF uses offsetHeight, IE uses both (close values), I don't know for other browsers
  if (d.offsetHeight)
  {
    h = d.offsetHeight;
  }
  else if (d.style.pixelHeight)
  {
    h = d.style.pixelHeight;
  }
  var s = 450;
  d.style.height = h <= s ? '100%' : s, d.style.overflow = 'auto';
}

function MakeCodeBlocks()
{
  var cont = 'td', cls = 'code', i = 0;
  var es = document.getElementsByTagName('body')[0].getElementsByTagName(cont);
  for (i = 0; i < es.length; i++)
  {
    var e = es[i];
    if (e.className == cls)
    {
      if (!/<div/i.test(e.innerHTML))
        e.innerHTML = '<div>' + e.innerHTML + '</div>';
      d = e.getElementsByTagName('div')[0]
      ChangeTD(d);
      e.addEventListener('dblclick', ChangeTD, false)
    }
  }
}

MakeCodeBlocks();

Posted Image vPhiLho := RegExReplace("Philippe Lhoste", "^(\w{3})\w*\s+\b(\w{3})\w*$", "$1$2")

polyethene
  • Members
  • 5519 posts
  • Last active: May 17 2015 06:39 AM
  • Joined: 26 Oct 2012
I updated my javascript to support Opera (tested on 9.02) by converting the set method to a encapsulated function. I also improved the double-click feature to work on all browsers. However since IE and Opera don't seem to get the desired parentNode when text is highlighted I'll have to look into it a bit more. Finally, because I opted to use an em scale there are a few complications which make it difficult to check whether a code block is smaller than the shrunken size (12.5em), so this is another thing I'll work on later. You can download the script with an example page or copy/paste from here:
function codeblock() { // by Titan - v0.9.2

	var c = new Array('td', 'code', 'div'), s = '12.5em', i = 0

		, e = document.getElementsByTagName('body')[0].getElementsByTagName(c[0]);

	function set(n) { var v = n || window.event, d = v.type == 'dblclick'

		? (v = v.target || v.srcElement).tagName.toLowerCase() !== c[2] ? v.parentNode : v

		: e[n].getElementsByTagName(c[2])[0], h = d.style.height;

		d.style.height = h == s ? '100%' : s, d.style.overflow = 'auto', d.ondblclick = set; }

	for(i in e) if(e[i].className == c[1]) { if (e[i].innerHTML.toLowerCase().indexOf(c[2]) == -1)

			e[i].innerHTML = '<' + c[2] + '>' + e[i].innerHTML + '</' + c[2] + '>'; set(i); }

}

window.addEventListener ? window.addEventListener('load', codeblock, false) : window.attachEvent('onload', codeblock);


autohotkey.com/net Site Manager

 

Contact me by email (polyethene at autohotkey.net) or message tidbit


foom
  • Members
  • 386 posts
  • Last active: Jul 04 2007 04:53 PM
  • Joined: 19 Apr 2006
Looks nice using IE as long you don't dblclick on text in the box :). But it doesn't work in opera at all for me.

@ philho i tested your script and it gives me a very weird error.
JavaScript - http://www.autohotkey.com/forum/viewtopic.php?t=14126
User Javascript thread
Error:
name: TypeError
message: Statement on line 41: Could not convert undefined or null to object
Backtrace:
  Line 41 of User JS script 
    var es = [color=red]([/color]document.getElementsByTagName("body")[color=red])[/color][0].getElementsByTagName(cont);
  Line 56 of User JS script 
    MakeCodeBlocks();
Note that opera puts for some weird reason the red braces. I have code exactly like this in my highlightning script but that doesn't give me any errors. Is there something i am missing?
Ohh btw the script didn't work in ff2 for me either. o_O

polyethene
  • Members
  • 5519 posts
  • Last active: May 17 2015 06:39 AM
  • Joined: 26 Oct 2012

Looks nice using IE as long you don't dblclick on text in the box

As I've already explained, that happens because IE nor Opera retrieve the parentNode properly. I have a plan in mind to resolve this for the next version though.

But it doesn't work in opera at all for me.

I used Opera 9.02 and it worked just like IE, I can show you screenshots if you don't believe it :p What version are you using btw.?

@ philho i tested your script and it gives me a very weird error.

He said it was a GM script so I believe you need Greasemonkey to use it.

autohotkey.com/net Site Manager

 

Contact me by email (polyethene at autohotkey.net) or message tidbit


PhiLho
  • Moderators
  • 6850 posts
  • Last active: Jan 02 2012 10:09 PM
  • Joined: 27 Dec 2005

Ohh btw the script didn't work in ff2 for me either. o_O

Which one? Mine? How did you tested it?

Titan, it is a GreaseMonkey script, but there is nothing specific to GM, it should work OK as bookmarklet. That's mostly your own script. I kept the var es = document.getElementsByTagName("body")[0].getElementsByTagName(cont); line, although I would have split it in two. Perhaps that would make it more edible for Opera.
javascript:function ChangeTD(d){if(d.target!==undefined)d=d.target;var h=0; if(d.offsetHeight){h=d.offsetHeight;}else if(d.style.pixelHeight){h=d.style.pixelHeight;} var s=450; d.style.height=h<=s?'100%':s,d.style.overflow='auto';}

javascript:function MakeCodeBlocks(){var cont='td',cls='code',i=0; var bs=document.getElementsByTagName('body');var es=bs[0].getElementsByTagName(cont); for(i=0;i<es.length;i++){var e=es[i];if(e.className==cls){if(!/<div/i.test(e.innerHTML))e.innerHTML='<div>'+e.innerHTML+'</div>'; d=e.getElementsByTagName('div')[0];ChangeTD(d); window.addEventListener('dblclick',ChangeTD,false)}}} MakeCodeBlocks();
The above bookmarklets works on a FF1.5 without GreaseMonkey.

Mmm, except for the double-click handling... :-(
Posted Image vPhiLho := RegExReplace("Philippe Lhoste", "^(\w{3})\w*\s+\b(\w{3})\w*$", "$1$2")

majkinetor
  • Moderators
  • 4512 posts
  • Last active: May 20 2019 07:41 AM
  • Joined: 24 May 2006
This works in Opera. :D

As Chirs requested this to be optional, and I agree, we can make this script works only if cookie value was set. Some page should be created that users can visit to set this cookie or whatsoever... The cookie can also remember desired height as specified by the user, on that same page. For instance

[x] Limit codeboxes to [ 25 ] lines (0 for default)

I also thing this page should have configuration for all items that are latter added, like coloring code etc.. and possible some in the future. This will avoid chahnging PHPBB I think, as it will be just another page that will set the cookie... Am I right ? I don't have xp with cookies.
Posted Image

foom
  • Members
  • 386 posts
  • Last active: Jul 04 2007 04:53 PM
  • Joined: 19 Apr 2006

As I've already explained, that happens because IE nor Opera retrieve the parentNode properly. I have a plan in mind to resolve this for the next version though.

Yeah i know i just wanted to mention that other than that it works quiet well.

I used Opera 9.02 and it worked just like IE, I can show you screenshots if you don't believe it What version are you using btw.?

Ok the first issue was i didn't unzip it properly thats why it didn't work. But now that i have everything at its place unfolding by doubleclick doesn't work. I thing this is because opera highlights text wherever i click inside the div. I think this is because Opera wants to satisfy its hotclick feature. Btw i find philhos height better. It gives the most script the chance to be seen fully(e.g. short Ask For Help scripts) and only caps long scripts. Btw i am using the same version as you do.

He said it was a GM script so I believe you need Greasemonkey to use it.

ORLY?:D

Which one? Mine? How did you tested it?

Yeah yours. But it works. The problem was i created a New Greasmonkey Script from withing Greasmonkey but the screwed up saving it in a wrong direction + i screwed up "@include" :).
One thing that i dont like is that your setting the eventhandler to window and don't check if a div was actually dblclicked. This is kind of hackery(adj. i made this word just up, hope it makes sence :D) especially because you assign values to the object without beeing even sure if it has that properties and if it the object you want to edit. Didn't hurt till now, but its not very pretty.
About the error that Opera gave me. To install a greasmonkey script its extention has to be .user.js and an opera-userjavascript has the extention .js.
I saved it only with .js :/. However its very strange that opera treats this statement different based on what kind of script-flavor it is in.

PhiLho
  • Moderators
  • 6850 posts
  • Last active: Jan 02 2012 10:09 PM
  • Joined: 27 Dec 2005

One thing that i dont like is that your setting the eventhandler to window and don't check if a div was actually dblclicked. This is kind of hackery(adj. i made this word just up, hope it makes sence :D) especially because you assign values to the object without beeing even sure if it has that properties and if it the object you want to edit. Didn't hurt till now, but its not very pretty.

Well... You are right!
I tested a bit more, and indeed, the function is called if I double-click anywhere. A little improvement is to write: e.addEventListener('dblclick', ChangeTD, false)
It is still not perfect: if I double-click on the border, the parameter is HTMLTableCellElement! If I double-click on a comment, I get a HTMLSpanElement, the span coloring it!
Do you know how to get the type of object inside the event? I can use toString, but that's ugly! Also it would be nice to be able to get the parent of the span, ie. the div.

Anyway, I am working on a version using a different command than double-click. Yet, I am curious to the answers to the above questions.
Posted Image vPhiLho := RegExReplace("Philippe Lhoste", "^(\w{3})\w*\s+\b(\w{3})\w*$", "$1$2")

foom
  • Members
  • 386 posts
  • Last active: Jul 04 2007 04:53 PM
  • Joined: 19 Apr 2006

Do you know how to get the type of object inside the event? I can use toString, but that's ugly! Also it would be nice to be able to get the parent of the span, ie. the div.

All i know about the event is here.
<!-- m -->http://www.w3.org/TR... ... -interface<!-- m -->
I tryed to alarm(event.type) but that gives me undefined.

Why dont you attach the eventhandler to the bold-tag the "Code:" caption is in and traverse thru the nodes like this.
c = event.target.parentNode.parentNode.parentNode.nextSibling.getElementsByTagName("td")[0];
You could even put a custom node after the bold-tag like <b>Highlighting ON</b> and attach the eventlistener to it.
Just to give you an idea of what i mean here is how i did it in my script.

function addOnOffHandler(){
	var i, c;
    var e = (document.getElementsByTagName("BODY")[0].getElementsByTagName("B"));
	for(i = 0; i < e.length; i++) if(e[i].text == "Code:") {     //searching for the bold tag that has "Code:" in it
        e[i].addEventListener(
    	'click',
            function(event){
                if(event.target.innerText == "Code: ON"){
                    // traverse thru the nodes till the td where our sourcecode is in
                    c = event.target.parentNode.parentNode.parentNode.nextSibling.getElementsByTagName("td")[0];
                    // make plaintext (no hilighting)
                    // dont get confused by this its a fix for something my highlightning function does.
                    c.innerHTML=c.innerText.replace(/\r\n\n\n/gi,"\r\n<br/>\n");
                    event.target.innerText = "Code: OFF";
                }
                else{
                    c = event.target.parentNode.parentNode.parentNode.nextSibling.getElementsByTagName("td")[0];
                    HighlightNode(c); //this function highlights a node. its not included here
                    event.target.innerText = "Code: ON";
                }
            },false
	    );
	    e[i].innerText = "Code: ON";
    }
}


polyethene
  • Members
  • 5519 posts
  • Last active: May 17 2015 06:39 AM
  • Joined: 26 Oct 2012

This works in Opera. :D

Are you're talking about my script?

we can make this script works only if cookie value was set

Yep, I had that planned already. What should the cookie name prefix be, codeblock-?

ORLY?:D

kk I didn't realize lol.

Btw i find philhos height better. It gives the most script the chance to be seen fully ... and only caps long scripts

The only reason I used an em scale was to keep the code box proportionate to the browser font size. Since this made comparisons difficult, I decided to use pixels in version 0.9.3. Other updates include: changed to single-click for expand/collapse; excluded child nodes from the click event so IE/Opera don't change span attributes and allow text to be selected freely; excluded code blocks that are already small; removed regular expression matches for speed; shortened code; reviewed W3C DOM compliance and added height style for print media: @media print { div { height: 100% !important; } }:
function codeblock() { // by Titan - v0.9.3
	var c = new Array('td', 'code', 'div'), s = '150', i = 0
		, e = document.getElementsByTagName('body')[0].getElementsByTagName(c[0]);
	function set(n) { var v = n || window.event, d = v.type == 'click' ? v.target || v.srcElement
		: e[n].getElementsByTagName(c[2])[0], h = d.offsetHeight; if (d.tagName.toLowerCase() == c[2])
		d.style.height = s <= h ? h == s ? '100%' : s : h, d.style.overflow = 'auto', d.onclick = set; }
	for(i in e) if(e[i].className == c[1]) { if (e[i].innerHTML.toLowerCase().indexOf(c[2]) == -1)
			e[i].innerHTML = '<' + c[2] + '>' + e[i].innerHTML + '</' + c[2] + '>'; set(i); }
}
window.addEventListener ? window.addEventListener('load', codeblock, false) : window.attachEvent('onload', codeblock);

autohotkey.com/net Site Manager

 

Contact me by email (polyethene at autohotkey.net) or message tidbit


majkinetor
  • Moderators
  • 4512 posts
  • Last active: May 20 2019 07:41 AM
  • Joined: 24 May 2006

majkinetor wrote:
This works in Opera.

Are you're talking about my script?

I used bookmarklet provided by PhiLho as you didn't want to create one :p. I understand it is basicly your script...

What should the cookie name prefix be, codeblock-?

Yeah. :p
But I insist GUI configuration on separate AHK page. For this, and for code coloring...
Posted Image

polyethene
  • Members
  • 5519 posts
  • Last active: May 17 2015 06:39 AM
  • Joined: 26 Oct 2012

I used bookmarklet provided by PhiLho as you didn't want to create one :p. I understand it is basicly your script...

Sigh...
clipboard =
ClipWait
clipboard := "javascript:"
	. RegExReplace(RegExReplace(clipboard, "m)//.*$|[\n\r\t]\s+")
	, "window.addEventListener.*", "codeblock();")
MsgBox, bookmarklet prepared!
javascript:function codeblock() { var c = new Array('td', 'code', 'div'), s = '150', i = 0, e = document.getElementsByTagName('body')[0].getElementsByTagName(c[0]);function set(n) { var v = n || window.event, d = v.type == 'click' ? v.target || v.srcElement: e[n].getElementsByTagName(c[2])[0], h = d.offsetHeight; if (d.tagName.toLowerCase() == c[2])d.style.height = s <= h ? h == s ? '100%' : s : h, d.style.overflow = 'auto', d.onclick = set; }for(i in e) if(e[i].className == c[1]) { if (e[i].innerHTML.toLowerCase().indexOf(c[2]) == -1)e[i].innerHTML = '<' + c[2] + '>' + e[i].innerHTML + '</' + c[2] + '>'; set(i); }}codeblock();

autohotkey.com/net Site Manager

 

Contact me by email (polyethene at autohotkey.net) or message tidbit


majkinetor
  • Moderators
  • 4512 posts
  • Last active: May 20 2019 07:41 AM
  • Joined: 24 May 2006
Huh...

This javascripting is so stressfull for me...

Your bookmarklet doesn't work, so I returned back to PhiLhos, and it also doesn't work now ?! I tested it on work today (i think the Opera version on my work is little higher like here I have 9.0 and there 9.02)

I also tested both in IE and none worked....
I also did non bookmarklet versions...


Shit .... hate browsers.. will try on work tomorrow again...
Posted Image

PhiLho
  • Moderators
  • 6850 posts
  • Last active: Jan 02 2012 10:09 PM
  • Joined: 27 Dec 2005
Titan's JavaScript code is almost already in bookmarklet form, as he shown... Actually, I wonder why he still put newlines in his code... :-P

majkinetor, I understand your frustration, sometime I experience the same problems... These softwares are lunatic...
Posted Image vPhiLho := RegExReplace("Philippe Lhoste", "^(\w{3})\w*\s+\b(\w{3})\w*$", "$1$2")

foom
  • Members
  • 386 posts
  • Last active: Jul 04 2007 04:53 PM
  • Joined: 19 Apr 2006

Titan's JavaScript code is almost already in bookmarklet form, as he shown... Actually, I wonder why he still put newlines in his code... :-P

:lol: