From e73c0ad1bf922b1dd3360fc5aafc3434951fa63c Mon Sep 17 00:00:00 2001
From: undergroundwires <git@undergroundwires.dev>
Date: Fri, 3 Sep 2021 19:44:44 +0200
Subject: [PATCH] Do not collapse cards on links and code area #88

Detects clickable elements automatically and exempts them from
collapsing cards, also interacting with code area does no longer
collapse cards.

This commit also fixes subscribing to clicks on document every time card
list is loaded, but never unsubscribing. This impacts performance and
causes memory leaks. Now, registered event listener is removed every
time card list component is destroyed.
---
 .../components/Code/TheCodeArea.vue           |  6 +-
 .../Scripts/View/Cards/CardList.vue           | 58 +++++++++++++------
 2 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/src/presentation/components/Code/TheCodeArea.vue b/src/presentation/components/Code/TheCodeArea.vue
index acf3da53..6e8bc68c 100644
--- a/src/presentation/components/Code/TheCodeArea.vue
+++ b/src/presentation/components/Code/TheCodeArea.vue
@@ -1,5 +1,7 @@
 <template>
-  <Responsive v-on:sizeChanged="sizeChanged()">
+  <Responsive
+    v-on:sizeChanged="sizeChanged()"
+    v-non-collapsing>
     <div
       :id="editorId"
       class="code-area"
@@ -18,11 +20,13 @@ import { ScriptingLanguage } from '@/domain/ScriptingLanguage';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import { CodeBuilderFactory } from '@/application/Context/State/Code/Generation/CodeBuilderFactory';
 import Responsive from '@/presentation/components/Shared/Responsive.vue';
+import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
 
 @Component({
   components: {
     Responsive,
   },
+  directives: { NonCollapsing },
 })
 export default class TheCodeArea extends StatefulVue {
   public readonly editorId = 'codeEditor';
diff --git a/src/presentation/components/Scripts/View/Cards/CardList.vue b/src/presentation/components/Scripts/View/Cards/CardList.vue
index 055fdc8b..a1bf7e0c 100644
--- a/src/presentation/components/Scripts/View/Cards/CardList.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardList.vue
@@ -45,13 +45,13 @@ export default class CardList extends StatefulVue {
   public activeCategoryId?: number = null;
 
   public created() {
-    this.onOutsideOfActiveCardClicked((element) => {
-      if (hasDirective(element)) {
-        return;
-      }
-      this.activeCategoryId = null;
-    });
+    document.addEventListener('click', this.outsideClickListener);
   }
+
+  public destroyed() {
+    document.removeEventListener('click', this.outsideClickListener);
+  }
+
   public onSelected(categoryId: number, isExpanded: boolean) {
     this.activeCategoryId = isExpanded ? categoryId : undefined;
   }
@@ -64,18 +64,42 @@ export default class CardList extends StatefulVue {
   private setCategories(categories: ReadonlyArray<ICategory>): void {
     this.categoryIds = categories.map((category) => category.id);
   }
-  private onOutsideOfActiveCardClicked(callback: (clickedElement: Element) => void) {
-    const outsideClickListener = (event) => {
-      if (!this.activeCategoryId) {
-        return;
-      }
-      const element = document.querySelector(`[data-category="${this.activeCategoryId}"]`);
-      if (element && !element.contains(event.target)) {
-          callback(event.target);
-      }
-    };
-    document.addEventListener('click', outsideClickListener);
+
+  private onOutsideOfActiveCardClicked(clickedElement: Element): void {
+    if (isClickable(clickedElement) || hasDirective(clickedElement)) {
+      return;
+    }
+    this.collapseAllCards();
+    if (hasDirective(clickedElement)) {
+      return;
+    }
+    this.activeCategoryId = null;
   }
+  private outsideClickListener(event: PointerEvent) {
+    if (this.areAllCardsCollapsed()) {
+        return;
+    }
+    const element = document.querySelector(`[data-category="${this.activeCategoryId}"]`);
+    const target = event.target as Element;
+    if (element && !element.contains(target)) {
+      this.onOutsideOfActiveCardClicked(target);
+    }
+  }
+
+  private collapseAllCards(): void {
+    this.activeCategoryId = undefined;
+  }
+  private areAllCardsCollapsed(): boolean {
+    return !this.activeCategoryId;
+  }
+}
+
+function isClickable(element: Element) {
+  const cursorName = window.getComputedStyle(element).cursor;
+  return [ 'pointer', 'move', 'grab'].some((name) => cursorName === name)
+    || cursorName.includes('resize')
+    || [ 'onclick', 'href'].some((attributeName) => element.hasAttribute(attributeName))
+    || [ 'a', 'button'].some((tagName) => element.closest(`.${tagName}`));
 }
 
 </script>