Skip to content

Commit 75dcecf

Browse files
yoxigenyoxigen
committed
Improved usage of Back functionality and overall history behavior
1 parent f505a08 commit 75dcecf

18 files changed

Lines changed: 285 additions & 80 deletions

File tree

‎package-lock.json‎

Lines changed: 15 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/index.html‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,15 @@
4343
/>
4444
<link rel="manifest" href="./manifest.webmanifest" />
4545
</head>
46-
<body class="dialog_sidebar_form">
46+
<body class="dialog_design">
4747
<main hidden data-is-template="unknown" data-is-default-config="unknown">
4848
<header id="main_header">
49-
<h1>
50-
<span class="logo1">String Art</span>
51-
<span class="logo2">Studio</span>
52-
</h1>
49+
<a href="/">
50+
<h1>
51+
<span class="logo1">String Art</span>
52+
<span class="logo2">Studio</span>
53+
</h1>
54+
</a>
5355
</header>
5456
<div id="pattern_select_panel" class="minimized">
5557
<button
@@ -99,12 +101,7 @@ <h1>
99101
<dropdown-menu-separator
100102
class="non-template-only"
101103
></dropdown-menu-separator>
102-
<dropdown-menu-item
103-
value="config"
104-
class="small_only"
105-
selected="selected"
106-
selectable
107-
>
104+
<dropdown-menu-item value="design" selected="selected" selectable>
108105
<i slot="icon" class="icon-options"></i>
109106
Design</dropdown-menu-item
110107
>
@@ -144,7 +141,7 @@ <h1>
144141
</div>
145142
</div>
146143
</div>
147-
<form id="sidebar_form" class="noprint open">
144+
<form id="design" class="noprint open">
148145
<menu id="controls_menu" class="pattern_only">
149146
<a href="#controls_top" class="controls_menu_item circular_btn">
150147
<i class="icon-options"></i>
@@ -211,7 +208,7 @@ <h5>Length per color:</h5>
211208
<ul id="threads_per_color"></ul>
212209
</div>
213210
<article id="canvas_panel" class="pattern_only"></article>
214-
<nav id="player" class="noprint pattern_only">
211+
<nav id="instructions" class="noprint pattern_only">
215212
<!-- <div id="player_controls_and_position"> -->
216213

217214
<div id="player_continuous" class="player_controls">

