Collapsible [code] boxes

Discussion of all aspects of the website, wiki, and forums, including support requests and new ideas.

Moderators: Forum Moderators, Developers

Post Reply
User avatar
shadowm
Site Administrator
Posts: 6542
Joined: November 14th, 2006, 5:54 pm
Location: Chile
Contact:

Collapsible [code] boxes

Post by shadowm » December 19th, 2012, 5:17 am

Hi there,

I have just deployed a minor improvement to the forums adding collapsible [code] boxes to all three supported forum templates, as well as limiting the default [code] box height on subsilver2 and acidtech just like it’s done on prosilver upstream. This means that you no longer need to wrap large [code] blocks in tacky [spoiler] tags.

If you have been around for a while and you have any problems with this new feature on prosilver, make sure to press F5 once so your browser fetches the updated main javascript file. If that doesn’t solve it, state your web browser version below and I’ll see what I can do (unless it’s some obsolete garbage like IE 6).

And yes, you need javascript, just like with [spoiler] or [section] tags. I promise I won’t spam you with pop-up ads or steal your credit card information while browsing these forums with javascript enabled.

Regards
Author of the unofficial UtBS sequels Invasion from the Unknown and After the Storm.

User avatar
8680
Moderator Emeritus
Posts: 742
Joined: March 20th, 2011, 11:45 pm
Location: The past

Re: Collapsible [code] boxes

Post by 8680 » December 19th, 2012, 5:53 am

Perhaps the expand/collapse text-button should be displayed only when there’s enough code in the tag to exceed the height limit? Its current appearance on small code boxes where it does nothing may induce the belief that it is nonfunctional in general.
shadowmaster wrote:This means that you no longer need to wrap large

Code: Select all

 blocks in tacky [spoiler] tags.[/quote]Is such wrapping discouraged? I’ve been wrapping code boxes thus, when I remember to do so, and would continue the practice, unless you’re discouraging it. To me at least, even a height-limited code box occupies sufficiently significant space to warrant spoiler-wrapping.

User avatar
shadowm
Site Administrator
Posts: 6542
Joined: November 14th, 2006, 5:54 pm
Location: Chile
Contact:

Re: Collapsible [code] boxes

Post by shadowm » December 19th, 2012, 8:22 am

8680 wrote:Is such wrapping discouraged?
It looks ugly. Everyone is free to choose whichever formatting they prefer as long as they comply with the forum rules (e.g. [​code​] being the minimum requirement).
8680 wrote:Perhaps the expand/collapse text-button should be displayed only when there’s enough code in the tag to exceed the height limit?
As soon as I figure out an elegant method to achieve this, yes. For the time being, no.
Author of the unofficial UtBS sequels Invasion from the Unknown and After the Storm.

User avatar
cookie
Posts: 169
Joined: December 21st, 2010, 6:57 am

Re: Collapsible [code] boxes

Post by cookie » December 19th, 2012, 10:52 am

shadowmaster wrote:Hi there,
I promise I won’t spam you with pop-up ads or steal your credit card information while browsing these forums with javascript enabled.
Regards


What if we don't trust you? Why is your promise so special sm?

By the way; I don't really get what the improvement is; Could you please elaborate and demonstrate before I decide to enable javascript and risk my security? I do a lot of net banking...
Bye says the cookie.

User avatar
Dugi
Posts: 4921
Joined: July 22nd, 2010, 10:29 am
Location: Carpathian Mountains
Contact:

Re: Collapsible [code] boxes

Post by Dugi » December 19th, 2012, 11:11 am

You may read the page's source code to see if the javascript is evil or not (I haven't found anything wrong there). But you might be afraid to browse other sites while you have it enabled because wesnoth forums need it.
More paranoid version of the reply:

User avatar
cookie
Posts: 169
Joined: December 21st, 2010, 6:57 am

Re: Collapsible [code] boxes

Post by cookie » December 19th, 2012, 3:07 pm

Dugi wrote:
More paranoid version of the reply:
:lol2: Don't worry; I have no doubt that shadowmaster is trustworthy as I've surely known him long enough. The things you should watch out for are his spies...they're ever so quiet and skillfully stationary.
I will allow the javascript to work on this domain, thanks for the heads up shadowmaster and constant effort in development.
Bye says the cookie.

