Dage

Dage

Basic HTML & JavaScript Page Management. Use Dage to your Single Page Application (SPA) easily.

Dage is a simple router-like page management which is useful for SPA. Navigate to any page with custom handler (for hiding and showing pages) and listener.

Dage.add("page1", myDiv);
Dage.add("notfound", myNotFoundDiv);
Dage.on("page1", function(el) {
  alert("Navigated to page1");
});
// Not found
Dage.navigate("page2");

Manage pages without JavaScript? No problem.

<div data-page="page1" data-active="">
  Page 1...
  <button data-navigate="page2">Go to page 2</button>
  <button data-navigate="page3">Go somewhere</button>
</div>
<div data-page="page2">
  Page 2...
  <button data-navigate="page2">Go back to page 1</button>
</div>
<div data-page="notfound">
  The page you want to enter does not exist!!!
</div>

Installation

<script src="https://cdn.jsdelivr.net/gh/dlvdls18/Dage/src/dage.js"></script>

Documentation

Get version

Dage.ver; // float

Page

Assigning element as page

<div data-page="MyPage">
  Hello
</div>

Show the element by default

<div data-page="MyPage" data-active="">
  Hello
</div>

Assign page as Not Found

<div data-page="notfound">
  I don't think that page exists...
</div>

Add a page

Dage.add(element, name);

Reselect and update all data-page and data-navigate & set all pages default visibility

Dage.update();

Get all pages that assigned using Dage.add

Dage.l;

Get active page

Dage.a;

Set local page default visibility to active

// only work with pages created with Dage.add
Dage.setPageActive(name);

Navigation

Navigate to page

// If page not found, page "notfound" will be showed
Dage.navigate(name);

Show a page

// Active page will not change when using this method
Dage.show(name);

Hide a page

Dage.hide(name);

Get all pages

Dage.p;

Listener

Add page listener

// will not fired when silent
Dage.on(name, function(el) {
  ...
});

Remove page listener

Dage.off(name);

Turn silent on

Dage.silent();

Turn silent off

Dage.notify();

Get silent state

Dage.isSilent();

Toggle silent state

(Dage.isSilent()?Dage.notify():Dage.silent());

Get all listener

Dage.$;

Set on navigate before listener

// will not fired when silent
Dage.setBeforeChange(function(name) {});

Set on navigate after listener

// will not fired when silent
Dage.setAfterChange(function(name) {});

Set on Dage.show listener

Dage.setOnShow(function(name) {});

Set on Dage.hide listener

Dage.setOnHide(function(name) {});

Get on navigate before listener

Dage.ocb;

Get on navigate after listener

Dage.oca;

Get on Dage.show listener

Dage.os;

Get on Dage.hide listener

Dage.oh;

Set on page not found listener

Dage.setOnPageNotFound(function(name) {});

Get on page not found listener

Dage.nf;

Handler

Set show handler

// fired when navigated and the current page matches the name
Dage.setShowHandler(function(el) {
  // default
  el.style.display = "block";
});

Set hide handler

// fired when navigated and the current page does not match the name
Dage.setHideHandler(function(el) {
  // default
  el.style.display = "none";
});

Get show handler

Dage.f1;

Get hide handler

Dage.f0;

Set navigation handler

Dage.setNavigationHandler(function(el) {
  // default
  // navigate when element with attribute data-navigate clicked
  el.addEventListener("click", function(e) {
    Dage.navigate(e.target.getAttribute("data-navigate"));
  });
});

Get navigation handler

Dage.nh;

GitHub

View Github