Ticket #18311: 18311_qtags_ui.diff

File 18311_qtags_ui.diff, 10.7 KB (added by sushkov, 15 months ago)

Cleaned up a bit, added comments, fixed quotes compatiblity

Line 
1diff --git wp-admin/css/wp-admin.dev.css wp-admin/css/wp-admin.dev.css
2index 3b9dca7..c675425 100644
3--- wp-admin/css/wp-admin.dev.css
4+++ wp-admin/css/wp-admin.dev.css
5@@ -3724,7 +3724,8 @@ abbr.required {
6 }
7 
8 .media-item .describe input[type="text"],
9-.media-item .describe textarea {
10+.media-item .describe textarea,
11+.media-item .wp-editor-wrap {
12        width: 460px;
13 }
14 
15@@ -3906,10 +3907,6 @@ abbr.required {
16        border-radius: 3px;
17 }
18 
19-.media-item .post_excerpt textarea {
20-    height: 60px;
21-}
22-
23 /*------------------------------------------------------------------------------
24   14.1 - Media Library
25 ------------------------------------------------------------------------------*/
26diff --git wp-admin/includes/media.php wp-admin/includes/media.php
27index 0ae2f10..9b35a8e 100644
28--- wp-admin/includes/media.php
29+++ wp-admin/includes/media.php
30@@ -788,25 +788,38 @@ function image_link_input_fields($post, $url_type = '') {
31 ";
32 }
33 
34+/**
35+ * Render an editor for image caption
36+ *
37+ * @see `get_attachment_fields_to_edit()`
38+ * @since 3.4
39+ *
40+ * @param Object $edit_post, media item object
41+ * @return String, the generated html
42+ */
43 function wp_caption_input_textarea($edit_post) {
44        // post data is already escaped
45        $name = "attachments[{$edit_post->ID}][post_excerpt]";
46-
47-       return '
48-       <textarea class="code" name="' . $name . '" id="' . $name . '">' . $edit_post->post_excerpt . '</textarea>
49-       <div class="edit-caption-controls hide-if-no-js">
50-       <input type="button" class="button caption-insert-link" value="' . esc_attr__('Insert Link') . '" />
51-       <div class="caption-insert-link-wrap hidden">
52-       <label><span>' . __('Link URL') . '</span>
53-       <input type="text" value="" class="caption-insert-link-url" /></label>
54-       <label><span>' . __('Linked text') . '</span>
55-       <input type="text" value="" class="caption-insert-link-text" /></label>
56-       <div class="caption-insert-link-buttons">
57-       <input type="button" class="button caption-cancel" value="' . esc_attr__('Cancel') . '" />
58-       <input type="button" class="button-primary caption-save" value="' . esc_attr__('Insert') . '" />
59-       <br class="clear" />
60-       </div></div></div>
61-       ';
62+       $defaults = array(
63+               'teeny' => true,
64+               'tinymce' => false,
65+               'media_buttons' => false,
66+               'textarea_rows' => 10,
67+               'quicktags' => array(
68+                       'buttons' => 'strong,em,link,del,ins,code,close'
69+               )
70+       );
71+       $settings = apply_filters( 'caption_input_textarea', $defaults, $edit_post );
72+
73+       // Do not load wpLink if tinymce is not present
74+       // Just plain Quicktags link handler
75+       if ( !$settings['tinymce'] )
76+               wp_deregister_script('wplink');
77+
78+       // Use a buffer to get the output, otherway it will just echo everything
79+       ob_start();
80+       wp_editor( $edit_post->post_excerpt, $name, $settings );
81+       return ob_get_clean();
82 }
83 
84 /**
85diff --git wp-includes/js/tinymce/langs/wp-langs-en.js wp-includes/js/tinymce/langs/wp-langs-en.js
86index 6921eab..53d784a 100644
87--- wp-includes/js/tinymce/langs/wp-langs-en.js
88+++ wp-includes/js/tinymce/langs/wp-langs-en.js
89@@ -499,7 +499,5 @@ s120:"120%",
90 s130:"130%",
91 img_title:"Title",
92 caption:"Caption",
93-insert_link:"Insert link",
94-linked_text:"Linked text",
95 alt:"Alternate Text"
96 });
97diff --git wp-includes/js/tinymce/langs/wp-langs.php wp-includes/js/tinymce/langs/wp-langs.php
98index 625ef75..6100383 100644
99--- wp-includes/js/tinymce/langs/wp-langs.php
100+++ wp-includes/js/tinymce/langs/wp-langs.php
101@@ -542,8 +542,6 @@ function wp_mce_translation() {
102                's130' => __('130%'),
103                'img_title' => __('Title'),
104                'caption' => __('Caption'),
105-               'insert_link' => __('Insert link'),
106-               'linked_text' => __('Linked text'),
107                'alt' => __('Alternate Text')
108        );
109 
110diff --git wp-includes/js/tinymce/plugins/wpeditimage/editimage.html wp-includes/js/tinymce/plugins/wpeditimage/editimage.html
111index 6437801..bddd108 100644
112--- wp-includes/js/tinymce/plugins/wpeditimage/editimage.html
113+++ wp-includes/js/tinymce/plugins/wpeditimage/editimage.html
114@@ -7,6 +7,12 @@
115 <link rel="stylesheet" href="css/editimage.css?ver=348" type="text/css" media="all" />
116 <script type="text/javascript" src="js/editimage.js?ver=348"></script>
117 <script type="text/javascript" src="../../utils/form_utils.js?ver=348"></script>
118+<script type='text/javascript'>
119+/* <![CDATA[ */
120+               window.quicktagsL10n = parent.quicktagsL10n || {};
121+/* ]]> */
122+</script>
123+<script type="text/javascript" src="../../../quicktags.js?ver=3.4"></script>
124 <base target="_self" />
125 </head>
126 
127@@ -101,21 +107,8 @@ if ( 'rtl' == tinyMCEPopup.editor.getParam('directionality','') )
128                                </label>
129                        </th>
130                        <td class="field">
131-                               <textarea id="img_cap_text"></textarea>
132-
133-                               <div class="edit-caption-controls">
134-                               <input type="button" class="button caption-insert-link" value="{#wpeditimage.insert_link}" />
135-
136-                               <div class="caption-insert-link-wrap hidden">
137-                               <label><span>{#advanced_dlg.link_url}</span>
138-                               <input type="text" value="" class="caption-insert-link-url" /></label>
139+                               <textarea id="img_cap_text" rows="5" cols="40"></textarea>
140 
141-                               <label><span>{#wpeditimage.linked_text}</span>
142-                               <input type="text" value="" class="caption-insert-link-text" /></label>
143-
144-                               <div class="caption-insert-link-buttons">
145-                               <input type="button" class="button caption-cancel" value="{#cancel}" />
146-                               <input type="button" class="button-primary caption-save" value="{#insert}" />
147                                <br class="clear" />
148                                </div></div></div>
149                        </td>
150@@ -285,5 +278,17 @@ if ( 'rtl' == tinyMCEPopup.editor.getParam('directionality','') )
151 </form>
152 </div>
153 
154+<div id="quicktags">
155+       <textarea id="editor" rows="5" cols="40"></textarea>
156+       <script type='text/javascript'>
157+       /* <![CDATA[ */
158+                       quicktags({
159+                               id: 'editor',
160+                               buttons: 'strong,em,link,del,ins,code,close'
161+                       });
162+       /* ]]> */
163+       </script>
164+</div>
165+
166 </body>
167 </html>
168diff --git wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.dev.js wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.dev.js
169index 5a27d10..b0ada83 100644
170--- wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.dev.js
171+++ wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.dev.js
172@@ -236,16 +236,19 @@ wpImage = {
173        },
174 
175        init : function() {
176-               var ed = tinyMCEPopup.editor, h;
177+               var ed = tinyMCEPopup.editor, header, img_edit;
178+
179+               header = document.getElementById('media-upload-header');
180+               img_edit = document.getElementById('img-edit');
181+               header.innerHTML = ed.translate(header.innerHTML);
182+               img_edit.innerHTML = ed.translate(img_edit.innerHTML);
183 
184-               h = document.body.innerHTML;
185-               document.body.innerHTML = ed.translate(h);
186                window.setTimeout( function(){wpImage.setup();}, 500 );
187        },
188 
189        setup : function() {
190                var t = this, c, el, link, fname, f = document.forms[0], ed = tinyMCEPopup.editor,
191-                       d = t.I('img_demo'), dom = tinyMCEPopup.dom, DL, DD, caption = '', dlc, pa, bookmark, insert_link;
192+                       d = t.I('img_demo'), dom = tinyMCEPopup.dom, DL, DD, caption = '', dlc, pa;
193 
194                document.dir = tinyMCEPopup.editor.getParam('directionality','');
195 
196@@ -329,80 +332,10 @@ wpImage = {
197                if ( t.width && t.preloadImg.width )
198                        t.showSizeSet();
199               
200-               document.body.style.display = '';
201-
202-               tinyMCEPopup.events.add(document.body, 'click', function(e) {
203-                       var target = e.target, parent = target.parentNode, tr, c, el, textarea, sel, text, startPos, endPos;
204-
205-                       if ( dom.hasClass(target, 'caption-insert-link') ) {
206-                               el = dom.select('div.caption-insert-link-wrap', parent)[0], textarea = dom.select('#img_cap_text')[0];
207-
208-                               if ( document.selection ) {
209-                                       textarea.focus();
210-                                       sel = document.selection.createRange();
211-                                       bookmark = sel.getBookmark();
212-
213-                                       if ( sel.text )
214-                                               dom.select('.caption-insert-link-text', el)[0].value = sel.text;
215-
216-                               } else if ( textarea.selectionStart || textarea.selectionStart == '0' ) {
217-                                       text = textarea.value;
218-                                       startPos = textarea.selectionStart;
219-                                       endPos = textarea.selectionEnd;
220-
221-                                       if ( startPos != endPos )
222-                                               dom.select('.caption-insert-link-text', el)[0].value = text.substring(startPos, endPos);
223-                               }
224-
225-                               dom.hide(target);
226-                               dom.show(el);
227-                               dom.select('.caption-insert-link-url', el)[0].focus();
228-                       } else if ( dom.hasClass(target, 'caption-cancel') || dom.hasClass(target, 'caption-save') ) {
229-                               if ( dom.hasClass(target, 'caption-save') )
230-                                       insert_link();
231-
232-                               dom.hide( dom.select('.caption-insert-link-wrap') );
233-                               dom.show( dom.select('.caption-insert-link') );
234-                       }
235-               });
236-
237-               insert_link = function() {
238-                       var sel, content, startPos, endPos, scrollTop, text, textarea = dom.select('#img_cap_text')[0],
239-                               url = dom.select('.caption-insert-link-url')[0], link_text = dom.select('.caption-insert-link-text')[0];
240-
241-                       if ( !url || !link_text )
242-                               return;
243-
244-                       content = "<a href='"+url.value+"'>"+link_text.value+"</a>";
245+               // Setup the quicktags
246+               wpImage.enableQTags();
247 
248-                       if ( document.selection ) {
249-                               textarea.focus();
250-                               sel = document.selection.createRange();
251-
252-                               if ( bookmark ) {
253-                                       sel.moveToBookmark( bookmark );
254-                                       bookmark = '';
255-                               }
256-
257-                               sel.text = content;
258-                               textarea.focus();
259-                       } else if ( textarea.selectionStart || textarea.selectionStart == '0' ) {
260-                               text = textarea.value;
261-                               startPos = textarea.selectionStart;
262-                               endPos = textarea.selectionEnd;
263-                               scrollTop = textarea.scrollTop;
264-
265-                               textarea.value = text.substring(0, startPos) + content + text.substring(endPos, text.length);
266-
267-                               textarea.focus();
268-                               textarea.selectionStart = startPos + content.length;
269-                               textarea.selectionEnd = startPos + content.length;
270-                               textarea.scrollTop = scrollTop;
271-                       }
272-
273-                       url.value = '';
274-                       link_text.value = '';
275-               };
276+               document.body.style.display = '';
277        },
278 
279        remove : function() {
280@@ -684,9 +617,36 @@ wpImage = {
281                t.preloadImg.onload = t.updateImageData;
282                t.preloadImg.onerror = t.resetImageData;
283                t.preloadImg.src = tinyMCEPopup.editor.documentBaseURI.toAbsolute(f.img_src.value);
284+       },
285+
286+       /**
287+        * Enables a Quicktags editor for the caption textarea
288+        */
289+       enableQTags : function() {
290+               var old = document.getElementById('img_cap_text');
291+               var neu = document.getElementById('quicktags');
292+               var editor = document.getElementById('editor');
293+               var buttons = document.getElementById('qt_editor_toolbar').childNodes;
294+
295+               // Add button classes to quicktags buttons
296+               for (var i=0; i<buttons.length; i++) {
297+                       buttons[i].className += ' button';
298+               }
299+
300+               // Move the new quicktags where old textarea used to be
301+               // QTags breaks if you leave it inside an element that calls `ed.translate()`
302+               old.parentNode.appendChild(neu);
303+               // Hide old textarea, don't remove, it's still being used
304+               old.style.display = 'none';
305+
306+               // Map old textarea value to the new quicktags
307+               editor.value = old.value;
308+               // Replace double-quotes so tinyMCE caption don't break
309+               editor.onchange = function() {
310+                       old.value = this.value.replace(/"/g, "'");
311+               }
312        }
313 };
314 
315 window.onload = function(){wpImage.init();}
316 wpImage.preInit();
317-