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

Some rethinking of how to handle theme and mascots sections.

Browse Source
This commit is contained in:
Zixaphir 2013-05-09 00:46:12 -07:00
parent df47d68235
commit 31c3af58aa
13 changed files with 299 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
LICENSE
View File

@ -1,5 +1,5 @@
/* /*
* appchan x - Version 2.0.1 - 2013-05-08 * appchan x - Version 2.0.1 - 2013-05-09
* *
* Licensed under the MIT license. * Licensed under the MIT license.
* https://github.com/zixaphir/appchan-x/blob/master/LICENSE * https://github.com/zixaphir/appchan-x/blob/master/LICENSE

81
builds/appchan-x.js
View File

File diff suppressed because one or more lines are too long

81
builds/appchan-x.user.js
View File

File diff suppressed because one or more lines are too long

81
builds/crx/script.js
View File

File diff suppressed because one or more lines are too long

116
src/General/Settings.coffee
View File

@ -544,6 +544,8 @@ Settings =
keys.sort() keys.sort()
cb = Settings.cb.theme cb = Settings.cb.theme
mouseover = -> @style.color = "#{@dataset.hover}"
mouseout = -> @style.color = "#{@dataset.color}"
if mode is "default" if mode is "default"
@ -555,68 +557,26 @@ Settings =
div = $.el 'div', div = $.el 'div',
className: "theme #{if name is Conf['theme'] then 'selectedtheme' else ''}" className: "theme #{if name is Conf['theme'] then 'selectedtheme' else ''}"
id: name id: name
innerHTML: " innerHTML: """<%= grunt.file.read('src/General/html/Settings/Theme.html').replace(/>\s+</g, '><').trim() %>"""
<div style='cursor: pointer; position: relative; margin-bottom: 2px; width: 100% !important; box-shadow: none !important; background:#{theme['Reply Background']}!important;border:1px solid #{theme['Reply Border']}!important;color:#{theme['Text']}!important'>
<div>
<div style='cursor: pointer; width: 9px; height: 9px; margin: 2px 3px; display: inline-block; vertical-align: bottom; background: #{theme['Checkbox Background']}; border: 1px solid #{theme['Checkbox Border']};'></div>
<span style='color:#{theme['Subjects']}!important; font-weight: 600 !important'>
#{name}
</span>
<span style='color:#{theme['Names']}!important; font-weight: 600 !important'>
#{theme['Author']}
</span>
<span style='color:#{theme['Sage']}!important'>
(SAGE)
</span>
<span style='color:#{theme['Tripcodes']}!important'>
#{theme['Author Tripcode']}
</span>
<time style='color:#{theme['Timestamps']}'>
20XX.01.01 12:00
</time>
<a onmouseout='this.setAttribute(&quot;style&quot;,&quot;color:#{theme['Post Numbers']}!important&quot;)' onmouseover='this.setAttribute(&quot;style&quot;,&quot;color:#{theme['Hovered Links']}!important;&quot;)' style='color:#{theme['Post Numbers']}!important;' href='javascript:;'>
No.27583594
</a>
<a onmouseout='this.setAttribute(&quot;style&quot;,&quot;color:#{theme['Backlinks']}!important;&quot;)' onmouseover='this.setAttribute(&quot;style&quot;,&quot;color:#{theme['Hovered Links']}!important;&quot;)' style='color:#{theme['Backlinks']}!important;' href='javascript:;' name='#{name}' class=edit>
&gt;&gt;edit
</a>
<a onmouseout='this.setAttribute(&quot;style&quot;,&quot;color:#{theme['Backlinks']}!important;&quot;)' onmouseover='this.setAttribute(&quot;style&quot;,&quot;color:#{theme['Hovered Links']}!important;&quot;)' style='color:#{theme['Backlinks']}!important;' href='javascript:;' name='#{name}' class=export>
&gt;&gt;export
</a>
<a onmouseout='this.setAttribute(&quot;style&quot;,&quot;color:#{theme['Backlinks']}!important;&quot;)' onmouseover='this.setAttribute(&quot;style&quot;,&quot;color:#{theme['Hovered Links']}!important;&quot;)' style='color:#{theme['Backlinks']}!important;' href='javascript:;' name='#{name}' class=delete>
&gt;&gt;delete
</a>
</div>
<blockquote style='margin: 0; padding: 12px 40px 12px 38px'>
<a style='color:#{theme['Quotelinks']}!important; text-shadow: none;'>
&gt;&gt;27582902
</a>
<br>
Post content is right here.
</blockquote>
<h1 style='color: #{theme['Text']}'>
Selected
</h1>
</div>"
div.style.backgroundColor = theme['Background Color'] div.style.backgroundColor = theme['Background Color']
for a in $$ 'a[data-color]', div
a.style.color = "#{a.dataset.color}"
$.on a, 'mouseover', mouseover
$.on a, 'mouseout', mouseout
$.on $('a.edit', div), 'click', cb.edit $.on $('a.edit', div), 'click', cb.edit
$.on $('a.export', div), 'click', cb.export $.on $('a.export', div), 'click', cb.export
$.on $('a.delete', div), 'click', cb.delete $.on $('a.delete', div), 'click', cb.delete
$.on div, 'click', cb.select
$.on div, 'click', cb.select
$.add suboptions, div $.add suboptions, div
div = $.el 'div', div = $.el 'div',
id: 'addthemes' id: 'addthemes'
innerHTML: " innerHTML: """<%= grunt.file.read('src/General/html/Settings/Batch-Theme.html').replace(/>\s+</g, '><').trim() %>"""
<a id=newtheme href='javascript:;'>New Theme</a> /
<a id=import href='javascript:;'>Import Theme</a><input id=importbutton type=file hidden> /
<a id=SSimport href='javascript:;'>Import from 4chan SS</a><input id=SSimportbutton type=file hidden> /
<a id=OCimport href='javascript:;'>Import from Oneechan</a><input id=OCimportbutton type=file hidden> /
<a id=tUndelete href='javascript:;'>Undelete Theme</a>
"
$.on $("#newtheme", div), 'click', -> $.on $("#newtheme", div), 'click', ->
ThemeTools.init "untitled" ThemeTools.init "untitled"
@ -657,24 +617,7 @@ Settings =
div = $.el 'div', div = $.el 'div',
id: name id: name
className: theme className: theme
innerHTML: " innerHTML: """<%= grunt.file.read('src/General/html/Settings/Deleted-Theme.html').replace(/>\s+</g, '><').trim() %>"""
<div style='cursor: pointer; position: relative; margin-bottom: 2px; width: 100% !important; box-shadow: none !important; background:#{theme['Reply Background']}!important;border:1px solid #{theme['Reply Border']}!important;color:#{theme['Text']}!important'>
<div style='padding: 3px 0px 0px 8px;'>
<span style='color:#{theme['Subjects']}!important; font-weight: 600 !important'>#{name}</span>
<span style='color:#{theme['Names']}!important; font-weight: 600 !important'>#{theme['Author']}</span>
<span style='color:#{theme['Sage']}!important'>(SAGE)</span>
<span style='color:#{theme['Tripcodes']}!important'>#{theme['Author Tripcode']}</span>
<time style='color:#{theme['Timestamps']}'>20XX.01.01 12:00</time>
<a onmouseout='this.setAttribute(&quot;style&quot;,&quot;color:#{theme['Post Numbers']}!important&quot;)' onmouseover='this.setAttribute(&quot;style&quot;,&quot;color:#{theme['Hovered Links']}!important&quot;)' style='color:#{theme['Post Numbers']}!important;' href='javascript:;'>No.27583594</a>
</div>
<blockquote style='margin: 0; padding: 12px 40px 12px 38px'>
<a style='color:#{theme['Quotelinks']}!important; text-shadow: none;'>
&gt;&gt;27582902
</a>
<br>
I forgive you for using VLC to open me. ;__;
</blockquote>
</div>"
$.on div, 'click', cb.restore $.on div, 'click', cb.restore
@ -735,6 +678,18 @@ Settings =
keys.sort() keys.sort()
if mode is 'default' if mode is 'default'
mascotoptions = $.el 'div',
id: 'mascot-options'
innerHTML: """<a class=edit name='#{name}' href='javascript:;'>Edit</a><a class=delete name='#{name}' href='javascript:;'>Delete</a><a class=export name='#{name}' href='javascript:;'>Export</a>"""
$.on $('.edit', mascotoptions), 'click', cb.edit
$.on $('.delete', mascotoptions), 'click', cb.delete
$.on $('.export', mascotoptions), 'click', cb.export
addoptions = ->
return if mascotoptions.parentElement is @
$.add @, mascotoptions
# Create a keyed Unordered List Element and hide option for each mascot category. # Create a keyed Unordered List Element and hide option for each mascot category.
nodes = {} nodes = {}
for name in MascotTools.categories for name in MascotTools.categories
@ -762,11 +717,8 @@ Settings =
id: name id: name
innerHTML: "<%= grunt.file.read('src/General/html/Settings/Mascot.html') %>" innerHTML: "<%= grunt.file.read('src/General/html/Settings/Mascot.html') %>"
$.on $('.edit', mascotEl), 'click', cb.edit
$.on $('.delete', mascotEl), 'click', cb.delete
$.on $('.export', mascotEl), 'click', cb.export
$.on mascotEl, 'click', cb.select $.on mascotEl, 'click', cb.select
$.on mascotEl, 'mouseover', addoptions
if MascotTools.categories.contains mascot.category if MascotTools.categories.contains mascot.category
nodes[mascot.category].push mascotEl nodes[mascot.category].push mascotEl
@ -882,25 +834,27 @@ Settings =
edit: (e) -> edit: (e) ->
e.stopPropagation() e.stopPropagation()
MascotTools.dialog @name MascotTools.dialog @parentElement.parentElement.id
Settings.close() Settings.close()
delete: (e) -> delete: (e) ->
e.stopPropagation() e.stopPropagation()
if confirm "Are you sure you want to delete \"#{@name}\"?" name = @parentElement.parentElement.id
if Conf['mascot'] is @name if confirm "Are you sure you want to delete \"#{name}\"?"
if Conf['mascot'] is name
MascotTools.init() MascotTools.init()
for type in ["Enabled Mascots", "Enabled Mascots sfw", "Enabled Mascots nsfw"] for type in ["Enabled Mascots", "Enabled Mascots sfw", "Enabled Mascots nsfw"]
Conf[type].remove @name Conf[type].remove name
$.set type, Conf[type] $.set type, Conf[type]
Conf["Deleted Mascots"].push @name Conf["Deleted Mascots"].push name
$.set "Deleted Mascots", Conf["Deleted Mascots"] $.set "Deleted Mascots", Conf["Deleted Mascots"]
$.rm $.id @name $.rm $.id name
export: (e) -> export: (e) ->
e.stopPropagation() e.stopPropagation()
exportMascot = Mascots[@name] name = @parentElement.parentElement.id
exportMascot['Mascot'] = @name exportMascot = Mascots[name]
exportMascot['Mascot'] = name
exportedMascot = "data:application/json," + encodeURIComponent(JSON.stringify(exportMascot)) exportedMascot = "data:application/json," + encodeURIComponent(JSON.stringify(exportMascot))
if window.open exportedMascot, "_blank" if window.open exportedMascot, "_blank"

19
src/General/css/layout.css
View File

@ -1614,10 +1614,14 @@ article li {
bottom: 1.7em; bottom: 1.7em;
left: 0; left: 0;
} }
#themecontent {
top: 1.8em;
}
.mAlign { .mAlign {
height: 250px; height: 250px;
vertical-align: middle; vertical-align: bottom;
display: table-cell; display: table-cell;
line-height: 0;
} }
#save, #save,
.stylesettings { .stylesettings {
@ -1701,24 +1705,25 @@ article li {
max-width: 200px; max-width: 200px;
} }
.mascotname, .mascotname,
.mascotoptions { #mascot-options {
#{Style.sizing}: border-box;
padding: 0; padding: 0;
width: 100%; width: 100%;
} }
.mascot .mascotoptions { #mascot-options {
opacity: 0; opacity: 0;
#{agent}transition: opacity .3s linear; #{agent}transition: opacity .3s linear;
} }
.mascot:hover .mascotoptions { .mascot:hover #mascot-options {
opacity: 1; opacity: 1;
} }
.mascotoptions { #mascot-options {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
left: 0; left: 0;
} }
.mascotoptions a { #mascot-options a {
display: inline-block; display: inline-block;
width: 33%; width: 33%;
} }

2
src/General/css/theme.css
View File

@ -10,7 +10,7 @@
box-shadow: 0 0 5px #{theme["Reply Border"]}; box-shadow: 0 0 5px #{theme["Reply Border"]};
} }
.mascotname, .mascotname,
.mascotoptions { #mascot-options {
background: #{theme["Dialog Background"]}; background: #{theme["Dialog Background"]};
border: 1px solid #{theme["Buttons Border"]}; border: 1px solid #{theme["Buttons Border"]};
} }

12
src/General/html/Settings/Batch-Theme.html Normal file
View File

@ -0,0 +1,12 @@
<a id=newtheme href='javascript:;'>New Theme</a>
/
<a id=import href='javascript:;'>Import Theme</a>
<input id=importbutton type=file hidden>
/
<a id=SSimport href='javascript:;'>Import from 4chan SS</a>
<input id=SSimportbutton type=file hidden>
/
<a id=OCimport href='javascript:;'>Import from Oneechan</a>
<input id=OCimportbutton type=file hidden>
/
<a id=tUndelete href='javascript:;'>Undelete Theme</a>

29
src/General/html/Settings/Deleted-Theme.html Normal file
View File

@ -0,0 +1,29 @@
<div style='cursor: pointer; position: relative; margin-bottom: 2px; width: 100% ; box-shadow: none ; background:#{theme['Reply Background']};border:1px solid #{theme['Reply Border']};color:#{theme['Text']}'>
<div style='padding: 3px 0px 0px 8px;'>
<span style='color:#{theme['Subjects']}; font-weight: 600 '>
#{name}
</span>
<span style='color:#{theme['Names']}; font-weight: 600 '>
#{theme['Author']}
</span>
<span style='color:#{theme['Sage']}'>
(SAGE)
</span>
<span style='color:#{theme['Tripcodes']}'>
#{theme['Author Tripcode']}
</span>
<time style='color:#{theme['Timestamps']}'>
20XX.01.01 12:00
</time>
<a data-color='#{theme['Post Numbers']}' data-hover='#{theme['Hovered Links']}'>
No.27583594
</a>
</div>
<blockquote style='margin: 0; padding: 12px 40px 12px 38px'>
<a data-color='#{theme['Quotelinks']}' data-hover='#{theme['Hovered Links']}' style='text-shadow: none;'>
&gt;&gt;27582902
</a>
<br>
I forgive you for using VLC to open me. ;__;
</blockquote>
</div>

3
src/General/html/Settings/Mascot.html
View File

@ -1,3 +1,2 @@
<div class='mascotname'>#{name.replace /_/g, " "}</div> <div class='mascotname'>#{name.replace /_/g, " "}</div>
<div class='mascotcontainer'><div class='mAlign #{mascot.category}'><img class=mascotimg src='#{if Array.isArray(mascot.image) then (if Style.lightTheme then mascot.image[1] else mascot.image[0]) else mascot.image}'></div></div> <div class='mascotcontainer'><div class='mAlign #{mascot.category}'><img class=mascotimg src='#{if Array.isArray(mascot.image) then (if Style.lightTheme then mascot.image[1] else mascot.image[0]) else mascot.image}'></div></div>
<div class='mascotoptions'><a class=edit name='#{name}' href='javascript:;'>Edit</a><a class=delete name='#{name}' href='javascript:;'>Delete</a><a class=export name='#{name}' href='javascript:;'>Export</a></div>

42
src/General/html/Settings/Theme.html Normal file
View File

@ -0,0 +1,42 @@
<div style='cursor: pointer; position: relative; margin-bottom: 2px; width: 100% ; box-shadow: none ; background:#{theme['Reply Background']};border:1px solid #{theme['Reply Border']};color:#{theme['Text']}'>
<div>
<div style='cursor: pointer; width: 9px; height: 9px; margin: 2px 3px; display: inline-block; vertical-align: bottom; background: #{theme['Checkbox Background']}; border: 1px solid #{theme['Checkbox Border']};'></div>
<span style='color:#{theme['Subjects']}; font-weight: 600 '>
#{name}
</span>
<span style='color:#{theme['Names']}; font-weight: 600 '>
#{theme['Author']}
</span>
<span style='color:#{theme['Sage']}'>
(SAGE)
</span>
<span style='color:#{theme['Tripcodes']}'>
#{theme['Author Tripcode']}
</span>
<time style='color:#{theme['Timestamps']}'>
20XX.01.01 12:00
</time>
<a data-color='#{theme['Post Numbers']}' data-hover='#{theme['Hovered Links']}'>
No.27583594
</a>
<a data-color='#{theme['Backlinks']}' data-hover='#{theme['Hovered Links']}' name='#{name}' class=edit>
&gt;&gt;edit
</a>
<a data-color='#{theme['Backlinks']}' data-hover='#{theme['Hovered Links']}' name='#{name}' class=export>
&gt;&gt;export
</a>
<a data-color='#{theme['Backlinks']}' data-hover='#{theme['Hovered Links']}' name='#{name}' class=delete>
&gt;&gt;delete
</a>
</div>
<blockquote style='margin: 0; padding: 12px 40px 12px 38px'>
<a data-color='#{theme['Quotelinks']}' data-hover='#{theme['Hovered Links']}' style='text-shadow: none;'>
&gt;&gt;27582902
</a>
<br>
Post content is right here.
</blockquote>
<h1 style='color: #{theme['Text']}'>
Selected
</h1>
</div>

4
src/Theming/Mascots.coffee
View File

@ -224,7 +224,7 @@ MascotTools =
$.on input, 'blur', -> $.on input, 'blur', ->
@value = @value.replace /[^a-z-_0-9]/ig, "_" @value = @value.replace /[^a-z-_0-9]/ig, "_"
unless /^[a-z]/i.test @value if (@value isnt "") and !/^[a-z]/i.test @value
return alert "Mascot names must start with a letter." return alert "Mascot names must start with a letter."
editMascot[@name] = @value editMascot[@name] = @value
MascotTools.addMascot editMascot MascotTools.addMascot editMascot
@ -249,7 +249,7 @@ MascotTools =
optionHTML = "<div class=optionlabel>#{item[0]}</div><div class=option><select name='#{name}' value='#{value}'><br>" optionHTML = "<div class=optionlabel>#{item[0]}</div><div class=option><select name='#{name}' value='#{value}'><br>"
for option in item[3] for option in item[3]
optionHTML = optionHTML + "<option value=\"#{option}\">#{option}</option>" optionHTML = optionHTML + "<option value=\"#{option}\">#{option}</option>"
optionHTML = optionHTML + "</select>" optionHTML = optionHTML + "</select></div>"
div = $.el 'div', div = $.el 'div',
className: "mascotvar" className: "mascotvar"
innerHTML: optionHTML innerHTML: optionHTML

4
src/Theming/Themes.coffee
View File

@ -96,7 +96,7 @@ ThemeTools =
<input class='field name' name='Author' placeholder='Author' value='#{editTheme['Author']}'> <input class='field name' name='Author' placeholder='Author' value='#{editTheme['Author']}'>
<input class='field postertrip' name='Author Tripcode' placeholder='Author Tripcode' value='#{editTheme['Author Tripcode']}'>" <input class='field postertrip' name='Author Tripcode' placeholder='Author Tripcode' value='#{editTheme['Author Tripcode']}'>"
#Setup inputs that are not generated from the layout variable. # Setup inputs that are not generated from the layout variable.
for input in $$("input", header) for input in $$("input", header)
$.on input, 'blur', -> $.on input, 'blur', ->
editTheme[@name] = @value editTheme[@name] = @value
@ -155,7 +155,7 @@ ThemeTools =
toggle2 = false toggle2 = false
len = @value.length len = @value.length
unless len > 1000 if len < 1000
i = 0 i = 0
while i < len while i < len
switch @value[i++] switch @value[i++]