Merge pull request wymeditor#256 from winhamwr/issue_239

Fix for wymeditor#239: Added a list plugin that enables tab key indent for lists
winhamwr · Jun 24, 2011 · c9808cd · c9808cd
2 parents 464b811 + c66e175
commit c9808cd
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 9 deletions.
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
@@ -17,6 +17,18 @@
 Enhancements
 ---------------
 
+* A list plugin is now available that enables tab for list indent and
+  shift + tab for list outdent.
+
+  It is available at ``wymeditor/plugins/list/jquery.wymeditor.list.js``.
+  To enable the plugin, create a ListPlugin object via the 	
+  ``wymeditor.postInit`` option. eg::
+
+  $('.wymeditor').wymeditor({
+      postInit: function(wym) {
+          var listPlugin = new ListPlugin({}, wym);
+      }
+  }); 
 
 .. _v1-0-0dev-bugfixes:
 

diff --git a/src/test/unit/index.html b/src/test/unit/index.html
@@ -33,6 +33,7 @@
 <!-- plugins -->
 <script type="text/javascript" src="../../wymeditor/plugins/rangy/rangy-core.js"></script>
 <script type="text/javascript" src="../../wymeditor/plugins/embed/jquery.wymeditor.embed.js"></script>
+<script type="text/javascript" src="../../wymeditor/plugins/list/jquery.wymeditor.list.js"></script>
 
 <script type="text/javascript" src="qunit.js"></script>
 

