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

Merge pull request #1230 from MayhemYDG/watcher

Browse Source 
Thread Watcher rewrite, close #99
This commit is contained in:
Mayhem 2013-08-12 10:24:30 -07:00
commit e695713a80
9 changed files with 311 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
CHANGELOG.md
View File

@ -1,3 +1,13 @@
- **Thread Watcher** improvements:
- It is now possible to open all watched threads via the `Open all threads` button in the Thread Watcher's menu.
- Added the `Current Board` setting to switch between showing watched threads from the current board or all boards, disabled by default.
- About dead (404'd) threads:
- Dead threads will be typographically indicated with a strikethrough.
- Dead threads will directly link to the corresponding archive when available.
- A button to prune all 404'd threads from the list is now available.
- Added the `Auto Prune` setting to automatically prune 404'd threads, disabled by default.
- The current thread is now highlighted in the list of watched threads.
- Watching the current thread can be done in the Header's menu too.
- Removed the `Check for Updates` setting:
- Your browser/userscript manager should handle updates itself automatically.

51
css/style.css
View File

@ -36,7 +36,7 @@
.move {
cursor: move;
}
label, .favicon {
label, .watcher-toggler {
cursor: pointer;
}
a[href="javascript:;"] {
@ -83,13 +83,13 @@ a[href="javascript:;"] {
#qr {
z-index: 30;
}
#watcher:hover {
#thread-watcher:hover {
z-index: 20;
}
#header {
z-index: 10;
}
#watcher {
#thread-watcher {
z-index: 5;
}
@ -432,28 +432,40 @@ a.hide-announcement {
}
/* Thread Watcher */
#watcher {
padding-bottom: 3px;
#thread-watcher {
max-width: 200px;
min-width: 150px;
padding: 3px;
position: absolute;
}
#thread-watcher > div:first-child {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
#thread-watcher .move {
-webkit-flex: 1;
flex: 1;
}
#watched-threads:not(:hover) {
max-height: 150px;
overflow: hidden;
}
#watched-threads div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#watcher:not(:hover) {
max-height: 220px;
#watched-threads .current {
font-weight: 700;
}
#watcher > .move {
padding-top: 3px;
}
#watcher > div {
max-width: 200px;
overflow: hidden;
padding-left: 3px;
padding-right: 3px;
text-overflow: ellipsis;
}
#watcher a {
#watched-threads a {
text-decoration: none;
}
#watched-threads .dead-thread a[title] {
text-decoration: line-through;
}
/* Thread Stats */
#thread-stats {
@ -878,6 +890,9 @@ a.hide-announcement {
text-decoration: none;
white-space: nowrap;
}
.entry.disabled {
color: graytext !important;
}
.entry.has-submenu {
padding-right: 20px;
}

5
html/Monitoring/ThreadWatcher.html Normal file
View File

@ -0,0 +1,5 @@
<div>
<span class="move">Thread Watcher</span>
<a class="menu-button" href="javascript:;">[<i></i>]</a>
</div>
<div id="watched-threads"></div>

7
src/General/Config.coffee
View File

