Add 4 new browser snippets

triggerEvent - trigger an event on an element, insertAfter & insertBefore - parse and insert HTML after or before an element respectively, elementContains - checks if an element contains another element
This commit is contained in:
Angelos Chalaris
2018-06-19 20:57:58 +03:00
parent 73a05894e9
commit 1c8e535a41
14 changed files with 1514 additions and 1406 deletions

View File

@ -0,0 +1,14 @@
### elementContains
Returns `true` if the `parent` element contains the `child` element, `false` otherwise.
Check that `parent` is not the same element as `child`, use `parent.contains(child)` to check if the `parent` element contains the `child` element.
```js
const elementContains = (parent, child) => parent !== child && parent.contains(child);
```
```js
elementContains(document.querySelector('head'), document.querySelector('title')); // true
elementContains(document.querySelector('body'), document.querySelector('body')); // false
```

13
snippets/insertAfter.md Normal file
View File

@ -0,0 +1,13 @@
### insertAfter
Inserts an HTML string after the end of the specified element.
Use `el.insertAdjacentHTML()` with a position of `'afterend'` to parse `htmlString` and insert it after the end of `el`.
```js
const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);
```
```js
insertAfter(document.getElementById('myId'),'<p>after</p>'); // <div id="myId">...</div> <p>after</p>
```

13
snippets/insertBefore.md Normal file
View File

@ -0,0 +1,13 @@
### insertBefore
Inserts an HTML string before the start of the specified element.
Use `el.insertAdjacentHTML()` with a position of `'beforebegin'` to parse `htmlString` and insert it before the start of `el`.
```js
const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);
```
```js
insertBefore(document.getElementById('myId'),'<p>before</p>'); // <p>before</p> <div id="myId">...</div>
```

16
snippets/triggerEvent.md Normal file
View File

@ -0,0 +1,16 @@
### triggerEvent
Triggers a specific event on a given element, optionally passing custom data.
Use `new CustomEvent()` to create an event from the specified `eventType` and details.
Use `el.dispatchEvent()` to trigger the newly created event on the given element.
Omit the third argument, `detail`, if you do not want to pass custom data to the triggered event.
```js
const triggerEvent = (el, eventType, detail = undefined) => el.dispatchEvent(new CustomEvent(eventType, {detail: detail}));
```
```js
triggerEvent(document.getElementById('myId'),'click');
triggerEvent(document.getElementById('myId'),'click', {username: 'bob'});
```

View File

@ -58,6 +58,7 @@ drop:array
dropRight:array dropRight:array
dropRightWhile:array,function dropRightWhile:array,function
dropWhile:array,function dropWhile:array,function
elementContains:browser
elementIsVisibleInViewport:browser elementIsVisibleInViewport:browser
elo:math,array,advanced elo:math,array,advanced
equals:object,array,type,advanced equals:object,array,type,advanced
@ -113,6 +114,8 @@ initializeArrayWithRangeRight:array,math
initializeArrayWithValues:array,math initializeArrayWithValues:array,math
initializeNDArray:array,recursion initializeNDArray:array,recursion
inRange:math inRange:math
insertAfter:browser
insertBefore:browser
intersection:array,math intersection:array,math
intersectionBy:array,function intersectionBy:array,function
intersectionWith:array,function intersectionWith:array,function
@ -277,6 +280,7 @@ toOrdinalSuffix:utility,math
toSafeInteger:math toSafeInteger:math
toSnakeCase:string,regexp toSnakeCase:string,regexp
transform:object,array transform:object,array
triggerEvent:browser,event
truncateString:string truncateString:string
truthCheckCollection:object,logic,array truthCheckCollection:object,logic,array
unary:adapter,function unary:adapter,function

View File

@ -0,0 +1,2 @@
const elementContains = (parent, child) => parent !== child && parent.contains(child);
module.exports = elementContains;

View File

@ -0,0 +1,6 @@
const expect = require('expect');
const elementContains = require('./elementContains.js');
test('elementContains is a Function', () => {
expect(elementContains).toBeInstanceOf(Function);
});

View File

@ -0,0 +1,2 @@
const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);
module.exports = insertAfter;

View File

@ -0,0 +1,6 @@
const expect = require('expect');
const insertAfter = require('./insertAfter.js');
test('insertAfter is a Function', () => {
expect(insertAfter).toBeInstanceOf(Function);
});

View File

@ -0,0 +1,2 @@
const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);
module.exports = insertBefore;

View File

@ -0,0 +1,6 @@
const expect = require('expect');
const insertBefore = require('./insertBefore.js');
test('insertBefore is a Function', () => {
expect(insertBefore).toBeInstanceOf(Function);
});

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,2 @@
const triggerEvent = (el, eventType, detail = undefined) => el.dispatchEvent(new CustomEvent(eventType, {detail: detail}));
module.exports = triggerEvent;

View File

@ -0,0 +1,6 @@
const expect = require('expect');
const triggerEvent = require('./triggerEvent.js');
test('triggerEvent is a Function', () => {
expect(triggerEvent).toBeInstanceOf(Function);
});