kihon

kihon is a Bundle of Lite components which provide straightforward Interactive UI.

About

Dependency to jQuery 3.x.x
Support ES2015+ (can also be used directly in the browser)
Support Webpack Tree Shaking

Thanks to whoever use kihon.

Install

npm install kihon --save-dev

Components

Emitter (dependency to RxJS)
FullSizeBg
FullSizeVideo
HorizontalScrollingNavi (dependency to Dragdealer.js)
ImageLoader
Navi
NaviHasTimer
Overlay
Modal
YoutubeModal
Video

Getting Started

In Node.js environment :

will update soon.

In Browser environment :

import Kihon from 'kihon'; // Import all components
import FullSizeBg from 'kihon/FullSizeBg' // Import single component. You can use tree-shaking. (https://webpack.js.org/guides/tree-shaking/)

Examples

Emitter

import Emitter from 'kihon/Emitter';

var emitter = new Emitter();

var subscribeHello = emitter.listen('hello', function(data) {
    console.log('hello :', data);
});

var subscribeWorld_1 = emitter.listen('world', function(data) {
        console.log('world_1 :', data);
    }),
    subscribeWorld_2 = emitter.listen('world', function(data) {
        console.log('world_2 :', data);
    });

// Unsubscribe subscriptions.
// subscribeHello.unsubscribe();
// subscribeWorld_1.unsubscribe();
// subscribeWorld_2.unsubscribe();

emitter.emit('hello', { value: 1 });
emitter.emit('world', { value: 99 });

/*
 * Emitter public methods
 */
// set event, event handler
// emitter.listen(event name, event handler);

// emii event
// emitter.emit(event name, data)

// dispose of all subscriptions
// emitter.dispose();

FullSizeBg

<div class="wrap-full-size-bg"> <!-- can rename class you want -->
    <div class="full-size-bg"> <!-- can rename class you want -->
        <img src="https://images.unsplash.com/photo-1474496517593-015d8b59450d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=49563d997d36faad03833ddab8d15c0a" alt="">
    </div>
</div>

