mirror of
https://github.com/vichan-devel/vichan.git
synced 2024-11-28 17:31:00 +01:00
New stylesheet system
This commit is contained in:
Fredrick Brennan
parent
3ac306b6ea
commit
5f1042db9d
@ -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) 2015 Fredrick Brennan <admin@8chan.co>
|
||||
*
|
||||
* Usage:
|
||||
* $config['additional_javascript'][] = 'js/jquery.min.js';
|
||||
@ -11,10 +12,10 @@
|
||||
|
||||
+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({
|
||||
"height" : "85%",
|
||||
"height" : "80%",
|
||||
"width" : "100%",
|
||||
"font-size" : "9pt",
|
||||
"font-family": "monospace",
|
||||
@ -26,30 +27,102 @@ var submit = $("<input type='button' value='"+_("Save custom CSS")+"'>").css({
|
||||
apply_css();
|
||||
}).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 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();
|
||||
$('link[rel="stylesheet"]')
|
||||
.last()
|
||||
.after($("<style></style>")
|
||||
.addClass("user-css")
|
||||
.text(localStorage.user_css)
|
||||
);
|
||||
var ls = $('link[rel="stylesheet"]:not(#stylesheet)').last();
|
||||
|
||||
ls.after($("<style></style>")
|
||||
.addClass("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() {
|
||||
if (!localStorage.user_css) {
|
||||
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" +
|
||||
"/* "+_("These will be applied on top of whatever theme you choose below.")+" */\n" +
|
||||
"/* "+_("You can include CSS files from remote servers, for example:")+" */\n" +
|
||||
'/* @import "http://example.com/style.css"; */');
|
||||
}
|
||||
else {
|
||||
textarea.text(localStorage.user_css);
|
||||
apply_css();
|
||||
}
|
||||
textarea.text(localStorage.user_css);
|
||||
apply_css();
|
||||
};
|
||||
|
||||
update_textarea();
|
||||
|
||||
|
||||
}();
|
||||
|
||||
@ -107,154 +107,8 @@ function alert(a, do_confirm, confirm_ok_action, confirm_cancel_action) {
|
||||
|
||||
var saved = {};
|
||||
|
||||
|
||||
var selectedstyle = '{% endraw %}{{ config.default_stylesheet.0|addslashes }}{% raw %}';
|
||||
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 %}
|
||||
}
|
||||
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 board_name = (matches ? matches[1] : false);
|
||||
|
||||
function get_cookie(cookie_name) {
|
||||
var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)');
|
||||
@ -449,8 +303,6 @@ var script_settings = function(script_name) {
|
||||
};
|
||||
|
||||
function init() {
|
||||
init_stylechooser();
|
||||
|
||||
// store highlighted text for citeReply()
|
||||
document.querySelector('form[name="postcontrols"]').addEventListener('mouseup', function (e) {
|
||||
sessionStorage.quoteClipboard = window.getSelection().toString();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user