phazr

Merge lp:~rockstar/phazr/modal-plugin-to-extension into lp:phazr

  1. modal-plugin-to-extension
  2. Merge into phazr
Proposed by Paul Hummer
Status: Merged
Approved by: Paul Hummer
Approved revision: 14
Merged at revision: 6
Proposed branch: lp:~rockstar/phazr/modal-plugin-to-extension
Merge into: lp:phazr
Diff against target: 169 lines (+51/-48)
4 files modified
examples/modaloverlay/index.html (+9/-8)
src/js/modaloverlay/modaloverlay.js (+29/-29)
tests/index.html (+2/-2)
tests/modaloverlay.js (+11/-9)
To merge this branch: bzr merge lp:~rockstar/phazr/modal-plugin-to-extension
Reviewer Review Type Date Requested Status
Martin Albisetti (community) Approve
Deryck Hodge Pending
Review via email: mp+56684@code.launchpad.net

Description of the change

So... it turns out that my ModalPlugin would work better as a widget extension instead of a plugin. I'm not sure I'll port the FormPlugin over, since it seems to make more sense as a plugin (for now).

Ideally, I can move on to making a truly modal dialog (one that can be draggable) very soon.

To post a comment you must log in.
Revision history for this message
Martin Albisetti (beuno) wrote :

21 <h1>Modal Plugin for Overlays</h1>
22 <p>Modal Plugin allows on overlay to operate more like a modal dialog.
23 It has a "close" button at the top right and will also close when hitting
24 "Esc" on the keyboard or clicking outside the overlay.</p>

Missed a few s/Plugin/Overlay here.

Code looks good!

review: Approve
lp:~rockstar/phazr/modal-plugin-to-extension updated
15. By Paul Hummer

Fixed small change

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== renamed directory 'examples/modalplugin' => 'examples/modaloverlay'
2=== modified file 'examples/modaloverlay/index.html'
3--- examples/modalplugin/index.html 2011-03-21 22:12:22 +0000
4+++ examples/modaloverlay/index.html 2011-05-02 02:19:31 +0000
5@@ -2,27 +2,28 @@
6 <meta charset="utf-8" />
7 <html>
8 <head>
9- <title>Modal Plugin</title>
10+ <title>Modal Overlay</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+ src="../../src/js/modaloverlay/modaloverlay.js"></script>
16 <link rel="stylesheet" href="../../src/css/phazr.css" />
17 </head>
18 <body>
19- <div id="modalplugin-demo">
20- <h1>Modal Plugin for Overlays</h1>
21- <p>Modal Plugin allows on overlay to operate more like a modal dialog.
22+ <div id="modaloverlay-demo">
23+ <h1>Modal Extension for Overlays</h1>
24+ <p>Modal Extension allows on overlay to operate more like a modal dialog.
25 It has a "close" button at the top right and will also close when hitting
26 "Esc" on the keyboard or clicking outside the overlay.</p>
27 <script type="text/javascript">
28- YUI().use('modalplugin', 'overlay', function(Y) {
29- var overlay = new Y.Overlay({
30+ YUI().use('modaloverlay', 'overlay', function(Y) {
31+ var Overlay = Y.Base.create('overlay', Y.Overlay, [
32+ Y.ModalOverlay]);
33+ var overlay = new 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: [Y.ModalPlugin],
39 visible: true,
40 zIndex: 10
41 });
42
43=== renamed directory 'src/js/modalplugin' => 'src/js/modaloverlay'
44=== renamed file 'src/js/modalplugin/modalplugin.js' => 'src/js/modaloverlay/modaloverlay.js'
45--- src/js/modalplugin/modalplugin.js 2011-03-23 02:18:48 +0000
46+++ src/js/modaloverlay/modaloverlay.js 2011-05-02 02:19:31 +0000
47@@ -1,36 +1,36 @@
48-YUI.add('modalplugin', function(Y) {
49+YUI.add('modaloverlay', function(Y) {
50
51- var ModalPlugin = Y.Base.create('modalPlugin', Y.Plugin.Base, [], {
52- initializer: function(config) {
53- this.afterHostMethod('renderUI', this.renderUI, this);
54- this.afterHostMethod('bindUI', this.bindUI, this);
55- },
56- renderUI: function() {
57- var host = this.get('host'),
58- closeButton = Y.Node.create('<a></a>'),
59- closeContainer = Y.Node.create('<div></div>'),
60- className = host.getClassName();
61- closeButton.addClass(className + '-close-button');
62- closeContainer.addClass(className + '-close');
63- closeContainer.appendChild(closeButton);
64- host.get('contentBox').prepend(closeContainer);
65- this.set('closeButton', closeButton);
66- },
67- bindUI: function() {
68- var host = this.get('host');
69- this.get('closeButton').on('click', host.hide, host);
70+ var ModalOverlay = function(config) {
71+ Y.Do.after(this.afterRenderUI, this, 'renderUI');
72+ Y.Do.after(this.afterBindUI, this, 'bindUI');
73+ };
74+ ModalOverlay.ATTRS = {
75+ closeButton: { value: null }
76+ };
77+ ModalOverlay.prototype = {
78+ afterRenderUI: function() {
79+ var template = '<div class="{containerClassName}"><a class="{linkClassName}"></a></div>',
80+ className = this.getClassName(),
81+ context = {
82+ containerClassName: className + '-close',
83+ linkClassName: className + '-close-button'
84+ },
85+ closeContainer = Y.Node.create(
86+ Y.substitute(template, context));
87+ this.get('contentBox').prepend(closeContainer);
88+ this.set('closeButton',
89+ closeContainer.one('.' + className + '-close-button'));
90+ },
91+ afterBindUI: function() {
92+ this.get('closeButton').on('click', this.hide, this);
93 Y.on('keyup', function(e) {
94 if (e.keyCode == 27) {
95 this.hide();
96 }
97- }, window, host);
98+ }, window, this);
99+
100 }
101- }, {
102- ATTRS: {
103- closeButton: {}
104- },
105- NS: 'modalPlugin'
106- });
107- Y.ModalPlugin = ModalPlugin;
108+ };
109+ Y.ModalOverlay = ModalOverlay;
110
111-}, '0.1', {requires: ['base', 'node', 'plugin']});
112+}, '0.1', {requires: ['base', 'node', 'plugin', 'substitute']});
113
114=== modified file 'tests/index.html'
115--- tests/index.html 2011-04-05 03:44:40 +0000
116+++ tests/index.html 2011-05-02 02:19:31 +0000
117@@ -8,14 +8,14 @@
118 <script type="text/javascript"
119 src="../src/js/formplugin/formplugin.js"></script>
120 <script type="text/javascript"
121- src="../src/js/modalplugin/modalplugin.js"></script>
122+ src="../src/js/modaloverlay/modaloverlay.js"></script>
123 <link rel="stylesheet" href="../src/css/phazr.css" />
124
125 <!-- Test files -->
126 <script type="text/javascript"
127 src="formplugin.js"></script>
128 <script type="text/javascript"
129- src="modalplugin.js"></script>
130+ src="modaloverlay.js"></script>
131 </head>
132 <body>
133 </body>
134
135=== renamed file 'tests/modalplugin.js' => 'tests/modaloverlay.js'
136--- tests/modalplugin.js 2011-04-05 03:38:12 +0000
137+++ tests/modaloverlay.js 2011-05-02 02:19:31 +0000
138@@ -1,20 +1,22 @@
139-YUI().use('modalplugin', 'overlay', 'test', function(Y) {
140+YUI().use('base', 'modaloverlay', 'node-event-simulate', 'overlay', 'test', function(Y) {
141
142 var suite = new Y.Test.Suite('ModalPlugin tests');
143 suite.add(new Y.Test.Case({
144- name: 'ModalPlugin Tests',
145-
146- "ModalPlugin should have a close button": function() {
147- var overlay = new Y.Overlay({
148- plugins: [Y.ModalPlugin]
149- });
150+ name: 'ModalOverlay Tests',
151+
152+ "ModalOverlay should have a close button": function() {
153+ var Overlay = Y.Base.create(
154+ 'overlay', Y.Overlay, [Y.ModalOverlay]);
155+
156+ var overlay = new Overlay();
157 overlay.render();
158- var closeContainer = overlay.get('contentBox').one('.yui3-overlay-close');
159+ var closeContainer = overlay.get('contentBox').one(
160+ '.yui3-overlay-close');
161+
162 Y.Assert.isNotUndefined(closeContainer);
163 closeContainer.one('a').simulate('click');
164 Y.Assert.isFalse(overlay.get('visible'));
165 }
166-
167 }));
168
169 Y.Test.Runner.add(suite);

Subscribers

People subscribed via source and target branches

to all changes: