initial slidebox implementation. closes #5

README.md

@@ -91,7 +91,7 @@ You can also keep track of the various other repos from the [Meteoric team](http
   * [ ] expose-aside-when (not sure this is needed)
   * [x] menu-toggle
   * [x] menu-close
-* [ ] Slide Box
+* [x] Slide Box
 * [x] Tabs (requires [iron:router](https://github.com/EventedMind/iron-router) integration)
   * [x] ion-tabs
   * [x] ion-tab

components/ionSlide/ionSlide.html

@@ -0,0 +1,5 @@
+<template name="ionSlide">
+  <div class="{{classes}}">
+    {{> UI.contentBlock}}
+  </div>
+</template>

components/ionSlide/ionSlide.js

@@ -0,0 +1,11 @@
+Template.ionSlide.helpers({
+  classes: function () {
+    var classes = ['ion-slide'];
+
+    if (this.class) {
+      classes.push(this.class);
+    }
+
+    return classes.join(' ');
+  }
+});

components/ionSlideBox/ionSlideBox.html

@@ -0,0 +1,5 @@
+<template name="ionSlideBox">
+  <div class="ion-slide-box">
+    {{> UI.contentBlock}}
+  </div>
+</template>

components/ionSlideBox/ionSlideBox.js

@@ -0,0 +1,29 @@
+Template.ionSlideBox.created = function () {
+  this.data = this.data || {};
+  this.doesContinue = this.data.doesContinue || false;
+  this.autoPlay = this.data.autoPlay || false;
+  this.slideInterval = this.data.slideInterval || 4000;
+  this.showPager = typeof this.data.showPager != 'undefined' ? this.data.showPager : true;
+};
+
+Template.ionSlideBox.rendered = function () {
+  this.$('.ion-slide-box').slick({
+    infinite: this.doesContinue,
+    autoplay: this.autoPlay,
+    autoplaySpeed: this.slideInterval,
+    arrows: false,
+    dots: this.showPager,
+    dotsClass: 'slider-pager',
+    customPaging: function(slider, i) {
+      return '<span class="slider-pager-page icon ion-record"></span>';
+    }
+  });
+
+  this.$('.ion-slide-box').on('afterChange', function (event, slick, currentSlide) {
+    $(this).trigger({type: 'onSlideChanged', index: currentSlide});
+  });
+};
+
+Template.ionSlideBox.destroyed = function () {
+  this.$('.ion-slide-box').unslick();
+};

package.js

@@ -15,7 +15,9 @@ Package.onUse(function(api) {
 
   api.addFiles([
     "vendor/snap.js",
-    "vendor/snap.css"
+    "vendor/snap.css",
+    "vendor/slick.js",
+    "vendor/slick.css"
   ], "client");
 
   api.addFiles([
@@ -87,6 +89,12 @@ Package.onUse(function(api) {
     "components/ionSideMenus/ionSideMenus.html",
     "components/ionSideMenus/ionSideMenus.js",
 
+    "components/ionSlideBox/ionSlideBox.html",
+    "components/ionSlideBox/ionSlideBox.js",
+
+    "components/ionSlide/ionSlide.html",
+    "components/ionSlide/ionSlide.js",
+
     "components/ionSubfooterBar/ionSubfooterBar.html",
     "components/ionSubfooterBar/ionSubfooterBar.js",
 

vendor/slick.css

@@ -0,0 +1,125 @@
+/* Slider */
+.slick-slider
+{
+    position: relative;
+    height: 100%;
+    display: block;
+
+    -moz-box-sizing: border-box;
+         box-sizing: border-box;
+
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -ms-touch-action: pan-y;
+        touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list
+{
+    position: relative;
+    height: 100%;
+    display: block;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+}
+.slick-list:focus
+{
+    outline: none;
+}
+.slick-list.dragging
+{
+    cursor: pointer;
+    cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list
+{
+    -webkit-transform: translate3d(0, 0, 0);
+       -moz-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+         -o-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+}
+
+.slick-track
+{
+    position: relative;
+    top: 0;
+    left: 0;
+
+    display: block;
+
+    height: 100%;
+}
+.slick-track:before,
+.slick-track:after
+{
+    display: table;
+
+    content: '';
+}
+.slick-track:after
+{
+    clear: both;
+}
+.slick-loading .slick-track
+{
+    visibility: hidden;
+}
+
+.slick-slide
+{
+    display: none;
+    float: left;
+
+    height: 100%;
+    min-height: 1px;
+}
+[dir='rtl'] .slick-slide
+{
+    float: right;
+}
+.slick-slide img
+{
+    display: block;
+}
+.slick-slide.slick-loading img
+{
+    display: none;
+}
+.slick-slide.dragging img
+{
+    pointer-events: none;
+}
+.slick-initialized .slick-slide
+{
+    display: block;
+}
+.slick-loading .slick-slide
+{
+    visibility: hidden;
+}
+.slick-vertical .slick-slide
+{
+    display: block;
+
+    height: auto;
+
+    border: 1px solid transparent;
+}
+
+/*Meteoric hack:*/
+.slider-pager li {
+  display: inline;
+}
+.slider-pager .slick-active .slider-pager-page {
+  opacity: 1;
+}