harmacist/vichan
1
0
Fork 0
forked from GithubBackups/vichan
Code Pull Requests Activity

New stylesheet system

Browse Source
This commit is contained in:
Fredrick Brennan 2015-03-12 14:58:49 +08:00
parent 3ac306b6ea
commit 5f1042db9d
2 changed files with 90 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
js/options/user-css.js
View File

@ -1,7 +1,8 @@
/* /*
* options/user-css.js - allow user enter custom css entries * options/user-css.js - allow user to enter custom css entries and (march 2015) replaces the old stylesheet system
* *
* Copyright (c) 2014 Marcin Łabanowski <marcin@6irc.net> * Copyright (c) 2014 Marcin Łabanowski <marcin@6irc.net>
* Copyright (c) 2015 Fredrick Brennan <admin@8chan.co>
* *
* Usage: * Usage:
* $config['additional_javascript'][] = 'js/jquery.min.js'; * $config['additional_javascript'][] = 'js/jquery.min.js';
@ -11,10 +12,10 @@
+function(){ +function(){
var tab = Options.add_tab("user-css", "css3", _("User CSS")); var tab = Options.add_tab("user-css", "css3", _("Theme"));
var textarea = $("<textarea></textarea>").css({ var textarea = $("<textarea></textarea>").css({
"height" : "85%", "height" : "80%",
"width" : "100%", "width" : "100%",
"font-size" : "9pt", "font-size" : "9pt",
"font-family": "monospace", "font-family": "monospace",
@ -26,30 +27,102 @@ var submit = $("<input type='button' value='"+_("Save custom CSS")+"'>").css({
apply_css(); apply_css();
}).appendTo(tab.content); }).appendTo(tab.content);
onready(function(){
var stylechooser = $("<select id='stylechooser'></select>").appendTo(tab.content);
var fix_choice = function(){
stylechooser.empty();
$.each(styles, function(k, v) {
var ps;
k === "Custom" ? k2 = _("Board-specific CSS") : k2 = k;
var option = $("<option value='"+k+"'>"+k2+"</option>").appendTo(stylechooser);
if (localStorage.stylesheets_all_boards === "false") {
var bs = JSON.parse(localStorage.board_stylesheets);
if (bs[board_name]) ps = bs[board_name];
}
if ((k === localStorage.stylesheet && localStorage.stylesheets_all_boards === "true") || (localStorage.stylesheets_all_boards === "false" && (ps && k === ps))) option.prop('selected', 'selected');
})
};
fix_choice();
var allboards = $("<label><input type='checkbox' id='css-all-boards'> "+_("Style should affect all boards, not just current board")+" (/"+board_name+"/)</label>").appendTo(tab.content).find('input');
// Handle empty localStorage
if (!localStorage.stylesheets_all_boards) localStorage.stylesheets_all_boards = "false";
if (localStorage.stylesheets_all_boards === "true") allboards.prop('checked', 'checked');
allboards.on('change', function(e) {
if ($(this).is(':checked')) {
localStorage.stylesheets_all_boards = "true";
} else {
localStorage.stylesheets_all_boards = "false";
}
fix_choice();
apply_css();
});
stylechooser.on('change', function(e) {
var ps = $(this).val();
if (localStorage && localStorage.stylesheets_all_boards === "false") {
var bs = JSON.parse(localStorage.board_stylesheets);
if (!bs) bs = {};
bs[board_name] = ps;
localStorage.board_stylesheets = JSON.stringify(bs);
} else {
localStorage.stylesheet = ps;
}
apply_css();
});
update_textarea();
});
var apply_css = function() { var apply_css = function() {
var to_apply;
if (localStorage && localStorage.stylesheets_all_boards === "false") {
if (localStorage && localStorage.board_stylesheets) {
var bs = JSON.parse(localStorage.board_stylesheets);
if (bs && bs[board_name]) {
to_apply = styles[bs[board_name]];
}
}
} else if (localStorage && localStorage.stylesheet) {
to_apply = styles[localStorage.stylesheet];
}
$('.user-css').remove(); $('.user-css').remove();
$('link[rel="stylesheet"]') var ls = $('link[rel="stylesheet"]:not(#stylesheet)').last();
.last()
.after($("<style></style>") ls.after($("<style></style>")
.addClass("user-css") .addClass("user-css")
.text(localStorage.user_css) .text(localStorage.user_css)
); );
if (to_apply) {
$('.user-chosen-stylesheet,#stylesheet').remove();
ls.after($("<link rel='stylesheet'/>")
.attr("class", "user-chosen-stylesheet")
.attr("id", "stylesheet")
.attr("href", configRoot+to_apply)
);
}
return to_apply;
}; };
var update_textarea = function() { var update_textarea = function() {
if (!localStorage.user_css) { if (!localStorage.user_css) {
textarea.text("/* "+_("Enter here your own CSS rules...")+" */\n" + textarea.text("/* "+_("Enter here your own CSS rules...")+" */\n" +
"/* "+_("If you want to make a redistributable style, be sure to\nhave a Yotsuba B theme selected.")+" */\n" + "/* "+_("If you want to make a redistributable style, be sure to\nhave a Yotsuba B theme selected.")+" */\n" +
"/* "+_("These will be applied on top of whatever theme you choose below.")+" */\n" +
"/* "+_("You can include CSS files from remote servers, for example:")+" */\n" + "/* "+_("You can include CSS files from remote servers, for example:")+" */\n" +
'/* @import "http://example.com/style.css"; */'); '/* @import "http://example.com/style.css"; */');
} }
else { textarea.text(localStorage.user_css);
textarea.text(localStorage.user_css); apply_css();
apply_css();
}
}; };
update_textarea();
}(); }();

152
templates/main.js
View File

@ -107,154 +107,8 @@ function alert(a, do_confirm, confirm_ok_action, confirm_cancel_action) {
var saved = {}; var saved = {};
var matches = document.URL.match({% endraw %}/\/([0-9a-zA-Z\+$_\u0080-\uFFFF]{1,58})\/($|{{ config.dir.res|replace({'/': '\\/'}) }}{{ config.file_page|replace({'%d': '\\d+', '.': '\\.'}) }}|{{ config.file_index|replace({'.': '\\.'}) }}|{{ config.dir.res|replace({'/': '\\/'}) }}{{ config.file_page50|replace({'+': '\\+', '%d': '\\d+', '.': '\\.'}) }}|{{ config.file_page|replace({'%d': '\\d+', '.': '\\.'}) }}|{{ config.catalog_link|replace({'.': '\\.'}) }})/{% raw %});
var selectedstyle = '{% endraw %}{{ config.default_stylesheet.0|addslashes }}{% raw %}'; var board_name = (matches ? matches[1] : false);
var board_name = false;
function changeStyle(styleName, link) {
{% endraw %}
{% if config.stylesheets_board %}{% raw %}
if (board_name) {
stylesheet_choices[board_name] = styleName;
localStorage.board_stylesheets = JSON.stringify(stylesheet_choices);
}
{% endraw %}{% else %}
localStorage.stylesheet = styleName;
{% endif %}
{% raw %}
// Find the <dom> for the stylesheet. May be nothing.
var domStylesheet = document.getElementById('stylesheet');
// Determine if this stylesheet is the default.
var setToDefault = ( styles[styleName] == "" || styles[styleName] == "/stylesheets/" );
// Turn "Yotsuba B" to "yotsuba_b"
var attributeName = styleName.replace(/[^a-z0-9_\-]/gi, '_').toLowerCase();
if( !domStylesheet && !setToDefault ) {
domStylesheet = document.createElement('link');
domStylesheet.rel = 'stylesheet';
domStylesheet.type = 'text/css';
domStylesheet.id = 'stylesheet';
var x = document.getElementsByTagName('head')[0];
x.appendChild(domStylesheet);
}
if( !setToDefault ) {
{% endraw %}
var root = "{{ config.root }}";
{% raw %}
root = root.replace(/\/$/, "");
domStylesheet.href = root + styles[styleName];
selectedstyle = styleName;
if (document.getElementsByClassName('styles').length != 0) {
var styleLinks = document.getElementsByClassName('styles')[0].childNodes;
for (var i = 0; i < styleLinks.length; i++) {
styleLinks[i].className = '';
}
}
if (link) {
link.className = 'selected';
}
}
else if( domStylesheet ) {
domStylesheet.parentNode.removeChild( domStylesheet );
}
// Fix the classes on the body tag.
var body = document.getElementsByTagName('body')[0];
if( body ) {
var bodyClasses = document.getElementsByTagName('body')[0].getAttribute('class').split(" ");
var bodyClassesNew = [];
for( i = 0; i < bodyClasses.length; ++i ) {
var bodyClass = bodyClasses[ i ];
// null class from a double-space.
if( bodyClass == "" ) {
continue;
}
if( bodyClass.indexOf( "stylesheet-" ) == 0 ) {
continue;
}
bodyClassesNew.push( bodyClass );
}
// Add stylesheet-yotsuba_b at the end.
bodyClassesNew.push( "stylesheet-" + attributeName );
body.setAttribute( 'class', bodyClassesNew.join(" ") );
body.setAttribute( 'data-stylesheet', attributeName );
}
if (typeof $ != 'undefined') {
$(window).trigger('stylesheet', styleName);
}
}
{% endraw %}
function init_stylechooser() {
var matches = document.URL.match(/\/([0-9a-zA-Z\+$_\u0080-\uFFFF]{1,58})\/($|{{ config.dir.res|replace({'/': '\\/'}) }}{{ config.file_page|replace({'%d': '\\d+', '.': '\\.'}) }}|{{ config.file_index|replace({'.': '\\.'}) }}|{{ config.dir.res|replace({'/': '\\/'}) }}{{ config.file_page50|replace({'+': '\\+', '%d': '\\d+', '.': '\\.'}) }}|{{ config.file_page|replace({'%d': '\\d+', '.': '\\.'}) }}|{{ config.catalog_link|replace({'.': '\\.'}) }})/);
var newElement = document.createElement('div');
newElement.className = 'styles';
for (styleName in styles) {
var style = document.createElement('a');
style.innerHTML = '[' + styleName + ']';
style.onclick = function() {
changeStyle(this.innerHTML.substring(1, this.innerHTML.length - 1), this);
};
if (styleName == selectedstyle) {
style.className = 'selected';
}
style.href = 'javascript:void(0);';
newElement.appendChild(style);
}
document.getElementsByTagName('body')[0].insertBefore(newElement, document.getElementsByTagName('body')[0].lastChild.nextSibling);
{% if config.stylesheets_board %}
{# This is such an unacceptable mess. There needs to be an easier way. #}
{% raw %}
if (matches) {
board_name = matches[1];
}
if (!localStorage.board_stylesheets) {
localStorage.board_stylesheets = '{}';
}
window.stylesheet_choices = JSON.parse(localStorage.board_stylesheets);
if (board_name && stylesheet_choices[board_name]) {
for (var styleName in styles) {
if (styleName == stylesheet_choices[board_name]) {
changeStyle(styleName);
break;
}
}
}
{% endraw %}
{% else %}
{% raw %}
if (localStorage.stylesheet) {
for (var styleName in styles) {
if (styleName == localStorage.stylesheet) {
changeStyle(styleName);
break;
}
}
}
{% endraw %}
{% endif %}
{% raw %}
}
function get_cookie(cookie_name) { function get_cookie(cookie_name) {
var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)'); var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)');
@ -449,8 +303,6 @@ var script_settings = function(script_name) {
}; };
function init() { function init() {
init_stylechooser();
// store highlighted text for citeReply() // store highlighted text for citeReply()
document.querySelector('form[name="postcontrols"]').addEventListener('mouseup', function (e) { document.querySelector('form[name="postcontrols"]').addEventListener('mouseup', function (e) {
sessionStorage.quoteClipboard = window.getSelection().toString(); sessionStorage.quoteClipboard = window.getSelection().toString();