html, body {margin: 0; padding: 0;}
.wrap-full-size-bg {position: relative; overflow: hidden; background: #333;}
.full-size-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

import FullSizeBg from 'kihon/FullSizeBg';

var fullSizeBg = new FullSizeBg({
    wrap: $('.wrap-full-size-bg'), // wrap
    imgWrap: $('.full-size-bg'), // image wrap
    imgWidth: 4592, // natural image width
    imgHeight: 3064, // natural image height
    alignX: 'center', // 'left' or 'center' or 'right'
    alignY: 'center' // 'top' or 'center' or 'bottom'
}).init();

/*
 * FullSizeBg public methods
 */
// set resize event handler
// fullSizeBg.setResizeEventHandler(true / false);

// resize
// fullSizeBg.resize();

// get image size based on aspect fill calculation
// console.log( fullSizeBg.getImageSizeAspectFill(srcWidth, srcHeight) );

// destroy
// fullSizeBg.destroy();

FullSizeVideo

<div class="wrap-full-size-video"> <!-- can rename class you want -->
    <div class="wrap-video"></div> <!-- can rename class you want -->
</div>

html, body {margin: 0; padding: 0;}
.wrap-full-size-video {position: relative; overflow: hidden; background: #333;}
.wrap-video {position: absolute;}
.wrap-video video {position: absolute; top: 0; left: 0;}

import FullSizeVideo from 'kihon/FullSizeVideo';

var fullSizeVideo = new FullSizeVideo({
    outerWrap: $('.wrap-full-size-video'), // outer wrap
    wrap: $('.wrap-video'), // video wrap
    videoUrls: ['https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4', 'https://www.quirksmode.org/html5/videos/big_buck_bunny.ogv'], // video sources
    videoWidth: 640, // video width
    videoHeight: 360, // video height
    alignX: 'center', // left, center, right
    alignY: 'center', // top, center, bottom
    isAutoPlay: false, // auto play flag
    isLoop: false, // loop flag
    isMuted: false, // mute flag
    canplayCallback: function (obj) { // {event}
        console.log('Kihon.FullSizeVideo canplayCallback obj :', obj);
    },
    timeupdateCallback: function (obj) { // {event, currentTime, duration}
        console.log('Kihon.FullSizeVideo timeupdateCallback obj :', obj);
    },
    endedCallback: function (obj) { // {event, currentTime, duration}
        console.log('Kihon.FullSizeVideo endedCallback obj :', obj);
    }
}).init();

setTimeout(function () {
    fullSizeVideo.play();
}, 2000);

setTimeout(function () {
    fullSizeVideo.pause();
}, 5000);

setTimeout(function () {
    fullSizeVideo.seek(5).play();
}, 8000);

/*
 * FullSizeVideo public methods
 */
// get video node
// console.log( fullSizeVideo.getVideoNode() );

// get video size based on aspect fill calculation
// console.log( fullSizeVideo.getVideoSizeAspectFill(srcWidth, srcHeight) );

// get volume (0 ~ 1)
// console.log( fullSizeVideo.getVolume() );

// set volume
// console.log( fullSizeVideo.setVolume(0 ~ 1) );

// play video
// fullSizeVideo.play();

// pause video
// fullSizeVideo.pause();

// stop video
// fullSizeVideo.stop();

// seek video
// fullSizeVideo.seek(second);

// set resize event handler
// fullSizeVideo.setResizeEventHandler(true / false);

// resize
// fullSizeVideo.resize();

// destroy
// fullSizeVideo.destroy();

HorizontalScrollingNavi

<div class="scrolling-navi"> <!-- can rename class you want -->
    <div class="handle"> <!-- can rename class you want -->
        <ul class="btns"> <!-- can rename class you want -->
            <li><a href="#">kihon:</a></li>
            <li><a href="#">Thanks</a></li>
            <li><a href="#">to</a></li>
            <li><a href="#">whoever</a></li>
            <li><a href="#">use</a></li>
            <li><a href="#">kihon.</a></li>
            <li><a href="#">This</a></li>
            <li><a href="#">is</a></li>
            <li><a href="#">HorizontalScrollingNavi</a></li>
        </ul>
    </div>
</div>

html, body {margin: 0; padding: 0; width: 100%;}
.scrolling-navi {position: relative; width: 100%; height: 50px; overflow: hidden; background-color: #CFD8DC;}
.scrolling-navi .handle {position: absolute; top: 0; left: 0;}
.scrolling-navi .btns {display: block; position: relative; margin: 0; padding: 0; font-size: 0; white-space: nowrap;}
.scrolling-navi .btns:after {content: ""; display: block; clear: both;}
.scrolling-navi .btns li {display: inline-block; height: 50px; line-height: 50px;}
.scrolling-navi .btns li a {display: block; margin-left: 0; margin-right: 0; padding-left: 8px; padding-right: 8px; font-size: 15px; font-weight: bold;text-align: center; text-decoration: none; }
.scrolling-navi .btns li a.on {color: #FF5252;}

import HorizontalScrollingNavi from 'kihon/HorizontalScrollingNavi';

// set HorizontalScrollingNavi extends Navi
var wrap = $('.scrolling-navi');

var navi = new HorizontalScrollingNavi({
    /*
     * Kihon.Navi options
     */
    btns: $('.btns li a', wrap), // navi buttons
    mouseoverCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.HorizontalScrollingNavi mouseoverCallback :', obj);
    },
    mouseoutCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.HorizontalScrollingNavi mouseoutCallback :', obj);
    },
    mousedownCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.HorizontalScrollingNavi mousedownCallback :', obj);
    },
    mouseupCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.HorizontalScrollingNavi mouseupCallback:', obj);
    },
    clickCallback: function (obj) { // {event, btn, prevActivatedIndex, index}
        console.log('Kihon.HorizontalScrollingNavi clickCallback :', obj);
    },
    activateCallback: function (obj) { // {prevActivatedIndex, index}
        console.log('Kihon.HorizontalScrollingNavi activateCallback :', obj);

        var btns = $(navi.getBtns()),
            btn = $(navi.getBtn(obj.index));

        btns.removeClass('on');
        btn.addClass('on');
    },

    /*
     * Kihon.HorizontalScrollingNavi options
     */
    wrap: wrap, // wrap
    handleClass: 'handle', // handle class
    speed: 0.25, // how fast the handle will slide to position after you mouse up (0 ~ 1)
    positionedCallback: function(x, y) {
        // called when releasing handle or calling setX / setRatioX method, with the projected x, y position of the handle. projected value means the value the slider will have after finishing a sliding animation
        console.log('Kihon.HorizontalScrollingNavi positionedCallback :', x, navi.getOffsetRatioByPosition(x));
    },
    dragStartCallback: function (x, y) {
        // called at the beginning of a drag with handle initial x, y values.
        console.log('Kihon.HorizontalScrollingNavi dragStartCallback :', x, y);
    },
    dragStopCallback: function (x, y) {
        // same as callback(x, y) but only called after a drag, not after call setX / setRatioX method.
        console.log('Kihon.HorizontalScrollingNavi dragStopCallback :', x, y);
    },
    animationCallback: function(x, y) {
        // called every animation loop, as long as the handle is being dragged or in the process of a sliding animation.
        console.log('Kihon.HorizontalScrollingNavi animationCallback :', x, y);
    }
}).init();

