diff --git a/MANIFEST.in b/MANIFEST.in index 400ddb238..f1520e78c 100644 --- a/MANIFEST.in +++ b/MANIFEST.in @@ -5,6 +5,8 @@ include CONTRIBUTING.md include CHANGELOG.md include tox.ini include .bumpversion.cfg +include *.yaml +include *.yml # explicit excludes exclude .travis.yml diff --git a/src/jupyter_contrib_nbextensions/nbextensions/accessibility_toolbar/README.md b/src/jupyter_contrib_nbextensions/nbextensions/accessibility_toolbar/README.md new file mode 100644 index 000000000..fdf4fa330 --- /dev/null +++ b/src/jupyter_contrib_nbextensions/nbextensions/accessibility_toolbar/README.md @@ -0,0 +1,107 @@ +# Accessibility Toolbar (AT4N) + +This extension adds a toolbar to your notebook with five separate accessibility tools. For a summary of the features +see: [Accessibility Toolbar](https://www.youtube.com/watch?v=8Nv3uosr8s4&t=7s) +The makeup of these tools is as follows: + +## Notebook Style Manager + +- The aim of this extension is to provide the user with the tools to customise their notebook according to their own + specifications. +- This feature includes support for text size and font changes, line and letter spacing changes and + various changes to the pages colours. +- There is also a predefined styles feature allowing for the saving and loading + of saved page styles. +- Feature summary can be found at: [Notebook Style Manager](https://youtu.be/8Butk1EhpSw) + +### Notes + +- All of the styles are saved when refreshing the page into localStorage. +- To create a predefined style choose your required styles, click on "Add new style", select a name and then + click save to save your style. +- Beware when selecting "Default style" option as this will wipe any style changes not saved as a predefined + style. + +![styles](./images/styles.png) + +--- + +## Spell Checker + +- The aim of this extension is to provide spell checker functionality for all markdown cells in a notebook. +- This feature includes the ability to be notify the user of spelling errors inline. +- It also provides a spell checker menu where words can be pasted and suggestions can be generated for the correct + spelling of miss-spelt words. +- New words can be added to the dictionary there. +- It is also possible to switch between bold or underlining notifications of spelling mistakes. +- Feature summary can be found at: [Spell Checker](https://youtu.be/WfMLjviZlMc) + +### Notes + +- The Spell Checker icon will turn green when it is enabled. +- The Spell Checker only works on markdown and **NOT** on code. + ![styles](./images/spellchecker.png) + +--- + +## Voice Control + +- The aim of this extension is to provide voice control support for some of the common actions on a Jupyter notebook. +- Once enabled the toolbar will listen for any of these key actions and will then execute them. +- The possible commands are as follows: + - Run: Run Selected Cell + - Run all: Run all Cells + - Restart Kernel: Restart the Kernel + - Shutdown Kernel: Shutdown the kernel + - Spell Checker on: Turns on the spell checking feature of the accessibility toolbar + - Spell Checker off: Turns off the spell checking feature of the accessibility toolbar + - View Commands: Show the table of available commands + - Stop Voice control: Turns off the voice control feature of the accessibility toolbar + - Show Planner: Opens the planner provided by the accessibility toolbar + - Hide Planner: Minimises the planner provided by the accessibility toolbar + - Dark Mode: Activates the dark theme provided by the accessibility toolbar + - High Contrast Mode: Activates the high contrast theme provided by the accessibility toolbar + - Default Mode: Reverts the notebook to the default theme +- Feature summary can be found at: [Voice Control](https://youtu.be/UepPF3ECV_s) + +###Notes + +- The Voice Control feature is only supported on Chrome at the moment. +- The Voice Control button will turn green when it is listening for a command. + ![styles](./images/voice.png) + +--- + +## Planner + +- The aim of the Planner is to provide a way for a user to plan out their notebook before and during its creation. +- The Planner is a Mardown text editor that is displayed at the side of the page and is saved together with the + notebook. +- The Planner includes all of the standard Markdown features, with shortcuts to some of them as buttons at the top. +- Feature summary can be found at: [Planner](https://youtu.be/smV4PZKINiM) + +###Notes + +- The planner automatically saves every minute and can be manually saved using the "Save" button +- There are various size options for images added to the planner: + - 20% width: imagewidth=planner-20 + - 30% width: imagewidth=planner-30 + - 40% width: imagewidth=planner-40 + - 50% width: imagewidth=planner-50 + - 60% width: imagewidth=planner-60 + - 70% width: imagewidth=planner-70 + - 80% width: imagewidth=planner-80 + - 90% width: imagewidth=planner-90 + - 100% width: imagewidth=planner-100 + +![styles](./images/planner.png) + +## Accessible Themes + +- The aim of the accessible themes is to provide a high contract and dark theme mode for users depending on their + preferences. +- The themes can be easily toggled from the menu provided. +- Feature summary can be found at: [Themes](https://youtu.be/EbC200P6KwM) + + ![styles](./images/darkmode.png) + ![styles](./images/contrastmode.png) diff --git a/src/jupyter_contrib_nbextensions/nbextensions/accessibility_toolbar/accessibility_toolbar.yaml b/src/jupyter_contrib_nbextensions/nbextensions/accessibility_toolbar/accessibility_toolbar.yaml new file mode 100644 index 000000000..95c265a6a --- /dev/null +++ b/src/jupyter_contrib_nbextensions/nbextensions/accessibility_toolbar/accessibility_toolbar.yaml @@ -0,0 +1,9 @@ +Type: Jupyter Notebook Extension +Name: Accessibility Toolbar +Description: + Adds a toolbar that provides five accessibility features for a notebook. + Helpful for people with dyslexia and visual impairment. +Link: README.md +Icon: images/toolbar.png +Main: main.js +Compatibility: 3.x, 4.x, 5.x, 6.x diff --git a/src/jupyter_contrib_nbextensions/nbextensions/accessibility_toolbar/font_style/color_control.js b/src/jupyter_contrib_nbextensions/nbextensions/accessibility_toolbar/font_style/color_control.js new file mode 100644 index 000000000..e4fd88f7f --- /dev/null +++ b/src/jupyter_contrib_nbextensions/nbextensions/accessibility_toolbar/font_style/color_control.js @@ -0,0 +1,420 @@ +define(["base/js/namespace", "jquery", "./spectrum"], function( + Jupyter, + $, + Spectrum +) { + "use strict"; + + //============= + var fs_style; + var style_Sheet; + var rule; + var current_backgroundColor = "#fff"; + var current_backgroundColorInput = "#f7f7f7"; + var current_fontColor = "#000"; + var current_page_background_Color = "#fff"; + var palette = [ + ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"], + ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"], + [ + "#f4cccc", + "#fce5cd", + "#fff2cc", + "#d9ead3", + "#d0e0e3", + "#cfe2f3", + "#d9d2e9", + "#ead1dc" + ], + [ + "#ea9999", + "#f9cb9c", + "#ffe599", + "#b6d7a8", + "#a2c4c9", + "#9fc5e8", + "#b4a7d6", + "#d5a6bd" + ], + [ + "#e06666", + "#f6b26b", + "#ffd966", + "#93c47d", + "#76a5af", + "#6fa8dc", + "#8e7cc3", + "#c27ba0" + ], + [ + "#c00", + "#e69138", + "#f1c232", + "#6aa84f", + "#45818e", + "#3d85c6", + "#674ea7", + "#a64d79" + ], + [ + "#900", + "#b45f06", + "#bf9000", + "#38761d", + "#134f5c", + "#0b5394", + "#351c75", + "#741b47" + ], + [ + "#600", + "#783f04", + "#7f6000", + "#274e13", + "#0c343d", + "#073763", + "#20124d", + "#4c1130" + ] + ]; + + // constructor + var Color_control = function() { + this.add_focus(); + }; + + // Methods to return the default values + Color_control.prototype.background_color_reset = function() { + return current_backgroundColor; + }; + Color_control.prototype.input_background_color_reset = function() { + return current_backgroundColorInput; + }; + + Color_control.prototype.font_color_reset = function() { + return current_fontColor; + }; + + Color_control.prototype.page_color_reset = function() { + return current_page_background_Color; + }; + + // Spectrum used to set the background colour + Color_control.prototype.background_color = function() { + var that = this; + $(function() { + $("#color-picker-background").spectrum({ + showPaletteOnly: true, + showSelectionPalette: true, + togglePaletteOnly: true, + togglePaletteMoreText: "more", + togglePaletteLessText: "less", + showInput: true, + preferredFormat: "hex", + showInitial: true, + palette: palette, + + change: function(color) { + current_backgroundColor = color.toHexString(); + current_backgroundColorInput = color.toHexString(); + that.set_color(); + localStorage.setItem( + "background_color", + JSON.stringify(current_backgroundColor) + ); + localStorage.setItem( + "background_input_color", + JSON.stringify(current_backgroundColor) + ); + } + }); + }); + }; + + // Sprectrum used to set the page background colour + Color_control.prototype.page_background_color = function() { + var that = this; + $(function() { + $("#color-picker-page-background").spectrum({ + showPaletteOnly: true, + togglePaletteOnly: true, + togglePaletteMoreText: "more", + togglePaletteLessText: "less", + showInput: true, + preferredFormat: "hex", + showInitial: true, + palette: palette, + + change: function(color) { + current_page_background_Color = color.toHexString(); + that.page_set_color(); + localStorage.setItem( + "page_color", + JSON.stringify(current_page_background_Color) + ); + } + }); + }); + }; + + // Spectrum used to set the font colour + Color_control.prototype.font_color = function() { + var that = this; + $(function() { + $("#color-picker").spectrum({ + showPaletteOnly: true, + togglePaletteOnly: true, + togglePaletteMoreText: "more", + togglePaletteLessText: "less", + showInput: true, + preferredFormat: "hex", + showInitial: true, + palette: palette, + + change: function(color) { + current_fontColor = color.toHexString(); + that.set_color(); + localStorage.setItem("font_color", JSON.stringify(current_fontColor)); + } + }); + }); + }; + + // Functionality used to set the specified colours on the page + Color_control.prototype.set_color = function(def) { + for (var i = 0; i < document.styleSheets.length; i++) { + if (/.*\/custom\/custom\.css/.test(document.styleSheets[i].href)) { + style_Sheet = document.styleSheets[i]; + break; + } + } + rule = style_Sheet.cssRules; + for (var i = 0; i < rule.length; i++) { + if (/\.input_area/.test(rule[i].selectorText)) { + fs_style = rule[i].style; + break; + } + } + + // Define style rules to be changed + var new_rule_1 = + ".input_area div { background-color :" + + current_backgroundColorInput + + "!important;" + + " }"; + var new_rule_default_1 = + ".input_area div { background-color :" + + current_backgroundColorInput + + "}"; + + var new_rule_2 = + "div.text_cell_render { background-color :" + + current_backgroundColor + + "!important;" + + "color : " + + current_fontColor + + "!important;" + + " }"; + + var new_rule_default_2 = + "div.text_cell_render { background-color :" + + current_backgroundColor + + "color : " + + current_fontColor + + "}"; + + var new_rule_3 = + "div.output_area pre { color :" + current_fontColor + "!important; }"; + var new_rule_default_3 = + "div.output_area pre { color :" + current_fontColor + "; }"; + + var new_rule_4 = + ".CodeMirror-scroll { background-color :" + + current_backgroundColor + + "!important;" + + "color : " + + current_fontColor + + "!important;" + + " }"; + + var new_rule_default_4 = + ".CodeMirror-scroll { background-color :" + + current_backgroundColor + + "color : " + + current_fontColor + + "}"; + var new_rule_5 = + ".editor-preview { background-color :" + + current_backgroundColor + + "!important;" + + "color : " + + current_fontColor + + "!important;" + + " }"; + var new_rule_default_5 = + ".editor-preview { background-color :" + + current_backgroundColor + + "color : " + + current_fontColor + + "}"; + + var new_rule_6 = + ".rendered_html pre { background-color : " + + current_backgroundColor + + " !important }"; + var new_rule_default_6 = + ".rendered_html pre { background-color : " + + current_backgroundColor + + " }"; + + var new_rule_7 = + ".rendered_html pre code { background-color : " + + current_backgroundColor + + " !important }"; + var new_rule_default_7 = + ".rendered_html pre code { background-color : " + + current_backgroundColor + + " }"; + + if (fs_style == null) { + style_Sheet.insertRule(def ? new_rule_default_1 : new_rule_1, 0); + style_Sheet.insertRule(def ? new_rule_default_2 : new_rule_2, 1); + style_Sheet.insertRule(def ? new_rule_default_3 : new_rule_3, 2); + style_Sheet.insertRule(def ? new_rule_default_4 : new_rule_4, 3); + style_Sheet.insertRule(def ? new_rule_default_5 : new_rule_5, 4); + style_Sheet.insertRule(def ? new_rule_default_6 : new_rule_6, 5); + style_Sheet.insertRule(def ? new_rule_default_7 : new_rule_7, 6); + } else { + // Remove old versions of rules + this.remove_style_rule(/.input_area div/); + this.remove_style_rule(/div.text_cell_render { background-color/); + this.remove_style_rule(/div.output_area pre { color/); + this.remove_style_rule(/.CodeMirror-scroll/); + this.remove_style_rule(/.editor-preview/); + this.remove_style_rule(/.rendered_html pre/); + this.remove_style_rule(/.rendered_html pre code/); + style_Sheet.insertRule(def ? new_rule_default_1 : new_rule_1, 0); + style_Sheet.insertRule(def ? new_rule_default_2 : new_rule_2, 1); + style_Sheet.insertRule(def ? new_rule_default_3 : new_rule_3, 2); + style_Sheet.insertRule(def ? new_rule_default_4 : new_rule_4, 3); + style_Sheet.insertRule(def ? new_rule_default_5 : new_rule_5, 4); + style_Sheet.insertRule(def ? new_rule_default_6 : new_rule_6, 5); + style_Sheet.insertRule(def ? new_rule_default_7 : new_rule_7, 6); + } + rule = style_Sheet.cssRules; + }; + + // Functionality to set the page background colour + Color_control.prototype.page_set_color = function(def) { + for (var i = 0; i < document.styleSheets.length; i++) { + if (/.*\/custom\/custom\.css/.test(document.styleSheets[i].href)) { + style_Sheet = document.styleSheets[i]; + break; + } + } + rule = style_Sheet.cssRules; + for (var i = 0; i < rule.length; i++) { + if (/notebook-container/.test(rule[i].selectorText)) { + fs_style = rule[i].style; + break; + } + } + + var new_rule = + "#notebook-container { background-color :" + + current_page_background_Color + + "!important; }"; + + var new_rule_default = + "#notebook-container { background-color :" + + current_page_background_Color + + "}"; + + if (fs_style == null) { + style_Sheet.insertRule(def ? new_rule_default : new_rule, 0); + } else { + this.remove_style_rule(/#notebook-container/); + style_Sheet.insertRule(def ? new_rule_default : new_rule, 0); + } + rule = style_Sheet.cssRules; + }; + + // Add focus support to the spectrum + Color_control.prototype.add_focus = function() { + $("head").append(''); + var newStyleElement = $("head").children(":last"); + newStyleElement.html( + ".sp-palette .sp-thumb-el.sp-thumb-focus {outline: 1px dotted #212121;outline: 5px auto -webkit-focus-ring-color;}" + ); + }; + + Color_control.prototype.get_background_color = function() { + return current_backgroundColor; + }; + + Color_control.prototype.get_page_color = function() { + return current_page_background_Color; + }; + + Color_control.prototype.get_font_color = function() { + return current_fontColor; + }; + + Color_control.prototype.get_input_background_color = function() { + return current_backgroundColorInput; + }; + + Color_control.prototype.set_background_color = function(background, def) { + current_backgroundColor = background; + if (!def) { + localStorage.setItem("background_color", JSON.stringify(background)); + } + this.set_color(def); + $("#color-picker-background").spectrum("set", background); + }; + + Color_control.prototype.set_background_input_color = function( + background_input, + def + ) { + current_backgroundColorInput = background_input; + if (!def) { + localStorage.setItem( + "background_input_color", + JSON.stringify(background_input) + ); + } + this.set_color(def); + }; + + Color_control.prototype.set_font_color = function(font, def) { + current_fontColor = font; + if (!def) { + localStorage.setItem("font_color", JSON.stringify(font)); + } + this.set_color(def); + $("#color-picker").spectrum("set", font); + }; + + Color_control.prototype.set_page_color = function(page, def) { + current_page_background_Color = page; + if (!def) { + localStorage.setItem("page_color", JSON.stringify(page)); + } + this.set_color(def); + this.page_set_color(def); + $("#color-picker-page-background").spectrum("set", page); + }; + + // Remove a style rule from the stylesheet + Color_control.prototype.remove_style_rule = function(value) { + for (var j = 0; j < rule.length; j++) { + if (value.test(rule[j].cssText)) { + style_Sheet.deleteRule(j); + rule = style_Sheet.cssRules; + } + } + }; + + return Color_control; +}); diff --git a/src/jupyter_contrib_nbextensions/nbextensions/accessibility_toolbar/font_style/font_control.js b/src/jupyter_contrib_nbextensions/nbextensions/accessibility_toolbar/font_style/font_control.js new file mode 100644 index 000000000..cd19e3c8d --- /dev/null +++ b/src/jupyter_contrib_nbextensions/nbextensions/accessibility_toolbar/font_style/font_control.js @@ -0,0 +1,267 @@ +define(["base/js/namespace", "jquery"], function(Jupyter, $) { + "use strict"; + + var Font_control = function() { + var paddingBot = 0; + var paddingTop = 0; + var fs_style; + var style_file; + const font_value_list = [ + "Helvetica Neue, Helvetica, Arial, sans-serif", + "monospace", + "Arial, Helvetica, sans-serif", + "'Arial Black', Gadget, sans-serif", + "'Comic Sans MS', cursive, sans-serif", + "Georgia, serif", + "Impact, Charcoal, sans-serif, cursive, sans-serif", + "'Lucida Sans Unicode', 'Lucida Grande', sans-serif", + "'Palatino Linotype', 'Book Antiqua', Palatino, serif", + "Tahoma, Geneva, sans-serif", + "'Times New Roman', Times, serif", + "Verdana, Geneva, sans-serif" + ]; + + const font_name_list = [ + "Default", + "Monospace", + "Arial", + "Arial Black", + "Comic Sans MS", + "Georgia", + "Impact", + "Lucida Sans Unicode", + "Palatino Linotype", + "Tahoma", + "Times New Roman", + "Verdana" + ]; + const font_size_list = [ + "10", + "12", + "14", + "20", + "28", + "32", + "48", + "56", + "64", + "72" + ]; + + //Get the custom.css file from Jupyter notebook and initialize the select-box for font name + Font_control.prototype.font_name = function() { + for (i = 0; i < document.styleSheets.length; i++) { + if (/.*\/custom\/custom\.css/.test(document.styleSheets[i].href)) { + style_file = document.styleSheets[i]; + break; + } + } + for (i = 0; i < style_file.cssRules.length; i++) { + if (/\.CodeMirror pre/.test(style_file.cssRules[i].selectorText)) { + fs_style = style_file.cssRules[i].style; + break; + } + } + if (fs_style == null) { + style_file.insertRule( + ".CodeMirror pre { font-size: 14px; padding-bottom: 0px; padding-top:0px}", + 0 + ); + style_file.insertRule(".CodeMirror span{ font-family: monospace; }", 1); + style_file.insertRule( + "div.output_area pre{ font-family: monospace; }", + 2 + ); + style_file.insertRule( + ".CodeMirror pre span{ font-family: monospace; }", + 3 + ); + fs_style = style_file.cssRules; + } + + var fs_font_name = $("", { + id: "font_size", + class: "select-box", + style: "float:right" + }); + for (var size in font_size_list) { + if (font_size_list[size] == "14") { + fs_font_size.append( + $("