v0.9

navig

object navig → file: core/lib/navig.js

The navigation library facilitates changes to the application URL. It's a container for current and previous URL state.

Instance

Instance created in the lib/navig.js file so no need to make instance with "new" keyword.

Properties

Methods

GETTERS

getPreviousURI() :string

Get the previous URI. The uri is path + query string, without hash, for example: /page1.html?q=12

getCurrentURI() :string

Get the current URI. The uri is path + query string, without hash, for example: /page1.html?q=12

NAVIGATION

goto(url, state, title) :void

Navigates to a new view by changing URL and controller.
- The URL in the browser address bar is changed with window.history.pushState(state, title, url). More at ...Web/API/History/pushState
- The pushstate event emitted in the eventEmitter. This event will change controller.

ARGUMENTS:
• url :string - absolute URL path, for example: '/customer/product/25'
• state :string - The state data. Fetch it with event.detail.
• title :string - Not used in major browsers.

navig.onPushstate((event) => {
  // Access the state data passed with the pushState call
  const stateData = event.detail;

  console.log('Navigated to:', stateData.url);
  console.log('Additional state data:', stateData);
});

goblind(url, state, title) :void

Change URL but without changing the controller and view.
This is useful when app needs to change parameter in the URL without changing anything else. For example: /product/egg → /product/milk

ARGUMENTS:
• url :string - absolute URL path, for example: '/customer/product/25'
• state :string - The state data. Fetch it with event.detail.
• title :string - Not used in major browsers.

forward() :void

Go forward like forward browser button is clicked.

back() :void

Go back like back browser button is clicked.

history(delta) :void

Loads a specific page from the session history.
Use it to move forwards and backwards through the history depending on the delta value.

ARGUMENTS:
• delta :number - history index number, for example: -1 is like back(), and 1 is like forward()

reload() :void

Reloads the page like refresh button is clicked.

EVENT LISTENERS

onPushstate(listener) :void

Listen for the pushstate event, for example when dd-href is clicked or when goto() is used.

ARGUMENTS:
• listener :Function - callback function which will be executed on 'pushstate' event ,for example pevent => { ... } where pevent is pushstate or popstate event

onPopstate(listener) :void

Listen for the popstate event, for example when BACK,FORWARD browser button is clicked or when back(),forward() is used.

ARGUMENTS:
• listener :Function - callback function which will be executed on 'pushstate' event ,for example pevent => { ... } where pevent is pushstate or popstate event

onUrlChange(listener) :void

Listen for the URL change i.e. 'popstate' or 'pushstate' event. The URL change includes any URL change even hash part modification.

ARGUMENTS:
• listener :Function - callback function which will be executed on 'pushstate' event ,for example pevent => { ... } where pevent is pushstate or popstate event

onHashchange(listener) :void

Listen for the hashchange event. This happens when window.location.hash is changed. For example /product#image --> /product#description

ARGUMENTS:
• listener :Function - callback function which will be executed on 'pushstate' event ,for example pevent => { ... } where pevent is pushstate or popstate event

Example

const { Controller, corelib } = require('@mikosoft/dodo');

class MyCtrl extends Controller {
  __init() {
    corelib.navig.onPushstate(pevent => {
      const stateData = pevent.state;
      console.log('Navigated to:', window.location.pathname);
      console.log('State data:', stateData);
    });
  }

  runGOTO() {
    corelib.navig.goto('/admin/products/list'); // activate pushstate
  }

  runBACK() {
    corelib.navig.back(); // activate popstate
  }
}

Stackblitz Examples

• navig - test navig library methods