/*
 * HorizontalScrollingNavi public methods
 */
// get all buttons
// console.log( navi.getBtns() );

// get one button. (1st button's index is 1.)
// console.log( navi.getBtn(button index) );

// get activated button index
// console.log( navi.getActivatedIndex() );

// activate one button, and deactivate other buttons. (1st button's index is 1.)
// navi.activate(button index);

// set buttons event handler
// navi.setBtnsEventHandler(true / false);

// get navi handle position ratio x (0 ~ 1)
// console.log( navi.getRatioX() );

// get offset ratio by position
// console.log( navi.getOffsetRatioByPosition(-99) );

// get handle node
// console.log( navi.getHandle() );

// set navi handle position by x
// navi.setX(-99);

// set navi handle position by ratio x (0 ~ 1)
// navi.setRatioX(0.75);

// get flag navi is draggbale
// console.log( navi.isDraggable() );

// enable dragging
// navi.enable();

// disable dragging
// navi.disable();

// set resize event handler
// navi.setResizeEventHandler(true / false);

// resize
// navi.resize();

// destroy
// navi.destroy();

ImageLoader

import ImageLoader from 'kihon/ImageLoader';

var imgLoader = new ImageLoader({
    loadCompleteCallback: function (obj) { // data about all images. {imgs, percentage}
        console.log('Kihon.ImageLoader loadComplete :', obj);
        console.log('Kihon.ImageLoader loadComplete - imgLoader.isFinished() :', imgLoader.isFinished());
        console.log('Kihon.ImageLoader loadComplete - imgLoader.getLoadedImgs() :', imgLoader.getLoadedImgs());
    },
    loadPerCompleteCallback: function (obj) { // data about per image. {event, img, percentage}
        console.log('Kihon.ImageLoader loadPerComplete :', obj);
        console.log('Kihon.ImageLoader loadPerComplete - imgLoader.isFinished() :', imgLoader.isFinished());
        console.log('Kihon.ImageLoader loadPerComplete - imgLoader.getLoadedImgs() :', imgLoader.getLoadedImgs());
    },
    loadErrorCallback: function (obj) { // data about per error. {event, img, percentage}
        console.log('Kihon.ImageLoader loadError :', obj);
        console.log('Kihon.ImageLoader loadError - imgLoader.isFinished() :', imgLoader.isFinished());
        console.log('Kihon.ImageLoader loadError - imgLoader.getLoadedImgs() :', imgLoader.getLoadedImgs());
    }
});

imgLoader.start([
    'https://images.unsplash.com/photo-1431794062232-2a99a5431c6c?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=767&h=511&q=80&cs=tinysrgb',
    'https://images.unsplash.com/error-dummy-url.png',
    'https://images.unsplash.com/photo-1459666644539-a9755287d6b0?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=767&h=463&q=80&cs=tinysrgb'
]);

/*
 * ImageLoader public methods
 */
// get flag finish load all images
// console.log( imgLoader.isFinished() );

// get array has loaded images
// console.log( imgLoader.getLoadedImgs() );

// get percentage number(0 ~ 1)
// console.log( imgLoader.getPercentageLoaded() );

// destroy
// imgLoader.destroy();

Modal

