Add the Settings dialog.
Add the Main settings section. Add an API to add custom settings section. Close #604.
This commit is contained in:
Nicolas Stepien
parent
6cd4d22215
commit
b3e5912814
132
4chan_x.user.js
132
4chan_x.user.js
File diff suppressed because one or more lines are too long
@ -52,12 +52,16 @@ a[href="javascript:;"] {
|
||||
}
|
||||
|
||||
/* fixed, z-index */
|
||||
#overlay,
|
||||
#qp, #ihover,
|
||||
#updater, #thread-stats,
|
||||
#navlinks, #header,
|
||||
#qr, #watcher {
|
||||
position: fixed;
|
||||
}
|
||||
#overlay {
|
||||
z-index: 999;
|
||||
}
|
||||
#notifications {
|
||||
z-index: 80;
|
||||
}
|
||||
@ -177,6 +181,77 @@ a[href="javascript:;"] {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Settings */
|
||||
#overlay {
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
#settings {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, .15);
|
||||
height: 600px;
|
||||
min-height: 0;
|
||||
max-height: 100%;
|
||||
width: 900px;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
padding: 3px;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: column nowrap;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
#settings > nav {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
padding: 2px 2px 0;
|
||||
}
|
||||
#settings > nav a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.sections-list {
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
.section-container {
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.section-container > section {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.section-main ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
}
|
||||
.section-main li {
|
||||
padding-left: 10px;
|
||||
}
|
||||
.section-main label {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.unscroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Thread Updater */
|
||||
#updater:not(:hover) {
|
||||
background: none;
|
||||
|
||||
@ -46,7 +46,7 @@ Config =
|
||||
'Auto Hide QR': [false, 'Automatically hide the quick reply when posting.']
|
||||
'Remember Subject': [false, 'Remember the subject field, instead of resetting after posting.']
|
||||
'Remember Spoiler': [false, 'Remember the spoiler state, instead of resetting after posting.']
|
||||
'Hide Original Post Form': [true, 'Replace the normal post form with a shortcut to open the QR.']
|
||||
'Hide Original Post Form': [true, 'Hide the normal post form.']
|
||||
Quoting:
|
||||
'Quote Backlinks': [true, 'Add quote backlinks.']
|
||||
'OP Backlinks': [false, 'Add backlinks to the OP.']
|
||||
|
||||
@ -142,14 +142,123 @@ Settings =
|
||||
order: 111
|
||||
open: -> Conf['Enable 4chan\'s extension']
|
||||
|
||||
$.on d, 'AddSettingsSection', Settings.addSection
|
||||
|
||||
unless $.get 'previousversion'
|
||||
$.set 'previousversion', '<%= version %>'
|
||||
$.on d, '4chanXInitFinished', Settings.open
|
||||
|
||||
Settings.addSection 'Main', Settings.main
|
||||
Settings.addSection 'Filter', Settings.filter
|
||||
Settings.addSection 'Sauce', Settings.sauce
|
||||
Settings.addSection 'Rice', Settings.rice
|
||||
Settings.addSection 'Keybinds', Settings.keybinds
|
||||
|
||||
return if Conf['Enable 4chan\'s extension']
|
||||
settings = JSON.parse(localStorage.getItem '4chan-settings') or {}
|
||||
return if settings.disableAll
|
||||
settings.disableAll = true
|
||||
localStorage.setItem '4chan-settings', JSON.stringify settings
|
||||
|
||||
open: ->
|
||||
return if Settings.dialog
|
||||
$.event 'CloseMenu'
|
||||
# Here be settings
|
||||
|
||||
html = """
|
||||
<div id=settings class=dialog>
|
||||
<nav>
|
||||
<div class=sections-list></div>
|
||||
<div class=credits>
|
||||
<a href='<%= meta.page %>' target=_blank><%= meta.name %></a> |
|
||||
<a href='<%= meta.repo %>blob/<%= meta.mainBranch %>/changelog' target=_blank><%= version %></a> |
|
||||
<a href='<%= meta.repo %>issues' target=_blank>Issues</a>
|
||||
</div>
|
||||
</nav>
|
||||
<hr>
|
||||
<div class=section-container><section></section></div>
|
||||
</div>
|
||||
"""
|
||||
|
||||
Settings.dialog = dialog = $.el 'div',
|
||||
id: 'overlay'
|
||||
innerHTML: html
|
||||
|
||||
links = []
|
||||
for section in Settings.sections
|
||||
link = $.el 'a',
|
||||
textContent: section.title
|
||||
href: 'javascript:;'
|
||||
$.on link, 'click', Settings.openSection.bind section
|
||||
links.push link, $.tn ' | '
|
||||
links.pop()
|
||||
links[0].click()
|
||||
$.add $('.sections-list', dialog), links
|
||||
|
||||
$.on dialog, 'click', Settings.close
|
||||
$.on dialog.firstElementChild, 'click', (e) -> e.stopPropagation()
|
||||
|
||||
d.body.style.width = "#{d.body.clientWidth}px"
|
||||
$.addClass d.body, 'unscroll'
|
||||
$.add d.body, dialog
|
||||
close: ->
|
||||
return unless Settings.dialog
|
||||
d.body.style.removeProperty 'width'
|
||||
$.rmClass d.body, 'unscroll'
|
||||
$.rm Settings.dialog
|
||||
delete Settings.dialog
|
||||
|
||||
sections: []
|
||||
addSection: (title, open) ->
|
||||
if typeof title isnt 'string'
|
||||
{title, open} = title.detail
|
||||
Settings.sections.push {title, open}
|
||||
openSection: ->
|
||||
section = $ 'section', Settings.dialog
|
||||
section.innerHTML = null
|
||||
section.className = null
|
||||
$.addClass section, "section-#{@title.toLowerCase().replace /\s+/g, '-'}"
|
||||
@open section, g
|
||||
|
||||
main: (section) ->
|
||||
for key, obj of Config.main
|
||||
ul = $.el 'ul',
|
||||
textContent: key
|
||||
for key, arr of obj
|
||||
checked = if $.get(key, Conf[key]) then 'checked' else ''
|
||||
description = arr[1]
|
||||
li = $.el 'li',
|
||||
innerHTML: "<label><input type=checkbox name=\"#{key}\" #{checked}>#{key}</label><span class=description>: #{description}</span>"
|
||||
$.on $('input', li), 'click', $.cb.checked
|
||||
$.add ul, li
|
||||
$.add section, ul
|
||||
|
||||
hiddenNum = 0
|
||||
for ID, thread of ThreadHiding.getHiddenThreads().threads
|
||||
hiddenNum++
|
||||
for ID, thread of ReplyHiding.getHiddenPosts().threads
|
||||
for ID, post of thread
|
||||
$.log post
|
||||
hiddenNum++
|
||||
li = $.el 'li',
|
||||
innerHTML: "<button>Hidden: #{hiddenNum}</button> <span class=description>: Clear manually hidden threads and posts on /#{g.BOARD}/."
|
||||
$.on $('button', li), 'click', ->
|
||||
@textContent = 'Hidden: 0'
|
||||
$.delete "hiddenThreads.#{g.BOARD}"
|
||||
$.delete "hiddenPosts.#{g.BOARD}"
|
||||
$.after $('input[name="Stubs"]', section).parentNode.parentNode, li
|
||||
|
||||
filter: (section) ->
|
||||
# XXX TODO
|
||||
|
||||
sauce: (section) ->
|
||||
# XXX TODO
|
||||
|
||||
rice: (section) ->
|
||||
# XXX TODO
|
||||
|
||||
keybinds: (section) ->
|
||||
# XXX TODO
|
||||
|
||||
|
||||
Fourchan =
|
||||
init: ->
|
||||
@ -456,8 +565,8 @@ Filter =
|
||||
re
|
||||
$.set type, save
|
||||
|
||||
# Open the options and display & focus the relevant filter textarea.
|
||||
# Options.dialog()
|
||||
# Open the settings and display & focus the relevant filter textarea.
|
||||
Settings.open()
|
||||
# select = $ 'select[name=filter]', $.id 'options'
|
||||
# select.value = type
|
||||
# $.event select, new Event 'change'
|
||||
@ -1093,7 +1202,7 @@ Keybinds =
|
||||
Settings.open()
|
||||
when Conf['Close']
|
||||
if $.id 'settings'
|
||||
Options.close()
|
||||
Settings.close()
|
||||
else if (notifications = $$ '.notification').length
|
||||
for notification in notifications
|
||||
$('.close', notification).click()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user