kasarda

Placeholder for JavaScript, CSS and SASS

• Install
• JavaScript
• Common
• View
• Worker
• createElement
• Chunk
• History
• Others
• CSS
• SASS

NPM

NPM

$ npm i kasarda

Yarn

$ yarn add kasarda

JavaScript

Common

import {
    rand,
    getProgress,
    getValue,
    item,
    setStyles,
    animationLoop,
    minmax,
    move,
    generateID
} from 'kasarda/common'
/* 
import rand from 'kasarda/common/rand'
import getProgress from 'kasarda/common/getProgress'
import getValue from 'kasarda/common/getValue'
import setStyles from 'kasarda/common/setStyles'
import animationLoop from 'kasarda/common/animationLoop'
import minmax from 'kasarda/common/minmax'
*/
 
/** 
 * rand(from:number|string|any[]|object, to:number = 0, round:boolean = true): number
 * -> Return random value
*/
rand(0, 100) // return random integer value from 0 to 100
rand(0, 100, false) // return random float value from 0 to 100
rand('abcdefghijklmno') // return random character from string
rand(['turkey', 'elephant', 'tiger']) // return random value from array
rand({
    name: 'Joe',
    age: 26
}) // return random value from object
 
 
 
/**
 *  getProgress(from:number, to:number, value:number, outside:boolean = false):number
 * -> Return progress between 0 and 1 or outside of this range 
*/
getProgress(0, 100, 50) // -> .5
getProgress(0, 100, 150) // -> 1
getProgress(0, 100, 150, true) // -> 1.5
 
 
 
/** 
 * getValue(startWith:number, endWith:number, progress:number, fixed:number = 6):number
 * -> Return value from progress
*/
getValue(0, 100, .5) // -> 50
getValue(0, 100, .3458) // -> 34.58
getValue(0, 100, .3458, 0) // -> 35
 
 
 
/**
 * item(array:any[], index:number):any
 * -> get item from array by index
*/
const arr = [ 1, 2, 3 ]
item(arr, 0) // -> 1
item(arr, 1) // -> 2
item(arr, -1) // -> 3
item(arr, -2) // -> 2
 
 
/**
 * setStyles(elem:element, styles:string|object, value:string|number):void
 * -> Set styles on element and add prefix if needed
 */
const elem = document.querySelector('.box')
setStyles(elem, 'transform', 'translateX(30px)')
setStyles(elem, {
    transform: 'translateX(30px)',
    width: 200 + 'px'
})
 
 
 
/**
 * createRequestFrame(duration:number, frame:function(data), done:function(requestID))
 * -> create requestAnimationFrame loop with duration
 */
animationLoop(
    5000, // ms
    ({progress, runtime, remaining, runned, timestamp, requestID}) => {
    // If the progress is ~.25
    progress // -> .25
    runtime // -> 1250.458
    remaining // -> 3750
    runned // -> 1250
    timestamp // -> 1522264007309
    requestID // -> 70
 
    if(progress > .5)
        return false // stop requesting when return false
 
},
requstID => {
    console.log('Done with ID', requestID)
})
 
/**
 * minmax(min:number, max:number, value:number)
 * -> get number value in range of min and max
 */
 
minmax(0, 10, 5) // -> 5
minmax(0, 10, -5) // -> 0
minmax(0, 10, 15) // -> 10
 
 
/**
 * move(array:any[], from:number, to:number)
 * -> Move item in array from one position to another
 */
 
move([1, 2, 3], 0, 2) // -> [2, 3, 1]
 
/**
  *
  * @function generateID
  * Generate random string id
  * @return {string} 
  *
*/
generateID() // -> r0fvlk8iuvk573eoap
 

View

Return true if the element is in the view - Example

import inView from 'kasarda/view'
 
// inView(options: Options)
// example: https://codepen.io/kasarda/pen/aENRje
/*
 
 interface Options {
    target: element,
    visibility: string = 'visible' || 'entire',
    axis:string = 'y' || 'x' || 'both'
    direction:string = 'linear' || 'end' || 'start'
    offset = {
        top: number = 0,
        left: number = 0,
        bottom: number = 0,
        right: number = 0,
    }
 }
*/
 
const elem = document.querySelector('.box')
 
inView({
    target: elem,
    visibility: 'entire'
}) // if entire box element is visible on the screen this function will return true
 

Worker

import WebWorker from 'kasarda/worker'
 
const worker = new WebWorker('greeting_worker.js')
 
worker.send('greeting', 'hello')
 
worker.read('response', data => {
    data // -> 'hi!'
    worker.terminate()
})
 
// greeting_worker.js
import WebWorker from 'kasarda/worker'
 
const worker = new WebWorker()
worker.read('greeting', data => {
    data // -> 'hello'
 
    worker.send('response', 'hi!')
})

Easing

import {
    bezier,
    steps,
    spring,
    easing
} from 'kasarda/easing'
 
 
// bezier(x1, y1, x2, y2)(progress)
bezier(0.25, 0.1, 0.25, 1.0)(.5) // new progress
 
// steps(steps)(progress)
steps(5)(.5) // new progress
 
// spring(tension, friction, duration)(progress)
spring(100, 20, 3000)(.5) // new progress
 
