initial commit

README.md

@@ -0,0 +1,57 @@
+# adapt-table 
+A presentation component that displays a table. Each table cell can contain text and / or a graphic. For better mobile support, the table can have a fixed width. Users can pan the table horizontally. 
+
+![adapt-table](https://github.com/LearnChamp/sharedAssets/blob/master/assets/adapt-table.gif?raw=true)   
+
+## Installation
+To install the component with the [Adapt CLI](https://github.com/adaptlearning/adapt-cli), run the following from the command line:  
+`adapt install adapt-table`
+
+Alternatively, this component can also be installed by adding the following line of code to the *adapt.json* file:  
+`"adapt-table": "*"`  
+Then running the command:  
+`adapt install`  
+(This second method will reinstall all plug-ins listed in *adapt.json*.)  
+
+Use the [Plug-in Manager](https://github.com/adaptlearning/adapt_authoring/wiki/Plugin-Manager) to use this component in the Adapt authoring tool.
+
+## Settings Overview
+A properly formatted JSON is available in *example.json*
+
+### Row / Column as headings
+Use the `_rowHeaderIndexes` and `_colHeaderIndexes` attributes to set a row or column as a heading. Multiple indexes must be seperated with `,`.
+```json
+"_rowHeaderIndexes": "0,4",
+"_colHeaderIndexes": "0",
+```
+
+### Table min width
+You may define a min width for the table in pixel.   
+`_minWidth`    
+
+### Rows
+Each row can have a css class and a list of cells.  
+
+#### Cells
+
+##### column / row span 
+Wrapps html [colspan](https://www.w3schools.com/tags/att_td_colspan.asp) and [rowspan](https://www.w3schools.com/tags/att_td_rowspan.asp) attribute.  
+
+##### text / graphic 
+Text and or graphic content of the table cell. 
+
+### Fixed colum width 
+**Example:** Set's the second column to 200 pixel.
+```json
+{
+    "_column": 1,
+    "_width": 200
+}
+```
+
+## Limitations
+No Accessibility support.  
+
+----------------------------
+**Author / maintainer:** [LearnChamp](https://github.com/LearnChamp)  
+**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge 12, IE 11, Safari iOS 9+10, Safari OS X 9+10, Opera    

bower.json

@@ -0,0 +1,17 @@
+{
+  "name": "adapt-table",
+  "version": "1.0.0",
+  "repository": "git://github.com/LearnChamp/adapt-table",
+  "framework": ">=2.0.0",
+  "homepage": "",
+  "issues": "",
+  "displayName" : "Table",
+  "component" : "table",
+  "description": "A table Component",
+  "main": "/js/adapt-table.js",
+  "keywords": [
+    "adapt-plugin",
+    "adapt-component"
+  ],
+  "license": ""
+}

example.json

@@ -0,0 +1,81 @@
+	{
+		"_id":"c-05",
+		"_parentId":"b-05",
+		"_type":"component",
+		"_component":"table",
+		"_classes":"",
+		"_layout":"full",
+		"title":"First look: Table",
+		"displayTitle":"Normal Table",
+		"body":"",
+		"instruction":"",
+		"_rowHeaderIndexes": "",
+		"_colHeaderIndexes": "",
+		"_minWidth": 800,
+		"_rows": [
+			{
+				"_classes": "",
+				"_cells": [
+					{
+						"_colSpan": "1",
+						"_rowSpan": "1",
+						"text": "",
+						"_classes": "",
+						"_isHeading": false,
+						"_graphic": {
+							"_src": "",
+							"alt": "",
+							"attribution":""
+						}
+					},
+					{
+						"_colSpan": "1",
+						"_rowSpan": "1",
+						"text": "",
+						"_classes": "",
+						"_isHeading": false,
+						"_graphic": {
+							"_src": "",
+							"alt": "",
+							"attribution":""
+						}
+					}
+				]
+			},
+			{
+				"_classes": "",
+				"_cells": [
+					{
+						"_colSpan": "1",
+						"_rowSpan": "1",
+						"text": "",
+						"_classes": "",
+						"_isHeading": false,
+						"_graphic": {
+							"_src": "",
+							"alt": "",
+							"attribution":""
+						}
+					},
+					{
+						"_colSpan": "1",
+						"_rowSpan": "1",
+						"text": "",
+						"_classes": "",
+						"_isHeading": false,
+						"_graphic": {
+							"_src": "",
+							"alt": "",
+							"attribution":""
+						}
+					}
+				]
+			}
+		],
+		"_columnWidths": [
+			{
+				"_column": 0,
+				"_width": 200
+			}
+		]
+	}

js/adapt-table.js

@@ -0,0 +1,160 @@
+define([
+    'core/js/adapt',
+    'core/js/views/componentView'
+], function(Adapt, ComponentView) {
+
+    var Table = ComponentView.extend({
+
+        events: {
+            "touchstart .component-widget": "handleTouchStart",
+            "mousedown .component-widget": "handleTouchStart"
+        },
+
+        preRender: function() {
+            this.checkIfResetOnRevisit();
+            this.setHeadings();
+            this.setColumnWidths();
+
+            this.listenTo(Adapt, 'device:resize', this.onDeviceResize);
+
+            _.bindAll(this, 'onMouseMove', 'onMouseUp');
+        },
+
+        postRender: function() {
+            this.setupInview();
+
+            this.$componentWidget = this.$('.component-widget');
+            this.$tableWrapper = this.$('.table-wrapper');
+            this.table = this.$('table')[0];
+
+            this.$('.component-widget').imageready(_.bind(function() {
+                this.setReadyStatus();
+                this.onDeviceResize(Adapt.device.screenWidth);
+            }, this));
+        },
+
+        setupInview: function() {
+            this.$('.component-widget').on('inview', _.bind(this.inview, this));
+        },
+
+        setHeadings: function() {
+            var rowHeaderIndexArray = JSON.parse("[" + this.model.get('_rowHeaderIndexes') + "]");
+            var rows = this.model.get('_rows');
+            var colHeaderIndexArray = JSON.parse("[" + this.model.get('_colHeaderIndexes') + "]");
+
+            for (var i = 0; i < rows.length; i++) {
+                for (var j = 0; j < rows[i]._cells.length; j++) {
+                    if (rowHeaderIndexArray.indexOf(i) !== -1 || colHeaderIndexArray.indexOf(j) !== -1) {
+                        rows[i]._cells[j]._isHeading = true;
+                    }
+                }
+            }
+        },
+
+        setColumnWidths: function() {
+            var columnWidths = this.model.get('_columnWidths');
+            var rows = this.model.get('_rows');
+
+            if (!columnWidths) {
+                return;
+            }
+
+            for (var i = 0; i < columnWidths.length; i++) {
+                var colSpans = 0;
+                for (var j = 0; j < columnWidths[i]._column; j++) {
+                    colSpans += rows[0]._cells[j]._colSpan - 1;
+                }
+
+                rows[0]._cells[columnWidths[i]._column - colSpans]._width = columnWidths[i]._width;
+            }
+        },
+
+        checkIfResetOnRevisit: function() {
+            var isResetOnRevisit = this.model.get('_isResetOnRevisit');
+
+            // If reset is enabled set defaults
+            if (isResetOnRevisit) {
+                this.model.reset(isResetOnRevisit);
+            }
+        },
+
+        inview: function(event, visible, visiblePartX, visiblePartY) {
+            if (visible) {
+                if (visiblePartY === 'top') {
+                    this._isVisibleTop = true;
+                } else if (visiblePartY === 'bottom') {
+                    this._isVisibleBottom = true;
+                } else {
+                    this._isVisibleTop = true;
+                    this._isVisibleBottom = true;
+                }
+
+                if (this._isVisibleTop && this._isVisibleBottom) {
+                    this.$('.component-widget').off('inview');
+                    this.setCompletionStatus();
+                }
+            }
+        },
+
+        onDeviceResize: function(deviceWidth) {
+            var minW = this.model.get('_minWidth');
+            if (this.$componentWidget.width() < minW) {
+                this.$el.addClass('scroll');
+            } else {
+                this.$el.removeClass('scroll');
+            }
+            this.$tableWrapper.css('height', this.table.getBoundingClientRect().height+'px');
+        },
+
+        handleTouchStart: function(event) {
+            if (event.type === "touchstart") {
+                // ignore touch gestures since scrolling should work just fine
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+                event.originalEvent.stopPropagation();
+                event.originalEvent.stopImmediatePropagation();
+                this._touchFired = true;
+                return;
+            }
+
+            if (this._touchFired) return;
+            this._touchFired = false;
+
+            this.startX = event.clientX;
+            this.scrollLeft = this.$componentWidget[0].scrollLeft;
+
+            // setup required MOUSE - handler
+            this.setupMouseEvents();
+        },
+
+        setupMouseEvents: function() {
+            $(document).on('mousemove', this.onMouseMove);
+            $(document).one('mouseup', this.onMouseUp);
+        },
+
+        onMouseMove: function(event) {
+            var delta = this.scrollLeft + this.startX - event.clientX;
+            this.$componentWidget[0].scrollLeft = delta;
+        },
+
+        onMouseUp: function(event) {
+            $(document).off('mousemove', this.onMouseMove);
+        },
+
+        remove: function() {
+            this.$('.component-widget').off('inview');
+
+            $(document).off('mousemove', this.onMouseMove);
+            $(document).off('mouseup', this.onMouseUp);
+
+            ComponentView.prototype.remove.call(this);
+        }
+    },
+    {
+        template: 'table'
+    });
+
+    Adapt.register('table', Table);
+
+    return Table;
+});

less/table.less

@@ -0,0 +1,56 @@
+.table-inner {
+	@table-border-color: @foreground-color;
+	@table-header-background-color: @background-color-inverted;
+	@table-header-color: @foreground-color-inverted;
+
+	.table-wrapper {
+		overflow: hidden;
+	}
+
+	.table-widget {
+
+		overflow-x: auto;
+
+
+		table, th, td {
+			border: 1px solid @table-border-color;
+			padding-bottom: @item-padding/2;
+			table-layout: fixed;
+		}
+
+		table {
+			width: 100%;
+			border: 1px solid @table-border-color;
+			-webkit-user-select: none;
+			-moz-user-select: none;
+			-ms-user-select: none;
+			user-select: none;
+
+			tr {
+
+				th {
+					border: 1px solid @table-border-color;
+					text-align: center;
+					vertical-align: middle;
+					padding: @item-padding;
+					background-color: @table-header-background-color;
+					color: @table-header-color;
+				}
+
+				td {
+					border: 1px solid @table-border-color;
+					text-align: center;
+					vertical-align: middle;
+					padding: @item-padding;
+				}
+
+				img {
+					-webkit-user-select: none;
+					-moz-user-select: none;
+					-ms-user-select: none;
+					user-select: none;
+				}
+			}
+		}
+	}
+}