From a2c0edf8df0df8dcb481aa0a687982691b488514 Mon Sep 17 00:00:00 2001
From: Dan Nelson <dnelson@cybertooth.ca>
Date: Mon, 6 Feb 2017 23:34:11 -0700
Subject: [PATCH] #5 carousel indicators and captions.

---
 addon/components/twbs-carousel.js             |   6 +
 .../components/twbs-carousel/-indicator-li.js |  11 ++
 addon/components/twbs-carousel/slide.js       |   3 +
 .../components/twbs-carousel/slide/caption.js |   8 ++
 addon/templates/components/twbs-carousel.hbs  |  13 ++-
 .../twbs-carousel/-indicator-li.hbs           |   1 +
 .../components/twbs-carousel/slide.hbs        |   7 +-
 .../twbs-carousel/slide/caption.hbs           |   1 +
 app/components/twbs-carousel/-indicator-li.js |   1 +
 app/components/twbs-carousel/slide/caption.js |   1 +
 tests/dummy/app/templates/index.hbs           | 109 ++++++++++++++++++
 .../twbs-carousel/-indicator-li-test.js       |  25 ++++
 .../twbs-carousel/slide/caption-test.js       |  25 ++++
 13 files changed, 207 insertions(+), 4 deletions(-)
 create mode 100644 addon/components/twbs-carousel/-indicator-li.js
 create mode 100644 addon/components/twbs-carousel/slide/caption.js
 create mode 100644 addon/templates/components/twbs-carousel/-indicator-li.hbs
 create mode 100644 addon/templates/components/twbs-carousel/slide/caption.hbs
 create mode 100644 app/components/twbs-carousel/-indicator-li.js
 create mode 100644 app/components/twbs-carousel/slide/caption.js
 create mode 100644 tests/integration/components/twbs-carousel/-indicator-li-test.js
 create mode 100644 tests/integration/components/twbs-carousel/slide/caption-test.js

