blue-web 1.7.0 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/js/edit-view.bundle.js +1 -0
- package/dist/js/edit-view.d.ts +14 -0
- package/dist/js/edit-view.js +63 -0
- package/dist/js/progress.bundle.js +1 -1
- package/dist/js/progress.js +4 -2
- package/dist/js/read-view.bundle.js +1 -0
- package/dist/js/read-view.d.ts +31 -0
- package/dist/js/read-view.js +73 -0
- package/dist/js/side-layout.bundle.js +1 -1
- package/dist/js/side-layout.js +1 -1
- package/dist/legacy-styles/mixins/_sidebar.scss +0 -2
- package/dist/style.css +87 -123
- package/dist/style.css.map +1 -1
- package/dist/style.min.css +4 -4
- package/dist/style.scss +2 -1
- package/dist/styles/_action-menu.scss +14 -16
- package/dist/styles/_bootstrap-variables.scss +9 -0
- package/dist/styles/_menu-item.scss +6 -6
- package/dist/styles/_variables.scss +6 -1
- package/dist/styles/mixins/_action-menu.scss +9 -17
- package/package.json +12 -11
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(()=>{"use strict";class e extends HTMLElement{connectedCallback(){this.render()}disconnectedCallback(){this.confirmTimeout&&clearTimeout(this.confirmTimeout)}render(){const e=document.createElement("form");e.style.position="relative";const t=Array.from(this.childNodes);this.appendChild(e),t.forEach((t=>e.appendChild(t))),e.addEventListener("submit",this.onSubmit.bind(this)),e.addEventListener("keydown",this.onKeydown.bind(this)),e.addEventListener("focusout",this.onFocusout.bind(this))}onSubmit(e){e.preventDefault(),this.confirm()}onKeydown(e){"Esc"!==e.key&&"Escape"!==e.key||this.dismiss()}onFocusout(e){this.contains(e.relatedTarget)||(this.confirmTimeout&&clearTimeout(this.confirmTimeout),this.confirmTimeout=setTimeout((()=>{this.confirm(),this.confirmTimeout=null}),500))}confirm(){this.dispatchEvent(new CustomEvent("Confirm",{bubbles:!0,composed:!0}))}dismiss(){this.dispatchEvent(new CustomEvent("Dismiss",{bubbles:!0,composed:!0}))}}customElements.define("edit-view",e)})();
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* EditView is a Custom Element that displays a edit view of its content and allows the user to confirm or dismiss the changes.
|
|
3
|
+
*/
|
|
4
|
+
export declare class EditView extends HTMLElement {
|
|
5
|
+
private confirmTimeout;
|
|
6
|
+
connectedCallback(): void;
|
|
7
|
+
disconnectedCallback(): void;
|
|
8
|
+
private render;
|
|
9
|
+
private onSubmit;
|
|
10
|
+
private onKeydown;
|
|
11
|
+
private onFocusout;
|
|
12
|
+
private confirm;
|
|
13
|
+
private dismiss;
|
|
14
|
+
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.EditView = void 0;
|
|
7
|
+
/**
|
|
8
|
+
* EditView is a Custom Element that displays a edit view of its content and allows the user to confirm or dismiss the changes.
|
|
9
|
+
*/
|
|
10
|
+
class EditView extends HTMLElement {
|
|
11
|
+
connectedCallback() {
|
|
12
|
+
this.render();
|
|
13
|
+
}
|
|
14
|
+
disconnectedCallback() {
|
|
15
|
+
if (this.confirmTimeout) {
|
|
16
|
+
clearTimeout(this.confirmTimeout);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
render() {
|
|
20
|
+
const root = document.createElement("form");
|
|
21
|
+
root.style.position = "relative";
|
|
22
|
+
const children = Array.from(this.childNodes);
|
|
23
|
+
this.appendChild(root);
|
|
24
|
+
children.forEach(child => root.appendChild(child));
|
|
25
|
+
root.addEventListener("submit", this.onSubmit.bind(this));
|
|
26
|
+
root.addEventListener("keydown", this.onKeydown.bind(this));
|
|
27
|
+
root.addEventListener("focusout", this.onFocusout.bind(this));
|
|
28
|
+
}
|
|
29
|
+
onSubmit(e) {
|
|
30
|
+
e.preventDefault();
|
|
31
|
+
this.confirm();
|
|
32
|
+
}
|
|
33
|
+
onKeydown(e) {
|
|
34
|
+
if (e.key === "Esc" || e.key === "Escape") {
|
|
35
|
+
this.dismiss();
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
onFocusout(e) {
|
|
39
|
+
if (!this.contains(e.relatedTarget)) {
|
|
40
|
+
if (this.confirmTimeout) {
|
|
41
|
+
clearTimeout(this.confirmTimeout);
|
|
42
|
+
}
|
|
43
|
+
this.confirmTimeout = setTimeout(() => {
|
|
44
|
+
this.confirm();
|
|
45
|
+
this.confirmTimeout = null;
|
|
46
|
+
}, 500);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
confirm() {
|
|
50
|
+
this.dispatchEvent(new CustomEvent("Confirm", {
|
|
51
|
+
bubbles: true,
|
|
52
|
+
composed: true
|
|
53
|
+
}));
|
|
54
|
+
}
|
|
55
|
+
dismiss() {
|
|
56
|
+
this.dispatchEvent(new CustomEvent("Dismiss", {
|
|
57
|
+
bubbles: true,
|
|
58
|
+
composed: true
|
|
59
|
+
}));
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
exports.EditView = EditView;
|
|
63
|
+
customElements.define("edit-view", EditView);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{"use strict";window.blueWeb=window.blueWeb||{},window.blueWeb.progress={progress:0},window.blueWeb.progress={...window.blueWeb.progress,start:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"blueWebProgress",r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document.body,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"Loading data",o=document.getElementById(e);
|
|
1
|
+
(()=>{"use strict";window.blueWeb=window.blueWeb||{},window.blueWeb.progress={progress:0},window.blueWeb.progress={...window.blueWeb.progress,start:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"blueWebProgress",r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document.body,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"Loading data",t=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"fixed-top";const o="string"==typeof r||r instanceof String?document.querySelector(r.toString()):r;let n=document.getElementById(e);n||(n=document.createElement("div"),n.id=e,n.className="progress ".concat(t," rounded-0"),n.setAttribute("style","--bs-progress-height: 0.25rem"),n.setAttribute("role","progressbar"),n.setAttribute("aria-label",s),n.setAttribute("aria-valuemin","0"),n.setAttribute("aria-valuemax","100"),n.innerHTML='<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%"></div>',o.appendChild(n));const i=n.querySelector(".progress-bar");if(i){window.blueWeb.progress.progress=0;var b=setInterval((function(){var e,r=5*Math.random();window.blueWeb.progress.progress+=r,window.blueWeb.progress.progress=Math.min(window.blueWeb.progress.progress,100),i.style.width=window.blueWeb.progress.progress+"%",null===(e=n)||void 0===e||e.setAttribute("aria-valuenow",Math.round(window.blueWeb.progress.progress).toString()),window.blueWeb.progress.progress>=100&&clearInterval(b)}),200)}},stop:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"blueWebProgress";const r=document.getElementById(e);r&&(window.blueWeb.progress.progress=100,setTimeout((()=>{r.remove()}),500))}},window.blueWeb.progress})();
|
package/dist/js/progress.js
CHANGED
|
@@ -14,18 +14,20 @@ window.blueWeb.progress = {
|
|
|
14
14
|
let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "blueWebProgress";
|
|
15
15
|
let parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body;
|
|
16
16
|
let ariaLabel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "Loading data";
|
|
17
|
+
let positionClass = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "fixed-top";
|
|
18
|
+
const parentEl = typeof parent === "string" || parent instanceof String ? document.querySelector(parent.toString()) : parent;
|
|
17
19
|
let progressEl = document.getElementById(id);
|
|
18
20
|
if (!progressEl) {
|
|
19
21
|
progressEl = document.createElement("div");
|
|
20
22
|
progressEl.id = id;
|
|
21
|
-
progressEl.className = "progress
|
|
23
|
+
progressEl.className = "progress ".concat(positionClass, " rounded-0");
|
|
22
24
|
progressEl.setAttribute("style", "--bs-progress-height: 0.25rem");
|
|
23
25
|
progressEl.setAttribute("role", "progressbar");
|
|
24
26
|
progressEl.setAttribute("aria-label", ariaLabel);
|
|
25
27
|
progressEl.setAttribute("aria-valuemin", "0");
|
|
26
28
|
progressEl.setAttribute("aria-valuemax", "100");
|
|
27
29
|
progressEl.innerHTML = /*html*/"<div class=\"progress-bar progress-bar-striped progress-bar-animated\" style=\"width: 0%\"></div>";
|
|
28
|
-
|
|
30
|
+
parentEl.appendChild(progressEl);
|
|
29
31
|
}
|
|
30
32
|
const progressBar = progressEl.querySelector(".progress-bar");
|
|
31
33
|
if (!progressBar) return;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(()=>{"use strict";var t={};function e(t,e,n){return(e=function(t){var e=function(t){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:e+""}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}t.d=(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},t.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);class n extends HTMLElement{constructor(){super(),e(this,"startX",0),e(this,"startY",0),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}render(){this.shadowRoot&&(this.shadowRoot.innerHTML='\n <style>\n button {\n display: block;\n margin: 0;\n padding: 0;\n appearance: none;\n background-color: transparent;\n border: none;\n line-height: 1;\n outline: 0;\n }\n\n button:focus-visible + div {\n outline: 0;\n box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 25%);\n border-color: rgba(var(--bs-primary-rgb), 50%);\n }\n\n div {\n display: inline-block;\n box-sizing: border-box;\n width: auto;\n max-width: 100%;\n border-color: transparent;\n border-radius: var(--bs-border-radius-sm, 3px);\n border: 1px solid transparent;\n transition: background 0.2s;\n }\n\n div:hover {\n background-color: var(--bs-secondary-bg-subtle);\n }\n </style>\n <button aria-label="Edit"></button>\n <div role="presentation">\n <slot></slot>\n </div>\n ',this.button=this.shadowRoot.querySelector("button"),this.container=this.shadowRoot.querySelector("div"),this.button.addEventListener("click",this.onEditRequested.bind(this)),this.container.addEventListener("click",this.onReadViewClick.bind(this)),this.container.addEventListener("mousedown",this.onMouseDown.bind(this)))}onEditRequested(){this.dispatchEvent(new CustomEvent("EditRequested",{bubbles:!0,composed:!0}))}onMouseDown(t){this.startX=t.clientX,this.startY=t.clientY}mouseHasMovedAfterMouseDown(t){return Math.abs(this.startX-t.clientX)>=5||Math.abs(this.startY-t.clientY)>=5}onReadViewClick(t){"a"===t.target.tagName.toLowerCase()||this.mouseHasMovedAfterMouseDown(t)||(t.preventDefault(),this.onEditRequested())}}customElements.define("read-view",n)})();
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A Web Component that displays a read view of its content and allows the user to switch to an edit view.
|
|
3
|
+
* Fires event "EditRequested" when the user clicks the read view.
|
|
4
|
+
* @element read-view
|
|
5
|
+
* @fires EditRequested
|
|
6
|
+
* @cssprop --bs-primary-rgb - The primary color as an RGB value.
|
|
7
|
+
* @cssprop --bs-secondary-bg-subtle - The subtle background color for the read view.
|
|
8
|
+
* @cssprop --bs-border-radius-sm - The border radius for the read view.
|
|
9
|
+
* @slot - The content to display in the read view.
|
|
10
|
+
* @example
|
|
11
|
+
* <read-view id="my-read-view" onEditRequested="setEditing(true)">
|
|
12
|
+
* <a href="#">bla</a> {value}
|
|
13
|
+
* </read-view>
|
|
14
|
+
* @example
|
|
15
|
+
* document.getElementById("my-read-view").addEventListener("EditRequested", () => {
|
|
16
|
+
* setEditing(true)
|
|
17
|
+
* })
|
|
18
|
+
*/
|
|
19
|
+
export declare class ReadView extends HTMLElement {
|
|
20
|
+
private button;
|
|
21
|
+
private container;
|
|
22
|
+
private startX;
|
|
23
|
+
private startY;
|
|
24
|
+
constructor();
|
|
25
|
+
connectedCallback(): void;
|
|
26
|
+
private render;
|
|
27
|
+
private onEditRequested;
|
|
28
|
+
private onMouseDown;
|
|
29
|
+
private mouseHasMovedAfterMouseDown;
|
|
30
|
+
private onReadViewClick;
|
|
31
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ReadView = void 0;
|
|
7
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
8
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
9
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
10
|
+
const DRAG_THRESHOLD = 5;
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* A Web Component that displays a read view of its content and allows the user to switch to an edit view.
|
|
14
|
+
* Fires event "EditRequested" when the user clicks the read view.
|
|
15
|
+
* @element read-view
|
|
16
|
+
* @fires EditRequested
|
|
17
|
+
* @cssprop --bs-primary-rgb - The primary color as an RGB value.
|
|
18
|
+
* @cssprop --bs-secondary-bg-subtle - The subtle background color for the read view.
|
|
19
|
+
* @cssprop --bs-border-radius-sm - The border radius for the read view.
|
|
20
|
+
* @slot - The content to display in the read view.
|
|
21
|
+
* @example
|
|
22
|
+
* <read-view id="my-read-view" onEditRequested="setEditing(true)">
|
|
23
|
+
* <a href="#">bla</a> {value}
|
|
24
|
+
* </read-view>
|
|
25
|
+
* @example
|
|
26
|
+
* document.getElementById("my-read-view").addEventListener("EditRequested", () => {
|
|
27
|
+
* setEditing(true)
|
|
28
|
+
* })
|
|
29
|
+
*/
|
|
30
|
+
class ReadView extends HTMLElement {
|
|
31
|
+
constructor() {
|
|
32
|
+
super();
|
|
33
|
+
_defineProperty(this, "startX", 0);
|
|
34
|
+
_defineProperty(this, "startY", 0);
|
|
35
|
+
this.attachShadow({
|
|
36
|
+
mode: "open"
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
connectedCallback() {
|
|
40
|
+
this.render();
|
|
41
|
+
}
|
|
42
|
+
render() {
|
|
43
|
+
if (!this.shadowRoot) return;
|
|
44
|
+
this.shadowRoot.innerHTML = /* HTML */"\n <style>\n button {\n display: block;\n margin: 0;\n padding: 0;\n appearance: none;\n background-color: transparent;\n border: none;\n line-height: 1;\n outline: 0;\n }\n\n button:focus-visible + div {\n outline: 0;\n box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 25%);\n border-color: rgba(var(--bs-primary-rgb), 50%);\n }\n\n div {\n display: inline-block;\n box-sizing: border-box;\n width: auto;\n max-width: 100%;\n border-color: transparent;\n border-radius: var(--bs-border-radius-sm, 3px);\n border: 1px solid transparent;\n transition: background 0.2s;\n }\n\n div:hover {\n background-color: var(--bs-secondary-bg-subtle);\n }\n </style>\n <button aria-label=\"Edit\"></button>\n <div role=\"presentation\">\n <slot></slot>\n </div>\n ";
|
|
45
|
+
this.button = this.shadowRoot.querySelector("button");
|
|
46
|
+
this.container = this.shadowRoot.querySelector("div");
|
|
47
|
+
this.button.addEventListener("click", this.onEditRequested.bind(this));
|
|
48
|
+
this.container.addEventListener("click", this.onReadViewClick.bind(this));
|
|
49
|
+
this.container.addEventListener("mousedown", this.onMouseDown.bind(this));
|
|
50
|
+
}
|
|
51
|
+
onEditRequested() {
|
|
52
|
+
this.dispatchEvent(new CustomEvent("EditRequested", {
|
|
53
|
+
bubbles: true,
|
|
54
|
+
composed: true
|
|
55
|
+
}));
|
|
56
|
+
}
|
|
57
|
+
onMouseDown(event) {
|
|
58
|
+
this.startX = event.clientX;
|
|
59
|
+
this.startY = event.clientY;
|
|
60
|
+
}
|
|
61
|
+
mouseHasMovedAfterMouseDown(event) {
|
|
62
|
+
return Math.abs(this.startX - event.clientX) >= DRAG_THRESHOLD || Math.abs(this.startY - event.clientY) >= DRAG_THRESHOLD;
|
|
63
|
+
}
|
|
64
|
+
onReadViewClick(event) {
|
|
65
|
+
const target = event.target;
|
|
66
|
+
if (target.tagName.toLowerCase() !== "a" && !this.mouseHasMovedAfterMouseDown(event)) {
|
|
67
|
+
event.preventDefault();
|
|
68
|
+
this.onEditRequested();
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
exports.ReadView = ReadView;
|
|
73
|
+
customElements.define("read-view", ReadView);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{"use strict";class n extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.addEventListeners()}render(){if(!this.shadowRoot)return;const n=(document.documentElement.lang||navigator.language).startsWith("de")?"Seitenleiste umschalten":"Toggle sidebar";this.shadowRoot.innerHTML='\n <style>\n :host {\n --spacing: 0.25rem;\n --drawer-side-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;\n --toggler-size:
|
|
1
|
+
(()=>{"use strict";class n extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.addEventListeners()}render(){if(!this.shadowRoot)return;const n=(document.documentElement.lang||navigator.language).startsWith("de")?"Seitenleiste umschalten":"Toggle sidebar";this.shadowRoot.innerHTML='\n <style>\n :host {\n --spacing: 0.25rem;\n --drawer-side-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;\n --toggler-size: calc(\n var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +\n (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) +\n var(--bs-btn-padding-y, 0.375rem) + var(--bs-btn-border-width, 1px)\n );\n --side-width: 18rem;\n --base-z-index: 0;\n }\n\n .root {\n position: relative;\n display: grid;\n height: 100%;\n grid-template-columns:\n 0 var(--toggler-size) calc(var(--side-width) - var(--toggler-size))\n auto;\n grid-template-rows: var(--toggler-size) auto;\n }\n\n .hidden-input {\n position: fixed;\n --size: 0;\n height: var(--size);\n width: var(--size);\n appearance: none;\n opacity: 0;\n }\n\n .toggler {\n grid-column-start: 2;\n }\n\n .hidden-input:focus-visible + .toggler ::slotted(*) {\n --trigger-box-shadow: var(--trigger-focus-box-shadow, inset 0 0 0.25rem);\n }\n\n @media (width < 64rem) {\n .toggler[for="layout-expand"] {\n display: none;\n }\n }\n\n @media (width >= 64rem) {\n .toggler[for="layout-drawer"] {\n display: none;\n }\n }\n\n .header {\n grid-column-start: 3;\n grid-column-end: 5;\n }\n\n .side {\n overflow: auto;\n }\n\n @media (width < 64rem) {\n .side {\n translate: -100% 0;\n height: 100%;\n transition: translate 0.2s ease;\n }\n\n #layout-drawer:checked ~ .side {\n position: fixed;\n top: 0;\n left: 0;\n z-index: calc(var(--base-z-index) + 1);\n translate: 0;\n width: calc(var(--spacing) * 80);\n box-shadow: var(--drawer-side-shadow);\n }\n }\n\n @media (width >= 64rem) {\n #layout-expand:checked ~ .side {\n grid-column-start: 2;\n grid-column-end: 4;\n }\n }\n\n .main {\n overflow: auto;\n grid-column-start: 2;\n grid-column-end: 5;\n }\n\n @media (width >= 64rem) {\n #layout-expand:checked ~ .main {\n grid-column-start: 4;\n }\n }\n\n .overlay {\n position: fixed;\n z-index: var(--base-z-index);\n inset: 0;\n display: none;\n }\n\n @media (width < 64rem) {\n #layout-drawer:checked ~ .overlay {\n display: block;\n }\n }\n </style>\n\n <div class="root">\n <input\n id="layout-expand"\n type="checkbox"\n class="hidden-input"\n '.concat(localStorage.getItem("side-layout-shrink")?"":"checked",'\n />\n <label class="toggler" for="layout-expand" title="').concat(n,'" role="button">\n <slot name="expand-toggler">🍔</slot>\n </label>\n\n <input id="layout-drawer" type="checkbox" class="hidden-input" />\n <label class="toggler" for="layout-drawer" title="').concat(n,'" role="button">\n <slot name="drawer-toggler">🍔</slot>\n </label>\n\n <header class="header"><slot name="header"></slot></header>\n <div class="side"><slot name="side"></slot></div>\n <main class="main"><slot></slot></main>\n <label aria-label="Close sidebar" for="layout-drawer" class="overlay"\n ><slot name="overlay"></slot\n ></label>\n </div>\n ')}addEventListeners(){this.shadowRoot&&this.shadowRoot.querySelector("#layout-expand").addEventListener("change",this.handleLayoutExpandChange.bind(this))}handleLayoutExpandChange(n){n.target.checked?localStorage.removeItem("side-layout-shrink"):localStorage.setItem("side-layout-shrink","true")}}customElements.define("side-layout",n)})();
|
package/dist/js/side-layout.js
CHANGED
|
@@ -19,7 +19,7 @@ class SideLayout extends HTMLElement {
|
|
|
19
19
|
if (!this.shadowRoot) return;
|
|
20
20
|
const language = document.documentElement.lang || navigator.language;
|
|
21
21
|
const toggleSidebarText = language.startsWith("de") ? "Seitenleiste umschalten" : "Toggle sidebar";
|
|
22
|
-
this.shadowRoot.innerHTML = /* HTML */"\n <style>\n :host {\n --spacing: 0.25rem;\n --drawer-side-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;\n --toggler-size:
|
|
22
|
+
this.shadowRoot.innerHTML = /* HTML */"\n <style>\n :host {\n --spacing: 0.25rem;\n --drawer-side-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;\n --toggler-size: calc(\n var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +\n (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) +\n var(--bs-btn-padding-y, 0.375rem) + var(--bs-btn-border-width, 1px)\n );\n --side-width: 18rem;\n --base-z-index: 0;\n }\n\n .root {\n position: relative;\n display: grid;\n height: 100%;\n grid-template-columns:\n 0 var(--toggler-size) calc(var(--side-width) - var(--toggler-size))\n auto;\n grid-template-rows: var(--toggler-size) auto;\n }\n\n .hidden-input {\n position: fixed;\n --size: 0;\n height: var(--size);\n width: var(--size);\n appearance: none;\n opacity: 0;\n }\n\n .toggler {\n grid-column-start: 2;\n }\n\n .hidden-input:focus-visible + .toggler ::slotted(*) {\n --trigger-box-shadow: var(--trigger-focus-box-shadow, inset 0 0 0.25rem);\n }\n\n @media (width < 64rem) {\n .toggler[for=\"layout-expand\"] {\n display: none;\n }\n }\n\n @media (width >= 64rem) {\n .toggler[for=\"layout-drawer\"] {\n display: none;\n }\n }\n\n .header {\n grid-column-start: 3;\n grid-column-end: 5;\n }\n\n .side {\n overflow: auto;\n }\n\n @media (width < 64rem) {\n .side {\n translate: -100% 0;\n height: 100%;\n transition: translate 0.2s ease;\n }\n\n #layout-drawer:checked ~ .side {\n position: fixed;\n top: 0;\n left: 0;\n z-index: calc(var(--base-z-index) + 1);\n translate: 0;\n width: calc(var(--spacing) * 80);\n box-shadow: var(--drawer-side-shadow);\n }\n }\n\n @media (width >= 64rem) {\n #layout-expand:checked ~ .side {\n grid-column-start: 2;\n grid-column-end: 4;\n }\n }\n\n .main {\n overflow: auto;\n grid-column-start: 2;\n grid-column-end: 5;\n }\n\n @media (width >= 64rem) {\n #layout-expand:checked ~ .main {\n grid-column-start: 4;\n }\n }\n\n .overlay {\n position: fixed;\n z-index: var(--base-z-index);\n inset: 0;\n display: none;\n }\n\n @media (width < 64rem) {\n #layout-drawer:checked ~ .overlay {\n display: block;\n }\n }\n </style>\n\n <div class=\"root\">\n <input\n id=\"layout-expand\"\n type=\"checkbox\"\n class=\"hidden-input\"\n ".concat(!localStorage.getItem("side-layout-shrink") ? "checked" : "", "\n />\n <label class=\"toggler\" for=\"layout-expand\" title=\"").concat(toggleSidebarText, "\" role=\"button\">\n <slot name=\"expand-toggler\">\uD83C\uDF54</slot>\n </label>\n\n <input id=\"layout-drawer\" type=\"checkbox\" class=\"hidden-input\" />\n <label class=\"toggler\" for=\"layout-drawer\" title=\"").concat(toggleSidebarText, "\" role=\"button\">\n <slot name=\"drawer-toggler\">\uD83C\uDF54</slot>\n </label>\n\n <header class=\"header\"><slot name=\"header\"></slot></header>\n <div class=\"side\"><slot name=\"side\"></slot></div>\n <main class=\"main\"><slot></slot></main>\n <label aria-label=\"Close sidebar\" for=\"layout-drawer\" class=\"overlay\"\n ><slot name=\"overlay\"></slot\n ></label>\n </div>\n ");
|
|
23
23
|
}
|
|
24
24
|
addEventListeners() {
|
|
25
25
|
if (!this.shadowRoot) return;
|