From 6e2fb67d76bc044e0e3f761815cf927923fe21a6 Mon Sep 17 00:00:00 2001 From: Ryan Adolf Date: Thu, 24 Oct 2019 16:32:14 -0700 Subject: [PATCH 1/3] Theme configuration through url --- src/web/App.mjs | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/web/App.mjs b/src/web/App.mjs index 96638f83..bb8d8c9a 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -453,6 +453,7 @@ class App { * Searches the URI parameters for recipe and input parameters. * If recipe is present, replaces the current recipe with the recipe provided in the URI. * If input is present, decodes and sets the input to the one provided in the URI. + * If theme is present, uses the theme. * * @fires Manager#statechange */ @@ -491,6 +492,10 @@ class App { } catch (err) {} } + if (this.uriParams.theme) { + document.querySelector(":root").className = this.uriParams.theme; + } + this.autoBakePause = false; window.dispatchEvent(this.manager.statechange); } From 061533bb57426aeaa2f45d72cc19f1faf316e062 Mon Sep 17 00:00:00 2001 From: Ryan Adolf Date: Thu, 24 Oct 2019 16:37:10 -0700 Subject: [PATCH 2/3] Document theme option in README --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 76203bcf..d1bd08de 100755 --- a/README.md +++ b/README.md @@ -71,6 +71,12 @@ You can use as many operations as you like in simple or complex ways. Some examp - It should be noted that none of your recipe configuration or input (either text or files) is ever sent to the CyberChef web server - all processing is carried out within your browser, on your own computer. - Due to this feature, CyberChef can be downloaded and run locally. You can use the link in the top left corner of the app to download a full copy of CyberChef and drop it into a virtual machine, share it with other people, or host it in a closed network. +## Url prefilling + +By manipulation of CyberChef's url hash, you can change the initial settings with which the page opens. +The format is `https://gchq.github.io/CyberChef/#recipe=Function()&input=...` + +Supported options are `recipe`, `input`, and `theme`. ## Browser support From 383aab5f8502e2d2aefcdd8ec66829b0f727e7ea Mon Sep 17 00:00:00 2001 From: n1474335 Date: Sun, 27 Oct 2019 15:17:06 +0000 Subject: [PATCH 3/3] Improved theme selection. Added changeTheme method. --- src/web/App.mjs | 3 ++- src/web/waiters/OptionsWaiter.mjs | 18 ++++++++++++++++-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/web/App.mjs b/src/web/App.mjs index bb8d8c9a..1039b7b2 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -492,8 +492,9 @@ class App { } catch (err) {} } + // Read in theme from URI params if (this.uriParams.theme) { - document.querySelector(":root").className = this.uriParams.theme; + this.manager.options.changeTheme(Utils.escapeHtml(this.uriParams.theme)); } this.autoBakePause = false; diff --git a/src/web/waiters/OptionsWaiter.mjs b/src/web/waiters/OptionsWaiter.mjs index a19c6066..5ef517d4 100755 --- a/src/web/waiters/OptionsWaiter.mjs +++ b/src/web/waiters/OptionsWaiter.mjs @@ -153,14 +153,28 @@ class OptionsWaiter { /** - * Changes the theme by setting the class of the element. + * Theme change event listener * * @param {Event} e */ themeChange(e) { const themeClass = e.target.value; - document.querySelector(":root").className = themeClass; + this.changeTheme(themeClass); + } + + + /** + * Changes the theme by setting the class of the element. + * + * @param (string} theme + */ + changeTheme(theme) { + document.querySelector(":root").className = theme; + + // Update theme selection + const themeSelect = document.getElementById("theme"); + themeSelect.selectedIndex = themeSelect.querySelector(`option[value="${theme}"`).index; }