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

easy-navigation

v2.1.195

Published

A responsive accordion and associated navigation.

Downloads

316

Readme

Easy Navigation

A responsive accordion and associated navigation.

There is an accordion element, which can take an array of arrays of articles, together with a navigation element. The two can be used in tandem or independently. They are responsive in the sense that they can be easily styled to work together with only one of them showing at any one time. They can also be made to respond to changes in the browser's address bar.

JSX support

There is now support for JSX in the form of Juxtapose. What this means is that Easy will now help you with the architecture of your large application. So although Easy elements will continue to work standalone, their use with Juxtapose is recommended.

Easy projects

Installation

You can install Easy Layout with npm:

npm install easy-navigation

You can also clone the repository with Git...

git clone https://github.com/djalbat/easy-navigation.git

...and then install the dependencies with npm from within the project's root directory:

npm install

Example

There is a small development server that can be run from within the project's directory with the following command:

npm start

The example will then be available at the following URL:

http://localhost:8888

The source for the example can be found in the src/example.js file and correspondingsrc/example folder. You are encouraged to try the example whilst reading what follows. You can rebuild it on the fly with the following command:

npm run watch-debug

The development server will reload the page whenever you make changes.

One last thing to bear in mind is that this package is included by way of a relative rather than a package import. If you are importing it into your own application, however, you should use the standard package import.

Usage

A view class that utilises both the accordion and associated navigation is shown below:

import Accordion from "./accordion";
import ArticlesArray from "./articlesArray";
import AccordionNavigation from "./navigation/accordion";

class View extends Element {
  showArticle(uri, instantly) {
    this.updateAccordion(uri, instantly);
    this.updateAccordionNavigation(uri);
  }

  childElements() {
    const showArticle = this.showArticle.bind(this);
    
    return ([

      <Accordion ArticlesArray={ArticlesArray} showArticle={showArticle} />,
      <AccordionNavigation ArticlesArray={ArticlesArray} showArticle={showArticle} />

    ]);
  }

  initialise() {
    this.assignContext();
  }

  static tagName = "div";

  static defaultProperties = {
    className: "view"
  };
}

You must pass a showArticles() method to both the accordion and associated navigation as well as an array of arrays of articles. Note that local instances of both have been used in order that custom styles can be applied. This is explained in greater detail in the section on styles that comes next.

Calling the assignContext() method in the view's initialise() method makes the updateAccordion() and updateAccordionNavigation() methods available to the view and it is these methods that are called from its showArticle() method. Note that the updateAccordion() method takes optional instantly and callback arguments. If set to true the instantly argument will force the acoordion to show articles instantly, that is, with no animations. The callback argument allows a callback function to be provided that is invoked when the animation completes. If the instantly argument has been set to true, this callback is called immediately.

An example array of arrays of articles is shown below:

const ArticlesArray = [ ///
  [ HomeArticle, LinksArticle, ButtonsArticle, HeadingsArticle ],
  CodesArticle,
  InputsArticle,
  SectionsArticle
];

export default ArticlesArray;

In fact not all the elements of the outermost array need to be arrays, single articles are coerced into arrays automatically. For genuine arrays the first element is taken as the main article in that it's title is shown in the accordion and associated navigation buttons. There is no second level navigation to enable the other articles to be shown. However, if they are shown by means of links or whatever, both the accordion and associated navigation will respond by enabling the button corresponding to the first article in the array, thus allowing the user to navigate back to it.

The articles provided must have title, uri and path static properties. For example:

import Article from"/../article";

import { buttonsURI } from "../uris";
import { buttonsPath } from "../paths";

export default class ButtonsArticle extends Article {
  childElements() {
    return (

      <div>
        <h1>
          Buttons
        </h1>
      </div>

    );
  }

  static uri = buttonsURI;

  static path = buttonsPath;

  static title = "Buttons";

  static defaultProperties = {
    className: "buttons"
  };
}

Note that a predefined Article class has been extended here, see the styles section below.

Paths are used to match URIs and should be regular expressions. This means that URIs that include, say, dynamic identifiers, can be matched.

Styles

The way to make the accordion and associated navigation work in tandem responsively is to hide the accordion's buttons as the screen widens and hide the navigation entirely as the screen narrows. By only hiding the accordion's bottons, its child articles remain visible and this gives the desired effect.

Here is some example styling for the view:

export default withStyle(View)`

  padding: 4rem;

  display: block;
  
  @media (min-width: 800px) {

    display: grid;
    
    column-gap: 2rem;
    grid-template-rows: 1fr;
    grid-template-areas: "accordion-navigation accordion";
    grid-template-columns: 20rem auto;

  }

`;

Note the use of the grid template areas. These are not present on the accordion and associated navigation by default and must be added with custom styles. Here is an example of styling the associated navigation:

import { AccordionNavigation } from "easy-navigation";

export default withStyle(AccordionNavigation)`

  grid-area: accordion-navigation;
  
  display: none;
  
  @media (min-width: 800px) {
  
    display: block;
  
  }

`;

Note that as well as the grid-arae property the navigation's visibility is toggled as the screen width changes.

Before looking at the accordion, note that you may also wish to create an Article class in order to set the appropriate whitespace around the articles:

import { Element } from "easy";

class Article extends Element {
  static tagName = "article";
}

export default withStyle(Article)`

  padding: 2rem;
  
  :not(:first-of-type) {

    border-top: 1px solid black;
    
  }

  @media (min-width: 800px) {
  
    padding: 0;
    
    :not(:first-of-type) {
  
      border-top: none;
      
    }
  
  }
`;

Finally, the accordion's buttons can be made to be responsive with another media query:

import { AccordionButton } from "easy=accordion";

export default withStyle(AccordionButton)`

  @media (min-width: 800px) {

    display: none;

  }

`;

The accordion must be appraised of this new button and this is done in two stages. First, the AccordionItem class must be overridden in the following manner...

import { AccordionItem } from "easy-navigation";

import AccordionButton from "../button/accordion";

export default class extends AccordionItem {
  static AccordionButton = AccordionButton;
}

...and then the accordion must be appraised of this new item:

import { Accordion } from "easy-navigation";

import AccordionItem from "./item/accordion";

export default withStyle(class extends Accordion {
  static AccordionItem = AccordionItem;
})`

  grid-area: accordion;

  border: 1px solid black;
  
  @media (min-width: 800px) {
  
    border: none;
  
  }

`;

Note that in this instance it has also been given a responsive border.

It has already been mentioned but it is worth repeating that only the accordion's buttons need to be hidden as the screen widens whilst its child articles remain in use, so to speak. In this way responsiveness is acheived without the need to duplicate content.

Building

Automation is done with npm scripts, have a look at the package.json file. The pertinent commands are:

npm run build-debug
npm run watch-debug

Contact