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

Make header more Mayhem-y

Browse Source
This commit is contained in:
Zixaphir 2013-04-14 12:29:01 -07:00
parent 739220ed11
commit 0cd3e95989
6 changed files with 182 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
builds/4chan-X.js
View File

File diff suppressed because one or more lines are too long

94
builds/4chan-X.user.js
View File

File diff suppressed because one or more lines are too long

94
builds/crx/script.js
View File

File diff suppressed because one or more lines are too long

40
css/style.css
View File

@ -62,7 +62,7 @@ a[href="javascript:;"] {
#fourchanx-settings, #fourchanx-settings,
#qp, #ihover, #qp, #ihover,
#updater, #thread-stats, #updater, #thread-stats,
#navlinks, #boardNavDesktop.fixed, #navlinks, .fixed #boardNavDesktop,
#watcher, #watcher,
#qr { #qr {
position: fixed; position: fixed;
@ -88,29 +88,26 @@ a[href="javascript:;"] {
#qr { #qr {
z-index: 30; z-index: 30;
} }
#watcher:hover { #watcher {
z-index: 20; z-index: 20;
} }
#boardNavDesktop.fixed { .fixed #boardNavDesktop {
z-index: 10; z-index: 10;
} }
#watcher {
z-index: 5;
}
/* Header */ /* Header */
.fourchan-x body { .fourchan-x body {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
#boardNavDesktop.fixed { .fixed #boardNavDesktop {
right: 0; right: 0;
left: 0; left: 0;
} }
#boardNavDesktop.fixed.top { .fixed.top #boardNavDesktop {
top: 0; top: 0;
} }
#boardNavDesktop.fixed.bottom { .fixed.bottom #boardNavDesktop {
bottom: 0; bottom: 0;
} }
#boardNavDesktop { #boardNavDesktop {
@ -119,30 +116,30 @@ a[href="javascript:;"] {
position: relative; position: relative;
transition: all .1s .05s ease-in-out; transition: all .1s .05s ease-in-out;
} }
#boardNavDesktop.fixed.top { .fixed.top #boardNavDesktop {
border-bottom-width: 1px; border-bottom-width: 1px;
} }
#boardNavDesktop.fixed.bottom { .fixed.bottom #boardNavDesktop {
box-shadow: 0 -1px 2px rgba(0, 0, 0, .15); box-shadow: 0 -1px 2px rgba(0, 0, 0, .15);
border-top-width: 1px; border-top-width: 1px;
} }
#boardNavDesktop.fixed.bottom .menu-button i { .fixed.bottom #boardNavDesktop .menu-button i {
border-top: none; border-top: none;
border-bottom: 6px solid; border-bottom: 6px solid;
} }
#board-list { #board-list {
text-align: center; text-align: center;
} }
#boardNavDesktop.fixed.autohide:not(:hover) { .fixed #boardNavDesktop.autohide:not(:hover) {
box-shadow: none; box-shadow: none;
transition: all .8s .6s cubic-bezier(.55, .055, .675, .19); transition: all .8s .6s cubic-bezier(.55, .055, .675, .19);
} }
#boardNavDesktop.fixed.top.autohide:not(:hover) { .fixed.top #boardNavDesktop.autohide:not(:hover) {
margin-bottom: -1em; margin-bottom: -1em;
-webkit-transform: translateY(-100%); -webkit-transform: translateY(-100%);
transform: translateY(-100%); transform: translateY(-100%);
} }
#boardNavDesktop.fixed.bottom.autohide:not(:hover) { .fixed.bottom #boardNavDesktop.autohide:not(:hover) {
-webkit-transform: translateY(100%); -webkit-transform: translateY(100%);
transform: translateY(100%); transform: translateY(100%);
} }
@ -152,19 +149,22 @@ a[href="javascript:;"] {
height: 10px; height: 10px;
position: absolute; position: absolute;
} }
#boardNavDesktop:not(.fixed) #toggle-header-bar { #boardNavDesktop #toggle-header-bar {
display: none; display: none;
} }
#boardNavDesktop.fixed #toggle-header-bar { .fixed #boardNavDesktop #toggle-header-bar {
display: block;
}
.fixed #boardNavDesktop #toggle-header-bar {
cursor: n-resize; cursor: n-resize;
} }
#boardNavDesktop.fixed.top #toggle-header-bar { .fixed.top boardNavDesktop #toggle-header-bar {
top: 100%; top: 100%;
} }
#boardNavDesktop.fixed.bottom #toggle-header-bar { .fixed.bottom #boardNavDesktop #toggle-header-bar {
bottom: 100%; bottom: 100%;
} }
##boardNavDesktop.fixed #header-bar.autohide #toggle-header-bar { .fixed #boardNavDesktop #header-bar.autohide #toggle-header-bar {
cursor: s-resize; cursor: s-resize;
} }
#boardNavDesktop a:not(.entry) { #boardNavDesktop a:not(.entry) {

37
lib/ui.coffee
View File

@ -4,8 +4,7 @@ UI = do ->
className: 'dialog' className: 'dialog'
innerHTML: html innerHTML: html
id: id id: id
$.get "#{id}.position", position, (item) -> el.style.cssText = localStorage.getItem("#{g.NAMESPACE}#{id}.position") or position
el.style.cssText = item["#{id}.position"]
move = $ '.move', el move = $ '.move', el
$.on move, 'touchstart mousedown', dragstart $.on move, 'touchstart mousedown', dragstart
for child in move.children for child in move.children
@ -61,7 +60,7 @@ UI = do ->
@focus entry @focus entry
$.on d, 'click', @close $.on d, 'click', @close
$.on d, 'CloseMenu', @close $.on d, 'CloseMenu', @close
$.add button, menu $.add Header.hover, menu
# Position # Position
mRect = menu.getBoundingClientRect() mRect = menu.getBoundingClientRect()
@ -71,18 +70,18 @@ UI = do ->
cHeight = doc.clientHeight cHeight = doc.clientHeight
cWidth = doc.clientWidth cWidth = doc.clientWidth
[top, bottom] = if bRect.top + bRect.height + mRect.height < cHeight [top, bottom] = if bRect.top + bRect.height + mRect.height < cHeight
['100%', null] [bRect.bottom, null]
else else
[null, '100%'] [null, cHeight - bRect.top]
[left, right] = if bRect.left + mRect.width < cWidth [left, right] = if bRect.left + mRect.width < cWidth
['0px', null] [bRect.left, null]
else else
[null, '0px'] [null, cWidth - bRect.right]
{style} = menu {style} = menu
style.top = top style.top = "#{top}px"
style.right = right style.right = "#{right}px"
style.bottom = bottom style.bottom = "#{bottom}px"
style.left = left style.left = "#{left}px"
menu.focus() menu.focus()
@ -193,7 +192,6 @@ UI = do ->
@parseEntry subEntry @parseEntry subEntry
return return
dragstart = (e) -> dragstart = (e) ->
return if e.type is 'mousedown' and e.button isnt 0 # not LMB return if e.type is 'mousedown' and e.button isnt 0 # not LMB
# prevent text selection # prevent text selection
@ -227,11 +225,13 @@ UI = do ->
o.up = dragend.bind o o.up = dragend.bind o
$.on d, 'mousemove', o.move $.on d, 'mousemove', o.move
$.on d, 'mouseup', o.up $.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
drag.call @, touch drag.call @, touch
return return
drag = (e) -> drag = (e) ->
{clientX, clientY} = e {clientX, clientY} = e
@ -265,11 +265,13 @@ UI = do ->
style.right = right style.right = right
style.top = top style.top = top
style.bottom = bottom style.bottom = bottom
touchend = (e) -> touchend = (e) ->
for touch in e.changedTouches for touch in e.changedTouches
if touch.identifier is @identifier if touch.identifier is @identifier
dragend.call @ dragend.call @
return return
dragend = -> dragend = ->
if @isTouching if @isTouching
$.off d, 'touchmove', @move $.off d, 'touchmove', @move
@ -277,14 +279,15 @@ UI = do ->
else # mouseup else # mouseup
$.off d, 'mousemove', @move $.off d, 'mousemove', @move
$.off d, 'mouseup', @up $.off d, 'mouseup', @up
$.set "#{@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, close}) ->
o = { o = {
root: root root: root
el: el el: el
style: el.style style: el.style
cb: cb cb: cb
close: close
endEvents: endEvents endEvents: endEvents
latestEvent: latestEvent latestEvent: latestEvent
clientHeight: doc.clientHeight clientHeight: doc.clientHeight
@ -300,12 +303,13 @@ UI = do ->
$.on root, endEvents, o.hoverend $.on root, endEvents, o.hoverend
$.on root, 'mousemove', o.hover $.on root, 'mousemove', o.hover
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 + (if close then 0 else -120)
top = if @clientHeight <= height or top <= 0 top = if @clientHeight <= height or top <= 0
0 0
else if top + height >= @clientHeight else if top + height >= @clientHeight
@ -314,7 +318,7 @@ UI = do ->
top top
[left, right] = if clientX <= @clientWidth - 400 [left, right] = if clientX <= @clientWidth - 400
[clientX + 45 + 'px', null] [clientX + (if @close then 15 else 45) + 'px', null]
else else
[null, @clientWidth - clientX + 45 + 'px'] [null, @clientWidth - clientX + 45 + 'px']
@ -322,6 +326,7 @@ UI = do ->
style.top = top + 'px' style.top = top + 'px'
style.left = left style.left = left
style.right = right style.right = right
hoverend = -> hoverend = ->
$.rm @el $.rm @el
$.off @root, @endEvents, @hoverend $.off @root, @endEvents, @hoverend

75
src/features.coffee
View File

@ -8,16 +8,22 @@ Header =
id: 'hoverUI' id: 'hoverUI'
@toggle = $.el 'div', @toggle = $.el 'div',
id: 'toggle-header-bar' id: 'toggle-header-bar'
@menuButton = $.el 'span',
className: 'menu-button'
innerHTML: '<a class=brackets-wrap href=javascript:;><i></i></a>'
$.on @toggle, 'mousedown', @toggleBarVisibility @menu = new UI.Menu 'header'
$.on window, 'load hashchange', Header.hashScroll $.on @menuButton, 'click', @menuToggle
$.on @toggle, 'mousedown', @toggleBarVisibility
$.on window, 'load hashchange', Header.hashScroll
@positionToggler = $.el 'label', @positionToggler = $.el 'label',
innerHTML: "<input type=checkbox #{if Conf['Bottom header'] then 'checked' else ''}> Bottom header" innerHTML: "<input type=checkbox #{if Conf['Bottom header'] then 'checked' else ''}> Bottom header"
$.on @positionToggler.firstElementChild, 'change', @toggleBarPosition $.on @positionToggler.firstElementChild, 'change', @toggleBarPosition
$.event 'AddMenuEntry', $.event 'AddMenuEntry',
type: 'header' type: 'header'
el: @positionToggler el: @positionToggler
order: 108 order: 108
@headerToggler = $.el 'label', @headerToggler = $.el 'label',
@ -25,8 +31,8 @@ Header =
$.on @headerToggler.firstElementChild, 'change', @toggleBarVisibility $.on @headerToggler.firstElementChild, 'change', @toggleBarVisibility
$.event 'AddMenuEntry', $.event 'AddMenuEntry',
type: 'header' type: 'header'
el: @headerToggler el: @headerToggler
order: 109 order: 109
$.on d, 'CreateNotification', @createNotification $.on d, 'CreateNotification', @createNotification
@ -55,7 +61,7 @@ Header =
Header.fixedHeader nav if Conf['Fixed Header'] Header.fixedHeader nav if Conf['Fixed Header']
$.add fullBoardList, [nav.childNodes...] $.add fullBoardList, [nav.childNodes...]
$.add nav, [customBoardList, fullBoardList, Header.shortcuts, $('#navtopright', fullBoardList), Header.toggle] $.add nav, [Header.menuButton, customBoardList, fullBoardList, Header.shortcuts, $('#navtopright', fullBoardList), Header.toggle]
$.add d.body, Header.bar $.add d.body, Header.bar
if Conf['Custom Board Navigation'] if Conf['Custom Board Navigation']
@ -65,17 +71,17 @@ Header =
className: 'hide-board-list-button brackets-wrap' className: 'hide-board-list-button brackets-wrap'
innerHTML: '<a href=javascript:;> - </a>' innerHTML: '<a href=javascript:;> - </a>'
$.on btn, 'click', Header.toggleBoardList $.on btn, 'click', Header.toggleBoardList
$.add fullBoardList, btn $.prepend fullBoardList, btn
else else
$.rm $ '#custom-board-list', nav $.rm $ '#custom-board-list', nav
fullBoardList.hidden = false fullBoardList.hidden = false
fixedHeader: (nav) -> fixedHeader: (nav) ->
$.addClass nav, 'fixed' $.addClass doc, 'fixed'
$.addClass nav, 'dialog' $.addClass nav, 'dialog'
@setBarPosition Conf['Bottom header'] @setBarPosition Conf['Bottom header']
$.sync 'Bottom header', @setBarPosition $.sync 'Bottom header', @setBarPosition
@setBarVisibility Conf['Header auto-hide'] @setBarVisibility Conf['Header auto-hide']
$.sync 'Header auto-hide', @setBarVisibility $.sync 'Header auto-hide', @setBarVisibility
@ -131,11 +137,11 @@ Header =
$.event 'CloseMenu' $.event 'CloseMenu'
Header.positionToggler.firstElementChild.checked = bottom Header.positionToggler.firstElementChild.checked = bottom
if bottom if bottom
$.addClass Header.nav, 'bottom' $.addClass doc, 'bottom'
$.rmClass Header.nav, 'top' $.rmClass doc, 'top'
else else
$.addClass Header.nav, 'top' $.addClass doc, 'top'
$.rmClass Header.nav, 'bottom' $.rmClass doc, 'bottom'
toggleBarPosition: -> toggleBarPosition: ->
bottom = @checked bottom = @checked
@ -179,6 +185,9 @@ Header =
$.add shortcut, [$.tn(' ['), el, $.tn(']')] $.add shortcut, [$.tn(' ['), el, $.tn(']')]
$.add Header.shortcuts, shortcut $.add Header.shortcuts, shortcut
menuToggle: (e) ->
Header.menu.toggle e, @, g
createNotification: (e) -> createNotification: (e) ->
{type, content, lifetime, cb} = e.detail {type, content, lifetime, cb} = e.detail
notif = new Notification type, content, lifetime notif = new Notification type, content, lifetime
@ -3267,41 +3276,17 @@ ImageExpand =
init: -> init: ->
return if g.VIEW is 'catalog' or !Conf['Image Expansion'] return if g.VIEW is 'catalog' or !Conf['Image Expansion']
wrapper = $.el 'div', @EAI = $.el 'a',
id: 'imgControls' className: 'expand-all-shortcut'
innerHTML: """ textContent: 'EAI'
<a class='expand-all-shortcut' title='Expand All Images' href='javascript:;'>Expand All Images</a> title: 'Expand All Images'
<a class='menu-button' href='javascript:;'>[<i></i>]</a> href: 'javascript:;'
"""
@EAI = wrapper.firstElementChild
$.on @EAI, 'click', ImageExpand.cb.toggleAll $.on @EAI, 'click', ImageExpand.cb.toggleAll
Header.addShortcut @EAI
@opmenu = new UI.Menu 'imageexpand'
$.on $('.menu-button', wrapper), 'click', @menuToggle
for type, config of Config.imageExpansion
label = $.el 'label',
innerHTML: "<input type=checkbox name='#{type}'> #{type}"
input = label.firstElementChild
if ['Fit width', 'Fit height'].contains type
$.on input, 'change', ImageExpand.cb.setFitness
if config
label.title = config[1]
input.checked = Conf[type]
$.event 'change', null, input
$.on input, 'change', $.cb.checked
$.event 'AddMenuEntry',
type: 'imageexpand'
el: label
$.asap (-> $.id 'delform'), ->
$.prepend $.id('delform'), wrapper
Post::callbacks.push Post::callbacks.push
name: 'Image Expansion' name: 'Image Expansion'
cb: @node cb: @node
node: -> node: ->
return unless @file?.isImage return unless @file?.isImage
{thumb} = @file {thumb} = @file