Hello World

Cras quis ultrices tellus, a dapibus arcu. Duis sed tellus eros. Etiam dignissim sapien non felis facilisis, id scelerisque tellus auctor. Sed efficitur feugiat quam in lobortis. Nunc ligula arcu.

Close the drawer

Hello World

Cras quis ultrices tellus, a dapibus arcu. Duis sed tellus eros. Etiam dignissim sapien non felis facilisis, id scelerisque tellus auctor. Sed efficitur feugiat quam in lobortis. Nunc ligula arcu.

Close the drawer

Javascript

All that Coffeekraken has to offer in term of javascript features

Kraken

Classes

Sugar gives you some nice classes that are highly specialized in one purpose only like

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();

DOM Helper functions

Sugar provide some cool helper function to handle the DOM. The goal of these functions is not to add another layer on top of native DOM methods like document.querySelector, but to gives you more features that does not exist like

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

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');

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.

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'

Utils

Sugar provide some cool utils functions to work with like

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
}

Webcomponents

Sugar provide a nice stack for webcomponent development. This stack is basically composed of the SWebComponent js class that abstract a lot of dirty work work you like

  • 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
© Coffeekraken 2017
All our tools are published under MIT license