#5 carousel indicators and captions.

cybertoothca · Feb 7, 2017 · a2c0edf · a2c0edf
1 parent bb4b58f
commit a2c0edf
Show file tree

Hide file tree

Showing 13 changed files with 207 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1 @@
+{{yield}}
diff --git 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
@@ -0,0 +1 @@
+{{yield}}
diff --git a/app/components/twbs-carousel/-indicator-li.js b/app/components/twbs-carousel/-indicator-li.js
@@ -0,0 +1 @@
+export { default } from 'ember-cli-bootstrap3-carousel/components/twbs-carousel/-indicator-li';
diff --git a/app/components/twbs-carousel/slide/caption.js b/app/components/twbs-carousel/slide/caption.js
@@ -0,0 +1 @@
+export { default } from 'ember-cli-bootstrap3-carousel/components/twbs-carousel/slide/caption';
diff --git 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
@@ -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
@@ -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');
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default } from 'ember-cli-bootstrap3-carousel/components/twbs-carousel/-indicator-li';