.modal-wrap {position: fixed; top: 0; right: 0; bottom: 0; left: 0;}
.modal {position: relative; display: block; margin: 0 auto; top: 50%; width: 250px; height: 250px; background-color: #CFD8DC; color: #FFFFFF; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.btn-close {position: absolute; top: 0; right: 0; background-color: #FF5252;}

import Modal from 'kihon/Modal';
// import Overlay from 'kihon/Overlay';

var modal = new Modal({
    wrapClass: 'modal-wrap', // modal wrap class
    contents: '<div class="modal"><p>Kihon.Modal<br>Thanks to whoever use <a href="https://github.com/dragmove/kihon">kihon</a>.</p><a href="#" class="btn-close">close</a></div>', // modal contents html
    // appendTo: $('body'), // element to append modal wrap
    // closeBtnSelector: '.btn-close', // jQuery selector of close button
    // isCloseByClickOutside: true, // hide modal when click outside of modal contents
    // isCloseByEscKey: true, // hide modal when keydown escape key
    showCallback: function () { // call just before show modal
        console.log('Kihon.Modal showCallback :', this);
    },
    hideCallback: function () { // call just before hide modal
        console.log('Kihon.Modal hideCallback :', this);
    },
    // overlay: new Overlay().init()
}).init();

modal.show();

/*
 * Modal public methods
 */
// set close button event handler
// modal.setCloseBtnEventHandler(true / false);

// set modal wrap event handler
// modal.setWrapEventHandler(true / false);

// set escape key event handler
// modal.setEscKeyEventHandler(true / false);

// get modal node
// console.log( modal.getNode() );

// append to other element
// modal.appendTo(parent element);

// show modal
// modal.show();

// hide modal
// modal.hide();

// get flag modal is hide
// console.log( modal.isShow() );

// destroy
// modal.destroy();
// modal.destroy({isRemoveNode: true, isRemoveOverlay: true});

Navi

<ul class="navi">
    <li><a href="#">kihon:</a></li>
    <li><a href="#">Thanks</a></li>
    <li><a href="#">to</a></li>
    <li><a href="#">whoever</a></li>
    <li><a href="#">use</a></li>
    <li><a href="#">kihon.</a></li>
</ul>

.navi {width: 75px; background-color: #CFD8DC;}
.navi li a.on {color: #FF5252;}

import Navi from 'kihon/Navi';

var navi = new Navi({
    btns: $('.navi li a'), // navi buttons
    mouseoverCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.Navi mouseoverCallback :', obj);
    },
    mouseoutCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.Navi mouseoutCallback :', obj);
    },
    mousedownCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.Navi mousedownCallback :', obj);
    },
    mouseupCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.Navi mouseupCallback:', obj);
    },
    clickCallback: function (obj) { // {event, btn, prevActivatedIndex, index}
        console.log('Kihon.Navi clickCallback :', obj);
    },
    activateCallback: function (obj) { // {prevActivatedIndex, index}
        console.log('Kihon.Navi activateCallback :', obj);

        var btns = $(navi.getBtns()),
            btn = $(navi.getBtn(obj.index));

        btns.removeClass('on');
        btn.addClass('on');
    }
}).init();

/*
 * Navi public methods
 */
// get all buttons
// console.log( navi.getBtns() );

// get one button. (1st button's index is 1.)
// console.log( navi.getBtn(button index) );

// get activated button index
// console.log( navi.getActivatedIndex() );

// activate one button, and deactivate other buttons. (1st button's index is 1.)
// navi.activate(button index);

// set buttons event handler
// navi.setBtnsEventHandler(true / false);

// destroy
// navi.destroy();

NaviHasTimer

<ul class="navi">
    <li><a href="#">kihon:</a></li>
    <li><a href="#">Thanks</a></li>
    <li><a href="#">to</a></li>
    <li><a href="#">whoever</a></li>
    <li><a href="#">use</a></li>
    <li><a href="#">kihon.</a></li>
</ul>

.navi {width: 75px; background-color: #CFD8DC;}
.navi li a.on {color: #FF5252;}

import NaviHasTimer from 'kihon/NaviHasTimer';

var navi = new NaviHasTimer({
    btns: $('.navi li a'), // navi buttons
    mouseoverCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.NaviHasTimer mouseoverCallback :', obj);

        activateBtn(obj.index);
    },
    mouseoutCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.NaviHasTimer mouseoutCallback :', obj);
    },
    mousedownCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.NaviHasTimer mousedownCallback :', obj);
    },
    mouseupCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.NaviHasTimer mouseupCallback:', obj);
    },
    clickCallback: function (obj) { // {event, btn, prevActivatedIndex, index}
        console.log('Kihon.NaviHasTimer clickCallback :', obj);
    },
    activateCallback: function (obj) { // {prevActivatedIndex, index}
        console.log('Kihon.NaviHasTimer activateCallback :', obj);

        activateBtn(obj.index);
    },
    timerInterval: 1000 // after mouseout navi, interval to set activated button index
}).init();

