phazr

Merge lp:~rockstar/phazr/forms-and-overlays into lp:phazr

  1. forms-and-overlays
  2. Merge into phazr
Proposed by Paul Hummer
Status: Merged
Approved by: Paul Hummer
Approved revision: 10
Merged at revision: 3
Proposed branch: lp:~rockstar/phazr/forms-and-overlays
Merge into: lp:phazr
Diff against target: 231 lines (+196/-0)
5 files modified
examples/formplugin/index.html (+48/-0)
src/css/phazr.css (+13/-0)
src/js/formplugin/formplugin.js (+72/-0)
tests/formplugin.js (+45/-0)
tests/index.html (+18/-0)
To merge this branch: bzr merge lp:~rockstar/phazr/forms-and-overlays
Reviewer Review Type Date Requested Status
Deryck Hodge code Approve
Review via email: mp+54115@code.launchpad.net

Commit message

Provide a FormPlugin for Overlay, so that we can handle forms in a cleaner manner.

Description of the change

This branch adds a plugin to Y.Overlay that makes it easy to work with forms in the overlay. It provides two methods that hang off the host overlay: loadForm and loadFormFromURL. They essentially do the same thing, one loads the form from a string, the other loads it from a URL.

Along with those two methods, it also replaces the footer with Save/Cancel buttons. It automatically deals with the Cancel event by hiding the form (smart). It defaults the Save button to an empty function. When plugging the plugin, it takes a submitFn property that is the save function.

It also has tests.

To post a comment you must log in.
Revision history for this message
Deryck Hodge (deryck) wrote :

Nicely played, sir! Amazing to see some of the functionality we use now re-written to leverage YUI better. As we discussed, your instincts are good to not override the footer. Do a new node after it with the buttons.

I'll also go on record as being unsure of the docstring-like test names, though I do find it helpful all the same. I game to try it this way for phazr, but it's kind of odd all the same.

review: Approve (code)
Revision history for this message
Paul Hummer (rockstar) wrote :

