https://github.com/loadingio/zmgr

manage stackable values such as z-index
https://github.com/loadingio/zmgr

Last synced: 19 days ago
JSON representation

manage stackable values such as z-index

• Host: GitHub
• URL: https://github.com/loadingio/zmgr
• Owner: loadingio
• Created: 2020-12-22T05:52:59.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-05-18T08:34:47.000Z (over 3 years ago)
• Last Synced: 2025-09-22T03:11:05.715Z (5 months ago)
• Language: LiveScript
• Size: 172 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

          
# zmgr

manage stackable values such as z-index.

## Install

    npm install --save zmgr

## Usage

include `dist/index.js` then:

    mgr = new zmgr({...})

    ret1 = mgr.add 100, 1

    ret2 = mgr.add 100, 1

    mgr.remove ret1

    mgr.remove ret2

## Constructor options

 - `init`: default value. optional.

   - if provided, the first added value will be updated based on `init` and `step`:

     - if step > 0: max(init, added) will be used

     - if step < 0: min(init, added) will be used

 - `step`: amount of increase between `add` function calls. default 1 if omitted.

   - can be negative, indicating a decreased value.

 - `layer`: object containing customized value for named layers. in this object:

   - key as layer name.

   - value as layer value. 

## API

 - `add(v,s)`: use a certain  `v`. Return assigned value to use.

   - params:

     - `v`: expected z-index or string to indicate layer to use. see `Named Layers` section below.

       - when `v` is a number, value is added to default layer.

     - `s`: custom step. direction is ignored.

       - use `step` (in constructor option) if omitted.

 - `remove(n, v)`: remove a used value from layer n.

   - when n is a number, value is removed from default layer.

 - `scope(n)`: return a scoped interface to this object with `add` and `remove` methods.

   - `add` / `remove` work the same as `add` / `remove` in this object, except they can be called without parameters.

   - `n`: default layer name for this scope.

## Layered Values

You can use multiple `zmgr` with different `init` value to better separate values for different purpose. For example, assume we have some dialogs to popup. Some of them are just hints and some of them are important message and users must interact with them.

We can thus use 2 `zmgr` for configuring them `z-index` accordingly:

    manager = do

      prompt: new zmgr init: 10000

      hint: new zmgr init: 100

    ldcv = do

      prompt1: new ldcover zmgr: manager.prompt

      prompt2: new ldcover zmgr: manager.prompt

      hint1: new ldcover zmgr: manager.hint

      hint2: new ldcover zmgr: manager.hint

### Named Layers

Alternatively, you can use `string` as layer name when adding a value:

    mgr = new zmgr({

      group: {

        "my new group": 100  # initial value for `my new group` layer is 100

        "default": 10        # initial value for `default` layer is 10

      }

    );

    mgr.add "my new group" # return 101

    mgr.add "default" # return 11

    mgr.add "my new group" # return 102

To scope APIs to specific layer by default, use `scope`:

    splash = mgr.scope('splash')

    val = splash.add()  # return 4001

zmgr is by default shipped with following layers (and their corresponding default values):

 - `notify`: 5000

 - `splash`: 4000

 - `modal`: 3000

 - `fixed`: 2000

 - `float`: 1000

 - `base`: 1

instead of using these names as string directly, you can use predefined members such as `zmgr.notify`:

    mgr.add(zmgr.notify);

## Fallback

While zmgr is necessary for aligning values such as `z-index` across components, we can prepare a fallback one if zmgr is not available ( example in livescript ):

    zmgr = do

      add: (v) -> @[]s.push(z = Math.max(v or 0, (@s[* - 1] or 0) + 1)); return z

      remove: (v) -> if (i = @[]s.indexOf(v)) < 0 => return else @s.splice(i,1)

## License

MIT