// easing -> predefined bezier easing
/*
    {
    ease(progress)
    easeIn(progress)
    easeOut(progress)
    easeInOut(progress)
    easeInSine(progress)
    easeOutSine(progress)
    easeInOutSine(progress)
    easeInQuad(progress)
    easeOutQuad(progress)
    easeInOutQuad(progress)
    easeInCubic(progress)
    easeOutCubic(progress)
    easeInOutCubic(progress)
    easeInQuart(progress)
    easeOutQuart(progress)
    easeInOutQuart(progress)
    easeInQuint(progress)
    easeOutQuint(progress)
    easeInOutQuint(progress)
    easeInExpo(progress)
    easeOutExpo(progress)
    easeInOutExpo(progress)
    easeInCirc(progress)
    easeOutCirc(progress)
    easeInOutCirc(progress)
    }
*/
 
easing.ease(.5) // new progress
easing.easeOutQuint(.5) // new progress

createElement

Create element object just like document.createElement but with more options

import createElement from 'kasarda/createElement'
 
/*
    API:
    createElement(selector:string, options:Options|string|array, condition?:boolean)
 
interface Options = {
    className: string | [string] | Promise(string|[string]),
    attr: object, // key is attr name and value is attr value. Value can be a Promise
    prop: object, // key is prop name and value is prop value. Value can be a Promise
    data: object // key is data name and value is data value. Value can be a Promise
    style: object // key is style name and value is style value. Value can be a Promise
    child: element | [element|Promise(element|[element])] | Promise(element, [element|Promise(element|[element])]),
    text: any | Promise(any),
    html: any | Promise(any),
    src: string | Promise(any),,
    on: object // key is eventName name and value is listener,
    appendTo: element,
    prependTo: element,
    ref: Function(element, Options) // this is also element
    appendFutureChilds:boolean = false
}
*/
 
 
 
// selector example:
createElement('section') // <section>
createElement('.wrapper') // <div class="wrapper">
createElement('.a.b.c') // <div class="a b c">
createElement('nav#main.light-theme') // <nav id="main" class="light-theme">
createElement('input[placeholder=Name][name=name][type=text]') // <input placeholder="Name" name="name" type="text">
 
 
 
// Options example:
createElement('nav', {
    className: ['light', 'main'],
    attr: {
        tabindex: 1
    },
    data: {
        visible: true
    },
    style: {
        width: 100 + '%',
        height: CSS.px(100)
    },
    child: [
        createElement('a[href=#a]'),
        createElement('a[href=#b]'),
        createElement('a[href=#c]')
    ],
    on: {
        click: _ => console.log('clicked')
    },
    appendTo: document.body,
    ref() {
        this.tagName === 'NAV' // -> true
    }
})
/*
<nav class="light main" tabindex="1" data-visible="true" style="width:100%;height: 100px;">
    <a href="#a">
    <a href="#b">
    <a href="#c">
</nav>
*/
 
 
// condition example:
createElement('div', {}, true) // <div>
createElement('div', {}, false) // null
 
 
// promises example:
createElement('img', {
    src: fetch('some api').then(data => data.json()).then(data => data.pictureURL)
})
 
 
// Shorthand syntax example:
// second arguments as an string is same as option text or src for image element
createElement('span', 'Hello World') // <span>Hello World</span>
createElement('img', 'img.jpg') // <img src="img.jpg">
 
 
// second arguments as an array is same as option child
createElement('.wrapper', [
    createElement('nav', [
        createElement('a'),
        createElement('a')
        createElement('a')
    ]),
    createElement('section', [/*...*/]),
    createElement('footer', [/*...*/]),
]) /*
    <div class="wrapper">
      <nav>
        <a>
        <a>
        <a>
      </nav>
      <section>
        ...
      </section>
      <footer>
        ...
      </footer>
    </div>
*/

Chunk

Create chunk array

import Chunk from 'kasarda/chunk'
 
const chunk = new Chunk(5)
 
chunk.onFull(data => {
    console.log(data) 
    /* 
        -> [0,1,2,3,4]
        -> [5,6,7,8,9]
        -> [10,11]
    */
})
 
for(let i = 0; i < 12; i++) {
    chunk.add(i)
}
chunk.end()

History

Create history array

import History from 'kasarda/history'
 
const history = new History
 
history.push('a')
history.push('b')
history.push('c')
history.states // -> ['a', 'b', 'c']
 
history.currentState // -> 'c'
history.back()
history.currentState // -> 'b'
history.back()
history.currentState // -> 'a'
history.forward()
history.currentState // -> 'b'
history.push('d')
history.states // -> ['a', 'b', 'd']
history.currentState // -> 'd'
history.isLast // -> true
history.back()
history.currentState // -> 'b'
history.to(0)
history.currentState // -> 'a'
history.isFirst // -> true
history.get(1) // -> 'b'
history.updateState(1, 'e')
history.get(1) // -> 'e'
history.clear()
history.currentState // -> undefined
 
history.addEventListener('change', e => {})
history.addEventListener('push', e => {})
history.addEventListener('beforechange', e => {})
history.addEventListener('beforepush', e => {})
history.addEventListener('clear', e => {})

Others

• Pinner
• Scroll
• Interaction
• SlideShow

CSS

• flex
• visibility
• normalize

SASS

• lib