Experimenting with higher level canvas api

diff --git a/karma.conf.js b/karma.conf.js
index b6085cc..9f3fa53 100644 (file)
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -6,6 +6,7 @@ files = [
   REQUIRE,\r
   REQUIRE_ADAPTER,\r
   \r
+  'vkbeautify.js',\r
   {pattern: 'libs/*.js', included: false},\r
   {pattern: 'fnpjs/**/*.js', included: false},\r
   {pattern: 'modules/**/*.js', included: false},\r

diff --git a/modules/documentCanvas/canvas.js b/modules/documentCanvas/canvas.js
new file mode 100644 (file)
index 0000000..2d364ac
--- /dev/null
+++ b/modules/documentCanvas/canvas.js
@@ -0,0 +1,135 @@
+define([\r
+'libs/jquery-1.9.1.min',\r
+'libs/underscore-min',\r
+'modules/documentCanvas/transformations',\r
+'modules/documentCanvas/wlxmlNode',\r
+'libs/text!./template.html'\r
+], function($, _, transformations, wlxmlNode, template) {\r
+\r
+'use strict';\r
+\r
+var Canvas = function(xml) {\r
+    this.xml = xml;\r
+    this.dom = $(template);\r
+    \r
+    this.content = this.dom.find('#rng-module-documentCanvas-content')\r
+    \r
+    \r
+    this.content.html(transformations.fromXML.getHTMLTree(xml));\r
+}\r
+\r
+Canvas.prototype.toXML = function() {\r
+    return transformations.toXML.getXML(this.content.html());\r
+}\r
+\r
+Canvas.prototype.getNode = function(desc) {\r
+    var selector = '';\r
+    if(desc.klass)\r
+        selector += '[wlxml-class=' + desc.klass + ']';\r
+    if(desc.tag)\r
+        selector += '[wlxml-tag=' + desc.tag + ']';\r
+    var toret = [];\r
+    this.content.find(selector).each(function() {\r
+        toret.push(new wlxmlNode.Node($(this)));\r
+    });\r
+    return toret;\r
+}\r
+\r
+Canvas.prototype._createNode = function(wlxmlTag, wlxmlClass) {\r
+            var toBlock = ['div', 'document', 'section', 'header'];\r
+            var htmlTag = _.contains(toBlock, wlxmlTag) ? 'div' : 'span';\r
+            var toret = $('<' + htmlTag + '>');\r
+            toret.attr('wlxml-tag', wlxmlTag);\r
+            if(wlxmlClass)\r
+                toret.attr('wlxml-class', wlxmlClass);\r
+            toret.attr('id', 'xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random()*16|0,v=c=='x'?r:r&0x3|0x8;return v.toString(16);}));\r
+            return toret;\r
+        };\r
+\r
+Canvas.prototype.insertNode = function(options) {\r
+    var element = $(this.content.find('#' + options.context.id).get(0));\r
+    if(options.place == 'after')\r
+        element[options.place](this._createNode(options.tag, options.klass));\r
+    else if(options.place == 'wrapText') {\r
+        var elementContents = element.contents();\r
+        if(elementContents.length !== 1 || elementContents.get(0).nodeType != 3)\r
+            return false;\r
+        var textElement = elementContents.get(0);\r
+\r
+        var prefix = textElement.data.substr(0, options.offsetStart);\r
+        var suffix = textElement.data.substr(options.offsetEnd);\r
+        var core = textElement.data.substr(options.offsetStart, options.offsetEnd - options.offsetStart);\r
+        var newNode = this._createNode(options.tag, options.klass);\r
+        newNode.text(core);\r
+        $(textElement).replaceWith(newNode);\r
+        newNode.before(prefix);\r
+        newNode.after(suffix);\r
+    }\r
+}\r
+\r
+Canvas.prototype.splitNode = function(options) {\r
+    var element = $(this.content.find('#' + options.node.id).get(0));\r
+    \r
+    var elementContents = element.contents();\r
+    if(elementContents.length !== 1 || elementContents.get(0).nodeType != 3)\r
+        return false;\r
+    var textElement = elementContents.get(0);\r
+    \r
+    var prefix = textElement.data.substr(0, options.offset);\r
+    var suffix = textElement.data.substr(options.offset);\r
+    var prefixNode = this._createNode(element.attr('wlxml-tag'), element.attr('wlxml-class'));\r
+    var suffixNode = this._createNode(element.attr('wlxml-tag'), element.attr('wlxml-class'));\r
+    prefixNode.text(prefix);\r
+    suffixNode.text(suffix);\r
+    element.before(prefixNode);\r
+    element.after(suffixNode);\r
+    element.remove();\r
+}\r
+\r
+Canvas.prototype.createList = function(options) {\r
+    var element1 = $(this.content.find('#' + options.start.id).get(0));\r
+    var element2 = $(this.content.find('#' + options.end.id).get(0));\r
+    if(!element1.parent().get(0).isSameNode(element2.parent().get(0)))\r
+        return false;\r
+        \r
+    var parent = element1.parent();\r
+    var nodesToWrap = [];\r
+    \r
+    var place = 'before';\r
+    var canvas = this;\r
+    parent.contents().each(function() {\r
+        var node = this;\r
+        if(node.isSameNode(element1.get(0)))\r
+            place = 'inside';\r
+        if(place === 'inside') {\r
+            var $node;\r
+            if(node.nodeType === 3) {\r
+                $node = canvas._createNode('div').text(node.data);\r
+                $(node).remove();\r
+            }\r
+            else {\r
+                $node = $(node);\r
+            }\r
+            $node.attr('wlxml-class', 'list.item');\r
+            nodesToWrap.push($node);\r
+        }\r
+        if(node.isSameNode(element2.get(0)))\r
+            return;\r
+    });\r
+    \r
+    var list = this._createNode('div', 'list');\r
+    element1.before(list);\r
+    \r
+    nodesToWrap.forEach(function(node) {\r
+        node.remove();\r
+        list.append(node);\r
+    });\r
+    \r
+    \r
+    \r
+}\r
+\r
+\r
+return {Canvas: Canvas, Node: Node};\r
+\r
+});
\ No newline at end of file

diff --git a/modules/documentCanvas/tests/canvas.test.js b/modules/documentCanvas/tests/canvas.test.js
new file mode 100644 (file)
index 0000000..386e375
--- /dev/null
+++ b/modules/documentCanvas/tests/canvas.test.js
@@ -0,0 +1,103 @@
+define([\r
+'libs/jquery-1.9.1.min',\r
+'libs/chai', \r
+'./utils.js',\r
+'modules/documentCanvas/canvas'\r
+], function($, chai, utils, canvas) {\r
+\r
+    'use strict';\r
+\r
+    var assert = chai.assert;\r
+    \r
+    assert.xmlEqual = function(lhsText, rhsText) {\r
+        var cleanLhs = utils.cleanUp(lhsText);\r
+        var cleanRhs = utils.cleanUp(rhsText);\r
+        \r
+        var lhs = $(cleanLhs);\r
+        var rhs = $(cleanRhs);\r
+        \r
+        this.equal(lhs.length, 1);\r
+        this.equal(rhs.length, 1);\r
+        \r
+        lhs = lhs.get(0);\r
+        rhs = rhs.get(0);\r
+        \r
+        var test = lhs.isEqualNode(rhs);\r
+        if(!test) {\r
+            console.log(cleanLhs);\r
+            console.log(cleanRhs);    \r
+        }\r
+        return this.ok(test, 'xmls are equal');\r
+    };\r
+    \r
+    var retrievingTest = function(title, xml) {\r
+        test(title, function() {\r
+            var c = new canvas.Canvas(xml);\r
+            assert.xmlEqual(c.toXML(), xml);    \r
+        });\r
+    };\r
+    \r
+    suite('Basic document retrieving', function() {\r
+        test('empty document', function() {\r
+            var c = new canvas.Canvas('');\r
+            assert.equal(c.toXML(), '');\r
+        });\r
+        retrievingTest('empty tag', '<section></section>');\r
+        retrievingTest('tag with content', '<section>Some text</section>');\r
+        retrievingTest('tag with class', '<section class="some.class"></section>');\r
+    });\r
+    \r
+    suite('Nodes', function() {\r
+        test('getting nodes via selector', function() {\r
+            var c = new canvas.Canvas('<section><header class="some.class">Header 1</header></section>');\r
+            var header = c.getNode({tag: 'header'})[0];\r
+            assert.equal(header.tag, 'header');\r
+            assert.equal(header.klass, 'some-class');\r
+        });\r
+    \r
+        test('inserting after', function() {\r
+            var c = new canvas.Canvas('<section><header>Header 1</header></section>');\r
+            var header = c.getNode({tag: 'header'})[0];\r
+            c.insertNode({place: 'after', context: header, tag: 'div', klass: 'some.class'});\r
+            assert.xmlEqual(c.toXML(), '<section><header>Header 1</header><div class="some.class"></div></section>');\r
+        });\r
+        \r
+        test('wrap text in node', function() {\r
+            var c = new canvas.Canvas('<section><header>Header 1</header></section>');\r
+            var header = c.getNode({tag: 'header'})[0];\r
+            c.insertNode({place: 'wrapText', context: header, tag: 'span', klass: 'url', offsetStart: 1, offsetEnd: 6});\r
+            assert.xmlEqual(c.toXML(), '<section><header>H<span class="url">eader</span> 1</header></section>');\r
+        });\r
+        \r
+        test('split node', function() {\r
+            var c = new canvas.Canvas('<section><header class="some.class">Header 1</header></section>');\r
+            var header = c.getNode({tag: 'header'})[0];\r
+            c.splitNode({node: header, offset: 4});\r
+            assert.xmlEqual(c.toXML(), '\\r
+                <section> \\r
+                    <header class="some.class">Head</header>\\r
+                    <header class="some.class">er 1</header>\\r
+                </section>'\r
+            );\r
+        });\r
+        \r
+        test('list', function() {\r
+            var c = new canvas.Canvas('<section><div>Alice</div>has<div>a cat</div></section>');\r
+            var div1 = c.getNode({tag:'div'})[0];\r
+            var div2 = c.getNode({tag:'div'})[1];\r
+            \r
+            c.createList({start: div1, end: div2});\r
+            \r
+            assert.xmlEqual(c.toXML(), '\\r
+                <section>\\r
+                    <div class="list">\\r
+                        <div class="list.item">Alice</div>\\r
+                        <div class="list.item">has</div>\\r
+                        <div class="list.item">a cat</div>\\r
+                    </div>\\r
+                </section>');\r
+            \r
+        });\r
+    });\r
+\r
+});
\ No newline at end of file

diff --git a/modules/documentCanvas/tests/utils.js b/modules/documentCanvas/tests/utils.js
new file mode 100644 (file)
index 0000000..e23808c
--- /dev/null
+++ b/modules/documentCanvas/tests/utils.js
@@ -0,0 +1,29 @@
+define(['libs/jquery-1.9.1.min'], function($) {\r
+    return {\r
+        cleanUp: function(xml) {\r
+            \r
+            var rmws = function(node) {\r
+                if(node.nodeType === 3) {\r
+                    node.data = $.trim(node.data);\r
+                }\r
+                else {\r
+                    $(node).contents().each(function() {\r
+                        rmws(this);\r
+                    });\r
+                }\r
+            }\r
+            \r
+            xml = $($.trim(xml));\r
+            xml.each(function() {\r
+                rmws(this);\r
+            });\r
+            \r
+            /*var toret = xml\r
+                .replace(/(<.*>)\s*(<.*>)/gm, '$1$2')\r
+                .replace(/(<\/.*>)\s*(<\/.*>)/gm, '$1$2')\r
+                .replace(/(<\/.*>)\s*(<.*>)/gm, '$1$2');\r
+            return $.trim(toret);*/\r
+            return $('<div>').append(xml).html();\r
+        }\r
+    }\r
+});
\ No newline at end of file

diff --git a/modules/documentCanvas/tests/utils.test.js b/modules/documentCanvas/tests/utils.test.js
new file mode 100644 (file)
index 0000000..d25b3d3
--- /dev/null
+++ b/modules/documentCanvas/tests/utils.test.js
@@ -0,0 +1,29 @@
+define(['libs/chai', './utils.js'], function(chai, utils) {\r
+\r
+'use strict';\r
+var assert = chai.assert;\r
+\r
+test('open+open', function() {\r
+    assert.equal(utils.cleanUp('<div class="class"> \n <div class="class"></div></div>'), '<div class="class"><div class="class"></div></div>');\r
+})\r
+\r
+test('close+close', function() {\r
+    assert.equal(utils.cleanUp('<div><div></div>\n </div>'), '<div><div></div></div>');\r
+})\r
+\r
+test('close+open', function() {\r
+    assert.equal(utils.cleanUp('<div></div>\n <div class="class"></div>'), '<div></div><div class="class"></div>');\r
+})\r
+\r
+test('bug', function() {\r
+    var txt = '\\r
+                <section> \\r
+                    <header class="some.class">Head</header>\\r
+                    <header class="some.class">er 1</header>\\r
+                </section>'\r
+    var txt2 = '<section><header class="some.class">Head</header><header class="some.class">er 1</header></section>';\r
+    assert.equal(utils.cleanUp(txt), txt2); \r
+});\r
+\r
+\r
+});
\ No newline at end of file

diff --git a/tests/main.js b/tests/main.js
index 8a093d9..9614d72 100644 (file)
--- a/tests/main.js
+++ b/tests/main.js
@@ -9,7 +9,22 @@
     require({\r
       baseUrl: '/base/',\r
       deps: tests,\r
-      callback: window.__karma__.start\r
+      callback: window.__karma__.start,\r
+        shim: {\r
+            'libs/jquery-1.9.1.min': {\r
+                exports: '$',\r
+            },\r
+            'libs/underscore-min': {\r
+                exports: '_'\r
+            },\r
+            'libs/bootstrap/js/bootstrap.min': {\r
+                deps: ['libs/jquery-1.9.1.min']\r
+            },\r
+            'libs/backbone-min': {\r
+                exports: 'Backbone',\r
+                deps: ['libs/jquery-1.9.1.min', 'libs/underscore-min']\r
+            }\r
+        }\r
     });\r
 \r
 })();
\ No newline at end of file