webapp: single-file mode (always pinned)

ilyagr · Sep 10, 2024 · 4ecc5b2 · 4ecc5b2
1 parent 04ca2bd
commit 4ecc5b2
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   left_file right_file output_file` is now allowed. Mixing dirs and files is not
   allowed.
 
+* When used on a single file, `diffedit3` now permanently stays in "pinned" mode
+  and the pinning/collapsing controls are disabled. Allowing the user to
+  collapse the only editor doesn't make much sense.
+
 ### Fixed bugs
 
 ## [v0.4.0] - 2024-05-04

diff --git a/webapp/dist/assets/index-DCOZ1_NJ.css → webapp/dist/assets/index-4W6tk22x.css b/webapp/dist/assets/index-DCOZ1_NJ.css → webapp/dist/assets/index-4W6tk22x.css
@@ -160,6 +160,14 @@ details[open] > summary > .if-details-closed {
   width: 0.5em;
   display: inline-block;
 }
+.single-editor .pin-span {
+  display: none;
+}
+.single-editor details > summary {
+  /* Spacing hack to hide the details button */
+  position: relative;
+  left: -1em;
+}
 
 @supports (not (-moz-appearance: button)) and (contain: paint) and
   (-webkit-appearance: none) {

diff --git a/webapp/dist/assets/index-DZJFz_NH.js → webapp/dist/assets/index-BwueCCsk.js b/webapp/dist/assets/index-DZJFz_NH.js → webapp/dist/assets/index-BwueCCsk.js
@@ -13688,6 +13688,9 @@ class MergeState {
       this.merge_views[k2].editor().refresh();
     }
   }
+  singleEditor() {
+    return Object.keys(this.merge_views).length == 1;
+  }
   /// Renders the input inside the HTML element with id `unique_id`.
   static renderInDomElement(unique_id, merge_input) {
     let templates = [];
@@ -13800,6 +13803,7 @@ class MergeState {
       throw `Element with id ${unique_id} must be a child of an element with class .app-window`;
     }
     const merge_state = new MergeState(parent_window);
+    const singleEditor = Object.keys(merge_input).length == 1;
     for (let k2 in merge_input) {
       if (to_error(merge_input[k2]) != null) {
         continue;
@@ -13809,6 +13813,10 @@ class MergeState {
         k2,
         fillInDefaultSettings(merge_input[k2])
       );
+      if (singleEditor) {
+        parent_window.classList.add("single-editor");
+        merge_state.toggle_pinning(k_uid(k2));
+      }
     }
     return merge_state;
   }
@@ -13866,10 +13874,16 @@ class MergeState {
     alignButtonEl.onclick = () => this.recreateCodeMirrorFlippingOption(filename, "align");
     prevChangeButtonEl.onclick = () => cm_prevChange(merge_view.editor());
     nextChangeButtonEl.onclick = () => cm_nextChange(merge_view.editor());
-    pinButtonEl.onclick = () => this.toggle_pinning(unique_id);
+    pinButtonEl.onclick = () => {
+      if (!this.singleEditor()) {
+        this.toggle_pinning(unique_id);
+      }
+    };
     detailsButtonEl.open = false;
     detailsButtonEl.ontoggle = () => {
-      if (!detailsButtonEl.open) {
+      if (this.singleEditor()) {
+        detailsButtonEl.open = true;
+      } else if (!detailsButtonEl.open) {
         if (this.parent_window.classList.contains("pinned-mode")) {
           this.toggle_pinning(unique_id);
         }

diff --git a/webapp/dist/index.html b/webapp/dist/index.html
@@ -10,8 +10,8 @@
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Diffedit3</title>
-    <script type="module" crossorigin src="/assets/index-DZJFz_NH.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DCOZ1_NJ.css">
+    <script type="module" crossorigin src="/assets/index-BwueCCsk.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-4W6tk22x.css">
   </head>
 
   <body>

diff --git a/webapp/src/merge_state.ts b/webapp/src/merge_state.ts
@@ -50,6 +50,10 @@ export class MergeState {
     }
   }
 
+  public singleEditor(): boolean {
+    return Object.keys(this.merge_views).length == 1;
+  }
+
   /// Renders the input inside the HTML element with id `unique_id`.
   public static renderInDomElement(unique_id: string, merge_input: MergeInput) {
     let templates = [];
@@ -182,6 +186,7 @@ export class MergeState {
     }
     const merge_state = new MergeState(parent_window);
 
+    const singleEditor = Object.keys(merge_input).length == 1;
     for (let k in merge_input) {
       if (to_error(merge_input[k]) != null) {
         continue;
@@ -191,6 +196,11 @@ export class MergeState {
         k,
         fillInDefaultSettings(merge_input[k]),
       );
+      if (singleEditor) {
+        parent_window.classList.add("single-editor");
+        // Pin the only editor
+        merge_state.toggle_pinning(k_uid(k));
+      }
     }
 
     return merge_state;
@@ -264,12 +274,18 @@ export class MergeState {
     prevChangeButtonEl.onclick = () => cm_prevChange(merge_view.editor());
     nextChangeButtonEl.onclick = () => cm_nextChange(merge_view.editor());
 
-    pinButtonEl.onclick = () => this.toggle_pinning(unique_id);
+    pinButtonEl.onclick = () => {
+      if (!this.singleEditor()) {
+        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) {
+      if (this.singleEditor()) {
+        detailsButtonEl.open = true;
+      } else if (!detailsButtonEl.open) {
         // We just closed the details
         if (this.parent_window.classList.contains("pinned-mode")) {
           this.toggle_pinning(unique_id);

diff --git a/webapp/src/styles.css b/webapp/src/styles.css
@@ -160,6 +160,14 @@ details[open] > summary > .if-details-closed {
   width: 0.5em;
   display: inline-block;
 }
+.single-editor .pin-span {
+  display: none;
+}
+.single-editor details > summary {
+  /* Spacing hack to hide the details button */
+  position: relative;
+  left: -1em;
+}
 
 @supports (not (-moz-appearance: button)) and (contain: paint) and
   (-webkit-appearance: none) {