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

37
lib/ui.coffee
View File

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

75
src/features.coffee
View File

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