## Traversing# @$ = (selector, el = document) -> try el.querySelector(selector) catch @$$ = (selector, el = document) -> try el.querySelectorAll(selector) catch $.id = (id) -> document.getElementById(id) $.hasChild = (parent, el) -> return unless parent while el return true if el is parent return if el is document.body el = el.parentNode $.closestLink = (el, parent = document.body) -> while el return el if el.tagName is 'A' return if el is parent el = el.parentNode ## Events# $.on = (el, event, callback, useCapture = false) -> if event.indexOf(' ') >= 0 $.on el, name, callback for name in event.split(' ') else el.addEventListener(event, callback, useCapture) return $.off = (el, event, callback, useCapture = false) -> if event.indexOf(' ') >= 0 $.off el, name, callback for name in event.split(' ') else el.removeEventListener(event, callback, useCapture) return $.trigger = (el, type, canBubble = true, cancelable = true) -> event = document.createEvent 'Event' event.initEvent(type, canBubble, cancelable) el.dispatchEvent(event) return $.click = (el) -> event = document.createEvent 'MouseEvent' event.initMouseEvent 'click', true, true, window, null, 0, 0, 0, 0, false, false, false, false, 0, null el.dispatchEvent(event) return $.stopEvent = (event) -> event.preventDefault() event.stopPropagation() event.stopImmediatePropagation() return $.eventTarget = (event) -> event.target.correspondingUseElement || event.target ## Manipulation# buildFragment = (value) -> fragment = document.createDocumentFragment() if $.isCollection(value) fragment.appendChild(child) for child in $.makeArray(value) else fragment.innerHTML = value fragment $.append = (el, value) -> if typeof value is 'string' el.insertAdjacentHTML 'beforeend', value else value = buildFragment(value) if $.isCollection(value) el.appendChild(value) return $.prepend = (el, value) -> if not el.firstChild $.append(value) else if typeof value is 'string' el.insertAdjacentHTML 'afterbegin', value else value = buildFragment(value) if $.isCollection(value) el.insertBefore(value, el.firstChild) return $.before = (el, value) -> if typeof value is 'string' or $.isCollection(value) value = buildFragment(value) el.parentNode.insertBefore(value, el) return $.after = (el, value) -> if typeof value is 'string' or $.isCollection(value) value = buildFragment(value) if el.nextSibling el.parentNode.insertBefore(value, el.nextSibling) else el.parentNode.appendChild(value) return $.remove = (value) -> if $.isCollection(value) el.parentNode?.removeChild(el) for el in $.makeArray(value) else value.parentNode?.removeChild(value) return $.empty = (el) -> el.removeChild(el.firstChild) while el.firstChild return # Calls the function while the element is off the DOM to avoid triggering# unnecessary reflows and repaints.$.batchUpdate = (el, fn) -> parent = el.parentNode sibling = el.nextSibling parent.removeChild(el) fn(el) if (sibling) parent.insertBefore(el, sibling) else parent.appendChild(el) return ## Offset# $.rect = (el) -> el.getBoundingClientRect() $.offset = (el, container = document.body) -> top = 0 left = 0 while el and el isnt container top += el.offsetTop left += el.offsetLeft el = el.offsetParent top: top left: left $.scrollParent = (el) -> while (el = el.parentNode) and el.nodeType is 1 break if el.scrollTop > 0 break if getComputedStyle(el)?.overflowY in ['auto', 'scroll'] el $.scrollTo = (el, parent, position = 'center', options = {}) -> return unless el parent ?= $.scrollParent(el) return unless parent parentHeight = parent.clientHeight parentScrollHeight = parent.scrollHeight return unless parentScrollHeight > parentHeight top = $.offset(el, parent).top offsetTop = parent.firstElementChild.offsetTop switch position when 'top' parent.scrollTop = top - offsetTop - (if options.margin? then options.margin else 0) when 'center' parent.scrollTop = top - Math.round(parentHeight / 2 - el.offsetHeight / 2) when 'continuous' scrollTop = parent.scrollTop height = el.offsetHeight lastElementOffset = parent.lastElementChild.offsetTop + parent.lastElementChild.offsetHeight offsetBottom = if lastElementOffset > 0 then parentScrollHeight - lastElementOffset else 0 # If the target element is above the visible portion of its scrollable # ancestor, move it near the top with a gap = options.topGap * target's height. if top - offsetTop <= scrollTop + height * (options.topGap or 1) parent.scrollTop = top - offsetTop - height * (options.topGap or 1) # If the target element is below the visible portion of its scrollable # ancestor, move it near the bottom with a gap = options.bottomGap * target's height. else if top + offsetBottom >= scrollTop + parentHeight - height * ((options.bottomGap or 1) + 1) parent.scrollTop = top + offsetBottom - parentHeight + height * ((options.bottomGap or 1) + 1) return $.scrollToWithImageLock = (el, parent, args...) -> parent ?= $.scrollParent(el) return unless parent $.scrollTo el, parent, args... # Lock the scroll position on the target element for up to 3 seconds while # nearby images are loaded and rendered. for image in parent.getElementsByTagName('img') when not image.complete do -> onLoad = (event) -> clearTimeout(timeout) unbind(event.target) $.scrollTo el, parent, args... unbind = (target) -> $.off target, 'load', onLoad $.on image, 'load', onLoad timeout = setTimeout unbind.bind(null, image), 3000 return # Calls the function while locking the element's position relative to the window.$.lockScroll = (el, fn) -> if parent = $.scrollParent(el) top = $.rect(el).top top -= $.rect(parent).top unless parent in [document.body, document.documentElement] fn() parent.scrollTop = $.offset(el, parent).top - top else fn() return smoothScroll = smoothStart = smoothEnd = smoothDistance = smoothDuration = null $.smoothScroll = (el, end) -> unless window.requestAnimationFrame el.scrollTop = end return smoothEnd = end if smoothScroll newDistance = smoothEnd - smoothStart smoothDuration += Math.min 300, Math.abs(smoothDistance - newDistance) smoothDistance = newDistance return smoothStart = el.scrollTop smoothDistance = smoothEnd - smoothStart smoothDuration = Math.min 300, Math.abs(smoothDistance) startTime = Date.now() smoothScroll = -> p = Math.min 1, (Date.now() - startTime) / smoothDuration y = Math.max 0, Math.floor(smoothStart + smoothDistance * (if p < 0.5 then 2 * p * p else p * (4 - p * 2) - 1)) el.scrollTop = y if p is 1 smoothScroll = null else requestAnimationFrame(smoothScroll) requestAnimationFrame(smoothScroll) ## Utilities# $.extend = (target, objects...) -> for object in objects when object for key, value of object target[key] = value target $.makeArray = (object) -> if Array.isArray(object) object else Array::slice.apply(object) $.arrayDelete = (array, object) -> index = array.indexOf(object) if index >= 0 array.splice(index, 1) true else false # Returns true if the object is an array or a collection of DOM elements.$.isCollection = (object) -> Array.isArray(object) or typeof object?.item is 'function' ESCAPE_HTML_MAP = '&': '&' '<': '<' '>': '>' '"': '"' "'": ''' '/': '/' ESCAPE_HTML_REGEXP = /[&<>"'\/]/g $.escape = (string) -> string.replace ESCAPE_HTML_REGEXP, (match) -> ESCAPE_HTML_MAP[match] ESCAPE_REGEXP = /([.*+?^=!:${}()|\[\]\/\\])/g $.escapeRegexp = (string) -> string.replace ESCAPE_REGEXP, "\\$1" $.urlDecode = (string) -> decodeURIComponent string.replace(/\+/g, '%20') $.classify = (string) -> string = string.split('_') for substr, i in string string[i] = substr[0].toUpperCase() + substr[1..] string.join('') $.framify = (fn, obj) -> if window.requestAnimationFrame (args...) -> requestAnimationFrame(fn.bind(obj, args...)) else fn $.requestAnimationFrame = (fn) -> if window.requestAnimationFrame requestAnimationFrame(fn) else setTimeout(fn, 0) return ## Miscellaneous# $.noop = -> $.popup = (value) -> try win = window.open() win.opener = null if win.opener win.location = value.href or value catch window.open value.href or value, '_blank' return isMac = null$.isMac = -> isMac ?= navigator.userAgent?.indexOf('Mac') >= 0 isIE = null$.isIE = -> isIE ?= navigator.userAgent?.indexOf('MSIE') >= 0 || navigator.userAgent?.indexOf('rv:11.0') >= 0 isChromeForAndroid = null$.isChromeForAndroid = -> isChromeForAndroid ?= navigator.userAgent?.indexOf('Android') >= 0 && /Chrome\/([.0-9])+ Mobile/.test(navigator.userAgent) isAndroid = null$.isAndroid = -> isAndroid ?= navigator.userAgent?.indexOf('Android') >= 0 isIOS = null$.isIOS = -> isIOS ?= navigator.userAgent?.indexOf('iPhone') >= 0 || navigator.userAgent?.indexOf('iPad') >= 0 $.overlayScrollbarsEnabled = -> return false unless $.isMac() div = document.createElement('div') div.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll; position: absolute') document.body.appendChild(div) result = div.offsetWidth is div.clientWidth document.body.removeChild(div) result HIGHLIGHT_DEFAULTS = className: 'highlight' delay: 1000 $.highlight = (el, options = {}) -> options = $.extend {}, HIGHLIGHT_DEFAULTS, options el.classList.add(options.className) setTimeout (-> el.classList.remove(options.className)), options.delay return $.copyToClipboard = (string) -> textarea = document.createElement('textarea') textarea.style.position = 'fixed' textarea.style.opacity = 0 textarea.value = string document.body.appendChild(textarea) try textarea.select() result = !!document.execCommand('copy') catch result = false finally document.body.removeChild(textarea) result
#
# Traversing
#
@$ = (selector, el = document) ->
try el.querySelector(selector) catch
@$$ = (selector, el = document) ->
try el.querySelectorAll(selector) catch
$.id = (id) ->
document.getElementById(id)
$.hasChild = (parent, el) ->
return unless parent
while el
return true if el is parent
return if el is document.body
el = el.parentNode
$.closestLink = (el, parent = document.body) ->
while el
return el if el.tagName is 'A'
return if el is parent
el = el.parentNode
#
# Events
#
$.on = (el, event, callback, useCapture = false) ->
if event.indexOf(' ') >= 0
$.on el, name, callback for name in event.split(' ')
else
el.addEventListener(event, callback, useCapture)
return
$.off = (el, event, callback, useCapture = false) ->
if event.indexOf(' ') >= 0
$.off el, name, callback for name in event.split(' ')
else
el.removeEventListener(event, callback, useCapture)
return
$.trigger = (el, type, canBubble = true, cancelable = true) ->
event = document.createEvent 'Event'
event.initEvent(type, canBubble, cancelable)
el.dispatchEvent(event)
return
$.click = (el) ->
event = document.createEvent 'MouseEvent'
event.initMouseEvent 'click', true, true, window, null, 0, 0, 0, 0, false, false, false, false, 0, null
el.dispatchEvent(event)
return
$.stopEvent = (event) ->
event.preventDefault()
event.stopPropagation()
event.stopImmediatePropagation()
return
$.eventTarget = (event) ->
event.target.correspondingUseElement || event.target
#
# Manipulation
#
buildFragment = (value) ->
fragment = document.createDocumentFragment()
if $.isCollection(value)
fragment.appendChild(child) for child in $.makeArray(value)
else
fragment.innerHTML = value
fragment
$.append = (el, value) ->
if typeof value is 'string'
el.insertAdjacentHTML 'beforeend', value
else
value = buildFragment(value) if $.isCollection(value)
el.appendChild(value)
return
$.prepend = (el, value) ->
if not el.firstChild
$.append(value)
else if typeof value is 'string'
el.insertAdjacentHTML 'afterbegin', value
else
value = buildFragment(value) if $.isCollection(value)
el.insertBefore(value, el.firstChild)
return
$.before = (el, value) ->
if typeof value is 'string' or $.isCollection(value)
value = buildFragment(value)
el.parentNode.insertBefore(value, el)
return
$.after = (el, value) ->
if typeof value is 'string' or $.isCollection(value)
value = buildFragment(value)
if el.nextSibling
el.parentNode.insertBefore(value, el.nextSibling)
else
el.parentNode.appendChild(value)
return
$.remove = (value) ->
if $.isCollection(value)
el.parentNode?.removeChild(el) for el in $.makeArray(value)
else
value.parentNode?.removeChild(value)
return
$.empty = (el) ->
el.removeChild(el.firstChild) while el.firstChild
return
# Calls the function while the element is off the DOM to avoid triggering
# unnecessary reflows and repaints.
$.batchUpdate = (el, fn) ->
parent = el.parentNode
sibling = el.nextSibling
parent.removeChild(el)
fn(el)
if (sibling)
parent.insertBefore(el, sibling)
else
parent.appendChild(el)
return
#
# Offset
#
$.rect = (el) ->
el.getBoundingClientRect()
$.offset = (el, container = document.body) ->
top = 0
left = 0
while el and el isnt container
top += el.offsetTop
left += el.offsetLeft
el = el.offsetParent
top: top
left: left
$.scrollParent = (el) ->
while (el = el.parentNode) and el.nodeType is 1
break if el.scrollTop > 0
break if getComputedStyle(el)?.overflowY in ['auto', 'scroll']
el
$.scrollTo = (el, parent, position = 'center', options = {}) ->
return unless el
parent ?= $.scrollParent(el)
return unless parent
parentHeight = parent.clientHeight
parentScrollHeight = parent.scrollHeight
return unless parentScrollHeight > parentHeight
top = $.offset(el, parent).top
offsetTop = parent.firstElementChild.offsetTop
switch position
when 'top'
parent.scrollTop = top - offsetTop - (if options.margin? then options.margin else 0)
when 'center'
parent.scrollTop = top - Math.round(parentHeight / 2 - el.offsetHeight / 2)
when 'continuous'
scrollTop = parent.scrollTop
height = el.offsetHeight
lastElementOffset = parent.lastElementChild.offsetTop + parent.lastElementChild.offsetHeight
offsetBottom = if lastElementOffset > 0 then parentScrollHeight - lastElementOffset else 0
# If the target element is above the visible portion of its scrollable
# ancestor, move it near the top with a gap = options.topGap * target's height.
if top - offsetTop <= scrollTop + height * (options.topGap or 1)
parent.scrollTop = top - offsetTop - height * (options.topGap or 1)
# If the target element is below the visible portion of its scrollable
# ancestor, move it near the bottom with a gap = options.bottomGap * target's height.
else if top + offsetBottom >= scrollTop + parentHeight - height * ((options.bottomGap or 1) + 1)
parent.scrollTop = top + offsetBottom - parentHeight + height * ((options.bottomGap or 1) + 1)
return
$.scrollToWithImageLock = (el, parent, args...) ->
parent ?= $.scrollParent(el)
return unless parent
$.scrollTo el, parent, args...
# Lock the scroll position on the target element for up to 3 seconds while
# nearby images are loaded and rendered.
for image in parent.getElementsByTagName('img') when not image.complete
do ->
onLoad = (event) ->
clearTimeout(timeout)
unbind(event.target)
$.scrollTo el, parent, args...
unbind = (target) ->
$.off target, 'load', onLoad
$.on image, 'load', onLoad
timeout = setTimeout unbind.bind(null, image), 3000
return
# Calls the function while locking the element's position relative to the window.
$.lockScroll = (el, fn) ->
if parent = $.scrollParent(el)
top = $.rect(el).top
top -= $.rect(parent).top unless parent in [document.body, document.documentElement]
fn()
parent.scrollTop = $.offset(el, parent).top - top
else
fn()
return
smoothScroll = smoothStart = smoothEnd = smoothDistance = smoothDuration = null
$.smoothScroll = (el, end) ->
unless window.requestAnimationFrame
el.scrollTop = end
return
smoothEnd = end
if smoothScroll
newDistance = smoothEnd - smoothStart
smoothDuration += Math.min 300, Math.abs(smoothDistance - newDistance)
smoothDistance = newDistance
return
smoothStart = el.scrollTop
smoothDistance = smoothEnd - smoothStart
smoothDuration = Math.min 300, Math.abs(smoothDistance)
startTime = Date.now()
smoothScroll = ->
p = Math.min 1, (Date.now() - startTime) / smoothDuration
y = Math.max 0, Math.floor(smoothStart + smoothDistance * (if p < 0.5 then 2 * p * p else p * (4 - p * 2) - 1))
el.scrollTop = y
if p is 1
smoothScroll = null
else
requestAnimationFrame(smoothScroll)
requestAnimationFrame(smoothScroll)
#
# Utilities
#
$.extend = (target, objects...) ->
for object in objects when object
for key, value of object
target[key] = value
target
$.makeArray = (object) ->
if Array.isArray(object)
object
else
Array::slice.apply(object)
$.arrayDelete = (array, object) ->
index = array.indexOf(object)
if index >= 0
array.splice(index, 1)
true
else
false
# Returns true if the object is an array or a collection of DOM elements.
$.isCollection = (object) ->
Array.isArray(object) or typeof object?.item is 'function'
ESCAPE_HTML_MAP =
'&': '&'
'<': '<'
'>': '>'
'"': '"'
"'": '''
'/': '/'
ESCAPE_HTML_REGEXP = /[&<>"'\/]/g
$.escape = (string) ->
string.replace ESCAPE_HTML_REGEXP, (match) -> ESCAPE_HTML_MAP[match]
ESCAPE_REGEXP = /([.*+?^=!:${}()|\[\]\/\\])/g
$.escapeRegexp = (string) ->
string.replace ESCAPE_REGEXP, "\\$1"
$.urlDecode = (string) ->
decodeURIComponent string.replace(/\+/g, '%20')
$.classify = (string) ->
string = string.split('_')
for substr, i in string
string[i] = substr[0].toUpperCase() + substr[1..]
string.join('')
$.framify = (fn, obj) ->
if window.requestAnimationFrame
(args...) -> requestAnimationFrame(fn.bind(obj, args...))
else
fn
$.requestAnimationFrame = (fn) ->
if window.requestAnimationFrame
requestAnimationFrame(fn)
else
setTimeout(fn, 0)
return
#
# Miscellaneous
#
$.noop = ->
$.popup = (value) ->
try
win = window.open()
win.opener = null if win.opener
win.location = value.href or value
catch
window.open value.href or value, '_blank'
return
isMac = null
$.isMac = ->
isMac ?= navigator.userAgent?.indexOf('Mac') >= 0
isIE = null
$.isIE = ->
isIE ?= navigator.userAgent?.indexOf('MSIE') >= 0 || navigator.userAgent?.indexOf('rv:11.0') >= 0
isChromeForAndroid = null
$.isChromeForAndroid = ->
isChromeForAndroid ?= navigator.userAgent?.indexOf('Android') >= 0 && /Chrome\/([.0-9])+ Mobile/.test(navigator.userAgent)
isAndroid = null
$.isAndroid = ->
isAndroid ?= navigator.userAgent?.indexOf('Android') >= 0
isIOS = null
$.isIOS = ->
isIOS ?= navigator.userAgent?.indexOf('iPhone') >= 0 || navigator.userAgent?.indexOf('iPad') >= 0
$.overlayScrollbarsEnabled = ->
return false unless $.isMac()
div = document.createElement('div')
div.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll; position: absolute')
document.body.appendChild(div)
result = div.offsetWidth is div.clientWidth
document.body.removeChild(div)
result
HIGHLIGHT_DEFAULTS =
className: 'highlight'
delay: 1000
$.highlight = (el, options = {}) ->
options = $.extend {}, HIGHLIGHT_DEFAULTS, options
el.classList.add(options.className)
setTimeout (-> el.classList.remove(options.className)), options.delay
return
$.copyToClipboard = (string) ->
textarea = document.createElement('textarea')
textarea.style.position = 'fixed'
textarea.style.opacity = 0
textarea.value = string
document.body.appendChild(textarea)
try
textarea.select()
result = !!document.execCommand('copy')
catch
result = false
finally
document.body.removeChild(textarea)
result