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

Add Catalog hover expand option.

Browse Source
This commit is contained in:
ccd0 2016-09-27 03:21:53 -07:00
parent 0e1c956367
commit ea86d2ffe4
9 changed files with 58 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/General/Index.coffee
View File

@ -37,23 +37,27 @@ Index =
# Header "Index Navigation" submenu # Header "Index Navigation" submenu
repliesEntry = el: UI.checkbox 'Show Replies', 'Show replies' repliesEntry = el: UI.checkbox 'Show Replies', 'Show replies'
hoverEntry = el: UI.checkbox 'Catalog Reply Hover', 'Catalog reply hover' hoverEntry = el: UI.checkbox 'Catalog Hover Expand', 'Catalog hover expand'
previewEntry = el: UI.checkbox 'Catalog Reply Hover', 'Catalog reply hover'
sortEntry = el: UI.checkbox 'Per-Board Sort Type', 'Per-board sort type', (typeof Conf['Index Sort'] is 'object') sortEntry = el: UI.checkbox 'Per-Board Sort Type', 'Per-board sort type', (typeof Conf['Index Sort'] is 'object')
pinEntry = el: UI.checkbox 'Pin Watched Threads', 'Pin watched threads' pinEntry = el: UI.checkbox 'Pin Watched Threads', 'Pin watched threads'
anchorEntry = el: UI.checkbox 'Anchor Hidden Threads', 'Anchor hidden threads' anchorEntry = el: UI.checkbox 'Anchor Hidden Threads', 'Anchor hidden threads'
refNavEntry = el: UI.checkbox 'Refreshed Navigation', 'Refreshed navigation' refNavEntry = el: UI.checkbox 'Refreshed Navigation', 'Refreshed navigation'
hoverEntry.el.title = 'Show full replies in catalog on mouseover of excerpts.' hoverEntry.el.title = 'Hovering over catalog threads expands the comment and shows more details.'
previewEntry.el.title = 'Show full replies in catalog on mouseover of excerpts.'
sortEntry.el.title = 'Set the sorting order of each board independently.' sortEntry.el.title = 'Set the sorting order of each board independently.'
pinEntry.el.title = 'Move watched threads to the start of the index.' pinEntry.el.title = 'Move watched threads to the start of the index.'
anchorEntry.el.title = 'Move hidden threads to the end of the index.' anchorEntry.el.title = 'Move hidden threads to the end of the index.'
refNavEntry.el.title = 'Refresh index when navigating through pages.' refNavEntry.el.title = 'Refresh index when navigating through pages.'
for label in [repliesEntry, hoverEntry, pinEntry, anchorEntry, refNavEntry] for label in [repliesEntry, hoverEntry, previewEntry, pinEntry, anchorEntry, refNavEntry]
input = label.el.firstChild input = label.el.firstChild
{name} = input {name} = input
$.on input, 'change', $.cb.checked $.on input, 'change', $.cb.checked
switch name switch name
when 'Show Replies', 'Catalog Reply Hover' when 'Show Replies', 'Catalog Reply Hover'
$.on input, 'change', @cb.replies $.on input, 'change', @cb.replies
when 'Catalog Hover Expand'
$.on input, 'change', @cb.hover
when 'Pin Watched Threads', 'Anchor Hidden Threads' when 'Pin Watched Threads', 'Anchor Hidden Threads'
$.on input, 'change', @cb.resort $.on input, 'change', @cb.resort
$.on sortEntry.el.firstChild, 'change', @cb.perBoardSort $.on sortEntry.el.firstChild, 'change', @cb.perBoardSort
@ -62,7 +66,7 @@ Index =
el: $.el 'span', el: $.el 'span',
textContent: 'Index Navigation' textContent: 'Index Navigation'
order: 100 order: 100
subEntries: [repliesEntry, hoverEntry, sortEntry, pinEntry, anchorEntry, refNavEntry] subEntries: [repliesEntry, hoverEntry, previewEntry, sortEntry, pinEntry, anchorEntry, refNavEntry]
# Navigation links at top of index # Navigation links at top of index
@navLinks = $.el 'div', className: 'navLinks json-index' @navLinks = $.el 'div', className: 'navLinks json-index'
@ -96,6 +100,7 @@ Index =
# Thread container # Thread container
@root = $.el 'div', className: 'board json-index' @root = $.el 'div', className: 'board json-index'
@cb.size() @cb.size()
@cb.hover()
# Page list # Page list
@pagelist = $.el 'div', className: 'pagelist json-index' @pagelist = $.el 'div', className: 'pagelist json-index'
@ -249,6 +254,9 @@ Index =
Index.sort() Index.sort()
Index.buildIndex() Index.buildIndex()
hover: ->
doc.classList.toggle 'catalog-hover-expand', Conf['Catalog Hover Expand']
popstate: (e) -> popstate: (e) ->
if e?.state if e?.state
{searched, mode, sort} = e.state {searched, mode, sort} = e.state