diff --git a/addon/components/twbs-carousel.js b/addon/components/twbs-carousel.js
index 98db692..a2ae2a7 100644
--- a/addon/components/twbs-carousel.js
+++ b/addon/components/twbs-carousel.js
@@ -13,11 +13,17 @@ export default Ember.Component.extend(Carousel, {
    * Add the slide class?
    */
   classNames: ['carousel'],
+  /**
+   * @default `false`
+   * @return boolean `true` if you want the carousel indicators to appear; `false` otherwise.
+   */
+  'indicators?': false,
   init() {
     this._super(...arguments);
     this.set('_slides', Ember.A());
   },
   layout,
+  slides: Ember.computed.readOnly('_slides.[]'),
   tagName: 'div',
   _initializeCarousel: Ember.on('didInsertElement', function () {
     this.$()
diff --git a/addon/components/twbs-carousel/-indicator-li.js b/addon/components/twbs-carousel/-indicator-li.js
new file mode 100644
index 0000000..68f7918
--- /dev/null
+++ b/addon/components/twbs-carousel/-indicator-li.js
@@ -0,0 +1,11 @@
+import Ember from 'ember';
+import layout from '../../templates/components/twbs-carousel/-indicator-li';
+
+export default Ember.Component.extend({
+  active: Ember.computed.readOnly('slideComponent.active?'),
+  attributeBindings: ['data-target', 'data-slide-to'],
+  classNameBindings: ['active'],
+  layout,
+  slideComponent: undefined,
+  tagName: 'li'
+});
diff --git a/addon/components/twbs-carousel/slide.js b/addon/components/twbs-carousel/slide.js
index 8b538b2..9c20539 100644
--- a/addon/components/twbs-carousel/slide.js
+++ b/addon/components/twbs-carousel/slide.js
@@ -14,6 +14,9 @@ export default Ember.Component.extend({
       return true;
     }
   },
+  'active?': Ember.computed('classNames.[]', function() {
+    return this.$().hasClass('active');
+  }),
   classNames: ['twbs-carousel-slide', 'item'],
   layout,
   /**
diff --git a/addon/components/twbs-carousel/slide/caption.js b/addon/components/twbs-carousel/slide/caption.js
new file mode 100644
index 0000000..da9f879
--- /dev/null
+++ b/addon/components/twbs-carousel/slide/caption.js
@@ -0,0 +1,8 @@
+import Ember from 'ember';
+import layout from '../../../templates/components/twbs-carousel/slide/caption';
+
+export default Ember.Component.extend({
+  classNames: ['carousel-caption'],
+  layout,
+  tagName: 'div'
+});
diff --git a/addon/templates/components/twbs-carousel.hbs b/addon/templates/components/twbs-carousel.hbs
index ce0ceb3..0b8e804 100644
--- a/addon/templates/components/twbs-carousel.hbs
+++ b/addon/templates/components/twbs-carousel.hbs
@@ -1,8 +1,15 @@
+{{#if indicators?}}
+  <ol class="carousel-indicators">
+    {{#each slides as |slide index|}}
+      {{twbs-carousel/-indicator-li slideComponent=slide data-target=(concat "#" elementId) data-slide-to=index}}
+    {{/each}}
+  </ol>
+{{/if}}
+
 <div class="carousel-inner" role="listbox">
-  {{yield
-    (hash slide=(component "twbs-carousel/slide" register=(action "registerSlideComponent")))
-  }}
+  {{yield (hash slide=(component "twbs-carousel/slide" register=(action "registerSlideComponent")))}}
 </div>
+
 <a class="left carousel-control" href="#{{elementId}}" role="button" data-slide="prev">
   <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
diff --git a/addon/templates/components/twbs-carousel/-indicator-li.hbs b/addon/templates/components/twbs-carousel/-indicator-li.hbs
new file mode 100644
index 0000000..889d9ee
--- /dev/null
+++ b/addon/templates/components/twbs-carousel/-indicator-li.hbs
@@ -0,0 +1 @@
+{{yield}}
diff --git a/addon/templates/components/twbs-carousel/slide.hbs b/addon/templates/components/twbs-carousel/slide.hbs
index 7ff5a34..e0f37b4 100644
--- a/addon/templates/components/twbs-carousel/slide.hbs
+++ b/addon/templates/components/twbs-carousel/slide.hbs
@@ -1 +1,6 @@
-{{yield (hash img=(component "twbs-carousel/slide/img" register=(action "registerImgComponent")))}}
+{{yield
+  (hash
+    img=(component "twbs-carousel/slide/img" register=(action "registerImgComponent"))
+    caption=(component "twbs-carousel/slide/caption")
+  )
+}}
diff --git a/addon/templates/components/twbs-carousel/slide/caption.hbs b/addon/templates/components/twbs-carousel/slide/caption.hbs
new file mode 100644
index 0000000..889d9ee
--- /dev/null
+++ b/addon/templates/components/twbs-carousel/slide/caption.hbs
@@ -0,0 +1 @@
+{{yield}}
diff --git a/app/components/twbs-carousel/-indicator-li.js b/app/components/twbs-carousel/-indicator-li.js
new file mode 100644
index 0000000..cdf97eb
--- /dev/null
+++ b/app/components/twbs-carousel/-indicator-li.js
@@ -0,0 +1 @@
+export { default } from 'ember-cli-bootstrap3-carousel/components/twbs-carousel/-indicator-li';
\ No newline at end of file
diff --git a/app/components/twbs-carousel/slide/caption.js b/app/components/twbs-carousel/slide/caption.js
new file mode 100644
index 0000000..edbf321
--- /dev/null
+++ b/app/components/twbs-carousel/slide/caption.js
@@ -0,0 +1 @@
+export { default } from 'ember-cli-bootstrap3-carousel/components/twbs-carousel/slide/caption';
\ No newline at end of file
diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
index c60389a..3270828 100644
--- a/tests/dummy/app/templates/index.hbs
+++ b/tests/dummy/app/templates/index.hbs
@@ -113,6 +113,56 @@
   <hr/>
 </section>
 
+<section class="container">
+  <h3>Carousel With Indicators</h3>
+
+  <div class="row">
+    <div class="col-sm-6">
+      {{#twbs-carousel indicators?=true as |carousel|}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+With+Indicators+1"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+With+Indicators+2"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide classNames="active" as |slide|}}
+          {{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+With+Indicators+3"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+With+Indicators+4"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+With+Indicators+5"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+      {{/twbs-carousel}}
+    </div>
+    <div class="col-sm-6">
+      {{!-- @formatter:off --}}
+<pre>\{{#twbs-carousel indicators?=true as |carousel|}}
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+With+Indicators+1" alt="A slide image."}}
+  \{{/carousel.slide}}
+  ...
+  \{{#carousel.slide classNames="active" as |slide|}}
+    \{{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+With+Indicators+3" alt="A slide image."}}
+  \{{/carousel.slide}}
+  ...
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+With+Indicators+5" alt="A slide image."}}
+  \{{/carousel.slide}}
+\{{/twbs-carousel}}
+</pre>
+{{!-- @formatter:on --}}
+    </div>
+  </div>
+  <hr/>
+</section>
+
 <section class="container">
   <h3>Sliding Carousel With Lazy Loaded Images</h3>
 
@@ -171,6 +221,65 @@
   <hr/>
 </section>
 
+<section class="container">
+  <h3>Carousel With Captions</h3>
+
+  <div class="row">
+    <div class="col-sm-6">
+      {{#twbs-carousel classNames="slide" as |carousel|}}
+        {{#carousel.slide classNames="active" as |slide|}}
+          {{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Caption+1" alt="A slide image."}}
+          {{#slide.caption}}Caption Number One{{/slide.caption}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Caption+2" alt="A slide image."}}
+          {{#slide.caption}}Caption Number Two{{/slide.caption}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Caption+3" alt="A slide image."}}
+          {{#slide.caption}}Caption Number Three{{/slide.caption}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Caption+4" alt="A slide image."}}
+          {{#slide.caption}}Caption Number Four{{/slide.caption}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Caption+5" alt="A slide image."}}
+          {{#slide.caption}}Caption Number Five{{/slide.caption}}
+        {{/carousel.slide}}
+      {{/twbs-carousel}}
+    </div>
+    <div class="col-sm-6">
+      {{!-- @formatter:off --}}
+<pre>\{{#twbs-carousel classNames="slide" as |carousel|}}
+  \{{#carousel.slide classNames="active" as |slide|}}
+    \{{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Animation+1" alt="A slide image."}}
+  \{{/carousel.slide}}
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Animation+2" alt="A slide image."}}
+  \{{/carousel.slide}}
+  ...
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Animation+5" alt="A slide image."}}
+  \{{/carousel.slide}}
+\{{/twbs-carousel}}
+</pre>
+{{!-- @formatter:on --}}
+    </div>
+    <div class="clearfix visible-lg visible-md visible-sm"></div>
+    <div class="col-xs-12">
+      <br/>
+      <div class="alert alert-info">
+        <p>
+          To configure a a carousel that uses a slide animation to transition between slides, simply supply
+          the <code>classNames="slide"</code> class to the <code>\{{twbs-carousel}}</code> component.
+        </p>
+      </div>
+    </div>
+  </div>
+  <hr/>
+</section>
+
 <section class="container">
   <h2>Other Carousel Options</h2>
 
diff --git a/tests/integration/components/twbs-carousel/-indicator-li-test.js b/tests/integration/components/twbs-carousel/-indicator-li-test.js
new file mode 100644
index 0000000..dde6557
--- /dev/null
+++ b/tests/integration/components/twbs-carousel/-indicator-li-test.js
@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('twbs-carousel/-indicator-li', 'Integration | Component | twbs carousel/ indicator li', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{twbs-carousel/-indicator-li}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#twbs-carousel/-indicator-li}}
+      template block text
+    {{/twbs-carousel/-indicator-li}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});
diff --git a/tests/integration/components/twbs-carousel/slide/caption-test.js b/tests/integration/components/twbs-carousel/slide/caption-test.js
new file mode 100644
index 0000000..2328993
--- /dev/null
+++ b/tests/integration/components/twbs-carousel/slide/caption-test.js
@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('twbs-carousel/slide/caption', 'Integration | Component | twbs carousel/slide/caption', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{twbs-carousel/slide/caption}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#twbs-carousel/slide/caption}}
+      template block text
+    {{/twbs-carousel/slide/caption}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});