kasarda v3.0.0

Placeholder for JavaScript, CSS and SASS

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

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

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!')
})

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

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

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

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 => {})