Merge lp:~rockstar/phazr/editor into lp:phazr

[Paul Hummer]

Add inline editor plugin

This branch creates a Node plugin that makes any text node editable. Try out the example.

One thing it doesn't do currently is provide buttons for save/cancel. On the single line editor, you can hit enter. The multiline editor doesn't provide a way to save just yet. If it did, at least there's a way to handle it.

I'm pushing it now to get opinions on implementing this as a plugin rather than a full blown widget.

[Deryck Hodge (deryck)]

I like this as a plugin very much. I see no downside to it really. And the code is simple and straightforward.

We absolutely need to add cancel/save icons for the multiline version. Or maybe make this an option on the initializer?

Also, the real neat trick of a text editor is that the underlying form element mimics the layout of the text on the page. I think this is the hard trick and my gut says we need some form of this in phazr. Call sites will override it, I'm sure, but we need some sense of how to do this in the plugin itself.

As a start, this is very good though!

[Paul Hummer (rockstar)]

Finally got around to fixing this. There are new graphics (and the SVG versions of them as well). I'm trying to get some better graphics out of design. When that happens, then I'll replace them again. The other images were just too horrible. At least these are simple.

As always, test it out, tell me what to fix.

[Deryck Hodge (deryck)]

Some thoughts at a quick poke....

The graphics look nice. I see why you want nice ones, but these aren't bad as generic ones.

In terms of the widget itself:

* The text still reflows to input element, rather than preserving the look of the page
* Linebreaks are ignored in multi-line when adding the text back to the DOM

For this last one, we rely on html response back from the server to update the DOM correctly. but that always felt wrong to me. It seems like the widget ought to be responsible for updating the DOM correctly. What do you think?

Not sure what you consider important for release. I think the first point above is very important, but we can talk more offline about that.

[Paul Hummer (rockstar)]

I need to figure out what's going on with the line break thing. I don't want to do too many hackery things to it, especially if someone would prefer to bounce it off the server (maybe we should escape HTML, but a XSS against yourself seems a bit silly.

I think the reflow issue needs to be left up to the implementer to fix. I'm not sure if anyone is even going to use this, and if they do, I don't want the CSS to be so specific that it makes their lives harder (and thus eliminating what phazr is really for).

=== added directory 'assets'
=== added file 'assets/cancel.svg'
--- assets/cancel.svg	1970-01-01 00:00:00 +0000
+++ assets/cancel.svg	2011-05-28 21:21:33 +0000
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="128"
+   height="128"
+   id="svg2985"
+   version="1.1"
+   inkscape:version="0.48.1 r9760"
+   sodipodi:docname="close.svg">
+  <defs
+     id="defs2987" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="61.841334"
+     inkscape:cy="80.280491"
+     inkscape:current-layer="g3788"
+     showgrid="true"
+     inkscape:document-units="px"
+     inkscape:grid-bbox="true"
+     inkscape:window-width="1280"
+     inkscape:window-height="702"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata2990">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     transform="translate(0,64)">
+    <path
+       sodipodi:type="arc"
+       style="fill:none;fill-rule:evenodd;stroke:#646464;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="path2993"
+       sodipodi:cx="63.090908"
+       sodipodi:cy="64"
+       sodipodi:rx="55.454544"
+       sodipodi:ry="54.18182"
+       d="M 118.54545,64 A 55.454544,54.18182 0 1 1 7.636364,64 55.454544,54.18182 0 1 1 118.54545,64 z"
+       transform="matrix(1.0721871,0,0,1.0973726,-3.6452576,-70.231844)" />
+    <g
+       id="g3788"
+       transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,20.695964,43.304036)">
+      <rect
+         ry="3"
+         rx="4.5"
+         y="-50"
+         x="54"
+         height="100"
+         width="15"
+         id="rect3763"
+         style="fill:#a40000;fill-opacity:1;stroke:none" />
+      <rect
+         transform="matrix(0,1,-1,0,0,0)"
+         style="fill:#a40000;fill-opacity:1;stroke:none"
+         id="rect3786"
+         width="15"
+         height="100"
+         x="-7.5"
+         y="-111.5"
+         rx="4.5"
+         ry="3" />
+    </g>
+  </g>
+</svg>

