Spoilers

Home Forums Forum Spoilers

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #294
    DeVaultSetter
    Keymaster

      Looking through Robin’s style pack for spoiler tags – came up empty. A basic spoiler tag is as good as any, and not being a frequent user, it’s much further down the priority list. 🙂

      #1335
      Bob Marley
      Keymaster

        I had an idea on how to hack something together via CSS. I could set up a style for a custom class for the default to be black text on a black background and then use the hover pseudo-class to change the font to normal and remove the background color. On the user side, you’d need to wrap the stuff you want to denote as a spoiler in a span tag and add the class to the class attribute

        Wouldn’t be as nice as the collapsible box we’re used to but should do in a pinch

        • This reply was modified 8 months, 2 weeks ago by Bob Marley.
        #1346
        DeVaultSetter
        Keymaster

          There’s quite a bit going with it, because obviously there has to be a button that triggers the event.
          Here’s a recent thread where Milan has commented. There is still this fork of an early Tom Braider iteration, very old and now read-only. Tom Braider had the following code for WP 4.5:

          `<?php
          /*
          Plugin Name: Tiny Spoiler
          Plugin URI: http://www.tomsdimension.de/wp-plugins/tiny-spoiler
          Description: [spoiler name=”top secret”]shows/hides this text[/spoiler]
          Version: 0.2
          Author: Tom Braider
          Author URI: http://www.tomsdimension.de
          */

          /**
          * adds stylesheet
          */
          function insert_spoiler_css()
          {
          echo “<style type=’text/css’>
          .spoiler { border: 1px #000 dashed; }
          .spoiler legend { padding-right: 5px; background: white; }
          .spoiler legend input { width: 30px; }
          .spoiler div { margin: 0px; overflow: hidden; height: 0; }
          </style>\n”;
          }
          add_action(‘wp_head’, ‘insert_spoiler_css’);

          /**
          * adds javascript
          */
          function insert_spoiler_js()
          {
          echo <<<ENDJS
          <script type=’text/javascript’>
          function tiny_spoiler( id )
          {
          var s = document.getElementById( id ).style;
          var divs = document.getElementsByTagName(‘div’);

          if ( s.height == ‘auto’ )
          {
          s.height = 0;
          s.padding = 0;
          document.getElementById( id + ‘_button’ ).value = ‘+’;
          for ( var i = 0; i < divs.length; i++ )
          {
          if ( divs[i].parentNode.id == id )
          divs[i].style.height = 0;
          }

          }
          else
          {
          s.height = ‘auto’;
          s.padding = ’10px’;
          document.getElementById( id + ‘_button’ ).value = ‘-‘;
          for ( var i = 0; i < divs.length; i++ )
          {
          if ( divs[i].parentNode.id == id )
          divs[i].style.height = ‘auto’;
          }
          }
          }
          </script>
          ENDJS;
          }

          add_action(‘wp_footer’, ‘insert_spoiler_js’);

          /**
          * creates spoiler code
          *
          * @param string $content spoiler content
          * @param string $name title
          * @return string spoiler code
          */
          function replace_spoiler_tag( $content, $name )
          {
          $content = do_shortcode( $content );
          $caracteres = array(‘a’,’b’,’c’,’d’,’e’,’f’,’g’,’h’,’i’,’j’,’k’,’l’,’m’,’n’,’o’,’p’,’q’,’r’,’s’,’t’,’u’,’v’,’w’,’x’,’y’,’z’);
          $addition = ”;
          for ( $i = 0; $i < 10; $i++ )
          $addition .= $caracteres[rand(0,25)];
          $id = str_replace(‘ ‘, ”, $name).$addition;
          $s = ‘<fieldset class=”spoiler”>
          <legend>
          <input type=”button” onclick=”tiny_spoiler(\”.$id.’\’)” id=”‘.$id.’_button” value=”+” />
          ‘.$name.’
          </legend>
          <div id=”‘.$id.'”>’
          .$content.’
          </div>
          </fieldset>’;
          return $s;
          }

          /**
          * parses parameters
          *
          * @param string $atts parameters
          * @param string $content spoiler content
          * @return unknown
          */
          function spoiler_shortcode( $atts, $content )
          {
          extract(shortcode_atts(array(
          ‘name’ => ‘Spoiler’
          ), $atts));
          return replace_spoiler_tag( $content, $name );
          }
          add_shortcode(‘spoiler’, ‘spoiler_shortcode’);
          ?>`

          Do you think we could zhuzh it up a bit for good effect?

          #1350
          Bob Marley
          Keymaster

            Just implemented a basic spoiler tag!

            <span class="stearnvault-spoiler">This is a spoiler</span>

            This is a spoiler

            Hover over the black box with the cursor to reveal it. Will that work?

            • This reply was modified 8 months, 1 week ago by Bob Marley.
            #1352
            DeVaultSetter
            Keymaster

              Pretty good, thanks!
              Along with the black box you could have the text “hover to reveal” or similar – depends how long the text is of course. Any chance it could it be placed on the menu?

              #1354
              Bob Marley
              Keymaster

                Will need to play with it some to see if I can get the note added. It’s not letting me change the background color in the ::after style block but that may be due to something else. Not sure if it’s something I can fix or not but I’ll try!

                No idea how to add it to the menu but I’ll do some reading on it. We may need a plugin for customization like that, though.

                #1357
                Bob Marley
                Keymaster

                  Still looking into adding the note but I’ve confirmed that the spoiler works on mobile by tapping the hidden text. Also, it looks like a plugin is required to add options to the editor for some reason. Will look into that! Surprised it’s not part of WordPress as it’s kind of a basic feature

                  #1404
                  DeVaultSetter
                  Keymaster

                    In the meantime, why not add it as a extra feature in the forum stickie? Seems like a good home, as it is for those coming to grief with special characters such as less_than ampersands greater_thans. 😛

                    #1412
                    Bob Marley
                    Keymaster

                      And added!

                    Viewing 9 posts - 1 through 9 (of 9 total)
                    • You must be logged in to reply to this topic.

                    Home Forums Forum Spoilers