@cnbritain/wc-main-navigationdeprecated

The master navigation bar

Usage no npm install needed!

<script type="module">
  import cnbritainWcMainNavigation from 'https://cdn.skypack.dev/@cnbritain/wc-main-navigation';
</script>

README

wc-main-navigation

The master navigation bar

Macro Settings

Key Optional Default Description
nav_links false Links to display in the nav
brand_social_links true None Brand social links
brand true 'default' Name of the brand
top_stories true None Top stories to display in mobile nav
display_logo_header true False Whether to display the big header logo
homepage_url true '#' Url of the homepage
search_url true '/search' Url of the search page

JS Documentation

MainNavigation

Kind: global class

new MainNavigation(el)

Creates the main navigation

Param Type Description
el HTMLElement The main navigation element

mainNavigation.el : HTMLElement

The navigation element

Kind: instance property of MainNavigation
Access: public

mainNavigation.dom : Object

Cache of dom elements that are reused

Kind: instance property of MainNavigation
Access: public

mainNavigation.hasHeaderLogo : Boolean

Do we have a BIIIIG header logo?

Kind: instance property of MainNavigation
Access: public

mainNavigation.offsets : Object

Cache of offsets for elements

Kind: instance property of MainNavigation
Access: public

mainNavigation.states : Object

List of states about the navigation

Kind: instance property of MainNavigation
Access: public

mainNavigation.vanish : VanishingNavigation

Instance of the vanishing header bits

Kind: instance property of MainNavigation
Access: public

mainNavigation.hideGalleryNavigation()

Hides the gallery navigation

Kind: instance method of MainNavigation
Access: public

mainNavigation.hideGalleryNavigationCounter()

Hides the gallery navigation counter

Kind: instance method of MainNavigation
Access: public

mainNavigation.hideHamburgerMenu()

Hides the mobile menu

Kind: instance method of MainNavigation
Access: public

mainNavigation.hideGridIcon()

Hides the grid icon

Kind: instance method of MainNavigation
Access: public

mainNavigation.hideListIcon()

Hides the list icon

Kind: instance method of MainNavigation
Access: public

mainNavigation.hideSearchBox()

Hides the search overlay

Kind: instance method of MainNavigation
Access: public

mainNavigation.hideSmallLogo()

Hides the small brand logo

Kind: instance method of MainNavigation
Access: public

mainNavigation.setGalleryArticle(galleryArticle)

Sets the current focused gallery article

Kind: instance method of MainNavigation
Access: public

Param Type
galleryArticle Gallery

mainNavigation.setGalleryClose(url)

Sets the url of the gallery close button. This defaults to history.back() when no url it set. It should redirect back to the previous article if coming from an article.

Kind: instance method of MainNavigation

Param Type
url String

mainNavigation.setGalleryCounter(value)

Sets the gallery counter to the value

Kind: instance method of MainNavigation
Access: public

Param Type
value Number

mainNavigation.setSignpost(tag)

Sets the signpost to the tag

Kind: instance method of MainNavigation
Access: public

Param Type
tag String

mainNavigation.showGalleryNavigation()

Shows the gallery navigation

Kind: instance method of MainNavigation
Access: public

mainNavigation.showGalleryNavigationCounter()

Show the gallery navigation counter

Kind: instance method of MainNavigation
Access: public

mainNavigation.showHamburgerMenu()

Shows the mobile menu

Kind: instance method of MainNavigation
Access: public

mainNavigation.showGridIcon()

Shows the grid icon

Kind: instance method of MainNavigation
Access: public

mainNavigation.showListIcon()

Shows the list icon

Kind: instance method of MainNavigation
Access: public

mainNavigation.showSearchBox(focus)

Shows the search overlay

Kind: instance method of MainNavigation

Param Type Description
focus Boolean Whether to focus the textbox

mainNavigation.showSmallLogo()

Shows the small brand logo

Kind: instance method of MainNavigation
Access: public

mainNavigation.stick()

Sticks the navigation to the top of the window

Kind: instance method of MainNavigation
Access: public

mainNavigation.unstick()

Unsticks the navigation from the top of the window

Kind: instance method of MainNavigation
Access: public

mainNavigation.update()

Updates the current state of the navigation - sticky or gallery nav

Kind: instance method of MainNavigation
Access: public

Themes

  • Wired

Prerequisites:

  • Node.js — brew install node
  • Grunt - npm install -g grunt-cli
  • Other prereqs? Python? Virtualenv?

Demo:

Install dependencies:

npm install

Build the things:

npm run sass
npm run js

Python the pythons:

npm run demo-install

Start the demo server:

python demo.py