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

This will do until I feel like putting some polish into this.

Browse Source
This commit is contained in:
Zixaphir 2013-05-31 08:21:20 -07:00
parent 5358f8a019
commit c56470ee28
10 changed files with 225 additions and 262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
builds/appchan-x.js
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

88
builds/crx/script.js
View File

File diff suppressed because one or more lines are too long

3
src/General/Settings.coffee
View File

@ -526,6 +526,9 @@ Settings =
else
input.value = val
$.on input, 'change', cb.style.value
if key is 'Icon Orientation'
$.on input, 'change', Style.iconPositions
Rice.nodes nodes
$.add section, nodes

42
src/General/css/icons.base.css
View File

@ -1,9 +1,8 @@
#navtopright .exlinksOptionsLink::after,
#appchanOptions,
body > div.navLinks > a:first-of-type::after,
#{if Conf['Slideout Watcher'] then '#watcher::after,' else ''}
#{if Conf['Announcements'] is 'slideout' then '#globalMessage::after,' else ''}
.slideout-watcher #watcher::after,
.announcements-slideout #globalMessage::after,
#boardNavDesktopFoot::after,
body > a[style="cursor: pointer; float: right;"]::after,
#img-controls,
@ -16,7 +15,28 @@ body > a[style="cursor: pointer; float: right;"]::after,
width: 15px;
height: 15px;
content: "";
opacity: #{if Conf['Invisible Icons'] then 0 else 0.5};
opacity: 0.5;
}
body::after {
content: "";
display: block;
position: fixed;
z-index: 5;
width: 18px;
height: 18px;
}
.invisible-icons #navtopright .exlinksOptionsLink::after,
.invisible-icons #appchanOptions,
.invisible-icons body > div.navLinks > a:first-of-type::after,
.invisible-icons.slideout-watcher #watcher::after,
.invisible-icons.announcements-slideout #globalMessage::after,
.invisible-icons #boardNavDesktopFoot::after,
.invisible-icons body > a[style="cursor: pointer; float: right;"]::after,
.invisible-icons #img-controls,
.invisible-icons #main-menu,
.invisible-icons #catalog::after,
.invisible-icons #fappeTyme {
opacity: 0;
}
#navtopright .exlinksOptionsLink,
body > div.navLinks > a:first-of-type,
@ -30,8 +50,8 @@ body > a[style="cursor: pointer; float: right;"],
}
#navtopright .exlinksOptionsLink:hover,
body > div.navLinks > a:first-of-type:hover,
#{if Conf['Slideout Watcher'] then '#watcher:hover,' else ''}
#{if Conf['Announcements'] is 'slideout' then '#globalMessage:hover,' else ''}
.slideout-watcher #watcher:hover,
.announcements-slideout #globalMessage:hover,
#boardNavDesktopFoot:hover,
body > a[style="cursor: pointer; float: right;"]:hover,
#img-controls,
@ -46,10 +66,10 @@ body > div.navLinks > a:first-of-type::after {
cursor: pointer;
background-position: 0 -15px;
}
#watcher::after {
.slideout-watcher #watcher::after {
background-position: 0 -30px;
}
#globalMessage::after {
.announcements-slideout #globalMessage::after {
background-position: 0 -45px;
}
#boardNavDesktopFoot::after {
@ -74,18 +94,18 @@ body > a[style="cursor: pointer; float: right;"]::after {
background-position: 0 -135px;
}
#boardNavDesktopFoot:hover::after,
#globalMessage:hover::after,
.announcements-slideout #globalMessage:hover::after,
#img-controls:hover,
#navlinks a:hover,
#appchanOptions:hover,
#main-menu:hover,
#navtopright .exlinksOptionsLink:hover::after,
#qr #qrtab,
#watcher:hover::after,
.slideout-watcher #watcher:hover::after,
.thumbnail#selected,
body > a[style="cursor: pointer; float: right;"]:hover::after,
div.navLinks > a:first-of-type:hover::after,
#catalog:hover::after,
#fappeTyme:hover {
opacity: 1;
opacity: 1 !important;
}

36
src/General/css/icons.horz.css
View File

@ -1,5 +1,7 @@
/* 4chan X Options */
body::after {
#{align}: #{position[i] - 1}px;
}
#appchanOptions {
#{align}: #{position[i++]}px;
}
@ -8,11 +10,11 @@
#{align}: #{position[i++]}px;
}
/* Global Message */
#globalMessage::after {
.announcements-slideout #globalMessage::after {
#{align}: #{position[i++]}px;
}
/* Watcher */
#watcher::after {
.slideout-watcher #watcher::after {
#{align}: #{position[i++]}px;
}
/* ExLinks */
@ -54,11 +56,15 @@ div.navLinks > a:first-of-type::after {
#navlinks a:first-of-type {
#{align}: #{position[i++]}px;
}
body::after {
width: #{position[i] - 2}px;
top: 0;
}
#boardNavDesktopFoot::after,
#navtopright .exlinksOptionsLink::after,
#appchanOptions,
#watcher::after,
#globalMessage::after,
.slideout-watcher #watcher::after,
.announcements-slideout #globalMessage::after,
#img-controls,
#main-menu,
#fappeTyme,
@ -67,14 +73,18 @@ div.navLinks > a:first-of-type::after,
body > a[style="cursor: pointer; float: right;"]::after {
top: 1px !important;
}
#{if _conf["Announcements"] is "slideout" then "#globalMessage," else ""}
#{if _conf["Slideout Watcher"] then "#watcher," else ""}
.slideout-watcher #globalMessage,
.slideout-watcher #watcher,
#boardNavDesktopFoot {
top: 16px !important;
}
.fixed.top #header-bar#{if _conf['Pagination'] is 'top' or _conf['Pagination'] is 'sticky top' then ',\n.pagelist' else ''} {
#{if _conf['4chan SS Navigation']
"padding-#{align}: #{iconOffset}px;"
else
"margin-#{align}: #{iconOffset}px;"}
}\n
.fourchan-ss-navigation.fixed.top #header-bar,
.fourchan-ss-navigation.pagination-top .pagelist,
.fourchan-ss-navigation.pagination-sticky-top .pagelist {
padding-#{align}: #{iconOffset}px;
}
.fixed.top:not(.fourchan-ss-navigation) #header-bar,
.pagination-top:not(.fourchan-ss-navigation) .pagelist,
.pagination-sticky-top:not(.fourchan-ss-navigation) .pagelist {
margin-#{align}: #{iconOffset}px;
}

37
src/General/css/icons.vert.css
View File

@ -1,5 +1,7 @@
/* Expand Images */
body::after {
top: #{position[i] - 1}px;
}
#img-controls {
top: #{position[i++]}px;
}
@ -17,12 +19,13 @@
top: #{position[i++]}px;
}
/* Global Message */
#globalMessage,
#globalMessage::after {
.announcements-slideout #globalMessage,
.announcements-slideout #globalMessage::after {
top: #{position[i++]}px;
}
/* Watcher */
#{if _conf["Slideout Watcher"] then "#watcher, #watcher::after" else ""} {
.slideout-watcher #watcher,
.slideout-watcher #watcher::after {
top: #{position[i++]}px !important;
}
/* 4sight */
@ -52,6 +55,10 @@ div.navLinks > a:first-of-type::after {
#navlinks a:last-of-type {
top: #{position[i++]}px !important;
}
body::after {
height: #{position[i] - 2}px;
#{align}: 2px;
}
#navlinks a,
#navtopright .exlinksOptionsLink::after,
#appchanOptions,
@ -70,13 +77,21 @@ div.navLinks > a:first-of-type::after {
#globalMessage,
#watcher {
<%= sizing %>: border-box;
width: #{Style.sidebar - 18}px !important;
min-width: 230px;
width: 230px !important;
#{align}: 18px !important;
}
.fixed.top #header-bar#{if _conf['Pagination'] is 'top' or _conf['Pagination'] is 'sticky top' then ',\n.pagelist' else ''} {
#{if _conf['4chan SS Navigation']
"padding-#{align}: #{iconOffset}px;"
else
"margin-#{align}: #{iconOffset}px;"}
.sidebar-large #boardNavDesktopFoot,
.sidebar-large #globalMessage,
.sidebar-large #watcher {
width: 288px !important;
}
.fourchan-ss-navigation.fixed.top #header-bar,
.fourchan-ss-navigation.pagination-top .pagelist,
.fourchan-ss-navigation.pagination-sticky-top .pagelist {
padding-#{align}: #{iconOffset}px;
}
.fixed.top:not(.fourchan-ss-navigation) #header-bar,
.pagination-top:not(.fourchan-ss-navigation) .pagelist,
.pagination-sticky-top:not(.fourchan-ss-navigation) .pagelist {
margin-#{align}: #{iconOffset}px;
}

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

