hash.js

A simple and flexible JavaScript library that manages "window.location.hash". With the ability to support queries. (#value?query)

This project is maintained by irmmr

Document

The document includes all the functions that you can use with this package.

Main components (value?query)

The main components that controls hole hash value and query as string and relates to other parts of the hash.

Hash.NAME
Hash.set("Hello");

view document ->

Value components (value?query)

These components are only for managing values and have nothing to do with other parts.

Hash.v.NAME or Hash.value.NAME
Hash.v.set("Hello-Value");

view document ->

Query components (value?query)

These components are only for managing queries and have nothing to do with other parts.

Hash.q.NAME or Hash.query.NAME
Hash.q.set("say", "Hello");

view document ->

Query string components (value?query)

These components are only for managing queries as string and have nothing to do with other parts.

Hash.q.str.NAME or Hash.query.str.NAME
Hash.q.str.set("hey=nope");

view document ->

Direct/old components

Older components that were available in older versions are now deprecated.

Do not use these components!

view doc ->

Event/On

This function are for adding listeners to the page hash.

Hash.on("change", (e) => {
  console.log(`Hash changed from ${e.from} to ${e.to}`);
});

read more about Events

info

This function is for getting package/library information.

.info()

- return -> object

Hash.info();

isReady

Checking status

.isReady()

This function is only for get ready status.

- returns [boolean] true if it’s ready and false if not.

if (Hash.isReady()) {
  alert("its ok!");
}

.ready()

This function can be used in one-line usage of this module if it is ready.

- returns [HashComponent null] “null” if Hash is not ready and HashComponent if it is.
Hash.ready()?.set("string").q.set("page", 10);

Config

You can customize the main logical parts and define your own methods and change some actions for better usability and performance.

see config.js

Hash.config({
  // get page hash by collecting custom data
  getHashCallback: null,
  // set page hash by custom action
  setHashCallback: null,
  // get page hash using filter
  getHashFilter: null,
  // set page hash by a filter
  setHashFilter: null,
  // get location href using custom callback
  getHrefCallback: null,
  // the 'window' main object for using in library
  // if it is null, the original 'window' is inserted
  window: null,
  // should errors be logged in console or not?
  log: true,
  // query symbols
  querySymbols: {
    and: "&",
    equ: "=",
    que: "?",
  },
  // parse query value or just return string?
  parseQueryValue: true,
});

read more about Config

Api

The api is for access to trigger or store class or other Hash main parts.

trigger

With trigger you can access trigger.js and use all methods in it.

// trigger.js: manage triggers
const trigger = Hash.api.trigger;

// add an event for change
Hash.on("change", (e, i) => {
  console.log(`changed from ${e.from} to ${e.to}`);

  // remove this listener :)
  const { event: name, id } = i;
  trigger.removeListener(name, id);
});

// get 'change' event listeners
// If we have not deleted the event and there is a case
// Object { 18ViFkFP66mKQrdp...3752: Object { time: ...23752, callback: (e) } }
trigger.get("change");

// get listener
// Object { time: ...23752, callback: (e) }
trigger.getListener("change", "18ViFkFP66mKQrdp...");

// or event remove it
trigger.remove("change");

I won’t say much more about this class and you can just see the source to know the class better.

store

With store you can access store.js and use all data that saved in it and every component main data will be saved in store.

// store.js: all saved data
const store = Hash.api.store;

// locking hash on 'my-name'
Hash.set("my-name").lock();

// Object { status: true, force: false, time: ...3453, value: "my-name" }
console.log(store.lock);

// true
console.log(store.ready);

// ...3456
console.log(store.readyDate);

Helpers

You can use all helpers that defined in helpers.js with h.

I have only given a few examples, and for the rest, you can refer to the file itself.

// get all helpers
const h = Hash.h;

he.isEmpty(""); // returns -> true
he.isEmpty({}); // returns -> true
he.isEmpty("H"); // returns -> false
he.objSize({ p: 1, a: "d" }); // returns -> 2
he.makeRandStr(10); // returns -> Oj7NNLxREZ

One-line usage

This library is designed for single line use and you can easily use it in single line. In addition, you can connect to the list of other components by using the desired methods of each category.

Hash.set("Hello-Babe").replace("Hello", "Hey");

The one-line rule is available for all components except for checkers.

Hash.set("/message?page=1&content=hey")
  // #/message-page?page=1&content=hey
  .v.add("-page")
  // #/message-page?page=2&content=hey
  .q.update("page", 2)
  // #/message-page?page=2&content-b=hey
  .str.add("-b", "after:content")
  // none
  .m.clear();