Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@three11/dom-helpers

Package Overview
Dependencies
Maintainers
2
Versions
7
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@three11/dom-helpers - npm Package Compare versions

Comparing version 0.4.0 to 1.0.0

304

dist/dom-helpers.js

@@ -1,148 +0,190 @@

(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["AnimateMe"] = factory();
else
root["AnimateMe"] = factory();
})(window, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports"], factory);
} else if (typeof exports !== "undefined") {
factory(exports);
} else {
var mod = {
exports: {}
};
factory(mod.exports);
global.domHelpers = mod.exports;
}
})(this, function (_exports) {
"use strict";
"use strict";
Object.defineProperty(_exports, "__esModule", {
value: true
});
_exports.trigger = _exports.insertBefore = _exports.insertAfter = _exports.toggleClass = _exports.removeClass = _exports.addClass = _exports.hasClass = _exports.getScrollPosition = _exports.isElementVisibleInViewport = _exports.enableListeners = _exports.$$ = _exports.$ = void 0;
var _this = void 0;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.addListener = exports.multiple = exports.single = exports.byID = void 0;
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
var D = document;
/**
* Query a single element
*/
// prettier-ignore
var doc = document;
var win = window;
var $ = function $(selector) {
var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : D;
return context.querySelector(selector);
};
/**
* Query a collection of element
*/
// prettier-ignore
var byID = function byID(id) {
return doc.getElementById(id);
};
exports.byID = byID;
_exports.$ = $;
var single = function single(selector) {
return doc.querySelector(selector);
};
var $$ = function $$(selector) {
var startNode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : D;
return _toConsumableArray(startNode.querySelectorAll(selector));
};
/**
* Enable jQuery-like syntax for attaching of event listeners
*/
exports.single = single;
var multiple = function multiple(selector) {
return _toConsumableArray(doc.querySelectorAll(selector));
};
_exports.$$ = $$;
exports.multiple = multiple;
var enableListeners = function enableListeners() {
/**
* Add `on` method to Element
*
* @param {String} type
* @param {Function} listener
* @param {Object|Boolean} options
*/
Element.prototype.on = function (type, listener) {
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var addListener = function addListener(element, eventType, callback, shouldBubble) {
element.addEventListener(eventType, function (event) {
callback(event);
}, shouldBubble);
};
_this.addEventListener(type, listener, options);
};
/**
* Add `on` method to Array
*
* @param {String} type
* @param {Function} listener
* @param {Object|Boolean} options
*/
// eslint-disable-next-line no-extend-native
exports.addListener = addListener;
/***/ })
/******/ ]);
});
Array.prototype.on = function (type, listener) {
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
_this.map(function (el) {
if (el instanceof Element) {
el.addEventListener(type, listener, options);
}
});
};
};
/**
* Detect if an element is visible in the viewport
*/
_exports.enableListeners = enableListeners;
var isElementVisibleInViewport = function isElementVisibleInViewport(el) {
var isPartiallyVisible = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var _el$getBoundingClient = el.getBoundingClientRect(),
top = _el$getBoundingClient.top,
right = _el$getBoundingClient.right,
bottom = _el$getBoundingClient.bottom,
left = _el$getBoundingClient.left;
var _window = window,
innerWidth = _window.innerWidth,
innerHeight = _window.innerHeight;
return isPartiallyVisible ? (top > 0 && top < innerHeight || bottom > 0 && bottom < innerHeight) && (left > 0 && left < innerWidth || right > 0 && right < innerWidth) : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};
/**
* Returns the scroll position of an element
*/
_exports.isElementVisibleInViewport = isElementVisibleInViewport;
var getScrollPosition = function getScrollPosition() {
var el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
return {
x: el.pageXOffset || el.scrollLeft,
y: el.pageYOffset || el.scrollTop
};
};
/**
* Classname utilities
*/
_exports.getScrollPosition = getScrollPosition;
var hasClass = function hasClass(el, className) {
return el.classList.contains(className);
};
_exports.hasClass = hasClass;
var addClass = function addClass(el, className) {
return el.classList.add(className);
};
_exports.addClass = addClass;
var removeClass = function removeClass(el, className) {
return el.classList.remove(className);
};
_exports.removeClass = removeClass;
var toggleClass = function toggleClass(el, className, force) {
return el.classList.toggle(className, force);
};
/**
* Insert HTML string after the element
*/
_exports.toggleClass = toggleClass;
var insertAfter = function insertAfter(el, html) {
return el.insertAdjacentHTML('afterend', html);
};
/**
* Insert HTML string before the element
*/
_exports.insertAfter = insertAfter;
var insertBefore = function insertBefore(el, html) {
return el.insertAdjacentHTML('beforebegin', html);
};
/**
* Trigger an event
*/
_exports.insertBefore = insertBefore;
var trigger = function trigger(el, eventType, detail) {
return el.dispatchEvent(new CustomEvent(eventType, {
detail: detail
}));
};
_exports.trigger = trigger;
});

