First handsontable gadget.

Credits to Thibaut Frain.

First handsontable gadget.
Credits to Thibaut Frain.
48902d45 · Romain Courteaud · Jérome Perrin · 4be61310 · 48902d45 · 48902d45
Commit 48902d45 authored Jun 05, 2014 by Romain Courteaud Committed by Jérome Perrin Aug 11, 2014
5 changed files
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -195,6 +195,18 @@ module.exports = function (grunt) {
        src: '<%= curl.jquerymobilejs.src_base %>.css',
        relative_dest: 'lib/jquerymobile.css',
        dest: '<%= global_config.dest %>/<%= curl.jquerymobilecss.relative_dest %>'
+      },
+      handsontablejs: {
+        src: 'https://raw.githubusercontent.com/warpech/' +
+          'jquery-handsontable/v0.10.5/dist/jquery.handsontable.js',
+        relative_dest: 'lib/handsontable.js',
+        dest: '<%= global_config.dest %>/<%= curl.handsontablejs.relative_dest %>'
+      },
+      handsontablecss: {
+        src: 'https://raw.githubusercontent.com/warpech/' +
+          'jquery-handsontable/v0.10.5/dist/jquery.handsontable.css',
+        relative_dest: 'lib/handsontable.css',
+        dest: '<%= global_config.dest %>/<%= curl.handsontablecss.relative_dest %>'
 //       },
 //       jqueryuijs: {
 //         src: 'https://code.jquery.com/ui/1.10.4/jquery-ui.js',

--- a/dream/platform/src2/handsontable/handsontable.js
+++ b/dream/platform/src2/handsontable/handsontable.js
+/*global jQuery, rJS, window, JSON */
+
+(function (window, $, rJS, JSON) {
+  "use strict";
+
+  rJS(window)
+    .declareMethod('render', function (content) {
+      var data = JSON.parse(content);
+      return this.getElement()
+        .push(function (element) {
+          $(element).find('.table-container')
+                    .handsontable({data: data});
+        });
+    })
+
+    .declareMethod('getData', function () {
+      return this.getElement()
+        .push(function (element) {
+          var data = $(element).find('.table-container')
+                               .handsontable('getData');
+          return JSON.stringify(data);
+        });
+    });
+}(window, jQuery, rJS, JSON));
--- a/dream/platform/src2/handsontable/index.html
+++ b/dream/platform/src2/handsontable/index.html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="../<%= curl.handsontablecss.relative_dest %>">
+
+    <script src="../<%= curl.jquery.relative_dest %>"></script>
+    <script src="../<%= copy.rsvp.relative_dest %>"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>"></script>
+    <script src="../<%= curl.handsontablejs.relative_dest %>"></script>
+
+    <script src="handsontable.js"></script>
+  </head>
+  <body>
+    <div class="table-container"></div>
+  </body>
+</html>
--- a/dream/platform/src2/handsontable/test.html
+++ b/dream/platform/src2/handsontable/test.html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="../<%= copy.qunitcss.relative_dest %>">
+    
+    <script src="../<%= copy.rsvp.relative_dest %>"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>"></script>
+    <script src="../<%= copy.qunitjs.relative_dest %>"></script>
+    <script src="../<%= curl.jquery.relative_dest %>"></script>
+    <script src="test.js"></script>
+  </head>
+  <body>
+    <div id="qunit"></div>
+    <div id="qunit-fixture"></div>
+  </body>
+</html>
--- a/dream/platform/src2/handsontable/test.js
+++ b/dream/platform/src2/handsontable/test.js
+/*global asyncTest, rJS, JSON, QUnit, jQuery*/
+
+(function (asyncTest, rJS, JSON, QUnit, $) {
+  "use strict";
+  var start = QUnit.start,
+    stop = QUnit.stop,
+    test = QUnit.test,
+    equal = QUnit.equal,
+    sample = JSON.stringify([
+      ["row1", "data11", "data12", "data13"],
+      ["row2", "data21", "data22", "data23"],
+      ["row3", "data31", "data32", "data33"]
+    ]);
+
+  QUnit.config.testTimeout = 5000;
+
+
+  rJS(window).ready(function (g) {
+
+    test("data output is equal to input", function () {
+      var hstable_gadget;
+      stop();
+      g.declareGadget("./index.html", {
+        element: document.querySelector("#qunit-fixture")
+      })
+        .then(function (new_gadget) {
+          hstable_gadget = new_gadget;
+          return hstable_gadget.render(sample);
+        })
+        .then(function () {
+          return hstable_gadget.getData();
+        })
+        .then(function (data) {
+          equal(data, sample);
+        })
+        .always(start);
+    });
+
+    test("the table is displayed", function () {
+      var hstable_gadget;
+      stop();
+      g.declareGadget("./index.html", {
+        element: document.querySelector("#qunit-fixture")
+      })
+        .then(function (new_gadget) {
+          hstable_gadget = new_gadget;
+          return hstable_gadget.render(sample);
+        })
+        .then(function () {
+          var rows = $('table tbody tr');
+          equal(rows.length, 3);
+          equal(rows[0].childNodes.length, 4);
+          equal(rows[0].childNodes[2].innerHTML, 'data12');
+        })
+        .always(start);
+    });
+  });
+
+}(asyncTest, rJS, JSON, QUnit, jQuery));