Get style settings and theme selection working.
This commit is contained in:
Zixaphir
parent
386e0c617d
commit
06d942a968
File diff suppressed because one or more lines are too long
@ -47,7 +47,7 @@ div.navLinks > a:first-of-type::after {
|
||||
/* Thread Navigation Links */
|
||||
#navlinks a {
|
||||
margin: 2px;
|
||||
top: 0;
|
||||
top: 1px;
|
||||
}
|
||||
#navlinks a:last-of-type {
|
||||
#{align}: #{position[i++]}px;
|
||||
@ -73,12 +73,12 @@ div.navLinks > a:first-of-type::after {
|
||||
div.navLinks > a:first-of-type::after,
|
||||
#catalog::after,
|
||||
body > a[style="cursor: pointer; float: right;"]::after {
|
||||
top: 0 !important;
|
||||
top: 1px !important;
|
||||
}
|
||||
#{if _conf["Announcements"] is "slideout" then "#globalMessage," else ""}
|
||||
#{if _conf["Slideout Watcher"] then "#watcher," else ""}
|
||||
#boardNavDesktopFoot {
|
||||
top: 17px !important;
|
||||
top: 16px !important;
|
||||
}
|
||||
#{if _conf['Boards Navigation'] is 'top' or _conf['Boards Navigation'] is 'sticky top' then '#boardNavDesktop' else if _conf['Pagination'] is 'top' or _conf['Pagination'] is 'sticky top' then '.pagelist'} {
|
||||
#{if _conf['4chan SS Navigation']
|
||||
|
||||
@ -5,5 +5,5 @@
|
||||
#{Style.sidebarLocation[1]}: auto !important;
|
||||
top: auto !important;
|
||||
bottom: auto !important;
|
||||
#{if _conf["Updater Position"] is 'top' then "top: 18px !important" else "bottom: 0 !important"};
|
||||
#{if _conf["Updater Position"] is 'top' then "top: 16px !important" else "bottom: 0 !important"};
|
||||
}
|
||||
@ -79,6 +79,9 @@ body {
|
||||
margin-#{Style.sidebarLocation[1]}: 2px;
|
||||
padding: 0 #{parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]}px 0 #{parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"]}px;
|
||||
}
|
||||
body.unscroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
#{if _conf["4chan SS Sidebar"] and /^boards\.4chan\.org$/.test location.hostname then "
|
||||
body::before {
|
||||
content: '';
|
||||
@ -86,7 +89,7 @@ body::before {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
#{Style.sidebarLocation[0]}: 0;
|
||||
width: #{if _conf["Sidebar"] is 'large' then 305 else if _conf['Sidebar'] is 'normal' then 254 else if _conf['Sidebar'] is 'minimal' then 27 else 0}px;
|
||||
width: #{if _conf['Sidebar'] is 'large' then 305 else if _conf['Sidebar'] is 'normal' then 254 else if _conf['Sidebar'] is 'minimal' then 27 else 0}px;
|
||||
z-index: 1;
|
||||
#{Style.sizing}: border-box;
|
||||
display: block;
|
||||
@ -304,7 +307,7 @@ else "
|
||||
"at sidebar top": "
|
||||
.boardBanner {
|
||||
position: fixed;
|
||||
top: 18px;
|
||||
top: 16px;
|
||||
#{Style.sidebarLocation[0]}: 2px;
|
||||
}
|
||||
.boardBanner img {
|
||||
@ -1398,10 +1401,14 @@ a:only-of-type > .remove {
|
||||
right: 15%;
|
||||
top: 15%;
|
||||
bottom: 15%;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
z-index: 31;
|
||||
padding: .3em;
|
||||
#{if _conf["Rounded Edges"] then "border-radius: 3px;" else ""}
|
||||
}
|
||||
.description {
|
||||
display: none;
|
||||
}
|
||||
#appchanx-settings h3,
|
||||
.section-keybinds,
|
||||
.section-mascots,
|
||||
@ -1418,11 +1425,10 @@ a:only-of-type > .remove {
|
||||
margin: auto;
|
||||
}
|
||||
#appchanx-settings fieldset {
|
||||
padding: 0;
|
||||
padding: 5px 0;
|
||||
#{if _conf["Rounded Edges"] then "border-radius: 3px;" else ""}
|
||||
vertical-align: top;
|
||||
#{if _conf["Single Column Mode"] then "margin: 0 auto 6px;" else "margin: 0 3px 6px;\n display: inline-block;"}
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
.section-container {
|
||||
@ -1487,11 +1493,11 @@ article li {
|
||||
.rice + .optionlabel {
|
||||
padding-left: 0;
|
||||
}
|
||||
.section-script fieldset > div,
|
||||
.section-script fieldset,
|
||||
.styleoption {
|
||||
text-align: left;
|
||||
}
|
||||
.section-style fieldset > div {
|
||||
.section-style fieldset {
|
||||
width: 370px;
|
||||
}
|
||||
.section-script fieldset {
|
||||
@ -1532,7 +1538,7 @@ article li {
|
||||
}
|
||||
/* Hover Functionality */
|
||||
#mouseover {
|
||||
z-index: 32;
|
||||
z-index: 33;
|
||||
position: fixed;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
@ -245,7 +245,7 @@ textarea {
|
||||
color: #{theme["Text"]};
|
||||
}
|
||||
#exlinks-options-content > table,
|
||||
#appchanx-settings ul,
|
||||
#appchanx-settings fieldset,
|
||||
#selectrice {
|
||||
border-bottom: 1px solid #{theme["Reply Border"]};
|
||||
box-shadow: inset #{theme["Shadow Color"]} 0 0 5px;
|
||||
@ -376,7 +376,7 @@ a .name {
|
||||
.placeholder {
|
||||
color: #{if Style.lightTheme then "rgba(0,0,0,0.3)" else "rgba(255,255,255,0.2)"} !important;
|
||||
}
|
||||
#appchanx-settings ul,
|
||||
#appchanx-settings fieldset,
|
||||
.boxcontent dd,
|
||||
.selectrice ul {
|
||||
border-color: #{if Style.lightTheme then "rgba(0,0,0,0.1)" else "rgba(255,255,255,0.1)"};
|
||||
|
||||
10
lib/$.coffee
10
lib/$.coffee
@ -240,6 +240,16 @@ $.extend $,
|
||||
# Round to an integer otherwise.
|
||||
Math.round size
|
||||
"#{size} #{['B', 'KB', 'MB', 'GB'][unit]}"
|
||||
minmax: (value, min, max) ->
|
||||
return (
|
||||
if value < min
|
||||
min
|
||||
else
|
||||
if value > max
|
||||
max
|
||||
else
|
||||
value
|
||||
)
|
||||
syncing: {}
|
||||
sync: do ->
|
||||
<% if (type === 'crx') { %>
|
||||
|
||||
@ -147,7 +147,7 @@ Style =
|
||||
|
||||
# Offsets various UI of the sidebar depending on the sidebar's width.
|
||||
# Only really used for the board banner or right sidebar.
|
||||
Style['sidebarOffset'] = if _conf["Sidebar"] is "large"
|
||||
Style['sidebarOffset'] = if _conf['Sidebar'] is "large"
|
||||
{
|
||||
W: 51
|
||||
H: 17
|
||||
@ -183,7 +183,7 @@ Style =
|
||||
Style.sidebar = {
|
||||
minimal: 20
|
||||
hide: 2
|
||||
}[_conf.Sidebar] or (252 + Style.sidebarOffset.W)
|
||||
}[_conf['Sidebar']] or (252 + Style.sidebarOffset.W)
|
||||
|
||||
Style.replyMargin = _conf["Post Spacing"]
|
||||
|
||||
@ -207,7 +207,7 @@ Style =
|
||||
align = Style.sidebarLocation[0]
|
||||
|
||||
_conf = Conf
|
||||
notCatalog = !g.CATALOG
|
||||
notCatalog = g.VIEW isnt 'catalog'
|
||||
notEither = notCatalog and g.BOARD isnt 'f'
|
||||
|
||||
aligner = (first, checks) ->
|
||||
@ -217,11 +217,12 @@ Style =
|
||||
# Check which elements we actually have. Some are easy, because the script creates them so we'd know they're here
|
||||
# Some are hard, like 4sight, which we have no way of knowing if available without looking for it.
|
||||
for enabled in checks
|
||||
position[position.length] =
|
||||
position.push(
|
||||
if enabled
|
||||
first += 19
|
||||
else
|
||||
first
|
||||
)
|
||||
|
||||
position
|
||||
|
||||
@ -241,7 +242,7 @@ Style =
|
||||
notEither
|
||||
g.VIEW is 'thread'
|
||||
notEither and _conf['Fappe Tyme']
|
||||
navlinks = ((!g.VIEW is 'thread' and _conf['Index Navigation']) or (g.VIEW is 'thread' and _conf['Reply Navigation'])) and notCatalog
|
||||
navlinks = ((g.VIEW isnt 'thread' and _conf['Index Navigation']) or (g.VIEW is 'thread' and _conf['Reply Navigation'])) and notCatalog
|
||||
navlinks
|
||||
]
|
||||
)
|
||||
@ -524,56 +525,56 @@ Rice =
|
||||
Post::callbacks.push
|
||||
name: 'Rice Checkboxes'
|
||||
cb: @node
|
||||
|
||||
cb:
|
||||
|
||||
cb:
|
||||
check: ->
|
||||
@check.click()
|
||||
|
||||
option: (e) ->
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
select = Rice.input
|
||||
container = select.nextElementSibling
|
||||
container.firstChild.textContent = @textContent
|
||||
select.value = @getAttribute 'data-value'
|
||||
ev = document.createEvent 'HTMLEvents'
|
||||
ev.initEvent "change", true, true
|
||||
$.event select, ev
|
||||
$.event 'change', null, select
|
||||
Rice.cleanup()
|
||||
|
||||
selectclick: (e) ->
|
||||
e.stopPropagation()
|
||||
|
||||
{ul} = Rice
|
||||
|
||||
unless ul
|
||||
Rice.ul = ul = $.el 'ul',
|
||||
id: "selectrice"
|
||||
$.add d.body, ul
|
||||
|
||||
if ul.children.length > 0
|
||||
return Rice.cleanup()
|
||||
|
||||
rect = @getBoundingClientRect()
|
||||
{clientHeight} = d.documentElement
|
||||
{style} = ul
|
||||
|
||||
style.cssText = "width: #{rect.width}px; left: #{rect.left}px;" + (if clientHeight - rect.bottom < 200 then "bottom: #{clientHeight - rect.top}px" else "top: #{rect.bottom}px")
|
||||
Rice.input = select = @previousSibling
|
||||
nodes = []
|
||||
|
||||
for option in select.options
|
||||
li = $.el 'li',
|
||||
textContent: option.textContent
|
||||
li.setAttribute 'data-value', option.value
|
||||
|
||||
$.on li, 'click', Rice.cb.option
|
||||
nodes.push li
|
||||
$.add ul, nodes
|
||||
|
||||
$.on ul, 'click scroll blur', (e) ->
|
||||
select: (e) ->
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
|
||||
$.on d, 'click scroll blur resize', Rice.cleanup
|
||||
{ul} = Rice
|
||||
|
||||
unless ul
|
||||
Rice.ul = ul = $.el 'ul',
|
||||
id: "selectrice"
|
||||
$.add d.body, ul
|
||||
|
||||
if ul.children.length > 0
|
||||
return Rice.cleanup()
|
||||
|
||||
rect = @getBoundingClientRect()
|
||||
{clientHeight} = d.documentElement
|
||||
{style} = ul
|
||||
|
||||
style.cssText = "width: #{rect.width}px; left: #{rect.left}px;" + (if clientHeight - rect.bottom < 200 then "bottom: #{clientHeight - rect.top}px" else "top: #{rect.bottom}px")
|
||||
Rice.input = select = @previousSibling
|
||||
nodes = []
|
||||
|
||||
for option in select.options
|
||||
li = $.el 'li',
|
||||
textContent: option.textContent
|
||||
li.setAttribute 'data-value', option.value
|
||||
|
||||
$.on li, 'click', Rice.cb.option
|
||||
nodes.push li
|
||||
$.add ul, nodes
|
||||
|
||||
$.on ul, 'click scroll blur', (e) ->
|
||||
e.stopPropagation()
|
||||
|
||||
$.on d, 'click scroll blur resize', Rice.cleanup
|
||||
|
||||
cleanup: ->
|
||||
$.off d, 'click scroll blur resize', Rice.cleanup
|
||||
@ -581,17 +582,21 @@ Rice =
|
||||
$.rm child
|
||||
return
|
||||
|
||||
nodes: (source) ->
|
||||
source or= d.body
|
||||
checkboxes = $$('[type=checkbox]:not(.riced)', source)
|
||||
nodes: (root) ->
|
||||
root or= d.body
|
||||
|
||||
checkboxes = $$('[type=checkbox]:not(.riced)', root)
|
||||
checkrice = Rice.checkbox
|
||||
|
||||
for input in checkboxes
|
||||
checkrice input
|
||||
|
||||
selects = $$('select:not(.riced)', source)
|
||||
selects = $$('select:not(.riced)', root)
|
||||
selectrice = Rice.select
|
||||
for input in selects
|
||||
selectrice input
|
||||
|
||||
for select in selects
|
||||
selectrice select
|
||||
|
||||
return
|
||||
|
||||
node: ->
|
||||
@ -604,17 +609,17 @@ Rice =
|
||||
className: 'rice'
|
||||
div.check = input
|
||||
$.after input, div
|
||||
if div.parentElement.tagName.toLowerCase() != 'label'
|
||||
if div.parentElement.tagName isnt 'LABEL'
|
||||
$.on div, 'click', Rice.cb.check
|
||||
|
||||
select: (input) ->
|
||||
$.addClass input, 'riced'
|
||||
select: (select) ->
|
||||
$.addClass select, 'riced'
|
||||
div = $.el 'div',
|
||||
className: 'selectrice'
|
||||
innerHTML: "<div>#{input.options[input.selectedIndex].textContent or null}</div>"
|
||||
$.on div, "click", Rice.selectclick
|
||||
innerHTML: "<div>#{select.options[select.selectedIndex].textContent or null}</div>"
|
||||
$.on div, "click", Rice.cb.select
|
||||
|
||||
$.after input, div
|
||||
$.after select, div
|
||||
|
||||
###
|
||||
JSColor
|
||||
@ -635,14 +640,13 @@ JSColor =
|
||||
fetchElement: (mixed) ->
|
||||
if typeof mixed is "string" then $.id mixed else mixed
|
||||
|
||||
fireEvent: (el, evnt) ->
|
||||
fireEvent: (el, event) ->
|
||||
return unless el
|
||||
|
||||
ev = document.createEvent 'HTMLEvents'
|
||||
ev.initEvent evnt, true, true
|
||||
el.dispatchEvent ev
|
||||
$.event event, null, el
|
||||
|
||||
getRelMousePos: (e = window.event) ->
|
||||
getRelMousePos: (e) ->
|
||||
e or= window.event
|
||||
x = 0
|
||||
y = 0
|
||||
if typeof e.offsetX is 'number'
|
||||
@ -1345,9 +1349,9 @@ MascotTools =
|
||||
close: ->
|
||||
Conf['editMode'] = false
|
||||
editMascot = {}
|
||||
$.rm $("#mascotConf", d.body)
|
||||
$.rm $.id mascotConf
|
||||
Style.addStyle()
|
||||
Options.dialog("mascot")
|
||||
Settings.open "mascots"
|
||||
|
||||
importMascot: (evt) ->
|
||||
file = evt.target.files[0]
|
||||
@ -1380,7 +1384,7 @@ MascotTools =
|
||||
|
||||
alert "Mascot \"#{name}\" imported!"
|
||||
$.rm $("#mascotContainer", d.body)
|
||||
Options.mascotTab.dialog()
|
||||
Settings.open 'mascots'
|
||||
|
||||
reader.readAsText(file)
|
||||
|
||||
@ -1641,108 +1645,108 @@ ThemeTools =
|
||||
bgRPA = ['no-repeat', 'bottom', 'left', 'fixed']
|
||||
|
||||
if origin == "oneechan"
|
||||
Themes[name] = {
|
||||
Themes[name] =
|
||||
'Author' : "Anonymous"
|
||||
'Author Tripcode' : "!POMF.9waa"
|
||||
'Background Image' : 'url("' + (imported.bgImg or '') + '")'
|
||||
'Background Attachment' : bgRPA[3] or ''
|
||||
'Background Position' : ((bgRPA[1] + " ") or '') + (bgRPA[2] or '')
|
||||
'Background Repeat' : bgRPA[0] or ''
|
||||
'Background Color' : 'rgb(' + bgColor.rgb + ')'
|
||||
'Dialog Background' : 'rgba(' + mainColor.rgb + ',.98)'
|
||||
'Dialog Border' : 'rgb(' + brderColor.rgb + ')'
|
||||
'Thread Wrapper Background' : 'rgba(0,0,0,0)'
|
||||
'Thread Wrapper Border' : 'rgba(0,0,0,0)'
|
||||
'Reply Background' : 'rgba(' + mainColor.rgb + ',' + imported.replyOp + ')'
|
||||
'Reply Border' : 'rgb(' + brderColor.rgb + ')'
|
||||
'Highlighted Reply Background': 'rgba(' + mainColor.shiftRGB(4, true) + ',' + imported.replyOp + ')'
|
||||
'Highlighted Reply Border' : 'rgb(' + linkColor.rgb + ')'
|
||||
'Backlinked Reply Outline' : 'rgb(' + linkColor.rgb + ')'
|
||||
'Checkbox Background' : 'rgba(' + inputColor.rgb + ',' + imported.replyOp + ')'
|
||||
'Checkbox Border' : 'rgb(' + inputbColor.rgb + ')'
|
||||
'Checkbox Checked Background' : 'rgb(' + inputColor.rgb + ')'
|
||||
'Input Background' : 'rgba(' + inputColor.rgb + ',' + imported.replyOp + ')'
|
||||
'Input Border' : 'rgb(' + inputbColor.rgb + ')'
|
||||
'Hovered Input Background' : 'rgba(' + inputColor.hover + ',' + imported.replyOp + ')'
|
||||
'Hovered Input Border' : 'rgb(' + inputbColor.rgb + ')'
|
||||
'Focused Input Background' : 'rgba(' + inputColor.hover + ',' + imported.replyOp + ')'
|
||||
'Focused Input Border' : 'rgb(' + inputbColor.rgb + ')'
|
||||
'Buttons Background' : 'rgba(' + inputColor.rgb + ',' + imported.replyOp + ')'
|
||||
'Buttons Border' : 'rgb(' + inputbColor.rgb + ')'
|
||||
'Navigation Background' : 'rgba(' + bgColor.rgb + ',0.8)'
|
||||
'Navigation Border' : 'rgb(' + mainColor.rgb + ')'
|
||||
'Quotelinks' : 'rgb(' + linkColor.rgb + ')'
|
||||
'Links' : 'rgb(' + linkColor.rgb + ')'
|
||||
'Hovered Links' : 'rgb(' + linkHColor.rgb + ')'
|
||||
'Navigation Links' : 'rgb(' + textColor.rgb + ')'
|
||||
'Hovered Navigation Links' : 'rgb(' + linkHColor.rgb + ')'
|
||||
'Subjects' : 'rgb(' + titleColor.rgb + ')'
|
||||
'Names' : 'rgb(' + nameColor.rgb + ')'
|
||||
'Sage' : 'rgb(' + sageColor.rgb + ')'
|
||||
'Tripcodes' : 'rgb(' + tripColor.rgb + ')'
|
||||
'Emails' : 'rgb(' + linkColor.rgb + ')'
|
||||
'Post Numbers' : 'rgb(' + linkColor.rgb + ')'
|
||||
'Text' : 'rgb(' + textColor.rgb + ')'
|
||||
'Backlinks' : 'rgb(' + linkColor.rgb + ')'
|
||||
'Greentext' : 'rgb(' + quoteColor.rgb + ')'
|
||||
'Board Title' : 'rgb(' + textColor.rgb + ')'
|
||||
'Timestamps' : 'rgb(' + timeColor.rgb + ')'
|
||||
'Inputs' : 'rgb(' + textColor.rgb + ')'
|
||||
'Warnings' : 'rgb(' + sageColor.rgb + ')'
|
||||
'Shadow Color' : 'rgba(0,0,0,0.1)'
|
||||
'Custom CSS' : """<%= grunt.file.read('css/theme.oneechan.css') %>""" + (imported.customCSS or '') }
|
||||
'Background Image' : "url('#{imported.bgImg or ''}')"
|
||||
'Background Attachment' : "#{bgRPA[3] or ''}"
|
||||
'Background Position' : "#{bgRPA[1] or ''} #{bgRPA[2] or ''}"
|
||||
'Background Repeat' : "#{bgRPA[0] or ''}"
|
||||
'Background Color' : "rgb(#{bgColor.rgb})"
|
||||
'Dialog Background' : "rgba(#{mainColor.rgb},.98)"
|
||||
'Dialog Border' : "rgb(#{brderColor.rgb})"
|
||||
'Thread Wrapper Background' : "rgba(0,0,0,0)"
|
||||
'Thread Wrapper Border' : "rgba(0,0,0,0)"
|
||||
'Reply Background' : "rgba(#{mainColor.rgb},#{imported.replyOp})"
|
||||
'Reply Border' : "rgb(#{brderColor.rgb})"
|
||||
'Highlighted Reply Background': "rgba(#{mainColor.shiftRGB(4, true)}, #{imported.replyOp})"
|
||||
'Highlighted Reply Border' : "rgb(#{linkColor.rgb})"
|
||||
'Backlinked Reply Outline' : "rgb(#{linkColor.rgb})"
|
||||
'Checkbox Background' : "rgba(#{inputColor.rgb}, #{imported.replyOp})"
|
||||
'Checkbox Border' : "rgb(#{inputbColor.rgb})"
|
||||
'Checkbox Checked Background' : "rgb(#{inputColor.rgb})"
|
||||
'Input Background' : "rgba(#{inputColor.rgb}, #{imported.replyOp})"
|
||||
'Input Border' : "rgb(#{inputbColor.rgb})"
|
||||
'Hovered Input Background' : "rgba(#{inputColor.hover}, #{imported.replyOp})"
|
||||
'Hovered Input Border' : "rgb(#{inputbColor.rgb})"
|
||||
'Focused Input Background' : "rgba(#{inputColor.hover}, #{imported.replyOp})"
|
||||
'Focused Input Border' : "rgb(#{inputbColor.rgb})"
|
||||
'Buttons Background' : "rgba(#{inputColor.rgb}, #{imported.replyOp})"
|
||||
'Buttons Border' : "rgb(#{inputbColor.rgb})"
|
||||
'Navigation Background' : "rgba(#{bgColor.rgb}, 0.8)"
|
||||
'Navigation Border' : "rgb(#{mainColor.rgb})"
|
||||
'Quotelinks' : "rgb(#{linkColor.rgb})"
|
||||
'Links' : "rgb(#{linkColor.rgb})"
|
||||
'Hovered Links' : "rgb(#{linkHColor.rgb})"
|
||||
'Navigation Links' : "rgb(#{textColor.rgb})"
|
||||
'Hovered Navigation Links' : "rgb(#{linkHColor.rgb})"
|
||||
'Subjects' : "rgb(#{titleColor.rgb})"
|
||||
'Names' : "rgb(#{nameColor.rgb})"
|
||||
'Sage' : "rgb(#{sageColor.rgb})"
|
||||
'Tripcodes' : "rgb(#{tripColor.rgb})"
|
||||
'Emails' : "rgb(#{linkColor.rgb})"
|
||||
'Post Numbers' : "rgb(#{linkColor.rgb})"
|
||||
'Text' : "rgb(#{textColor.rgb})"
|
||||
'Backlinks' : "rgb(#{linkColor.rgb})"
|
||||
'Greentext' : "rgb(#{quoteColor.rgb})"
|
||||
'Board Title' : "rgb(#{textColor.rgb})"
|
||||
'Timestamps' : "rgb(#{timeColor.rgb})"
|
||||
'Inputs' : "rgb(#{textColor.rgb})"
|
||||
'Warnings' : "rgb(#{sageColor.rgb})"
|
||||
'Shadow Color' : "rgba(0,0,0,0.1)"
|
||||
'Custom CSS' : """<%= grunt.file.read('css/theme.oneechan.css') %> #{imported.customCSS or ''}"""
|
||||
|
||||
else if origin == "SS"
|
||||
Themes[name] = {
|
||||
Themes[name] =
|
||||
'Author' : "Anonymous"
|
||||
'Author Tripcode' : "!.pC/AHOKAg"
|
||||
'Background Image' : 'url("' + (imported.bgImg or '') + '")'
|
||||
'Background Attachment' : bgRPA[3] or ''
|
||||
'Background Position' : ((bgRPA[1] + " ") or '') + (bgRPA[2] or '')
|
||||
'Background Repeat' : bgRPA[0] or ''
|
||||
'Background Color' : 'rgb(' + bgColor.rgb + ')'
|
||||
'Dialog Background' : 'rgba(' + mainColor.rgb + ',.98)'
|
||||
'Dialog Border' : 'rgb(' + brderColor.rgb + ')'
|
||||
'Thread Wrapper Background' : 'rgba(' + mainColor.rgb + ',.5)'
|
||||
'Thread Wrapper Border' : 'rgba(' + brderColor.rgb + ',.9)'
|
||||
'Reply Background' : 'rgba(' + mainColor.rgb + ',.9)'
|
||||
'Reply Border' : 'rgb(' + brderColor.rgb + ')'
|
||||
'Highlighted Reply Background': 'rgba(' + mainColor.shiftRGB(4, true) + ',.9)'
|
||||
'Highlighted Reply Border' : 'rgb(' + linkColor.rgb + ')'
|
||||
'Backlinked Reply Outline' : 'rgb(' + linkColor.rgb + ')'
|
||||
'Checkbox Background' : 'rgba(' + inputColor.rgb + ',.9)'
|
||||
'Checkbox Border' : 'rgb(' + inputbColor.rgb + ')'
|
||||
'Checkbox Checked Background' : 'rgb(' + inputColor.rgb + ')'
|
||||
'Input Background' : 'rgba(' + inputColor.rgb + ',.9)'
|
||||
'Input Border' : 'rgb(' + inputbColor.rgb + ')'
|
||||
'Hovered Input Background' : 'rgba(' + inputColor.hover + ',.9)'
|
||||
'Hovered Input Border' : 'rgb(' + inputbColor.rgb + ')'
|
||||
'Focused Input Background' : 'rgba(' + inputColor.hover + ',.9)'
|
||||
'Focused Input Border' : 'rgb(' + inputbColor.rgb + ')'
|
||||
'Buttons Background' : 'rgba(' + inputColor.rgb + ',.9)'
|
||||
'Buttons Border' : 'rgb(' + inputbColor.rgb + ')'
|
||||
'Navigation Background' : 'rgba(' + bgColor.rgb + ',0.8)'
|
||||
'Navigation Border' : 'rgb(' + mainColor.rgb + ')'
|
||||
'Quotelinks' : 'rgb(' + linkColor.rgb + ')'
|
||||
'Links' : 'rgb(' + linkColor.rgb + ')'
|
||||
'Hovered Links' : 'rgb(' + linkHColor.rgb + ')'
|
||||
'Navigation Links' : 'rgb(' + textColor.rgb + ')'
|
||||
'Hovered Navigation Links' : 'rgb(' + linkHColor.rgb + ')'
|
||||
'Subjects' : 'rgb(' + titleColor.rgb + ')'
|
||||
'Names' : 'rgb(' + nameColor.rgb + ')'
|
||||
'Sage' : 'rgb(' + sageColor.rgb + ')'
|
||||
'Tripcodes' : 'rgb(' + tripColor.rgb + ')'
|
||||
'Emails' : 'rgb(' + linkColor.rgb + ')'
|
||||
'Post Numbers' : 'rgb(' + linkColor.rgb + ')'
|
||||
'Text' : 'rgb(' + textColor.rgb + ')'
|
||||
'Backlinks' : 'rgb(' + linkColor.rgb + ')'
|
||||
'Greentext' : 'rgb(' + quoteColor.rgb + ')'
|
||||
'Board Title' : 'rgb(' + textColor.rgb + ')'
|
||||
'Timestamps' : 'rgb(' + timeColor.rgb + ')'
|
||||
'Inputs' : 'rgb(' + textColor.rgb + ')'
|
||||
'Warnings' : 'rgb(' + sageColor.rgb + ')'
|
||||
'Shadow Color' : 'rgba(0,0,0,0.1)'
|
||||
'Custom CSS' : """<%= grunt.file.read('css/theme.4chanss.css') %>""" + (imported.customCSS or '') }
|
||||
'Background Image' : "url('#{imported.bgImg or ''}')"
|
||||
'Background Attachment' : "#{bgRPA[3] or ''}"
|
||||
'Background Position' : "#{bgRPA[1] or ''} #{bgRPA[2] or ''}"
|
||||
'Background Repeat' : "#{bgRPA[0] or ''}"
|
||||
'Background Color' : "rgb(#{bgColor.rgb})"
|
||||
'Dialog Background' : "rgba(#{mainColor.rgb}, .98)"
|
||||
'Dialog Border' : "rgb(#{brderColor.rgb})"
|
||||
'Thread Wrapper Background' : "rgba(#{mainColor.rgb}, .5)"
|
||||
'Thread Wrapper Border' : "rgba(#{brderColor.rgb}, .9)"
|
||||
'Reply Background' : "rgba(#{mainColor.rgb}, .9)"
|
||||
'Reply Border' : "rgb(#{brderColor.rgb})"
|
||||
'Highlighted Reply Background': "rgba(#{mainColor.shiftRGB(4, true)}, .9)"
|
||||
'Highlighted Reply Border' : "rgb(#{linkColor.rgb})"
|
||||
'Backlinked Reply Outline' : "rgb(#{linkColor.rgb})"
|
||||
'Checkbox Background' : "rgba(#{inputColor.rgb}, .9)"
|
||||
'Checkbox Border' : "rgb(#{inputbColor.rgb})"
|
||||
'Checkbox Checked Background' : "rgb(#{inputColor.rgb})"
|
||||
'Input Background' : "rgba(#{inputColor.rgb}, .9)"
|
||||
'Input Border' : "rgb(#{inputbColor.rgb})"
|
||||
'Hovered Input Background' : "rgba(#{inputColor.hover}, .9)"
|
||||
'Hovered Input Border' : "rgb(#{inputbColor.rgb})"
|
||||
'Focused Input Background' : "rgba(#{inputColor.hover}, .9)"
|
||||
'Focused Input Border' : "rgb(#{inputbColor.rgb})"
|
||||
'Buttons Background' : "rgba(#{inputColor.rgb}, .9)"
|
||||
'Buttons Border' : "rgb(#{inputbColor.rgb})"
|
||||
'Navigation Background' : "rgba(#{bgColor.rgb}', 0.8)"
|
||||
'Navigation Border' : "rgb(#{mainColor.rgb})"
|
||||
'Quotelinks' : "rgb(#{linkColor.rgb})"
|
||||
'Links' : "rgb(#{linkColor.rgb})"
|
||||
'Hovered Links' : "rgb(#{linkHColor.rgb})"
|
||||
'Navigation Links' : "rgb(#{textColor.rgb})"
|
||||
'Hovered Navigation Links' : "rgb(#{linkHColor.rgb})"
|
||||
'Subjects' : "rgb(#{titleColor.rgb})"
|
||||
'Names' : "rgb(#{nameColor.rgb})"
|
||||
'Sage' : "rgb(#{sageColor.rgb})"
|
||||
'Tripcodes' : "rgb(#{tripColor.rgb})"
|
||||
'Emails' : "rgb(#{linkColor.rgb})"
|
||||
'Post Numbers' : "rgb(#{linkColor.rgb})"
|
||||
'Text' : "rgb(#{textColor.rgb})"
|
||||
'Backlinks' : "rgb(#{linkColor.rgb})"
|
||||
'Greentext' : "rgb(#{quoteColor.rgb})"
|
||||
'Board Title' : "rgb(#{textColor.rgb})"
|
||||
'Timestamps' : "rgb(#{timeColor.rgb})"
|
||||
'Inputs' : "rgb(#{textColor.rgb})"
|
||||
'Warnings' : "rgb(#{sageColor.rgb})"
|
||||
'Shadow Color' : "rgba(0,0,0,0.1)"
|
||||
'Custom CSS' : """<%= grunt.file.read('css/theme.4chanss.css') %> #{imported.customCSS or ''}"""
|
||||
|
||||
else if origin == 'appchan'
|
||||
Themes[name] = imported
|
||||
@ -1752,7 +1756,7 @@ ThemeTools =
|
||||
$.set 'userThemes', userThemes
|
||||
alert "Theme \"#{name}\" imported!"
|
||||
$.rm $("#themes", d.body)
|
||||
Options.themeTab()
|
||||
Settings.open 'themes'
|
||||
|
||||
reader.readAsText(file)
|
||||
|
||||
@ -1775,6 +1779,6 @@ ThemeTools =
|
||||
|
||||
close: ->
|
||||
Conf['editMode'] = false
|
||||
$.rm $("#themeConf", d.body)
|
||||
$.rm $id 'themeConf'
|
||||
Style.addStyle()
|
||||
Options.dialog("theme")
|
||||
Settings.open 'themes'
|
||||
@ -54,20 +54,20 @@ Settings =
|
||||
if Conf['editMode'] is "theme"
|
||||
if confirm "Opening the options dialog will close and discard any theme changes made with the theme editor."
|
||||
ThemeTools.close()
|
||||
else
|
||||
return
|
||||
return
|
||||
|
||||
if Conf['editMode'] is "mascot"
|
||||
if confirm "Opening the options dialog will close and discard any mascot changes made with the mascot editor."
|
||||
MascotTools.close()
|
||||
else
|
||||
return
|
||||
return
|
||||
|
||||
return if Settings.dialog
|
||||
return if Settings.overlay
|
||||
$.event 'CloseMenu'
|
||||
|
||||
html = """
|
||||
<div id=appchanx-settings class=dialog>
|
||||
Settings.dialog = dialog = $.el 'div',
|
||||
id: 'appchanx-settings'
|
||||
class: 'dialog'
|
||||
innerHTML: """
|
||||
<nav>
|
||||
<div class=sections-list></div>
|
||||
<div class=credits>
|
||||
@ -78,13 +78,10 @@ Settings =
|
||||
</div>
|
||||
</nav>
|
||||
<hr>
|
||||
<div class=section-container><section></section></div>
|
||||
</div>
|
||||
"""
|
||||
<div class=section-container><section></section></div>"""
|
||||
|
||||
Settings.dialog = overlay = $.el 'div',
|
||||
Settings.overlay = overlay = $.el 'div',
|
||||
id: 'overlay'
|
||||
innerHTML: html
|
||||
|
||||
links = []
|
||||
for section in Settings.sections
|
||||
@ -95,22 +92,23 @@ Settings =
|
||||
$.on link, 'click', Settings.openSection.bind section
|
||||
links.push link
|
||||
sectionToOpen = link if section.title is openSection
|
||||
$.add $('.sections-list', overlay), links
|
||||
$.add $('.sections-list', dialog), links
|
||||
(if sectionToOpen then sectionToOpen else links[0]).click()
|
||||
|
||||
$.on $('.close', overlay), 'click', Settings.close
|
||||
$.on overlay, 'click', Settings.close
|
||||
$.on overlay.firstElementChild, 'click', (e) -> e.stopPropagation()
|
||||
$.on $('.close', dialog), 'click', Settings.close
|
||||
$.on overlay, 'click', Settings.close
|
||||
|
||||
d.body.style.width = "#{d.body.clientWidth}px"
|
||||
$.addClass d.body, 'unscroll'
|
||||
$.add d.body, overlay
|
||||
$.add d.body, [overlay, dialog]
|
||||
|
||||
close: ->
|
||||
return unless Settings.dialog
|
||||
d.body.style.removeProperty 'width'
|
||||
$.rmClass d.body, 'unscroll'
|
||||
$.rm Settings.overlay
|
||||
$.rm Settings.dialog
|
||||
delete Settings.overlay
|
||||
delete Settings.dialog
|
||||
|
||||
sections: []
|
||||
@ -152,8 +150,9 @@ Settings =
|
||||
for key, arr of obj
|
||||
description = arr[1]
|
||||
div = $.el 'div',
|
||||
innerHTML: "<label><input type=checkbox name='#{key}'>#{key}</label><span class=description>: #{description}</span>"
|
||||
innerHTML: "<label><input type=checkbox name='#{key}'>#{key}</label><span class=description>#{description}</span>"
|
||||
input = $ 'input', div
|
||||
$.on $('label', div), 'mouseover', Settings.mouseover
|
||||
$.on input, 'change', $.cb.checked
|
||||
items[key] = Conf[key]
|
||||
inputs[key] = input
|
||||
@ -551,6 +550,7 @@ Settings =
|
||||
$.on input, 'keydown', Settings.keybind
|
||||
Rice.nodes tr
|
||||
$.add tbody, tr
|
||||
|
||||
$.get items, (items) ->
|
||||
for key, val of items
|
||||
inputs[key].value = val
|
||||
@ -565,7 +565,9 @@ Settings =
|
||||
$.cb.value.call @
|
||||
|
||||
style: (section) ->
|
||||
nodes = []
|
||||
nodes = $.frag()
|
||||
items = {}
|
||||
inputs = {}
|
||||
|
||||
for key, obj of Config.style
|
||||
|
||||
@ -582,44 +584,51 @@ Settings =
|
||||
|
||||
if type is 'text'
|
||||
|
||||
div.innerHTML = "<div class=option><span class=optionlabel>#{key}</span></div><div style='display:none;'>#{description}</div><div class=option><input name='#{key}' style=width: 100%></div>"
|
||||
input = $ "input[name='#{key}']", div
|
||||
div.innerHTML = "<div class=option><span class=optionlabel>#{key}</span></div><div class=description>#{description}</div><div class=option><input name='#{key}' style=width: 100%></div>"
|
||||
input = $ "input", div
|
||||
|
||||
else
|
||||
|
||||
html = "<div class=option><span class=optionlabel>#{key}</span></div><div style='display:none;'>#{description}</div><div class=option><select name='#{key}'></div>"
|
||||
for name, val in type
|
||||
html += "<option value='#{val}'>#{name}</option>"
|
||||
html += "</select>"
|
||||
html = "<div class=option><span class=optionlabel>#{key}</span></div><div class=description>#{description}</div><div class=option><select name='#{key}'>"
|
||||
for name in type
|
||||
html += "<option value='#{name}'>#{name}</option>"
|
||||
html += "</select></div>"
|
||||
div.innerHTML = html
|
||||
input = $ "select", div
|
||||
|
||||
input.cb = 'value'
|
||||
|
||||
else
|
||||
|
||||
div.innerHTML = "<div class=option><label><input type=checkbox name='#{key}'>#{key}</label></div><span style='display:none;'>#{description}</span>"
|
||||
input = $ 'input', div
|
||||
input.cb = 'checked'
|
||||
input.bool = true
|
||||
|
||||
Settings.sandbox input, key, value, input.cb
|
||||
items[key] = Conf[key]
|
||||
inputs[key] = input
|
||||
|
||||
$.on $('.option', div), 'mouseover', Settings.mouseover
|
||||
|
||||
$.on input, 'change', ->
|
||||
$.cb[@cb].call @
|
||||
Style.addStyle()
|
||||
$.on input, 'change', Settings.change
|
||||
|
||||
$.add fs, div
|
||||
$.add nodes, fs
|
||||
|
||||
Rice.nodes fs
|
||||
nodes.push fs
|
||||
$.get items, (items) ->
|
||||
for key, val of items
|
||||
input = inputs[key]
|
||||
if input.bool
|
||||
input.checked = val
|
||||
Rice.checkbox input
|
||||
else
|
||||
input.value = val
|
||||
if input.nodeName is 'SELECT'
|
||||
Rice.select input
|
||||
|
||||
$.add section, nodes
|
||||
|
||||
sandbox: (input, key, value, inputtype) ->
|
||||
$.get key, value, (item) ->
|
||||
input[inputtype] = item[key]
|
||||
$.add section, nodes
|
||||
|
||||
|
||||
change: ->
|
||||
$.cb[if @bool then 'checked' else 'value'].call @
|
||||
Style.addStyle()
|
||||
|
||||
themes: (section, mode) ->
|
||||
if typeof mode isnt 'string'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user