From 2e8263308e6fec8c33712eb82dc132f0c639bf8c Mon Sep 17 00:00:00 2001 From: April Sylph Date: Sat, 25 Apr 2020 04:56:59 +0100 Subject: [PATCH] update AccessKit for new dashboard (#1803) --- Extensions/accesskit.css | 4 + Extensions/accesskit.js | 180 ++++++++++++++++++++++++++++----------- 2 files changed, 134 insertions(+), 50 deletions(-) create mode 100644 Extensions/accesskit.css diff --git a/Extensions/accesskit.css b/Extensions/accesskit.css new file mode 100644 index 000000000..13fac1abe --- /dev/null +++ b/Extensions/accesskit.css @@ -0,0 +1,4 @@ +@font-face { + font-family: open-dyslexic; + src: url("https://cdn.jsdelivr.net/open-dyslexic/2.1.0/ttf/OpenDyslexic-Regular.ttf"); +} diff --git a/Extensions/accesskit.js b/Extensions/accesskit.js index cef59457d..1f62b785c 100644 --- a/Extensions/accesskit.js +++ b/Extensions/accesskit.js @@ -1,5 +1,5 @@ //* TITLE AccessKit **// -//* VERSION 1.3.0 **// +//* VERSION 2.0.0 **// //* DESCRIPTION Accessibility tools for Tumblr **// //* DETAILS Provides accessibility tools for XKit and your dashboard, such as increased font sizes, more contrast on icons and more. **// //* DEVELOPER new-xkit **// @@ -42,28 +42,28 @@ XKit.extensions.accesskit = new Object({ }, no_npf_colors: { text: "Don't display NPF (user-set) colours in posts", - default: true, - value: true + default: false, + value: false }, contrast_icons: { text: "Increase the contrast of dashboard icons and text", - default: true, - value: true + default: false, + value: false }, contrast_sidebar: { text: "Increase the contrast of sidebar icons and text", - default: true, - value: true + default: false, + value: false }, contrast_notifications: { text: "Increase the contrast of notifications", - default: true, - value: true + default: false, + value: false }, increase_font_size: { text: "Increase the size of the text", - default: true, - value: true + default: false, + value: false }, increase_post_margins: { text: "Increase the space between posts", @@ -76,13 +76,13 @@ XKit.extensions.accesskit = new Object({ }, xkit_disable_counter: { text: "Disable XKit extensions/settings that might have a negative effect on accessibility", - default: true, - value: true + default: false, + value: false }, xkit_contrast_icons: { text: "Increase the contrast of XKit user interface", - default: true, - value: true + default: false, + value: false }, "sep-1": { text: "Color Adjustments", @@ -108,9 +108,87 @@ XKit.extensions.accesskit = new Object({ } }, + cpanel: function() { + if (!XKit.page.react) { + return; + } + + const deprecated_options = [ + 'visible_captions', + 'contrast_sidebar', + 'contrast_icons', + 'contrast_notifications', + 'increase_font_size', + 'xkit_disable_counter', + 'contrast' + ].map(x => `[data-setting-id="${x}"]`).join(','); + + $(deprecated_options).remove(); + }, + run: function() { this.running = true; + XKit.tools.init_css('accesskit'); + + if (XKit.page.react) { + const {font, make_links_blue, no_npf_colors, increase_post_margins, xkit_contrast_icons} = this.preferences; + + const font_families = { + 'sans-serif': '"Palatino Linotype", "Book Antiqua", Palatino, serif', + 'opendyslexic': 'open-dyslexic' + }; + if (font.value !== 'default') { + XKit.tools.add_css( + `article { --font-family: ${font_families[font.value]};}`, + 'accesskit' + ); + } + + if (make_links_blue.value) { + XKit.tools.add_css( + 'article p a { color: var(--blue); }', + 'accesskit' + ); + } + + if (no_npf_colors.value) { + XKit.tools.add_css( + 'article span[style^="color:"] { color: var(--black) !important; }', + 'accesskit' + ); + } + + if (increase_post_margins.value) { + XKit.tools.add_css( + 'article { margin-bottom: 40px; }', + 'accesskit' + ); + } + + if (xkit_contrast_icons.value) { + XKit.tools.add_css(this.xkit_contrast_icons_css, 'accesskit'); + } + + const {invert, grayscale} = this.preferences; + if (invert.value || grayscale.value) { + const do_invert = invert.value ? 'invert(100%)' : ''; + const do_grayscale = grayscale.value ? 'grayscale(100%)' : ''; + XKit.tools.add_css(` + html { + height: 100%; + } + body { + height: 100%; + filter: ${do_invert} ${do_grayscale}; + } + `, + 'accesskit'); + } + + return; + } + var m_css = ""; var m_filters = ""; @@ -268,41 +346,7 @@ XKit.extensions.accesskit = new Object({ if (this.preferences.xkit_contrast_icons.value === true) { - m_css = m_css + " .xkit-extension-setting, .xkit-extension-setting-separator { color: black !important; border-bottom: 1px solid rgb(100,100,100); } " + - " .xkit-extension-setting-separator { background: rgb(230,230,230); }" + - " #xkit-extensions-panel-top { border-bottom: 1px solid black; } " + - " #xkit-extensions-panel-right, #xkit-extensions-panel-left, #xkit-extensions-panel-left-search { border-color: black; } " + - " #xkit-extensions-panel-left .xkit-extension {color: black; border-color: black; } " + - " .xkit-button { border-color: black; color: black; } " + - " .xkit-button:hover { border-color: black; color: black; text-decoration: underline; } " + - " #xkit-extensions-panel-top .description, #xkit-extensions-panel-top .description .details { color: black; } " + - " .xkit-checkbox, .xkit-change-ext-setting-checkbox { color: black } .xkit-change-ext-setting-checkbox:hover, .xkit-checkbox:hover { text-decoration: underline; } " + - " .xkit-extension-setting.checkbox .xkit-checkbox, .xkit-extension-setting .title { color: black; } " + - " .xkit-checkbox.selected b { background-color: #184e98; } " + - " .xkit-checkbox b { border: 1px solid black; } " + - " #xkit-extensions-panel-right .xkit-others-panel .description { color: black; } " + - " .xkit-progress-bar { border: 1px solid black; box-shadow: none; } " + - " .xkit-progress-bar-inner { background: #154389; } " + - " #xkit-about-window-text .subtitle, #xkit-about-window-links a {color: black; } " + - " #xkit-extensions-panel-left .xkit-extension .title { color: black; }" + - " #xkit-extensions-panel-left .xkit-extension.text-only.selected, #xkit-extensions-panel-left .xkit-extension.selected .title { color: black; font-weight: bold; text-decoration: underline; } " + - " #xkit-extensions-display-type-iconic, #xkit-extensions-display-type-normal { border-color: black; } " + - " #xkit-extensions-panel-left .xkit-extension.text-only { color: black; }" + - " #xkit-extensions-panel-left .xkit-extension.text-only.selected { text-decoration: underline; } " + - " #xkit-extensions-panel-right .xkit-message-display { color: black; } " + - " #xkit-extensions-panel-right .xkit-message-info { color: black; border-bottom: 1px solid black; } " + - " #xkit-extensions-panel-right.xkit-wide-panel { border-left: 1px solid black; background: white; } " + - " .xkit-gallery-extension, #xkit-gallery-toolbar, #xkit-gallery-search { color: black; border-color: black; } " + - " .xkit-gallery-extension .xkit-button { border-top: 1px solid black !important; }" + - " #xkit-control-panel-tabs div { color: black; border-color: black; } " + - " #xkit-control-panel-tabs { background: rgb(200,200,200); } " + - " #xkit-about-window-links {border-top: 1px solid black; } " + - " .notes .note > *, .notes .note blockquote { font-size: 14px; line-height: 22px; } " + - " .notes_outer_container.popover .note blockquote { font-size: 14px !important; } " + - " .xkit-notification {background-color: white !important; color: black; } " + - " .xkit-notification:hover { text-decoration: underline; } " + - " #xkit-window-shadow { background-color: rgba(0,0,0,0.77); } " + - " .xkit-window-buttons { border-top: 1px solid black; } "; + m_css += this.xkit_contrast_icons_css; } if (XKit.interface.where().inbox) { @@ -313,6 +357,42 @@ XKit.extensions.accesskit = new Object({ }, + xkit_contrast_icons_css: ` + .xkit-extension-setting, .xkit-extension-setting-separator { color: black !important; border-bottom: 1px solid rgb(100,100,100); } + .xkit-extension-setting-separator { background: rgb(230,230,230); } + #xkit-extensions-panel-top { border-bottom: 1px solid black; } + #xkit-extensions-panel-right, #xkit-extensions-panel-left, #xkit-extensions-panel-left-search { border-color: black; } + #xkit-extensions-panel-left .xkit-extension {color: black; border-color: black; } + .xkit-button { border-color: black; color: black; } + .xkit-button:hover { border-color: black; color: black; text-decoration: underline; } + #xkit-extensions-panel-top .description, #xkit-extensions-panel-top .description .details { color: black; } + .xkit-checkbox, .xkit-change-ext-setting-checkbox { color: black } .xkit-change-ext-setting-checkbox:hover, .xkit-checkbox:hover { text-decoration: underline; } + .xkit-extension-setting.checkbox .xkit-checkbox, .xkit-extension-setting .title { color: black; } + .xkit-checkbox.selected b { background-color: #184e98; } + .xkit-checkbox b { border: 1px solid black; } + #xkit-extensions-panel-right .xkit-others-panel .description { color: black; } + .xkit-progress-bar { border: 1px solid black; box-shadow: none; } + .xkit-progress-bar-inner { background: #154389; } + #xkit-about-window-text .subtitle, #xkit-about-window-links a {color: black; } + #xkit-extensions-panel-left .xkit-extension .title { color: black; } + #xkit-extensions-panel-left .xkit-extension.text-only.selected, #xkit-extensions-panel-left .xkit-extension.selected .title { color: black; font-weight: bold; text-decoration: underline; } + #xkit-extensions-display-type-iconic, #xkit-extensions-display-type-normal { border-color: black; } + #xkit-extensions-panel-left .xkit-extension.text-only { color: black; } + #xkit-extensions-panel-left .xkit-extension.text-only.selected { text-decoration: underline; } + #xkit-extensions-panel-right .xkit-message-display { color: black; } + #xkit-extensions-panel-right .xkit-message-info { color: black; border-bottom: 1px solid black; } + #xkit-extensions-panel-right.xkit-wide-panel { border-left: 1px solid black; background: white; } + .xkit-gallery-extension, #xkit-gallery-toolbar, #xkit-gallery-search { color: black; border-color: black; } + .xkit-gallery-extension .xkit-button { border-top: 1px solid black !important; } + #xkit-control-panel-tabs div { color: black; border-color: black; } + #xkit-control-panel-tabs { background: rgb(200,200,200); } + #xkit-about-window-links {border-top: 1px solid black; } + .xkit-notification {background-color: white !important; color: black; } + .xkit-notification:hover { text-decoration: underline; } + #xkit-window-shadow { background-color: rgba(0,0,0,0.77); } + .xkit-window-buttons { border-top: 1px solid black; } + `, + vis_caps: function() { if (!XKit.interface.where().dashboard && !XKit.interface.where().channel && !XKit.interface.where().inbox) {