add movable ability on aha-table.

Author: liuwenchao

README.md

@@ -1,6 +1,6 @@
 # <aha-table> ![Bower Version](https://badge.fury.io/bo/aha-table.svg)
 
-> A Polymer element for a searchable, sortable, paginatable, inline-editable, selectable, copyable, removable table/grid.
+> A Polymer element for a searchable, sortable, paginatable, inline-editable, selectable, copyable, removable, movable table/grid.
 
 ## Demo
 
@@ -43,6 +43,8 @@ Or [download as ZIP](https://github.com/liuwenchao/aha-table/archive/master.zip)
     <aha-table
           selectable
           copyable
+          removable
+          movable
           seachable
           pagesize="20" 
           pagesizetitle="Page Size:" 
@@ -71,12 +73,15 @@ Attribute       | Options       | Default   | Description
 `searchable`    | *Boolean*     | False      | if search row is displayed
 `copyable`      | *Boolean*     | False      | if copy handler is displayed
 `removable`     | *Boolean*     | False      | if remove handler is displayed
+`movable`       | *Boolean*     | False      | if move up/down handler is displayed
 `pagesize`      | *Number*      | 10        | record set size for each page
 `data-sizelist` | *Array*       | [5, 10, 20, 50, 100]      | list for page size dropdown
 `selecttitle`   | *String*      | undefined | title for select checkbox
 `selectalltitle`| *String*      | undefined | title for selectall checkbox
 `copytitle`     | *String*      | undefined | title for copy indicator
-`deletetitle`   | *String*      | undefined | title for remove indicator
+`removetitle`   | *String*      | undefined | title for remove indicator
+`movedowntitle` | *String*      | undefined | title for move down indicator
+`moveuptitle`   | *String*      | undefined | title for move up indicator
 `sorttitle`     | *String*      | undefined | title for sortable column
 `edittitle`     | *String*      | undefined | title for editable data cell
 `searchtitle`   | *String*      | undefined | title for search filter row toggler
@@ -104,6 +109,10 @@ Name                    | Arguments | Description
 `after-copy`            | `Event`   | call after a record is copyed from another internally
 `before-remove`         | `Event`   | call before a record is removed internally
 `after-remove`          | `Event`   | call after a record is removed internally
+`before-move-down`      | `Event`   | call before a record is moved down
+`after-move-down`       | `Event`   | call after a record is moved down
+`before-move-up`        | `Event`   | call before a record is moved up
+`after-move-up`         | `Event`   | call after a record is moved up
 
 
 ## &lt;aha-column&gt;
@@ -157,7 +166,7 @@ In order to run it locally you'll need to fetch some dependencies and a basic se
 3. To test your project, start the development server and open `http://localhost:8000`.
 
     ```sh
-    $ grunt
+    $ grunt server
     ```
 
 4. Once you finish developing it, build the distribution files and publish it on Bower.

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "aha-table",
-  "version": "1.1.0",
-  "description": "Polymer Element for aha-table, a searchable, sortable, editable, selectable, paginatable, copyable, removeable table/grid.",
+  "version": "1.1.1",
+  "description": "Polymer Element for aha-table, a searchable, sortable, editable, selectable, paginatable, copyable, removeable, movable table/grid.",
   "authors": [
     "Louis Liu"
   ],

demo/theme-shim.css

@@ -61,6 +61,8 @@
 #themed .search,
 #themed .nosearch,
 #themed .copy-er i,
+#themed .move-down-er i,
+#themed .move-up-er i,
 #themed .remove-er i
  {
   border: 0;
@@ -88,4 +90,10 @@
 }
 #themed .remove-er i:before {
   content:"\f014";
+}
+#themed .move-down-er i:before {
+  content:"\f063";
+}
+#themed .move-up-er i:before {
+  content:"\f062";
 }

demo/theme.css

@@ -61,6 +61,8 @@
 #themed::shadow .search,
 #themed::shadow .nosearch,
 #themed::shadow .copy-er i,
+#themed::shadow .move-down-er i,
+#themed::shadow .move-up-er i,
 #themed::shadow .remove-er i
  {
   border: 0;
@@ -88,4 +90,10 @@
 }
 #themed::shadow .remove-er i:before {
   content:"\f014";
+}
+#themed::shadow .move-down-er i:before {
+  content:"\f063";
+}
+#themed::shadow .move-up-er i:before {
+  content:"\f062";
 }

index.html

@@ -36,6 +36,7 @@ <h2>Advanced usage: themed, customized columns, customized attributes, customize
 		searchable
 		copyable
 		removable
+		movable
 
 		pagesize="5" 
 		data-sizelist="[2,5,10]"
@@ -53,6 +54,8 @@ <h2>Advanced usage: themed, customized columns, customized attributes, customize
 		edittitle="click to edit"
 		copytitle="click to copy"
 		removetitle="click to remove"
+		movedowntitle="move down"
+		moveuptitle="move up"
 		searchtitle="click to show/hide search filters bar"
 		firsttitle="First"
 		previoustitle="Previous"
@@ -173,6 +176,12 @@ <h2><a href="demo/performance.html">Performance Test</a></h2>
 		themed.addEventListener('after-copy', function(e) {
 			table_log('copied one record!');
 		});
+		themed.addEventListener('after-move-down', function(e) {
+			table_log('moved one record down!');
+		});
+		themed.addEventListener('after-move-up', function(e) {
+			table_log('moved one record up!');
+		});
 	</script>
 </body>
 </html>

src/aha-table.html