1
src/config/Config.coffee
View File

@ -732,6 +732,7 @@ Config =
'Previous Index Mode': 'paged' 'Previous Index Mode': 'paged'
'Index Size': 'small' 'Index Size': 'small'
'Show Replies': true 'Show Replies': true
'Catalog Hover Expand': true
'Catalog Reply Hover': true 'Catalog Reply Hover': true
'Pin Watched Threads': false 'Pin Watched Threads': false
'Anchor Hidden Threads': true 'Anchor Hidden Threads': true

7
src/css/burichan.css
View File

@ -31,12 +31,13 @@
} }
/* Catalog */ /* Catalog */
:root.burichan .catalog-postContainer:hover > .post { :root.burichan.catalog-hover-expand .catalog-postContainer:hover > .post {
background-color: #D6DAF0; background-color: #D6DAF0;
} }
:root.burichan.werkTyme .catalog-thread:not(:hover), :root.burichan.werkTyme .catalog-thread:not(:hover),
:root.burichan .catalog-postContainer:hover > .post, :root.burichan.werkTyme:not(.catalog-hover-expand) .catalog-thread,
:root.burichan .catalog-postContainer:hover .catalog-reply { :root.burichan.catalog-hover-expand .catalog-postContainer:hover > .post,
:root.burichan.catalog-hover-expand .catalog-postContainer:hover .catalog-reply {
border-color: #B7C5D9; border-color: #B7C5D9;
} }

7
src/css/futaba.css
View File

@ -31,12 +31,13 @@
} }
/* Catalog */ /* Catalog */
:root.futaba .catalog-postContainer:hover > .post { :root.futaba.catalog-hover-expand .catalog-postContainer:hover > .post {
background-color: #F0E0D6; background-color: #F0E0D6;
} }
:root.futaba.werkTyme .catalog-thread:not(:hover), :root.futaba.werkTyme .catalog-thread:not(:hover),
:root.futaba .catalog-postContainer:hover > .post, :root.futaba.werkTyme:not(.catalog-hover-expand) .catalog-thread,
:root.futaba .catalog-postContainer:hover .catalog-reply { :root.futaba.catalog-hover-expand .catalog-postContainer:hover > .post,
:root.futaba.catalog-hover-expand .catalog-postContainer:hover .catalog-reply {
border-color: #D9BFB7; border-color: #D9BFB7;
} }

7
src/css/photon.css
View File

@ -31,12 +31,13 @@
} }
/* Catalog */ /* Catalog */
:root.photon .catalog-postContainer:hover > .post { :root.photon.catalog-hover-expand .catalog-postContainer:hover > .post {
background-color: #DDD; background-color: #DDD;
} }
:root.photon.werkTyme .catalog-thread:not(:hover), :root.photon.werkTyme .catalog-thread:not(:hover),
:root.photon .catalog-postContainer:hover > .post, :root.photon.werkTyme:not(.catalog-hover-expand) .catalog-thread,
:root.photon .catalog-postContainer:hover .catalog-reply { :root.photon.catalog-hover-expand .catalog-postContainer:hover > .post,
:root.photon.catalog-hover-expand .catalog-postContainer:hover .catalog-reply {
border-color: #CCC; border-color: #CCC;
} }

20
src/css/style.css
View File

