diff --git a/experiments/outline-editor/editor.css b/experiments/outline-editor/editor.css index 1222f0f..be08e27 100755 --- a/experiments/outline-editor/editor.css +++ b/experiments/outline-editor/editor.css @@ -57,5 +57,5 @@ } .editor div:focus>span, .editor div:focus>textarea { - background: silver; + background: rgba(0,0,0,0.1); } diff --git a/experiments/outline-editor/editor.js b/experiments/outline-editor/editor.js index ed2a6fa..0fe8401 100755 --- a/experiments/outline-editor/editor.js +++ b/experiments/outline-editor/editor.js @@ -31,8 +31,8 @@ var Outline = { // config... // - left_key_expands: false, - right_key_collapses: true, + left_key_collapses: true, + right_key_expands: true, // XXX revise name... @@ -289,18 +289,17 @@ var Outline = { if(this.dom.querySelector('.editor textarea:focus')){ // XXX if at end of element move to next... return } - if(this.left_key_expands){ - this.toggleCollapse(true) - this.get('parent')?.focus() - } else { - evt.shiftKey ? - this.toggleCollapse(true) - : this.get('parent')?.focus() } }, + ;((this.left_key_collapses + || evt.shiftKey) + && this.get().getAttribute('collapsed') == null + && this.get('children').length > 0) ? + this.toggleCollapse(true) + : this.get('parent')?.focus() }, ArrowRight: function(evt){ if(this.dom.querySelector('.editor textarea:focus')){ // XXX if at end of element move to next... return } - if(this.right_key_collapses){ + if(this.right_key_expands){ this.toggleCollapse(false) var child = this.get('children')[0] child?.focus() diff --git a/experiments/outline-editor/index.html b/experiments/outline-editor/index.html index b6f58e1..475aa7b 100755 --- a/experiments/outline-editor/index.html +++ b/experiments/outline-editor/index.html @@ -63,7 +63,7 @@ TODO: - shifting nodes up/down - multiple node selection - serialize/deserialize -- add optional styling to nodes +- add optional text styling to nodes Controls: up - focus node above