JaMiT
Developer
Posts: 511
Joined: January 22nd, 2012, 12:38 am

Re: Collapsible [code] boxes

Post by JaMiT » December 19th, 2012, 5:07 pm

shadowmaster wrote:And yes, you need javascript, just like with
Spoiler:
It's actually a bit less than that, as you can still see the contents of the code block without javascript; you just cannot expand the block to show the whole thing without a scrollbar. (Spoiler and section tags completely hide their contents when javascript is disabled.)

But however you want to view the javascript requirement, I think it's an improvement. Thanks.

Anonymissimus
Inactive Developer
Posts: 2458
Joined: August 15th, 2008, 8:46 pm
Location: Germany

Re: Collapsible [code] boxes

Post by Anonymissimus » December 19th, 2012, 5:53 pm

Dugi wrote:But you might be afraid to browse other sites while you have it enabled because wesnoth forums need it.
A perfect usecase for noscript.
projects (BfW 1.12):
A Simple Campaign: campaign draft for wml startersPlan Your Advancements: mp mod
The Earth's Gut: sp campaignSettlers of Wesnoth: mp scenarioWesnoth Lua Pack: lua tags and utils
updated to 1.8 and handed over: A Gryphon's Tale: sp campaign

User avatar
8680
Moderator Emeritus
Posts: 742
Joined: March 20th, 2011, 11:45 pm
Location: The past

Re: Collapsible [code] boxes

Post by 8680 » December 19th, 2012, 8:27 pm

Would this work to apply expanders only to expandable code boxes?

Code: Select all

function getCodeBoxes() {
    // May return a NodeList, a HTMLCollection, or an Array; only safe to use
    // getCodeBoxes().length and getCodeBoxes()[i].
    if (document.getElementsByClassName) // For modern browsers.
        return document.getElementsByClassName("codebox");
    if (document.querySelectorAll) // For IE8.
        return document.querySelectorAll(".codebox");
    var e, i, r = [], dls = document.getElementsByTagName("dl"); // For IE7.
    for (i = 0; i !== dls.length; ++i)
        if ((e = dls[i]).className === "codebox")
            r.push(e);
    return r;
}

function applyCodeBoxExpanders() {
    var c, i, cb, df, codeBoxes = getCodeBoxes();
    for (i = 0; i !== codeBoxes.length; ++i) {
        cb = codeBoxes[i];
        c = cb.lastChild.firstChild; // The <code> element.
        if (c.clientWidth !== c.scrollWidth) { // Has scrollbar.
            df = document.createDocumentFragment();
            (df.textContent || df.innerText) = " • ";
            c = document.createElement("a");
            (c.textContent || c.innerText) = "Expand";
            c.href = "#";
            c.onclick = function() {
                toggleCodeExpand(this, "Expand", "Collapse");
                // Why specify the label strings at the call site and not in
                // the function?
            };
            df.appendChild(c);
            cb.firstChild.appendChild(df);
        }
    }
}

onload_functions.push("applyCodeBoxExpanders()");
// on[un]load_functions: Currently you’re pushing strings representing function
// calls into these arrays, then eval()ing the strings. Why not push the
// functions, then call them from the arrays?

User avatar
shadowm
Site Administrator
Posts: 6542
Joined: November 14th, 2006, 5:54 pm
Location: Chile
Contact:

Re: Collapsible [code] boxes

Post by shadowm » December 19th, 2012, 8:52 pm

8680 wrote:Would this work to apply expanders only to expandable code boxes?
I’ll try that out later, but a few things stand out:
8660 wrote:

Code: Select all

    var e, i, r = [], dls = document.getElementsByTagName("dl"); // For IE7.
This has the potential to be a more costly operation than it should be, since prosilver uses <dl> a lot for other things.
8660 wrote:

Code: Select all

// Why specify the label strings at the call site and not in
// the function?
Because that’s the only way to make them work with the phpBB language packs mechanism unless I move the relevant code to an actual template file. This would not normally matter, but I may or may not revisit the forum language support issue at a later point depending on certain community trends. It also ensures some degree of consistency with mainline phpBB practice.
8660 wrote:

