bem-history

4.0.0 • Public • Published

bem-history

What is this?

BEM wrap for History API:

  • supports browsers with a native History API and hashchange event;
  • provides manipulations with url, browser location and history in the terms of BEM.

Components

  • uri__querystring – module for an url parsing;
  • history – module provides work with a browser History with two modificators:
  • provider_history-api – supports a native History API;
  • provider_hashchange – supports fallback on the hashchange event;
  • location – high-level module for a window.location change.

Scheme of library work

bem-history workflow

Usage

uri__querystring

modules.require(['uri__querystring'], function(Querystring) {
 
    // Parse url
    var u = Querystring.Uri.parse('http://example.org:8080/path?test=1&test=2&param2=22');
 
    // Change port
    u.setPort(80);
 
    // Change query params
    u.deleteParam('test', '2');
    u.replaceParam('param2', 2);
 
    // Serialize url
    u.toString(); // "http://example.org:80/path?test=1&param2=2"
 
});

history

modules.require(['history'], function(History) {
 
    // Create history instance
    var history = new History();
 
    // Push new or replace history state
    history.changeState('push', { title: 'Title', url: 'http://example.org:8080/path' });
    history.changeState('replace', { title: 'Title', url: 'http://example.org:8080/path?test=1' });
 
});

location

modules.require(['location'], function(location) {
 
    // Change `window.location` using a full url
    location.change({ url: 'http://example.org:8080/path' });
 
    // Change current location using only the new query params
    location.change({ params: { param1: [11,12], param2: 'ololo' } });
    window.location.href; // "http://example.org:8080/path?param1=11&param1=12&param2=ololo"
 
});

Dependents (0)

Package Sidebar

Install

npm i bem-history

Weekly Downloads

2

Version

4.0.0

License

MPL-2.0

Last publish

Collaborators

  • tadatuta