initial commit

README.md

@@ -0,0 +1,142 @@
+Cell Cursor
+===========
+
+Simple excel like spreadsheet development kit for angualrJs.
+
+  * display table cell cursor like Excel.
+    * user can move cursor by mouse or keyboad.
+  * range selection like Excel.
+  * user can copy range values to Excel.
+  * user can paste range values from Excel.
+  * user can edit cell value.
+  * Easy to extend.
+
+directivs
+---------
+
+### cell-cursor
+
+`cell-cursor="expression"`
+
+  bind cell-cursor.
+  export CellCursor object.
+
+```html
+  <div ng-init="items=[{id:1,name:'apple'},{id:2,name:'orange'},{id:3,name:'banana'}]">
+    <!-- bind CellCursor to scope.x -->
+    <!-- table need tablindex attribute for directive catch keydown events. -->
+    <table tabindex="0" cell-cursor="x">
+    	<tbody><!-- cursor can move in tbody -->
+	    	<tr ng-repeat="i in items">
+	    		<td>{{i.id}}</td>
+	    		<td>{{i.name}}</td>
+	    	</tr>
+	    </tbody>
+    </table>
+    <!-- you can access CellCursor Object -->
+    cursor=[{{x.selected.cursor.row}},{{x.selected.cursor.col}}]
+  </div>
+```
+
+### cell-cursor-copy
+
+`cell-cursor-copy="expression"`
+
+When `copy` called, then set data to clipboard.
+
+```html
+  <div ng-init="items=[{id:1,name:'apple'},{id:2,name:'orange'},{id:3,name:'banana'}]">
+    <table tabindex="0" cell-cursor="x" cell-cursor-copy="x.getSelectedCellValues()|cellCursorToTsv">
+    	<tbody>
+	    	<tr ng-repeat="i in items">
+	    		<!-- if you use ng-model on `td`, getSelectedCellValues() get data by ngModelControll.$viewValue -->
+	    		<td ng-model="i.id">{{i.id}}</td>
+	    		<!-- if you use cell-options on `td`, getSelectedCellValues() get data by getter() -->
+	    		<td cell-cursor-options="{getter:getName(i)}">{{i.name}}</td>
+	    	</tr>
+	    </tbody>
+    </table>
+  </div>
+  <script>
+	function rootCtrl($scope){
+		// create getter
+		$scope.getName=function(i){
+			return function(){
+				return "["+i.name+"]";
+			}
+		}	
+	}
+	</script>
+```
+
+
+### cell-cursor-paste
+
+`cell-cursor-paste="expression"`
+
+When press `ctrl+v` called, then get data from clipboard.
+
+Expression scope has `$data` it is clipboard data.
+
+```html
+  <div ng-init="items=[{id:1,name:'apple'},{id:2,name:'orange'},{id:3,name:'banana'}]">
+    <table tabindex="0" cell-cursor="x" cell-cursor-paste="x.setSelectedCellValues($data)">
+    	<tbody>
+	    	<tr ng-repeat="i in items">
+	    		<!-- if you use ng-model on `td`, setSelectedCellValues() set data by ngModelControll.$setViewValue -->
+	    		<!-- if td has readonly attributes, setSelectedCellValues dose not effect -->
+	    		<td ng-model="i.id" ng-readonly="readonly">{{i.id}}</td>
+	    		<!-- if you use cell-options on `td`, setSelectedCellValues() set data by setter() -->
+	    		<td cell-cursor-options="{setter:setName(i)}">{{i.name}}</td>
+	    	</tr>
+	    </tbody>
+    </table>
+    <button ng-click="readonly=!readonly">readonly({{readonly}})</button>
+  </div>
+  <script>
+	function rootCtrl($scope){
+		// create setter
+		$scope.setName=function(i){
+			return function(v){
+				if(v!="badname"){
+					return i.name=v;
+				}
+			}
+		}
+	}
+	</script>
+```
+
+
+### cell-cursor-options
+
+`cell-cursor-options="expression"`
+
+set option object. set to cell( td or th ) element.
+
+```json
+{
+  "setter":"function: cell value setter",
+  "getter":"function: cell value getter",
+  "model":"string: expression for bind value in scope",
+  "input":"string: querySelector for input element(that has ngModel)",
+  "editor":"string: editor type name. it defined by cellCursorEditorFactory service",
+  "on[event]":"function: called on events"
+}
+```
+
+Order　of　getters/setter definitions is `getter`|`setter` > `bind` > `ngModel`  > `input`.
+
+Event function signeture is `function (event, option:(cell-cursor-options), cellCursorOptionsController, cellCursor, td:HTMLCellElement):boolean`.
+
+event called now `keydown`|`keypress`|`keydown`|`compositionstart`|`compositionupdate`|`compositionend`|`input` only.
+
+```html
+  <div ng-init="items=[{name:'apple'},{name:'orange'},{name:'banana'}]">
+    <table cell-cursor="x">
+    	<tr ng-repeat="i in items"><td cell-cursor-options="{model:'i.name',editor:'text'}">{{i.name}}</td></tr>
+    </table>
+  </div>
+```
+
+

cellCursor.css

@@ -0,0 +1,43 @@
+table.table-data{
+	background: white;
+	border-collapse:collapse;
+  table-layout: fixed;
+}
+
+table.table-data tbody{
+  background-color: white;
+}
+table.table-data tbody td{
+	border:1px dotted lightgray;
+}
+table.table-data tr.area-t > td.area{
+  border-top: 1px solid #9ABAF1;
+}
+table.table-data tr.area-b > td.area{
+  border-bottom: 1px solid #9ABAF1;
+}
+table.table-data td.area.area-l{
+  border-left: 1px solid #9ABAF1;
+}
+table.table-data td.area.area-r{
+  border-right: 1px solid #9ABAF1;
+}
+table.table-data td.area.cursor,
+table.table-data td.cursor{
+  border: 1px solid #9ABAF1;
+	background: #FAFAFF;
+}
+table.table-data.focus td.area.cursor,
+table.table-data.focus td.cursor{
+	background: #FAFAFF;
+  border: 1px solid #4285F4;
+}
+table.table-data td.area{
+	background: #ECF3FF;
+}
+table.table-data thead td{
+	background: #F3F3F3;
+	border-left:1px solid #CCCCCC;
+	border-bottom:1px solid #CCCCCC;
+	text-align: center;
+}