Skip to content

JavaScript components

Justin Perry edited this page Mar 3, 2015 · 6 revisions

Wrapper class for Chosen autocomplete library.

Displays characters remaining from a given total. Used with form inputs. Adds classes when active/above/below/equal the total character allowance.

  • Tests [y]
  • Accessibility tested [n]
  • CMS only [n]

Displays a Modal dialog using the HTML5 <dialog> element. Uses dialogPolyfill for backwards compatibility (full browser compatibility hasn't been tested).

  • Tests [y]
  • Accessibility tested [n]
  • CMS only [n]

Used to toggle display of elements within a container.

  • Tests [y]
  • Accessibility tested [n]
  • CMS only [n]

Removes a class from an element after a set duration. On the CMS it is used in conjunction with CSS3 transitions to fade out and hide status messages.

  • Tests [y]
  • Accessibility tested [n]
  • CMS only [n]

Manages the state of the Image Dialog on the CMS. Extension of InsertManager.

  • Tests [y]
  • Accessibility tested [n]
  • CMS only [y]

Manages the state of the Insert Link and Insert Image Dialogs on the CMS.

  • Tests [y]
  • Accessibility tested [n]
  • CMS only [y]

Manages the state of the Insert Link Dialog on the CMS. Extension of InsertManager.

  • Tests [y]
  • Accessibility tested [n]
  • CMS only [y]

Enables drag 'n' drop sorting of a list (via HTML5Sortable) and saves sorted list to an array within a <input> field, ready for passing to the backend.

  • Tests [y]
  • Accessibility tested [n]
  • CMS only [n]

Enables the article editor and its dependencies.

  • Tests [y]
  • Accessibility tested [n]
  • CMS only [y]

Mirrors the entered value of an <input> into a target <input>. If the target <input> is updated, then the link between the two is broken and any further updates aren't copied into the target. This is used on the CMS to auto-populate the Meta title input when the user enters an Article title. The link breaking could be made an optional and controlled via the component's config.

  • Tests [y]
  • Accessibility tested [n]
  • CMS only [n]

A dynamic tooltip component. Extends Collapsable. Used on CMS for inline menus/activity log popup. Options for horizontal/vertical alignment , top/right/bottom/left positioning and hide on blur.

  • Tests [y]
  • Accessibility tested [n] - Has accessibility from Collapsable but needs further review.
  • CMS only [n]

Gets the schedule data from the Article form.

  • Tests [n]
  • Accessibility tested [n]
  • CMS only [y]

Submits a form when a <select> box value is changed.

  • Tests [y]
  • Accessibility tested [n] - But shouldn't provide any accessibility concerns.
  • CMS only [n]

Inserts a text snippet (from snippets model) into a <textarea> at the cursor location.

  • Tests [y]
  • Accessibility tested [n]
  • CMS only [n]

Wrapper class for fixed-sticky.

  • Tests [n]
  • Accessibility tested [n]
  • CMS only [n]

Manages the Delete Tag Dialog.

  • Tests [y]
  • Accessibility tested [n]
  • CMS only [y]

Generates a slug based on the Article title and Article Page type and updates the slug input box.

  • Tests [y]
  • Accessibility tested [n]
  • CMS only [y]

Changes the URL of the page based on which radio button is selected. In the CMS this is used in conjunction with the CSS toggle button component, but they can be used independently of one another.

  • Tests [n]
  • Accessibility tested [n] - But shouldn't provide any accessibility concerns.
  • CMS only [n]

Displays a live word count. This is currently restricted to a contentEditable element but could be easily updated to work with form inputs.

  • Tests [y]
  • Accessibility tested [n]
  • CMS only [n]

Custom Scribe plugins

Inserts an image into an article.

  • Tests [n]
  • Accessibility tested [n]
  • CMS only [y]

Formats and inserts a link into an article.

  • Tests [n]
  • Accessibility tested [n]
  • CMS only [y]

Inserts snippets from snippets model into an article.

  • Tests [n]
  • Accessibility tested [n]
  • CMS only [y]

Utilities

filterEvent

Used to filter events from eventsWithPromises.