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
=== modified file 'examples/inlineeditor/index.html'
--- examples/inlineeditor/index.html 2009-11-13 00:29:12 +0000
+++ examples/inlineeditor/index.html 2009-11-13 20:45:23 +0000
@@ -39,17 +39,43 @@
39 <input type="checkbox" name="accept_empty" /><label for="accept_empty">Allow the user to submit an empty text field</label>39 <input type="checkbox" name="accept_empty" /><label for="accept_empty">Allow the user to submit an empty text field</label>
40</div>40</div>
4141
42<h2>Multi-line</h2>42<h2>Multi-line (fixed)</h2>
43<div id="edit-test-description" class="lazr-multiline-edit">43 <p>A multi-line widget can be fixed width. To enable fixed width,
44 <div id="multi-text-editor">44 you need to set a width config option in JavaScript. To prevent
45 <div class="clearfix">45 a flash as the content is resized, you should set a matching
46 <div class="edit-controls">46 width style in CSS on the containing element passed to the multi-line
47 <a href="#edit" class="yui-editable_text-trigger edit"></a>47 widget JavaScript constructor.</p>
48 </div>48<div id="edit-fixed-description" class="lazr-multiline-edit"
49 <h2>Description</h2>49 style="width:600px">
50 </div>50 <div id="multi-text-editor">
51 <div class="yui-editable_text-text">51 <div class="clearfix">
52 <p>Multi-line paragraph with lots...</p>52 <div class="edit-controls">
53 <a href="#edit" class="yui-editable_text-trigger edit"></a>
54 </div>
55 <h2>Description</h2>
56 </div>
57 <div class="yui-editable_text-text">
58 <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>
59 <p>and lots, well not really *lots*,</p>
60 <p>of editable text.</p>
61 </div>
62 </div>
63</div>
64
65<h2>Multi-line (fluid)</h2>
66 <p>A multi-line widget can be fluid. When constructing the
67 widget, do <strong>not</strong> pass in a width config option.</p>
68 <p>The widget will resize as the page is resized, too.</p>
69<div id="edit-fluid-description" class="lazr-multiline-edit">
70 <div id="multi-text-editor">
71 <div class="clearfix">
72 <div class="edit-controls">
73 <a href="#edit" class="yui-editable_text-trigger edit"></a>
74 </div>
75 <h2>Description</h2>
76 </div>
77 <div class="yui-editable_text-text">
78 <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>
53 <p>and lots, well not really *lots*,</p>79 <p>and lots, well not really *lots*,</p>
54 <p>of editable text.</p>80 <p>of editable text.</p>
55 </div>81 </div>
@@ -412,15 +438,24 @@
412 editable_text.set('accept_empty', accept_empty);438 editable_text.set('accept_empty', accept_empty);
413 }, 'input[name=accept_empty]');439 }, 'input[name=accept_empty]');
414440
415 var multiline_text = new Y.EditableText({441 var multiline_fixed_text = new Y.EditableText({
416 contentBox: '#edit-test-description',442 contentBox: '#edit-fixed-description',
417 multiline: true,443 multiline: true,
418 buttons: 'top',444 buttons: 'top',
419 });445 width: 600
420 multiline_text.render();446 });
447 multiline_fixed_text.render();
448
449 var multiline_fluid_text = new Y.EditableText({
450 contentBox: '#edit-fluid-description',
451 multiline: true,
452 buttons: 'top'
453 });
454 multiline_fluid_text.render();
421455
422 // Add the 2 second delay to the underlying editor widget.456 // Add the 2 second delay to the underlying editor widget.
423 multiline_text.editor.plug({fn:DelayedSavePlugin});457 multiline_fixed_text.editor.plug({fn:DelayedSavePlugin});
458 multiline_fluid_text.editor.plug({fn:DelayedSavePlugin});
424459
425});460});
426 </script>461 </script>
427462
=== modified file 'src-js/lazrjs/inlineedit/assets/skins/sam/editor-skin.css'
--- src-js/lazrjs/inlineedit/assets/skins/sam/editor-skin.css 2009-11-11 22:58:50 +0000
+++ src-js/lazrjs/inlineedit/assets/skins/sam/editor-skin.css 2009-11-13 20:45:23 +0000
@@ -85,7 +85,6 @@
85 font-size: 12px;85 font-size: 12px;
86 margin-bottom: 25px;86 margin-bottom: 25px;
87 margin-top: -10px;87 margin-top: -10px;
88 width: 600px;
89}88}
9089
91.lazr-multiline-edit h2 {90.lazr-multiline-edit h2 {
@@ -111,7 +110,6 @@
111 width: 81px;110 width: 81px;
112 line-height: 29px;111 line-height: 29px;
113 text-align:right;112 text-align:right;
114 padding-right: 8px;
115 margin-top: -6px;113 margin-top: -6px;
116 z-index: 1;114 z-index: 1;
117}115}
@@ -123,17 +121,13 @@
123 background-repeat: no-repeat;121 background-repeat: no-repeat;
124}122}
125123
126.lazr-multiline-edit .bg-top-label {
127 margin-right: -5px;
128}
129
130.lazr-multiline-edit .yui-editable_text-text {124.lazr-multiline-edit .yui-editable_text-text {
131 border-top: 1px solid #d6d6d6;125 border-top: 1px solid #d6d6d6;
132 padding:1px 20px 1px 20px;126 padding:1px 10px 1px 20px;
133}127}
134128
135.lazr-multiline-edit .yui-editable_text-text-hover {129.lazr-multiline-edit .yui-editable_text-text-hover {
136 padding:1px 19px 0 19px;130 padding:1px 9px 1px 19px;
137 background-color: #fafafa !important;131 background-color: #fafafa !important;
138 border: 1px solid #d6d6d6;132 border: 1px solid #d6d6d6;
139}133}
@@ -144,10 +138,10 @@
144 border: 1px solid #d6d6d6;138 border: 1px solid #d6d6d6;
145 border-left: 2px groove #D6D6D6;139 border-left: 2px groove #D6D6D6;
146 border-top: 2px groove #D6D6D6;140 border-top: 2px groove #D6D6D6;
147 width: 96%;
148 position: relative;141 position: relative;
149 left: 5px;142 left: 5px;
150 top: -6px;143 top: -6px;
144 line-height: 1.2em;
151}145}
152146
153.yui-editable_text-edit_mode .lazr-multiline-edit .yui-ieditor-input {147.yui-editable_text-edit_mode .lazr-multiline-edit .yui-ieditor-input {
@@ -161,7 +155,6 @@
161.lazr-multiline-edit .yui-ieditor-content {155.lazr-multiline-edit .yui-ieditor-content {
162 top: -29px;156 top: -29px;
163 left: -5px;157 left: -5px;
164 width:600px;
165}158}
166159
167.lazr-multiline-edit .yui-ieditor-submit_button {160.lazr-multiline-edit .yui-ieditor-submit_button {
@@ -191,6 +184,7 @@
191.lazr-multiline-edit .edit {184.lazr-multiline-edit .edit {
192 position: relative;185 position: relative;
193 top: 2px;186 top: 2px;
187 right: 10px;
194 background: url('edit.png') top left no-repeat;188 background: url('edit.png') top left no-repeat;
195 padding: 2px 0 0 18px;189 padding: 2px 0 0 18px;
196}190}
197191
=== modified file 'src-js/lazrjs/inlineedit/editor.js'
--- src-js/lazrjs/inlineedit/editor.js 2009-11-11 21:56:43 +0000
+++ src-js/lazrjs/inlineedit/editor.js 2009-11-13 20:45:23 +0000
@@ -495,6 +495,11 @@
495 if (new_height < min_height) {495 if (new_height < min_height) {
496 new_height = min_height;496 new_height = min_height;
497 }497 }
498 // The multi-line editor has to dynamically resize,
499 // in case the widget is fluid.
500 var box_width = this.get(BOUNDING_BOX).get('offsetWidth');
501 var new_width = box_width - 25;
502 input.setStyle('width', new_width + 'px');
498 }503 }
499504
500 this._target_height = new_height;505 this._target_height = new_height;
@@ -1155,7 +1160,7 @@
1155 easing: Y.Easing.easeOut,1160 easing: Y.Easing.easeOut,
1156 duration: 0.2,1161 duration: 0.2,
1157 from: { left: 0 },1162 from: { left: 0 },
1158 to: { left: -4 }1163 to: { left: -7 }
1159 });1164 });
1160 var self = this;1165 var self = this;
1161 anim.on('end', function(e) {1166 anim.on('end', function(e) {
@@ -1469,6 +1474,21 @@
1469 */1474 */
1470 _afterAcceptEmptyChange: function(e) {1475 _afterAcceptEmptyChange: function(e) {
1471 this.editor.set(ACCEPT_EMPTY, e.newVal);1476 this.editor.set(ACCEPT_EMPTY, e.newVal);
1477 },
1478
1479 /**
1480 * Override to disable the widget for certain browsers.
1481 * See the YUI docs on `renderer` for widgets for more.
1482 *
1483 * @method renderer
1484 */
1485 renderer: function() {
1486 if (this.editor.get(MULTILINE) && (Y.UA.ie || Y.UA.opera)) {
1487 return;
1488 }
1489 this.renderUI();
1490 this.bindUI();
1491 this.syncUI();
1472 }1492 }
1473});1493});
14741494

Subscribers

People subscribed via source and target branches