Code: Select all

// on[un]load_functions: Currently you’re pushing strings representing function
// calls into these arrays, then eval()ing the strings. Why not push the
// functions, then call them from the arrays?
This is really a question for the phpBB developers, and more specifically, the prosilver template maintainer(s).
Author of the unofficial UtBS sequels Invasion from the Unknown and After the Storm.

User avatar
8680
Moderator Emeritus
Posts: 742
Joined: March 20th, 2011, 11:45 pm
Location: The past

Re: Collapsible [code] boxes

Post by 8680 » December 19th, 2012, 9:26 pm

shadowmaster wrote:This has the potential to be a more costly operation than it should be, since prosilver uses <dl> a lot for other things.
Do you have a narrower filter that works in IE7?
shadowmaster wrote:Because that’s the only way to make them work with the phpBB language packs mechanism unless I move the relevant code to an actual template file.
What about emitting them as global variables in the inline <script>, after on[un]load_functions, then referencing the variables in toggleCodeExpand?
shadowmaster wrote:This is really a question for the ... prosilver template maintainer(s).
How should I contact them? (I’ll look around on phpBB.com, but you might have more specific advice.) (Edit: Googling “contact prosilver maintainers” yielded both this forum and your blog on the first page.)

Also, I recommend using (a.textContent || a.innerText) rather than a.innerHTML in toggleCodeExpand, for security.

User avatar
shadowm
Site Administrator
Posts: 6542
Joined: November 14th, 2006, 5:54 pm
Location: Chile
Contact:

Re: Collapsible [code] boxes

Post by shadowm » December 23rd, 2012, 1:36 am

8680 wrote:Do you have a narrower filter that works in IE7?
Probably not. I don’t really know much Javascript, to be honest.
8680 wrote:What about emitting them as global variables in the inline <script>, after on[un]load_functions, then referencing the variables in toggleCodeExpand?
That is a possibility I considered if I ever need to pass even more such constants to Javascript code. Which might not necessarily be never, seeing as how I want to ship a certain feature for Gambit eventually.
8680 wrote:How should I contact them? (I’ll look around on phpBB.com, but you might have more specific advice.)
Unfortunately, I can’t think of anything other than filing a bug to the phpBB bug tracker explaining the issue and (optionally) providing a pull request for a patch or set thereof.
8680 wrote:Also, I recommend using (a.textContent || a.innerText) rather than a.innerHTML in toggleCodeExpand, for security.
Hard to see how this could be an issue unless there is extraneous Javascript running in the same context and calling the function in question, or the server-side template and/or language constants were compromised — which would raise a myriad different security concerns.
Author of the unofficial UtBS sequels Invasion from the Unknown and After the Storm.

User avatar
Captain_Wrathbow
Posts: 1664
Joined: June 30th, 2009, 2:03 pm
Location: Guardia

Re: Collapsible [code] boxes

Post by Captain_Wrathbow » January 4th, 2013, 10:16 pm

After having this for a few weeks and seeing the new

Code: Select all

 boxes around the forums, I just thought I'd pop in and say that I really like this feature. Thanks shadowm! :)

User avatar
8680
Moderator Emeritus
Posts: 742
Joined: March 20th, 2011, 11:45 pm
Location: The past

Re: Collapsible [code] boxes

Post by 8680 » January 5th, 2013, 12:07 am

For the record, I inquired regarding on[un]load_functions, and haven’t received a response.

User avatar
8680
Moderator Emeritus
Posts: 742
Joined: March 20th, 2011, 11:45 pm
Location: The past

Re: Collapsible [code] boxes

Post by 8680 » May 6th, 2013, 7:49 pm

I have submitted a pull request to weldyn for a commit implementing a somewhat modified version of my above proposed changes to show the expand/collapse buttons only for [code] boxes with scrollbars (albeit only in the default prosilver theme).

Update: This pull request, after some further work, was merged by shadowmaster at 02013-06-13 02:27:19 UTC, who then adapted my changes for prosilver to the subsilver2 and acidtech themes at 02013-06-13 07:54:52 UTC and 02013-06-13 08:03:35 UTC respectively.

Post Reply