gs.content.js.disclosure

Author:Michael JasonSmith
Contact:Michael JasonSmith <mpj17@onlinegroups.net>
Date:2016-01-22
Organization:GroupServer.org
Copyright:This document is licensed under a Creative Commons Attribution-Share Alike 4.0 International License by OnlineGroups.net.

Contents:

Page markup

This product provides a JavaScript module as a Zope browser resource. Any Zope or Plone project should be able to use this product as-is by placing the following line in a page template.

<script type="text/javascript"
        src="/++resource++gs-content-js-disclosure-20160122.js"
        defer="true"> </script>

Users of other systems are invited to copy the file gs/content/js/disclosure/browser/javascript/disclosure.js out of this product.

A minified version of the code is also available:

<script type="text/javascript"
        src="/++resource++gs-content-js-disclosure-min-20160122.js"
        defer="true"> </script>

Widget markup

The markup for each disclosure button contains of a <div> element for the entire widget, a paragraph that contains a button, and another <div> for the content to show or hide

<div class="disclosureWidget">
  <p>
    <a class="disclosureButton" role="button"
       aria-controls="show-hide-id">Foo</a>
   </p>
   <div id="show-hide-id"
        class="disclosureShowHide"
        style="display:none;">
        This is hidden by default.
   </div>
</div>

CSS classes are used to mark the components of the disclosure widget:

  • disclosureWidget for the main widget.
  • disclosureButton for the button.
  • disclosureShowHide for the content to show or hide.

The style attribute on the content determines if the content is shown (display:block;) or hidden (display:none;) by default.

Aria:The markup above shows an aria-controls and role attribute on the button; there is an id attribute on the content container. All are good practice, but unnecessary (unless you rely on accessibility technology, when they become highly important). The system will add an aria-hidden attribute to the content container as necessary

JavaScript module

The disclosure button is implemented by the GSDisclosureButton() module.

class GSDisclosureButton()
init()

Apply the disclosure-button to all the HTML with the appropriate markup

show_all()

Show the contents of all the disclosure widgets.

hide_all()

Hide the contents of all the disclosure widgets.

toggle_all()

Show the contents of all the hidden disclosure widgets, and hide the contents of all the shown disclosure widgets. (The click event is sent to all the disclosure widgets.)

Changelog

1.2.1 (2016-01-22)

  • Fixing some errors thanks to the Google JavaScript linter
  • Re-minifying the JavaScript
  • Naming the reStructuredText files as such
  • Pointing to GitHub as the canonical repository
  • Adding the documentation to Read the Docs

1.2.0 (2014-03-13)

  • Fixing a Microsoft Internet Explorer 8 issue
  • Switching the JavaScript to strict mode

1.1.2 (2013-11-06)

  • Updating the product metadata

1.1.1 (2013-08-30)

  • Updating the product metadata

1.1.0 (2013-05-30)

1.0.1 (2013-03-18)

  • Updating the product metadata

1.0.0 (2013-02-14)

Initial version. Prior to the creation of this product the JavaScript for the disclosure button was part of Products.GSContent.

This product provides a JavaScript resource for implementing disclosure buttons. In general, A disclosure button is used to hide non-essential data from the user. Error messages, and collapsing-tree views of folders are two common examples. While their presentation may vary, the buttons are present in the widget sets used by Microsoft Windows, Apple Aqua, GNOME, and KDE.

In GroupServer, disclosure buttons are mostly used to hide the bottom-quoting and signatures at the end of posts. However, the system is generic, and can be used to hide arbitrary information. If the correct markup is followed, the JavaScript code will add the event-handlers to show or hide the information, as appropriate.

In addition to the event handler, an arrow is added to each button, which indicates the state of the disclosure widget. The arrow points to the right when the information is hidden, and points down when the data is shown.

A disclosure button is created by adding some CSS classes to the markup of the page. JavaScript code can manipulate the buttons by calling various functions.

Indices and tables