There are additional revisions which have not been approved in review. Please seek review and approval of these new revisions.

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== added directory 'examples/formplugin'
2=== added file 'examples/formplugin/index.html'
3--- examples/formplugin/index.html 1970-01-01 00:00:00 +0000
4+++ examples/formplugin/index.html 2011-03-21 20:15:56 +0000
5@@ -0,0 +1,48 @@
6+<!DOCTYPE html>
7+<meta charset="utf-8" />
8+<html>
9+ <head>
10+ <title>Form Plugin</title>
11+ <script type="text/javascript"
12+ src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
13+ <script type="text/javascript"
14+ src="../../src/js/formplugin/formplugin.js"></script>
15+ <link rel="stylesheet" href="../../src/css/phazr.css" />
16+ </head>
17+ <body>
18+ <div id="formplugin-demo">
19+ <h1>Form Plugin for Overlays</h1>
20+ <p>The Form Plugin provides some additional functionality for working
21+ with forms inside the YUI Overlay widget. Its features include adding
22+ Ok/Cancel buttons to the footer and right aligning them, shortcut
23+ functions to load a form content and buttons to submit and cancel.</p>
24+ <p>Y.FormPlugin can take on optional (but highly suggested)
25+ configuration item, which is the submit handler. By default, it is a
26+ blank function.</p>
27+ <p>Y.FormPlugin provides two extra methods for Overlay.
28+ <code>loadForm</code> will load an existing string of form markup,
29+ whereas <code>loadFormFromURL</code> will load a form from a specified
30+ URL.</p>
31+ <script type="text/javascript">
32+ YUI().use('formplugin', 'overlay', function(Y) {
33+ var overlay = new Y.Overlay({
34+ bodyContent: 'This is where the body content goes',
35+ centered: true,
36+ footerContent: 'This is a footer.',
37+ headerContent: 'This is a header',
38+ plugins: [{fn: Y.FormPlugin, cfg: {
39+ submitFn: function() { alert('submitted'); }
40+ }}],
41+ visible: true,
42+ zIndex: 10
43+ });
44+ overlay.loadForm(
45+ '<form action=""><label>Name</label><input type="text" name="name" /></form>');
46+ overlay.render();
47+ });
48+ </script>
49+ <pre><code>
50+ </code></pre>
51+ </div>
52+ </body>
53+</html>
54
55=== modified file 'src/css/phazr.css'
56--- src/css/phazr.css 2011-03-18 03:06:25 +0000
57+++ src/css/phazr.css 2011-03-21 20:15:56 +0000
58@@ -1,3 +1,7 @@
59+div.yui3-widget .clickable {
60+ cursor: pointer;
61+}
62+
63 div.yui3-overlay {
64 background-color: #fff;
65
66@@ -25,3 +29,12 @@
67 font-size: .8em;
68 padding: .1em .5em .5em .5em;
69 }
70+
71+div.yui3-overlay div.yui3-overlay-controls {
72+ font-size: .8em;
73+ padding: .1em .5em .5em .5em;
74+ text-align: right;
75+}
76+div.yui3-overlay div.yui3-overlay-controls a {
77+ margin-left: 4px;
78+}
79
80=== added directory 'src/js'
81=== added directory 'src/js/formplugin'
82=== added file 'src/js/formplugin/formplugin.js'
83--- src/js/formplugin/formplugin.js 1970-01-01 00:00:00 +0000
84+++ src/js/formplugin/formplugin.js 2011-03-21 20:15:56 +0000
85@@ -0,0 +1,72 @@
86+YUI.add('formplugin', function(Y) {
87+
88+ var FormPlugin = Y.Base.create('formplugin', Y.Plugin.Base, [], {
89+ initializer: function(config) {
90+ var host = this.get('host');
91+ host.loadForm = Y.bind(this.loadForm, this);
92+ host.loadFormFromURL = Y.bind(this.loadFormFromURL, this);
93+
94+ if (config.submitFn) {
95+ this.set('submitFn', config.submitFn);
96+ }
97+
98+ this.afterHostMethod('renderUI', this.renderUI);
99+ this.afterHostMethod('bindUI', this.bindUI);
100+ },
101+ renderUI: function() {
102+ var host = this.get('host'),
103+ saveButton = Y.Node.create(
104+ '<a class="clickable" id="save-control">Save</a>'),
105+ cancelButton = Y.Node.create(
106+ '<a class="clickable" id="cancel-control">Cancel</a>'),
107+ controls = Y.Node.create('<div></div>');
108+ controls.addClass(host.getClassName() + '-controls');
109+ controls.appendChild(saveButton);
110+ controls.appendChild(cancelButton);
111+ this.set('saveButton', saveButton);
112+ this.set('cancelButton', cancelButton);
113+ host.get('contentBox').appendChild(controls);
114+ },
115+ bindUI: function() {
116+ var host = this.get('host');
117+ footer = host.get('boundingBox').one('.yui3-widget-ft');
118+ this.get('saveButton').on('click', this.get('submitFn'));
119+ this.get('cancelButton').on('click', function(e) {
120+ e.preventDefault();
121+ host.hide();
122+ });
123+ },
124+ loadForm: function(form) {
125+ var host = this.get('host'),
126+ form_node = Y.Node.create(form);
127+ host.set('bodyContent', form_node);
128+ this.set('form', form_node);
129+ },
130+ loadFormFromURL: function(url) {
131+ var host = this.get('host');
132+ Y.io(url, {
133+ on: {
134+ success: function(id, response) {
135+ host.loadForm(response.responseText);
136+ }
137+ }
138+ });
139+ }
140+ }, {
141+ ATTRS: {
142+ cancelButton: {},
143+ form: {},
144+ saveButton: {},
145+ submitFn: {
146+ defaultFn: function() {
147+ return function() {};
148+ }
149+ }
150+ },
151+ NS: 'formPlugin'
152+ });
153+ Y.FormPlugin = FormPlugin;
154+
155+}, '0.1', {requires: [
156+ 'base', 'node', 'plugin'
157+]});
158
159=== added directory 'tests'
160=== added file 'tests/formplugin.js'
161--- tests/formplugin.js 1970-01-01 00:00:00 +0000
162+++ tests/formplugin.js 2011-03-21 20:15:56 +0000
163@@ -0,0 +1,45 @@
164+YUI().use('formplugin', 'overlay', 'test', function(Y) {
165+
166+ var suite = new Y.Test.Suite('FormPlugin tests');
167+ suite.add(new Y.Test.Case({
168+ name: 'FormPlugin Tests',
169+
170+ "FormPlugin's loadForm should hang off the host": function() {
171+
172+ var overlay = new Y.Overlay({
173+ plugins: [Y.FormPlugin]
174+ });
175+ overlay.loadForm('<form id="test-form"><input /></form>');
176+
177+ var form = overlay.get('boundingBox').one('#test-form');
178+ Y.Assert.isNotUndefined(form);
179+ },
180+
181+ "FormPlugin should add a loadFormFromURL to the host": function() {
182+
183+ var overlay = new Y.Overlay({
184+ plugins: [Y.FormPlugin]
185+ });
186+ Y.Assert.isFunction(overlay.loadFormFromURL);
187+ },
188+
189+ "FormPlugin takes a submitFn config": function() {
190+ var passed = false;
191+ Y.Global.on('phazr:fired', function() {
192+ passed = true;
193+ });
194+
195+ var overlay = new Y.Overlay({
196+ plugins: [{fn: Y.FormPlugin, cfg: {
197+ submitFn: function() { Y.Global.fire('phazr:fired'); }
198+ }}]
199+ });
200+ overlay.get('boundingBox').one('#save-button').click();
201+
202+ this.wait(function() { Y.Assert.isFalse(passed); }, 2000);
203+ }
204+ }));
205+
206+ Y.Test.Runner.add(suite);
207+ Y.Test.Runner.run();
208+});
209
210=== added file 'tests/index.html'
211--- tests/index.html 1970-01-01 00:00:00 +0000
212+++ tests/index.html 2011-03-21 20:15:56 +0000
213@@ -0,0 +1,18 @@
214+<!DOCTYPE html>
215+<meta charset="utf-8" />
216+<html>
217+ <head>
218+ <title>Form Plugin</title>
219+ <script type="text/javascript"
220+ src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
221+ <script type="text/javascript"
222+ src="../src/js/formplugin/formplugin.js"></script>
223+ <link rel="stylesheet" href="../src/css/phazr.css" />
224+
225+ <!-- Test files -->
226+ <script type="text/javascript"
227+ src="formplugin.js"></script>
228+ </head>
229+ <body>
230+ </body>
231+</html>

Subscribers

People subscribed via source and target branches

to all changes: