Plumbing for enrichments

Author: longhotsummer

indigo_app/js/compat-imports.js

@@ -0,0 +1,10 @@
+/**
+ * These are imports from local libraries that must be compiled using browserify and then injected
+ * into the window global for Indigo to use them.
+ *
+ * This provides a bridge between Indigo's lack of any support for require() or 'import', and require-js and
+ * ES6-style imports.
+ */
+
+import * as enrichments from './enrichments/popups';
+window.enrichments = enrichments;

indigo_app/js/enrichments/popups.ts

@@ -0,0 +1,62 @@
+import { IEnrichment, IEnrichmentProvider } from '@laws-africa/indigo-akn/src/enrichments/popups';
+import { Instance as Tippy } from 'tippy.js';
+
+class LinterEnrichment implements IEnrichment {
+  public issue: any;
+  public target: object;
+
+  constructor (issue: any, target: any) {
+    this.issue = issue;
+    this.target = target;
+  }
+}
+
+export class PopupIssuesProvider implements IEnrichmentProvider {
+  private issues: any;
+
+  constructor (issues: any) {
+    this.issues = issues;
+  }
+
+  getEnrichments(): IEnrichment[] {
+    return [new LinterEnrichment({
+      message: 'hi',
+    }, {
+      anchor_id: 'sec_1_2__p_1',
+      selectors: [{
+        type: 'TextPositionSelector',
+        start: 0,
+        end: 4,
+      }]
+    })];
+
+    // convert issues into enrichments
+    return this.issues.map((issue: any) => {
+      return new LinterEnrichment(issue, {
+        anchor_id: 'sec_1_2__p_1',
+        selectors: [{
+          type: 'TextPositionSelector',
+          start: 0,
+          end: 4,
+        }]
+      });
+    });
+  }
+
+  getPopupContent(enrichment: IEnrichment, mark: Element): Element {
+    const issue = enrichment as LinterEnrichment;
+    const div = window.document.createElement('div');
+    div.innerText = issue.issue.message;
+    return div;
+  }
+
+  markCreated(enrichment: IEnrichment, mark: Element): void {
+    mark.classList.add('enrichment--warning');
+  }
+
+  markDestroyed(enrichment: IEnrichment, mark: Element): void {
+  }
+
+  popupCreated(popup: Tippy): void {
+  }
+}

indigo_app/js/indigo.js

@@ -2,6 +2,7 @@ import * as vueComponents from './components';
 import '@laws-africa/web-components/dist/components/la-akoma-ntoso';
 import '@laws-africa/web-components/dist/components/la-gutter';
 import '@laws-africa/web-components/dist/components/la-gutter-item';
+import './compat-imports';
 
 import Vue from 'vue';
 

indigo_app/static/javascript/indigo-app.js

@@ -196,6 +196,15 @@
         editorView: this.bodyEditorView,
       });
 
+      // TODO: imported from indigo akn
+      const akn = this.el.querySelector('.document-workspace-content la-akoma-ntoso');
+      this.popupManager = new window.indigoAkn.PopupEnrichmentManager(akn);
+      this.listenTo(this.bodyEditorView.sourceEditor, 'rendered', () => {
+        this.popupManager.render();
+      });
+      // TODO: created locally in TS
+      this.popupManager.addProvider(new window.enrichments.PopupIssuesProvider(this.document.issues));
+
       // pretend we've fetched it, this sets up additional handlers
       this.document.trigger('sync');
 

indigo_app/static/javascript/indigo/views/document.js

@@ -0,0 +1,9 @@
+.enrichment {
+  &.enrichment--popup {
+    background-color: transparent;
+
+    &.enrichment--warning {
+      border-bottom: 3px double purple;
+    }
+  }
+}

indigo_app/static/lib/external-imports.js

@@ -27,6 +27,7 @@ $fa-font-path: '../lib/fontawesome-5.2/webfonts';
 @import 'attachments';
 @import 'badges';
 @import 'documents';
+@import 'enrichments';
 @import 'diffs';
 @import 'forms';
 @import 'gutter';