phazr

Merge lp:~rockstar/phazr/close-overlay into lp:phazr

  1. close-overlay
  2. Merge into phazr
Proposed by Paul Hummer
Status: Merged
Approved by: Paul Hummer
Approved revision: 9
Merged at revision: 4
Proposed branch: lp:~rockstar/phazr/close-overlay
Merge into: lp:phazr
Diff against target: 148 lines (+103/-1)
5 files modified
examples/modalplugin/index.html (+36/-0)
src/css/phazr.css (+4/-0)
src/js/modalplugin/modalplugin.js (+36/-0)
tests/index.html (+5/-1)
tests/modalplugin.js (+22/-0)
To merge this branch: bzr merge lp:~rockstar/phazr/close-overlay
Reviewer Review Type Date Requested Status
Deryck Hodge code Approve
Review via email: mp+54294@code.launchpad.net

Commit message

Add a close button to overlays

Description of the change

This branch adds a plugin that will add a close button to an overlay, as well as a keylistener that will hide the overlay if "Esc" is hit.

The one problem with this branch currently is that close is text, not an icon, like I'd like it to be. The same problem exists with Save/Cancel on the FormPlugin stuff. I plan on remedying that as my next task.

As a modal dialog, might it also make sense that we make the overlay draggable as well? I couldn't decide, and it's not really that much harder to do. I just wasn't sure, so I'd like to hear your input on it.

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

Looks generally good, Paul.

I do think the overlay should be dragable. Always thought that actually about overlays, so completely agree with you. I would also like to be able to click away from the overlay, and have it dismiss. It's a nice feature to have when people do bad overlays and blow up the screen, hiding the close button. It's not always obvious ESC is your friend in those situations.

Also, the test isn't wired up to the test runner index.html. The module code is, but not the test code. If I do wire it up, it errors. So I think you need to look into something there. I supposed the test page title could be something other than "Form Plugin" too.

The example runs fine and looks good, though. And the code looks good to me, too. I'll mark this approved, assuming you'll fix up the test. And let you toggle the MP approved when it's ready.

review: Approve (code)
lp:~rockstar/phazr/close-overlay updated
8. By Paul Hummer

Fix the tests to be wired up correctly.

9. By Paul Hummer

Change the test title

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== added directory 'examples/modalplugin'
2=== added file 'examples/modalplugin/index.html'
3--- examples/modalplugin/index.html 1970-01-01 00:00:00 +0000
4+++ examples/modalplugin/index.html 2011-04-05 03:45:48 +0000
5@@ -0,0 +1,36 @@
6+<!DOCTYPE html>
7+<meta charset="utf-8" />
8+<html>
9+ <head>
10+ <title>Modal 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/modalplugin/modalplugin.js"></script>
15+ <link rel="stylesheet" href="../../src/css/phazr.css" />
16+ </head>
17+ <body>
18+ <div id="modalplugin-demo">
19+ <h1>Modal Plugin for Overlays</h1>
20+ <p>Modal Plugin allows on overlay to operate more like a modal dialog.
21+ It has a "close" button at the top right and will also close when hitting
22+ "Esc" on the keyboard or clicking outside the overlay.</p>
23+ <script type="text/javascript">
24+ YUI().use('modalplugin', 'overlay', function(Y) {
25+ var overlay = new Y.Overlay({
26+ bodyContent: 'This is where the body content goes',
27+ centered: true,
28+ footerContent: 'This is a footer.',
29+ headerContent: 'This is a header',
30+ plugins: [Y.ModalPlugin],
31+ visible: true,
32+ zIndex: 10
33+ });
34+ overlay.render();
35+ });
36+ </script>
37+ <pre><code>
38+ </code></pre>
39+ </div>
40+ </body>
41+</html>
42
43=== modified file 'src/css/phazr.css'
44--- src/css/phazr.css 2011-03-21 20:14:02 +0000
45+++ src/css/phazr.css 2011-04-05 03:45:48 +0000
46@@ -38,3 +38,7 @@
47 div.yui3-overlay div.yui3-overlay-controls a {
48 margin-left: 4px;
49 }
50+div.yui3-overlay div.yui3-overlay-close {
51+ float: right;
52+ margin: 5px 5px 0 0;
53+}
54
55=== added directory 'src/js/modalplugin'
56=== added file 'src/js/modalplugin/modalplugin.js'
57--- src/js/modalplugin/modalplugin.js 1970-01-01 00:00:00 +0000
58+++ src/js/modalplugin/modalplugin.js 2011-04-05 03:45:48 +0000
59@@ -0,0 +1,36 @@
60+YUI.add('modalplugin', function(Y) {
61+
62+ var ModalPlugin = Y.Base.create('modalPlugin', Y.Plugin.Base, [], {
63+ initializer: function(config) {
64+ this.afterHostMethod('renderUI', this.renderUI, this);
65+ this.afterHostMethod('bindUI', this.bindUI, this);
66+ },
67+ renderUI: function() {
68+ var host = this.get('host'),
69+ closeButton = Y.Node.create('<a>close</a>'),
70+ closeContainer = Y.Node.create('<div></div>'),
71+ className = host.getClassName();
72+ closeButton.addClass(className + '-close-button');
73+ closeContainer.addClass(className + '-close');
74+ closeContainer.appendChild(closeButton);
75+ host.get('contentBox').prepend(closeContainer);
76+ this.set('closeButton', closeButton);
77+ },
78+ bindUI: function() {
79+ var host = this.get('host');
80+ this.get('closeButton').on('click', host.hide, host);
81+ Y.on('keyup', function(e) {
82+ if (e.keyCode == 27) {
83+ this.hide();
84+ }
85+ }, window, host);
86+ }
87+ }, {
88+ ATTRS: {
89+ closeButton: {}
90+ },
91+ NS: 'modalPlugin'
92+ });
93+ Y.ModalPlugin = ModalPlugin;
94+
95+}, '0.1', {requires: ['base', 'node', 'plugin']});
96
97=== modified file 'tests/index.html'
98--- tests/index.html 2011-03-19 22:09:56 +0000
99+++ tests/index.html 2011-04-05 03:45:48 +0000
100@@ -2,16 +2,20 @@
101 <meta charset="utf-8" />
102 <html>
103 <head>
104- <title>Form Plugin</title>
105+ <title>Phazr tests</title>
106 <script type="text/javascript"
107 src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
108 <script type="text/javascript"
109 src="../src/js/formplugin/formplugin.js"></script>
110+ <script type="text/javascript"
111+ src="../src/js/modalplugin/modalplugin.js"></script>
112 <link rel="stylesheet" href="../src/css/phazr.css" />
113
114 <!-- Test files -->
115 <script type="text/javascript"
116 src="formplugin.js"></script>
117+ <script type="text/javascript"
118+ src="modalplugin.js"></script>
119 </head>
120 <body>
121 </body>
122
123=== added file 'tests/modalplugin.js'
124--- tests/modalplugin.js 1970-01-01 00:00:00 +0000
125+++ tests/modalplugin.js 2011-04-05 03:45:48 +0000
126@@ -0,0 +1,22 @@
127+YUI().use('modalplugin', 'overlay', 'test', function(Y) {
128+
129+ var suite = new Y.Test.Suite('ModalPlugin tests');
130+ suite.add(new Y.Test.Case({
131+ name: 'ModalPlugin Tests',
132+
133+ "ModalPlugin should have a close button": function() {
134+ var overlay = new Y.Overlay({
135+ plugins: [Y.ModalPlugin]
136+ });
137+ overlay.render();
138+ var closeContainer = overlay.get('contentBox').one('.yui3-overlay-close');
139+ Y.Assert.isNotUndefined(closeContainer);
140+ closeContainer.one('a').simulate('click');
141+ Y.Assert.isFalse(overlay.get('visible'));
142+ }
143+
144+ }));
145+
146+ Y.Test.Runner.add(suite);
147+ Y.Test.Runner.run();
148+});

Subscribers

People subscribed via source and target branches

to all changes: