diff --git a/css/ui.scss b/css/ui.scss
deleted file mode 100644
index 585b78a..0000000
--- a/css/ui.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import './checkbox.scss';
-@import './dropdown.scss';
-@import './tooltip.scss';
-@import './grid.scss';
-@import './popup.scss';
\ No newline at end of file
diff --git a/lib/app/communications/customer.js b/lib/app/communications/customer.js
index 5393582..4b5994e 100644
--- a/lib/app/communications/customer.js
+++ b/lib/app/communications/customer.js
@@ -1,4 +1,4 @@
-import { Grid, createElement, setTooltip, setTooltipNext, createIcon, createCheckbox, createRadiobox, createPopup, showAlert, showConfirm } from "../../ui";
+import { Grid, createElement, setTooltip, createIcon, createCheckbox, createRadiobox, createPopup, showAlert, showConfirm } from "../../ui";
import { r, nullOrEmpty, formatUrl, isEmail, isPhone } from "../../utility";
import { createBox } from "./lib";
import Contact from "./contact";
@@ -90,16 +90,39 @@ class CustomerCommunication {
element.dispatchEvent(new Event('change'));
}
+ /**
+ * @param {boolean} flag
+ */
+ set loading(flag) {
+ if (this.#container == null) {
+ return;
+ }
+ this.#enter.disabled = flag;
+ this.#container.querySelector('.customer-name>.ui-input').disabled = flag;
+ this.#container.querySelector('.button-send-message').disabled = flag;
+ this.#container.querySelector('.button-edit-contacts').disabled = flag;
+ this.#container.querySelector('.button-edit-followers').disabled = flag;
+ }
+
get text() { return this.#enter?.value }
set text(s) {
const element = this.#enter;
if (element != null) {
element.value = s
- s = String(nullOrEmpty(s) ? 0 : val.length) + '/3000';
+ s = String(nullOrEmpty(s) ? 0 : val.length) + '/' + String(this.#option.maxLength);
this.#container.querySelector('.message-bar .prompt-count').innerText = s;
}
}
+ get customerName() { return this.#container.querySelector('.customer-name>.ui-input')?.value }
+ set customerName(name) {
+ const element = this.#container.querySelector('.customer-name>.ui-input');
+ if (element == null) {
+ return;
+ }
+ element.value = name;
+ }
+
get contacts() {
return [...this.#contacts.children].map(el => {
const span = el.querySelector('span');
@@ -303,7 +326,10 @@ class CustomerCommunication {
}
const container = createBox(
createElement('div', null,
- createElement('div', div => div.innerText = r('messages', 'Customer Communication')),
+ createElement('div', div => {
+ div.className = 'title-module';
+ div.innerText = option.title ?? r('messages', 'Customer Communication');
+ }),
createElement('div', div => {
div.className = 'title-company';
if (nullOrEmpty(option.companyName)) {
@@ -323,15 +349,16 @@ class CustomerCommunication {
// followers
this.#followers = this.#createFollowers(container, option);
// enter box
- const enter = createElement('textarea');
+ const enter = createElement('textarea', 'ui-text');
enter.placeholder = r('typeMessage', 'Enter Message Here');
- enter.maxLength = 3000;
+ option.maxLength ??= 3000;
+ enter.maxLength = option.maxLength;
// if (readonly === true) {
// enter.disabled = true;
// }
enter.addEventListener('input', () => {
const val = this.#enter.value;
- const s = String(nullOrEmpty(val) ? 0 : val.length) + '/3000';
+ const s = String(nullOrEmpty(val) ? 0 : val.length) + '/' + String(option.maxLength);
this.#container.querySelector('.message-bar .prompt-count').innerText = s;
});
this.#enter = enter;
@@ -344,6 +371,15 @@ class CustomerCommunication {
},
enter,
createElement('div', div => div.style.textAlign = 'right',
+ createElement('div', div => {
+ div.className = 'customer-name';
+ if (option.customerNameVisible !== true) {
+ div.style.display = 'none';
+ }
+ },
+ createElement('span', span => span.innerText = r('nameColon', 'Name:')),
+ createElement('input', 'ui-input')
+ ),
createElement('div', 'prompt-count'),
createElement('button', button => {
button.className = 'roundbtn button-send-message';
@@ -992,10 +1028,12 @@ class CustomerCommunication {
load(data, contacts, followers) {
const children = [];
if (data?.length > 0) {
+ contacts ??= this.#data.contacts;
+ followers ??= this.#data.allfollowers;
for (let comm of data) {
const div = createElement('div', 'item-div');
let name;
- if (comm.IsReply) {
+ if (comm.IsReply && contacts?.length > 0) {
const c = isEmail(comm.Sender) ?
contacts.find(c => c.Email === comm.Sender) :
contacts.find(c => c.MobilePhone === comm.Sender);
diff --git a/lib/app/communications/internal.js b/lib/app/communications/internal.js
index 8ce1ada..b970233 100644
--- a/lib/app/communications/internal.js
+++ b/lib/app/communications/internal.js
@@ -17,7 +17,7 @@ class InternalComment {
const element = this.#enter;
if (element != null) {
element.value = s
- s = String(nullOrEmpty(s) ? 0 : val.length) + '/3000';
+ s = String(nullOrEmpty(s) ? 0 : val.length) + '/' + String(this.#option.maxLength);
this.#container.querySelector('.message-bar .prompt-count').innerText = s;
}
}
@@ -38,17 +38,20 @@ class InternalComment {
create() {
const container = createBox(
createElement('div', null,
- createElement('div', div => div.innerText = r('internalComments', 'Internal Comments'))
+ createElement('div', div => {
+ div.className = 'title-module';
+ div.innerText = r('internalComments', 'Internal Comments');
+ })
), []
);
const readonly = this.#option.readonly;
// enter box
- const enter = createElement('textarea');
+ const enter = createElement('textarea', 'ui-text');
enter.placeholder = r('typeComment', 'Enter Comment Here');
- enter.maxLength = 3000;
+ enter.maxLength = this.#option.maxLength ??= 3000;
enter.addEventListener('input', () => {
const val = this.#enter.value;
- const s = String(nullOrEmpty(val) ? 0 : val.length) + '/3000';
+ const s = String(nullOrEmpty(val) ? 0 : val.length) + '/' + String(this.#option.maxLength);
this.#container.querySelector('.message-bar .prompt-count').innerText = s;
});
if (readonly === true) {
diff --git a/lib/app/communications/style.scss b/lib/app/communications/style.scss
index f676e1e..07d700e 100644
--- a/lib/app/communications/style.scss
+++ b/lib/app/communications/style.scss
@@ -1,5 +1,3 @@
-@import '../../../css/variables/definition.scss';
-
.popup-mask .wrapper-edit-method {
width: 100%;
@@ -46,11 +44,12 @@
}
}
- &.disabled {
+ &.disabled,
+ &:disabled {
fill: lightgray;
background-color: transparent !important;
- &:hover {
+ &:hover>svg {
opacity: unset;
}
}
@@ -95,7 +94,7 @@
line-height: 24px;
display: flex;
align-items: center;
- font-size: 1.2em;
+ font-size: var(--font-larger-size);
>div {
flex: 1 1 auto;
@@ -186,7 +185,7 @@
>span {
// flex: 1 1 auto;
color: var(--strong-color);
- font-size: var(--font-larger-size);
+ font-size: var(--font-size);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -216,6 +215,8 @@
border: none;
height: 70px;
resize: none;
+ font-size: var(--font-smaller-size);
+ font-family: var(--font-family);
&:focus,
&:focus-visible {
@@ -226,9 +227,26 @@
>div {
padding: 0 10px 10px;
+ >.customer-name {
+ float: left;
+
+ >span {
+ font-size: var(--font-smaller-size);
+ }
+
+ >.ui-input {
+ margin-left: 4px;
+ width: 150px;
+ border-top: none;
+ border-left: none;
+ border-right: none;
+ }
+ }
+
>.prompt-count {
display: inline-block;
color: var(--light-color);
+ font-size: var(--font-smaller-size);
}
}
}
@@ -246,7 +264,7 @@
white-space: normal;
word-break: break-word;
overflow: hidden;
- font-size: .8125rem;
+ font-size: var(--font-size);
color: #333;
display: flex;
flex-direction: column;
@@ -257,6 +275,7 @@
.item-poster {
font-weight: bold;
+ font-size: var(--font-size);
align-self: flex-start;
.tooltip-wrapper>.tooltip-content {
@@ -293,7 +312,7 @@
margin-top: 3px;
font-weight: bold;
margin-right: -12px;
- font-size: 10px;
+ font-size: .625rem;
float: right;
}
}
@@ -301,7 +320,7 @@
.item-time {
align-self: flex-end;
color: #aaa;
- font-size: .7rem;
+ font-size: .6875rem;
}
&.item-other {
diff --git a/lib/ui.js b/lib/ui.js
index f30d5ae..09e74d9 100644
--- a/lib/ui.js
+++ b/lib/ui.js
@@ -1,6 +1,7 @@
-import "../css/ui.scss";
+import './ui/css/variables/definition.scss';
+import './ui/css/common.scss';
import { createElement } from "./functions";
-import { createIcon, resolveIcon } from "./ui/icon";
+import { createIcon, changeIcon, resolveIcon } from "./ui/icon";
import { createCheckbox, createRadiobox, resolveCheckbox } from "./ui/checkbox";
import { setTooltip, resolveTooltip } from "./ui/tooltip";
import Dropdown from "./ui/dropdown";
@@ -12,6 +13,7 @@ export {
createElement,
// icon
createIcon,
+ changeIcon,
resolveIcon,
// checkbox
createCheckbox,
diff --git a/lib/ui/checkbox.js b/lib/ui/checkbox.js
index 13b9dba..b9625f7 100644
--- a/lib/ui/checkbox.js
+++ b/lib/ui/checkbox.js
@@ -1,3 +1,4 @@
+import './css/checkbox.scss';
import { createElement } from "../functions";
import { createIcon } from "./icon";
diff --git a/css/checkbox.scss b/lib/ui/css/checkbox.scss
similarity index 96%
rename from css/checkbox.scss
rename to lib/ui/css/checkbox.scss
index c73f2d5..5c802d3 100644
--- a/css/checkbox.scss
+++ b/lib/ui/css/checkbox.scss
@@ -1,5 +1,4 @@
@import './functions/checkbox.scss';
-@import './variables/definition.scss';
.checkbox-image {
>input[type="checkbox"] {
diff --git a/lib/ui/css/common.scss b/lib/ui/css/common.scss
new file mode 100644
index 0000000..223f3ef
--- /dev/null
+++ b/lib/ui/css/common.scss
@@ -0,0 +1,29 @@
+.ui-text,
+.ui-input {
+ font-size: var(--font-size);
+ font-family: var(--font-family);
+ border: 1px solid var(--box-color);
+ border-radius: var(--border-radius);
+ transition: border-color .2s;
+
+ &:focus,
+ &:focus-visible {
+ outline: none;
+ }
+
+ &:focus,
+ &:hover {
+ border-color: var(--focus-color);
+ }
+
+ &:disabled {
+ border-color: var(--disabled-box-color);
+ color: var(--disabled-color);
+ background-color: var(--disabled-bg-color);
+ }
+}
+
+.ui-input {
+ text-indent: var(--text-indent);
+ line-height: var(--line-height);
+}
\ No newline at end of file
diff --git a/css/dropdown.scss b/lib/ui/css/dropdown.scss
similarity index 98%
rename from css/dropdown.scss
rename to lib/ui/css/dropdown.scss
index c9d67b0..f30cb1f 100644
--- a/css/dropdown.scss
+++ b/lib/ui/css/dropdown.scss
@@ -1,6 +1,4 @@
-@import './variables/definition.scss';
@import './functions/func.scss';
-@import './functions/checkbox.scss';
$headerHeight: 26px;
$caretWidth: 26px;
diff --git a/css/functions/checkbox.scss b/lib/ui/css/functions/checkbox.scss
similarity index 100%
rename from css/functions/checkbox.scss
rename to lib/ui/css/functions/checkbox.scss
diff --git a/css/functions/func.scss b/lib/ui/css/functions/func.scss
similarity index 100%
rename from css/functions/func.scss
rename to lib/ui/css/functions/func.scss
diff --git a/css/grid.scss b/lib/ui/css/grid.scss
similarity index 99%
rename from css/grid.scss
rename to lib/ui/css/grid.scss
index 6ed68c0..931e36c 100644
--- a/css/grid.scss
+++ b/lib/ui/css/grid.scss
@@ -1,3 +1,5 @@
+@import './functions/func.scss';
+
.grid {
position: relative;
box-sizing: border-box;
diff --git a/css/popup.scss b/lib/ui/css/popup.scss
similarity index 75%
rename from css/popup.scss
rename to lib/ui/css/popup.scss
index 86e031c..9ec5ec8 100644
--- a/css/popup.scss
+++ b/lib/ui/css/popup.scss
@@ -1,5 +1,4 @@
@import './functions/func.scss';
-@import './variables/definition.scss';
$headerLineHeight: 24px;
$buttonHeight: 28px;
@@ -25,6 +24,11 @@ $buttonHeight: 28px;
transform: scale(1.1);
}
+ &.popup-transparent {
+ right: unset;
+ bottom: unset;
+ }
+
.popup-container {
min-width: 400px;
max-width: 800px;
@@ -52,6 +56,12 @@ $buttonHeight: 28px;
font-size: 1rem;
}
+ >.popup-header-title {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
>svg {
flex: 0 0 auto;
width: $headerLineHeight;
@@ -210,5 +220,78 @@ $buttonHeight: 28px;
}
}
}
+
+ .popup-border {
+ position: absolute;
+
+ &.popup-border-left,
+ &.popup-border-right {
+ width: 6px;
+ height: 100%;
+ top: 0;
+ cursor: ew-resize;
+ }
+
+ &.popup-border-top,
+ &.popup-border-bottom {
+ width: 100%;
+ height: 6px;
+ left: 0;
+ cursor: ns-resize;
+ }
+
+ &.popup-border-top-left,
+ &.popup-border-top-right,
+ &.popup-border-bottom-right,
+ &.popup-border-bottom-left {
+ width: 8px;
+ height: 8px;
+ }
+
+ &.popup-border-top-left,
+ &.popup-border-bottom-right {
+ cursor: nwse-resize;
+ }
+
+ &.popup-border-top-right,
+ &.popup-border-bottom-left {
+ cursor: nesw-resize;
+ }
+
+ &.popup-border-left,
+ &.popup-border-top-left,
+ &.popup-border-bottom-left {
+ left: -4px;
+ }
+
+ &.popup-border-right,
+ &.popup-border-top-right,
+ &.popup-border-bottom-right {
+ right: -4px;
+ }
+
+ &.popup-border-top,
+ &.popup-border-top-left,
+ &.popup-border-top-right {
+ top: -4px;
+ }
+
+ &.popup-border-bottom,
+ &.popup-border-bottom-right,
+ &.popup-border-bottom-left {
+ bottom: -4px;
+ }
+ }
+
+ &.popup-collapse {
+ min-height: 40px;
+ min-width: 160px;
+
+ .popup-body,
+ .popup-footer,
+ .popup-border {
+ display: none;
+ }
+ }
}
}
\ No newline at end of file
diff --git a/css/tooltip.scss b/lib/ui/css/tooltip.scss
similarity index 94%
rename from css/tooltip.scss
rename to lib/ui/css/tooltip.scss
index b0cee11..860e97e 100644
--- a/css/tooltip.scss
+++ b/lib/ui/css/tooltip.scss
@@ -1,6 +1,3 @@
-@import './functions/checkbox.scss';
-@import './variables/definition.scss';
-
.tooltip-color {
background-color: #fff;
color: #323130;
diff --git a/css/variables/definition.scss b/lib/ui/css/variables/definition.scss
similarity index 56%
rename from css/variables/definition.scss
rename to lib/ui/css/variables/definition.scss
index 0ce9b0c..1e44cdd 100644
--- a/css/variables/definition.scss
+++ b/lib/ui/css/variables/definition.scss
@@ -31,34 +31,8 @@
--text-indent: 4px;
--line-height: 24px;
- --font-size: .8125rem;
- --font-smaller-size: .75rem;
- --font-larger-size: .875rem;
+ --font-size: .8125rem; // 13px
+ --font-smaller-size: .75rem; // 12px
+ --font-larger-size: .875rem; // 14px
--font-family: "Franklin Gothic Book", "San Francisco", "Segoe UI", "Open Sans", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei UI", sans-serif;
}
-
-.ui-input {
- font-size: var(--font-size);
- font-family: var(--font-family);
- line-height: var(--line-height);
- text-indent: var(--text-indent);
- border: 1px solid var(--box-color);
- border-radius: var(--border-radius);
- transition: border-color .2s;
-
- &:focus,
- &:focus-visible {
- outline: none;
- }
-
- &:focus,
- &:hover {
- border-color: var(--focus-color);
- }
-
- &:disabled {
- border-color: var(--disabled-box-color);
- color: var(--disabled-color);
- background-color: var(--disabled-bg-color);
- }
-}
\ No newline at end of file
diff --git a/lib/ui/dropdown.js b/lib/ui/dropdown.js
index f783696..2795029 100644
--- a/lib/ui/dropdown.js
+++ b/lib/ui/dropdown.js
@@ -1,4 +1,5 @@
// import { r, global, contains, isPositive, nullOrEmpty } from "../utility";
+import './css/dropdown.scss';
import { r } from "../utility/lgres";
import { contains, nullOrEmpty } from "../utility/strings";
import { global, isPositive } from "../utility";
diff --git a/lib/ui/grid/grid.js b/lib/ui/grid/grid.js
index 82bdc55..45a15ee 100644
--- a/lib/ui/grid/grid.js
+++ b/lib/ui/grid/grid.js
@@ -1,3 +1,4 @@
+import '../css/grid.scss';
import { global, isPositive, isMobile, throttle, truncate } from "../../utility";
import { r } from "../../utility/lgres";
import { createElement } from "../../functions";
diff --git a/lib/ui/icon.d.ts b/lib/ui/icon.d.ts
index b7cee19..692d2a9 100644
--- a/lib/ui/icon.d.ts
+++ b/lib/ui/icon.d.ts
@@ -1,2 +1,3 @@
export function createIcon(type: string, id: string, style?: { [key: string]: string }): SVGSVGElement
+export function changeIcon(svg: SVGSVGElement, type: string, id: string): SVGSVGElement
export function resolveIcon(container: HTMLElement): HTMLElement
\ No newline at end of file
diff --git a/lib/ui/icon.js b/lib/ui/icon.js
index 21831b2..04a6920 100644
--- a/lib/ui/icon.js
+++ b/lib/ui/icon.js
@@ -9,6 +9,13 @@ function createUse(type, id) {
return use;
}
+function changeIcon(svg, type, id) {
+ if (svg instanceof HTMLElement) {
+ svg.replaceChildren(createUse(type, id));
+ }
+ return svg;
+}
+
function createIcon(type, id, style) {
const svg = document.createElementNS(svgns, 'svg');
svg.appendChild(createUse(type, id));
@@ -34,5 +41,6 @@ function resolveIcon(container) {
export {
createIcon,
+ changeIcon,
resolveIcon
}
\ No newline at end of file
diff --git a/lib/ui/popup.html b/lib/ui/popup.html
index 8b7f63a..0d2ef2a 100644
--- a/lib/ui/popup.html
+++ b/lib/ui/popup.html
@@ -13,15 +13,25 @@
const ui = window['lib-ui'];
document.querySelector('#button-popup').addEventListener('click', () => {
- const popup = ui.createPopup('title', 'content',
- {
- text: 'Loading', trigger: p => {
- p.loading = true;
- setTimeout(() => p.loading = false, 1000);
- return false;
- }
- },
- { text: 'OK' });
+ const popup = new ui.Popup({
+ title: 'title long title, looooooong title, looooooooooooooooooooooooong ~',
+ content: 'content',
+ mask: false,
+ resizable: true,
+ collapsable: true,
+ minWidth: 210,
+ minHeight: 200,
+ buttons: [
+ {
+ text: 'Loading', trigger: p => {
+ p.loading = true;
+ setTimeout(() => p.loading = false, 1000);
+ return false;
+ }
+ },
+ { text: 'OK' }
+ ]
+ });
popup.show();
});
@@ -30,5 +40,10 @@
--title-bg-color: lightgray;
--title-color: #333;
}
+ .popup-mask .popup-container {
+ min-width: 210px;
+ min-height: 200px;
+ max-width: unset;
+ }
\ No newline at end of file
diff --git a/lib/ui/popup.js b/lib/ui/popup.js
index fd098b8..b75d91f 100644
--- a/lib/ui/popup.js
+++ b/lib/ui/popup.js
@@ -1,11 +1,37 @@
-import "../../css/popup.scss";
+import "./css/popup.scss";
+import { r } from "../utility/lgres";
+import { nullOrEmpty } from "../utility/strings";
+import { global } from "../utility";
import { createElement } from "../functions";
-import { r, nullOrEmpty } from "../utility";
-import { createIcon } from "./icon";
+import { createIcon, changeIcon } from "./icon";
+
+const ResizeMods = {
+ right: 1,
+ bottom: 2,
+ left: 4,
+ top: 8,
+ bottomRight: 2 | 1,
+ bottomLeft: 2 | 4,
+ topRight: 8 | 1,
+ topLeft: 8 | 4
+}
+
+// const Cursors = {
+// [ResizeMods.right]: 'ew-resize',
+// [ResizeMods.bottom]: 'ns-resize',
+// [ResizeMods.bottomRight]: 'nwse-resize',
+// [ResizeMods.left]: 'ew-resize',
+// [ResizeMods.bottomLeft]: 'nesw-resize',
+// [ResizeMods.top]: 'ns-resize',
+// [ResizeMods.topRight]: 'nesw-resize',
+// [ResizeMods.topLeft]: 'nwse-resize'
+// }
class Popup {
#mask;
#option;
+ #bounds;
+ // #cursor;
constructor(opts = {}) {
this.#option = opts;
@@ -13,8 +39,47 @@ class Popup {
get container() { return this.#mask.querySelector('.popup-container') }
+ get rect() {
+ const container = this.container;
+ if (container == null) {
+ return null;
+ }
+ const style = global.getComputedStyle(container);
+ return {
+ left: style.left,
+ top: style.top,
+ width: style.width,
+ height: style.height
+ };
+ }
+ set rect(r) {
+ const container = this.container;
+ if (container == null) {
+ return;
+ }
+ const css = [];
+ if (!isNaN(r.left)) {
+ css.push(`left: ${r.left}px`);
+ }
+ if (!isNaN(r.top)) {
+ css.push(`top: ${r.top}px`);
+ }
+ if (!isNaN(r.width) && r.width > 0) {
+ css.push(`width: ${r.width}px`);
+ }
+ if (!isNaN(r.height) && r.height > 0) {
+ css.push(`height: ${r.height}px`);
+ }
+ if (css.length > 0) {
+ container.style.cssText += css.join('; ');
+ }
+ }
+
create() {
const mask = createElement('div', 'popup-mask');
+ if (this.#option.mask === false) {
+ mask.classList.add('popup-transparent');
+ }
const container = createElement('div', 'popup-container');
const close = () => {
mask.classList.add('popup-active');
@@ -30,7 +95,10 @@ class Popup {
header.className = 'popup-header';
let title = this.#option.title;
if (!(title instanceof HTMLElement)) {
- title = createElement('div', t => t.innerText = title);
+ title = createElement('div', t => {
+ t.className = 'popup-header-title';
+ t.innerText = title;
+ });
}
header.appendChild(title);
const move = title.querySelector('.popup-move') ?? title;
@@ -46,6 +114,27 @@ class Popup {
mask.removeEventListener('mousemove', move, { passive: false });
});
});
+ if (this.#option.collapsable === true) {
+ const collapse = createIcon('fa-regular', 'compress-alt');
+ collapse.classList.add('icon-expand');
+ collapse.addEventListener('click', () => {
+ if (container.classList.contains('popup-collapse')) {
+ const bounds = this.#bounds;
+ if (bounds != null) {
+ container.style.cssText += `width: ${bounds.width}; height: ${bounds.height}`;
+ }
+ container.classList.remove('popup-collapse');
+ changeIcon(collapse, 'fa-regular', 'compress-alt');
+ } else {
+ const rect = this.rect;
+ this.#bounds = rect;
+ container.style.cssText += `left: ${rect.left}; top: ${rect.top}; width: 160px; height: 40px`;
+ container.classList.add('popup-collapse');
+ changeIcon(collapse, 'fa-regular', 'expand-alt');
+ }
+ });
+ header.appendChild(collapse);
+ }
const cancel = createIcon('fa-regular', 'times');
cancel.addEventListener('click', () => close());
header.appendChild(cancel);
@@ -79,6 +168,43 @@ class Popup {
}))
);
}
+ // resizable
+ if (this.#option.resizable === true) {
+ container.append(
+ createElement('layer', layer => {
+ layer.className = 'popup-border popup-border-right';
+ layer.addEventListener('mousedown', e => this.#resize(ResizeMods.right, e));
+ }),
+ createElement('layer', layer => {
+ layer.className = 'popup-border popup-border-bottom';
+ layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottom, e));
+ }),
+ createElement('layer', layer => {
+ layer.className = 'popup-border popup-border-left';
+ layer.addEventListener('mousedown', e => this.#resize(ResizeMods.left, e));
+ }),
+ createElement('layer', layer => {
+ layer.className = 'popup-border popup-border-top';
+ layer.addEventListener('mousedown', e => this.#resize(ResizeMods.top, e));
+ }),
+ createElement('layer', layer => {
+ layer.className = 'popup-border popup-border-bottom-right';
+ layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottomRight, e));
+ }),
+ createElement('layer', layer => {
+ layer.className = 'popup-border popup-border-bottom-left';
+ layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottomLeft, e));
+ }),
+ createElement('layer', layer => {
+ layer.className = 'popup-border popup-border-top-left';
+ layer.addEventListener('mousedown', e => this.#resize(ResizeMods.topLeft, e));
+ }),
+ createElement('layer', layer => {
+ layer.className = 'popup-border popup-border-top-right';
+ layer.addEventListener('mousedown', e => this.#resize(ResizeMods.topRight, e));
+ })
+ )
+ }
mask.appendChild(container);
this.#mask = mask;
return mask;
@@ -90,6 +216,12 @@ class Popup {
}
let mask = this.#mask ?? this.create();
parent.appendChild(mask);
+ if (this.#option.mask === false) {
+ // calculator position
+ const container = this.container;
+ container.style.left = String((parent.offsetWidth - container.offsetWidth) / 2) + 'px';
+ container.style.top = String((parent.offsetHeight - container.offsetHeight) / 2) + 'px';
+ }
return new Promise(resolve => {
setTimeout(() => {
mask.style.opacity = 1
@@ -112,6 +244,79 @@ class Popup {
loading.style.opacity = 1;
}
}
+
+ #resize(mod, e) {
+ const container = this.container;
+ const option = this.#option;
+ if (typeof option.onResizeStarted === 'function') {
+ option.onResizeStarted.call(this);
+ }
+ const mask = this.#mask;
+ // this.#cursor = mask.style.cursor;
+ // mask.style.cursor = Cursors[mod];
+ const originalX = e.clientX;
+ const originalY = e.clientY;
+ const original = {
+ width: container.offsetWidth,
+ height: container.offsetHeight,
+ left: container.offsetLeft,
+ top: container.offsetTop
+ };
+ const minWidth = option.minWidth ?? 200;
+ const minHeight = option.minHeight ?? 200;
+ const move = e => {
+ const offsetX = e.clientX - originalX;
+ const offsetY = e.clientY - originalY;
+ let width = original.width;
+ let height = original.height;
+ let x = original.left;
+ let y = original.top;
+ if ((mod & ResizeMods.right) === ResizeMods.right) {
+ width += offsetX;
+ if (width < minWidth) {
+ width = minWidth;
+ }
+ }
+ if ((mod & ResizeMods.bottom) === ResizeMods.bottom) {
+ height += offsetY;
+ if (height < minHeight) {
+ height = minHeight;
+ }
+ }
+ if ((mod & ResizeMods.left) === ResizeMods.left) {
+ width -= offsetX;
+ if (width < minWidth) {
+ width = minWidth;
+ x = originalX + original.width - minWidth;
+ } else {
+ x += offsetX;
+ }
+ }
+ if ((mod & ResizeMods.top) === ResizeMods.top) {
+ height -= offsetY;
+ if (height < minHeight) {
+ height = minHeight;
+ y = originalY + original.height - minHeight;
+ } else {
+ y += offsetY;
+ }
+ }
+ if (typeof option.onResizing === 'function') {
+ option.onResizing.call(this, x, y, width, height);
+ } else {
+ container.style.cssText += `left: ${x}px; top: ${y}px; width: ${width}px; height: ${height}px`;
+ }
+ }
+ const parent = option.mask === false ? mask.parentElement : mask;
+ parent.addEventListener('mousemove', move, { passive: false });
+ parent.addEventListener('mouseup', () => {
+ parent.removeEventListener('mousemove', move, { passive: false });
+ // mask.style.cursor = this.#cursor;
+ if (typeof option.onResizeEnded === 'function') {
+ option.onResizeEnded.call(this);
+ }
+ });
+ }
}
export default Popup;
diff --git a/lib/ui/tooltip.js b/lib/ui/tooltip.js
index d295629..d493586 100644
--- a/lib/ui/tooltip.js
+++ b/lib/ui/tooltip.js
@@ -1,3 +1,4 @@
+import './css/tooltip.scss';
import { createElement } from "../functions";
// import { global } from "../utility";
diff --git a/lib/utility/strings.js b/lib/utility/strings.js
index 8cb83ab..36760e3 100644
--- a/lib/utility/strings.js
+++ b/lib/utility/strings.js
@@ -46,7 +46,7 @@ function formatUrl(msg) {
}
for (let r of rs) {
- msg = msg.replaceAll(r, '');
+ msg = msg.replaceAll(r, '');
}
}
diff --git a/main.js b/main.js
index 972a949..f9ef8cd 100644
--- a/main.js
+++ b/main.js
@@ -1,5 +1,4 @@
-import './css/ui.scss'
-import './style.css'
+import './style.scss'
// import javascriptLogo from './javascript.svg'
import { get } from './lib/utility'
diff --git a/style.css b/style.scss
similarity index 66%
rename from style.css
rename to style.scss
index b009f5c..344484a 100644
--- a/style.css
+++ b/style.scss
@@ -1,3 +1,11 @@
+@import './lib/ui/css/variables/definition.scss';
+@import './lib/ui/css/common.scss';
+@import './lib/ui/css/checkbox.scss';
+@import './lib/ui/css/dropdown.scss';
+@import './lib/ui/css/grid.scss';
+@import './lib/ui/css/popup.scss';
+@import './lib/ui/css/tooltip.scss';
+
:root {
font-family: var(--serif-font-family);
font-size: 1.125rem;
@@ -45,12 +53,12 @@ samp {
h2+code {
margin-left: 70px;
position: relative;
-}
-h2+code::before {
- content: '签名：';
- position: absolute;
- margin-left: -70px;
+ &::before {
+ content: '签名：';
+ position: absolute;
+ margin-left: -70px;
+ }
}
h3,
@@ -68,20 +76,20 @@ h3~p {
h4 {
font-size: .9em;
margin-block-end: .4em;
-}
-h4+code {
- font-size: .9rem;
+ +code {
+ font-size: .9rem;
+ }
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
+ &:hover {
+ color: #535bf2;
+ }
}
button {
@@ -94,15 +102,15 @@ button {
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
+ &:hover {
+ border-color: #646cff;
+ }
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
+ &:focus,
+ &:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+ }
}
body {
@@ -122,45 +130,45 @@ h1 {
padding: 2rem;
border-right: 1px solid var(--border-color);
flex: 0 0 auto;
-}
-#directory>ul {
- padding: 0;
- line-height: 1.6em;
-}
+ >ul {
+ padding: 0;
+ line-height: 1.6em;
-#directory>ul>li {
- list-style: none;
- user-select: none;
-}
+ >li {
+ list-style: none;
+ user-select: none;
-#directory>ul>li.title {
- margin: 20px 0 6px;
- font-weight: bold;
- font-size: 1.25em;
-}
+ &.title {
+ margin: 20px 0 6px;
+ font-weight: bold;
+ font-size: 1.25em;
+ }
+ }
+ }
-#directory ol {
- padding-left: 10px;
-}
+ ol {
+ padding-left: 10px;
-#directory ol>li {
- padding: 0 6px;
- list-style-position: inside;
- cursor: pointer;
-}
+ >li {
+ padding: 0 6px;
+ list-style-position: inside;
+ cursor: pointer;
-#directory ol>li:hover {
- background-color: var(--hover-color);
+ &:hover {
+ background-color: var(--hover-color);
+ }
+ }
+ }
}
#container {
flex: 1 1 auto;
overflow: auto;
-}
-#container>div {
- padding: 20px;
+ >div {
+ padding: 20px;
+ }
}
.app-module {
@@ -170,11 +178,11 @@ h1 {
#create-icon {
display: flex;
justify-content: center;
-}
-#create-icon svg {
- width: 20px;
- height: 20px;
+ svg {
+ width: 20px;
+ height: 20px;
+ }
}
#create-checkbox {
@@ -183,13 +191,15 @@ h1 {
align-items: center;
}
-.checkbox-wrapper .check-box-inner {
- width: 14px;
- height: 14px;
-}
+.checkbox-wrapper {
+ .check-box-inner {
+ width: 14px;
+ height: 14px;
+ }
-.checkbox-wrapper>span {
- font-size: 1em;
+ >span {
+ font-size: 1em;
+ }
}
.icon-col {
@@ -200,10 +210,10 @@ h1 {
text-overflow: ellipsis;
white-space: pre;
text-align: center;
-}
-.icon-col:hover {
- text-decoration: underline;
+ &:hover {
+ text-decoration: underline;
+ }
}
@media (prefers-color-scheme: light) {