134 lines
3.5 KiB
TypeScript
134 lines
3.5 KiB
TypeScript
import { ModelRef, Ref } from 'vue';
|
|
import { Dark } from 'quasar';
|
|
import { setLocale as setDateTimeLocale } from './datetime';
|
|
import { i18n } from 'src/boot/i18n';
|
|
import { fileToBase64 } from './file';
|
|
|
|
export enum Theme {
|
|
Light = 'light',
|
|
Dark = 'dark',
|
|
Auto = 'auto',
|
|
}
|
|
|
|
/**
|
|
* This is used to detect current theme that set before entering app.
|
|
*
|
|
* **Warning:** This must be used after initialize vue and quasar as it use quasar api.
|
|
*/
|
|
export function initTheme(): Theme {
|
|
const current = localStorage.getItem('currentTheme') as Theme | null;
|
|
if (!current) return setTheme(Theme.Auto);
|
|
return setTheme(current);
|
|
}
|
|
|
|
/**
|
|
* This is used to set quasar theme through quasar api.
|
|
*
|
|
* **Warning:** Must be called after initialize vue and quasar.
|
|
*/
|
|
export function setTheme(theme: Theme): Theme {
|
|
switch (theme) {
|
|
case Theme.Light:
|
|
case Theme.Dark:
|
|
localStorage.setItem('currentTheme', theme);
|
|
Dark.set(theme === Theme.Dark);
|
|
return theme;
|
|
default:
|
|
localStorage.setItem('currentTheme', Theme.Auto);
|
|
Dark.set(window.matchMedia('(prefers-color-scheme: dark)').matches);
|
|
return Theme.Auto;
|
|
}
|
|
}
|
|
|
|
export enum Lang {
|
|
English = 'eng',
|
|
Thai = 'tha',
|
|
}
|
|
|
|
/**
|
|
* This is used to get remembered language and use it.
|
|
*
|
|
* **Warning:** Must be used after initialize vue and vue-i18n
|
|
*/
|
|
export function initLang(): Lang {
|
|
const current = localStorage.getItem('currentLanguage') as Lang | null;
|
|
|
|
switch (current) {
|
|
case Lang.English:
|
|
case Lang.Thai:
|
|
return setLang(current);
|
|
default:
|
|
return setLang(Lang.Thai);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* This is used to set language and also remember the language set.
|
|
*
|
|
* **Warning:** Must be used after initialize vue and vue-i18n
|
|
*/
|
|
export function setLang(lang: Lang): Lang {
|
|
const { locale } = i18n.global;
|
|
locale.value = lang;
|
|
localStorage.setItem('currentLanguage', lang);
|
|
|
|
// TODO: Make date time get locale from i18n instead of telling it to use specific lang.
|
|
setDateTimeLocale(lang === Lang.English ? 'en' : 'th');
|
|
|
|
return lang;
|
|
}
|
|
|
|
/**
|
|
* This is for use with ContentEditable element and with q-editor
|
|
*/
|
|
export function createEditorImageDrop(ref: Ref<string> | ModelRef<string>) {
|
|
return async (e: DragEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const target = e.target;
|
|
|
|
if (!target || !(target instanceof HTMLElement)) return;
|
|
|
|
const items = e.dataTransfer?.items;
|
|
const promises: Promise<string>[] = [];
|
|
|
|
if (!items) return;
|
|
|
|
for (let i = 0; i < items.length; i++) {
|
|
const file = items[i].getAsFile();
|
|
if (!file || file.type.indexOf('image') === -1) continue;
|
|
promises.push(fileToBase64(file));
|
|
}
|
|
|
|
const getCaret = () => {
|
|
if (target.isContentEditable || document.designMode === 'on') {
|
|
target.focus();
|
|
const range = document.getSelection()?.getRangeAt(0);
|
|
if (!range?.collapsed) return null;
|
|
const tmp = document.createTextNode('\0');
|
|
range.insertNode(tmp);
|
|
const pos = target.innerHTML.indexOf('\0');
|
|
tmp.parentNode?.removeChild(tmp);
|
|
return pos;
|
|
}
|
|
return null;
|
|
};
|
|
|
|
for (const base64 of await Promise.all(promises)) {
|
|
const image = document.createElement('img') as HTMLImageElement;
|
|
const caret = getCaret();
|
|
|
|
image.src = base64;
|
|
|
|
if (caret) {
|
|
ref.value =
|
|
ref.value.substring(0, caret) +
|
|
image.outerHTML +
|
|
ref.value.substring(caret, ref.value.length);
|
|
} else {
|
|
ref.value += image.outerHTML;
|
|
}
|
|
}
|
|
};
|
|
}
|