diff --git a/src/test/unit/lists.js b/src/test/unit/lists.js
@@ -1,5 +1,5 @@
 function runListTests() {
-	module("Lists");
+	module("list-indent_outdent");
 
 	/**
 	* Run a list manipulation and verify the results.
@@ -306,6 +306,8 @@ function runListTests() {
 		testList('li_4', 'outdent', li_4_indentedHtml, nestedListHtml);
 	});
 
+	module("list-correction");
+
 	test("Should correct invalid list nesting", function() {
 		expect(2);
 
@@ -324,4 +326,73 @@ function runListTests() {
 		htmlEquals(wymeditor, expected);
 	});
 
+	module("list-tabbing");
+
+	test("Tab key indents", function() {
+		expect(2);
+
+		var initHtml = nestedListHtml;
+		var expectedHtml = li_7_indentedHtml;
+		var elmntId = "li_7";
+
+		var wymeditor = jQuery.wymeditors(0);
+		wymeditor.html(initHtml);
+
+		var $body = $(wymeditor._doc).find('body.wym_iframe');
+		var actionElement = $body.find('#'+elmntId)[0];
+
+		moveSelector(wymeditor, actionElement);
+
+		simulateKey(WYMeditor.KEY.TAB, actionElement);
+		htmlEquals(wymeditor, expectedHtml)
+	});
+
+	test("Shift+Tab outdents", function() {
+		expect(2);
+
+		var initHtml = '' +
+		'<ol>' +
+			'<ol>' +
+				'<li id="li_1_1">1_1</li>' +
+			'</ol>' +
+			'<li id="li_2">2</li>' +
+		'</ol>';
+		var expectedHtml = '' +
+		'<ol>' +
+			'<li id="li_1_1">1_1</li>' +
+			'<li id="li_2">2</li>' +
+		'</ol>';
+
+		var elmntId = "li_1_1";
+
+		var wymeditor = jQuery.wymeditors(0);
+		wymeditor.html(initHtml);
+
+		var $body = $(wymeditor._doc).find('body.wym_iframe');
+		var actionElement = $body.find('#'+elmntId)[0];
+
+		moveSelector(wymeditor, actionElement);
+
+		simulateKey(WYMeditor.KEY.TAB, actionElement, {'shiftKey': true});
+		htmlEquals(wymeditor, expectedHtml)
+	});
+
+	test("Tab has no effect outside lists", function() {
+		expect(2);
+
+		var initHtml = '<p id="p_1">test</p>';
+		var expectedHtml = initHtml;
+		var elmntId = "p_1";
+
+		var wymeditor = jQuery.wymeditors(0);
+		wymeditor.html(initHtml);
+
+		var $body = $(wymeditor._doc).find('body.wym_iframe');
+		var actionElement = $body.find('#'+elmntId)[0];
+
+		moveSelector(wymeditor, actionElement);
+
+		simulateKey(WYMeditor.KEY.TAB, actionElement);
+		htmlEquals(wymeditor, expectedHtml)
+	});
 }
diff --git a/src/test/unit/test.js b/src/test/unit/test.js
@@ -4,7 +4,10 @@ test("Instantiate", function() {
 	expect(2);
 	jQuery('.wymeditor').wymeditor({
 		stylesheet: 'styles.css',
-		postInit: function() { runPostInitTests() }
+		postInit: function(wym) {
+			var listPlugin = new ListPlugin({}, wym);
+			runPostInitTests();
+		}
 	});
 	equals( WYMeditor.INSTANCES.length, 1, "WYMeditor.INSTANCES length" );
 	equals( typeof(jQuery.wymeditors(0)), 'object', "Type of first WYMeditor instance, using jQuery.wymeditors(0)" );

diff --git a/src/wymeditor/jquery.wymeditor.js b/src/wymeditor/jquery.wymeditor.js
@@ -219,6 +219,7 @@ jQuery.extend(WYMeditor, {
 
     KEY : {
       BACKSPACE: 8,
+      TAB: 9,
       ENTER: 13,
       CTRL: 17,
       END: 35,

diff --git a/src/wymeditor/jquery.wymeditor.safari.js b/src/wymeditor/jquery.wymeditor.safari.js
@@ -79,22 +79,27 @@ WYMeditor.WymClassSafari.prototype._exec = function(cmd,param) {
 
     case WYMeditor.INDENT: case WYMeditor.OUTDENT:
 
+        var focusNode = this.selected();
         var sel = this._iframe.contentWindow.getSelection();
         var anchorNode = sel.anchorNode;
-        if(anchorNode.nodeName == "#text") anchorNode = anchorNode.parentNode;
+        if (anchorNode.nodeName == "#text") {
+            anchorNode = anchorNode.parentNode;
+        }
 
         focusNode = this.findUp(focusNode, WYMeditor.BLOCKS);
         anchorNode = this.findUp(anchorNode, WYMeditor.BLOCKS);
 
-        if(focusNode && focusNode == anchorNode &&
-          focusNode.tagName.toLowerCase() == WYMeditor.LI) {
+        if (focusNode && focusNode == anchorNode
+            && focusNode.tagName.toLowerCase() == WYMeditor.LI) {
 
             var ancestor = focusNode.parentNode.parentNode;
 
-            if(focusNode.parentNode.childNodes.length>1 ||
-              ancestor.tagName.toLowerCase() == WYMeditor.OL ||
-              ancestor.tagName.toLowerCase() == WYMeditor.UL)
-                this._doc.execCommand(cmd,'',null);
+            if (focusNode.parentNode.childNodes.length > 1
+                || ancestor.tagName.toLowerCase() == WYMeditor.OL
+                || ancestor.tagName.toLowerCase() == WYMeditor.UL) {
+
+                this._doc.execCommand(cmd, '', null);
+            }
         }
 
     break;

diff --git a/src/wymeditor/plugins/list/jquery.wymeditor.list.js b/src/wymeditor/plugins/list/jquery.wymeditor.list.js
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2011 PolicyStat LLC.
+ * MIT licensed (MIT-license.txt)
+ *
+ * This plugin adds the ability to use tab and shift+tab to indent/outdent
+ * lists, mimicking a user's expected behavior when inside an editor.
+ *
+ * @author Wes Winham (winhamwr@gmail.com)
+ */
+
+function ListPlugin(options, wym) {
+    this._options = jQuery.extend({}, options);
+    this._wym = wym;
+
+    this.init();
+}
+
+ListPlugin.prototype.init = function() {
+    this._wym.listPlugin = this;
+
+    this.bindEvents();
+}
+
+ListPlugin.prototype.bindEvents = function() {
+    var listPlugin = this;
+    var wym = this._wym;
+
+    // Bind a key listener so we can handle tabs
+    // With jQuery 1.3, live() can be used to simplify handler logic
+    $(wym._doc).bind('keydown', listPlugin.handleKeyDown);
+}
+
+/**
+ * Handle any tab presses when inside list items and indent/outdent.
+ */
+ListPlugin.prototype.handleKeyDown = function(evt) {
+   //'this' is the editor._doc
+    var wym = WYMeditor.INSTANCES[this.title];
+    var listPlugin = wym.listPlugin;
+
+    var container = wym.selected();
+    var name = container.tagName.toLowerCase();
+    // We only care about tabs when we're inside a list
+    if (name != "li") {
+        return null;
+    }
+
+    // Handle tab presses
+    if (evt.keyCode == WYMeditor.KEY.TAB) {
+        if (evt.shiftKey) {
+            wym.exec('OUTDENT');
+            return false; // Short-circuit normal tab behavior
+        } else {
+            wym.exec('INDENT');
+            return false;
+        }
+    }
+
+    return null;
+};