Modifying the Spoiler plugin to act like WordPress "More..."

rbrahmson

First thanks to @peregrine and @hgtonight who helped me get to the point of being able to make this change.

I wanted a functionality similar to the "More..." button seen in many WordPress blogs. I wanted it to be minimalistic - small out of the way button, no special border and backgrounds, and to say "More..." and "...Less".

I had to slightly change every piece of the plugin (though these are minor changes):

1) In the plugin code class.spoilers.plugin.php I had to change the $Attribution variable to hide the text preceding the button and the button text. The change is in protected function SpoilerCallback a follows:

    $Attribution = T('More... %s');  
    $Attribution = T(' %s'); 

2) Change the Javascript code to place the "More..." and "...Less" text on the button Lines 24, 40 and 42):

        SpoilerButton.value = 'More...';
        SpoilerButton.val('More...');
        SpoilerButton.val('...Less');

3) Change the CSS file to have the desired appearance.

    div.UserSpoiler div.SpoilerTitle {
       font-weight: bold;
    }
    div.UserSpoiler div.SpoilerTitle span {
       color:red;/*PA  color: white;*/
    }
    div.UserSpoiler input {
       display: inline;
       font-weight: bold;
       margin: 0;
       padding: 0px 4px;/*PA 2px 5px; */
       text-decoration: none;
       cursor: pointer;
       color:green;/*PA color: #1E79A7; */
       text-transform: capitalize; /*PA  */
    }
     div.SpoilerTitle input {
       display: inline;
       font-weight: bold;
       text-decoration: none;
       cursor: pointer;
       color:blue;/*PA color: #1E79A7; */
       float:right;/*PA  */
       text-transform: capitalize; /*PA  */
    }
    div.UserSpoiler div.SpoilerText {
       display: none;
    }

Attached screens show how it looks




[spoiler]
The only thing I am not convinced of is the issue of posting the modded plugin. I understand that for the developer and other experienced modders it is preferable to see the changes posted (and explained) in this discussion. But I see so many newbies (like me) who are not yet programmers and who would find benefit from ready-to-use modifications.

That said, not to upset anyone I am posting below the changes as well as screen shots but not the modified plugin[/spoiler]

Linc

Eventually we'll do this: https://github.com/vanilla/vanilla/issues/2426

rbrahmson

Thanks @linc. I hope one of the styles you will support will be a "More..." similar to the above.