@things-factory/apptool-ui 9.0.0-beta.8 → 9.0.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-client/index.js +1 -2
- package/dist-client/index.js.map +1 -1
- package/dist-client/layout/app-busybar.js +17 -17
- package/dist-client/layout/app-busybar.js.map +1 -1
- package/dist-client/layout/app-toolbar.js +47 -47
- package/dist-client/layout/app-toolbar.js.map +1 -1
- package/dist-client/layout/page-mdibar.js +104 -109
- package/dist-client/layout/page-mdibar.js.map +1 -1
- package/dist-client/layout/page-toolbar.js +30 -30
- package/dist-client/layout/page-toolbar.js.map +1 -1
- package/dist-client/mdibar-setting-let.js +14 -15
- package/dist-client/mdibar-setting-let.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-server/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -5
package/dist-client/index.js
CHANGED
|
@@ -9,7 +9,6 @@ import { appendViewpart, VIEWPART_POSITION, VIEWPART_LEVEL } from '@operato/layo
|
|
|
9
9
|
import { isMobileDevice } from '@operato/utils';
|
|
10
10
|
import { ADD_SETTING } from '@things-factory/setting-base/dist-client';
|
|
11
11
|
export async function setupAppToolPart({ toolbar = true, busybar = true, mdibar = true, pageToolbar = false }) {
|
|
12
|
-
var _a;
|
|
13
12
|
if (toolbar) {
|
|
14
13
|
appendViewpart({
|
|
15
14
|
name: 'apptoolbar',
|
|
@@ -31,7 +30,7 @@ export async function setupAppToolPart({ toolbar = true, busybar = true, mdibar
|
|
|
31
30
|
});
|
|
32
31
|
}
|
|
33
32
|
if (mdibar && !isMobileDevice()) {
|
|
34
|
-
const show = ((
|
|
33
|
+
const show = ((await clientSettingStore.get('mdibar'))?.value || {}).show;
|
|
35
34
|
appendViewpart({
|
|
36
35
|
name: 'appmdibar',
|
|
37
36
|
viewpart: {
|
package/dist-client/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,uBAAuB,CAAA;AAC9B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAA;AAEtE,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAAC,EACrC,OAAO,GAAG,IAAI,EACd,OAAO,GAAG,IAAI,EACd,MAAM,GAAG,IAAI,EACb,WAAW,GAAG,KAAK,EAMpB
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,uBAAuB,CAAA;AAC9B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAA;AAEtE,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAAC,EACrC,OAAO,GAAG,IAAI,EACd,OAAO,GAAG,IAAI,EACd,MAAM,GAAG,IAAI,EACb,WAAW,GAAG,KAAK,EAMpB;IACC,IAAI,OAAO,EAAE,CAAC;QACZ,cAAc,CAAC;YACb,IAAI,EAAE,YAAY;YAClB,QAAQ,EAAE;gBACR,IAAI,EAAE,IAAI;gBACV,QAAQ,EAAE,IAAI,CAAA,+BAA+B;aAC9C;YACD,QAAQ,EAAE,iBAAiB,CAAC,SAAS;SACtC,CAAC,CAAA;IACJ,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,cAAc,CAAC;YACb,IAAI,EAAE,YAAY;YAClB,QAAQ,EAAE;gBACR,IAAI,EAAE,IAAI;gBACV,QAAQ,EAAE,IAAI,CAAA,+BAA+B;aAC9C;YACD,QAAQ,EAAE,iBAAiB,CAAC,SAAS;SACtC,CAAC,CAAA;IACJ,CAAC;IAED,IAAI,MAAM,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC;QAChC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAM,kBAAkB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,CAAA;QAEzE,cAAc,CAAC;YACb,IAAI,EAAE,WAAW;YACjB,QAAQ,EAAE;gBACR,IAAI;gBACJ,KAAK,EAAE,cAAc,CAAC,OAAO;gBAC7B,QAAQ,EAAE,IAAI,CAAA,+BAA+B;aAC9C;YACD,QAAQ,EAAE,iBAAiB,CAAC,cAAc;SAC3C,CAAC,CAAA;QAEF,KAAK,CAAC,QAAQ,CAAC;YACb,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE;gBACP,GAAG,EAAE,EAAE;gBACP,QAAQ,EAAE,IAAI,CAAA,6CAA6C;aAC5D;SACF,CAAC,CAAA;IACJ,CAAC;IAED,IAAI,WAAW,EAAE,CAAC;QAChB,cAAc,CAAC;YACb,IAAI,EAAE,cAAc;YACpB,QAAQ,EAAE;gBACR,IAAI,EAAE,IAAI;gBACV,QAAQ,EAAE,IAAI,CAAA,kCAAkC;aACjD;YACD,QAAQ,EAAE,iBAAiB,CAAC,cAAc;SAC3C,CAAC,CAAA;IACJ,CAAC;AACH,CAAC","sourcesContent":["import './layout/app-toolbar'\nimport './layout/app-busybar'\nimport './layout/page-mdibar'\nimport './layout/page-toolbar'\nimport './mdibar-setting-let'\n\nimport { html } from 'lit-html'\n\nimport { store, clientSettingStore } from '@operato/shell'\nimport { appendViewpart, VIEWPART_POSITION, VIEWPART_LEVEL } from '@operato/layout'\nimport { isMobileDevice } from '@operato/utils'\n\nimport { ADD_SETTING } from '@things-factory/setting-base/dist-client'\n\nexport async function setupAppToolPart({\n toolbar = true,\n busybar = true,\n mdibar = true,\n pageToolbar = false\n}: {\n toolbar?: boolean\n busybar?: boolean\n mdibar?: boolean\n pageToolbar?: boolean\n}) {\n if (toolbar) {\n appendViewpart({\n name: 'apptoolbar',\n viewpart: {\n show: true,\n template: html` <app-toolbar></app-toolbar> `\n },\n position: VIEWPART_POSITION.HEADERBAR\n })\n }\n\n if (busybar) {\n appendViewpart({\n name: 'appbusybar',\n viewpart: {\n show: true,\n template: html` <app-busybar></app-busybar> `\n },\n position: VIEWPART_POSITION.HEADERBAR\n })\n }\n\n if (mdibar && !isMobileDevice()) {\n const show = ((await clientSettingStore.get('mdibar'))?.value || {}).show\n\n appendViewpart({\n name: 'appmdibar',\n viewpart: {\n show,\n level: VIEWPART_LEVEL.TOPMOST,\n template: html` <page-mdibar></page-mdibar> `\n },\n position: VIEWPART_POSITION.PAGE_HEADERBAR\n })\n\n store.dispatch({\n type: ADD_SETTING,\n setting: {\n seq: 21,\n template: html` <mdibar-setting-let></mdibar-setting-let> `\n }\n })\n }\n\n if (pageToolbar) {\n appendViewpart({\n name: 'page-toolbar',\n viewpart: {\n show: true,\n template: html` <page-toolbar> </page-toolbar> `\n },\n position: VIEWPART_POSITION.PAGE_HEADERBAR\n })\n }\n}\n"]}
|
|
@@ -5,6 +5,23 @@ import { customElement, state } from 'lit/decorators.js';
|
|
|
5
5
|
import { connect } from 'pwa-helpers/connect-mixin.js';
|
|
6
6
|
import { store } from '@operato/shell';
|
|
7
7
|
let AppBusyBar = class AppBusyBar extends connect(store)(LitElement) {
|
|
8
|
+
static { this.styles = [
|
|
9
|
+
css `
|
|
10
|
+
:host {
|
|
11
|
+
display: block;
|
|
12
|
+
position: relative;
|
|
13
|
+
|
|
14
|
+
--md-linear-progress-track-color: var(--md-sys-color-on-primary);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
md-linear-progress {
|
|
18
|
+
position: absolute;
|
|
19
|
+
bottom: 0;
|
|
20
|
+
width: 100%;
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
}
|
|
23
|
+
`
|
|
24
|
+
]; }
|
|
8
25
|
render() {
|
|
9
26
|
return this.busy ? html `<md-linear-progress indeterminate></md-linear-progress>` : html ``;
|
|
10
27
|
}
|
|
@@ -23,23 +40,6 @@ let AppBusyBar = class AppBusyBar extends connect(store)(LitElement) {
|
|
|
23
40
|
}
|
|
24
41
|
}
|
|
25
42
|
};
|
|
26
|
-
AppBusyBar.styles = [
|
|
27
|
-
css `
|
|
28
|
-
:host {
|
|
29
|
-
display: block;
|
|
30
|
-
position: relative;
|
|
31
|
-
|
|
32
|
-
--md-linear-progress-track-color: var(--md-sys-color-on-primary);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
md-linear-progress {
|
|
36
|
-
position: absolute;
|
|
37
|
-
bottom: 0;
|
|
38
|
-
width: 100%;
|
|
39
|
-
overflow: hidden;
|
|
40
|
-
}
|
|
41
|
-
`
|
|
42
|
-
];
|
|
43
43
|
__decorate([
|
|
44
44
|
state(),
|
|
45
45
|
__metadata("design:type", Boolean)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-busybar.js","sourceRoot":"","sources":["../../client/layout/app-busybar.ts"],"names":[],"mappings":";AAAA,OAAO,2CAA2C,CAAA;AAElD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAY,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAGtC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"app-busybar.js","sourceRoot":"","sources":["../../client/layout/app-busybar.ts"],"names":[],"mappings":";AAAA,OAAO,2CAA2C,CAAA;AAElD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAY,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAGtC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;aAC1C,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;KAcF;KACF,AAhBY,CAgBZ;IAMD,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,yDAAyD,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;IAC3F,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACrB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;QACnB,CAAC;QAED,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA;QAEhC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC7B,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;oBACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;gBAClB,CAAC;gBAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;YACrB,CAAC,EAAE,GAAG,CAAC,CAAA;QACT,CAAC;IACH,CAAC;;AAxBgB;IAAhB,KAAK,EAAE;8BAAgB,OAAO;wCAAA;AACd;IAAhB,KAAK,EAAE;;6CAA4B;AACnB;IAAhB,KAAK,EAAE;;2CAAsB;AArB1B,UAAU;IADf,aAAa,CAAC,aAAa,CAAC;GACvB,UAAU,CA4Cf","sourcesContent":["import '@material/web/progress/linear-progress.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { store } from '@operato/shell'\n\n@customElement('app-busybar')\nclass AppBusyBar extends connect(store)(LitElement) {\n static styles = [\n css`\n :host {\n display: block;\n position: relative;\n\n --md-linear-progress-track-color: var(--md-sys-color-on-primary);\n }\n\n md-linear-progress {\n position: absolute;\n bottom: 0;\n width: 100%;\n overflow: hidden;\n }\n `\n ]\n\n @state() private busy?: Boolean\n @state() private lastState?: boolean\n @state() private timeout?: any\n\n render() {\n return this.busy ? html`<md-linear-progress indeterminate></md-linear-progress>` : html``\n }\n\n stateChanged(state) {\n if (!state.busy.busy) {\n this.busy = false\n }\n\n this.lastState = state.busy.busy\n\n if (!this.timeout) {\n this.timeout = setTimeout(() => {\n if (this.lastState) {\n this.busy = true\n }\n\n this.timeout = null\n }, 500)\n }\n }\n}\n"]}
|
|
@@ -10,52 +10,8 @@ let AppToolbar = class AppToolbar extends connect(store)(LitElement) {
|
|
|
10
10
|
super(...arguments);
|
|
11
11
|
this._tools = [];
|
|
12
12
|
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
var frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END);
|
|
16
|
-
var frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT);
|
|
17
|
-
var centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER);
|
|
18
|
-
var rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR);
|
|
19
|
-
var rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END);
|
|
20
|
-
/* 현재 OVERLAY가 있으면, 뒤로가기 버튼이 보이고, 아니면, HOME 버튼이 보인다. */
|
|
21
|
-
var state = history.state;
|
|
22
|
-
var overlay = (state || {}).overlay;
|
|
23
|
-
return html `
|
|
24
|
-
${overlay
|
|
25
|
-
? html ` <md-icon @click=${e => history.back()}>arrow_back</md-icon> `
|
|
26
|
-
: frontEndTools.length == 0
|
|
27
|
-
? html ` <md-icon @click=${e => this.navigateToHome()}>home</md-icon> `
|
|
28
|
-
: frontEndTools.map(tool => html ` ${tool.template} `)}
|
|
29
|
-
${frontTools.map(tool => html ` ${tool.template} `)}
|
|
30
|
-
|
|
31
|
-
<div center @mousewheel=${this.onWheelEvent}>${centerTools.map(tool => html ` ${tool.template} `)}</div>
|
|
32
|
-
|
|
33
|
-
${rearTools.map(tool => html ` ${tool.template} `)} ${rearEndTools.map(tool => html ` ${tool.template} `)}
|
|
34
|
-
`;
|
|
35
|
-
}
|
|
36
|
-
stateChanged(state) {
|
|
37
|
-
/* page의 변화를 감지하기 위해서 route의 변화를 체크한다. */
|
|
38
|
-
this._route = state.route;
|
|
39
|
-
this._tools = state.apptool.tools;
|
|
40
|
-
}
|
|
41
|
-
navigateToHome() {
|
|
42
|
-
var base = document.querySelector('base');
|
|
43
|
-
if (base) {
|
|
44
|
-
navigate(base.getAttribute('href') || '');
|
|
45
|
-
}
|
|
46
|
-
else {
|
|
47
|
-
navigate('/');
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
onWheelEvent(e) {
|
|
51
|
-
const center = e.currentTarget;
|
|
52
|
-
var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
|
|
53
|
-
center.scrollLeft -= delta * 10;
|
|
54
|
-
e.preventDefault();
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
AppToolbar.styles = [
|
|
58
|
-
css `
|
|
13
|
+
static { this.styles = [
|
|
14
|
+
css `
|
|
59
15
|
:host {
|
|
60
16
|
display: flex;
|
|
61
17
|
height: var(--header-bar-height, 42px);
|
|
@@ -101,7 +57,51 @@ AppToolbar.styles = [
|
|
|
101
57
|
width: 10px;
|
|
102
58
|
}
|
|
103
59
|
`
|
|
104
|
-
];
|
|
60
|
+
]; }
|
|
61
|
+
render() {
|
|
62
|
+
var tools = this._tools || [];
|
|
63
|
+
var frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END);
|
|
64
|
+
var frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT);
|
|
65
|
+
var centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER);
|
|
66
|
+
var rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR);
|
|
67
|
+
var rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END);
|
|
68
|
+
/* 현재 OVERLAY가 있으면, 뒤로가기 버튼이 보이고, 아니면, HOME 버튼이 보인다. */
|
|
69
|
+
var state = history.state;
|
|
70
|
+
var overlay = (state || {}).overlay;
|
|
71
|
+
return html `
|
|
72
|
+
${overlay
|
|
73
|
+
? html ` <md-icon @click=${e => history.back()}>arrow_back</md-icon> `
|
|
74
|
+
: frontEndTools.length == 0
|
|
75
|
+
? html ` <md-icon @click=${e => this.navigateToHome()}>home</md-icon> `
|
|
76
|
+
: frontEndTools.map(tool => html ` ${tool.template} `)}
|
|
77
|
+
${frontTools.map(tool => html ` ${tool.template} `)}
|
|
78
|
+
|
|
79
|
+
<div center @mousewheel=${this.onWheelEvent}>${centerTools.map(tool => html ` ${tool.template} `)}</div>
|
|
80
|
+
|
|
81
|
+
${rearTools.map(tool => html ` ${tool.template} `)} ${rearEndTools.map(tool => html ` ${tool.template} `)}
|
|
82
|
+
`;
|
|
83
|
+
}
|
|
84
|
+
stateChanged(state) {
|
|
85
|
+
/* page의 변화를 감지하기 위해서 route의 변화를 체크한다. */
|
|
86
|
+
this._route = state.route;
|
|
87
|
+
this._tools = state.apptool.tools;
|
|
88
|
+
}
|
|
89
|
+
navigateToHome() {
|
|
90
|
+
var base = document.querySelector('base');
|
|
91
|
+
if (base) {
|
|
92
|
+
navigate(base.getAttribute('href') || '');
|
|
93
|
+
}
|
|
94
|
+
else {
|
|
95
|
+
navigate('/');
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
onWheelEvent(e) {
|
|
99
|
+
const center = e.currentTarget;
|
|
100
|
+
var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
|
|
101
|
+
center.scrollLeft -= delta * 10;
|
|
102
|
+
e.preventDefault();
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
105
|
__decorate([
|
|
106
106
|
state(),
|
|
107
107
|
__metadata("design:type", Array)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-toolbar.js","sourceRoot":"","sources":["../../client/layout/app-toolbar.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAGhD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAAnD;;QAkDW,WAAM,GAAqD,EAAE,CAAA;IAuDxE,CAAC;
|
|
1
|
+
{"version":3,"file":"app-toolbar.js","sourceRoot":"","sources":["../../client/layout/app-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { TOOL_POSITION } from '@operato/layout'\nimport { navigate, store } from '@operato/shell'\n\n@customElement('app-toolbar')\nclass AppToolbar extends connect(store)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n height: var(--header-bar-height, 42px);\n color: var(--header-bar-color);\n background-color: var(--header-bar-background-color, white);\n justify-content: space-between;\n align-items: center;\n padding: 0 5px;\n gap: 10px;\n\n text-transform: capitalize;\n }\n\n [center] {\n flex: 1;\n flex-wrap: nowrap;\n display: flex;\n align-items: center;\n overflow: hidden;\n }\n\n [center] > * {\n margin: auto;\n }\n\n :host(.vline) {\n display: block;\n flex: none;\n border-left: 1px solid rgba(255, 255, 255, 0.07);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n width: 0px;\n height: 18px;\n margin: 0 4px;\n }\n\n :host(label) {\n margin-right: 5px;\n color: #fff;\n font-size: 20px;\n }\n\n span.space {\n width: 10px;\n }\n `\n ]\n\n @state() _tools: { position: string; template: TemplateResult }[] = []\n @state() _route: any\n\n @query('[center]') center!: HTMLDivElement\n\n render() {\n var tools = this._tools || ([] as { position: string; template: TemplateResult }[])\n\n var frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)\n var frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)\n var centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)\n var rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)\n var rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)\n\n /* 현재 OVERLAY가 있으면, 뒤로가기 버튼이 보이고, 아니면, HOME 버튼이 보인다. */\n var state = history.state\n var overlay = (state || {}).overlay\n\n return html`\n ${overlay\n ? html` <md-icon @click=${e => history.back()}>arrow_back</md-icon> `\n : frontEndTools.length == 0\n ? html` <md-icon @click=${e => this.navigateToHome()}>home</md-icon> `\n : frontEndTools.map(tool => html` ${tool.template} `)}\n ${frontTools.map(tool => html` ${tool.template} `)}\n\n <div center @mousewheel=${this.onWheelEvent}>${centerTools.map(tool => html` ${tool.template} `)}</div>\n\n ${rearTools.map(tool => html` ${tool.template} `)} ${rearEndTools.map(tool => html` ${tool.template} `)}\n `\n }\n\n stateChanged(state) {\n /* page의 변화를 감지하기 위해서 route의 변화를 체크한다. */\n this._route = state.route\n\n this._tools = state.apptool.tools\n }\n\n navigateToHome() {\n var base = document.querySelector('base')\n if (base) {\n navigate(base.getAttribute('href') || '')\n } else {\n navigate('/')\n }\n }\n\n onWheelEvent(e) {\n const center = e.currentTarget\n var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))\n center.scrollLeft -= delta * 10\n\n e.preventDefault()\n }\n}\n"]}
|
|
@@ -13,6 +13,103 @@ let PageMDIBar = class PageMDIBar extends connect(store)(localize(i18next)(LitEl
|
|
|
13
13
|
this.routes = [{ url: this.getHomeRoute() }];
|
|
14
14
|
this.title = '';
|
|
15
15
|
}
|
|
16
|
+
static { this.styles = [
|
|
17
|
+
css `
|
|
18
|
+
:host {
|
|
19
|
+
display: flex;
|
|
20
|
+
background-color: var(--md-sys-color-secondary-container);
|
|
21
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
22
|
+
font-size: var(--fontsize-small);
|
|
23
|
+
overflow: hidden;
|
|
24
|
+
align-items: stretch;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
div {
|
|
28
|
+
box-sizing: border-box;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
div[routes] {
|
|
32
|
+
flex: 1;
|
|
33
|
+
|
|
34
|
+
display: flex;
|
|
35
|
+
overflow: hidden;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
div[route] {
|
|
39
|
+
display: inline-block;
|
|
40
|
+
position: relative;
|
|
41
|
+
min-width: var(--mdibar-min-width, 100px);
|
|
42
|
+
max-width: var(--mdibar-max-width, 150px);
|
|
43
|
+
padding: var(--mdibar-padding, 3px 22px 1px 7px);
|
|
44
|
+
border-right: var(--border-dim-color);
|
|
45
|
+
border-top: var(--border-dim-color);
|
|
46
|
+
border-bottom: var(--border-dim-color);
|
|
47
|
+
white-space: nowrap;
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
text-overflow: ellipsis;
|
|
50
|
+
text-transform: capitalize;
|
|
51
|
+
cursor: pointer;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
div[arrows] {
|
|
55
|
+
display: flex;
|
|
56
|
+
border: var(--border-dim-color);
|
|
57
|
+
align-items: center;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
div[arrows] * {
|
|
61
|
+
opacity: 0.8;
|
|
62
|
+
font-size: var(--mdibar-icon-size, 24px);
|
|
63
|
+
flex: 1;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
md-icon {
|
|
67
|
+
--md-icon-size: var(--mdibar-icon-size, 18px);
|
|
68
|
+
opacity: 0.5;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
md-icon:hover {
|
|
72
|
+
opacity: 0.8;
|
|
73
|
+
color: var(--md-sys-color-secondary);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
div[arrows] md-icon[disabled] {
|
|
77
|
+
opacity: 0.2;
|
|
78
|
+
color: unset;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
div[route] md-icon {
|
|
82
|
+
position: absolute;
|
|
83
|
+
right: 2px;
|
|
84
|
+
margin-left: var(--spacing-small);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
div[route][active] {
|
|
88
|
+
background-color: var(--md-sys-color-background);
|
|
89
|
+
border-bottom: 1px solid var(--md-sys-color-background);
|
|
90
|
+
color: var(--md-sys-color-on-background);
|
|
91
|
+
font-weight: bold;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
div[route][home] {
|
|
95
|
+
padding: var(--mdibar-padding-home, 3px 5px 0 23px);
|
|
96
|
+
overflow: visible;
|
|
97
|
+
min-width: unset;
|
|
98
|
+
max-width: unset;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
div[route][home] md-icon {
|
|
102
|
+
left: 0;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
div[route][rest] {
|
|
106
|
+
flex: 1;
|
|
107
|
+
min-width: unset;
|
|
108
|
+
max-width: unset;
|
|
109
|
+
border-right: unset;
|
|
110
|
+
}
|
|
111
|
+
`
|
|
112
|
+
]; }
|
|
16
113
|
render() {
|
|
17
114
|
const home = this.routes[0];
|
|
18
115
|
const routes = this.routes.slice(1);
|
|
@@ -45,9 +142,8 @@ let PageMDIBar = class PageMDIBar extends connect(store)(localize(i18next)(LitEl
|
|
|
45
142
|
}}
|
|
46
143
|
>
|
|
47
144
|
${routes.map((route, idx) => {
|
|
48
|
-
|
|
49
|
-
const
|
|
50
|
-
const title = (context === null || context === void 0 ? void 0 : context.title) || ((_b = context === null || context === void 0 ? void 0 : context.search) === null || _b === void 0 ? void 0 : _b.placeholder) || '';
|
|
145
|
+
const context = route.page?.context;
|
|
146
|
+
const title = context?.title || context?.search?.placeholder || '';
|
|
51
147
|
return html `
|
|
52
148
|
<div
|
|
53
149
|
@contextmenu=${(e) => {
|
|
@@ -109,14 +205,13 @@ let PageMDIBar = class PageMDIBar extends connect(store)(localize(i18next)(LitEl
|
|
|
109
205
|
}
|
|
110
206
|
}
|
|
111
207
|
stateChanged(state) {
|
|
112
|
-
var _a;
|
|
113
208
|
const { page, context, activePage, resourceId, params } = state.route || {};
|
|
114
209
|
this.activePage = activePage;
|
|
115
210
|
this.pagename = page;
|
|
116
211
|
this.resourceId = resourceId;
|
|
117
212
|
this.params = params;
|
|
118
213
|
/* refresh를 일으키기위한 property 변경을 위한 코드임. */
|
|
119
|
-
this.title = context.title ||
|
|
214
|
+
this.title = context.title || context.search?.placeholder;
|
|
120
215
|
}
|
|
121
216
|
onScrollByArrow(delta) {
|
|
122
217
|
this.scroller.scrollLeft -= delta * 10;
|
|
@@ -131,7 +226,7 @@ let PageMDIBar = class PageMDIBar extends connect(store)(localize(i18next)(LitEl
|
|
|
131
226
|
}
|
|
132
227
|
getHomeRoute() {
|
|
133
228
|
var base = document.querySelector('base');
|
|
134
|
-
return
|
|
229
|
+
return base?.getAttribute('href') || '/';
|
|
135
230
|
}
|
|
136
231
|
moveTo(route) {
|
|
137
232
|
console.log('route', route);
|
|
@@ -141,10 +236,9 @@ let PageMDIBar = class PageMDIBar extends connect(store)(localize(i18next)(LitEl
|
|
|
141
236
|
navigate(this.getHomeRoute());
|
|
142
237
|
}
|
|
143
238
|
closePage(route, idx) {
|
|
144
|
-
var _a;
|
|
145
239
|
this.routes = [...this.routes.slice(0, idx), ...this.routes.slice(idx + 1)];
|
|
146
240
|
const page = route.page;
|
|
147
|
-
|
|
241
|
+
page.parentNode?.removeChild(page);
|
|
148
242
|
page.pageDispose();
|
|
149
243
|
if (this.activePage === page) {
|
|
150
244
|
const next = this.routes.length > 0 ? Math.max(0, idx - 1) : -1;
|
|
@@ -153,9 +247,8 @@ let PageMDIBar = class PageMDIBar extends connect(store)(localize(i18next)(LitEl
|
|
|
153
247
|
}
|
|
154
248
|
closeAllPage() {
|
|
155
249
|
this.routes.slice(1).forEach((route, idx) => {
|
|
156
|
-
var _a;
|
|
157
250
|
const page = route.page;
|
|
158
|
-
|
|
251
|
+
page.parentNode?.removeChild(page);
|
|
159
252
|
page.pageDispose();
|
|
160
253
|
});
|
|
161
254
|
this.routes = [this.routes[0]];
|
|
@@ -163,12 +256,11 @@ let PageMDIBar = class PageMDIBar extends connect(store)(localize(i18next)(LitEl
|
|
|
163
256
|
}
|
|
164
257
|
closeOtherPages(route, idx) {
|
|
165
258
|
this.routes.slice(1).forEach((route, idx) => {
|
|
166
|
-
var _a;
|
|
167
259
|
if (route === route) {
|
|
168
260
|
return;
|
|
169
261
|
}
|
|
170
262
|
const page = route.page;
|
|
171
|
-
|
|
263
|
+
page.parentNode?.removeChild(page);
|
|
172
264
|
page.pageDispose();
|
|
173
265
|
});
|
|
174
266
|
this.routes = [this.routes[0], route];
|
|
@@ -214,103 +306,6 @@ let PageMDIBar = class PageMDIBar extends connect(store)(localize(i18next)(LitEl
|
|
|
214
306
|
});
|
|
215
307
|
}
|
|
216
308
|
};
|
|
217
|
-
PageMDIBar.styles = [
|
|
218
|
-
css `
|
|
219
|
-
:host {
|
|
220
|
-
display: flex;
|
|
221
|
-
background-color: var(--md-sys-color-secondary-container);
|
|
222
|
-
color: var(--md-sys-color-on-secondary-container);
|
|
223
|
-
font-size: var(--fontsize-small);
|
|
224
|
-
overflow: hidden;
|
|
225
|
-
align-items: stretch;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
div {
|
|
229
|
-
box-sizing: border-box;
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
div[routes] {
|
|
233
|
-
flex: 1;
|
|
234
|
-
|
|
235
|
-
display: flex;
|
|
236
|
-
overflow: hidden;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
div[route] {
|
|
240
|
-
display: inline-block;
|
|
241
|
-
position: relative;
|
|
242
|
-
min-width: var(--mdibar-min-width, 100px);
|
|
243
|
-
max-width: var(--mdibar-max-width, 150px);
|
|
244
|
-
padding: var(--mdibar-padding, 3px 22px 1px 7px);
|
|
245
|
-
border-right: var(--border-dim-color);
|
|
246
|
-
border-top: var(--border-dim-color);
|
|
247
|
-
border-bottom: var(--border-dim-color);
|
|
248
|
-
white-space: nowrap;
|
|
249
|
-
overflow: hidden;
|
|
250
|
-
text-overflow: ellipsis;
|
|
251
|
-
text-transform: capitalize;
|
|
252
|
-
cursor: pointer;
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
div[arrows] {
|
|
256
|
-
display: flex;
|
|
257
|
-
border: var(--border-dim-color);
|
|
258
|
-
align-items: center;
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
div[arrows] * {
|
|
262
|
-
opacity: 0.8;
|
|
263
|
-
font-size: var(--mdibar-icon-size, 24px);
|
|
264
|
-
flex: 1;
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
md-icon {
|
|
268
|
-
--md-icon-size: var(--mdibar-icon-size, 18px);
|
|
269
|
-
opacity: 0.5;
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
md-icon:hover {
|
|
273
|
-
opacity: 0.8;
|
|
274
|
-
color: var(--md-sys-color-secondary);
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
div[arrows] md-icon[disabled] {
|
|
278
|
-
opacity: 0.2;
|
|
279
|
-
color: unset;
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
div[route] md-icon {
|
|
283
|
-
position: absolute;
|
|
284
|
-
right: 2px;
|
|
285
|
-
margin-left: var(--spacing-small);
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
div[route][active] {
|
|
289
|
-
background-color: var(--md-sys-color-background);
|
|
290
|
-
border-bottom: 1px solid var(--md-sys-color-background);
|
|
291
|
-
color: var(--md-sys-color-on-background);
|
|
292
|
-
font-weight: bold;
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
div[route][home] {
|
|
296
|
-
padding: var(--mdibar-padding-home, 3px 5px 0 23px);
|
|
297
|
-
overflow: visible;
|
|
298
|
-
min-width: unset;
|
|
299
|
-
max-width: unset;
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
div[route][home] md-icon {
|
|
303
|
-
left: 0;
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
div[route][rest] {
|
|
307
|
-
flex: 1;
|
|
308
|
-
min-width: unset;
|
|
309
|
-
max-width: unset;
|
|
310
|
-
border-right: unset;
|
|
311
|
-
}
|
|
312
|
-
`
|
|
313
|
-
];
|
|
314
309
|
__decorate([
|
|
315
310
|
state(),
|
|
316
311
|
__metadata("design:type", Array)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-mdibar.js","sourceRoot":"","sources":["../../client/layout/page-mdibar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/popup/ox-popup-menu.js'\n\nimport { css, html, nothing, LitElement } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { navigate, store, PageView } from '@operato/shell'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPopupMenu } from '@operato/popup/ox-popup-menu.js'\n\n@customElement('page-mdibar')\nexport class PageMDIBar extends connect(store)(localize(i18next)(LitElement)) {\n static styles = [\n css`\n :host {\n display: flex;\n background-color: var(--md-sys-color-secondary-container);\n color: var(--md-sys-color-on-secondary-container);\n font-size: var(--fontsize-small);\n overflow: hidden;\n align-items: stretch;\n }\n\n div {\n box-sizing: border-box;\n }\n\n div[routes] {\n flex: 1;\n\n display: flex;\n overflow: hidden;\n }\n\n div[route] {\n display: inline-block;\n position: relative;\n min-width: var(--mdibar-min-width, 100px);\n max-width: var(--mdibar-max-width, 150px);\n padding: var(--mdibar-padding, 3px 22px 1px 7px);\n border-right: var(--border-dim-color);\n border-top: var(--border-dim-color);\n border-bottom: var(--border-dim-color);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-transform: capitalize;\n cursor: pointer;\n }\n\n div[arrows] {\n display: flex;\n border: var(--border-dim-color);\n align-items: center;\n }\n\n div[arrows] * {\n opacity: 0.8;\n font-size: var(--mdibar-icon-size, 24px);\n flex: 1;\n }\n\n md-icon {\n --md-icon-size: var(--mdibar-icon-size, 18px);\n opacity: 0.5;\n }\n\n md-icon:hover {\n opacity: 0.8;\n color: var(--md-sys-color-secondary);\n }\n\n div[arrows] md-icon[disabled] {\n opacity: 0.2;\n color: unset;\n }\n\n div[route] md-icon {\n position: absolute;\n right: 2px;\n margin-left: var(--spacing-small);\n }\n\n div[route][active] {\n background-color: var(--md-sys-color-background);\n border-bottom: 1px solid var(--md-sys-color-background);\n color: var(--md-sys-color-on-background);\n font-weight: bold;\n }\n\n div[route][home] {\n padding: var(--mdibar-padding-home, 3px 5px 0 23px);\n overflow: visible;\n min-width: unset;\n max-width: unset;\n }\n\n div[route][home] md-icon {\n left: 0;\n }\n\n div[route][rest] {\n flex: 1;\n min-width: unset;\n max-width: unset;\n border-right: unset;\n }\n `\n ]\n\n @state() routes: { page?: PageView; url: string }[] = [{ url: this.getHomeRoute() }]\n @state() activePage?: PageView\n @state() pagename?: string\n @state() params?: any\n @state() resourceId?: string\n @state() title: string = ''\n\n @query('[routes]') scroller!: HTMLDivElement\n @query('#context-menu') contextMenu!: HTMLDivElement\n\n private contextMenuTargetIndex?: number\n private contextMenuTargetRoute?: { page?: PageView; url: string }\n\n render() {\n const home = this.routes[0]\n const routes = this.routes.slice(1)\n\n return html`\n <div\n home\n route\n ?active=${this.activePage === home.page}\n @click=${() => this.moveToHome()}\n @contextmenu=${(e: MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n\n delete this.contextMenuTargetRoute\n delete this.contextMenuTargetIndex\n\n this.openContextMenu(e)\n }}\n >\n <md-icon>home</md-icon>​\n </div>\n\n <div\n routes\n @mousewheel=${this.onWheelEvent.bind(this)}\n @contextmenu=${(e: MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n\n delete this.contextMenuTargetRoute\n delete this.contextMenuTargetIndex\n\n this.openContextMenu(e)\n }}\n >\n ${routes.map((route, idx) => {\n const context = route.page?.context as any\n const title = context?.title || context?.search?.placeholder || ''\n\n return html`\n <div\n @contextmenu=${(e: MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n\n this.contextMenuTargetRoute = route\n this.contextMenuTargetIndex = idx\n\n this.openContextMenu(e)\n }}\n @click=${() => this.moveTo(route)}\n ?active=${this.activePage === route.page}\n route\n >\n ${typeof title == 'object' ? title.text : title}\n <md-icon\n @click=${(e: MouseEvent) => {\n e.stopPropagation()\n this.closePage(route, idx + 1)\n }}\n >close</md-icon\n >\n </div>\n `\n })}\n <div rest route></div>\n </div>\n\n <div arrows>\n <md-icon ?disabled=${!this.scroller || this.scroller.scrollLeft <= 0} @click=${() => this.onScrollByArrow(1)}\n >arrow_left</md-icon\n >\n <md-icon\n ?disabled=${!this.scroller ||\n this.scroller.scrollWidth <= this.scroller.offsetWidth + this.scroller.scrollLeft}\n @click=${() => this.onScrollByArrow(-1)}\n >arrow_right</md-icon\n >\n </div>\n `\n }\n\n updated(changed) {\n if (\n changed.has('activePage') ||\n (!changed.has('pagename') && (changed.has('resourceId') || changed.has('params')))\n ) {\n if (!this.activePage) {\n return\n }\n\n const page = this.activePage\n\n if (location.pathname == this.getHomeRoute()) {\n this.routes[0].page = page\n return\n }\n\n var route = this.routes.find(route => route.page === page)\n if (!route) {\n this.routes = [...this.routes, { page, url: location.href }]\n } else {\n route.url = location.href\n }\n }\n }\n\n stateChanged(state) {\n const { page, context, activePage, resourceId, params } = state.route || {}\n this.activePage = activePage\n this.pagename = page\n this.resourceId = resourceId\n this.params = params\n\n /* refresh를 일으키기위한 property 변경을 위한 코드임. */\n this.title = context.title || context.search?.placeholder\n }\n\n onScrollByArrow(delta: number) {\n this.scroller.scrollLeft -= delta * 10\n\n this.requestUpdate()\n }\n\n onWheelEvent(e: Event) {\n const target = e.currentTarget as HTMLDivElement\n\n var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))\n target.scrollLeft -= delta * 10\n\n this.requestUpdate()\n\n e.preventDefault()\n }\n\n getHomeRoute() {\n var base = document.querySelector('base')\n return base?.getAttribute('href') || '/'\n }\n\n moveTo(route: { page?: PageView; url: string }) {\n console.log('route', route)\n navigate(route.url)\n }\n\n moveToHome() {\n navigate(this.getHomeRoute())\n }\n\n closePage(route: { page?: PageView; url: string }, idx: number) {\n this.routes = [...this.routes.slice(0, idx), ...this.routes.slice(idx + 1)]\n const page = route.page!\n\n page.parentNode?.removeChild(page)\n page.pageDispose()\n\n if (this.activePage === page) {\n const next = this.routes.length > 0 ? Math.max(0, idx - 1) : -1\n navigate(next != -1 ? this.routes[next].url : this.getHomeRoute())\n }\n }\n\n closeAllPage() {\n this.routes.slice(1).forEach((route, idx) => {\n const page = route.page!\n\n page.parentNode?.removeChild(page)\n page.pageDispose()\n })\n\n this.routes = [this.routes[0]]\n\n navigate(this.routes[0].url)\n }\n\n closeOtherPages(route: { page?: PageView; url: string }, idx: number) {\n this.routes.slice(1).forEach((route, idx) => {\n if (route === route) {\n return\n }\n\n const page = route.page!\n\n page.parentNode?.removeChild(page)\n page.pageDispose()\n })\n\n this.routes = [this.routes[0], route]\n\n navigate(route.url)\n }\n\n openContextMenu(e: MouseEvent) {\n OxPopupMenu.open({\n template: html`\n ${this.contextMenuTargetRoute\n ? html`\n <ox-popup-menuitem\n label=\"close\"\n @select=${(e: Event) => {\n this.closePage(this.contextMenuTargetRoute!, this.contextMenuTargetIndex!)\n }}\n >\n <md-icon slot=\"icon\">close</md-icon>\n </ox-popup-menuitem>\n\n <ox-popup-menuitem\n label=\"close others\"\n @select=${(e: Event) => {\n this.closeOtherPages(this.contextMenuTargetRoute!, this.contextMenuTargetIndex!)\n }}\n >\n <md-icon slot=\"icon\">cancel</md-icon>\n </ox-popup-menuitem>\n `\n : nothing}\n\n <ox-popup-menuitem\n label=\"close all\"\n @select=${(e: Event) => {\n this.closeAllPage()\n }}\n >\n <md-icon slot=\"icon\">disabled_by_default</md-icon>\n </ox-popup-menuitem>\n `,\n top: e.clientY,\n left: e.clientX,\n parent: document.body\n })\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"page-mdibar.js","sourceRoot":"","sources":["../../client/layout/page-mdibar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/popup/ox-popup-menu.js'\n\nimport { css, html, nothing, LitElement } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { navigate, store, PageView } from '@operato/shell'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPopupMenu } from '@operato/popup/ox-popup-menu.js'\n\n@customElement('page-mdibar')\nexport class PageMDIBar extends connect(store)(localize(i18next)(LitElement)) {\n static styles = [\n css`\n :host {\n display: flex;\n background-color: var(--md-sys-color-secondary-container);\n color: var(--md-sys-color-on-secondary-container);\n font-size: var(--fontsize-small);\n overflow: hidden;\n align-items: stretch;\n }\n\n div {\n box-sizing: border-box;\n }\n\n div[routes] {\n flex: 1;\n\n display: flex;\n overflow: hidden;\n }\n\n div[route] {\n display: inline-block;\n position: relative;\n min-width: var(--mdibar-min-width, 100px);\n max-width: var(--mdibar-max-width, 150px);\n padding: var(--mdibar-padding, 3px 22px 1px 7px);\n border-right: var(--border-dim-color);\n border-top: var(--border-dim-color);\n border-bottom: var(--border-dim-color);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-transform: capitalize;\n cursor: pointer;\n }\n\n div[arrows] {\n display: flex;\n border: var(--border-dim-color);\n align-items: center;\n }\n\n div[arrows] * {\n opacity: 0.8;\n font-size: var(--mdibar-icon-size, 24px);\n flex: 1;\n }\n\n md-icon {\n --md-icon-size: var(--mdibar-icon-size, 18px);\n opacity: 0.5;\n }\n\n md-icon:hover {\n opacity: 0.8;\n color: var(--md-sys-color-secondary);\n }\n\n div[arrows] md-icon[disabled] {\n opacity: 0.2;\n color: unset;\n }\n\n div[route] md-icon {\n position: absolute;\n right: 2px;\n margin-left: var(--spacing-small);\n }\n\n div[route][active] {\n background-color: var(--md-sys-color-background);\n border-bottom: 1px solid var(--md-sys-color-background);\n color: var(--md-sys-color-on-background);\n font-weight: bold;\n }\n\n div[route][home] {\n padding: var(--mdibar-padding-home, 3px 5px 0 23px);\n overflow: visible;\n min-width: unset;\n max-width: unset;\n }\n\n div[route][home] md-icon {\n left: 0;\n }\n\n div[route][rest] {\n flex: 1;\n min-width: unset;\n max-width: unset;\n border-right: unset;\n }\n `\n ]\n\n @state() routes: { page?: PageView; url: string }[] = [{ url: this.getHomeRoute() }]\n @state() activePage?: PageView\n @state() pagename?: string\n @state() params?: any\n @state() resourceId?: string\n @state() title: string = ''\n\n @query('[routes]') scroller!: HTMLDivElement\n @query('#context-menu') contextMenu!: HTMLDivElement\n\n private contextMenuTargetIndex?: number\n private contextMenuTargetRoute?: { page?: PageView; url: string }\n\n render() {\n const home = this.routes[0]\n const routes = this.routes.slice(1)\n\n return html`\n <div\n home\n route\n ?active=${this.activePage === home.page}\n @click=${() => this.moveToHome()}\n @contextmenu=${(e: MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n\n delete this.contextMenuTargetRoute\n delete this.contextMenuTargetIndex\n\n this.openContextMenu(e)\n }}\n >\n <md-icon>home</md-icon>​\n </div>\n\n <div\n routes\n @mousewheel=${this.onWheelEvent.bind(this)}\n @contextmenu=${(e: MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n\n delete this.contextMenuTargetRoute\n delete this.contextMenuTargetIndex\n\n this.openContextMenu(e)\n }}\n >\n ${routes.map((route, idx) => {\n const context = route.page?.context as any\n const title = context?.title || context?.search?.placeholder || ''\n\n return html`\n <div\n @contextmenu=${(e: MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n\n this.contextMenuTargetRoute = route\n this.contextMenuTargetIndex = idx\n\n this.openContextMenu(e)\n }}\n @click=${() => this.moveTo(route)}\n ?active=${this.activePage === route.page}\n route\n >\n ${typeof title == 'object' ? title.text : title}\n <md-icon\n @click=${(e: MouseEvent) => {\n e.stopPropagation()\n this.closePage(route, idx + 1)\n }}\n >close</md-icon\n >\n </div>\n `\n })}\n <div rest route></div>\n </div>\n\n <div arrows>\n <md-icon ?disabled=${!this.scroller || this.scroller.scrollLeft <= 0} @click=${() => this.onScrollByArrow(1)}\n >arrow_left</md-icon\n >\n <md-icon\n ?disabled=${!this.scroller ||\n this.scroller.scrollWidth <= this.scroller.offsetWidth + this.scroller.scrollLeft}\n @click=${() => this.onScrollByArrow(-1)}\n >arrow_right</md-icon\n >\n </div>\n `\n }\n\n updated(changed) {\n if (\n changed.has('activePage') ||\n (!changed.has('pagename') && (changed.has('resourceId') || changed.has('params')))\n ) {\n if (!this.activePage) {\n return\n }\n\n const page = this.activePage\n\n if (location.pathname == this.getHomeRoute()) {\n this.routes[0].page = page\n return\n }\n\n var route = this.routes.find(route => route.page === page)\n if (!route) {\n this.routes = [...this.routes, { page, url: location.href }]\n } else {\n route.url = location.href\n }\n }\n }\n\n stateChanged(state) {\n const { page, context, activePage, resourceId, params } = state.route || {}\n this.activePage = activePage\n this.pagename = page\n this.resourceId = resourceId\n this.params = params\n\n /* refresh를 일으키기위한 property 변경을 위한 코드임. */\n this.title = context.title || context.search?.placeholder\n }\n\n onScrollByArrow(delta: number) {\n this.scroller.scrollLeft -= delta * 10\n\n this.requestUpdate()\n }\n\n onWheelEvent(e: Event) {\n const target = e.currentTarget as HTMLDivElement\n\n var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))\n target.scrollLeft -= delta * 10\n\n this.requestUpdate()\n\n e.preventDefault()\n }\n\n getHomeRoute() {\n var base = document.querySelector('base')\n return base?.getAttribute('href') || '/'\n }\n\n moveTo(route: { page?: PageView; url: string }) {\n console.log('route', route)\n navigate(route.url)\n }\n\n moveToHome() {\n navigate(this.getHomeRoute())\n }\n\n closePage(route: { page?: PageView; url: string }, idx: number) {\n this.routes = [...this.routes.slice(0, idx), ...this.routes.slice(idx + 1)]\n const page = route.page!\n\n page.parentNode?.removeChild(page)\n page.pageDispose()\n\n if (this.activePage === page) {\n const next = this.routes.length > 0 ? Math.max(0, idx - 1) : -1\n navigate(next != -1 ? this.routes[next].url : this.getHomeRoute())\n }\n }\n\n closeAllPage() {\n this.routes.slice(1).forEach((route, idx) => {\n const page = route.page!\n\n page.parentNode?.removeChild(page)\n page.pageDispose()\n })\n\n this.routes = [this.routes[0]]\n\n navigate(this.routes[0].url)\n }\n\n closeOtherPages(route: { page?: PageView; url: string }, idx: number) {\n this.routes.slice(1).forEach((route, idx) => {\n if (route === route) {\n return\n }\n\n const page = route.page!\n\n page.parentNode?.removeChild(page)\n page.pageDispose()\n })\n\n this.routes = [this.routes[0], route]\n\n navigate(route.url)\n }\n\n openContextMenu(e: MouseEvent) {\n OxPopupMenu.open({\n template: html`\n ${this.contextMenuTargetRoute\n ? html`\n <ox-popup-menuitem\n label=\"close\"\n @select=${(e: Event) => {\n this.closePage(this.contextMenuTargetRoute!, this.contextMenuTargetIndex!)\n }}\n >\n <md-icon slot=\"icon\">close</md-icon>\n </ox-popup-menuitem>\n\n <ox-popup-menuitem\n label=\"close others\"\n @select=${(e: Event) => {\n this.closeOtherPages(this.contextMenuTargetRoute!, this.contextMenuTargetIndex!)\n }}\n >\n <md-icon slot=\"icon\">cancel</md-icon>\n </ox-popup-menuitem>\n `\n : nothing}\n\n <ox-popup-menuitem\n label=\"close all\"\n @select=${(e: Event) => {\n this.closeAllPage()\n }}\n >\n <md-icon slot=\"icon\">disabled_by_default</md-icon>\n </ox-popup-menuitem>\n `,\n top: e.clientY,\n left: e.clientX,\n parent: document.body\n })\n }\n}\n"]}
|