Skip to content

Commit

Permalink
webapp MergeState: store parent_window in MergeState
Browse files Browse the repository at this point in the history
  • Loading branch information
@ilyagr
ilyagr committed Sep 10, 2024
1 parent 72c7b0b commit 7560e3e
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 19 deletions.
30 changes: 21 additions & 9 deletions webapp/dist/assets/index-CHEryG1o.js → webapp/dist/assets/index-DZJFz_NH.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13659,13 +13659,22 @@ function replaceElementByIdWithNewEmptyDiv(id) {
return new_element;
}
class MergeState {
constructor() {
/// `parent_window` is an Element that should contain the element that
/// MergeState will operate in. It will have a CSS class set when the editor
/// transitions to the pinned mode or single-editor mode.
//
// TODO: This will be less messy if we set these CSS classes on an element
// private to the MergeState, and have the caller supply a call-back so that
// it can react to the setting of pinned or single-editor state.
constructor(parent_window) {
__publicField(this, "merge_views");
__publicField(this, "dom_ids");
__publicField(this, "initial_values");
__publicField(this, "parent_window");
this.merge_views = {};
this.dom_ids = {};
this.initial_values = {};
this.parent_window = parent_window;
}
values() {
const result = {};
Expand Down Expand Up @@ -13786,7 +13795,11 @@ class MergeState {
}
let target_element = replaceElementByIdWithNewEmptyDiv(unique_id);
Q(ke`${templates}`, target_element);
const merge_state = new MergeState();
const parent_window = target_element.closest(".app-window");
if (!parent_window) {
throw `Element with id ${unique_id} must be a child of an element with class .app-window`;
}
const merge_state = new MergeState(parent_window);
for (let k2 in merge_input) {
if (to_error(merge_input[k2]) != null) {
continue;
Expand Down Expand Up @@ -13853,13 +13866,12 @@ class MergeState {
alignButtonEl.onclick = () => this.recreateCodeMirrorFlippingOption(filename, "align");
prevChangeButtonEl.onclick = () => cm_prevChange(merge_view.editor());
nextChangeButtonEl.onclick = () => cm_nextChange(merge_view.editor());
const parent_window = pinButtonEl.closest(".app-window");
pinButtonEl.onclick = () => this.toggle_pinning(parent_window, unique_id);
pinButtonEl.onclick = () => this.toggle_pinning(unique_id);
detailsButtonEl.open = false;
detailsButtonEl.ontoggle = () => {
if (!detailsButtonEl.open) {
if (parent_window.classList.contains("pinned-mode")) {
this.toggle_pinning(parent_window, unique_id);
if (this.parent_window.classList.contains("pinned-mode")) {
this.toggle_pinning(unique_id);
}
} else {
merge_view.editor().refresh();
Expand Down Expand Up @@ -13911,9 +13923,9 @@ class MergeState {
const detailsButtonEl = document.getElementById(`details_${dom_id}`);
detailsButtonEl.open = true;
}
toggle_pinning(parent_window, unique_id) {
parent_window.classList.toggle("pinned-mode");
for (const merge_view of parent_window.getElementsByClassName(
toggle_pinning(unique_id) {
this.parent_window.classList.toggle("pinned-mode");
for (const merge_view of this.parent_window.getElementsByClassName(
`merge-view`
)) {
if (merge_view.id == `details_${unique_id}`) {
Expand Down
2 changes: 1 addition & 1 deletion webapp/dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Diffedit3</title>
<script type="module" crossorigin src="/assets/index-CHEryG1o.js"></script>
<script type="module" crossorigin src="/assets/index-DZJFz_NH.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DCOZ1_NJ.css">
</head>

Expand Down
31 changes: 22 additions & 9 deletions webapp/src/merge_state.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,20 @@ export class MergeState {
protected merge_views: Record<string, MergeView>;
protected dom_ids: Record<string, string>;
protected initial_values: Record<string, SingleFileMergeInput>;
protected parent_window: Element;

protected constructor() {
/// `parent_window` is an Element that should contain the element that
/// MergeState will operate in. It will have a CSS class set when the editor
/// transitions to the pinned mode or single-editor mode.
//
// TODO: This will be less messy if we set these CSS classes on an element
// private to the MergeState, and have the caller supply a call-back so that
// it can react to the setting of pinned or single-editor state.
protected constructor(parent_window: Element) {
this.merge_views = {};
this.dom_ids = {};
this.initial_values = {};
this.parent_window = parent_window;
}

public values(): Record<string, string> {
Expand Down Expand Up @@ -167,7 +176,12 @@ export class MergeState {
// it's not slower?)
lit_html_render(html`${templates}`, target_element);

const merge_state = new MergeState();
const parent_window = target_element.closest(".app-window");
if (!parent_window) {
throw `Element with id ${unique_id} must be a child of an element with class .app-window`;
}
const merge_state = new MergeState(parent_window);

for (let k in merge_input) {
if (to_error(merge_input[k]) != null) {
continue;
Expand Down Expand Up @@ -250,16 +264,15 @@ export class MergeState {
prevChangeButtonEl.onclick = () => cm_prevChange(merge_view.editor());
nextChangeButtonEl.onclick = () => cm_nextChange(merge_view.editor());

const parent_window = pinButtonEl.closest(".app-window")!;
pinButtonEl.onclick = () => this.toggle_pinning(parent_window, unique_id);
pinButtonEl.onclick = () => this.toggle_pinning(unique_id);
// Starting with details closed breaks CodeMirror, especially line numbers
// in left and right merge view.
detailsButtonEl.open = false;
detailsButtonEl.ontoggle = () => {
if (!detailsButtonEl.open) {
// We just closed the details
if (parent_window.classList.contains("pinned-mode")) {
this.toggle_pinning(parent_window, unique_id);
if (this.parent_window.classList.contains("pinned-mode")) {
this.toggle_pinning(unique_id);
}
} else {
merge_view.editor().refresh();
Expand Down Expand Up @@ -328,9 +341,9 @@ export class MergeState {
// cm.scrollIntoView(null, 50); // Always happens automatically
}

protected toggle_pinning(parent_window: Element, unique_id: string) {
parent_window.classList.toggle("pinned-mode");
for (const merge_view of parent_window.getElementsByClassName(
protected toggle_pinning(unique_id: string) {
this.parent_window.classList.toggle("pinned-mode");
for (const merge_view of this.parent_window.getElementsByClassName(
`merge-view` /* TODO: Should be this collections's merge views only */,
)) {
if (merge_view.id == `details_${unique_id}`) {
Expand Down

0 comments on commit 7560e3e

Please sign in to comment.