Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
JavaScript
branch: t22

This branch is 2 commits ahead, 78 commits behind master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
example
webmaker-nav
.gitignore
.gitmodules
readme.md

readme.md

Webmaker nav

This is a first iteration of the universal nav for Popcorn/Thimble. It includes a primary navigation and secondary navigation tabs, as well as a sample header.

Usage

You will need requirejs and jquery.

First, copy the webmaker-nav subdirectory of this repository into your project.

It is a CommonJS package, so you will need to add a packages directive to your require config that points at the subdirectory.

You'll also need to add a <link> tag that points to webmaker-nav/css/webmaker-nav.css.

Then, you should be able to use the module like this:

require(["webmaker-nav"], function(WebmakerNav) {
  var webmakerNav = new WebmakerNav({
    container: document.querySelector("#webmakerNavContainer"),
    loginBtnCallback: function myLoginFunction() { /* ... */ },
    logoutBtnCallbak: function myLogoutFunction() { /* ... */ },
    feedbackCallback: function myFeedbackFunction() { /* ... */ }
  });
});

If feedbackCallback is omitted, the feedback button will not be displayed. Both loginBtnCallback and logoutBtnCallback must be defined in order for the logout/login buttons to appear.

Whenever the user logs in, you'll want to call:

webmakerNav.views.login({username: "foo@bar.org"});

When the user logs out, just call:

webmakerNav.views.logout();

For a full example, see example/index.html.

Something went wrong with that request. Please try again.