@ -46,8 +46,6 @@ Config =
'Thread Excerpt': [true, 'Show an excerpt of the thread in the tab title.']
'Thread Stats': [true, 'Display reply, image, and page count.']
'Thread Watcher': [true, 'Bookmark threads.']
'Auto Watch': [true, 'Automatically watch threads you start.']
'Auto Watch Reply': [false, 'Automatically watch threads you reply to.']
'Posting':
'Quick Reply': [true, 'All-in-one form to reply, create threads, automate dumping and more.']
'Persistent QR': [false, 'The Quick reply won\'t disappear after posting.']
@ -78,6 +76,11 @@ Config =
'Fit height': [false, '']
'Expand spoilers': [false, 'Expand all images along with spoilers.']
'Expand from here': [true, 'Expand all images only from current position to thread end.']
threadWatcher:
'Current Board': [false, 'Only show watched threads from the current board.']
'Auto Watch': [true, 'Automatically watch threads you start.']
'Auto Watch Reply': [false, 'Automatically watch threads you reply to.']
'Auto Prune': [false, 'Automatically prune 404\'d threads.']
filter:
name: """
# Filter any namefags:

16
src/General/DataBoard.coffee
View File

@ -1,10 +1,10 @@
DataBoards = ['hiddenThreads', 'hiddenPosts', 'lastReadPosts', 'yourPosts']
DataBoards = ['hiddenThreads', 'hiddenPosts', 'lastReadPosts', 'yourPosts', 'watchedThreads']
class DataBoard
constructor: (@key, sync) ->
constructor: (@key, sync, dontClean) ->
@data = Conf[key]
$.sync key, @onSync.bind @
@clean()
@clean() unless dontClean
return unless sync
# Chrome also fires the onChanged callback on the current tab,
# so we only start syncing when we're ready.
@ -13,6 +13,8 @@ class DataBoard
@sync = sync
$.on d, '4chanXInitFinished', init
save: ->
$.set @key, @data
delete: ({boardID, threadID, postID}) ->
if postID
delete @data.boards[boardID][threadID][postID]
@ -22,7 +24,7 @@ class DataBoard
@deleteIfEmpty {boardID}
else
delete @data.boards[boardID]
$.set @key, @data
@save()
deleteIfEmpty: ({boardID, threadID}) ->
if threadID
unless Object.keys(@data.boards[boardID][threadID]).length
@ -37,7 +39,7 @@ class DataBoard
(@data.boards[boardID] or= {})[threadID] = val
else
@data.boards[boardID] = val
$.set @key, @data
@save()
get: ({boardID, threadID, postID, defaultValue}) ->
if board = @data.boards[boardID]
unless threadID
@ -65,7 +67,7 @@ class DataBoard
for boardID of @data.boards
@ajaxClean boardID
$.set @key, @data
@save()
ajaxClean: (boardID) ->
$.cache "//api.4chan.org/#{boardID}/threads.json", (e) =>
if e.target.status is 404
@ -80,7 +82,7 @@ class DataBoard
threads[thread.no] = board[thread.no]
@data.boards[boardID] = threads
@deleteIfEmpty {boardID}
$.set @key, @data
@save()
onSync: (data) ->
@data = data or boards: {}

1
src/General/Main.coffee
View File

@ -112,6 +112,7 @@ Main =
initFeature 'Thread Stats', ThreadStats
initFeature 'Thread Updater', ThreadUpdater
initFeature 'Thread Watcher', ThreadWatcher
initFeature 'Thread Watcher (Menu)', ThreadWatcher.menu
initFeature 'Index Navigation', Nav
initFeature 'Keybinds', Keybinds
initFeature 'Show Dice Roll', Dice

6
src/General/Settings.coffee
View File

@ -169,7 +169,6 @@ Settings =
data =
version: g.VERSION
date: now
Conf['WatchedThreads'] = {}
for db in DataBoards
Conf[db] = boards: {}
# Make sure to export the most recent data.
@ -279,7 +278,10 @@ Settings =
for key, val of Config.hotkeys when key of data.Conf
data.Conf[key] = data.Conf[key].replace(/ctrl|alt|meta/g, (s) -> "#{s[0].toUpperCase()}#{s[1..]}").replace /(^|.+\+)[A-Z]$/g, (s) ->
"Shift+#{s[0...-1]}#{s[-1..].toLowerCase()}"
data.Conf.WatchedThreads = data.WatchedThreads
data.Conf['WatchedThreads'] = data.WatchedThreads
if data.Conf['WatchedThreads']
data.Conf['watchedThreads'] = boards: ThreadWatcher.convert data.Conf['WatchedThreads']
delete data.Conf['WatchedThreads']
$.set data.Conf
convertSettings: (data, map) ->
for prevKey, newKey of map

19
src/Images/ImageExpand.coffee
View File

@ -159,8 +159,8 @@ ImageExpand =
{createSubEntry} = ImageExpand.menu
subEntries = []
for key, conf of Config.imageExpansion
subEntries.push createSubEntry key, conf
for name, conf of Config.imageExpansion
subEntries.push createSubEntry name, conf[1]
$.event 'AddMenuEntry',
type: 'header'
@ -168,15 +168,14 @@ ImageExpand =
order: 80
subEntries: subEntries
createSubEntry: (type, config) ->
createSubEntry: (name, desc) ->
label = $.el 'label',
innerHTML: "<input type=checkbox name='#{type}'> #{type}"
innerHTML: "<input type=checkbox name='#{name}'> #{name}"
title: desc
input = label.firstElementChild
if type in ['Fit width', 'Fit height']
if name in ['Fit width', 'Fit height']
$.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
input.checked = Conf[name]
$.event 'change', null, input
$.on input, 'change', $.cb.checked
el: label

303
src/Monitoring/ThreadWatcher.coffee
View File

@ -1,99 +1,266 @@
ThreadWatcher =
init: ->
return if g.VIEW is 'catalog' or !Conf['Thread Watcher']
@dialog = UI.dialog 'watcher', 'top: 50px; left: 0px;',
'<div class=move>Thread Watcher</div>'
return if !Conf['Thread Watcher']
@db = new DataBoard 'watchedThreads', @refresh, true
@dialog = UI.dialog 'thread-watcher', 'top: 50px; left: 0px;', """
<%= grunt.file.read('html/Monitoring/ThreadWatcher.html').replace(/>\s+</g, '><').trim() %>
"""
@list = @dialog.lastElementChild
$.on d, 'QRPostSuccessful', @cb.post
$.on d, 'ThreadUpdate', @cb.threadUpdate if g.VIEW is 'thread'
$.on d, '4chanXInitFinished', @ready
$.sync 'WatchedThreads', @refresh
now = Date.now()
if (@db.data.lastChecked or 0) < now - 2 * $.HOUR
@db.data.lastChecked = now
ThreadWatcher.fetchAllStatus()
@db.save()
# XXX tmp conversion from old to new format
$.get 'WatchedThreads', null, ({WatchedThreads}) ->
return unless WatchedThreads
for boardID, threads of ThreadWatcher.convert WatchedThreads
for threadID, data of threads
ThreadWatcher.db.set {boardID, threadID, val: data}
$.delete 'WatchedThreads'
Thread::callbacks.push
name: 'Thread Watcher'
cb: @node
node: ->
favicon = $.el 'img',
className: 'favicon'
$.on favicon, 'click', ThreadWatcher.cb.toggle
$.before $('input', @OP.nodes.post), favicon
return if g.VIEW isnt 'thread'
$.get 'AutoWatch', 0, (item) =>
return if item['AutoWatch'] isnt @ID
ThreadWatcher.watch @
$.delete 'AutoWatch'
toggler = $.el 'img',
className: 'watcher-toggler'
$.on toggler, 'click', ThreadWatcher.cb.toggle
$.before $('input', @OP.nodes.post), toggler
ready: ->
$.off d, '4chanXInitFinished', ThreadWatcher.ready
return unless Main.isThisPageLegit()
ThreadWatcher.refresh()
$.add d.body, ThreadWatcher.dialog
refresh: (watched) ->
unless watched
$.get 'WatchedThreads', {}, (item) ->
ThreadWatcher.refresh item['WatchedThreads']
return
nodes = [$('.move', ThreadWatcher.dialog)]
for board of watched
for id, props of watched[board]
x = $.el 'a',
textContent: '×'
href: 'javascript:;'
$.on x, 'click', ThreadWatcher.cb.x
link = $.el 'a', props
link.title = link.textContent
div = $.el 'div'
$.add div, [x, $.tn(' '), link]
nodes.push div
$.rmAll ThreadWatcher.dialog
$.add ThreadWatcher.dialog, nodes
watched = watched[g.BOARD] or {}
for ID, thread of g.BOARD.threads
favicon = $ '.favicon', thread.OP.nodes.post
favicon.src = if ID of watched
Favicon.default
else
Favicon.empty
return
return unless Conf['Auto Watch']
$.get 'AutoWatch', 0, ({AutoWatch}) ->
return unless thread = g.BOARD.threads[AutoWatch]
ThreadWatcher.add thread
$.delete 'AutoWatch'
cb:
openAll: ->
return if $.hasClass @, 'disabled'
for a in $$ 'a[title]', ThreadWatcher.list
$.open a.href
$.event 'CloseMenu'
checkThreads: ->
return if $.hasClass @, 'disabled'
ThreadWatcher.fetchAllStatus()
pruneDeads: ->
return if $.hasClass @, 'disabled'
for {boardID, threadID, data} in ThreadWatcher.getAll() when data.isDead
delete ThreadWatcher.db.data.boards[boardID][threadID]
ThreadWatcher.db.deleteIfEmpty {boardID}
ThreadWatcher.db.save()
ThreadWatcher.refresh()
$.event 'CloseMenu'
toggle: ->
ThreadWatcher.toggle Get.postFromNode(@).thread
x: ->
thread = @nextElementSibling.pathname.split '/'
ThreadWatcher.unwatch thread[1], thread[3]
rm: ->
[boardID, threadID] = @parentNode.dataset.fullID.split '.'
ThreadWatcher.rm boardID, +threadID
post: (e) ->
{board, postID, threadID} = e.detail
if postID is threadID
if Conf['Auto Watch']
$.set 'AutoWatch', threadID
else if Conf['Auto Watch Reply']
ThreadWatcher.watch board.threads[threadID]
ThreadWatcher.add board.threads[threadID]
threadUpdate: (e) ->
{thread} = e.detail
return unless e.detail[404] and ThreadWatcher.db.get {boardID: thread.board.ID, threadID: thread.ID}
# Update 404 status.
ThreadWatcher.add thread
fetchAllStatus: ->
# XXX need visual feedback
for thread in ThreadWatcher.getAll()
ThreadWatcher.fetchStatus thread
return
fetchStatus: ({boardID, threadID, data}) ->
return if data.isDead
$.ajax "//api.4chan.org/#{boardID}/res/#{threadID}.json",
onload: ->
return if @status isnt 404
if Conf['Auto Prune']
ThreadWatcher.rm boardID, threadID
else
data.isDead = true
ThreadWatcher.db.set {boardID, threadID, val: data}
ThreadWatcher.refresh()
,
type: 'head'
getAll: ->
all = []
for boardID, threads of ThreadWatcher.db.data.boards
if Conf['Current Board'] and boardID isnt g.BOARD.ID
continue
for threadID, data of threads
all.push {boardID, threadID, data}
all
makeLine: (boardID, threadID, data) ->
x = $.el 'a',
textContent: '×'
href: 'javascript:;'
$.on x, 'click', ThreadWatcher.cb.rm
if data.isDead
href = Redirect.to 'thread', {boardID, threadID}
link = $.el 'a',
href: href or "/#{boardID}/res/#{threadID}"
textContent: data.excerpt
title: data.excerpt
div = $.el 'div'
fullID = "#{boardID}.#{threadID}"
div.dataset.fullID = fullID
$.addClass div, 'current' if g.VIEW is 'thread' and fullID is "#{g.BOARD}.#{g.THREADID}"
$.addClass div, 'dead-thread' if data.isDead
$.add div, [x, $.tn(' '), link]
div
refresh: ->
nodes = []
for {boardID, threadID, data} in ThreadWatcher.getAll()
nodes.push ThreadWatcher.makeLine boardID, threadID, data
{list} = ThreadWatcher
$.rmAll list
$.add list, nodes
for threadID, thread of g.BOARD.threads
toggler = $ '.watcher-toggler', thread.OP.nodes.post
toggler.src = if ThreadWatcher.db.get {boardID: thread.board.ID, threadID}
Favicon.default
else
Favicon.empty
for refresher in ThreadWatcher.menu.refreshers
refresher()
return
toggle: (thread) ->
if $('.favicon', thread.OP.nodes.post).src is Favicon.empty
ThreadWatcher.watch thread
boardID = thread.board.ID
threadID = thread.ID
if ThreadWatcher.db.get {boardID, threadID}
ThreadWatcher.rm boardID, threadID
else
ThreadWatcher.unwatch thread.board, thread.ID
ThreadWatcher.add thread
add: (thread) ->
data = {}
boardID = thread.board.ID
threadID = thread.ID
if thread.isDead
if Conf['Auto Prune'] and ThreadWatcher.db.get {boardID, threadID}
ThreadWatcher.rm boardID, threadID
return
data.isDead = true
data.excerpt = Get.threadExcerpt thread
ThreadWatcher.db.set {boardID, threadID, val: data}
ThreadWatcher.refresh()
rm: (boardID, threadID) ->
ThreadWatcher.db.delete {boardID, threadID}
ThreadWatcher.refresh()
unwatch: (board, threadID) ->
$.get 'WatchedThreads', {}, (item) ->
watched = item['WatchedThreads']
delete watched[board][threadID]
delete watched[board] unless Object.keys(watched[board]).length
ThreadWatcher.refresh watched
$.set 'WatchedThreads', watched
convert: (oldFormat) ->
newFormat = {}
for boardID, threads of oldFormat
for threadID, data of threads
(newFormat[boardID] or= {})[threadID] = excerpt: data.textContent
newFormat
watch: (thread) ->
$.get 'WatchedThreads', {}, (item) ->
watched = item['WatchedThreads']
watched[thread.board] or= {}
watched[thread.board][thread] =
href: "/#{thread.board}/res/#{thread}"
textContent: Get.threadExcerpt thread
ThreadWatcher.refresh watched
$.set 'WatchedThreads', watched
menu:
refreshers: []
init: ->
return if !Conf['Thread Watcher']
menu = new UI.Menu 'thread watcher'
$.on $('.menu-button', ThreadWatcher.dialog), 'click', (e) ->
menu.toggle e, @, ThreadWatcher
@addHeaderMenuEntry()
@addMenuEntries()
addHeaderMenuEntry: ->
return if g.VIEW isnt 'thread'
entryEl = $.el 'a',
href: 'javascript:;'
$.event 'AddMenuEntry',
type: 'header'
el: entryEl
order: 60
$.on entryEl, 'click', -> ThreadWatcher.toggle g.threads["#{g.BOARD}.#{g.THREADID}"]
@refreshers.push ->
[addClass, rmClass, text] = if $ '.current', ThreadWatcher.list
['unwatch-thread', 'watch-thread', 'Unwatch thread']
else
['watch-thread', 'unwatch-thread', 'Watch thread']
$.addClass entryEl, addClass
$.rmClass entryEl, rmClass
entryEl.textContent = text
addMenuEntries: ->
entries = []
# `Open all` entry
entries.push
cb: ThreadWatcher.cb.openAll
entry:
type: 'thread watcher'
el: $.el 'a',
textContent: 'Open all threads'
refresh: -> (if ThreadWatcher.list.firstElementChild then $.rmClass else $.addClass) @el, 'disabled'
# `Check 404'd threads` entry
entries.push
cb: ThreadWatcher.cb.checkThreads
entry:
type: 'thread watcher'
el: $.el 'a',
textContent: 'Check 404\'d threads'
refresh: -> (if $('div:not(.dead-thread)', ThreadWatcher.list) then $.rmClass else $.addClass) @el, 'disabled'
# `Prune 404'd threads` entry
entries.push
cb: ThreadWatcher.cb.pruneDeads
entry:
type: 'thread watcher'
el: $.el 'a',
textContent: 'Prune 404\'d threads'
refresh: -> (if $('.dead-thread', ThreadWatcher.list) then $.rmClass else $.addClass) @el, 'disabled'
# `Settings` entries:
subEntries = []
for name, conf of Config.threadWatcher
subEntries.push @createSubEntry name, conf[1]
entries.push
entry:
type: 'thread watcher'
el: $.el 'span',
textContent: 'Settings'
subEntries: subEntries
for {entry, cb, refresh} in entries
entry.el.href = 'javascript:;' if entry.el.nodeName is 'A'
$.on entry.el, 'click', cb if cb
@refreshers.push refresh.bind entry if refresh
$.event 'AddMenuEntry', entry
createSubEntry: (name, desc) ->
entry =
type: 'thread watcher'
el: $.el 'label',
innerHTML: "<input type=checkbox name='#{name}'> #{name}"
title: desc
input = entry.el.firstElementChild
input.checked = Conf[name]
$.on input, 'change', $.cb.checked
$.on input, 'change', ThreadWatcher.refresh if name is 'Current Board'
entry