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:
14
snippets/elementContains.md
Normal file
14
snippets/elementContains.md
Normal 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
13
snippets/insertAfter.md
Normal 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
13
snippets/insertBefore.md
Normal 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
16
snippets/triggerEvent.md
Normal 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'});
|
||||||
|
```
|
||||||
@ -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
|
||||||
|
|||||||
2
test/elementContains/elementContains.js
Normal file
2
test/elementContains/elementContains.js
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
const elementContains = (parent, child) => parent !== child && parent.contains(child);
|
||||||
|
module.exports = elementContains;
|
||||||
6
test/elementContains/elementContains.test.js
Normal file
6
test/elementContains/elementContains.test.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
const expect = require('expect');
|
||||||
|
const elementContains = require('./elementContains.js');
|
||||||
|
|
||||||
|
test('elementContains is a Function', () => {
|
||||||
|
expect(elementContains).toBeInstanceOf(Function);
|
||||||
|
});
|
||||||
2
test/insertAfter/insertAfter.js
Normal file
2
test/insertAfter/insertAfter.js
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);
|
||||||
|
module.exports = insertAfter;
|
||||||
6
test/insertAfter/insertAfter.test.js
Normal file
6
test/insertAfter/insertAfter.test.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
const expect = require('expect');
|
||||||
|
const insertAfter = require('./insertAfter.js');
|
||||||
|
|
||||||
|
test('insertAfter is a Function', () => {
|
||||||
|
expect(insertAfter).toBeInstanceOf(Function);
|
||||||
|
});
|
||||||
2
test/insertBefore/insertBefore.js
Normal file
2
test/insertBefore/insertBefore.js
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);
|
||||||
|
module.exports = insertBefore;
|
||||||
6
test/insertBefore/insertBefore.test.js
Normal file
6
test/insertBefore/insertBefore.test.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
const expect = require('expect');
|
||||||
|
const insertBefore = require('./insertBefore.js');
|
||||||
|
|
||||||
|
test('insertBefore is a Function', () => {
|
||||||
|
expect(insertBefore).toBeInstanceOf(Function);
|
||||||
|
});
|
||||||
2828
test/testlog
2828
test/testlog
File diff suppressed because it is too large
Load Diff
2
test/triggerEvent/triggerEvent.js
Normal file
2
test/triggerEvent/triggerEvent.js
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
const triggerEvent = (el, eventType, detail = undefined) => el.dispatchEvent(new CustomEvent(eventType, {detail: detail}));
|
||||||
|
module.exports = triggerEvent;
|
||||||
6
test/triggerEvent/triggerEvent.test.js
Normal file
6
test/triggerEvent/triggerEvent.test.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
const expect = require('expect');
|
||||||
|
const triggerEvent = require('./triggerEvent.js');
|
||||||
|
|
||||||
|
test('triggerEvent is a Function', () => {
|
||||||
|
expect(triggerEvent).toBeInstanceOf(Function);
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user