15

dist/dom-helpers.min.js

@@ -1,1 +0,14 @@

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AnimateMe=t():e.AnimateMe=t()}(window,function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";function r(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}Object.defineProperty(t,"__esModule",{value:!0}),t.addListener=t.multiple=t.single=t.byID=void 0;var o=document;window;t.byID=function(e){return o.getElementById(e)};t.single=function(e){return o.querySelector(e)};t.multiple=function(e){return r(o.querySelectorAll(e))};t.addListener=function(e,t,n,r){e.addEventListener(t,function(e){n(e)},r)}}])});
(function(a,b){if("function"==typeof define&&define.amd)define(["exports"],b);else if("undefined"!=typeof exports)b(exports);else{var c={exports:{}};b(c.exports),a.domHelpers=c.exports}})(this,function(a){"use strict";function b(a){return e(a)||d(a)||c()}function c(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function d(a){if(Symbol.iterator in Object(a)||"[object Arguments]"===Object.prototype.toString.call(a))return Array.from(a)}function e(a){if(Array.isArray(a)){for(var b=0,c=Array(a.length);b<a.length;b++)c[b]=a[b];return c}}Object.defineProperty(a,"__esModule",{value:!0}),a.trigger=a.insertBefore=a.insertAfter=a.toggleClass=a.removeClass=a.addClass=a.hasClass=a.getScrollPosition=a.isElementVisibleInViewport=a.enableListeners=a.$$=a.$=void 0;var f=void 0,g=document;a.$=function c(a){var b=1<arguments.length&&arguments[1]!==void 0?arguments[1]:g;return b.querySelector(a)};a.$$=function d(a){var c=1<arguments.length&&arguments[1]!==void 0?arguments[1]:g;return b(c.querySelectorAll(a))};a.enableListeners=function a(){/**
* Add `on` method to Element
*
* @param {String} type
* @param {Function} listener
* @param {Object|Boolean} options
*/ /**
* Add `on` method to Array
*
* @param {String} type
* @param {Function} listener
* @param {Object|Boolean} options
*/ // eslint-disable-next-line no-extend-native
Element.prototype.on=function(a,b){var c=!!(2<arguments.length&&arguments[2]!==void 0)&&arguments[2];f.addEventListener(a,b,c)},Array.prototype.on=function(a,b){var c=!!(2<arguments.length&&arguments[2]!==void 0)&&arguments[2];f.map(function(d){d instanceof Element&&d.addEventListener(a,b,c)})}};a.isElementVisibleInViewport=function k(a){var b=!!(1<arguments.length&&arguments[1]!==void 0)&&arguments[1],c=a.getBoundingClientRect(),d=c.top,e=c.right,f=c.bottom,g=c.left,h=window,i=h.innerWidth,j=h.innerHeight;return b?(0<d&&d<j||0<f&&f<j)&&(0<g&&g<i||0<e&&e<i):0<=d&&0<=g&&f<=j&&e<=i};a.getScrollPosition=function b(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:window;return{x:a.pageXOffset||a.scrollLeft,y:a.pageYOffset||a.scrollTop}};a.hasClass=function c(a,b){return a.classList.contains(b)};a.addClass=function c(a,b){return a.classList.add(b)};a.removeClass=function c(a,b){return a.classList.remove(b)};a.toggleClass=function d(a,b,c){return a.classList.toggle(b,c)};a.insertAfter=function c(a,b){return a.insertAdjacentHTML("afterend",b)};a.insertBefore=function c(a,b){return a.insertAdjacentHTML("beforebegin",b)};a.trigger=function d(a,b,c){return a.dispatchEvent(new CustomEvent(b,{detail:c}))}});

101

package.json
{
"name": "@three11/dom-helpers",
"version": "0.4.0",
"description": "Helper functions for faster DOM scripting",
"main": "dist/dom-helpers.js",
"scripts": {
"build": "webpack"
},
"repository": {
"type": "git",
"url": "git+https://github.com/three11/dom-helpers.git"
},
"keywords": ["DOM", "Helpers", "JavaScript", "ES2017"],
"authors": [
{
"name": "Three 11 Ltd",
"email": "hello@three-11.com",
"role": "Developer"
},
{
"name": "Alexander Panayotov",
"email": "alexander.panayotov@gmail.com",
"role": "Developer"
},
{
"name": "Atanas Atanasov",
"email": "scriptex.bg@gmail.com",
"role": "Developer"
}
],
"license": "GPL-3.0",
"bugs": {
"url": "https://github.com/three11/dom-helpers/issues"
},
"homepage": "https://github.com/three11/dom-helpers#readme",
"devDependencies": {
"@babel/cli": "^7.0.0-beta.52",
"@babel/core": "^7.0.0-beta.52",
"@babel/preset-env": "^7.0.0-beta.52",
"@babel/preset-stage-2": "^7.0.0-beta.52",
"babel-loader": "^8.0.0-beta",
"unminified-webpack-plugin": "^2.0.0",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8"
}
"name": "@three11/dom-helpers",
"version": "1.0.0",
"description": "Helper functions for faster DOM scripting",
"main": "dist/dom-helpers.js",
"scripts": {
"dist": "babel src/dom-helpers.js --out-file dist/dom-helpers.js",
"minify": "babel src/dom-helpers.js --out-file dist/dom-helpers.min.js --presets minify,@babel/env",
"build": "npm run dist && npm run minify"
},
"repository": {
"type": "git",
"url": "git+https://github.com/three11/dom-helpers.git"
},
"keywords": [
"DOM",
"Helpers",
"JavaScript",
"ES2017"
],
"authors": [
{
"name": "Three 11 Ltd",
"email": "hello@three-11.com",
"role": "Developer"
},
{
"name": "Alexander Panayotov",
"email": "alexander.panayotov@gmail.com",
"role": "Developer"
},
{
"name": "Atanas Atanasov",
"email": "scriptex.bg@gmail.com",
"role": "Developer"
}
],
"license": "GPL-3.0",
"bugs": {
"url": "https://github.com/three11/dom-helpers/issues"
},
"homepage": "https://github.com/three11/dom-helpers#readme",
"devDependencies": {
"@babel/cli": "7.2.3",
"@babel/core": "7.2.2",
"@babel/plugin-proposal-class-properties": "7.2.3",
"@babel/plugin-proposal-decorators": "7.2.3",
"@babel/plugin-proposal-export-namespace-from": "7.2.0",
"@babel/plugin-proposal-function-sent": "7.2.0",
"@babel/plugin-proposal-json-strings": "7.2.0",
"@babel/plugin-proposal-numeric-separator": "7.2.0",
"@babel/plugin-proposal-throw-expressions": "7.2.0",
"@babel/plugin-syntax-dynamic-import": "7.2.0",
"@babel/plugin-syntax-import-meta": "7.2.0",
"@babel/preset-env": "7.2.3",
"babel-loader": "8.0.5",
"babel-minify": "0.5.0"
}
}

134

README.md

@@ -1,20 +0,10 @@

[![GitHub stars](https://img.shields.io/github/stars/three11/dom-helpers.svg?style=social&label=Stars)](https://github.com/three11/dom-helpers)
[![GitHub forks](https://img.shields.io/github/forks/three11/dom-helpers.svg?style=social&label=Fork)](https://github.com/three11/dom-helpers/network#fork-destination-box)
[![GitHub release](https://img.shields.io/github/release/three11/dom-helpers.svg)](https://github.com/three11/dom-helpers/releases/latest)
[![GitHub issues](https://img.shields.io/github/issues/three11/dom-helpers.svg)](https://github.com/three11/dom-helpers/issues)
[![GitHub last commit](https://img.shields.io/github/last-commit/three11/dom-helpers.svg)](https://github.com/three11/dom-helpers/commits/master)
[![Github file size](https://img.shields.io/github/size/three11/dom-helpers/dist/index.min.js.svg)](https://github.com/three11/dom-helpers/)
[![Github file size](https://img.shields.io/github/size/three11/dom-helpers/dist/dom-helpers.min.js.svg)](https://github.com/three11/dom-helpers/)
[![Build Status](https://travis-ci.org/three11/dom-helpers.svg?branch=master)](https://travis-ci.org/three11/dom-helpers)
[![npm](https://img.shields.io/npm/dt/@three11/dom-helpers.svg)](https://www.npmjs.com/package/@three11/dom-helpers)
[![npm](https://img.shields.io/npm/v/@three11/dom-helpers.svg)](https://www.npmjs.com/package/@three11/dom-helpers)
[![license](https://img.shields.io/github/license/three11/dom-helpers.svg)](https://github.com/three11/dom-helpers)
[![Analytics](https://ga-beacon.appspot.com/UA-83446952-1/github.com/three11/dom-helpers/README.md)](https://github.com/three11/dom-helpers/)
[![Open Source Love svg1](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/three11/dom-helpers/)
[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/three11/dom-helpers/graphs/commit-activity)
[![Greenkeeper badge](https://badges.greenkeeper.io/three11/dom-helpers.svg)](https://greenkeeper.io/)
[![dependencies Status](https://david-dm.org/three11/dom-helpers/status.svg)](https://david-dm.org/three11/dom-helpers)
[![devDependencies Status](https://david-dm.org/three11/dom-helpers/dev-status.svg)](https://david-dm.org/three11/dom-helpers?type=dev)
[![ForTheBadge built-with-love](https://ForTheBadge.com/images/badges/built-with-love.svg)](https://github.com/three11/)
# dom-helpers

@@ -24,2 +14,8 @@

## NOTE:
The latest version in the master branch is different than the latest release on Github and the latest release on NPM.
There are major changes and modifications.
This version is still a work in progress.
## Install

@@ -56,3 +52,16 @@

```javascript
import * as helpers from '@three11/dom-helpers';
import {
$,
$$,
trigger,
hasClass,
addClass,
removeClass,
toggleClass,
insertAfter,
insertBefore,
enableListeners,
getScrollPosition,
isElementVisibleInViewport
} from '@three11/dom-helpers';
```

@@ -66,9 +75,100 @@

```
## Functions
* `byID` - retrieves an element by ID
* `single` - retrieves an element by a given valid css selector
* `multi` - retrieves a collection of elements and normalizes the return value
* `addListener` - attaches an event listener to element
`$` - queries the DOM and obtains a single element
```javascript
const button = $('#button');
```
-----
`$$` - queries the DOM and obtains a collection of elements
```javascript
const buttons = $$('#button');
```
-----
`enableListeners` - enables the custom `on` method for attaching of event listeners
```javascript
enableListeners();
button.on('click', () => {
console.log('clicked a single button');
});
buttons.on('click', () => {
console.log('clicked a button in a collection');
});
```
-----
`isElementVisibleInViewport` - accepts two arguments: DOM element and a boolean flag which states if the element should be partially visible. Returns boolean.
``` javascript
const element = document.getElementById('element');
const isVisible = isElementVisibleInViewport(element, true);
```
-----
- `getScrollPosition` - returns the scroll position of the passed DOM Element
```javascript
const element = document.getElementById('element');
const scrollPosition = getScrollPosition(element);
```
-----
- `hasClass` - Returns boolean true if the element has the specified class, false otherwise.
- `addClass` - Adds the specified class to an element
- `removeClass` - Removes the specified class from an element
- `toggleClass` - Toggles the specified class on an element
```javascript
const element = document.getElementById('element');
hasClass(element, 'test'); // false
addClass(element, 'test');
removeClass(element, 'test');
/**
* The last argument forces the classname.
* If true the classname will be added,
* if false it will be removed.
* If omitted, the classname will be toggled
*/
toggleClass(element, 'test', true)
```
-----
- `insertAfter` - Insert the supplied HTML String after the element
- `insertBefore` - Insert the supplied HTML String before the element
```javascript
const element = document.getElementById('element');
insertAfter(element, '<div>Test</div>');
insertBefore(element, '<div>Test</div>');
```
-----
- `trigger` - Fires a custom (or built-in) event
```javascript
const element = document.getElementById('element');
// The third argument is event data. Can be omitted
trigger(element, 'click', { data: true })
```
## License
GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007

96

src/dom-helpers.js

@@ -1,18 +0,88 @@

const doc = document;
const win = window;
const D = document;
export const byID = id => doc.getElementById(id);
/**
* Query a single element
*/
// prettier-ignore
export const $ = (selector, context = D) => context.querySelector(selector);
export const single = selector => doc.querySelector(selector);
/**
* Query a collection of element
*/
// prettier-ignore
export const $$ = (selector, startNode = D) => [...startNode.querySelectorAll(selector)];
export const multiple = selector => [...doc.querySelectorAll(selector)];
/**
* Enable jQuery-like syntax for attaching of event listeners
*/
export const enableListeners = () => {
/**
* Add `on` method to Element
*
* @param {String} type
* @param {Function} listener
* @param {Object|Boolean} options
*/
Element.prototype.on = (type, listener, options = false) => {
this.addEventListener(type, listener, options);
};
export const addListener = (element, eventType, callback, shouldBubble) => {
element.addEventListener(
eventType,
event => {
callback(event);
},
shouldBubble
);
/**
* Add `on` method to Array
*
* @param {String} type
* @param {Function} listener
* @param {Object|Boolean} options
*/
// eslint-disable-next-line no-extend-native
Array.prototype.on = (type, listener, options = false) => {
this.map(el => {
if (el instanceof Element) {
el.addEventListener(type, listener, options);
}
});
};
};
/**
* Detect if an element is visible in the viewport
*/
export const isElementVisibleInViewport = (el, isPartiallyVisible = false) => {
const { top, right, bottom, left } = el.getBoundingClientRect();
const { innerWidth, innerHeight } = window;
return isPartiallyVisible
? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) && ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
: top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};
/**
* Returns the scroll position of an element
*/
export const getScrollPosition = (el = window) => ({
x: el.pageXOffset || el.scrollLeft,
y: el.pageYOffset || el.scrollTop
});
/**
* Classname utilities
*/
export const hasClass = (el, className) => el.classList.contains(className);
export const addClass = (el, className) => el.classList.add(className);
export const removeClass = (el, className) => el.classList.remove(className);
export const toggleClass = (el, className, force) => el.classList.toggle(className, force);
/**
* Insert HTML string after the element
*/
export const insertAfter = (el, html) => el.insertAdjacentHTML('afterend', html);
/**
* Insert HTML string before the element
*/
export const insertBefore = (el, html) => el.insertAdjacentHTML('beforebegin', html);
/**
* Trigger an event
*/
export const trigger = (el, eventType, detail) => el.dispatchEvent(new CustomEvent(eventType, { detail }));
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc