From 5f1042db9dc303f0d7544534ea71c1040fdca206 Mon Sep 17 00:00:00 2001 From: Fredrick Brennan Date: Thu, 12 Mar 2015 14:58:49 +0800 Subject: [PATCH] New stylesheet system --- js/options/user-css.js | 103 ++++++++++++++++++++++++---- templates/main.js | 152 +---------------------------------------- 2 files changed, 90 insertions(+), 165 deletions(-) diff --git a/js/options/user-css.js b/js/options/user-css.js index bca98aa0..612a9d48 100644 --- a/js/options/user-css.js +++ b/js/options/user-css.js @@ -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 + * Copyright (c) 2015 Fredrick Brennan * * 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 = $("").css({ - "height" : "85%", + "height" : "80%", "width" : "100%", "font-size" : "9pt", "font-family": "monospace", @@ -26,30 +27,102 @@ var submit = $("").css({ apply_css(); }).appendTo(tab.content); +onready(function(){ + var stylechooser = $("").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 = $("").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 = $("").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($("") - .addClass("user-css") - .text(localStorage.user_css) - ); + var ls = $('link[rel="stylesheet"]:not(#stylesheet)').last(); + + ls.after($("") + .addClass("user-css") + .text(localStorage.user_css) + ); + + if (to_apply) { + $('.user-chosen-stylesheet,#stylesheet').remove(); + ls.after($("") + .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(); - }(); diff --git a/templates/main.js b/templates/main.js index 6ce48d67..5d0c6370 100644 --- a/templates/main.js +++ b/templates/main.js @@ -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 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();