npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

laxar-show-hide-widget

v3.0.0

Published

Toggles the visibility of an area upon receiving events.

Downloads

1

Readme

laxar-show-hide-widget Build Status

Toggles the visibility of an area upon receiving events.

Content

Appearance

The widget does not display anything, but provides an area for other widgets and shows or hides this area depend on events.

Usage

Installation

For installation instruction take a look at the LaxarJS documentation.

Configuration Example

"mainWidgetArea": [
   {
      "widget": "laxar-headline-widget",
      "features": {
         "headline": {
            "i18nHtmlText": "Above the laxar-show-hide-widget area"
         }
      }
   },
   {
      "widget": "laxar-show-hide-widget",
      "id": "myToggle",
      "features": {
         "show": {
            "onActions": [
               "showContent"
            ]
         },
         "hide": {
            "onActions": [
               "hideContent"
            ]
         },
         "area": {
            "name": "content"
         }
      }
   }
]
"myToggle.content": [
   {
      "widget": "laxar-headline-widget",
      "features": {
         "headline": {
            "i18nHtmlText": "Content to show/hide"
         }
      }
   }
]

Use this configuration on a page to get a laxar-show-hide-widget instance.

In this example there are two AxHeadlineWidget which display a simple headline. The first headline is in the main widget area of the page and is visible all the time. The second headline is in the widget area of the laxar-show-hide-widget and can be shown or hidden.

The area provided by the laxar-show-hide-widget is named using its id and the configuration parameter area.name. The widget shows this area if it receives a takeActionRequest for one of the action configured under show.onActions and hides the area when it receives a takeActionRequest for one of the action configured under hide.onActions.

For full configuration options refer to the widget.json.

Features

1. Provide a Widget Area (area)

R1.1 The widget MUST provide an area for widgets and controls its visibility.

R1.2 The name of the area MUST be configurable and MUST have the default name content.

2. Show Widget Area (show)

R2.1 The widget MUST support the configuration of action events. If the widget receives a takeActionRequest event of one of these, it MUST show the provided widget area.

3. Hide Widget Area (hide)

R3.1 The widget MUST support the configuration of action events. If the widget receives a takeActionRequest event of one of these, it MUST hide the provided widget area.

4. Visibility (visibility)

R4.1 The widget MUST report the visibility of the provided widget area to the page by a configurable flag.

R4.2 The widget MUST report the initial status after receiving the didNavigate event.

R4.3 The widget MUST support the change of the visibility by flags. If the value of any of the configured flags is true the widget MUST show the provided widget area. If the value of all flags is false the widget MUST hide the provided widget area.

R4.4 The widget MUST hide the widget area at the initial page status by default. The widget MUST allow the configuration to display the provided widget area at the initial page status. Any request via event for a visibility change MUST considered by the widget.

R4.5 The widget MUST handle visibility requests for the widget in its widget area in relation to its own visibility.

R4.6 The widget MUST trigger a visibility request for its provided widget area when the show/hide state changes.

5. Animation (animation)

R5.1 When the widget shows or hides the widget area it SHOULD do this with an animation. Except when the widget shows the widget area at the initial page status. The animation SHOULD be enabled by default.

Integration

Patterns

The widget supports the following event patterns as specified by the LaxarJS Patterns document.

Actions

  • Action: show.onActions[*]

    • Role: Receiver
    • Description: Trigger the widget to show the widget area
  • Action: hide.onActions[*]

    • Role: Receiver
    • Description: Trigger the widget to hide the widget area.

Flags

  • Flag: visibility.toggleOn

    • Role: Receiver
    • Description: Trigger the widget to show (true) or to hide (false) the widget area.
  • Flag: visibility.flag

    • Role: Sender
    • Description: The flag is true if the widget area is shown.

Visibility

The widget manages visibility events for the configured area (area.name).

References

The following resources are useful or necessary for the understanding of this document. The links refer to the latest version of the documentation. Refer to the bower.json for the specific version that is normative for this document.