Merge pull request #82 from laws-africa/gutter

When activating an item, ignore hidden items

README.md

@@ -24,7 +24,7 @@ There are three methods for using these web components:
 
 ### Script tag
 
-- Put a script tag similar to this `<script type="module" src="https://cdn.jsdelivr.net/gh/laws-africa/la-web-components@0.0.6-beta/dist/la-web-components/la-web-components.esm.js"></script>` in the head of your index.html
+- Put a script tag similar to this `<script type="module" src="https://cdn.jsdelivr.net/gh/laws-africa/la-web-components@0.7.1-beta/dist/la-web-components/la-web-components.esm.js"></script>` in the head of your index.html
 - Then you can use the element anywhere in your template, JSX, html etc
 
 ### Node Modules

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@laws-africa/web-components",
   "author": "Greg Kempe <[email protected]>",
-  "version": "0.7.0-beta",
+  "version": "0.7.1-beta",
   "description": "Laws.Africa Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/custom-elements/index.js",

src/components/gutter/gutter.e2e.ts

@@ -12,8 +12,8 @@ describe('la-gutter', () => {
     const page = await newE2EPage();
     await page.setContent(`
       <la-akoma-ntoso id="doc">
-        <div id='#sect_1'>Lorem Ipsum</div>
-        <div id='#sect_2'>Lorem Ipsum</div>
+        <div id="sect_1">Lorem Ipsum</div>
+        <div id="sect_2">Lorem Ipsum</div>
       </la-akoma-ntoso>
       <la-gutter akoma-ntoso="#doc">
         <la-gutter-item anchor="#sect_1" active>Comment</la-gutter-item>
@@ -36,8 +36,8 @@ describe('la-gutter', () => {
     const page = await newE2EPage();
     await page.setContent(`
       <la-akoma-ntoso id="doc">
-        <div id='#sect_1'>Lorem Ipsum</div>
-        <div id='#sect_2'>Lorem Ipsum</div>
+        <div id="sect_1">Lorem Ipsum</div>
+        <div id="sect_2">Lorem Ipsum</div>
       </la-akoma-ntoso>
       <la-gutter akoma-ntoso="#doc">
         <la-gutter-item anchor="#sect_1">Comment</la-gutter-item>
@@ -60,8 +60,8 @@ describe('la-gutter', () => {
     const page = await newE2EPage();
     await page.setContent(`
       <la-akoma-ntoso id="doc">
-        <div id='#sect_1'>Lorem Ipsum</div>
-        <div id='#sect_2'>Lorem Ipsum</div>
+        <div id="sect_1">Lorem Ipsum</div>
+        <div id="sect_2">Lorem Ipsum</div>
       </la-akoma-ntoso>
       <la-gutter akoma-ntoso="#doc">
         <la-gutter-item anchor="#sect_1">Comment</la-gutter-item>
@@ -79,4 +79,34 @@ describe('la-gutter', () => {
     const lastItemActiveState = await lastItem.getProperty('active');
     expect(lastItemActiveState).toBe(false);
   });
+
+  it('should not activate items that dont have a valid anchor', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <la-akoma-ntoso id="doc">
+        <div id="sect_1">Lorem Ipsum</div>
+        <div id="sect_2">Lorem Ipsum</div>
+      </la-akoma-ntoso>
+      <la-gutter akoma-ntoso="#doc">
+        <la-gutter-item anchor="#sect_1" active>Comment</la-gutter-item>
+        <la-gutter-item anchor="#badness">Anchor doesn't exist</la-gutter-item>
+        <la-gutter-item anchor="#sect_2">Comment</la-gutter-item>
+      </la-gutter>
+    `);
+    const laGutter = await page.find('la-gutter');
+
+    // should skip 2nd and activate 3rd
+    await laGutter.callMethod('activateNextItem');
+    let item = await page.find('la-gutter la-gutter-item:nth-child(2)');
+    expect(await item.getProperty('active')).toBe(false);
+    item = await page.find('la-gutter la-gutter-item:nth-child(3)');
+    expect(await item.getProperty('active')).toBe(true);
+
+    // should skip 2nd and activate 1st
+    await laGutter.callMethod('activatePrevItem');
+    item = await page.find('la-gutter la-gutter-item:nth-child(2)');
+    expect(await item.getProperty('active')).toBe(false);
+    item = await page.find('la-gutter la-gutter-item:nth-child(1)');
+    expect(await item.getProperty('active')).toBe(true);
+  });
 });

src/components/gutter/gutter.ts

@@ -131,7 +131,8 @@ export class Gutter {
    */
   @Method()
   async activateNextItem () {
-    const items = this.layout ? this.layout.sortItems([...this.items()]) : [];
+    const items: HTMLLaGutterItemElement[] = this.layout ? this.layout.sortItems(this.getVisibleItems()) : [];
+
     if (items.length === 1) {
       items[0].active = true;
       return items[0];
@@ -155,7 +156,8 @@ export class Gutter {
    */
   @Method()
   async activatePrevItem () {
-    const items = this.layout ? this.layout.sortItems([...this.items()]) : [];
+    const items: HTMLLaGutterItemElement[] = this.layout ? this.layout.sortItems(this.getVisibleItems()) : [];
+
     if (items.length === 1) {
       items[0].active = true;
       return items[0];
@@ -174,4 +176,8 @@ export class Gutter {
   items (): NodeListOf<HTMLLaGutterItemElement> {
     return this.el.querySelectorAll('la-gutter-item');
   }
+
+  getVisibleItems (): HTMLLaGutterItemElement[] {
+    return [...this.items()].filter(i => i.style.display !== 'none');
+  }
 }

src/components/gutter/layout.ts

@@ -134,7 +134,7 @@ export class GutterLayout {
       if (anchor) {
         this.anchors.set(item, anchor);
       }
-      item.style.display = anchor ? 'block' : 'none';
+      item.style.display = anchor ? '' : 'none';
     }
   }