Merge lp:~muffinresearch/phazr/click-outside-to-dismiss into lp:phazr

[Stuart Colville]

Add click outside to dismiss modal dialogue.

Unmerged revisions

=== added directory 'assets'
=== added file 'assets/cancel.svg'
--- assets/cancel.svg	1970-01-01 00:00:00 +0000
+++ assets/cancel.svg	2011-06-07 15:32:35 +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-06-07 15:32:35 +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-06-07 15:32:35 +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-06-07 15:32:35 +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="editable-example">
+      <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('phazr-editable', 'node', function(Y) {
+            var demo = Y.one('#editable-demo');
+            demo.plug(Y.Editable, {
+                saveFn: function(value) { alert(value); }
+            });
+        });
+      </script>
+      <pre><code>
+YUI().use('phazr-editable', '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('phazr-editable', '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('phazr-editable', '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 'examples/formplugin/index.html'
--- examples/formplugin/index.html	2011-03-19 04:57:56 +0000
+++ examples/formplugin/index.html	2011-06-07 15:32:35 +0000
@@ -24,19 +24,19 @@
       whereas <code>loadFormFromURL</code> will load a form from a specified
       URL.</p>
       <script type="text/javascript">
-        YUI().use('formplugin', 'overlay', function(Y) {
+        YUI().use('phazr-formplugin', 'overlay', function(Y) {
             var overlay = new Y.Overlay({
                 bodyContent: 'This is where the body content goes',
                 centered: true,
                 footerContent: 'This is a footer.',
                 headerContent: 'This is a header',
                 plugins: [{fn: Y.FormPlugin, cfg: {
-                    submitFn: function() { alert('submitted'); }
+                    submitFn: function() { alert('submitted'); this.hide(); }
                     }}],
                 visible: true,
                 zIndex: 10
             });
-            overlay.loadForm(
+            overlay.form.loadForm(
                 '<form action=""><label>Name</label><input type="text" name="name" /></form>');
             overlay.render();
         });

=== removed directory 'examples/modaloverlay'
=== removed file 'examples/modaloverlay/index.html'
--- examples/modaloverlay/index.html	2011-05-02 02:18:55 +0000
+++ examples/modaloverlay/index.html	1970-01-01 00:00:00 +0000
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8" />
-<html>
-  <head>
-    <title>Modal Overlay</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/modaloverlay/modaloverlay.js"></script>
-    <link rel="stylesheet" href="../../src/css/phazr.css" />
-  </head>
-  <body>
-    <div id="modaloverlay-demo">
-      <h1>Modal Extension for Overlays</h1>
-      <p>Modal Extension allows on overlay to operate more like a modal dialog.
-      It has a "close" button at the top right and will also close when hitting
-      "Esc" on the keyboard or clicking outside the overlay.</p>
-      <script type="text/javascript">
-        YUI().use('modaloverlay', 'overlay', function(Y) {
-            var Overlay = Y.Base.create('overlay', Y.Overlay, [
-                Y.ModalOverlay]);
-            var overlay = new Overlay({
-                bodyContent: 'This is where the body content goes',
-                centered: true,
-                footerContent: 'This is a footer.',
-                headerContent: 'This is a header',
-                visible: true,
-                zIndex: 10
-            });
-            overlay.render();
-        });
-      </script>
-      <pre><code>
-      </code></pre>
-    </div>
-  </body>
-</html>

=== modified file 'examples/overlay/index.html'
--- examples/overlay/index.html	2011-04-07 05:53:46 +0000
+++ examples/overlay/index.html	2011-06-07 15:32:35 +0000
@@ -6,8 +6,6 @@
     <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/modaloverlay/modaloverlay.js"></script>
-    <script type="text/javascript"
             src="../../src/js/phazroverlay/phazroverlay.js"></script>
     <link rel="stylesheet" href="../../src/css/phazr.css" />
   </head>
@@ -18,7 +16,7 @@
       overlay.  We skin it with CSS, so that it looks consistent with the
       previous lazr-js PrettyOverlay.</p>
       <script type="text/javascript">
-        YUI().use('phazroverlay', function(Y) {
+        YUI().use('phazr-overlay', function(Y) {
             var overlay = new Y.PhazrOverlay({
                 centered: true,
                 zIndex: 10,

=== 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-06-07 15:32:35 +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-06-07 15:32:35 +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-06-07 15:32:35 +0000 differ
=== modified file 'src/css/phazr.css'
--- src/css/phazr.css	2011-04-07 05:41:04 +0000
+++ src/css/phazr.css	2011-06-07 15:32:35 +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-06-07 15:32:35 +0000
@@ -0,0 +1,88 @@
+YUI.add('phazr-editable', 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>'),
+                    controlTemplate = multiline ? '<div></div>' : '<span></span>',
+                    controls = Y.Node.create(controlTemplate),
+                    save = Y.Node.create(this.get('saveTemplate')),
+                    cancel = Y.Node.create(this.get('cancelTemplate')),
+                    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: {
+            cancelTemplate: { value: '<button class="phazr-button phazr-cancel">Cancel</button>' },
+            editor: { value: null },
+            multiline: { value: false },
+            saveFn: { value: null },
+            saveTemplate: { value: '<button class="phazr-button phazr-save">Save</button>' }
+        },
+        NS: 'editable'
+    });
+
+}, '1.0', { requires: [
+    'base',
+    'node',
+    'plugin',
+]});

=== modified file 'src/js/formplugin/formplugin.js'
--- src/js/formplugin/formplugin.js	2011-03-23 02:29:46 +0000
+++ src/js/formplugin/formplugin.js	2011-06-07 15:32:35 +0000
@@ -1,10 +1,8 @@
-YUI.add('formplugin', function(Y) {
+YUI.add('phazr-formplugin', function(Y) {
 
     var FormPlugin = Y.Base.create('formplugin', Y.Plugin.Base, [], {
         initializer: function(config) {
             var host = this.get('host');
-            host.loadForm = Y.bind(this.loadForm, this);
-            host.loadFormFromURL = Y.bind(this.loadFormFromURL, this);
 
             if (config.submitFn) {
                 this.set('submitFn', config.submitFn);
@@ -15,26 +13,23 @@
         },
         renderUI: function() {
             var host = this.get('host'),
-                saveButton = Y.Node.create(
-                    '<a class="clickable" id="save-control"></a>'),
-                cancelButton = Y.Node.create(
-                    '<a class="clickable" id="cancel-control"></a>'),
+                saveButton = this.get('saveButton'),
+                cancelButton = this.get('cancelButton'),
                 controls = Y.Node.create('<div></div>');
             controls.addClass(host.getClassName() + '-controls');
             controls.appendChild(saveButton);
             controls.appendChild(cancelButton);
-            this.set('saveButton', saveButton);
-            this.set('cancelButton', cancelButton);
             host.get('contentBox').appendChild(controls);
         },
         bindUI: function() {
             var host = this.get('host');
                 footer = host.get('boundingBox').one('.yui3-widget-ft');
-            this.get('saveButton').on('click', this.get('submitFn'));
-            this.get('cancelButton').on('click', function(e) {
-                e.preventDefault();
-                host.hide();
-            });
+            this.get('saveButton').on('click', this.get('submitFn'), this.get('host'));
+            this.get('cancelButton').on('click', this.close, this);
+        },
+        close: function(e) {
+            e.preventDefault();
+            this.get('host').hide();
         },
         loadForm: function(form) {
             var host = this.get('host'),
@@ -54,16 +49,30 @@
         }
     }, {
         ATTRS: {
-            cancelButton: {},
+            cancelButton: {
+                valueFn: function() {
+                    return Y.Node.create(this.get('cancelTemplate'));
+                }
+            },
+            cancelTemplate: {
+                value: '<button class="phazr-button phazr-cancel">Cancel</button>'
+            },
             form: {},
-            saveButton: {},
+            saveButton: {
+                valueFn: function() {
+                    return Y.Node.create(this.get('saveTemplate'));
+                }
+            },
+            saveTemplate: {
+                value: '<button class="phazr-button phazr-save">Save</button>'
+            },
             submitFn: {
                 defaultFn: function() {
                     return function() {};
                 }
             }
         },
-        NS: 'formPlugin'
+        NS: 'form'
     });
     Y.FormPlugin = FormPlugin;
 

=== removed directory 'src/js/modaloverlay'
=== removed file 'src/js/modaloverlay/modaloverlay.js'
--- src/js/modaloverlay/modaloverlay.js	2011-04-07 05:53:46 +0000
+++ src/js/modaloverlay/modaloverlay.js	1970-01-01 00:00:00 +0000
@@ -1,48 +0,0 @@
-YUI.add('modaloverlay', function(Y) {
-
-    var ModalOverlay = function(config) {
-        Y.Do.after(this.afterRenderUI, this, 'renderUI');
-        Y.Do.after(this.afterBindUI, this, 'bindUI');
-    };
-    ModalOverlay.ATTRS = {
-        closeButton: { value: null },
-        dragDelegate: { value: null }
-    };
-    ModalOverlay.prototype = {
-        afterRenderUI: function() {
-            var template = '<div class="{containerClassName}"><a class="{linkClassName}"></a></div>',
-                className = this.getClassName(),
-                context = {
-                    containerClassName: className + '-close',
-                    linkClassName: className + '-close-button'
-                },
-                closeContainer = Y.Node.create(
-                    Y.substitute(template, context));
-            this.get('contentBox').prepend(closeContainer);
-            this.set('closeButton',
-                closeContainer.one('.' + className + '-close-button'));
-        },
-        afterBindUI: function() {
-            this.get('closeButton').on('click', this.hide, this);
-            Y.on('keyup', function(e) {
-                if (e.keyCode == 27) {
-                    this.hide();
-                }
-            }, window, this);
-
-            var box = this.get('boundingBox'),
-                header = box.one('.' + className + '-hd'),
-                className = this.getClassName(),
-                dd = new Y.DD.Drag({
-                    node: box,
-                    handle: header
-                });
-            this.set('dragDelegate', dd);
-
-        }
-    };
-    Y.ModalOverlay = ModalOverlay;
-
-}, '0.1', {requires: [
-    'base', 'dd-delegate', 'node', 'plugin', 'substitute'
-]});

=== modified file 'src/js/phazroverlay/phazroverlay.js'
--- src/js/phazroverlay/phazroverlay.js	2011-04-07 05:02:25 +0000
+++ src/js/phazroverlay/phazroverlay.js	2011-06-07 15:32:35 +0000
@@ -1,6 +1,63 @@
-YUI.add('phazroverlay', function(Y) {
-
-    Y.PhazrOverlay = Y.Base.create('overlay', Y.Overlay, [
-        Y.ModalOverlay]);
-
-}, '1.0', { requires: ['base', 'modaloverlay', 'overlay']})
+YUI.add('phazr-overlay', function(Y) {
+
+    var ModalOverlay = function(config) {
+        Y.Do.after(this.afterRenderUI, this, 'renderUI');
+        Y.Do.after(this.afterBindUI, this, 'bindUI');
+    };
+    ModalOverlay.ATTRS = {
+        closeButton: { value: null },
+        dragDelegate: { value: null }
+    };
+    ModalOverlay.prototype = {
+        afterRenderUI: function() {
+            var template = '<div class="{containerClassName}"><a class="{linkClassName}"></a></div>',
+                className = this.getClassName(),
+                context = {
+                    containerClassName: className + '-close',
+                    linkClassName: className + '-close-button'
+                },
+                closeContainer = Y.Node.create(
+                    Y.substitute(template, context));
+            this.get('contentBox').prepend(closeContainer);
+            this.set('closeButton',
+                closeContainer.one('.' + className + '-close-button'));
+        },
+        afterBindUI: function() {
+            this.get('closeButton').on('click', this.hide, this);
+            Y.on('keyup', function(e) {
+                if (e.keyCode == 27) {
+                    this.hide();
+                }
+            }, window, this);
+
+            var box = this.get('boundingBox'),
+                header = box.one('.' + className + '-hd'),
+                className = this.getClassName(),
+                dd = new Y.DD.Drag({
+                    node: box,
+                    handle: header
+                });
+            this.set('dragDelegate', dd);
+
+            Y.one("html").on("modaloutside|click", 
+                function(e) {
+                    var targ = e.target;
+                    if (!box.contains(targ)) {
+                        this.hide();
+                        Y.detach("modaloutside|click");
+                    }
+                }, 
+            this);
+        }
+    };
+
+    Y.PhazrOverlay = Y.Base.create('overlay', Y.Overlay, [ModalOverlay]);
+
+}, '1.0', { requires: [
+    'base',
+    'dd-delegate',
+    'node',
+    'overlay',
+    'plugin',
+    'substitute'
+]});

=== modified file 'tests/formplugin.js'
--- tests/formplugin.js	2011-03-19 22:09:56 +0000
+++ tests/formplugin.js	2011-06-07 15:32:35 +0000
@@ -1,4 +1,4 @@
-YUI().use('formplugin', 'overlay', 'test', function(Y) {
+YUI().use('phazr-formplugin', 'overlay', 'test', function(Y) {
 
     var suite = new Y.Test.Suite('FormPlugin tests');
     suite.add(new Y.Test.Case({

=== modified file 'tests/phazroverlay.js'
--- tests/phazroverlay.js	2011-04-07 05:02:25 +0000
+++ tests/phazroverlay.js	2011-06-07 15:32:35 +0000
@@ -1,4 +1,4 @@
-YUI().use('phazroverlay', 'node-event-simulate', 'test', function(Y) {
+YUI().use('phazr-overlay', 'node-event-simulate', 'test', function(Y) {
 
     var suite = new Y.Test.Suite('PhazrOverlay tests');
     suite.add(new Y.Test.Case({