Use a special name if you only have one article in the document (#486)

* Use a special name if you only have one article in the document * changeset * added shortened article behaviour * update changeset --------- Co-authored-by: Arne Bertrand <[email protected]>
lblod · Oct 17, 2024 · 630ee77 · 630ee77
1 parent 7452911
commit 630ee77
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 7 deletions.
diff --git a/.changeset/six-ants-appear.md b/.changeset/six-ants-appear.md
@@ -0,0 +1,6 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': minor
+---
+
+Use a special name if you only have one article in the document
+The title from the second article is shortened to Art.
diff --git a/addon/components/structure-plugin/_private/structure.gts b/addon/components/structure-plugin/_private/structure.gts
@@ -113,7 +113,12 @@ export default class Structure extends Component<Sig> {
   get structureName() {
     const docLang = this.controller.mainEditorState.doc.attrs.lang;
     if (this.displayStructureName) {
-      return getNameForStructureType(this.structureType, this.intl, docLang);
+      return getNameForStructureType(
+        this.structureType,
+        this.number,
+        this.intl,
+        docLang,
+      );
     } else {
       return '';
     }
@@ -122,6 +127,17 @@ export default class Structure extends Component<Sig> {
     return this.node.attrs.hasTitle;
   }
 
+  get title() {
+    if (this.node.attrs.isOnlyArticle) {
+      const docLang = this.controller.mainEditorState.doc.attrs.lang;
+      return this.intl.t('structure-plugin.only-article-title', {
+        locale: docLang,
+      });
+    } else {
+      return `${this.structureName} ${this.number}.`;
+    }
+  }
+
   @action
   onAttrsUpdate() {
     if (this.titleAttr !== this.innerEditor?.htmlContent) {
@@ -161,8 +177,7 @@ export default class Structure extends Component<Sig> {
       <div class='say-structure__header' contenteditable='false'>
 
         {{#let (element this.headerTag) as |Tag|}}
-          <Tag>{{this.structureName}}
-            {{this.number}}.
+          <Tag>{{this.title}}
 
             {{#if this.hasTitle}}
               <span

diff --git a/addon/plugins/structure-plugin/node.ts b/addon/plugins/structure-plugin/node.ts
@@ -29,11 +29,16 @@ const rdfaAware = true;
 
 export function getNameForStructureType(
   structureType: StructureType,
+  number: number,
   intl?: IntlService,
   locale?: string,
 ) {
   if (intl?.exists(`structure-plugin.types.${structureType}`, locale)) {
-    return intl?.t(`structure-plugin.types.${structureType}`, { locale });
+    if (structureType === 'article' && number !== 1) {
+      return intl?.t(`structure-plugin.shortened-article`, { locale });
+    } else {
+      return intl?.t(`structure-plugin.types.${structureType}`, { locale });
+    }
   } else {
     return structureType;
   }
@@ -71,6 +76,9 @@ export const emberNodeConfig: () => EmberNodeConfig = () => {
       number: {
         default: 1,
       },
+      isOnlyArticle: {
+        default: false,
+      },
       structureType: {},
       displayStructureName: {
         default: false,
@@ -86,21 +94,29 @@ export const emberNodeConfig: () => EmberNodeConfig = () => {
       const tag = node.attrs.headerTag;
       const structureType = node.attrs.structureType as StructureType;
       const number = node.attrs.number as number;
+      const isOnlyArticle = node.attrs.isOnlyArticle as boolean;
       const hasTitle = node.attrs.hasTitle as boolean;
       const titleHTML = hasTitle
         ? parser.parseFromString(node.attrs.title, 'text/html').body
             .firstElementChild
         : null;
       const displayStructureName = node.attrs.displayStructureName as boolean;
+      const intlService = getIntlService(state);
       const structureName = displayStructureName
         ? getNameForStructureType(
             structureType,
-            getIntlService(state),
+            number,
+            intlService,
             state.doc.attrs.lang,
           )
         : null;
       let headerSpec;
 
+      const onlyArticleTitle = intlService
+        ? intlService.t('structure-plugin.only-article-title', {
+            locale: state.doc.attrs.lang,
+          })
+        : structureName;
       if (titleHTML) {
         headerSpec = [
           tag,
@@ -133,13 +149,14 @@ export const emberNodeConfig: () => EmberNodeConfig = () => {
                 [
                   'span',
                   { 'data-say-structure-header-name': true },
-                  `${structureName} `,
+                  `${isOnlyArticle ? onlyArticleTitle : structureName} `,
                 ],
               ]
             : []),
           [
             'span',
             {
+              style: isOnlyArticle ? 'display: none;' : '',
               'data-say-structure-header-number': true,
               property: ELI('number').full,
             },
@@ -158,6 +175,7 @@ export const emberNodeConfig: () => EmberNodeConfig = () => {
           'data-say-display-structure-name': displayStructureName,
           'data-say-header-tag': tag,
           'data-say-number': number,
+          'data-say-is-only-article': isOnlyArticle,
         },
         content: [
           'div',
@@ -181,6 +199,9 @@ export const emberNodeConfig: () => EmberNodeConfig = () => {
           ) {
             const hasTitle =
               node.dataset.sayHasTitle && node.dataset.sayHasTitle !== 'false';
+            const isOnlyArticle =
+              node.dataset.sayIsOnlyArticle &&
+              node.dataset.sayIsOnlyArticle !== 'false';
             // strict selector here to avoid false positives when structures are nested
             // :scope refers to the element on which we call querySelector
             const titleElement = node.querySelector(
@@ -201,7 +222,8 @@ export const emberNodeConfig: () => EmberNodeConfig = () => {
               structureType: node.dataset.sayStructureType,
               displayStructureName: node.dataset.sayDisplayStructureName,
               headerTag: node.dataset.sayHeaderTag,
-              number: node.dataset.sayNumber,
+              number: Number(node.dataset.sayNumber),
+              isOnlyArticle,
               title,
             };
           }
@@ -252,6 +274,7 @@ export const emberNodeConfig: () => EmberNodeConfig = () => {
               structureType: 'article',
               displayStructureName: true,
               hasTitle: false,
+              isOnlyArticle: false,
               number,
             };
           }

diff --git a/addon/plugins/structure-plugin/recalculate-structure-numbers.ts b/addon/plugins/structure-plugin/recalculate-structure-numbers.ts
@@ -12,17 +12,25 @@ export function recalculateNumbers(
   const tr = state.tr;
   const doc = tr.doc;
   let counter = 0;
+  let lastNodePos;
   doc.descendants((node, pos) => {
     if (
       node.type.name === 'structure' &&
       hasOutgoingNamedNodeTriple(node.attrs, RDF('type'), BESLUIT('Artikel'))
     ) {
       counter += 1;
+      lastNodePos = pos;
+      if (node.attrs.isOnlyArticle === true) {
+        tr.setNodeAttribute(pos, 'isOnlyArticle', false);
+      }
       if (counter !== Number(node.attrs.number)) {
         tr.setNodeAttribute(pos, 'number', counter);
       }
     }
     return true;
   });
+  if (lastNodePos !== undefined && counter === 1) {
+    tr.setNodeAttribute(lastNodePos, 'isOnlyArticle', true);
+  }
   return { transaction: tr, result: true, initialState: state };
 }
diff --git a/translations/en-US.yaml b/translations/en-US.yaml
@@ -14,6 +14,8 @@ common:
 structure-plugin:
   move-up: 'Move {structureName} up'
   move-down: 'Move {structureName} down'
+  only-article-title: Only article
+  shortened-article: Art.
   types:
     article: Article
     title: Title

diff --git a/translations/nl-BE.yaml b/translations/nl-BE.yaml
@@ -14,6 +14,8 @@ common:
 structure-plugin:
   move-up: '{structureName} naar boven verplaatsen'
   move-down: '{structureName} naar beneden verplaatsen'
+  only-article-title: Enig artikel
+  shortened-article: Art.
   types:
     article: Artikel
     title: Titel