LAZR Javascript Library

Merge lp:~deryck/lazr-js/multiline-fixed-width-412574 into lp:lazr-js

  1. multiline-fixed-width-412574
  2. Merge into toolchain
Proposed by Deryck Hodge
Status: Merged
Approved by: Paul Hummer
Approved revision: 144
Merged at revision: not available
Proposed branch: lp:~deryck/lazr-js/multiline-fixed-width-412574
Merge into: lp:lazr-js
Diff against target: 202 lines (+76/-27)
3 files modified
examples/inlineeditor/index.html (+51/-16)
src-js/lazrjs/inlineedit/assets/skins/sam/editor-skin.css (+4/-10)
src-js/lazrjs/inlineedit/editor.js (+21/-1)
To merge this branch: bzr merge lp:~deryck/lazr-js/multiline-fixed-width-412574
Reviewer Review Type Date Requested Status
Paul Hummer (community) Approve
Review via email: mp+14808@code.launchpad.net
To post a comment you must log in.
Revision history for this message
Deryck Hodge (deryck) wrote :

This branch is a fix for Bug #412574. This removes the fixed widths in
CSS for the multi-line editor. You can now have fluid multi-line
editors or fixed width. If no width is specified in the editor's config
object, the widget is fluid.

The examples have been updated to reflect both a fluid and fixed version
of multi-line editing. The documentation around the examples has been
updated, too.

I also did a drive-by fix to better line up the submit and cancel
buttons with the edit icon.

This is a branch that Danny Tamez and I were working on together at the
lazr-js sprint.

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

Please add the User-Agent check for Opera and IE and disable the widget. This is nice work, thanks for working on it!

review: Approve
lp:~deryck/lazr-js/multiline-fixed-width-412574 updated
145. By Deryck Hodge

