Carousel implementation

Close #7
ariatemplates · Jul 2, 2014 · 21c00d5 · 21c00d5
1 parent 5ee71b3
commit 21c00d5
Show file tree

Hide file tree

Showing 11 changed files with 772 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -20,16 +20,16 @@ To run the tests:
 
 - run `gulp test`
 
-To use the project in *dev* mode:
+To use the project in **dev** mode:
 
 - run `gulp build` to build it
-- run `gulp play` to build it and start a webserver which watches source files at http://localhost:8000
+- run `gulp play` to build it and start a webserver which watches source files at http://localhost:8080
 - run `gulp play tdd` to work in the TDD mode (i.e. watch source files to build and run all tests)
 
-To use the project in *production* mode:
+To use the project in **production** mode:
 
 - run `gulp` or `gulp package` to package it
-- run `gulp www` to package it and start a webserver at http://localhost:8000
+- run `gulp www` to package it and start a webserver at http://localhost:8080
 
 To clean all files created during builds:
 

diff --git a/demo/carousel/README.md b/demo/carousel/README.md
@@ -1 +1,26 @@
-This is the documentation of the carousel component!
+A carousel component similar to [Bootstrap javascript carousel](http://getbootstrap.com/javascript/#carousel)
+
+#### Attributes ####
+
+| Name | Binding | Type | Default | Description |
+| ---- | ------- | ---- | ------- | ----------- |
+| **index** | 2-way | int | 0 | Index (0-based) of the active slide. |
+| **interval** | 1-way | int | 5000 | The amount of time to delay between automatically cycling an item. If false or negative, carousel will not automatically cycle. |
+| **pause** | none | string | "hover" | Pauses the cycling of the carousel on mouseover and resumes the cycling of the carousel on mouseout. |
+| **wrap** | none | boolean | true | Whether the carousel should cycle continuously or have hard stops. |
+| **noTransition** | none | boolean | false | Whether transitions are activated. |
+
+#### Elements ####
+| Name | Description |  |
+| ---- | ----------- | - |
+| **@slide** | A slide of the carousel. | |
+| **@slide / @body** | The body of the slide, any HTML element. | **Default** |
+| **@slide / @caption** | The caption of the slide, a block of HTML displayed at the bttom center. | Optionnal |
+
+#### Events ####
+
+| Name | Description |
+| ---- | ----------- |
+| **onslidestart** | This event fires immediately when the transition starts. |
+| **onslideend** | This event is fired when the carousel has completed its slide transition. |
+
diff --git a/demo/carousel/demo.hsp b/demo/carousel/demo.hsp
@@ -1,9 +1,43 @@
 var description = require('./README.hsp').description;
-var carouselCpt = require('../../carousel/carousel.hsp').carousel;
+var carousel = require('../../carousel/carousel.hsp').carousel;
 
 {export template demo()}
-    This is a demo of the carousel component!
-    <#carouselCpt />
-    Updated again!
+    {let slideIndex = 0}
+    {let slideInterval = 2000}
+    <#carousel interval="{slideInterval}" index="{slideIndex}">
+        <@slide>
+            <@body>
+                <img style="width: 800px; height: 400px;" src="http://placekitten.com/800/400">
+            </@body>
+            <@caption>
+                <h3>First slide label</h3>
+                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+            </@caption>
+        </@slide>
+        <@slide>
+            <@body>
+                <img style="width: 800px; height: 400px;" src="http://placekitten.com/801/400">
+            </@body>
+            <@caption>
+                <h3>Second slide label</h3>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+            </@caption>
+        </@slide>
+        <@slide>
+            <img style="width: 800px; height: 400px;" src="http://placekitten.com/800/401">
+        </@slide>
+    </#carousel>
+
+    <form role="form">
+        <div class="form-group">
+            <label for="indexField">Index (0-based)</label>
+            <input type="number" class="form-control" id="indexField" value="{slideIndex}">
+        </div>
+        <div class="form-group">
+            <label for="intervalField">Interval (negative number to stop the cycle)</label>
+            <input type="number" class="form-control" id="intervalField" value="{slideInterval}">
+        </div>
+    </form>
+
     <#description />
 {/template}
diff --git a/demo/index.html b/demo/index.html
@@ -6,14 +6,19 @@
         <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
         <link rel="stylesheet" href="./demo.css">
         <title>Hashspace - Bootstrap</title>
-        <script src="http://noder-js.ariatemplates.com/dist/master/noder.min.js" type="text/javascript">
+        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+        <!--[if lt IE 9]>
+            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+        <![endif]-->
+        <script src="http://noder-js.ariatemplates.com/dist/v<%= noderVersion %>/noder.min.js" type="text/javascript">
         {
             packaging: {
                 baseUrl: "/"
             }
         }
         </script>
-        <script src="http://hashspace.ariatemplates.com/dist/<%= version %>/hashspace-noder.min.js" type="text/javascript"></script>
+        <script src="http://hashspace.ariatemplates.com/dist/<%= hspVersion %>/hashspace-noder.min.js" type="text/javascript"></script>
         <% _.forEach(packages, function(name) { %><script src="./<%- name %>.js" type="text/javascript"></script><% }); %>
         <script type="application/x-noder">
             var carousel = require('./demo/carousel/demo.hsp').demo;

diff --git a/gulpfile.js b/gulpfile.js
@@ -22,19 +22,22 @@ var _destFolder = "target";
 var _devFolder = _destFolder + "/dev";
 var _prodFolder = _destFolder + "/prod";
 var hspVersion = require('hashspace/package.json').version;
+var noderVersion = require('gulp-noder/node_modules/noder-js/package.json').version;
 var packages = ['hashspace-bootstrap', 'hashspace-bootstrap-demo'];
 
 var karmaCommonConf = {
     browsers: ['Chrome'],
     files: [
         'src/**/*.+(hsp|js)',
-        'test/**/*.spec.js'
+        'test/**/*.spec.*',
+        './node_modules/sinon/pkg/sinon-ie.js'
     ],
-    frameworks: ['mocha', 'chai', 'hsp', 'commonjs'],
+    frameworks: ['mocha', 'expect', 'hsp', 'commonjs', 'sinon'],
     preprocessors: {
         'src/**/*.hsp': ['hsp-compile', 'commonjs'],
         'src/**/*.js': ['hsp-transpile', 'commonjs'],
         'test/**/*.spec.js': ['commonjs'],
+        'test/**/*.spec.hsp': ['hsp-compile', 'commonjs'],
         './node_modules/hashspace/hsp/**/*.js': ['commonjs']
     },
     commonjsPreprocessor: {
@@ -49,7 +52,7 @@ function startWWWServer(folder) {
 
 function html2hsp() {
     return through2.obj(function(file, encoding, done) {
-        var content = "{export template description()}\r\n" + String(file.contents) + "\r\n{/template}";
+        var content = "{export template description()}\r\n" + String(file.contents).replace(/<table>/g, '<table class="table table-bordered">') + "\r\n{/template}";
         file.contents = new Buffer(content);
         file.path = gutil.replaceExtension(file.path, ".hsp");
         this.push(file);
@@ -66,7 +69,7 @@ gulp.task('clean', ['checkstyle'], function(){
 });
 
 gulp.task('build', ['clean'], function() {
-    gulp.src(['demo/**/*.html', 'demo/**/*.css']).pipe(template({version: hspVersion, packages: []})).pipe(gulp.dest(_devFolder));
+    gulp.src(['demo/**/*.html', 'demo/**/*.css']).pipe(template({hspVersion: hspVersion, noderVersion: noderVersion, packages: []})).pipe(gulp.dest(_devFolder));
     gulp.src('demo/**/*.md').pipe(markdown()).pipe(html2hsp()).pipe(hsp.compile()).pipe(gulp.dest(_devFolder + '/demo'));
     gulp.src('demo/**/*.+(hsp|js)').pipe(hsp.process()).pipe(gulp.dest(_devFolder + '/demo'));
     return gulp.src('src/**/*.+(hsp|js)').pipe(hsp.process()).pipe(gulp.dest(_devFolder));
@@ -77,13 +80,13 @@ gulp.task('test', ['checkstyle'], function (done) {
 });
 
 gulp.task('play', ['clean'], function () {
-    watch({glob: ['demo/**/*.html', 'demo/**/*.css']}, function (files) {
-        files.pipe(template({version: hspVersion, packages: []})).pipe(gulp.dest(_devFolder));
+    watch({glob: 'demo/**/*.+(html|css)'}, function (files) {
+        files.pipe(template({hspVersion: hspVersion, noderVersion: noderVersion, packages: []})).pipe(gulp.dest(_devFolder));
     });
     watch({glob: 'demo/**/*.md'}, function (files) {
         files.pipe(markdown().on('error', gutil.log)).pipe(html2hsp()).pipe(hsp.compile()).pipe(gulp.dest(_devFolder + '/demo'));
     });
-    watch({glob: 'demo/**/*.hsp'}, function (files) {
+    watch({glob: 'demo/**/*.+(hsp|js)'}, function (files) {
         files.pipe(hsp.compile().on('error', gutil.log)).pipe(gulp.dest(_devFolder + '/demo'));
     });
     watch({glob: 'src/**/*.+(hsp|js)'}, function (files) {
@@ -99,7 +102,7 @@ gulp.task('tdd', function (done) {
 
 gulp.task('package', ['build'], function() {
     gulp.src(['demo/**/*.html', 'demo/**/*.css'])
-        .pipe(template({version: hspVersion, packages: packages})).pipe(gulp.dest(_prodFolder));
+        .pipe(template({hspVersion: hspVersion, noderVersion: noderVersion, packages: packages})).pipe(gulp.dest(_prodFolder));
 
     gulp.src([_devFolder + '/**/*.+(hsp|js)', '!' + _devFolder+ '/demo/**/*.*'])
         .pipe(noder.package('/' + _devFolder))

diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "gulp-clean": "~0.3.0",
     "gulp-concat": "~2.2.0",
     "gulp-markdown": "~0.1.2",
-    "gulp-noder": "~0.0.2",
+    "gulp-noder": "~0.0.3",
     "gulp-hashspace": "~0.0.3",
     "gulp-uglify": "~0.3.1",
     "gulp-jshint": "~1.6.3",
@@ -23,8 +23,9 @@
     "karma-mocha": "~0.1.3",
     "karma-commonjs": "~0.0.9",
     "karma-hashspace": "~0.0.2",
-    "chai": "~1.9.1",
-    "karma-chai": "~0.1.0",
+    "karma-sinon": "~1.0.3",
+    "expect.js": "~0.3.1",
+    "karma-expect": "~1.1.0",
     "lodash": "~2.4.1"
   }
 }
diff --git a/src/carousel/carousel.hsp b/src/carousel/carousel.hsp
@@ -1,5 +1,39 @@
 var CarouselController = require("./carousel").CarouselController;
 
 {export template carousel using ctrl:CarouselController}
-    <h1 class="carousel">Hello carousel</h1>
+    <div class="carousel slide" onmouseover="{ctrl.toggleOnHover()}" onmouseout="{ctrl.toggleOnHover()}" onswipe="{ctrl.handleSwipe(event)}">
+        {if ctrl.content.length > 1}
+            <ol class="carousel-indicators">
+                {foreach idx, slide in ctrl.content}
+                    <li class="{'active': idx === ctrl.internalIndex}" onclick="{ctrl.navigate(idx)}"></li>
+                {/foreach}
+            </ol>
+        {/if}
+        <div class="carousel-inner">
+            {foreach idx, slide in ctrl.content}
+                <div class="{'item','active': idx === ctrl.internalIndex,
+                'prev': idx === ctrl.nextIndex && ctrl.ongoingNavigation === "prev",
+                'next': idx === ctrl.nextIndex && ctrl.ongoingNavigation === "next",
+                'left': (idx === ctrl.internalIndex || idx === ctrl.nextIndex) && ctrl.navigationDirection === "left",
+                'right':(idx === ctrl.internalIndex || idx === ctrl.nextIndex) && ctrl.navigationDirection === "right"}">
+                    <#slide.body/>
+                    {if slide.caption}
+                        <div class="carousel-caption">
+                            <#slide.caption/>
+                        </div>
+                    {/if}
+                </div>
+            {/foreach}
+        </div>
+        {if ctrl.content.length > 1 &&  !(!ctrl.wrap && ctrl.internalIndex === 0)}
+            <a class="left carousel-control" onclick="{ctrl.prev()}">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+            </a>
+        {/if}
+        {if ctrl.content.length > 1 && !(!ctrl.wrap && ctrl.internalIndex === (ctrl.content.length - 1))}
+            <a class="right carousel-control" onclick="{ctrl.next()}">
+                <span class="glyphicon glyphicon-chevron-right"></span>
+            </a>
+        {/if}
+    </div>
 {/template}