IGP:Widget Reveal Me

Overview

Widgets hides and shows content in the primary content flow. It is more useful for reflowable presentation content than fixed layout unless the content is in a scrolling panel and can expand appropriately. Reveal is another tool for the education writer/designers toolkit. It is particularly useful for explorative content.

Sample Reveal

You can see this widget in action by clicking on the word Me in the title. You can also see it by clicking Reveal Panel here.

Production and Design

The default presentation design is as simple as possible and can be  customized as needed. You can customize Reveal Panels globally using the CSS selector, or individually using their ID.

Reveal block don't have any size set. it will expand automatically according to the content inside it and the bounding block it is within.

The Reveal Panel will always be inserted after the paragraph or HTML5 structure from which it is called. It does not break the HTML structure. You need to take this into account with your authoring and design.

Reveal Panel content blocks can be placed anywhere in the HTML5 document. It may be useful to insert them immediately after their reference call in text, or to accumulate them at the end of the section for general maintenance. 

For print PDF output, reveal content can be treated as noteboxes, sidebars or margin-notes.

Using in IGP:Digital Publisher

Reveal is content block IGP:Widget W06. To insert Widgets Reveal into the IGP:Writer document.

1. Place your cursor in an empty paragraph where you want to insert the Reveal content block. It can be anywhere in the document.
2. From the Content Block accordions click W01: Widgets and
3. Double click the on "06 Reveal" button.
4. The Reveal content block will be inserted into the writer in the cursor location. It contains short placeholder text.
5. You can directly author, copy/paste or construct your content into the Reveal Widget content block.

Creating a Reveal Panel Call Reference

To create a Panel Reveal call reference:

1. Select the text/content from where you want any particular popup text block to be called or opened.
2. From the Content Block accordions, INLINE styles, click on the "Reveal Reference" inline selector.
3. The selected text will have the Panel Reveal reference tag applied and will turn blue.
4. The ID-Reference must point to the ID of the Reveal Panel. The Reveal Panel ID must be unique in the section. You can use ID Generation Document IDs from Document Processors, or manually insert an ID using the ID option in Block Controls.
5. Get the ID of the Panel Reveal block from the Content Block Tool (Open the tools, click on ID and copy the ID).
6. Click on the Reveal Reference text. It will open a dialog so you can enter the Panel Reveal block reference ID.
7. Paste the correct Panel Reveal block ID you just copied and click on the OK button.
8. Save the Writer document and view the section in the Reader panel.
9. When you click on the Panel Reveal reference text the Panel text will transition open. Click again to close.

Notes. Do NOT place HTML styling on the Reveal Reference. Use CSS for consistency and to ensure your tagging sequence does not interfere with the operation of the Javascript.

You can use any number of Reveal Panels in a document and document section as long as the ID's are unique.

 Tagging Pattern and CSS

Reveal Panel Tagging Pattern

<!-- REVEAL PANEL -->
<div class="widgets-rw reveal-rw">
<h4>I am a Panel Reveal Content Block</h4>
<p>Your content goes here. You can insert any content including:
   Text, images, audio and video.</p>
</div>
<!-- REVEAL PANEL REFERENCE LINK -->
<span class="ref-reveal-rw" data-pp-target="pp1">Hello</span>

 Note that Widget references use the HTML5 data- attribute.

PopUp Panel Default CSS

/* Reveal =================== */
div.reveal-rw {
    position: relative;
    background-color: rgb(200, 255, 220);
    border-radius: 0px;
    padding: 10px;
    margin: 10px 0 10px 0;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    color: rgb(0, 0, 0);
    display: none;
    }

/*DEFAULT REVEAL PANEL REFERENCE CSS ========= */
.ref-panel-reveal-rw {
    color: blue;
    text-decoration: none;
    cursor: pointer;
    }
.ref-panel-reveal-rw:hover {
    text-decoration: underline;
    }

 The Reveal Text used on this page is located between these dotted lines but cannot be seen in a normal view.

=========================