Skip to content

Instantly share code, notes, and snippets.

@kotarok
kotarok / JSONP.js
Last active August 23, 2016 03:10
Simple JSONP caller. Load JSON data as JSONP with given function.
var JSONP = function(apiurl, params, options) {
if (params) {
this.apiurl = this.constructURL_(apiurl, params);
}
this.conf = {
callbackKey: 'callback',
callbackName: 'uni',
paramDelimiter: '&'
@kotarok
kotarok / processTextNodes.js
Last active December 5, 2019 10:35
Walk DOM tree to extract textNode and apply given mutator function.
/**
* Extract textNodes from the tree of given root element. And apply given
* function to each textNodes.
* @param {HTMLElement} rootEl Target DOM sub tree root.
* @param {Function} processor Processor function
* @param {Object} option Config to override
*/
var processTextNodes = function(rootEl, processor, option) {
var conf = {
dummyElementName: 'dummy',
@kotarok
kotarok / watchInview.js
Last active October 4, 2016 15:28
Watch if the given element is in viewport and fires 'inview' and 'outview' event respectively.
var watchInview = function(el) {
// Get most closest element which has scrollbar.
var scrollContainer = getAncestors(el).find(function(el) {
return el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth;
});
el.scrollContainer =
(scrollContainer instanceof HTMLBodyElement)? window: scrollContainer;
@kotarok
kotarok / mono.js
Last active January 18, 2016 12:52
Minimum fake jQuery
var $ = function(q, f){
return [][(f? 'forEach': 'slice')].call(document.querySelectorAll(q), f || 0);
};
@kotarok
kotarok / watchSwipe.js
Last active January 18, 2016 03:17
JavaScript watchSwipe() event observer.
var watchSwipe = function(el) {
var d = {};
var SWIPWE = 'swipe',
FLICK = 'flick',
DIRECTIONS = ['Up', 'Left', 'Right', 'Down'],
SWIPE_MIN_MOVE = 50,
FLICK_MIN_MOVE = 30,
FLICK_MIN_VELO = 1;
el.touchstartListener_ = function(e) {
@kotarok
kotarok / Parallax.js
Last active December 1, 2015 10:12
Simple and easy parallax effect.
/**
* Parallax class provides parallax effect for multiple elements.
* @constructor
*/
var Parallax = function(expr) {
this.targets = [];
if (typeof expr === 'string') {
this.init(expr);
}
};
@kotarok
kotarok / packages.cson
Created June 2, 2015 11:49
The list of ATOM packages I installed. Produced and used by https://atom.io/packages/package-sync package.
packages: [
"atom-beautify"
"autocomplete-paths"
"color-picker"
"comment"
"docblockr"
"emmet"
"file-icons"
"flatland-dark"
"flatland-dark-ui"
@kotarok
kotarok / private.xml
Last active August 29, 2015 14:20
Karabiner setting file for myself.
<?xml version="1.0"?>
<root>
<list>
<item>
<name>Kotarok custom setting</name>
<item>
<name>Kana with IJKL to cursor (and more)</name>
<!-- <appendix>EISUU/KANA to toggle them each other.</appendix> -->
<identifier>remap.kanaijklcursor</identifier>
<autogen>__KeyOverlaidModifier__ KeyCode::JIS_EISUU, KeyCode::OPTION_L, KeyCode::VK_JIS_TOGGLE_EISUU_KANA</autogen>
var ListShuffler = function(targetExpr, itemExpr) {
this.targetExpr = targetExpr || '';
this.itemExpr = itemExpr || 'li';
this.targetEl = {};
this.items = [];
this.init();
this.do();
}
ListShuffler.prototype.init = function() {
// Define custom color name.
$my-red: #ee3333;
$my-blue: #3333ee;
// Then assign thme to role or context based name variables.
$header-bg: $my-red;
$header-active-fg: $my-blue;
// Bind them to elements finally.
.header {