🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →

@browserkids/dom

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@browserkids/dom

Non-transpiled ES6+ DOM helper functions.

Source

npm

Version: 0.3.0

Version published: 6 years ago

Weekly downloads: 13

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

@browserkids/dom

This is a collection of handy DOM functions. They are all written in ES6+ code and are not transpiled.

Installation

Using a CDN

Fastest way to get going. See for yourself:

<script type="module">
import { isElementInViewport } from 'https://unpkg.com/@browserkids/dom';

console.log(isElementInViewport(document.body))
</script>

Self hosted

Semi-fast way. Download the files and upload them to your server. Just make sure your import path is correct. For example:

import { isElementInViewport } from './assets/@browserkids/dom/index.js';

Using a bundler

Semi-fast way as well. Just install it via npm.

npm install -S @browserkids/dom

Import the functions where you need them.

import { isElementInViewport } from '@browserkids/dom';

Browser support

Almost every function uses at least one feature of ECMAScript 6 or above, but no ESNext features — promised. So support should be fine for “evergreen” browsers at the time of writing. This means that Internet Explorer is out of the game.

As this library is not transpiled nor ever will be you should use polyfills in case you need to support a specific browser version.

API

createShadowRoot()
Creates a Shadow DOM for this element and uses the given template as content.

By default this creates an open Shadow DOM. A very simple example on how to use this would be:

<my-custom-element>rock!</my-custom-element>

<script type="module">
  import { createShadowRoot } from 'https://unpkg.com/@browserkids/dom';

  customElements.define('my-custom-element', class MyCustomElement extends HTMLElement {
    constructor() {
      super();
        
      createShadowRoot(this, `
        <template>
          <style>
            :host::before {
              content: 'My scoped styles…';
            }
          </style>
        
          <slot></slot>
        </template>
      `);
    }
  });
</script>

dispatch()
Triggers a custom event with the given data.

This function has some sensible defaults like bubbling enabled or no trespassing of the event between the boundary of shadow and regular DOM.

findAttributes()
Tries to find attributes that name is matching a given regular expression.

<main #container class="random-class">Just a random element.</main>

<script type="module">
  import { findAttributes } from 'https://unpkg.com/@browserkids/dom';

  // [{ name: '#container', value: '' }]
  console.log(findAttributes(document.querySelector('main'), /^#.+/));
</script>

findReferences()
Finds all elements that match the given pattern and returns them as a map.

Based on findAttributes() this will return all elements within a given element that have #referenceId attributes. For example:

<body>
  <header #header></header>
  <main #content>
    <h1 #headline></h1>
  </main>
  <footer #footer></footer>
</body>

<script type="module">
  import { findReferences } from 'https://unpkg.com/@browserkids/dom';

  // { header: header, headline: h1, content: main, footer: footer }
  console.log(findReferences(document.body));
</script>

isElementInViewport()
Returns true if the given element is within the boundaries of the given viewport coordinates or at least the amount specified.

You may adjust the following settings:
- amount, specify minimum amount of overlapping/intersection between target element and viewport.
- viewport, provide a custom viewport bounding rectangle. Default is window rectangle.
bindEventListeners()
Finds all elements that have event listeners defined and binds them automatically.

Based on findAttributes() this function will find all elements that have @event[.modifier]="function" attributes and automatically registers the event listeners to the elements. For example:
```
<main @click="onClick">Just a random element.</main>

<script type="module">
  import { bindEventListeners } from 'https://unpkg.com/@browserkids/dom';

  bindEventListeners(document.body, {
    onClick() {
      console.log('I just got clicked.');
    }
  });
</script>
```
There are a few modifiers available:
- prevent calls e.preventDefault() before running the event listener.
- self, calls only when event.target === event.currentTarget.
- away, calls only when the event.target is not a child of event listener element.
- once, calls the event listener only once.
- window, attaches the event listener to the window object.
- document, attaches the event listener to the document object.

Keywords

dom

functions

FAQs

What is @browserkids/dom?

Is @browserkids/dom popular?

Is @browserkids/dom well maintained?

Package last updated on 23 Jun 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install