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/...

The goal of the features are to ad some features around certain element types like inputs, etc... They don't expose any API, classes or functions. They're just files that add some behaviors to certain elements.

• imagesLazySrcAttribute : Add support for the attribute lazy-src on images
  • Images will be loaded when they enter the viewport
• 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...:
  • escape : from textarea and input
  • enter : from textarea and input
• linksScrollHrefAttribute : Allows to use links href attribute like so:
  • scroll:#my-target-id : On click, will scroll to #my-target-id
• videoLazySrcAttribute : Add support for the attribute lazy-src on videos
  • Videos will be loaded when they enter the viewport

Usage

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

import 'coffeekraken-sugar/js/features/imagesLazySrcAttribute'
import 'coffeekraken-sugar/js/features/imagesLoadedAttribute'
import 'coffeekraken-sugar/js/features/inputAdditionalAttributes'
import 'coffeekraken-sugar/js/features/inputAdditionalEvents'
import 'coffeekraken-sugar/js/features/linksScrollHrefAttribute'
import 'coffeekraken-sugar/js/features/videosLazySrcAttribute'

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