Introducing two types of lists: bullet & enum
authorAleksander Łukasz <aleksander.lukasz@nowoczesnapolska.org.pl>
Thu, 27 Jun 2013 11:45:10 +0000 (13:45 +0200)
committerAleksander Łukasz <aleksander.lukasz@nowoczesnapolska.org.pl>
Thu, 27 Jun 2013 11:45:10 +0000 (13:45 +0200)
modules/documentCanvas/canvas.js
modules/documentCanvas/canvasManager.js
modules/documentCanvas/canvasNode.js
modules/documentCanvas/nodes.less
modules/documentCanvas/tests/canvasNode.test.js
modules/documentToolbar/template.html
modules/nodePane/template.html

index baa2f3c..0585d12 100644 (file)
@@ -160,7 +160,7 @@ Canvas.prototype.listCreate = function(options) {
             return false;\r
     });\r
     \r
-    var list = canvasNode.create({tag: 'div', klass: 'list-items'}).dom; //this._createNode('div', 'list-items');\r
+    var list = canvasNode.create({tag: 'div', klass: 'list-items' + (options.type === 'enum' ? '-enum' : '')}).dom; //this._createNode('div', 'list-items');\r
     element1.before(list);\r
     \r
     nodesToWrap.forEach(function(node) {\r
@@ -190,7 +190,7 @@ Canvas.prototype.getPrecedingNode = function(options) {
 \r
 Canvas.prototype.nodeInsideList = function(options) {\r
     if(options.node) {\r
-        if(options.node.getClass() === 'list-items' || options.node.getClass() === 'item')\r
+        if(options.node.isOfClass('list-items') || options.node.isOfClass('item'))\r
             return true;\r
         var pointerElement = $(this.content.find('#' + options.node.getId()));\r
         return pointerElement.parents('[wlxml-class=list-items], [wlxml-class=item]').length > 0;\r
index 71c9342..7e34e29 100644 (file)
@@ -222,7 +222,7 @@ Manager.prototype.command = function(command, meta) {
         }\r
         else {\r
             if(!this.canvas.nodeInsideList({node: node})) {\r
-                this.canvas.listCreate({start: node, end: canvasNode.create(pos.focusNode)});\r
+                this.canvas.listCreate({start: node, end: canvasNode.create(pos.focusNode), type: meta});\r
                 this.selectNode(node, {movecaret: 'end'});\r
                 this.sandbox.publish('contentChanged');\r
             }\r
index 2b108a1..bb1cee7 100644 (file)
@@ -73,6 +73,10 @@ CanvasNode.prototype.parents = function() {
 };\r
 \r
 \r
+CanvasNode.prototype.isOfClass = function(klass) {\r
+    return this.getClass() && this.getClass().substr(0, klass.length) === klass;\r
+}\r
+\r
 return {\r
     create: function(desc) {\r
         return new CanvasNode(desc);\r
index 215d36b..2f51045 100644 (file)
@@ -67,11 +67,20 @@ span[wlxml-tag] {
 \r
 [wlxml-class="list-items"] {\r
 \r
+    > [wlxml-class="item"] {\r
+        display: list-item;\r
+        margin-left: 10px;\r
+        padding-left: 5px;\r
+    }\r
+}\r
+\r
+\r
+[wlxml-class="list-items-enum"] {\r
+\r
     counter-reset: myitem;\r
 \r
     > [wlxml-class="item"] {\r
         counter-increment: myitem;\r
-        display: list-item;\r
         margin-left: 10px;\r
         padding-left: 5px;\r
         \r
index bc11a80..5c55d9c 100644 (file)
@@ -33,6 +33,21 @@ suite('Create canvas node', function() {
     });\r
 });\r
 \r
+suite('class information', function() {\r
+    test('class of', function() {\r
+        var node = canvasNode.create({tag: 'header', klass: 'a-b-c'});\r
+        assert.ok(node.isOfClass('a'), 'first level');\r
+        assert.ok(node.isOfClass('a-b'), 'second level');\r
+        assert.ok(node.isOfClass('a-b-c'), 'third level');\r
+        assert.notOk(node.isOfClass('b-c'));\r
+        \r
+        var node2 = canvasNode.create({tag: 'header'});\r
+        assert.notOk(node2.isOfClass('b'));\r
+\r
+    });\r
+\r
+});\r
+\r
 suite('comparing nodes', function() {\r
     test('isSame', function() {\r
         var html = '<div wlxml-class="some-class" wlxml-tag="some-tag">';\r
index 112d93b..f10459f 100644 (file)
@@ -23,7 +23,8 @@
         <button data-btn="tags" data-btn-type="toggle" class="btn btn-mini"><i class="icon-tag"></i></button>\r
     </div>\r
     <div class="rng-module-documentToolbar-toolbarGroup">\r
-        <button data-btn="createList" data-btn-type="cmd" class="btn btn-mini"><i class="icon-list"></i></button>\r
+        <button data-btn="createList" data-btn-type="cmd" data-meta="bullets" class="btn btn-mini"><i class="icon-list"></i></button>\r
+        <button data-btn="createList" data-btn-type="cmd" data-meta="enum" class="btn btn-mini"><i class="icon-th-list"></i></button>\r
     </div>\r
     <div style="clear: both;"></div>\r
 </div>
\ No newline at end of file
index b87c236..c0733cd 100644 (file)
@@ -13,7 +13,7 @@
         <div>\r
             <label>Klasa</label>\r
             <select  class="rng-module-nodePane-classSelect">\r
-                <% var options = ['', 'author', 'title', 'cite', 'cite.code', 'cite.code.xml', 'list', 'list.items', 'item', 'uri', 'p', 'footnote', 'todo', 'emp', 'emph.tech'] %>\r
+                <% var options = ['', 'author', 'title', 'cite', 'cite.code', 'cite.code.xml', 'list', 'list.items', 'list.items.enum', 'item', 'uri', 'p', 'footnote', 'todo', 'emp', 'emph.tech'] %>\r
                 <% options.forEach(function(option) { %>\r
                     <option value="<%= option.replace(/\./g, '-') %>" <% if(option === '') { %>selected<% } %>><%= option %></option>\r
                 <% }); %>\r