Merge pull request #16 from Blancframe/feature/custom-navigation

First setup custom navigation

README.md

@@ -1,12 +1,10 @@
-# ember-blanc-slider [![Build Status](https://travis-ci.com/Blancframe/ember-blanc-slider.svg?branch=master)](https://travis-ci.com/Blancframe/ember-blanc-slider)
-
-[![Coverage Status](https://coveralls.io/repos/github/onepercentclub/reef/badge.svg?branch=master&t=Z5eKvl)](https://coveralls.io/github/onepercentclub/reef?branch=master)
+# ember-blanc-slider [![Build Status](https://travis-ci.com/Blancframe/ember-blanc-slider.svg?branch=master)](https://travis-ci.com/Blancframe/ember-blanc-slider) [![Coverage Status](https://coveralls.io/repos/github/onepercentclub/reef/badge.svg?branch=master&t=Z5eKvl)](https://coveralls.io/github/onepercentclub/reef?branch=master)
 
 Accessible simple content slider
 
 ## Compatibility
 
-- Ember.js v3.4 or above
+- Ember.js v2.18 or above
 - Ember CLI v2.13 or above
 
 ## Installation
@@ -85,10 +83,48 @@ Returns boolean, will be true when auto play
 
 Will show the navigation
 
+#### This will give you the default navigation items
+
 ```handlebars
 {{content.navigation}}
 ```
 
+#### You can wrap a custom element and use the following properties to control it: `item`, `slideAction`, 'isActive', `index`
+
+```handlebars
+{{#content.navigation as |nav|}}
+  <span
+    onclick={{action nav.slideAction nav.index}}
+    aria-atomic={{if nav.isActive "true" "false"}}
+    role="button"
+  >
+      {{nav.index}}
+  </span>
+{{/content.navigation}}
+```
+
+#### You can pass a component name in the `customNavigationComponent` param. The following params will automatically passed in and can be used in the component to control the navigation: `item`, `slideAction`, 'isActive', `index`
+
+```handlebars
+{{content.navigation
+  customNavigationComponent="custom-navigate"
+}}
+```
+
+```text
+custom-navigate.hbs
+```
+
+```handlebars
+<span
+  onclick={{action slideAction index}}
+  aria-atomic={{if isActive "true" "false"}}
+  role="button"
+>
+    name-{{index}}
+</span>
+```
+
 ## License
 
 This project is licensed under the [MIT License](LICENSE.md).

addon/templates/components/slide-navigation-item.hbs

@@ -1 +1 @@
-{{yield}}
+{{yield}}

addon/templates/components/slide-navigation.hbs

@@ -1,7 +1,25 @@
 {{#each items as |item|}}
-    {{slide-navigation-item
-        index=item.index
-        slideAction=(action slideAction)
-        isActive=item.isActive
-    }}
+    {{#if hasBlock}}
+        {{yield
+            (hash
+                index=item.index
+                item=item.element.innerHTML
+                slideAction=(action slideAction)
+                isActive=item.isActive
+                )
+        }}
+    {{else if customNavigationComponent}}
+        {{component
+            customNavigationComponent
+            index=item.index
+            slideAction=(action slideAction)
+            isActive=item.isActive
+        }}
+    {{else}}
+        {{slide-navigation-item
+            index=item.index
+            slideAction=(action slideAction)
+            isActive=item.isActive
+        }}
+    {{/if}}
 {{/each}}

tests/integration/components/blanc-slider-test.js

@@ -2,6 +2,7 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { click, render, triggerEvent } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
+import Component from '@ember/component';
 
 module('Integration | Component | blanc-slider', function (hooks) {
   setupRenderingTest(hooks);
@@ -288,4 +289,138 @@ module('Integration | Component | blanc-slider', function (hooks) {
     assert.equal(list[1].getAttribute('aria-atomic'), 'false');
     assert.equal(list[2].getAttribute('aria-atomic'), 'false');
   });
+
+  test('it renders custom navigation', async function (assert) {
+    assert.expect(12);
+
+    await render(hbs`
+      {{#blanc-slider as |content|}}
+          {{#content.list}}
+              {{#content.slide}}
+                  Slide one and some content
+              {{/content.slide}}
+              {{#content.slide}}
+                  And an other slide
+              {{/content.slide}}
+              {{#content.slide}}
+                  Yet an other one
+              {{/content.slide}}
+              {{#content.slide}}
+                  An Other one (Dj Khaled)
+              {{/content.slide}}
+              {{#content.slide}}
+                  The final slide
+              {{/content.slide}}
+              {{#content.slide}}
+                  The final final slide
+              {{/content.slide}}
+          {{/content.list}}
+
+          {{#content.navigation as |nav|}}
+              <span
+                onclick={{action nav.slideAction nav.index}}
+                aria-atomic={{if nav.isActive "true" "false"}}
+                role="button"
+              >
+                  {{nav.index}}
+              </span>
+          {{/content.navigation}}
+      {{/blanc-slider}}
+    `);
+
+    const list = this.element.querySelectorAll('ul li');
+    assert.equal(list.length, 6);
+
+    const navigationItems = this.element.querySelectorAll(
+      '.blanc-slider-navigation span'
+    );
+    assert.equal(navigationItems.length, 6);
+
+    assert.equal(navigationItems[0].getAttribute('aria-atomic'), 'true');
+    assert.equal(navigationItems[1].getAttribute('aria-atomic'), 'false');
+    assert.equal(navigationItems[2].getAttribute('aria-atomic'), 'false');
+    assert.equal(navigationItems[3].getAttribute('aria-atomic'), 'false');
+    assert.equal(navigationItems[4].getAttribute('aria-atomic'), 'false');
+    assert.equal(navigationItems[5].getAttribute('aria-atomic'), 'false');
+
+    await click(navigationItems[2]);
+    assert.equal(navigationItems[0].getAttribute('aria-atomic'), 'false');
+    assert.equal(navigationItems[2].getAttribute('aria-atomic'), 'true');
+
+    await click(navigationItems[4]);
+    assert.equal(navigationItems[2].getAttribute('aria-atomic'), 'false');
+    assert.equal(navigationItems[4].getAttribute('aria-atomic'), 'true');
+  });
+
+  test('it renders custom navigation component', async function (assert) {
+    // assert.expect(12);
+    await this.owner.register(
+      'component:custom-navigate',
+      Component.extend({
+        layout: hbs`
+        <span
+          onclick={{action slideAction index}}
+          aria-atomic={{if isActive "true" "false"}}
+          role="button"
+        >
+            name-{{index}}
+        </span>
+      `,
+      })
+    );
+
+    await render(hbs`
+      {{#blanc-slider as |content|}}
+          {{#content.list}}
+              {{#content.slide}}
+                  Slide one and some content
+              {{/content.slide}}
+              {{#content.slide}}
+                  And an other slide
+              {{/content.slide}}
+              {{#content.slide}}
+                  Yet an other one
+              {{/content.slide}}
+              {{#content.slide}}
+                  An Other one (Dj Khaled)
+              {{/content.slide}}
+              {{#content.slide}}
+                  The final slide
+              {{/content.slide}}
+              {{#content.slide}}
+                  The final final slide
+              {{/content.slide}}
+          {{/content.list}}
+
+          {{content.navigation
+            customNavigationComponent="custom-navigate"
+          }}
+      {{/blanc-slider}}
+    `);
+
+    const list = this.element.querySelectorAll('ul li');
+    assert.equal(list.length, 6);
+
+    const navigationItems = this.element.querySelectorAll(
+      '.blanc-slider-navigation span'
+    );
+    assert.equal(navigationItems.length, 6);
+
+    assert.equal(navigationItems[0].getAttribute('aria-atomic'), 'true');
+    assert.equal(navigationItems[1].getAttribute('aria-atomic'), 'false');
+    assert.equal(navigationItems[2].getAttribute('aria-atomic'), 'false');
+    assert.equal(navigationItems[3].getAttribute('aria-atomic'), 'false');
+    assert.equal(navigationItems[4].getAttribute('aria-atomic'), 'false');
+    assert.equal(navigationItems[5].getAttribute('aria-atomic'), 'false');
+
+    await click(navigationItems[2]);
+    assert.equal(navigationItems[0].getAttribute('aria-atomic'), 'false');
+    assert.equal(navigationItems[2].getAttribute('aria-atomic'), 'true');
+
+    await click(navigationItems[4]);
+    assert.equal(navigationItems[2].getAttribute('aria-atomic'), 'false');
+    assert.equal(navigationItems[4].getAttribute('aria-atomic'), 'true');
+
+    await this.owner.unregister('component:custom-navigate');
+  });
 });