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 all components
Examples
Emitter
; var emitter = ; var subscribeHello = emitter; var subscribeWorld_1 = emitter subscribeWorld_2 = emitter; // Unsubscribe subscriptions.// subscribeHello.unsubscribe();// subscribeWorld_1.unsubscribe();// subscribeWorld_2.unsubscribe(); emitter;emitter; /* * 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
<!-- can rename class you want --> <!-- can rename class you want -->
; var fullSizeBg = wrap: // wrap imgWrap: // 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'; /* * 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
<!-- can rename class you want --> <!-- can rename class you want -->
; var fullSizeVideo = outerWrap: // outer 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 alignX: 'center' // left, center, right alignY: 'center' // top, center, bottom isAutoPlay: false // auto play flag isLoop: false // loop flag isMuted: false // mute flag { // {event} console; } { // {event, currentTime, duration} console; } { // {event, currentTime, duration} console; }; ; ; ; /* * 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
<!-- can rename class you want --> <!-- can rename class you want --> <!-- can rename class you want --> kihon: Thanks to whoever use kihon. This is HorizontalScrollingNavi
; // set HorizontalScrollingNavi extends Navivar wrap = ; var navi = /* * Kihon.Navi options */ btns: // navi buttons { // {event, btn, index} console; } { // {event, btn, index} console; } { // {event, btn, index} console; } { // {event, btn, index} console; } { // {event, btn, prevActivatedIndex, index} console; } { // {prevActivatedIndex, index} console; var btns = btn = ; btns; btn; } /* * Kihon.HorizontalScrollingNavi options */ wrap: wrap // wrap handleClass: 'handle' // handle class speed: 025 // how fast the handle will slide to position after you mouse up (0 ~ 1) { // 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; } { // called at the beginning of a drag with handle initial x, y values. console; } { // same as callback(x, y) but only called after a drag, not after call setX / setRatioX method. console; } { // called every animation loop, as long as the handle is being dragged or in the process of a sliding animation. console; }; /* * 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
; var imgLoader = { // data about all images. {imgs, percentage} console; console; console; } { // data about per image. {event, img, percentage} console; console; console; } { // data about per error. {event, img, percentage} console; console; console; }; imgLoaderstart '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
;// import Overlay from 'kihon/Overlay'; var 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 { // call just before show modal console; } { // call just before hide modal console; } // overlay: new Overlay().init(); modal; /* * 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
kihon: Thanks to whoever use kihon.
; var navi = btns: // navi buttons { // {event, btn, index} console; } { // {event, btn, index} console; } { // {event, btn, index} console; } { // {event, btn, index} console; } { // {event, btn, prevActivatedIndex, index} console; } { // {prevActivatedIndex, index} console; var btns = btn = ; btns; btn; }; /* * 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
kihon: Thanks to whoever use kihon.
; var navi = btns: // navi buttons { // {event, btn, index} console; ; } { // {event, btn, index} console; } { // {event, btn, index} console; } { // {event, btn, index} console; } { // {event, btn, prevActivatedIndex, index} console; } { // {prevActivatedIndex, index} console; ; } timerInterval: 1000 // after mouseout navi, interval to set activated button index; { var btns = btn = ; btns; btn;} /* * 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
; var overlay = // class: 'overlay', // overlay class // color: '#000', // background color // opacity: 0.5, // opacity (0 ~ 1) // appendTo: $('body'), // element to append overlay { // call when click overlay console; }; overlay; /* * 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
;// import Overlay from 'kihon/Overlay'; var 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 { // call just before show modal console; } { // call just before hide modal console; } // 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 ; youtubeModal; /* * 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
<!-- can rename class you want -->
; var video = wrap: // 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 { // {event} console; } { // {event, currentTime, duration} // console.log('Kihon.Video timeupdateCallback obj :', obj); } { // {event, currentTime, duration} console; }; ; ; ; /* * 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 : dragmove@gmail.com