diff --git a/dist/editor.html b/dist/editor.html
index 5084c04..e9ef521 100644
--- a/dist/editor.html
+++ b/dist/editor.html
@@ -14,7 +14,7 @@
-
+
@@ -113,8 +113,6 @@
window.Commands = window.Editor.CommandTab;
window.Commands.Reset();
window.EditorDictionary.Initialize({});
- let avatar = document.querySelector('.avatar');
- avatar.classList.add("darkmode-ignore")
};
})();
diff --git a/dist/lib/.darkmode.min.js.swp b/dist/lib/.darkmode.min.js.swp
deleted file mode 100644
index b439667..0000000
Binary files a/dist/lib/.darkmode.min.js.swp and /dev/null differ
diff --git a/dist/lib/darkmode.min.js b/dist/lib/darkmode.min.js
index 87ca238..fe0c38d 100644
--- a/dist/lib/darkmode.min.js
+++ b/dist/lib/darkmode.min.js
@@ -1,33 +1,9 @@
-const IS_BROWSER = typeof window !== 'undefined';
-
-class Darkmode {
- constructor(options) {
- if (!IS_BROWSER) {
- return;
- }
-
- const defaultOptions = {
- bottom: '32px',
- right: '32px',
- left: 'unset',
- time: '0.3s',
- mixColor: '#fff',
- backgroundColor: '#fff',
- buttonColorDark: '#100f2c',
- buttonColorLight: '#fff',
- label: '',
- saveInCookies: true,
- autoMatchOsTheme: true
- };
-
- options = Object.assign({}, defaultOptions, options);
-
- const css = `
+const IS_BROWSER="undefined"!=typeof window;class Darkmode{constructor(e){if(!IS_BROWSER)return;let t={bottom:"32px",right:"32px",left:"unset",time:"0.3s",mixColor:"#fff",backgroundColor:"#fff",buttonColorDark:"#100f2c",buttonColorLight:"#fff",label:"",saveInCookies:!0,autoMatchOsTheme:!0};e=Object.assign({},t,e);let a=`
.darkmode-layer {
position: fixed;
pointer-events: none;
- background: ${options.mixColor};
- transition: all ${options.time} ease;
+ background: ${e.mixColor};
+ transition: all ${e.time} ease;
mix-blend-mode: difference;
}
@@ -35,9 +11,9 @@ class Darkmode {
width: 2.9rem;
height: 2.9rem;
border-radius: 50%;
- right: ${options.right};
- bottom: ${options.bottom};
- left: ${options.left};
+ right: ${e.right};
+ bottom: ${e.bottom};
+ left: ${e.left};
}
.darkmode-layer--simple {
@@ -58,15 +34,15 @@ class Darkmode {
}
.darkmode-toggle {
- background: ${options.buttonColorDark};
+ background: ${e.buttonColorDark};
width: 3rem;
height: 3rem;
position: fixed;
border-radius: 50%;
border:none;
- right: ${options.right};
- bottom: ${options.bottom};
- left: ${options.left};
+ right: ${e.right};
+ bottom: ${e.bottom};
+ left: ${e.left};
cursor: pointer;
transition: all 0.5s ease;
display: flex;
@@ -75,7 +51,7 @@ class Darkmode {
}
.darkmode-toggle--white {
- background: ${options.buttonColorLight};
+ background: ${e.buttonColorLight};
}
.darkmode-toggle--inactive {
@@ -83,7 +59,7 @@ class Darkmode {
}
.darkmode-background {
- background: ${options.backgroundColor};
+ background: ${e.backgroundColor};
position: fixed;
pointer-events: none;
z-index: -10;
@@ -114,124 +90,6 @@ class Darkmode {
@supports (-ms-ime-align:auto), (-ms-accelerator:true) {
.darkmode-toggle {display: none !important}
}
- `;
-
- const layer = document.createElement('div');
- const button = document.createElement('button');
- const background = document.createElement('div');
-
- button.innerHTML = options.label;
- button.classList.add('darkmode-toggle--inactive');
- layer.classList.add('darkmode-layer');
- background.classList.add('darkmode-background');
-
- const darkmodeActivated =
- window.localStorage.getItem('darkmode') === 'true';
- const preferedThemeOs =
- options.autoMatchOsTheme &&
- window.matchMedia('(prefers-color-scheme: dark)').matches;
- const darkmodeNeverActivatedByAction =
- window.localStorage.getItem('darkmode') === null;
-
- if (
- (darkmodeActivated === true && options.saveInCookies) ||
- (darkmodeNeverActivatedByAction && preferedThemeOs)
- ) {
- layer.classList.add(
- 'darkmode-layer--expanded',
- 'darkmode-layer--simple',
- 'darkmode-layer--no-transition'
- );
- button.classList.add('darkmode-toggle--white');
- document.body.classList.add('darkmode--activated');
- }
-
- document.body.insertBefore(button, document.body.firstChild);
- document.body.insertBefore(layer, document.body.firstChild);
- document.body.insertBefore(background, document.body.firstChild);
-
- this.addStyle(css);
-
- this.button = button;
- this.layer = layer;
- this.saveInCookies = options.saveInCookies;
- this.time = options.time;
- }
-
- addStyle(css) {
- const linkElement = document.createElement('link');
-
- linkElement.setAttribute('rel', 'stylesheet');
- linkElement.setAttribute('type', 'text/css');
- linkElement.setAttribute(
- 'href',
- 'data:text/css;charset=UTF-8,' + encodeURIComponent(css)
- );
- document.head.appendChild(linkElement);
- }
-
- showWidget() {
- if (!IS_BROWSER) {
- return;
- }
- const button = this.button;
- const layer = this.layer;
- const time = parseFloat(this.time) * 1000;
-
- button.classList.add('darkmode-toggle');
- button.classList.remove('darkmode-toggle--inactive');
- button.setAttribute("aria-label", "Activate dark mode");
- button.setAttribute("aria-checked", "false");
- button.setAttribute("role", "checkbox");
- layer.classList.add('darkmode-layer--button');
-
- button.addEventListener('click', () => {
- const isDarkmode = this.isActivated();
-
- if (!isDarkmode) {
- layer.classList.add('darkmode-layer--expanded');
- button.setAttribute('disabled', true);
- setTimeout(() => {
- layer.classList.add('darkmode-layer--no-transition');
- layer.classList.add('darkmode-layer--simple');
- button.removeAttribute('disabled');
- }, time);
- } else {
- layer.classList.remove('darkmode-layer--simple');
- button.setAttribute('disabled', true);
- setTimeout(() => {
- layer.classList.remove('darkmode-layer--no-transition');
- layer.classList.remove('darkmode-layer--expanded');
- button.removeAttribute('disabled');
- }, 1);
- }
-
- button.classList.toggle('darkmode-toggle--white');
- document.body.classList.toggle('darkmode--activated');
- window.localStorage.setItem('darkmode', !isDarkmode);
- });
- }
-
- toggle() {
- if (!IS_BROWSER) {
- return;
- }
- const layer = this.layer;
- const isDarkmode = this.isActivated();
- const button = this.button;
-
- layer.classList.toggle('darkmode-layer--simple');
- document.body.classList.toggle('darkmode--activated');
- window.localStorage.setItem('darkmode', !isDarkmode);
- button.setAttribute("aria-label", "De-activate dark mode");
- button.setAttribute("aria-checked", "true");
-
- }
-
- isActivated() {
- if (!IS_BROWSER) {
- return null;
- }
- return document.body.classList.contains('darkmode--activated');
- }
-}
+ `,d=document.createElement("div"),o=document.createElement("button"),i=document.createElement("div");o.innerHTML=e.label,o.classList.add("darkmode-toggle--inactive"),d.classList.add("darkmode-layer"),i.classList.add("darkmode-background");let r="true"===window.localStorage.getItem("darkmode"),s=e.autoMatchOsTheme&&window.matchMedia("(prefers-color-scheme: dark)").matches,l=null===window.localStorage.getItem("darkmode");(!0===r&&e.saveInCookies||l&&s)&&(d.classList.add("darkmode-layer--expanded","darkmode-layer--simple","darkmode-layer--no-transition"),o.classList.add("darkmode-toggle--white"),document.body.classList.add("darkmode--activated")),document.body.insertBefore(o,document.body.firstChild),document.body.insertBefore(d,document.body.firstChild),document.body.insertBefore(i,document.body.firstChild),this.addStyle(a),this.button=o,this.layer=d,this.saveInCookies=e.saveInCookies,this.time=e.time}updateWidgetBoxStyle(e){let t=document.querySelector("#cp-widget-box-style");t&&(t.textContent=`
+ .cp-widget-box {
+ mix-blend-mode: ${e?"difference":"normal"}`)}addStyle(e){let t=document.createElement("link");t.setAttribute("rel","stylesheet"),t.setAttribute("type","text/css"),t.setAttribute("href","data:text/css;charset=UTF-8,"+encodeURIComponent(e)),document.head.appendChild(t);let a=document.createElement("style");a.setAttribute("id","cp-widget-box-style"),document.head.appendChild(a);let d=this.isActivated();this.updateWidgetBoxStyle(d)}showWidget(){if(!IS_BROWSER)return;let e=this.button,t=this.layer,a=1e3*parseFloat(this.time);e.classList.add("darkmode-toggle"),e.classList.remove("darkmode-toggle--inactive"),e.setAttribute("aria-label","Activate dark mode"),e.setAttribute("aria-checked","false"),e.setAttribute("role","checkbox"),t.classList.add("darkmode-layer--button"),e.addEventListener("click",()=>{let d=this.isActivated();d?(t.classList.remove("darkmode-layer--simple"),e.setAttribute("disabled",!0),setTimeout(()=>{t.classList.remove("darkmode-layer--no-transition"),t.classList.remove("darkmode-layer--expanded"),e.removeAttribute("disabled")},1)):(t.classList.add("darkmode-layer--expanded"),e.setAttribute("disabled",!0),setTimeout(()=>{t.classList.add("darkmode-layer--no-transition"),t.classList.add("darkmode-layer--simple"),e.removeAttribute("disabled")},a)),e.classList.toggle("darkmode-toggle--white"),document.body.classList.toggle("darkmode--activated"),window.localStorage.setItem("darkmode",!d),this.updateWidgetBoxStyle(!d)})}toggle(){if(!IS_BROWSER)return;let e=this.layer,t=this.isActivated(),a=this.button;e.classList.toggle("darkmode-layer--simple"),document.body.classList.toggle("darkmode--activated"),window.localStorage.setItem("darkmode",!t),this.updateWidgetBoxStyle(!t),a.setAttribute("aria-label","De-activate dark mode"),a.setAttribute("aria-checked","true")}isActivated(){return IS_BROWSER?document.body.classList.contains("darkmode--activated"):null}}
diff --git a/src/editor/editor-tab.ts b/src/editor/editor-tab.ts
index 63a993a..25ba1b8 100644
--- a/src/editor/editor-tab.ts
+++ b/src/editor/editor-tab.ts
@@ -54,13 +54,6 @@ export class EditorTab extends Tab {
OnColorPickerCreate: (cpDiv) => {
var view = this.Galapagos.CodeMirror;
// only add the cpDiv if it doesn't already exist in the DOM
- let widget = document.querySelector(".cp-widget-wrap") as HTMLElement;
- if (widget) {
- widget.contentEditable = "true"
- widget.classList.add("darkmode-ignore")
- console.log(widget);
- console.log("done")
- }
if(!view.dom.querySelector("#colorPickerDiv")) {
cpDiv.classList.add("darkmode-ignore")
view.dom.appendChild(cpDiv);
diff --git a/src/main.ts b/src/main.ts
index bb001a1..f9f97e7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -24,7 +24,6 @@ export class TurtleEditor {
TurtleEditor.PostMessage = PostMessage;
// Initialize the darkmode
this.Darkmode = new Darkmode();
- this.Darkmode.showWidget();
// Initialize the tabs
this.EditorTabs = [new EditorTab($(Container).children("div.editor").get(0)!, this)];
this.CommandTab = new CommandTab($(Container).children("div.commands").get(0)!, this);