[Browser+forum]Codebox Expander: a Greasemonkey script

[bdeshi]

!!THIS IS NOT A XYPLORER SCRIPT, IT'S JUST A JAVASCRIPT ADDON/SCRIPT FOR WEB-BROWSERS!!

Made a Greasemonkey script to allow expanding codeboxes of forum's prosilver theme.

CodeBoxExpander.png

INSTALLATION:

• First install Greasemonkey for Firefox ; or it's browser-specific clones: Tampermonkey for Opera / Chrome
• Then copy the code below
• Installation instructions for Firefox/Greasemonkey:
  • Then open Firefox's Addon Manager -> User Scripts tab -> click the "New User Script" button.
  • And then click the "Use Script from Clipboard" button.
• Installation instructions for Chrome+Opera/Tampermonkey:
  • Click the Tampermonkey toolbar button, click "Dashboard".
  • Then again click the Tampermonkey toolbar button, this time click "Add a new script...".
  • Paste the copied code into the textbox and save (CTRL+S).

vv COPY THIS CODE vv

Code: Select all

// ==UserScript==
// @name        XYBetaClub ProSilver CodeBox Expander
// @namespace   "SammaySarkar_GMScripts"
// @description expand/collapse phpbb ProSilver theme's codeboxes. Intended for XYplorer Beta Club
// @version     3.1
// @author      SammaySarkar
// @include     /^https?\://(www.)?xyplorer\.com/xyfc/viewtopic\.php\?.*/
// @include     /^https?\://(www.)?xyplorer\.com/xyfc/posting\.php\?.*/
// @grant       none
// ==/UserScript==
(function (){
var expandAll = 1;

var codeBoxArray = document.querySelectorAll('dl.codebox code');

if (codeBoxArray.length > 0) {
   
   var selBtnArray = document.querySelectorAll('dl.codebox dt');

   for (var i = 0; i < codeBoxArray.length; i++) {
      selBtnArray[i].innerHTML = selBtnArray[i].innerHTML + 
         '&nbsp;&nbsp;//&nbsp;&nbsp;<a href="#" onclick="return false;" class="expand_btn">Expand</a>';
      
      if (expandAll == 1) {
         selBtnArray[i].parentNode.getElementsByTagName('code')[0].style.maxHeight = 'none';
         selBtnArray[i].parentNode.getElementsByTagName('code')[0].style.overflowY = 'auto';
         selBtnArray[i].parentNode.getElementsByTagName('code')[0].style.whiteSpace = 'pre';
      }

      document.getElementsByClassName("expand_btn")[i].addEventListener('click', function () {
         var coCode = this.parentNode.parentNode.getElementsByTagName('code')[0];
         var coCodeH = window.getComputedStyle(coCode,null).getPropertyValue('max-height');
         if (coCodeH != 'none'){
            coCode.style.maxHeight = 'none';
            coCode.style.overflowY = 'auto';
            coCode.style.whiteSpace = 'pre';
         } else if (coCodeH == 'none'){
            coCode.style.maxHeight = '200px';
            coCode.style.overflowY = 'auto';
            coCode.style.whiteSpace = 'normal';
         }
      });

   }

}

})();
// == changelog ==
// v3.1  expanding also toggles off auto-wrapping in codeboxes
// v3    sanity check.
//       also variable expandAll controls initial toggled state of codeboxes.
//       includes posting.php (create+edit post)
// v2.1  tweaked @include regExp to re-support Firefox
// v2    converted @include to regExp, to make scipt compatible with Opera/Tampermonkey
// v1    hello internet!

[/size]Confirmation: works in Firefox, Opera, Chrome.
Installation steps in other browsers may vary. Also may not work in other browsers.

[highend]

Is it complete, Sammy?

You screenshot shows "CODE: SELECT ALL // EXPAND" but your code doesn't contain any "SELECT ALL" references?

[bdeshi]

Yes, it does what it's supposed to do.
var selBtnArray is the reference you're looking for. It's an array of all "select all" elements found in the page.

[binocular222]

it works, thanks

[bdeshi]

v3 over there on the first post.

[bdeshi]

v3.1. toggle autowrapping.