baku v0.0.28
Baku
alpha personal project
A collection of frontend ES6 components & utilities, unlike projects like jQuery you only import
what is needed.
IMPORTANT
This is a a ES6 only library and will not work with older JS code. I recommend using babel and webpack. When using webpack you'll need to use include via the babel-loader:
loaders: [
{
test: /\.js$/,
loader: 'babel',
include: [
path.resolve(__dirname, 'node_modules/baku')
...
Usage
npm install baku --save
APP
baku
Create a new app and attach scroll/resize/render events
import BakuApp from 'baku'
class App extends BakuApp{
constructor(){
super()
}
resizeEvent(width, height){
//handle resize
}
scrollEvent(scrollPos, height){
//handle scroll
}
update(timeStamp){
//requestanimationframe
}
}
document.addEventListener('DOMContentLoaded', () => new App().activate(), false)
ANIMATION
baku/animation
tweens automatically use the requestanimationframe polyfill
import { tween, multiTween } from 'baku/animation'
import ease from 'baku/animation/ease'
//start, end, duration, delay, ease, render callback, start callback (optional)
tween(0, 300, 1000, 100, ease.inOutBack, value => {
someDiv.style.transform = `translate3d(${value}px,0,0)`
}, () => {
console.log('started')
}).then(() => {
console.log('animation complete')
})
//Since this returns a promise, you can use Promise.All with a group of tweens or
//tween multiple values
let tweens = [
[300, 0, 1000, 10, ease.inOutBack],
[0, 100, 1000, 100, ease.inOutBack]
]
multiTween(tweens, values => {
img.style.transform = `translate3d(${values[0]}px,${values[1]}px,0)`
}).then(() => console.log('done'))
baku/animation/ease
- linear
- inQuad
- outQuad
- inOutQuad
- inBack
- outBack
- inOutBack
- inCube
- outCube
- inOutCube
- inExpo
- outExpo
- inOutExpo
baku/animation/lerp
import Lerp from 'baku/animation/lerp'
let mover = new Lerp(0, 0.1)//start, speed, stop threshold, friction
mover.pos = 200
update(timeStamp){
if(mover.easing === true)
img.style.transform = `translate3d(${mover.pos}px,0,0)`
//requestanimationframe
}
AUDIO
baku/audio
import { hasAudioAPI, AudioEase } from 'baku/audio'
CANVAS
baku/canvas
import { CanvasView, pixelRatio } from 'baku/canvas'
//width, height, container, transparent
let stage = new CanvasView(1200, 800, document.getElementById('container'), false)
let pxr = pixelRatio() //get multibrowser pixel ratio
COLOR
baku/color
import { RGBColor, HSLColor } from 'baku/color'
let rgb = new RGBColor(255, 232, 123, 0.5)//red green blue alpha = 1
let hsl = new HSLColor(191, 42, 61, 0.2)//hue, sat, lum, alpha = 1
CORE
baku/core
import { getElem, createElem, findParentLI, getChildIndex } from 'baku/core'
//get dom element
let someElem = getElem('some-id') //getElementById
let anotherElem = getElem('.some-class', true) //querySelector
//create dom element
let createdElem = createElem('LI', 'right') //create an element and apply classname
CSS
baku/css
import { checkCSS } from 'baku/css'
//check if browser supports css properties
let hasObjectFit = checkCSS('object-fit', 'contain')
baku/css
import { transform, has3dTransform, transformPrefix } from 'baku/transforms'
someDiv.style[transformPrefix] = transform(x, y, z)
GEOMETRY
baku/geometry
import { Point, toRadians, Rectangle, PI, PI2 } from 'baku/geometry'
// PI & PI2 smaller than Math.PI for faster calculations
let rad = toRadians(25) //convert degrees to radians
let pt = new Point(12, 12) //x, y
Point.dist(ptA, ptB)
Point.approxDist(ptA, ptB)
let rectangle = new Rectangle(12, 15, 200, 50) //x, y, width, height
let rightEdge = rectangle.right
let bottomEdge = rectangle.bottom
let topEdge = rectangle.top
IMAGES
import { imageLoader } from 'baku/images'
imageLoader('https://c2.staticflickr.com/6/5759/24053243841_a870243909.jpg')
.then(img => document.body.appendChild(img))
.catch(err => console.log(err))
LOADERS
baku/loaders
import { xhr, scriptLoader, HTTP } from 'baku/loaders'
xhr('http://api.somesite.com/test') //url, params = {}, method = GET, headers = [['Content-Type', 'application/json']]
.then(results => {
//do something with results
})
.catch(err => {
console.log(err, 'unable to load')
})
const headers = [
['Content-Type', 'application/json'],
['Referer', 'http://www.github.com']
]
xhr('http://api.somesite.com/test', HTTP.post, { foo:'bar' }, headers)
.then( results => {
//do something with results
})
//load a js file async
//a use case could be detect if WEBGL is supported, if so load three.js
scriptLoader('https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.js')
.then(()=>{
// do something
})
DATE STRING ARRAYS
baku/dates
- MONTHS_LNG = 'January', 'February' ...
- MONTHS_SHRT = 'Jan', 'Feb' ...
- DAYS_LNG = 'Sunday', 'Monday'...
- DAYS_SHRT = 'Sun', 'Mon' ...
UTILS
baku/utils
import { randomRangeInt, clamp } from 'baku/utils'
VIDEO
baku/video
import { canAutoplay } from 'baku/video'
//autoplay detection, mobile video for example
SOCIAL
baku/social
import { attachFbShareDialog, attachTwShareDialog } from 'baku/social'
TOUCH
baku/touch
URL
baku/url
WINDOW
baku/window
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago