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

Create CSS module.

Browse Source
This commit is contained in:
ccd0 2016-04-16 07:18:06 -07:00
parent af5508a83e
commit b3d654f655
11 changed files with 76 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
Makefile
View File

@ -26,13 +26,13 @@ cat_deps := tools/cat.js
capitalized = $(filter-out a,$(foreach x,$1,$(subst a $(x),,$(sort a $(x)))))
parts := \
globals Config platform classes \
globals Config css platform classes \
$(sort $(call capitalized, \
$(subst src/,,$(wildcard src/*)) \
)) \
Main
lang = $(if $(filter globals,$1),js,coffee)
lang = $(if $(filter globals css,$1),js,coffee)
# remove extension when sorting so X.coffee comes before X.Y.coffee
sources_lang = \
@ -42,29 +42,20 @@ sources_lang = \
sources = $(call sources_lang,$1,$(call lang,$1))
imports = \
$(filter-out %.coffee %.js,$(wildcard src/$1/*.* src/$1/*/*.* src/$1/*/*/*.*)) \
$(filter-out %.coffee %.js,$(wildcard src/$1/*.* src/$1/*/*.* src/$1/*/*/*.* src/main/$1.*)) \
.tests_enabled \
$(imports_$1)
imports_globals := \
version.json
imports_Config := \
src/Archive/archives.json \
src/css/custom.css
imports_Monitoring := \
src/meta/icon128.png
imports_Miscellaneous := \
src/css/report.css
imports_Main := \
$(filter-out src/css/custom.css src/css/report.css,$(wildcard src/css/*.css)) \
tmp/font-awesome.css \
tmp/style.css
imports_font_awesome := \
src/Archive/archives.json
imports_css := \
tools/style.js \
node_modules/font-awesome/css/font-awesome.css \
node_modules/font-awesome/fonts/fontawesome-webfont.woff
imports_style := \
$(wildcard src/css/linkIcons/*.png)
imports_Monitoring := \
src/meta/icon128.png
intermediate = \
LICENSE \
@ -108,12 +99,6 @@ node_modules/% : .events/npm
.tests_enabled :
echo false> .tests_enabled
tmp/font-awesome.css : src/css/font-awesome.css $(imports_font_awesome) $(template_deps) | tmp
$(template) $< $@
tmp/style.css : src/css/style.css $(imports_style) $(template_deps) | tmp
$(template) $< $@
.events/declare : $(wildcard src/*/*.coffee) tools/declare.js | .events tmp
node tools/declare.js
echo -> $@
@ -151,7 +136,7 @@ tmp/$1.js : tmp/$1.coffee $(coffee_deps) tools/globalize.js
endef
$(foreach p, \
$(filter-out globals platform,$(parts)) platform_crx platform_userscript, \
$(filter-out globals css platform,$(parts)) platform_crx platform_userscript, \
$(eval $(call compile,$(p))) \
)

4
src/Miscellaneous/Report.coffee
View File

@ -1,6 +1,4 @@
Report =
css: `<%= importCSS('report') %>`
init: ->
return unless (match = location.search.match /\bno=(\d+)/)
Captcha.replace.init()
@ -8,7 +6,7 @@ Report =
$.ready @ready
ready: ->
$.addStyle Report.css
$.addStyle CSS.report
Report.archive() if Conf['Archive Report']

12
src/css/CSS.js Normal file
View File

@ -0,0 +1,12 @@
CSS = {
boards:
<%= multiline(require_style()()) %>,
report:
<%= multiline(read('src/css/report.css')) %>,
www:
<%= multiline(read('src/css/www.css')) %>
};

14
src/css/font-awesome.css vendored
View File

@ -1,13 +1,3 @@
<%=
read('node_modules/font-awesome/css/font-awesome.css').match(/\/\*\![^]*?\*\//)[0]
%>
@font-face {
font-family: FontAwesome;
src: url('data:application/font-woff;base64,<%= readBase64('node_modules/font-awesome/fonts/fontawesome-webfont.woff') %>') format('woff');
font-weight: 400;
font-style: normal;
}
.fa::before {
font-family: FontAwesome;
font-weight: 400;
@ -44,10 +34,6 @@ read('node_modules/font-awesome/css/font-awesome.css').match(/\/\*\![^]*?\*\//)[
display: inline;
}
<%=
read('node_modules/font-awesome/css/font-awesome.css').match(/\.fa-glass:[^]*/)[0].replace(/([,{;])\s+/g, '$1').replace(/,/g, ', ')
%>
.fa-spin::before {
-webkit-animation:spin 2s infinite linear;
-moz-animation:spin 2s infinite linear;

12
src/css/style.css
View File

@ -1820,18 +1820,6 @@ a:only-of-type > .remove {
cursor: text !important;
}
/* Link Title Favicons */
<%=
ls('src/css/linkIcons').map(function(file) {
var key = file.match(/(\w+)\.png/)[1];
var data = readBase64(`src/css/linkIcons/${file}`);
return ".linkify."+key+" {\n" +
" background: transparent url('data:image/png;base64,"+data+"') center left no-repeat!important;\n" +
" padding-left: 18px;\n" +
"}";
}).join('\n')
%>
/* Embedding */
#embedding {
padding: 1px 4px 1px 4px;

2
src/main/Config.coffee
View File

@ -796,7 +796,7 @@ Config =
favicon: 'ferongr'
usercss: `<%= importCSS('custom') %>`
usercss: `<%= multiline(read('src/main/Config.usercss.css')) %>`
hotkeys:
# QR & Options

0
src/css/custom.css → src/main/Config.usercss.css
View File

8
src/main/Main.coffee
View File

@ -110,7 +110,7 @@ Main =
switch hostname
when 'www.4chan.org'
$.onExists doc, 'body', -> $.addStyle Main.cssWWW
$.onExists doc, 'body', -> $.addStyle CSS.www
Captcha.replace.init()
return
when 'sys.4chan.org'
@ -190,7 +190,7 @@ Main =
Conf['Autohiding Scrollbar'] = !Conf['Autohiding Scrollbar']
$.set 'Autohiding Scrollbar', Conf['Autohiding Scrollbar']
$.toggleClass doc, 'autohiding-scrollbar'
$.addStyle Main.css, 'fourchanx-css'
$.addStyle CSS.boards, 'fourchanx-css'
Main.bgColorStyle = $.el 'style', id: 'fourchanx-bgcolor-css'
keyboard = false
@ -391,10 +391,6 @@ Main =
$.ready ->
cb() if Main.isThisPageLegit()
css: `<%= importCSS('../../tmp/font-awesome', '../../tmp/style', 'yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon', 'supports') %>`
cssWWW: `<%= importCSS('www') %>`
features: [
['Polyfill', Polyfill]
['Normalize URL', NormalizeURL]

3
tools/.jshintrc
View File

@ -2,5 +2,6 @@
"esnext": true,
"undef": true,
"unused": true,
"node": true
"node": true,
"-W083": true
}

43
tools/style.js Normal file
View File

@ -0,0 +1,43 @@
var fs = require('fs');
var read = filename => fs.readFileSync(filename, 'utf8').replace(/\r\n/g, '\n');
var readBase64 = filename => fs.readFileSync(filename).toString('base64');
module.exports = () => (
// Font Awesome CSS attribution and license
read('node_modules/font-awesome/css/font-awesome.css').match(/\/\*\![^]*?\*\//)[0] + '\n' +
// Font Awesome web font
`@font-face {
font-family: FontAwesome;
src: url('data:application/font-woff;base64,${readBase64('node_modules/font-awesome/fonts/fontawesome-webfont.woff')}') format('woff');
font-weight: 400;
font-style: normal;
}
` +
// fa-[icon name] classes
read('node_modules/font-awesome/css/font-awesome.css').match(/\.fa-glass:[^]*/)[0].replace(/([,{;])\s+/g, '$1').replace(/,/g, ', ') +
[
'font-awesome',
'style',
'yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon'
].map(
name => read(`src/css/${name}.css`)
).join('') +
'/* Link Title Favicons */\n' +
fs.readdirSync('src/css/linkIcons').map(file =>
`.linkify.${file.split('.')[0]} {
background: transparent url('data:image/png;base64,${readBase64(`src/css/linkIcons/${file}`)}') center left no-repeat!important;
padding-left: 18px;
}
`
).join('') +
// XXX Moved to end of stylesheet to avoid breaking whole stylesheet in Maxthon.
read('src/css/supports.css')
);

11
tools/template.js
View File

@ -7,18 +7,19 @@ _.templateSettings.interpolate = /<%=([\s\S]+?)%>/g;
var obj = {};
for (var m of ['style']) {
obj[`require_${m}`] = () => require(`./${m}`);
}
var read = obj.read = filename => fs.readFileSync(filename, 'utf8').replace(/\r\n/g, '\n');
var readJSON = obj.readJSON = filename => JSON.parse(read(filename));
obj.readBase64 = filename => fs.readFileSync(filename).toString('base64');
obj.ls = pathname => fs.readdirSync(pathname);
// Convert JSON object to Coffeescript expression (via embedded JS).
var constExpression = data => '`' + JSON.stringify(data).replace(/`/g, '\\`') + '`';
obj.importCSS = function() {
var text = Array.prototype.slice.call(arguments).map(name => read(`src/css/${name}.css`)).join('');
text = _.template(text)(pkg); // variables only; no recursive imports
return text.trim().replace(/\n+/g, '\n').split(/^/m).map(JSON.stringify).join(' +\n').replace(/`/g, '\\`');
obj.multiline = function(text) {
return text.replace(/\n+/g, '\n').split(/^/m).map(JSON.stringify).join(' +\n').replace(/`/g, '\\`');
};
obj.importHTML = function(filename) {