function activateBtn(index) {
    var btns = $(navi.getBtns()),
        btn = $(navi.getBtn(index));

    btns.removeClass('on');
    btn.addClass('on');
}

/*
 * NaviHasTimer public methods
 */
// get all buttons
// console.log( navi.getBtns() );

// get one button. (1st button's index is 1.)
// console.log( navi.getBtn(button index) );

// get activated button index
// console.log( navi.getActivatedIndex() );

// activate one button, and deactivate other buttons. (1st button's index is 1.)
// navi.activate(button index);

// set buttons event handler
// navi.setBtnsEventHandler(true / false);

// destroy
// navi.destroy();

Overlay

import Overlay from 'kihon/Overlay';

var overlay = new Overlay({
    // class: 'overlay', // overlay class
    // color: '#000', // background color
    // opacity: 0.5, // opacity (0 ~ 1)
    // appendTo: $('body'), // element to append overlay
    clickCallback: function (evt) { // call when click overlay
        console.log('Kihon.Overlay clickCallback :', evt);
    }
}).init();

overlay.show();

/*
 * Overlay public methods
 */
// set node event handler
// overlay.setNodeEventHandler(true / false);

// get node
// console.log(overlay.getNode());

// set css
// overlay.setCss({'background-color': '#f00', ...});

// append to other element
// overlay.appendTo(parent element);

// show overlay
// overlay.show();

// hide overlay
// overlay.hide();

// destroy
// overlay.destroy();
// overlay.destroy({isRemoveNode: true});

YoutubeModal