=== added file 'assets/close.svg'
--- assets/close.svg	1970-01-01 00:00:00 +0000
+++ assets/close.svg	2011-05-28 21:21:33 +0000
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="128"
+   height="128"
+   id="svg2985"
+   version="1.1"
+   inkscape:version="0.48.1 r9760"
+   sodipodi:docname="close.svg">
+  <defs
+     id="defs2987" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="57.068363"
+     inkscape:cy="80.280491"
+     inkscape:current-layer="g3788"
+     showgrid="true"
+     inkscape:document-units="px"
+     inkscape:grid-bbox="true"
+     inkscape:window-width="1280"
+     inkscape:window-height="702"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata2990">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     transform="translate(0,64)">
+    <path
+       sodipodi:type="arc"
+       style="fill:none;fill-rule:evenodd;stroke:#646464;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="path2993"
+       sodipodi:cx="63.090908"
+       sodipodi:cy="64"
+       sodipodi:rx="55.454544"
+       sodipodi:ry="54.18182"
+       d="M 118.54545,64 A 55.454544,54.18182 0 1 1 7.636364,64 55.454544,54.18182 0 1 1 118.54545,64 z"
+       transform="matrix(1.0721871,0,0,1.0973726,-3.6452576,-70.231844)" />
+    <g
+       id="g3788"
+       transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,20.695964,43.304036)">
+      <rect
+         ry="3"
+         rx="4.5"
+         y="-50"
+         x="54"
+         height="100"
+         width="15"
+         id="rect3763"
+         style="fill:#646464;fill-opacity:1;stroke:none" />
+      <rect
+         transform="matrix(0,1,-1,0,0,0)"
+         style="fill:#646464;fill-opacity:1;stroke:none"
+         id="rect3786"
+         width="15"
+         height="100"
+         x="-7.5"
+         y="-111.5"
+         rx="4.5"
+         ry="3" />
+    </g>
+  </g>
+</svg>

=== added file 'assets/ok.svg'
--- assets/ok.svg	1970-01-01 00:00:00 +0000
+++ assets/ok.svg	2011-05-28 21:21:33 +0000
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="128"
+   height="128"
+   id="svg2985"
+   version="1.1"
+   inkscape:version="0.48.1 r9760"
+   sodipodi:docname="ok.svg">
+  <defs
+     id="defs2987" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="68.165161"
+     inkscape:cy="54.161237"
+     inkscape:current-layer="g3788"
+     showgrid="true"
+     inkscape:document-units="px"
+     inkscape:grid-bbox="true"
+     inkscape:window-width="1280"
+     inkscape:window-height="702"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata2990">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     transform="translate(0,64)">
+    <path
+       sodipodi:type="arc"
+       style="fill:none;fill-rule:evenodd;stroke:#646464;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="path2993"
+       sodipodi:cx="63.090908"
+       sodipodi:cy="64"
+       sodipodi:rx="55.454544"
+       sodipodi:ry="54.18182"
+       d="M 118.54545,64 A 55.454544,54.18182 0 1 1 7.636364,64 55.454544,54.18182 0 1 1 118.54545,64 z"
+       transform="matrix(1.0721871,0,0,1.0973726,-3.6452576,-70.231844)" />
+    <g
+       id="g3788"
+       transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,20.695964,43.304036)">
+      <rect
+         style="fill:#00a400;fill-opacity:1;stroke:none"
+         id="rect3896"
+         width="15"
+         height="40"
+         x="22.212006"
+         y="-26.36396"
+         rx="3"
+         ry="3" />
+      <rect
+         ry="2.7"
+         rx="3"
+         transform="matrix(0,1,-1,0,0,0)"
+         y="-112.58459"
+         x="-1.437555"
+         height="90"
+         width="15"
+         id="rect3898"
+         style="fill:#00a400;fill-opacity:1;stroke:none" />
+    </g>
+  </g>
+</svg>

=== added directory 'examples/editableplugin'
=== added file 'examples/editableplugin/index.html'
--- examples/editableplugin/index.html	1970-01-01 00:00:00 +0000
+++ examples/editableplugin/index.html	2011-05-28 21:21:33 +0000
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<html>
+  <head>
+    <title>Editable Plugin</title>
+    <script type="text/javascript"
+            src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
+    <script type="text/javascript"
+            src="../../src/js/editableplugin/editableplugin.js"></script>
+    <link rel="stylesheet" href="../../src/css/phazr.css" />
+  </head>
+  <body>
+    <div id="editableplugin-demo">
+      <h1>Editable Plugin</h1>
+      <p>EditablePlugin allows any text Node to be editable.  Select the Node
+      and plug Editable into it.</p>
+      <p>
+        <span id="editable-demo">
+          This text has a typo, but it's compeletely editable.
+        </span>
+      </p>
+      <script type="text/javascript">
+        YUI().use('editableplugin', 'node', function(Y) {
+            var demo = Y.one('#editable-demo');
+            demo.plug(Y.Editable, {
+                saveFn: function(value) { alert(value); }
+            });
+        });
+      </script>
+      <pre><code>
+YUI().use('editableplugin', 'node', function(Y) {
+    var demo = Y.one('#editable-demo');
+    demo.plug(Y.Editable, {
+        saveFn: function(value) { alert(value); }
+    });
+});
+      </code></pre>
+
+      <h2>Multi-line editing</h2>
+      <p>By default, the editor only supports a single line.  In some cases,
+      you may want to edit paragraphs of text.  In this case, you can simply
+      pass <code>multiline: true</code> when you plug the editor into the
+      Node.</p>
+      <p>
+        <p id="multiline-editable-demo">
+          This is a paragraph of text.  There are no typos in this paragraph, but you may want to edit it anyway.  Go ahead and try it.
+        </p>
+      </p>
+      <script type="text/javascript">
+        YUI().use('editableplugin', 'node', function(Y) {
+            var demo = Y.one('#multiline-editable-demo');
+            demo.plug(Y.Editable, {
+                multiline: true,
+                saveFn: function(value) { alert(value); }
+            });
+        });
+      </script>
+      <pre><code>
+YUI().use('editableplugin', 'node', function(Y) {
+    var demo = Y.one('#multiline-editable-demo');
+    demo.plug(Y.Editable, {
+        multiline: true,
+        saveFn: function(value) { alert(value); }
+    });
+});
+      </code></pre>
+
+    </div>
+  </body>
+</html>

