@lblod/ember-rdfa-editor-lblod-plugins 0.4.1 → 1.0.0-alpha.2

package/addon/components/standard-template-plugin/template-provider.ts

@@ -0,0 +1,75 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import StandardTemplatePluginService from '@lblod/ember-rdfa-editor-lblod-plugins/services/standard-template-plugin';
+import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import TemplateModel from '@lblod/ember-rdfa-editor-lblod-plugins/models/template';
+import { insertHtml } from '@lblod/ember-rdfa-editor/commands/insert-html-command';
+import instantiateUuids from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/standard-template-plugin/utils/instantiate-uuids';
+
+type Args = {
+  controller: ProseController;
+};
+export default class TemplateProviderComponent extends Component<Args> {
+  @service declare standardTemplatePlugin: StandardTemplatePluginService;
+
+  get busy() {
+    return this.standardTemplatePlugin.fetchTemplates.isRunning;
+  }
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get hasApplicableTemplates() {
+    return this.applicableTemplates.length > 0;
+  }
+
+  get applicableTemplates() {
+    return (
+      this.standardTemplatePlugin.fetchTemplates.last?.value?.filter(
+        (template) => this.templateIsApplicable(template)
+      ) || []
+    );
+  }
+
+  templateIsApplicable(template: TemplateModel) {
+    const containsTypes = this.controller.datastore
+      .match(null, 'a')
+      .dataset.some((quad) => {
+        return template.contexts.includes(quad.object.value);
+      });
+
+    const containsDisabledTypes = this.controller.datastore
+      .match(null, 'a')
+      .dataset.some((quad) =>
+        template.disabledInContexts.includes(quad.object.value)
+      );
+
+    return containsTypes && !containsDisabledTypes;
+  }
+
+  @action
+  async insert(template: TemplateModel) {
+    await template.reload();
+    const selection = this.controller.state.selection;
+    let insertRange: { from: number; to: number } = selection;
+    const { $from, $to } = selection;
+    if (
+      $from.parent.type === this.controller.schema.nodes['placeholder'] &&
+      $from.sameParent($to)
+    ) {
+      insertRange = {
+        from: $from.start($from.depth - 1),
+        to: $from.end($from.depth - 1),
+      };
+    }
+    this.controller.doCommand(
+      insertHtml(
+        instantiateUuids(template.body),
+        insertRange.from,
+        insertRange.to
+      )
+    );
+  }
+}

package/addon/components/table-of-contents-plugin/card.hbs

@@ -1,5 +1,16 @@
 <AuCard @flex={{true}} @divided={{true}} @expandable={{false}} @shadow={{true}} @size="flush" as |c|>
   <c.content class="au-c-content--small">
-    <AuToggleSwitch @label={{t "table-of-contents-plugin.toggle" }} @checked={{this.toggled}} @onChange={{this.toggle}} />
+    <label
+      class="au-c-toggle-switch"
+    >
+      <input
+        type="checkbox"
+        checked={{this.toggled}}
+        class="au-c-toggle-switch__input au-u-hidden-visually"
+        {{on "input" this.toggle}}
+      />
+      <span class="au-c-toggle-switch__toggle"></span>
+      <span class="au-c-toggle-switch__label">{{t "table-of-contents-plugin.toggle" }}</span>
+    </label>
   </c.content>
 </AuCard>

package/addon/components/table-of-contents-plugin/card.ts

@@ -0,0 +1,60 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import {
+  TableOfContentsConfig,
+  TABLE_OF_CONTENTS_DEFAULT_CONFIG,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin/utils/constants';
+import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+
+type Args = {
+  controller: ProseController;
+  widgetArgs: {
+    config: TableOfContentsConfig;
+  };
+};
+
+export default class TableOfContentsCardComponent extends Component<Args> {
+  get toggled() {
+    return !!this.tableOfContentsRange;
+  }
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get tableOfContentsRange() {
+    let result: { from: number; to: number } | undefined;
+    this.controller.state.doc.descendants((node, pos) => {
+      if (node.type === this.controller.schema.nodes['table_of_contents']) {
+        result = { from: pos, to: pos + node.nodeSize };
+      }
+      return !result;
+    });
+    return result;
+  }
+
+  get config() {
+    return this.args.widgetArgs.config ?? TABLE_OF_CONTENTS_DEFAULT_CONFIG;
+  }
+
+  @action
+  toggle() {
+    if (this.tableOfContentsRange) {
+      const { from, to } = this.tableOfContentsRange;
+      this.controller.withTransaction((tr) => {
+        return tr.deleteRange(from, to);
+      });
+    } else {
+      const { schema } = this.controller;
+      this.controller.withTransaction((tr) => {
+        return tr.replaceRangeWith(
+          0,
+          0,
+          schema.node('table_of_contents', {
+            config: this.config,
+          })
+        );
+      });
+    }
+  }
+}

package/addon/components/table-of-contents-plugin/{inline-components → ember-nodes}/outline.hbs

@@ -6,12 +6,12 @@
         {{! template-lint-disable no-capital-arguments }}
         @block={{true}}
         @skin='link-secondary'
-        onclick={{fn @onEntryClick outlineEntry.node}}
+        onclick={{(fn @onEntryClick outlineEntry.pos)}}
       >
         {{outlineEntry.content}}
       </AuButton>
       {{#if outlineEntry.children}}
-        <TableOfContentsPlugin::InlineComponents::Outline
+        <TableOfContentsPlugin::EmberNodes::Outline
           @entries={{outlineEntry.children}}
           @onEntryClick={{@onEntryClick}}
         />

package/addon/components/table-of-contents-plugin/ember-nodes/table-of-contents.hbs

@@ -0,0 +1,9 @@
+<div class='au-u-background-gray-100 au-u-padding-tiny table-of-contents'>
+  <h3>{{t "table-of-contents-plugin.title"}}</h3>
+  {{#if this.outline}}
+    <TableOfContentsPlugin::EmberNodes::Outline
+      @entries={{this.outline.entries}}
+      @onEntryClick={{this.moveToPosition}}
+    />
+  {{/if}}
+</div>

package/addon/components/table-of-contents-plugin/ember-nodes/table-of-contents.ts

@@ -0,0 +1,95 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { PNode } from '@lblod/ember-rdfa-editor';
+import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
+import { Selection } from '@lblod/ember-rdfa-editor';
+import { getRdfaAttribute } from '@lblod/ember-rdfa-editor/utils/rdfa-utils';
+import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
+import { TableOfContentsConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin/utils/constants';
+type OutlineEntry = {
+  content: string;
+  pos: number;
+  children?: OutlineEntry[];
+};
+export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
+  get config() {
+    return this.args.node.attrs['config'] as TableOfContentsConfig;
+  }
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get outline() {
+    const entries = this.extractOutline({
+      node: this.controller.state.doc,
+      pos: -1,
+    });
+    return {
+      entries,
+    };
+  }
+
+  extractOutline({ node, pos }: { node: PNode; pos: number }): OutlineEntry[] {
+    let result: OutlineEntry[] = [];
+    let parent: OutlineEntry | undefined;
+    const properties = getRdfaAttribute(node, 'property').pop();
+    const resource = getRdfaAttribute(node, 'resource').pop();
+    if (properties && resource) {
+      for (const tocConfigEntry of this.config) {
+        if (
+          tocConfigEntry.sectionPredicate.some((pred) =>
+            properties.includes(pred)
+          )
+        ) {
+          if (typeof tocConfigEntry.value === 'string') {
+            parent = { content: tocConfigEntry.value, pos };
+            break;
+          } else {
+            const range = [
+              ...this.args.controller.datastore
+                .match(`>${resource}`, `>${tocConfigEntry.value.predicate}`)
+                .asPredicateNodeMapping()
+                .nodes(),
+            ][0];
+            if (range) {
+              const node = unwrap(this.controller.state.doc.nodeAt(range.from));
+              parent = {
+                content: node.textContent,
+                pos: range.from,
+              };
+              break;
+            }
+          }
+        }
+      }
+    }
+    const subResults: OutlineEntry[] = [];
+    node.forEach((child, offset) => {
+      subResults.push(
+        ...this.extractOutline({ node: child, pos: pos + 1 + offset })
+      );
+    });
+    if (parent) {
+      parent.children = subResults;
+      result = [parent];
+    } else {
+      result = subResults;
+    }
+    return result;
+  }
+
+  @action
+  moveToPosition(pos: number) {
+    this.controller.withTransaction((tr) => {
+      const resolvedPos = tr.doc.resolve(pos);
+      const selection = Selection.near(resolvedPos, 1);
+      if (selection) {
+        tr.setSelection(selection);
+        tr.scrollIntoView();
+      }
+      return tr;
+    });
+    this.controller.focus();
+  }
+}

package/addon/components/template-variable-plugin/template-variable-card.hbs

@@ -1,3 +1,4 @@
+<div {{did-update this.selectionChanged @controller.state}}>
 {{#if this.showCard}}
   <AuCard @flex={{true}} @divided={{true}} @isOpenInitially={{true}} @expandable={{true}} @shadow={{true}} @size="small" as |c|>
     <c.header>
@@ -31,4 +32,4 @@
     </c.content>
   </AuCard>
 {{/if}}
-
+</div>

package/addon/components/template-variable-plugin/template-variable-card.ts

@@ -0,0 +1,227 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { getOwner } from '@ember/application';
+import { task } from 'ember-concurrency';
+import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import { ProseStore } from '@lblod/ember-rdfa-editor/utils/datastore/prose-store';
+import { insertHtml } from '@lblod/ember-rdfa-editor/commands/insert-html-command';
+import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
+import { getAppliedMarks } from '@lblod/ember-rdfa-editor/plugins/datastore';
+import {
+  CodeListOption,
+  fetchCodeListOptions,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/template-variable-plugin/utils/fetch-data';
+import { ZONAL_URI } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/utils/constants';
+import { MULTI_SELECT_CODELIST_TYPE } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/template-variable-plugin/utils/constants';
+
+type Args = {
+  controller: ProseController;
+};
+export default class EditorPluginsTemplateVariableCardComponent extends Component<Args> {
+  @tracked variableOptions: CodeListOption[] = [];
+  @tracked selectedVariable?: CodeListOption | CodeListOption[];
+  @tracked showCard = false;
+  @tracked multiSelect = false;
+  mappingUri?: string;
+  zonalLocationCodelistUri: string;
+  endpoint: string;
+  nonZonalLocationCodelistUri: string;
+
+  constructor(parent: unknown, args: Args) {
+    super(parent, args);
+    const config = getOwner(this)?.resolveRegistration(
+      'config:environment'
+    ) as {
+      templateVariablePlugin: {
+        zonalLocationCodelistUri: string;
+        endpoint: string;
+        nonZonalLocationCodelistUri: string;
+      };
+    };
+    const pluginConfig = config.templateVariablePlugin;
+    this.zonalLocationCodelistUri = pluginConfig.zonalLocationCodelistUri;
+    this.endpoint = pluginConfig.endpoint;
+    this.nonZonalLocationCodelistUri = pluginConfig.nonZonalLocationCodelistUri;
+  }
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  @action
+  insert() {
+    const { selection } = this.controller.state;
+    if (!this.mappingUri || !this.selectedVariable) {
+      return;
+    }
+    this.controller.datastore;
+    const limitedDatastore = this.controller.datastore.limitToRange(
+      this.controller.state,
+      selection.from,
+      selection.to
+    );
+    const insertRange = [
+      ...limitedDatastore
+        .match(`>${this.mappingUri}`, 'ext:content')
+        .asObjectNodeMapping()
+        .nodes(),
+    ][0];
+    if (!insertRange) {
+      return;
+    }
+    const marks = getAppliedMarks(insertRange);
+    let htmlToInsert: string;
+    if (Array.isArray(this.selectedVariable)) {
+      htmlToInsert = this.selectedVariable
+        .map((variable) => variable.value)
+        .join(', ');
+    } else {
+      htmlToInsert = unwrap(this.selectedVariable.value);
+    }
+    htmlToInsert = this.wrapVariableInHighlight(htmlToInsert);
+    if (insertRange) {
+      this.controller.doCommand(
+        insertHtml(htmlToInsert, insertRange.from, insertRange.to, marks)
+      );
+    }
+  }
+
+  wrapVariableInHighlight(text: string) {
+    return text.replace(
+      /\$\{(.+?)\}/g,
+      '<span class="mark-highlight-manual">${$1}</span>'
+    );
+  }
+
+  @action
+  selectionChanged() {
+    this.showCard = false;
+    this.selectedVariable = undefined;
+    const { selection } = this.controller.state;
+    const { from, to } = selection;
+    const fullDatastore = this.controller.datastore;
+    const limitedDatastore = this.controller.datastore.limitToRange(
+      this.controller.state,
+      from,
+      to
+    );
+    const mapping = limitedDatastore
+      .match(null, 'a', 'ext:Mapping')
+      .asQuadResultSet()
+      .single();
+    if (mapping) {
+      const mappingUri = mapping.subject.value;
+      this.mappingUri = mappingUri;
+      const mappingTypeTriple = fullDatastore
+        .match(`>${mappingUri}`, 'dct:type')
+        .asQuadResultSet()
+        .single();
+      if (mappingTypeTriple) {
+        const mappingType = mappingTypeTriple.object.value;
+        if (mappingType === 'codelist') {
+          const codelistTriple = fullDatastore
+            .match(`>${mappingUri}`, 'ext:codelist')
+            .asQuadResultSet()
+            .single();
+          if (codelistTriple) {
+            const codelistSource = this.getCodelistSource(
+              fullDatastore,
+              mappingUri
+            );
+            this.showCard = true;
+            const codelistUri = codelistTriple.object.value;
+            void this.fetchCodeListOptions.perform(codelistSource, codelistUri);
+          }
+        } else if (mappingType === 'location') {
+          const codelistSource = this.getCodelistSource(
+            fullDatastore,
+            mappingUri
+          );
+          const measureTriple = limitedDatastore
+            .match(
+              null,
+              'a',
+              '>https://data.vlaanderen.be/ns/mobiliteit#Mobiliteitsmaatregel'
+            )
+            .asQuadResultSet()
+            .single();
+          if (!measureTriple) {
+            return;
+          }
+          const measureUri = measureTriple.subject.value;
+          const zonalityTriple = fullDatastore
+            .match(`>${measureUri}`, 'ext:zonality')
+            .asQuadResultSet()
+            .single();
+          if (!zonalityTriple) {
+            return;
+          }
+          const zonalityUri = zonalityTriple.object.value;
+          if (zonalityUri === ZONAL_URI) {
+            void this.fetchCodeListOptions.perform(
+              codelistSource,
+              this.zonalLocationCodelistUri,
+              true
+            );
+          } else {
+            void this.fetchCodeListOptions.perform(
+              codelistSource,
+              this.nonZonalLocationCodelistUri,
+              true
+            );
+          }
+          this.showCard = true;
+        }
+      }
+    }
+  }
+
+  getCodelistSource(fullDatastore: ProseStore, mappingUri: string): string {
+    const codelistSourceTriple = fullDatastore
+      .match(`>${mappingUri}`, 'dct:source')
+      .asQuadResultSet()
+      .single();
+
+    if (codelistSourceTriple) {
+      return codelistSourceTriple.object.value;
+    } else {
+      return this.endpoint;
+    }
+  }
+
+  @action
+  updateVariable(variable: CodeListOption | CodeListOption[]) {
+    this.selectedVariable = variable;
+  }
+
+  fetchCodeListOptions = task(
+    async (endpoint: string, codelistUri: string, isLocation?: boolean) => {
+      const { type, options } = await fetchCodeListOptions(
+        endpoint,
+        codelistUri
+      );
+      if (isLocation) {
+        this.variableOptions = options.map((option) => ({
+          label: option.label,
+          value: this.wrapInLocation(unwrap(option.value)),
+        }));
+      } else {
+        this.variableOptions = options;
+      }
+      if (type === MULTI_SELECT_CODELIST_TYPE) {
+        this.multiSelect = true;
+      } else {
+        this.multiSelect = false;
+      }
+    }
+  );
+
+  wrapInLocation(value: string) {
+    return `
+      <span property="https://data.vlaanderen.be/ns/mobiliteit#plaatsbepaling">
+        ${value}
+      </span>
+    `;
+  }
+}

package/addon/helpers/{limit-text.js → limit-text.ts}

@@ -1,7 +1,7 @@
 import { helper } from '@ember/component/helper';
 
-export default helper(function limitText([string]) {
-  if (string.length > 140) {
+export default helper(function limitText([string]: string[]) {
+  if (string && string.length > 140) {
     return string.slice(0, 140) + '...';
   } else {
     return string;

package/addon/models/instruction.ts

@@ -0,0 +1,18 @@
+import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
+import { IBindings } from 'fetch-sparql-endpoint';
+
+export default class Instruction {
+  constructor(
+    readonly name: string,
+    readonly template: string,
+    readonly annotatedTemplate: string
+  ) {}
+
+  static fromBinding(binding: IBindings) {
+    return new Instruction(
+      unwrap(binding['name']?.value),
+      unwrap(binding['template']?.value),
+      unwrap(binding['annotatedTemplate']?.value)
+    );
+  }
+}

package/addon/models/measure.ts

@@ -0,0 +1,38 @@
+import { tracked } from '@glimmer/tracking';
+import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
+import { IBindings } from 'fetch-sparql-endpoint';
+import Sign from './sign';
+
+export default class Measure {
+  @tracked signs: Sign[] = [];
+  classifications = new Set();
+
+  constructor(
+    readonly uri: string,
+    readonly label: string,
+    readonly template: string,
+    readonly annotatedTemplate: string,
+    readonly zonality: string,
+    readonly temporal: string | false,
+    signs: Sign[] = []
+  ) {
+    this.signs = signs;
+  }
+
+  static fromBinding(binding: IBindings) {
+    const uri = unwrap(binding['uri']?.value);
+    const label = unwrap(binding['label']?.value);
+    const template = unwrap(binding['basicTemplate']?.value);
+    const temporal = binding['temporal']?.value ?? false;
+    const annotatedTemplate = unwrap(binding['annotatedTemplate']?.value);
+    const zonality = unwrap(binding['zonality']?.value);
+    return new Measure(
+      uri,
+      label,
+      template,
+      annotatedTemplate,
+      zonality,
+      temporal
+    );
+  }
+}

package/addon/models/sign.ts

@@ -0,0 +1,36 @@
+import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
+import { IBindings } from 'fetch-sparql-endpoint';
+
+export default class Sign {
+  constructor(
+    readonly code: string,
+    readonly image: string,
+    readonly classifications: string[] = [],
+    readonly uri: string,
+    readonly order: string,
+    readonly zonality: string
+  ) {}
+  static fromBinding(binding: IBindings) {
+    const code = unwrap(binding['code']?.value);
+    const image = Sign.processImage(
+      unwrap(binding['image']?.value),
+      unwrap(binding['imageBaseUrl']?.value)
+    );
+
+    const uri = unwrap(binding['uri']?.value);
+    const order = unwrap(binding['order']?.value);
+
+    const classifications = binding['classifications']?.value.split('|') ?? [];
+    const zonality = unwrap(binding['zonality']?.value);
+    return new Sign(code, image, classifications, uri, order, zonality);
+  }
+
+  static processImage(url: string, imageBaseUrl: string) {
+    const isAbsoluteRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
+    if (isAbsoluteRegex.test(url)) {
+      return url;
+    } else {
+      return `${imageBaseUrl}${url}`;
+    }
+  }
+}

package/addon/models/template.ts

@@ -0,0 +1,14 @@
+import Model, { attr } from '@ember-data/model';
+declare module 'ember-data/types/registries/model' {
+  export default interface ModelRegistry {
+    template: TemplateModel;
+  }
+}
+export default class TemplateModel extends Model {
+  @attr declare title: string;
+  @attr('string-set', { defaultValue: () => [] }) declare matches: string[];
+  @attr declare body: string;
+  @attr('string-set', { defaultValue: () => [] }) declare contexts: string[];
+  @attr('string-set', { defaultValue: () => [] })
+  declare disabledInContexts: string[];
+}

package/addon/plugins/article-structure-plugin/commands/index.ts

@@ -0,0 +1,6 @@
+export { default as insertStructure } from './insert-structure';
+export { default as moveSelectedStructure } from './move-selected-structure';
+export { default as recalculateStructureNumbers } from './recalculate-structure-numbers';
+export { default as removeStructure } from './remove-structure';
+export { default as unwrapStructure } from './unwrap-structure';
+export { default as wrapStructureContent } from './wrap-structure-content';