Skip to content

Commit

Permalink
added color picker & color picker widgets to the code editor tab. Dar…
Browse files Browse the repository at this point in the history 
…kmode ignores the color picker and widgets
  • Loading branch information
@coloshword
coloshword committed May 24, 2024
1 parent 2f8bab3 commit 8bfceca
Show file tree
Hide file tree
Showing 5 changed files with 16 additions and 168 deletions.
4 changes: 1 addition & 3 deletions dist/editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<script src="lib/showdown.min.js"></script>
<script src="lib/scrolllock.js"></script>
<script src="lib/toastr.min.js"></script>
<script src="lib/darkmode.min.js"></script>
<script src="lib/darkmode.min.js"></script>
</head>
<body>
<div class="root-container">
Expand Down Expand Up @@ -113,8 +113,6 @@ <h4></h4>
window.Commands = window.Editor.CommandTab;
window.Commands.Reset();
window.EditorDictionary.Initialize({});
let avatar = document.querySelector('.avatar');
avatar.classList.add("darkmode-ignore")
};
})();
</script>
Expand Down
Binary file removed dist/lib/.darkmode.min.js.swp
View file
Binary file not shown.
172 changes: 15 additions & 157 deletions dist/lib/darkmode.min.js
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,19 @@
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;
}
.darkmode-layer--button {
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 {
Expand All @@ -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;
Expand All @@ -75,15 +51,15 @@ class Darkmode {
}
.darkmode-toggle--white {
background: ${options.buttonColorLight};
background: ${e.buttonColorLight};
}
.darkmode-toggle--inactive {
display: none;
}
.darkmode-background {
background: ${options.backgroundColor};
background: ${e.backgroundColor};
position: fixed;
pointer-events: none;
z-index: -10;
Expand Down Expand Up @@ -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}}
7 changes: 0 additions & 7 deletions src/editor/editor-tab.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
1 change: 0 additions & 1 deletion src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

0 comments on commit 8bfceca

Please sign in to comment.