Skip to content

Commit

Permalink
darkmode ignores cpwidgets and Color Picker
Browse files Browse the repository at this point in the history
  • Loading branch information
@coloshword
coloshword committed May 24, 2024
1 parent 56731bc commit 2f8bab3
Show file tree
Hide file tree
Showing 8 changed files with 262 additions and 7 deletions.
4 changes: 3 additions & 1 deletion dist/editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,10 @@ <h4></h4>
window.Commands = window.Editor.CommandTab;
window.Commands.Reset();
window.EditorDictionary.Initialize({});
let avatar = document.querySelector('.avatar');
avatar.classList.add("darkmode-ignore")
};
})();
</script>
</body>
</html>
</html>
Binary file added dist/lib/.darkmode.min.js.swp
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion dist/lib/chatlogo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -743,4 +743,4 @@
100% {
transform: translate(0) scale(0.7, 0.7);
}
}
}
238 changes: 237 additions & 1 deletion dist/lib/darkmode.min.js
View file
Original file line number Diff line number Diff line change
@@ -1 +1,237 @@
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("darkmode-js",[],t):"object"==typeof exports?exports["darkmode-js"]=t():e["darkmode-js"]=t()}("undefined"!=typeof self?self:this,(function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){var o=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(e,n):{};o.get||o.set?Object.defineProperty(t,n,o):t[n]=e[n]}return t.default=e,t}(n(1));var r=o.default;t.default=r,o.IS_BROWSER&&function(e){e.Darkmode=o.default}(window),e.exports=t.default},function(e,t,n){"use strict";function o(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.IS_BROWSER=void 0;var r="undefined"!=typeof window;t.IS_BROWSER=r;var a=function(){function e(t){if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),r){t=Object.assign({},{bottom:"32px",right:"32px",left:"unset",time:"0.3s",mixColor:"#fff",backgroundColor:"#fff",buttonColorDark:"#100f2c",buttonColorLight:"#fff",label:"",saveInCookies:!0,autoMatchOsTheme:!0},t);var n="\n .darkmode-layer {\n position: fixed;\n pointer-events: none;\n background: ".concat(t.mixColor,";\n transition: all ").concat(t.time," ease;\n mix-blend-mode: difference;\n }\n\n .darkmode-layer--button {\n width: 2.9rem;\n height: 2.9rem;\n border-radius: 50%;\n right: ").concat(t.right,";\n bottom: ").concat(t.bottom,";\n left: ").concat(t.left,";\n }\n\n .darkmode-layer--simple {\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n transform: scale(1) !important;\n }\n\n .darkmode-layer--expanded {\n transform: scale(100);\n border-radius: 0;\n }\n\n .darkmode-layer--no-transition {\n transition: none;\n }\n\n .darkmode-toggle {\n background: ").concat(t.buttonColorDark,";\n width: 3rem;\n height: 3rem;\n position: fixed;\n border-radius: 50%;\n border:none;\n right: ").concat(t.right,";\n bottom: ").concat(t.bottom,";\n left: ").concat(t.left,";\n cursor: pointer;\n transition: all 0.5s ease;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .darkmode-toggle--white {\n background: ").concat(t.buttonColorLight,";\n }\n\n .darkmode-toggle--inactive {\n display: none;\n }\n\n .darkmode-background {\n background: ").concat(t.backgroundColor,";\n position: fixed;\n pointer-events: none;\n z-index: -10;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n }\n\n img, .darkmode-ignore {\n isolation: isolate;\n display: inline-block;\n }\n\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .darkmode-toggle {display: none !important}\n }\n\n @supports (-ms-ime-align:auto), (-ms-accelerator:true) {\n .darkmode-toggle {display: none !important}\n }\n "),o=document.createElement("div"),a=document.createElement("button"),i=document.createElement("div");a.innerHTML=t.label,a.classList.add("darkmode-toggle--inactive"),o.classList.add("darkmode-layer"),i.classList.add("darkmode-background");var d="true"===window.localStorage.getItem("darkmode"),s=t.autoMatchOsTheme&&window.matchMedia("(prefers-color-scheme: dark)").matches,l=null===window.localStorage.getItem("darkmode");(!0===d&&t.saveInCookies||l&&s)&&(o.classList.add("darkmode-layer--expanded","darkmode-layer--simple","darkmode-layer--no-transition"),a.classList.add("darkmode-toggle--white"),document.body.classList.add("darkmode--activated")),document.body.insertBefore(a,document.body.firstChild),document.body.insertBefore(o,document.body.firstChild),document.body.insertBefore(i,document.body.firstChild),this.addStyle(n),this.button=a,this.layer=o,this.saveInCookies=t.saveInCookies,this.time=t.time}}var t,n,a;return t=e,(n=[{key:"addStyle",value:function(e){var 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)}},{key:"showWidget",value:function(){var e=this;if(r){var t=this.button,n=this.layer,o=1e3*parseFloat(this.time);t.classList.add("darkmode-toggle"),t.classList.remove("darkmode-toggle--inactive"),t.setAttribute("aria-label","Activate dark mode"),t.setAttribute("aria-checked","false"),t.setAttribute("role","checkbox"),n.classList.add("darkmode-layer--button"),t.addEventListener("click",(function(){var r=e.isActivated();r?(n.classList.remove("darkmode-layer--simple"),t.setAttribute("disabled",!0),setTimeout((function(){n.classList.remove("darkmode-layer--no-transition"),n.classList.remove("darkmode-layer--expanded"),t.removeAttribute("disabled")}),1)):(n.classList.add("darkmode-layer--expanded"),t.setAttribute("disabled",!0),setTimeout((function(){n.classList.add("darkmode-layer--no-transition"),n.classList.add("darkmode-layer--simple"),t.removeAttribute("disabled")}),o)),t.classList.toggle("darkmode-toggle--white"),document.body.classList.toggle("darkmode--activated"),window.localStorage.setItem("darkmode",!r)}))}}},{key:"toggle",value:function(){if(r){var e=this.layer,t=this.isActivated(),n=this.button;e.classList.toggle("darkmode-layer--simple"),document.body.classList.toggle("darkmode--activated"),window.localStorage.setItem("darkmode",!t),n.setAttribute("aria-label","De-activate dark mode"),n.setAttribute("aria-checked","true")}}},{key:"isActivated",value:function(){return r?document.body.classList.contains("darkmode--activated"):null}}])&&o(t.prototype,n),a&&o(t,a),e}();t.default=a}])}));
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 = `
.darkmode-layer {
position: fixed;
pointer-events: none;
background: ${options.mixColor};
transition: all ${options.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};
}
.darkmode-layer--simple {
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: scale(1) !important;
}
.darkmode-layer--expanded {
transform: scale(100);
border-radius: 0;
}
.darkmode-layer--no-transition {
transition: none;
}
.darkmode-toggle {
background: ${options.buttonColorDark};
width: 3rem;
height: 3rem;
position: fixed;
border-radius: 50%;
border:none;
right: ${options.right};
bottom: ${options.bottom};
left: ${options.left};
cursor: pointer;
transition: all 0.5s ease;
display: flex;
justify-content: center;
align-items: center;
}
.darkmode-toggle--white {
background: ${options.buttonColorLight};
}
.darkmode-toggle--inactive {
display: none;
}
.darkmode-background {
background: ${options.backgroundColor};
position: fixed;
pointer-events: none;
z-index: -10;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.darkmode-ignore {
isolation: isolate;
display: inline-block;
z-index: 5000;
}
.cp-widget-wrap {
background-color: white;
}
.cp-widget-box {
mix-blend-mode: difference;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.darkmode-toggle {display: none !important}
}
@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');
}
}
2 changes: 1 addition & 1 deletion dist/lib/editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,4 +191,4 @@ code {

#Dialog-Procedures ul li:not(:last-child) {
border-bottom: 1px solid #E0E0E0;
}
}
2 changes: 1 addition & 1 deletion readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,4 @@ At this moment, the client will automatically connect to `http://localhost:3000/
Contributions to this project are welcome.

### License
Copyright (C) 2023 John Chen. All rights reserved.
Copyright (C) 2023 John Chen. All rights reserved.
20 changes: 18 additions & 2 deletions src/editor/editor-tab.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,23 @@ export class EditorTab extends Tab {
OnExplain: (Diagnostic, Context) => this.Editor.CommandTab.ExplainDiagnostic({
Message: NetLogoUtils.PostprocessLintMessage(Diagnostic.message),
Code: this.Galapagos.GetCodeSlice(Diagnostic.from, Diagnostic.to)
}, Context, true)
}, Context, true),
// add Color Picker create handler
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);
}
},
});
}
// #endregion
Expand Down Expand Up @@ -164,4 +180,4 @@ export class EditorTab extends Tab {
return Names;
}
// #endregion
}
}
1 change: 1 addition & 0 deletions src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ 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 2f8bab3

Please sign in to comment.