@ -421,6 +421,10 @@ data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='filters'
background: #{theme["Highlighted Reply Background"]};
border: 1px solid #{theme["Highlighted Reply Border"]};
}
body::after {
background: #{backgroundC};
}
.fourchan-ss-sidebar body::after,
.fourchan-ss-sidebar body::before {
background: none repeat scroll 0% 0% rgba(#{if background = new Style.color Style.colorToHex theme["Reply Background"] then background.shiftRGB -18}, 0.8);
}

21
src/Theming/Mascots.coffee
View File

@ -1,15 +1,24 @@
MascotTools =
init: (mascot = Conf[g.MASCOTSTRING][Math.floor(Math.random() * Conf[g.MASCOTSTRING].length)]) ->
init: (mascot) ->
unless mascot and typeof mascot is string
mascot = Conf[g.MASCOTSTRING][Math.floor(Math.random() * Conf[g.MASCOTSTRING].length)]
Conf['mascot'] = mascot
@el = el = $('#mascot img', d.body)
if !Conf['Mascots'] or (g.CATALOG and Conf['Hide Mascots on Catalog'])
if !Conf['Mascots'] or (Conf['Hide Mascots on Catalog'] and g.VIEW is 'catalog')
return if el then el.src = "" else null
pfOffset = if Conf['4chan SS Navigation'] and
((Conf['Bottom Header'] and Conf['Fixed Header']) or
(g.VIEW is 'index' and Conf['Pagination'] is 'sticky bottom'))
1.5
else
0
position = "#{
if Conf['Mascot Position'] is 'bottom' or (Conf['Mascot Position'] is "default" and Conf['Post Form Style'] isnt "fixed")
0 + Style.pfOffset
0 + pfOffset
else
20.1 + (
if Conf['Show Post Form Header'] and ['fixed', 'transparent fade', 'slideout'].contains Conf['Post Form Style']
@ -20,7 +29,7 @@ MascotTools =
0.2
else
0
) + Style.pfOffset
) + pfOffset
}em"
# If we're editting anything, let's not change mascots any time we change a value.
@ -54,6 +63,9 @@ MascotTools =
filters.push '<feColorMatrix id="color" type="saturate" values="0" />'
Style.mascot.textContent = """
.sidebar-location-left #mascot img {
<%= sizing %>transform: scaleX(-1);
}
#mascot img {
position: fixed;
z-index: #{
@ -62,7 +74,6 @@ MascotTools =
else
'-1'
};
#{if Style.sidebarLocation[0] is "left" then "<%= sizing %>transform: scaleX(-1);" else ""}
bottom: #{
if mascot.position is 'top'
'auto'

80
src/Theming/Style.coffee
View File

@ -70,14 +70,14 @@ Style =
, 500
setup: ->
theme = Themes[Conf['theme']]
theme = Themes[Conf['theme']] or Themes['Yotsuba B']
$.extend Style,
layoutCSS: $.addStyle Style.layout(), 'layout'
layoutCSS: $.addStyle Style.layout, 'layout'
themeCSS: $.addStyle Style.theme(theme), 'theme'
icons: $.addStyle "", 'icons'
paddingSheet: $.addStyle "", 'padding'
mascot: $.addStyle "", 'mascotSheet'
dynamic: $.addStyle Style.dynamic(), 'dynamic'
dynamicCSS: $.addStyle Style.dynamic(), 'dynamic'
# Non-customizable
$.addStyle JSColor.css(), 'jsColor'
@ -118,11 +118,11 @@ Style =
addStyle: (theme) ->
_conf = Conf
unless theme
theme = Themes[_conf['theme']]
theme = Themes[_conf['theme']] or Themes['Yotsuba B']
MascotTools.init _conf["mascot"]
Style.layoutCSS.textContent = Style.layout()
Style.themeCSS.textContent = Style.theme(theme)
Style.dynamicCSS.textContent = Style.dynamic()
Style.themeCSS.textContent = Style.theme(theme)
Style.iconPositions()
Style.padding()
@ -161,66 +161,20 @@ Style =
return """filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='filters' color-interpolation-filters='sRGB'><feColorMatrix values='#{string} 0 0 0 1 0' /></filter></svg>#filters");"""
layout: ->
# Remove after classes rewrite
_conf = Conf
Style.pfOffset = if _conf['4chan SS Navigation'] and
((_conf['Bottom Header'] and _conf['Fixed Header']) or
(g.VIEW is 'index' and _conf['Pagination'] is 'sticky bottom'))
1.5
else
0
Style.sidebar = {
minimal: 20
hide: 2
normal: 252
large: 303
}[_conf['Sidebar']]
Style.sidebarLocation = if _conf["Sidebar Location"] is "left"
["left", "right"]
else
["right", "left" ]
if _conf['editMode'] is "theme"
editSpace = {}
editSpace[Style.sidebarLocation[1]] = 300
editSpace[Style.sidebarLocation[0]] = 0
else
editSpace =
left: 0
right: 0
css = """<%= grunt.file.read('src/General/css/layout.css') %>"""
layout: """<%= grunt.file.read('src/General/css/layout.css') %>"""
dynamic: ->
_conf = Conf
Style.pfOffset = if _conf['4chan SS Navigation'] and
((_conf['Bottom Header'] and _conf['Fixed Header']) or
(g.VIEW is 'index' and _conf['Pagination'] is 'sticky bottom'))
1.5
else
0
Style.sidebar = {
minimal: 20
hide: 2
normal: 252
large: 303
}[_conf['Sidebar']]
Style.sidebarLocation = if _conf["Sidebar Location"] is "left"
sidebarLocation = if _conf["Sidebar Location"] is "left"
["left", "right"]
else
["right", "left" ]
if _conf['editMode'] is "theme"
editSpace = {}
editSpace[Style.sidebarLocation[1]] = 300
editSpace[Style.sidebarLocation[0]] = 0
editSpace[sidebarLocation[1]] = 300
editSpace[sidebarLocation[0]] = 0
else
editSpace =
left: 0
@ -240,7 +194,13 @@ Style =
iconPositions: ->
css = """<%= grunt.file.read('src/General/css/icons.base.css') %>"""
i = 0
align = Style.sidebarLocation[0]
align = Conf['Sidebar Location']
sidebar = {
minimal: 20
hide: 2
normal: 252
large: 303
}[_conf['Sidebar']]
_conf = Conf
notCatalog = g.VIEW isnt 'catalog'
@ -287,7 +247,7 @@ Style =
position[position.length - 1] - (if _conf['4chan SS Navigation']
0
else
Style.sidebar + parseInt(_conf["Right Thread Padding"], 10))
sidebar + parseInt(_conf["Right Thread Padding"], 10))
if iconOffset < 0 then iconOffset = 0
css += """<%= grunt.file.read('src/General/css/icons.horz.css') %>"""
@ -295,7 +255,7 @@ Style =
else
position = aligner(
2 + (if _conf["4chan Banner"] is "at sidebar top" then (Style.logoOffset + 19) else 0)
2
[
notEither and _conf['Image Expansion']
true
@ -324,7 +284,7 @@ Style =
if _conf['4chan SS Navigation']
0
else
Style.sidebar + parseInt _conf[align.capitalize() + " Thread Padding"], 10
sidebar + parseInt _conf[align.capitalize() + " Thread Padding"], 10
)
css += """<%= grunt.file.read('src/General/css/icons.vert.css') %>"""