=== modified file 'src/css/images/cancel.png'
Binary files src/css/images/cancel.png	2011-03-23 02:17:50 +0000 and src/css/images/cancel.png	2011-05-28 21:21:33 +0000 differ
=== modified file 'src/css/images/close.png'
Binary files src/css/images/close.png	2011-03-23 02:17:50 +0000 and src/css/images/close.png	2011-05-28 21:21:33 +0000 differ
=== renamed file 'src/css/images/okay.png' => 'src/css/images/ok.png'
Binary files src/css/images/okay.png	2011-03-23 02:17:50 +0000 and src/css/images/ok.png	2011-05-28 21:21:33 +0000 differ
=== modified file 'src/css/phazr.css'
--- src/css/phazr.css	2011-04-07 05:41:04 +0000
+++ src/css/phazr.css	2011-05-28 21:21:33 +0000
@@ -1,3 +1,7 @@
+a.save { background: url('images/ok.png') 0 0 no-repeat; display: inline-block; height: 16px; width: 16px; }
+a.cancel { background: url('images/cancel.png') 0 0 no-repeat; display: inline-block; height: 16px; width: 16px; }
+
+
 div.yui3-widget .clickable {
     cursor: pointer;
 }
@@ -41,7 +45,7 @@
     width: 32px;
 }
 div.yui3-overlay div.yui3-overlay-controls a#save-control {
-    background: url('images/okay.png') 0 0 no-repeat;
+    background: url('images/ok.png') 0 0 no-repeat;
 }
 div.yui3-overlay div.yui3-overlay-controls a#cancel-control {
     background: url('images/cancel.png') 0 0 no-repeat;

=== added directory 'src/js/editableplugin'
=== added file 'src/js/editableplugin/editableplugin.js'
--- src/js/editableplugin/editableplugin.js	1970-01-01 00:00:00 +0000
+++ src/js/editableplugin/editableplugin.js	2011-05-28 21:21:33 +0000
@@ -0,0 +1,85 @@
+YUI.add('editableplugin', function(Y) {
+
+    Y.Editable = Y.Base.create('editable', Y.Plugin.Base, [], {
+        initializer: function(config) {
+            var host = this.get('host');
+            host.addClass('editable');
+            host.on('click', Y.bind(this.edit, this));
+        },
+        cancel: function() {
+            var editor = this.get('editor'),
+                host = this.get('host');
+            editor.hide();
+            host.show();
+        },
+        edit: function(e) {
+            e.preventDefault();
+            var host = this.get('host');
+                multiline = this.get('multiline'),
+                text = Y.Lang.trim(host.get('text')),
+                editor = this.get('editor');
+
+            if (editor === null) {
+                var parentNode = host.get('parentNode'),
+                    editor = Y.Node.create('<div></div>'),
+                    controls = Y.Node.create('<span></span'),
+                    save = Y.Node.create('<a class="clickable save"></a>'),
+                    cancel = Y.Node.create('<a class="clickable cancel"></a>'),
+                    textbox = null;
+
+                if (multiline) {
+                    textbox = Y.Node.create('<textarea></textarea>');
+                } else {
+                    textbox = Y.Node.create('<input type="text" />');
+                }
+
+                save.on('click', this.save, this);
+                cancel.on('click', this.cancel, this);
+
+                controls.appendChild(save);
+                controls.appendChild(cancel);
+                editor.appendChild(textbox);
+                editor.appendChild(controls);
+                editor.hide();
+
+                textbox.on('keyup', this._handleKeyPress, this);
+                parentNode.insert(editor, host);
+                this.set('editor', editor);
+            }
+
+            editor.get('firstChild').set('value', text);
+            editor.show();
+            host.hide();
+        },
+        save: function() {
+            var editor = this.get('editor'),
+                host = this.get('host'),
+                save = this.get('saveFn'),
+                value = editor.get('firstChild').get('value');
+            if (save !== null) { save(value); }
+            host.setContent(value);
+            editor.hide();
+            host.show();
+        },
+        _handleKeyPress: function(e) {
+            if (e.keyCode) {
+                if (e.keyCode === 27) { this.cancel(); }
+                if (e.keyCode === 13 && this.get('multiline') === false) {
+                    this.save();
+                }
+            }
+        }
+    }, {
+        ATTRS: {
+            editor: { value: null },
+            multiline: { value: false },
+            saveFn: { value: null }
+        },
+        NS: 'editable'
+    });
+
+}, '1.0', { requires: [
+    'base',
+    'node',
+    'plugin',
+]});