‎src/scripts/Persistance.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export default class Persistance extends EventBus<{
4646
description: 'Name this pattern:',
4747
submit: 'Save',
4848
value: defaultName,
49+
dialogId: 'save_as',
4950
}).then(
5051
patternName => {
5152
this.saveNewPattern({
@@ -153,6 +154,7 @@ export default class Persistance extends EventBus<{
153154
description: 'Name this pattern:',
154155
submit: 'Save',
155156
value: this.currentPattern.name,
157+
dialogId: 'rename',
156158
}).then(newPatternName => {
157159
if (newPatternName !== this.currentPattern.name) {
158160
const patternData = Persistance.loadPatternDataById(
@@ -172,6 +174,7 @@ export default class Persistance extends EventBus<{
172174
description: 'Are you sure you wish to delete this pattern?',
173175
submit: 'Delete',
174176
type: 'error',
177+
dialogId: 'delete',
175178
}).then(
176179
() => {
177180
const appData = Persistance.loadAppData();

‎src/scripts/components/DropdownMenuItem.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ class DropdownMenuItem extends HTMLElement {
2626
2727
li.selected {
2828
color: var( --color-accent);
29+
pointer-events: none;
2930
}
3031
3132
span:not(:empty) {

‎src/scripts/components/dialogs/ConfirmDialog.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,13 @@ export default class ConfirmDialog extends HTMLElement {
120120
});
121121
}
122122

123+
/**
124+
* Closes the dialog
125+
*/
126+
close() {
127+
this.dialog.close();
128+
}
129+
123130
submit() {
124131
this.submitBtn.click();
125132
}

‎src/scripts/components/dialogs/InputDialog.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,10 @@ export default class InputDialog extends HTMLElement {
8383
return this.dialog.show().then(() => this.input.value);
8484
}
8585

86+
close() {
87+
this.dialog.close();
88+
}
89+
8690
/**
8791
* Gets the value entered by the user if submitted,
8892
* or null if canceled.

‎src/scripts/components/dialogs/download_dialog/DownloadDialog.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -486,6 +486,10 @@ export default class DownloadDialog extends HTMLElement {
486486
return [dimensions[1], dimensions[0]];
487487
}
488488

489+
close() {
490+
this.dialog.close();
491+
}
492+
489493
/**
490494
* Opens the dialog, optionally with an initial value.
491495
*/

‎src/scripts/editor/EditorControls.ts‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import type {
1616
const elements = {
1717
controls: document.querySelector('#controls') as HTMLElement,
1818
controlsPanel: document.querySelector('#controls_panel') as HTMLElement,
19-
sidebarForm: document.querySelector('#sidebar_form') as HTMLElement,
19+
design: document.querySelector('#design') as HTMLElement,
2020
};
2121

2222
const STATE_LOCAL_STORAGE_KEY = 'controls_state';
@@ -98,11 +98,8 @@ export default class EditorControls<TConfig extends Config> extends EventBus<{
9898
);
9999
elements.controls.addEventListener('mousedown', this.#onMouseDown);
100100
this.#boundToggleFieldset = this.#toggleFieldset.bind(this);
101-
elements.sidebarForm.addEventListener('click', this.#boundToggleFieldset);
102-
elements.sidebarForm.addEventListener(
103-
'keydown',
104-
this.#toggleFieldSetOnEnter
105-
);
101+
elements.design.addEventListener('click', this.#boundToggleFieldset);
102+
elements.design.addEventListener('keydown', this.#toggleFieldSetOnEnter);
106103
this.controlElements = {};
107104
this.renderControls();
108105

@@ -136,14 +133,8 @@ export default class EditorControls<TConfig extends Config> extends EventBus<{
136133

137134
destroy() {
138135
elements.controls.removeEventListener('input', this.#wrappedOnInput);
139-
elements.sidebarForm.removeEventListener(
140-
'click',
141-
this.#boundToggleFieldset
142-
);
143-
elements.sidebarForm.removeEventListener(
144-
'keydown',
145-
this.#toggleFieldSetOnEnter
146-
);
136+
elements.design.removeEventListener('click', this.#boundToggleFieldset);
137+
elements.design.removeEventListener('keydown', this.#toggleFieldSetOnEnter);
147138
elements.controls.removeEventListener(
148139
'touchstart',
149140
this.#wrappedOnTouchStart
@@ -554,7 +545,7 @@ export default class EditorControls<TConfig extends Config> extends EventBus<{
554545
}
555546

556547
updateGroupsState() {
557-
const groups = elements.sidebarForm.querySelectorAll('[data-group]');
548+
const groups = elements.design.querySelectorAll('[data-group]');
558549
groups.forEach(groupEl => {
559550
if (groupEl instanceof HTMLFieldSetElement) {
560551
const groupId = groupEl.dataset.group;

‎src/scripts/helpers/__tests__/url_utils.test.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ describe('url utils', () => {
1111
density: 88,
1212
};
1313

14-
expect(getPatternURL(pattern)).toEqual('?pattern=lotus&config=9_88');
14+
expect(getPatternURL(pattern)).toEqual('/?pattern=lotus&config=9_88');
1515
});
1616

1717
test('returns the correct URL for a saved pattern', () => {
@@ -23,7 +23,7 @@ describe('url utils', () => {
2323
pattern.id = '1';
2424

2525
expect(getPatternURL(pattern, { patternAsTemplate: true })).toEqual(
26-
'?pattern=lotus&config=9_88'
26+
'/?pattern=lotus&config=9_88'
2727
);
2828
});
2929

@@ -35,7 +35,7 @@ describe('url utils', () => {
3535
};
3636

3737
expect(getPatternURL(pattern, { renderer: 'svg' })).toEqual(
38-
'?pattern=lotus&config=9_88&renderer=svg'
38+
'/?pattern=lotus&config=9_88&renderer=svg'
3939
);
4040
});
4141

@@ -48,10 +48,10 @@ describe('url utils', () => {
4848
pattern.id = '1';
4949

5050
expect(getPatternURL(pattern, { patternAsTemplate: false })).toEqual(
51-
'?pattern=1&config=9_88'
51+
'/?pattern=1&config=9_88'
5252
);
5353

54-
expect(getPatternURL(pattern)).toEqual('?pattern=1&config=9_88');
54+
expect(getPatternURL(pattern)).toEqual('/?pattern=1&config=9_88');
5555
});
5656
});
5757
});

‎src/scripts/helpers/dialogs.ts‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type InputDialog from '../components/dialogs/InputDialog';
22
import type ConfirmDialog from '../components/dialogs/ConfirmDialog';
33
import type { ConfirmDialogType } from '../components/dialogs/ConfirmDialog';
4+
import routing from '../routing';
45

56
export interface ConfirmOptions {
67
title: string;
@@ -9,13 +10,20 @@ export interface ConfirmOptions {
910
submitIcon?: string;
1011
cancel?: string;
1112
type?: ConfirmDialogType;
13+
dialogId?: string;
1214
}
1315
export type PromptOptions = ConfirmOptions & {
1416
value?: string;
1517
};
1618

1719
const promptDialogId = 'prompt_dialog';
18-
export function prompt({ value, ...options }: PromptOptions): Promise<string> {
20+
let closeDialog: Function;
21+
22+
export function prompt({
23+
value,
24+
dialogId,
25+
...options
26+
}: PromptOptions): Promise<string> {
1927
let dialog: InputDialog = document.querySelector(`#${promptDialogId}`);
2028
if (!dialog) {
2129
dialog = document.createElement('input-dialog') as InputDialog;
@@ -33,7 +41,16 @@ export function prompt({ value, ...options }: PromptOptions): Promise<string> {
3341
}
3442
);
3543

36-
return dialog.show(value);
44+
routing.navigateToDialog(dialogId);
45+
46+
closeDialog = () => {
47+
dialog.close();
48+
closeDialog = null;
49+
};
50+
51+
return dialog.show(value).finally(() => {
52+
routing.closeDialog();
53+
});
3754

3855
function getAttributeForProp(prop: string): string {
3956
switch (prop) {
@@ -68,5 +85,16 @@ export function confirm(options: ConfirmOptions): Promise<void> {
6885
}
6986
});
7087

71-
return dialog.show();
88+
routing.navigateToDialog(options.dialogId);
89+
closeDialog = () => {
90+
dialog.close();
91+
closeDialog = null;
92+
};
93+
return dialog.show().finally(() => {
94+
routing.closeDialog();
95+
});
7296
}
97+
98+
routing.addEventListener('dialogClosed', () => {
99+
closeDialog?.();
100+
});

0 commit comments

Comments
 (0)