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

24
src/General/Index.coffee
View File

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

1
src/config/Config.coffee
View File

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

7
src/css/burichan.css
View File

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

7
src/css/futaba.css
View File

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

7
src/css/photon.css
View File

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

20
src/css/style.css
View File

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

13
src/css/tomorrow.css
View File

@ -30,12 +30,13 @@
}
/* Catalog */
:root.tomorrow .catalog-postContainer:hover > .post {
:root.tomorrow.catalog-hover-expand .catalog-postContainer:hover > .post {
background-color: #282A2E;
}
:root.tomorrow.werkTyme .catalog-thread:not(:hover),
:root.tomorrow .catalog-postContainer:hover > .post,
:root.tomorrow .catalog-postContainer:hover .catalog-reply {
:root.tomorrow.werkTyme:not(.catalog-hover-expand) .catalog-thread,
:root.tomorrow.catalog-hover-expand .catalog-postContainer:hover > .post,
:root.tomorrow.catalog-hover-expand .catalog-postContainer:hover .catalog-reply {
border-color: #111;
}
@ -79,12 +80,14 @@
}
:root.tomorrow .catalog-thread.filter-highlight .catalog-thumb,
: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);
}
:root.tomorrow .catalog-thread.watched .catalog-thumb,
: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);
}

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

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

7
src/css/yotsuba.css
View File

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