@@ -17,20 +17,22 @@
  *     <aha-table></aha-table>
  *
  *     <aha-table id="raw" 
- *         selectable="true" 
- *         copyable="true"
- *         seachable="true"
+ *         selectable
+ *         copyable
+ *         removable
+ *         movable
+ *         seachable
  *         pagesize="20" 
  *         pagesizetitle="Page Size:" 
  *         summarytitle="Viewing">
  *         <aha-column name="title" 
  *             type="string" 
  *             label="My Title"
- *             sortable="true"
- *             searchable="true"
- *             required="true"
- *             editable="false"
- *             placeholder="" 
+ *             sortable
+ *             searchable
+ *             required
+ *             editable
+ *             placeholder="Example text" 
  *             default="" 
  *             hint="Meaning title will help you remember">
  *         </aha-column>
@@ -43,6 +45,8 @@
  *     after-create(Object new_record)
  *     after-copy(Object new_record)
  *     after-remove(Object removed_record)
+ *     after-move-down(Object moved_record)
+ *     after-move-up(Object moved_record)
  *
  * @class aha-table
  * @author Louis Liu<[email protected]>
@@ -53,9 +57,9 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
 
 <polymer-element name="aha-table" attributes="
-selectable searchable copyable removable
+selectable searchable copyable removable movable
 pagesize data-sizelist
-selecttitle selectalltitle sorttitle columntitle copytitle removetitle edittitle searchtitle firsttitle nexttitle previoustitle lasttitle
+selecttitle selectalltitle sorttitle columntitle copytitle removetitle movedowntitle  moveuptitle edittitle searchtitle firsttitle nexttitle previoustitle lasttitle
 pagetext pageoftext pagesizetext summarytext itemoftext
 ">
 	<template>
@@ -96,6 +100,8 @@
 				border-top: 5px solid black;
 			}
 			.copy-er, 
+			.move-down-er,
+			.move-up-er,
 			.remove-er {
 				cursor: pointer;
 			}
@@ -105,6 +111,12 @@
 			.remove-er i:before {
 				content: '-';
 			}
+			.move-down-er i:before {
+				content: '\2193';
+			}
+			.move-up-er i:before {
+				content: '\2191';
+			}
 			.hint:before {
 				content: 'i';
 			}
@@ -222,6 +234,16 @@
 							title="{{ removetitle }}">
 							<i></i>
 						</a>
+						<a class="move-down-er {{ movable ? '' : 'hide' }}" 
+							on-click="{{movedown}}" 
+							title="{{ movedowntitle }}">
+							<i></i>
+						</a>
+						<a class="move-up-er {{ movable ? '' : 'hide' }}" 
+							on-click="{{moveup}}" 
+							title="{{ moveuptitle }}">
+							<i></i>
+						</a>
 					</td>
 					<td template 
 						repeat="{{ column in meta }}" 
@@ -347,6 +369,8 @@
 		copyable: false,
 		//removable: if table row is removable
 		removable: false,
+		//movable: if table row is movable
+		movable: false,
 		//searchable: if table row is searchable
 		searchable: false,
 		// text displayed in first column of search row.
@@ -363,6 +387,10 @@
 		copytitle: "",
 		// text displayed as title of remove checkbox..
 		removetitle: "",
+		// text displayed as title of move up indicator.
+		moveuptitle: "",
+		// text displayed as title of move down indicator.
+		movedowntitle: "",
 		// text displayed as title of editable cell.
 		edittitle: "",
 		//sortedColumn: sorted column name
@@ -507,6 +535,10 @@
 
 			this.refreshPagination();
 		},
+		unsort: function() {
+			this.sortedColumn = "";
+			this.refreshPagination();
+		},
 		search: function(e, p) {
 			if(e.target.templateInstance.model.column){
 				var searchedColumn = e.target.templateInstance.model.column.name;
@@ -730,12 +762,46 @@
 			}
 			this.fire('after-remove', obj);
 		},
+		movedown: function(e) {
+			var obj = e.target.templateInstance.model.row;
+			this.fire('before-move-down', obj);
+			if (this.sortedColumn) {
+				this.unsort();
+			}
+			this.data.movedown(obj);
+			this.fire('after-move-down', obj);
+		},
+		moveup: function(e) {
+			var obj = e.target.templateInstance.model.row;
+			this.fire('before-move-up', obj);
+			if (this.sortedColumn) {
+				this.unsort();
+			}
+			this.data.moveup(obj);
+			this.fire('after-move-up', obj);
+		},
 		toggleFilters: function() {
 			this.searchable = !this.searchable;
 		}
 	});
 
 	// Private methods
+	Array.prototype.moveup = function (obj) {
+		var index = this.indexOf(obj);
+		if (index > 0) {
+			this[index] = this[index-1];
+			this[index-1] = obj;
+		}
+		return this;
+	}
+	Array.prototype.movedown = function (obj) {
+		var index = this.indexOf(obj);
+		if (index > -1 && index < this.length - 1) {
+			this[index] = this[index+1];
+			this[index+1] = obj;
+		}
+		return this;
+	}
 	</script>
 </polymer-element>
 
@@ -750,11 +816,11 @@
  *    <aha-column 
  *         name="content"
  *         type="text"
- *         sortable="true"
- *         searchable="true"
- *         required="true"
- *         editable="true"
- *         placeholder="" 
+ *         sortable
+ *         searchable
+ *         required
+ *         editable
+ *         placeholder="example" 
  *         default="">
  *    </aha-column>
  *