Useful JavaScript snippets that I can easily forget :P

array_ext_shuffle.coffee

#!/usr/bin/env coffee --bare

# Extend Array to add shuffle method
Array::shuffle = ->
  d = @length
  while d
    n1 = Math.floor(Math.random() * d)
    n2 = @[--d]
    @[d] = @[n1]
    @[n1] = n2
  @

# Usage
list = [1,2,3,4,5]
console.log list.shuffle()

flags.coffee

#!/usr/bin/env coffee --bare

# Oldschool flag management

# If there are 26 items, put them number like below
items = [
    { a: 0 }
    { b: 2 }
    { c: 4 }
    { d: 8 }
    { e: 16 }
    { f: 32 }
    { g: 64 }
    { h: 128 }
    { i: 256 }
    { j: 512 }
    { k: 1024 }
    { l: 2048 }
    { m: 4096 }
    { n: 8192 }
    { o: 16384 }
    { p: 32768 }
    { q: 65536 }
    { r: 131072 }
    { s: 262144 }
    { t: 524288 }
    { u: 1048576 }
    { v: 2097152 }
    { w: 4194304 }
    { x: 8388608 }
    { y: 16777216 }
    { z: 33554432 }
]

# And add flag numbers if item is 1 (true)

flag = 0

for inc, obj of items
  for key, val of obj
    if 1 == Math.round Math.random()
      flag += val

console.log flag

# 26 items sequence is below:
#  1: a
#  2: b
#  3: c
#  4: d
#  5: e
#  6: f
#  7: g
#  8: h
#  9: i
# 10: j
# 11: k
# 12: l
# 13: m
# 14: n
# 15: o
# 16: p
# 17: q
# 18: r
# 19: s
# 20: t
# 21: u
# 22: v
# 23: w
# 24: x
# 25: y
# 26: z

dec = flag
enabled_items = []

for item, i in items
  enabled_items[i] = Math.floor dec % 2  # This value is 0 or 1
  dec = dec / 2

for inc, obj of items
  for key, val of obj
    switch enabled_items[inc]
      when 0 then result = true
      when 1 then result = false
      else result = undefined
    console.log "#{key}=#{result}"

jquery_ext_preload.coffee

#!/usr/bin/env coffee

$ = jQuery

# jQuery Preloader

$.extend
  # MSIE8 の一部環境で読み込みに 10 分程かかった...
  preloadByXHR: (items) ->
    promises = []
    request = (url, promise) ->
      $.ajax
        type: 'GET'  # `HEAD` doesn't load files actually
        url: url
        error: promise.reject
        success: (data, textStatus, jqXHR) ->
          promise.notify(url)
          promise.resolve(data)
    for item in items
      deferred = $.Deferred()
      promises.push deferred
      request item, deferred
    promises

  preloadByDOM: (items) ->
    promises = []
    request = (url, promise) ->
      $('<img/>')
      .attr('src', url)
      .on 'error', (ev) ->
        $(@).remove()
        promise.reject(url)
      .on 'abort', (ev) ->
        $(@).remove()
        promise.reject(url)
      .on 'load', (ev) ->
        $(@).remove()
        promise.notify(url)
        promise.resolve(url)
    for item in items
      deferred = $.Deferred()
      promises.push deferred
      request item, deferred
    promises

  # TODO: HTML 内の <img> 要素を抜き出して preload をかけたら disolay: none を解くみたいなのものほしいな。


# Usage

items = [
  './path/to/file.json'
  './path/to/file.png'
  './path/to/file.xml'
]

$ ->
  promises = $.preloadByXHR(items)

  $.when.apply(@, promises)
  .progress (items...) ->
    threshold = 100 / items.length
    percentage = 0
    percentage += threshold for item in items when undefined != item
    console.log "#{percentage}% loaded."
  .fail (jqXHR, textStatus, errorThrown) ->
    console.log 'Error occured.'
  .done (items...) ->
    console.log items
    console.log 'All of request completed.'

jquery_ext_timer.coffee

#!/usr/bin/env coffee

$ = jQuery

# jQuery Deferred Timer

$.extend
  wait: (sec, options={}) ->
    d = $.Deferred()
    setTimeout ->
      d.resolve options
    , sec * 1000
    d.promise()


# Usage

$.wait(3, { msg: 'Hello!' }).done (options) ->
  # 3 seconds later...
  console.log "Say '#{options.msg}'."

scroll_wheel.coffee

#!/usr/bin/env coffee

# This is how to detect wheel scroll direction
handleDirection = ->
  delta = -event.detail or event.wheelDelta / 40
  if delta < 0
    # Scroll up
  else
    # Scroll down
  true

el = document.getElementById 'target'

el.addEventListener 'mousewheel', handleDirection, false