@ -737,10 +737,11 @@ div.catalog-thread {
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
.catalog-postContainer:not(:hover) { .catalog-postContainer:not(:hover),
:root:not(.catalog-hover-expand) .catalog-postContainer {
overflow: hidden; overflow: hidden;
} }
.catalog-postContainer:hover { :root.catalog-hover-expand .catalog-postContainer:hover {
z-index: 1; z-index: 1;
} }
.catalog-post { .catalog-post {
@ -758,11 +759,11 @@ div.catalog-post {
margin-top: -7px; margin-top: -7px;
padding-top: 6px; padding-top: 6px;
} }
.catalog-postContainer:hover > .catalog-post { :root.catalog-hover-expand .catalog-postContainer:hover > .catalog-post {
margin-left: -61px; margin-left: -61px;
margin-right: -61px; margin-right: -61px;
} }
.catalog-postContainer:hover > * > :not(.catalog-replies) { :root.catalog-hover-expand .catalog-postContainer:hover > * > :not(.catalog-replies) {
padding-left: 2px; padding-left: 2px;
padding-right: 2px; padding-right: 2px;
} }
@ -818,6 +819,9 @@ div.catalog-post {
.catalog-postContainer:not(:hover) > * > .file, .catalog-postContainer:not(:hover) > * > .file,
.catalog-postContainer:not(:hover) > * > .postInfo > :not(.subject), .catalog-postContainer:not(:hover) > * > .postInfo > :not(.subject),
.catalog-postContainer:not(:hover) > * > .catalog-replies, .catalog-postContainer:not(:hover) > * > .catalog-replies,
:root:not(.catalog-hover-expand) .catalog-postContainer > * > .file,
:root:not(.catalog-hover-expand) .catalog-postContainer > * > .postInfo > :not(.subject),
:root:not(.catalog-hover-expand) .catalog-postContainer > * > .catalog-replies,
.catalog-thread > .catalog-postContainer > :not(.catalog-post), .catalog-thread > .catalog-postContainer > :not(.catalog-post),
.catalog-post > .file > :not(.fileText), .catalog-post > .file > :not(.fileText),
.catalog-post > * > .fileText > :not(:first-child), .catalog-post > * > .fileText > :not(:first-child),
@ -862,7 +866,7 @@ div.catalog-post > div.postInfo {
} }
.catalog-post > * > .nameBlock, .catalog-post > * > .nameBlock,
.catalog-post > * > .dateTime, .catalog-post > * > .dateTime,
.catalog-postContainer:hover > * > .postMessage:not(:empty) { :root.catalog-hover-expand .catalog-postContainer:hover > * > .postMessage:not(:empty) {
padding-top: .3em; padding-top: .3em;
} }
.catalog-reply { .catalog-reply {
@ -1305,12 +1309,14 @@ input[name="Default Volume"] {
} }
.catalog-thread.filter-highlight .catalog-thumb, .catalog-thread.filter-highlight .catalog-thumb,
:root.werkTyme .catalog-thread.filter-highlight:not(:hover), :root.werkTyme .catalog-thread.filter-highlight:not(:hover),
:root.werkTyme .catalog-thread.filter-highlight > .catalog-postContainer:hover > .catalog-post { :root.werkTyme:not(.catalog-hover-expand) .catalog-thread.filter-highlight,
:root.werkTyme.catalog-hover-expand .catalog-thread.filter-highlight > .catalog-postContainer:hover > .catalog-post {
box-shadow: 0 0 3px 3px rgba(255, 0, 0, .5); box-shadow: 0 0 3px 3px rgba(255, 0, 0, .5);
} }
.catalog-thread.watched .catalog-thumb, .catalog-thread.watched .catalog-thumb,
:root.werkTyme .catalog-thread.watched:not(:hover), :root.werkTyme .catalog-thread.watched:not(:hover),
:root.werkTyme .catalog-thread.watched > .catalog-postContainer:hover > .catalog-post { :root.werkTyme:not(.catalog-hover-expand) .catalog-thread.watched,
:root.werkTyme.catalog-hover-expand .catalog-thread.watched > .catalog-postContainer:hover > .catalog-post {
outline: 2px solid rgba(255, 0, 0, .75); outline: 2px solid rgba(255, 0, 0, .75);
} }

13
src/css/tomorrow.css
View File

@ -30,12 +30,13 @@
} }
/* Catalog */ /* Catalog */
:root.tomorrow .catalog-postContainer:hover > .post { :root.tomorrow.catalog-hover-expand .catalog-postContainer:hover > .post {
background-color: #282A2E; background-color: #282A2E;
} }
:root.tomorrow.werkTyme .catalog-thread:not(:hover), :root.tomorrow.werkTyme .catalog-thread:not(:hover),
:root.tomorrow .catalog-postContainer:hover > .post, :root.tomorrow.werkTyme:not(.catalog-hover-expand) .catalog-thread,
:root.tomorrow .catalog-postContainer:hover .catalog-reply { :root.tomorrow.catalog-hover-expand .catalog-postContainer:hover > .post,
:root.tomorrow.catalog-hover-expand .catalog-postContainer:hover .catalog-reply {
border-color: #111; border-color: #111;
} }
@ -79,12 +80,14 @@
} }
:root.tomorrow .catalog-thread.filter-highlight .catalog-thumb, :root.tomorrow .catalog-thread.filter-highlight .catalog-thumb,
:root.tomorrow.werkTyme .catalog-thread.filter-highlight:not(:hover), :root.tomorrow.werkTyme .catalog-thread.filter-highlight:not(:hover),
:root.tomorrow.werkTyme .catalog-thread.filter-highlight > .catalog-postContainer:hover > .catalog-post { :root.tomorrow.werkTyme:not(.catalog-hover-expand) .catalog-thread.filter-highlight,
:root.tomorrow.werkTyme.catalog-hover-expand .catalog-thread.filter-highlight > .catalog-postContainer:hover > .catalog-post {
box-shadow: 0 0 3px 3px rgba(64, 192, 255, .7); box-shadow: 0 0 3px 3px rgba(64, 192, 255, .7);
} }
:root.tomorrow .catalog-thread.watched .catalog-thumb, :root.tomorrow .catalog-thread.watched .catalog-thumb,
:root.tomorrow.werkTyme .catalog-thread.watched:not(:hover), :root.tomorrow.werkTyme .catalog-thread.watched:not(:hover),
:root.tomorrow.werkTyme .catalog-thread.watched > .catalog-postContainer:hover > .catalog-post { :root.tomorrow.werkTyme:not(.catalog-hover-expand) .catalog-thread.watched,
:root.tomorrow.werkTyme.catalog-hover-expand .catalog-thread.watched > .catalog-postContainer:hover > .catalog-post {
outline: 2px solid rgb(64, 192, 255); outline: 2px solid rgb(64, 192, 255);
} }