Disable the multi-line widget for Opera or IE,
per rockstar's comments in review.

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'examples/inlineeditor/index.html'
2--- examples/inlineeditor/index.html 2009-11-13 00:29:12 +0000
3+++ examples/inlineeditor/index.html 2009-11-13 20:45:23 +0000
4@@ -39,17 +39,43 @@
5 <input type="checkbox" name="accept_empty" /><label for="accept_empty">Allow the user to submit an empty text field</label>
6 </div>
7
8-<h2>Multi-line</h2>
9-<div id="edit-test-description" class="lazr-multiline-edit">
10- <div id="multi-text-editor">
11- <div class="clearfix">
12- <div class="edit-controls">
13- <a href="#edit" class="yui-editable_text-trigger edit"></a>
14- </div>
15- <h2>Description</h2>
16- </div>
17- <div class="yui-editable_text-text">
18- <p>Multi-line paragraph with lots...</p>
19+<h2>Multi-line (fixed)</h2>
20+ <p>A multi-line widget can be fixed width. To enable fixed width,
21+ you need to set a width config option in JavaScript. To prevent
22+ a flash as the content is resized, you should set a matching
23+ width style in CSS on the containing element passed to the multi-line
24+ widget JavaScript constructor.</p>
25+<div id="edit-fixed-description" class="lazr-multiline-edit"
26+ style="width:600px">
27+ <div id="multi-text-editor">
28+ <div class="clearfix">
29+ <div class="edit-controls">
30+ <a href="#edit" class="yui-editable_text-trigger edit"></a>
31+ </div>
32+ <h2>Description</h2>
33+ </div>
34+ <div class="yui-editable_text-text">
35+ <p>Multi-line paragraph with lots... and lots and lots and lots and lots and lots and lots and lots.... and lots (yes, lots) did he say lots?!</p>
36+ <p>and lots, well not really *lots*,</p>
37+ <p>of editable text.</p>
38+ </div>
39+ </div>
40+</div>
41+
42+<h2>Multi-line (fluid)</h2>
43+ <p>A multi-line widget can be fluid. When constructing the
44+ widget, do <strong>not</strong> pass in a width config option.</p>
45+ <p>The widget will resize as the page is resized, too.</p>
46+<div id="edit-fluid-description" class="lazr-multiline-edit">
47+ <div id="multi-text-editor">
48+ <div class="clearfix">
49+ <div class="edit-controls">
50+ <a href="#edit" class="yui-editable_text-trigger edit"></a>
51+ </div>
52+ <h2>Description</h2>
53+ </div>
54+ <div class="yui-editable_text-text">
55+ <p>Multi-line paragraph with lots... and lots and lots and lots and lots and lots and lots and lots.... and lots (yes, lots) did he say lots?!</p>
56 <p>and lots, well not really *lots*,</p>
57 <p>of editable text.</p>
58 </div>
59@@ -412,15 +438,24 @@
60 editable_text.set('accept_empty', accept_empty);
61 }, 'input[name=accept_empty]');
62
63- var multiline_text = new Y.EditableText({
64- contentBox: '#edit-test-description',
65+ var multiline_fixed_text = new Y.EditableText({
66+ contentBox: '#edit-fixed-description',
67 multiline: true,
68 buttons: 'top',
69- });
70- multiline_text.render();
71+ width: 600
72+ });
73+ multiline_fixed_text.render();
74+
75+ var multiline_fluid_text = new Y.EditableText({
76+ contentBox: '#edit-fluid-description',
77+ multiline: true,
78+ buttons: 'top'
79+ });
80+ multiline_fluid_text.render();
81
82 // Add the 2 second delay to the underlying editor widget.
83- multiline_text.editor.plug({fn:DelayedSavePlugin});
84+ multiline_fixed_text.editor.plug({fn:DelayedSavePlugin});
85+ multiline_fluid_text.editor.plug({fn:DelayedSavePlugin});
86
87 });
88 </script>
89
90=== modified file 'src-js/lazrjs/inlineedit/assets/skins/sam/editor-skin.css'
91--- src-js/lazrjs/inlineedit/assets/skins/sam/editor-skin.css 2009-11-11 22:58:50 +0000
92+++ src-js/lazrjs/inlineedit/assets/skins/sam/editor-skin.css 2009-11-13 20:45:23 +0000
93@@ -85,7 +85,6 @@
94 font-size: 12px;
95 margin-bottom: 25px;
96 margin-top: -10px;
97- width: 600px;
98 }
99
100 .lazr-multiline-edit h2 {
101@@ -111,7 +110,6 @@
102 width: 81px;
103 line-height: 29px;
104 text-align:right;
105- padding-right: 8px;
106 margin-top: -6px;
107 z-index: 1;
108 }
109@@ -123,17 +121,13 @@
110 background-repeat: no-repeat;
111 }
112
113-.lazr-multiline-edit .bg-top-label {
114- margin-right: -5px;
115-}
116-
117 .lazr-multiline-edit .yui-editable_text-text {
118 border-top: 1px solid #d6d6d6;
119- padding:1px 20px 1px 20px;
120+ padding:1px 10px 1px 20px;
121 }
122
123 .lazr-multiline-edit .yui-editable_text-text-hover {
124- padding:1px 19px 0 19px;
125+ padding:1px 9px 1px 19px;
126 background-color: #fafafa !important;
127 border: 1px solid #d6d6d6;
128 }
129@@ -144,10 +138,10 @@
130 border: 1px solid #d6d6d6;
131 border-left: 2px groove #D6D6D6;
132 border-top: 2px groove #D6D6D6;
133- width: 96%;
134 position: relative;
135 left: 5px;
136 top: -6px;
137+ line-height: 1.2em;
138 }
139
140 .yui-editable_text-edit_mode .lazr-multiline-edit .yui-ieditor-input {
141@@ -161,7 +155,6 @@
142 .lazr-multiline-edit .yui-ieditor-content {
143 top: -29px;
144 left: -5px;
145- width:600px;
146 }
147
148 .lazr-multiline-edit .yui-ieditor-submit_button {
149@@ -191,6 +184,7 @@
150 .lazr-multiline-edit .edit {
151 position: relative;
152 top: 2px;
153+ right: 10px;
154 background: url('edit.png') top left no-repeat;
155 padding: 2px 0 0 18px;
156 }
157
158=== modified file 'src-js/lazrjs/inlineedit/editor.js'
159--- src-js/lazrjs/inlineedit/editor.js 2009-11-11 21:56:43 +0000
160+++ src-js/lazrjs/inlineedit/editor.js 2009-11-13 20:45:23 +0000
161@@ -495,6 +495,11 @@
162 if (new_height < min_height) {
163 new_height = min_height;
164 }
165+ // The multi-line editor has to dynamically resize,
166+ // in case the widget is fluid.
167+ var box_width = this.get(BOUNDING_BOX).get('offsetWidth');
168+ var new_width = box_width - 25;
169+ input.setStyle('width', new_width + 'px');
170 }
171
172 this._target_height = new_height;
173@@ -1155,7 +1160,7 @@
174 easing: Y.Easing.easeOut,
175 duration: 0.2,
176 from: { left: 0 },
177- to: { left: -4 }
178+ to: { left: -7 }
179 });
180 var self = this;
181 anim.on('end', function(e) {
182@@ -1469,6 +1474,21 @@
183 */
184 _afterAcceptEmptyChange: function(e) {
185 this.editor.set(ACCEPT_EMPTY, e.newVal);
186+ },
187+
188+ /**
189+ * Override to disable the widget for certain browsers.
190+ * See the YUI docs on `renderer` for widgets for more.
191+ *
192+ * @method renderer
193+ */
194+ renderer: function() {
195+ if (this.editor.get(MULTILINE) && (Y.UA.ie || Y.UA.opera)) {
196+ return;
197+ }
198+ this.renderUI();
199+ this.bindUI();
200+ this.syncUI();
201 }
202 });
203

Subscribers

People subscribed via source and target branches