.modal-wrap {position: fixed; top: 0; right: 0; bottom: 0; left: 0;}
.modal {position: relative; display: block; margin: 0 auto; top: 50%; width: 100%; max-width: 640px; background-color: #CFD8DC; color: #FFFFFF; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.btn-close {position: absolute; top: 0; right: 0; background-color: #FF5252;}
.embed-responsive-video {position: relative; padding-top: 56.25%; /* 16:9 ratio */ background-color: #CFD8DC;}
.embed-responsive-video .iframe-wrap {position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%;}

import YoutubeModal from 'kihon/YoutubeModal';
// import Overlay from 'kihon/Overlay';

var youtubeModal = new YoutubeModal({
    wrapClass: 'modal-wrap', // modal wrap class
    contents: '<div class="modal"><div class="embed-responsive-video"><div class="iframe-wrap"></div></div><a href="#" class="btn-close">close</a></div>', // modal contents html
    // appendTo: $('body'), // element to append modal wrap
    // closeBtnSelector: '.btn-close', // jQuery selector of close button
    // isCloseByClickOutside: true, // hide modal when click outside of modal contents
    // isCloseByEscKey: true, // hide modal when keydown escape key
    showCallback: function () { // call just before show modal
        console.log('Kihon.YoutubeModal showCallback :', this);
    },
    hideCallback: function () { // call just before hide modal
        console.log('Kihon.YoutubeModal hideCallback :', this);
    },
    // overlay: new Overlay().init(),
    iFrameWrapSelector: '.iframe-wrap', // youtube iframe wrap selector
    youtube: { // youtube player info
        id: 'YzKLbB5B0tg',
        width: '',
        height: '',
        playerVars: {
            // https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters
            autoplay: 1,
            rel: 0
        }
    }
}).init();

youtubeModal.show();

/*
 * YoutubeModal public methods
 */
// set close button event handler
// youtubeModal.setCloseBtnEventHandler(true / false);

// set modal wrap event handler
// youtubeModal.setWrapEventHandler(true / false);

// set escape key event handler
// youtubeModal.setEscKeyEventHandler(true / false);

// get modal node
// console.log( youtubeModal.getNode() );

// append to other element
// youtubeModal.appendTo(parent element);

// show modal
// youtubeModal.show();

// hide overlay
// youtubeModal.hide();

// change youtube iframe
// youtubeModal.changeYoutubeIFrame('mJEZFTbxm4o');
// youtubeModal.changeYoutubeIFrame({id: 'mJEZFTbxm4o', width: '', height: '', playerVars: {autoplay: 1, rel: 0, controls: 0}});

// get youtube iframe
// console.log( youtubeModal.getYoutubeIFrame() );

// get youtube id
// console.log( youtubeModal.getYoutubeId() );

// get flag modal is hide

// destroy
// youtubeModal.destroy();
// youtubeModal.destroy({isRemoveNode: true, isRemoveOverlay: true});

Video

<div class="wrap-video"> <!-- can rename class you want -->
</div>

html, body {margin: 0; padding: 0;}
.wrap-video {position: relative; background: #333; width: 640px; height: 360px;}

import Video from 'kihon/Video';

var video = new Video({
    wrap: $('.wrap-video'), // wrap
    videoUrls: ['https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4', 'https://www.quirksmode.org/html5/videos/big_buck_bunny.ogv'], // video sources
    videoWidth: 640, // video width
    videoHeight: 360, // video height
    isAutoPlay: false, // auto play flag
    isLoop: false, // loop flag
    isMuted: true, // mute flag
    canplayCallback: function (obj) { // {event}
        console.log('Kihon.Video canplayCallback obj :', obj);
    },
    timeupdateCallback: function (obj) { // {event, currentTime, duration}
        // console.log('Kihon.Video timeupdateCallback obj :', obj);
    },
    endedCallback: function (obj) { // {event, currentTime, duration}
        console.log('Kihon.Video endedCallback obj :', obj);
    }
}).init();

setTimeout(function () {
    video.play();
}, 2000);

setTimeout(function () {
    video.pause();
}, 5000);

setTimeout(function () {
    video.seek(5).play();
}, 8000);

/*
 * video public methods
 */
// get video node
// console.log( video.getVideoNode() );

// get volume (0 ~ 1)
// console.log( video.getVolume() );

// set volume
// console.log( video.setVolume(0 ~ 1) );

// get video muted
// console.log( video.isMuted() );

// play video
// video.play();

// pause video
// video.pause();

// stop video
// video.stop();

// seek video
// video.seek(second);

// destroy
// video.destroy();

Contact

@Website : http://www.dragmove.xyz
@Blog : http://blog.naver.com/dragmove
@LinkedIn : https://www.linkedin.com/in/hyun-seok-kim-99748295/
@E-mail : [email protected]

License

MIT license.

Name		Name	Last commit message	Last commit date
Latest commit History 65 Commits
examples		examples
.babelrc		.babelrc
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
Emitter.js		Emitter.js
FullSizeBg.js		FullSizeBg.js
FullSizeCanvasVideo.js		FullSizeCanvasVideo.js
FullSizeVideo.js		FullSizeVideo.js
HorizontalScrollingNavi.js		HorizontalScrollingNavi.js
ImageLoader.js		ImageLoader.js
LICENSE		LICENSE
Modal.js		Modal.js
Navi.js		Navi.js
NaviHasTimer.js		NaviHasTimer.js
Overlay.js		Overlay.js
README.md		README.md
Video.js		Video.js
YoutubeModal.js		YoutubeModal.js
_util.js		_util.js
gulpfile.babel.js		gulpfile.babel.js
kihon.js		kihon.js
kihon.min.js		kihon.min.js
kihon.min.js.map		kihon.min.js.map
package-lock.json		package-lock.json
package.json		package.json
webpack.config.js		webpack.config.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

kihon

About

Install

Components

Getting Started

Examples

Emitter

FullSizeBg

FullSizeVideo

HorizontalScrollingNavi

ImageLoader

Modal

Navi

NaviHasTimer

Overlay

YoutubeModal

Video

Contact

License

About

Releases

Packages

Languages

License

dragmove/kihon

Folders and files

Latest commit

History

Repository files navigation

kihon

About

Install

Components

Getting Started

Examples

Emitter

FullSizeBg

FullSizeVideo

HorizontalScrollingNavi

ImageLoader

Modal

Navi

NaviHasTimer

Overlay

YoutubeModal

Video

Contact

License

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages