Merge pull request #14 from gbj/add-block-modal

Add block modal
gbj · May 11, 2020 · 03fe30b · 03fe30b
2 parents c857347 + f92cf33
commit 03fe30b
Show file tree

Hide file tree

Showing 13 changed files with 286 additions and 137 deletions.
diff --git a/components/package-lock.json b/components/package-lock.json
diff --git a/components/package.json b/components/package.json
@@ -40,6 +40,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@ionic/core": "^5.1.0",
     "@venite/ldf": "0.0.11",
     "diff-match-patch": "^1.0.4",
     "json0-ot-diff": "^1.0.5",

diff --git a/components/src/components/editable-add-block-menu/editable-add-block-menu.i18n.en.json b/components/src/components/editable-add-block-menu/editable-add-block-menu.i18n.en.json
@@ -0,0 +1,10 @@
+{
+  "bible": "Reading",
+  "heading": "Heading",
+  "meditation": "Meditation",
+  "prayer": "Prayer",
+  "refrain": "Refrain",
+  "rubric": "Rubric",
+  "text": "Text",
+  "title": "Add a Block"
+}
diff --git a/components/src/components/editable-add-block-menu/editable-add-block-menu.scss b/components/src/components/editable-add-block-menu/editable-add-block-menu.scss
@@ -0,0 +1,30 @@
+ul {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0.25em;
+  }
+}
+
+/* Buttons for each possible block */
+button.block {
+  border: none;
+  display: block;
+  display: flex;
+  flex-direction: column;
+  font-size: 1em;
+  align-items: center;
+  justify-content: center;
+  width: 6em;
+  padding: 0.25em;
+
+  svg {
+    height: 2em;
+    margin-bottom: 0.25em;
+    width: auto;
+  }
+}
diff --git a/components/src/components/editable-add-block-menu/editable-add-block-menu.tsx b/components/src/components/editable-add-block-menu/editable-add-block-menu.tsx
@@ -0,0 +1,120 @@
+import { Element, Component, Prop, Host, Listen, State, h } from '@stencil/core';
+import { LiturgicalDocument } from '@venite/ldf';
+
+import { getLocaleComponentStrings } from '../../utils/locale';
+import { MENU } from './menu-options';
+
+@Component({
+  tag: 'ldf-editable-add-block-menu',
+  styleUrl: 'editable-add-block-menu.scss',
+  shadow: true
+})
+export class EditableAddBlockMenuComponent {
+  @Element() element: HTMLElement;
+
+  @State() localeStrings: { [x: string]: string; };
+  @State() menu = [ ... MENU ];
+
+  @Prop() modal : any;
+
+  // Listener to capture searchbar changes
+  @Listen('ionChange')
+  onIonChange(ev : CustomEvent) {
+    const search = ev.detail.value;
+    this.filter(search);
+  }
+
+  async componentWillLoad() {
+    this.loadLocaleStrings();
+    this.filter('');
+  }
+
+  /** Asynchronously return localization strings */
+  async getLocaleStrings() : Promise<{ [x: string]: string; }> {
+    if(!this.localeStrings) {
+      await this.loadLocaleStrings();
+      return this.localeStrings;
+    } else {
+      return this.localeStrings;
+    }
+  }
+
+  /** Asynchronously load localization strings */
+  async loadLocaleStrings() : Promise<void> {
+    try {
+      this.localeStrings = await getLocaleComponentStrings(this.element);
+    } catch(e) {
+      console.warn(e);
+    }
+  }
+
+  add(template : LiturgicalDocument[]) {
+    this.modal.dismiss(template);
+  }
+
+  /** Mark each item in menu as hidden or not
+    * depending on whether its label or the localized version includes
+    * the search */
+  filter(search: string) {
+    this.menu = [
+      ... this.menu.map(entry => {
+        const label = (entry.label || '').toLowerCase(),
+              localeLabel = ((this.localeStrings || {})[entry.label] || '').toLowerCase(),
+              s = search.toLowerCase();
+        console.log(label, localeLabel, s, label.includes(s), localeLabel.includes(s) );
+        return {
+          ... entry,
+          hidden: !(label.includes(s) || localeLabel.includes(s))
+        }
+      })
+    ];
+  }
+
+  render() {
+    const localeStrings = this.localeStrings || {};
+
+    // list of unique section tags
+    const sections = Array.from(
+      new Set(
+        this.menu
+          .filter(item => !item.hidden)
+          .map(item => item.section).flat()
+      )
+    );
+
+    return (
+      <Host>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>{ localeStrings.title }</ion-title>
+            <ion-buttons slot="primary">
+              <ion-button onClick={() => this.modal.dismiss(null)}>
+                <ion-icon slot="icon-only" name="close"></ion-icon>
+              </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+          <ion-toolbar>
+            <ion-searchbar slot="end"></ion-searchbar>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          {sections.map(section =>
+            <ion-list>
+              <ion-list-header>{localeStrings[section] || section}</ion-list-header>
+              <ul>
+              {this.menu.filter(item => item.section.includes(section) && !item.hidden).map(item =>
+                <li>
+                  <button onClick={() => this.add(item.template)} class='block'>
+                    { (item.icon)() }
+                    <label>{ localeStrings[item.label] }</label>
+                  </button>
+                </li>
+              )}
+              </ul>
+            </ion-list>
+          )}
+        </ion-content>
+      </Host>
+    )
+  }
+}
diff --git a/components/src/components/editable-add-block-menu/menu-options.tsx b/components/src/components/editable-add-block-menu/menu-options.tsx
@@ -0,0 +1,55 @@
+import { JSX, h } from '@stencil/core';
+import { LiturgicalDocument } from '@venite/ldf';
+
+export class MenuOption {
+  label: string;
+  section: string[];
+  icon: () => JSX.Element;
+  template?: LiturgicalDocument[];
+  hidden?: boolean;
+}
+
+export const MENU : MenuOption[] = [
+  {
+    label: 'bible',
+    section: ['Reading'],
+    /* SVG is Font Awesome 'fa-bible' */
+    icon: () => (<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bible" class="svg-inline--fa fa-bible fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M448 358.4V25.6c0-16-9.6-25.6-25.6-25.6H96C41.6 0 0 41.6 0 96v320c0 54.4 41.6 96 96 96h326.4c12.8 0 25.6-9.6 25.6-25.6v-16c0-6.4-3.2-12.8-9.6-19.2-3.2-16-3.2-60.8 0-73.6 6.4-3.2 9.6-9.6 9.6-19.2zM144 144c0-8.84 7.16-16 16-16h48V80c0-8.84 7.16-16 16-16h32c8.84 0 16 7.16 16 16v48h48c8.84 0 16 7.16 16 16v32c0 8.84-7.16 16-16 16h-48v112c0 8.84-7.16 16-16 16h-32c-8.84 0-16-7.16-16-16V192h-48c-8.84 0-16-7.16-16-16v-32zm236.8 304H96c-19.2 0-32-12.8-32-32s16-32 32-32h284.8v64z"></path></svg>),
+    template: [ new LiturgicalDocument({ type: 'bible-reading', style: 'long', value: [] }) ]
+  },
+  {
+    label: 'heading',
+    section: ['Liturgy'],
+    /* SVG is Font Awesome 'fa-heading' */
+    icon: () => (<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="heading" class="svg-inline--fa fa-heading fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M448 96v320h32a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H320a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h32V288H160v128h32a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H32a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h32V96H32a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h160a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16h-32v128h192V96h-32a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h160a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16z"></path></svg>),
+    template: [ new LiturgicalDocument({ type: 'heading', label: '', citation: '' }) ]
+  },
+  {
+    label: 'meditation',
+    section: ['Prayer', 'Liturgy'],
+    /* SVG is Font Awesome 'fa-sun' */
+    icon: () => (<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sun" class="svg-inline--fa fa-sun fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg>),
+    template: [ new LiturgicalDocument({ type: 'meditation', metadata: {} }) ]
+  },
+  {
+    label: 'prayer',
+    section: ['Liturgy', 'Prayer'],
+    /* SVG is Font Awesome 'fa-praying-hands' */
+    icon: () => (<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="praying-hands" class="svg-inline--fa fa-praying-hands fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M272 191.91c-17.6 0-32 14.4-32 32v80c0 8.84-7.16 16-16 16s-16-7.16-16-16v-76.55c0-17.39 4.72-34.47 13.69-49.39l77.75-129.59c9.09-15.16 4.19-34.81-10.97-43.91-14.45-8.67-32.72-4.3-42.3 9.21-.2.23-.62.21-.79.48l-117.26 175.9C117.56 205.9 112 224.31 112 243.29v80.23l-90.12 30.04A31.974 31.974 0 0 0 0 383.91v96c0 10.82 8.52 32 32 32 2.69 0 5.41-.34 8.06-1.03l179.19-46.62C269.16 449.99 304 403.8 304 351.91v-128c0-17.6-14.4-32-32-32zm346.12 161.73L528 323.6v-80.23c0-18.98-5.56-37.39-16.12-53.23L394.62 14.25c-.18-.27-.59-.24-.79-.48-9.58-13.51-27.85-17.88-42.3-9.21-15.16 9.09-20.06 28.75-10.97 43.91l77.75 129.59c8.97 14.92 13.69 32 13.69 49.39V304c0 8.84-7.16 16-16 16s-16-7.16-16-16v-80c0-17.6-14.4-32-32-32s-32 14.4-32 32v128c0 51.89 34.84 98.08 84.75 112.34l179.19 46.62c2.66.69 5.38 1.03 8.06 1.03 23.48 0 32-21.18 32-32v-96c0-13.77-8.81-25.99-21.88-30.35z"></path></svg>),
+    template: [ new LiturgicalDocument({ type: 'text', style: 'prayer', value: [''] }) ]
+  },
+  {
+    label: 'rubric',
+    section: ['Liturgy'],
+    /* SVG is Font Awesome 'fa-directions' */
+    icon: () => (<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="directions" class="svg-inline--fa fa-directions fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M502.61 233.32L278.68 9.39c-12.52-12.52-32.83-12.52-45.36 0L9.39 233.32c-12.52 12.53-12.52 32.83 0 45.36l223.93 223.93c12.52 12.53 32.83 12.53 45.36 0l223.93-223.93c12.52-12.53 12.52-32.83 0-45.36zm-100.98 12.56l-84.21 77.73c-5.12 4.73-13.43 1.1-13.43-5.88V264h-96v64c0 4.42-3.58 8-8 8h-32c-4.42 0-8-3.58-8-8v-80c0-17.67 14.33-32 32-32h112v-53.73c0-6.97 8.3-10.61 13.43-5.88l84.21 77.73c3.43 3.17 3.43 8.59 0 11.76z"></path></svg>),
+    template: [ new LiturgicalDocument({ type: 'rubric', value: [''] }) ]
+  },
+  {
+    label: 'text',
+    section: ['Liturgy', 'Reading'],
+    /* SVG is Font Awesome 'fa-align-left' */
+    icon: () => (  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="align-left" class="svg-inline--fa fa-align-left fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M12.83 352h262.34A12.82 12.82 0 0 0 288 339.17v-38.34A12.82 12.82 0 0 0 275.17 288H12.83A12.82 12.82 0 0 0 0 300.83v38.34A12.82 12.82 0 0 0 12.83 352zm0-256h262.34A12.82 12.82 0 0 0 288 83.17V44.83A12.82 12.82 0 0 0 275.17 32H12.83A12.82 12.82 0 0 0 0 44.83v38.34A12.82 12.82 0 0 0 12.83 96zM432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"></path></svg>),
+    template: [ new LiturgicalDocument({ type: 'text', style: 'text', value: [''] }) ]
+  },
+]
diff --git a/components/src/components/editable-add-block/editable-add-block.i18n.en.json b/components/src/components/editable-add-block/editable-add-block.i18n.en.json
@@ -1,10 +1,5 @@
 {
+  "add": "Add",
   "label": "Label",
-  "citation": "Citation",
-  "bible": "Reading",
-  "meditation": "Meditation",
-  "refrain": "Refrain",
-  "rubric": "Rubric",
-  "text": "Text",
-  "heading": "Heading"
+  "citation": "Citation"
 }
diff --git a/components/src/components/editable-add-block/editable-add-block.scss b/components/src/components/editable-add-block/editable-add-block.scss
@@ -42,25 +42,6 @@
     font-size: 2em;
   }
 
-  /* Buttons for each possible block */
-  button.block {
-    border: none;
-    display: block;
-    display: flex;
-    flex-direction: column;
-    font-size: 1em;
-    align-items: center;
-    justify-content: center;
-    width: 6em;
-    padding: 0.25em;
-
-    svg {
-      height: 0.5em;
-      margin-bottom: 0.25em;
-      width: auto;
-    }
-  }
-
   /* Add Block */
   .underlying {
     width: 100%;
@@ -116,4 +97,14 @@
     transition: 0.25s;
     z-index: 1;
   }
+
+  .visually-hidden {
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px, 1px, 1px, 1px);
+    white-space: nowrap; /* added line */
+  }
 }