7
src/css/yotsuba-b.css
View File

@ -31,12 +31,13 @@
} }
/* Catalog */ /* Catalog */
:root.yotsuba-b .catalog-postContainer:hover > .post { :root.yotsuba-b.catalog-hover-expand .catalog-postContainer:hover > .post {
background-color: #D6DAF0; background-color: #D6DAF0;
} }
:root.yotsuba-b.werkTyme .catalog-thread:not(:hover), :root.yotsuba-b.werkTyme .catalog-thread:not(:hover),
:root.yotsuba-b .catalog-postContainer:hover > .post, :root.yotsuba-b.werkTyme:not(.catalog-hover-expand) .catalog-thread,
:root.yotsuba-b .catalog-postContainer:hover .catalog-reply { :root.yotsuba-b.catalog-hover-expand .catalog-postContainer:hover > .post,
:root.yotsuba-b.catalog-hover-expand .catalog-postContainer:hover .catalog-reply {
border-color: #B7C5D9; border-color: #B7C5D9;
} }

7
src/css/yotsuba.css
View File

@ -31,12 +31,13 @@
} }
/* Catalog */ /* Catalog */
:root.yotsuba .catalog-postContainer:hover > .post { :root.yotsuba.catalog-hover-expand .catalog-postContainer:hover > .post {
background-color: #F0E0D6; background-color: #F0E0D6;
} }
:root.yotsuba.werkTyme .catalog-thread:not(:hover), :root.yotsuba.werkTyme .catalog-thread:not(:hover),
:root.yotsuba .catalog-postContainer:hover > .post, :root.yotsuba.werkTyme:not(.catalog-hover-expand) .catalog-thread,
:root.yotsuba .catalog-postContainer:hover .catalog-reply { :root.yotsuba.catalog-hover-expand .catalog-postContainer:hover > .post,
:root.yotsuba.catalog-hover-expand .catalog-postContainer:hover .catalog-reply {
border-color: #D9BFB7; border-color: #D9BFB7;
} }