Stored in coffeekraken-sugar/js/classes/...

• STimer : Handle times with nice control like start, stop, pause, etc...
• SColor : Manipulate colors and access your sass registered colors
• SWatcher : Add some watchers on native object properties and be notified on updated
• And more...

Usage

To use the classes, simply import them from into your codebase like this:

import STimer from 'coffeekraken-sugar/js/classes/STimer';
// then use it
const myTimer = new STimer(2000);
myTimer.start();

Stored in coffeekraken-sugar/js/dom/...

• closest : Equivalent of the jQuery closest functions
• whenInViewport : Let you know when an element enter the viewport the first time
• whenAttribute : Let you know when an element has a specifiy attribute (or that an attribute is a string, etc...)
• scrollTo : Animate the scroll to a certain element in the page
• domReady : Equivalent to the jQuery ready function
• getAnimationProperties : Return an object with the css animations properties
• And many many more...

Usage

To use these functions, simply import them from into your codebase like this:

import closest from 'coffeekraken-sugar/js/dom/closest';
// then use it
const closestElm = closest(myHTMLElement, '.cool-selector');

Stored in coffeekraken-sugar/js/features/...

• imagesLoadedAttribute : Add a "loaded" attribute on images when loaded
• inputAdditionalAttributes : Add and maintain to input, select, radio, etc... attributes "dirty", "empty" and "has-value"
• inputAdditionalEvents : Dispatch some additional events from input, textarea, etc...:
  • onescape : from textarea and input
  • onenter : from textarea and input

Usage

Simply require the features you want into your codebase and that's it

import 'coffeekraken-sugar/js/features/imagesLoadedAttribute'
import 'coffeekraken-sugar/js/features/inputAdditionalAttributes'
import 'coffeekraken-sugar/js/features/inputAdditionalEvents'

Stored in coffeekraken-sugar/js/utils/...

• debounce : This utils function allows you to make sure that a function that will normally be called several times, for example during a scroll event, to be called only once after the delay passed
• isChrome : Detect if is chrome
  • isColor
  • isEdge
  • isEmail
  • isEven
  • isFirefox
  • isIe
  • isInteger
  • and more...
• constrain : Constrain a value between a min and a max value
• whenProperty : Resolve a promise when the wanted property on the passed object exist or pass the check function provided
• autoCast : Auto cast the string into the correct variable type
• And many many more

Usage

To use these functions, simply import them from into your codebase like this:

import isColor from 'coffeekraken-sugar/js/utils/is/color';
// then use it
if (isColor('#ff0000')) {
  // do something
}

• Listen for attributes changes
• Mount the component at a certain point in time (inViewport, visible, etc...)
• Automatically cast the attributes to their proper js variable types (Array, Object, String, etc...)
• Physical props : Specify some props that will ALWAYS be present as attribute on the component for styling purpose
• Define some default CSS that will be injected in the head automatically
• Specify some required props
• Full lifecycle management:
  • componentCreated
  • componentWillMount
  • componentMount
  • shouldComponentAcceptProp
  • componentWillReceiveProp
  • componentWillReceiveProps
  • shouldComponentUpdate
  • render
  • componentUnmount
• Mount dependencies : This will allows you to set some promises that have to be resolved before mounting the component