Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use $ consistently in UI.

Browse Source
This commit is contained in:
Nicolas Stepien 2013-03-31 06:01:39 +02:00
parent 193059f8a4
commit 435c411a36
1 changed files with 60 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
lib/ui.coffee
View File

@ -1,13 +1,12 @@
UI = do -> UI = do ->
dialog = (id, position, html) -> dialog = (id, position, html) ->
el = d.createElement 'div' el = $.el 'div',
el.className = 'dialog' className: 'dialog'
el.innerHTML = html innerHTML: html
el.id = id id: id
el.style.cssText = localStorage.getItem("#{g.NAMESPACE}#{id}.position") or position el.style.cssText = localStorage.getItem("#{g.NAMESPACE}#{id}.position") or position
move = el.querySelector '.move' move = $ '.move', el
move.addEventListener 'touchstart', dragstart, false $.on move, 'touchstart mousedown', dragstart
move.addEventListener 'mousedown', dragstart, false
el el
@ -103,8 +102,7 @@ UI = do ->
$.rm currentMenu $.rm currentMenu
currentMenu = null currentMenu = null
lastToggledButton = null lastToggledButton = null
$.off d, 'click', @close $.off d, 'click, CloseMenu', @close
$.off d, 'CloseMenu', @close
findNextEntry: (entry, direction) -> findNextEntry: (entry, direction) ->
entries = [entry.parentNode.children...] entries = [entry.parentNode.children...]
@ -156,18 +154,14 @@ UI = do ->
eRect = entry.getBoundingClientRect() eRect = entry.getBoundingClientRect()
cHeight = doc.clientHeight cHeight = doc.clientHeight
cWidth = doc.clientWidth cWidth = doc.clientWidth
if eRect.top + sRect.height < cHeight [top, bottom] = if eRect.top + sRect.height < cHeight
top = '0px' ['0px', 'auto']
bottom = 'auto'
else else
top = 'auto' ['auto', '0px']
bottom = '0px' [left, right] = if eRect.right + sRect.width < cWidth
if eRect.right + sRect.width < cWidth ['100%', 'auto']
left = '100%'
right = 'auto'
else else
left = 'auto' ['auto', '100%']
right = '100%'
{style} = submenu {style} = submenu
style.top = top style.top = top
style.bottom = bottom style.bottom = bottom
@ -201,10 +195,10 @@ UI = do ->
return return
# prevent text selection # prevent text selection
e.preventDefault() e.preventDefault()
el = $.x 'ancestor::div[contains(@class,"dialog")][1]', @
if isTouching = e.type is 'touchstart' if isTouching = e.type is 'touchstart'
e = e.changedTouches[e.changedTouches.length - 1] e = e.changedTouches[e.changedTouches.length - 1]
# distance from pointer to el edge is constant; calculate it here. # distance from pointer to el edge is constant; calculate it here.
el = $.x 'ancestor::div[contains(@class,"dialog")][1]', @
rect = el.getBoundingClientRect() rect = el.getBoundingClientRect()
screenHeight = doc.clientHeight screenHeight = doc.clientHeight
screenWidth = doc.clientWidth screenWidth = doc.clientWidth
@ -223,14 +217,13 @@ UI = do ->
o.identifier = e.identifier o.identifier = e.identifier
o.move = touchmove.bind o o.move = touchmove.bind o
o.up = touchend.bind o o.up = touchend.bind o
d.addEventListener 'touchmove', o.move, false $.on d, 'touchmove', o.move
d.addEventListener 'touchend', o.up, false $.on d, 'touchend touchcancel', o.up
d.addEventListener 'touchcancel', o.up, false
else # mousedown else # mousedown
o.move = drag.bind o o.move = drag.bind o
o.up = dragend.bind o o.up = dragend.bind o
d.addEventListener 'mousemove', o.move, false $.on d, 'mousemove', o.move
d.addEventListener 'mouseup', o.up, false $.on d, 'mouseup', o.up
touchmove = (e) -> touchmove = (e) ->
for touch in e.changedTouches for touch in e.changedTouches
if touch.identifier is @identifier if touch.identifier is @identifier
@ -240,33 +233,29 @@ UI = do ->
{clientX, clientY} = e {clientX, clientY} = e
left = clientX - @dx left = clientX - @dx
left = left = if left < 10
if left < 10 0
0 else if @width - left < 10
else if @width - left < 10 null
null else
else left / @screenWidth * 100 + '%'
left / @screenWidth * 100 + '%'
top = clientY - @dy top = clientY - @dy
top = top = if top < 10
if top < 10 0
0 else if @height - top < 10
else if @height - top < 10 null
null else
else top / @screenHeight * 100 + '%'
top / @screenHeight * 100 + '%'
right = right = if left is null
if left is null 0
0 else
else null
null bottom = if top is null
bottom = 0
if top is null else
0 null
else
null
{style} = @ {style} = @
style.left = left style.left = left
@ -280,12 +269,11 @@ UI = do ->
return return
dragend = -> dragend = ->
if @isTouching if @isTouching
d.removeEventListener 'touchmove', @move, false $.off d, 'touchmove', @move
d.removeEventListener 'touchend', @up, false $.off d, 'touchend touchcancel', @up
d.removeEventListener 'touchcancel', @up, false
else # mouseup else # mouseup
d.removeEventListener 'mousemove', @move, false $.off d, 'mousemove', @move
d.removeEventListener 'mouseup', @up, false $.off d, 'mouseup', @up
localStorage.setItem "#{g.NAMESPACE}#{@id}.position", @style.cssText localStorage.setItem "#{g.NAMESPACE}#{@id}.position", @style.cssText
hoverstart = ({root, el, latestEvent, endEvents, asapTest, cb}) -> hoverstart = ({root, el, latestEvent, endEvents, asapTest, cb}) ->
@ -294,7 +282,7 @@ UI = do ->
el: el el: el
style: el.style style: el.style
cb: cb cb: cb
endEvents: endEvents.split ' ' endEvents: endEvents
latestEvent: latestEvent latestEvent: latestEvent
clientHeight: doc.clientHeight clientHeight: doc.clientHeight
clientWidth: doc.clientWidth clientWidth: doc.clientWidth
@ -302,47 +290,37 @@ UI = do ->
o.hover = hover.bind o o.hover = hover.bind o
o.hoverend = hoverend.bind o o.hoverend = hoverend.bind o
asap = -> $.asap asapTest, ->
if asapTest() o.hover o.latestEvent
o.hover o.latestEvent
else
o.timeout = setTimeout asap, 25
asap()
for event in o.endEvents $.on root, endEvents, o.hoverend
root.addEventListener event, o.hoverend, false $.on root, 'mousemove', o.hover
root.addEventListener 'mousemove', o.hover, false
hover = (e) -> hover = (e) ->
@latestEvent = e @latestEvent = e
height = @el.offsetHeight height = @el.offsetHeight
{clientX, clientY} = e {clientX, clientY} = e
top = clientY - 120 top = clientY - 120
top = top = if @clientHeight <= height or top <= 0
if @clientHeight <= height or top <= 0 0
0 else if top + height >= @clientHeight
else if top + height >= @clientHeight @clientHeight - height
@clientHeight - height
else
top
if clientX <= @clientWidth - 400
left = clientX + 45 + 'px'
right = null
else else
left = null top
right = @clientWidth - clientX + 45 + 'px'
[left, right] = if clientX <= @clientWidth - 400
[clientX + 45 + 'px', null]
else
[null, @clientWidth - clientX + 45 + 'px']
{style} = @ {style} = @
style.top = top + 'px' style.top = top + 'px'
style.left = left style.left = left
style.right = right style.right = right
hoverend = -> hoverend = ->
@el.parentNode.removeChild @el $.rm @el
for event in @endEvents $.off @root, @endEvents, @hoverend
@root.removeEventListener event, @hoverend, false $.off @root, 'mousemove', @hover
@root.removeEventListener 'mousemove', @hover, false
clearTimeout @timeout
@cb.call @ if @cb @cb.call @ if @cb