diff --git a/README.md b/README.md index f11ef4a..223a133 100644 --- a/README.md +++ b/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|}} + + {{nav.index}} + +{{/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 + + name-{{index}} + +``` + ## License This project is licensed under the [MIT License](LICENSE.md). diff --git a/addon/templates/components/slide-navigation-item.hbs b/addon/templates/components/slide-navigation-item.hbs index fb5c4b1..889d9ee 100644 --- a/addon/templates/components/slide-navigation-item.hbs +++ b/addon/templates/components/slide-navigation-item.hbs @@ -1 +1 @@ -{{yield}} \ No newline at end of file +{{yield}} diff --git a/addon/templates/components/slide-navigation.hbs b/addon/templates/components/slide-navigation.hbs index 0432247..38703a7 100644 --- a/addon/templates/components/slide-navigation.hbs +++ b/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}} diff --git a/tests/integration/components/blanc-slider-test.js b/tests/integration/components/blanc-slider-test.js index 3f306ec..1517d45 100644 --- a/tests/integration/components/blanc-slider-test.js +++ b/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|}} + + {{nav.index}} + + {{/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` + + name-{{index}} + + `, + }) + ); + + 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'); + }); });