Table of Contents

• addFontFace
  • Parameters
  • Examples
• createElement
  • Parameters
  • Examples
• debounce
  • Parameters
• debounceInput
  • Parameters
• debounceLeading
  • Parameters
• throttle
  • Parameters
• deepCopy
  • Parameters
• escapeHtml
  • Parameters
• generateID
  • Parameters
• toLowerKeys
  • Parameters
• waitForElement
  • Parameters
  • Examples

addFontFace

Dynamically add Fonts to a Page

Additional Notation

Parameters

• families Array An array list of google font families to add to a page.

Examples

//Font Style

n: normal  (default)
i: italic
o: oblique


(no properties)
=> n4

font-style: italic;
=> i4

font-weight: normal;
=> n4

font-weight: bold;
=> n7

font-style: normal;
font-weight: 400;
=> n4

font-style: italic;
font-weight: 500;
=> i5

//usage:

addFontFace(['Praise:400','Montserrat:400,700,i4,i7','Roboto:i5'])

createElement

Easily Create HTML elements

Remember: 'className' for classes not just 'class'

Original Author

Parameters

• object Object The object to build the HTML element

Examples

document.body.appendChild(createElement({
type:'section',
className:'secion-1', 
id:'section-1-id',
innerHTML:'This is an Example',
attributes:{
dataFoo:'data Test 1',
dataBaz:'data Test 2',
onclick:'someFuncHere(this);'
}
}))

debounce

Delays invoking a callback function until after the timeout seconds have elapsed since the last time the debounced function was invoked

Parameters

• callback @callback function to execute
• timeOut Number delay time in seconds

debounceInput

Debounce a given input

Parameters

• callback @callback function to execute
• doneTypingInterval Number delay time in seconds

debounceLeading

Run callback once and ignore subsequence calls within given timeOut good for triggering auto-save or displaying suggestions

Parameters

• callback @callback function to execute
• timeout Number delay time in seconds

throttle

Invokes callback at most once per every timeOut seconds.

Parameters

• callback @callback function to execute
• timeOut Number delay time in seconds

deepCopy

Copies an object and all it's nested properties

More Info: MDN Web Docs

Parameters

• object Object The object to copy

Returns Object The copied object

escapeHtml

Prevent accidental markup where text is expected

Parameters

• text String The text to be escaped

Returns String The escaped text with no HTML markup

generateID

Generate an alphanumeric unique ID No duplicates found in a 10 Million ID generation test Ideal for small prototypes/scenarios.

For serious commercial projects use nanoid.

Parameters

• prefix String
• suffix String

Returns String A unique ID

toLowerKeys

Converts an object's keys to lower case

Parameters

• obj Object Object with possible mixed keys

Returns Object

waitForElement

Parameters

• selector String The selector of the desired element
• checkFrequencyInMs Number How often to check for element in Milliseconds
• timeoutInMs Number How long to keep checking in milliseconds before timing out

Examples

//Here it is waiting on an element by class name for 10 seconds, and checking every half a second for the element

waitForElement('.vsc-initialized',500,10_000).then((e)=>{console.log('element found'); return e;})

Returns Promise Resolves to the element if found

Webpack Configs

Usage

First Install the package to get access to all the dependencies

npm i tools-clickwithclark

Then call the package with the desired flag

npx tools-clickwithclark < wp | webpack> [option] <'path/to/main.js'> | default ='./src/index.js'

Options

-p, --prod : Production Configurations

-d, --dev : Development build Configurations

-u, --umd : UMD build Configurations

-b, --obf : Obfuscated build Configurations

Example

npx --yes tools-clickwithclark wp -u './index.js'
npx --yes tools-clickwithclark wp -p './index.js'
npx --yes tools-clickwithclark wp -d './index.js'
npx --yes tools-clickwithclark wp -b './index.js'