From f8012b15fbe9ed00c23b118aff3c2b31a6c88749 Mon Sep 17 00:00:00 2001 From: ryan Date: Sat, 14 Jun 2008 16:38:08 +0000 Subject: [PATCH] Image popup improvements from azaozz. Added translation strings, RTL support, several layout improvements, image border, hspace and vspace can be used as shortcuts to add css styles, the preview is visible on both tabs, etc. see #6811 git-svn-id: http://svn.automattic.com/wordpress/trunk@8083 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-admin/gears-manifest.php | 3 +- wp-includes/js/thickbox/thickbox.css | 7 +- wp-includes/js/tinymce/langs/wp-langs.php | 26 +++ .../plugins/wpeditimage/css/editimage.css | 52 +++-- .../plugins/wpeditimage/editimage.html | 209 ++++++++++-------- .../plugins/wpeditimage/js/editimage.js | 144 +++++++----- wp-includes/js/tinymce/tiny_mce_config.php | 2 +- wp-includes/script-loader.php | 4 +- 8 files changed, 260 insertions(+), 187 deletions(-) diff --git a/wp-admin/gears-manifest.php b/wp-admin/gears-manifest.php index 6fc01da8d..cfb60fcdc 100644 --- a/wp-admin/gears-manifest.php +++ b/wp-admin/gears-manifest.php @@ -87,7 +87,7 @@ header( 'Content-Type: application/x-javascript; charset=UTF-8' ); ?> { "betaManifestVersion" : 1, -"version" : "_20080606", +"version" : "_20080613", "entries" : [ @@ -177,6 +177,7 @@ header( 'Content-Type: application/x-javascript; charset=UTF-8' ); { "url" : "../wp-includes/js/tinymce/plugins/paste/css/pasteword.css?ver=3091" }, { "url" : "../wp-includes/js/tinymce/plugins/paste/css/blank.css?ver=3091" }, { "url" : "../wp-includes/js/tinymce/plugins/wpeditimage/css/editimage.css?ver=3091" }, +{ "url" : "../wp-includes/js/tinymce/plugins/wpeditimage/css/editimage-rtl.css?ver=3091" }, { "url" : "../wp-includes/js/tinymce/wordpress.css?ver=3091" }, { "url" : "../wp-includes/js/tinymce/themes/advanced/img/icons.gif" }, diff --git a/wp-includes/js/thickbox/thickbox.css b/wp-includes/js/thickbox/thickbox.css index cadee178d..a7c4a4012 100644 --- a/wp-includes/js/thickbox/thickbox.css +++ b/wp-includes/js/thickbox/thickbox.css @@ -116,12 +116,13 @@ margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = d #TB_load{ position: fixed; display:none; - height:13px; - width:208px; z-index:103; top: 50%; left: 50%; - margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */ + background-color: #E8E8E8; + border: 4px solid #525252; + margin: -45px 0pt 0pt -125px; + padding: 40px 15px 15px; } * html #TB_load { /* ie6 hack */ diff --git a/wp-includes/js/tinymce/langs/wp-langs.php b/wp-includes/js/tinymce/langs/wp-langs.php index b1875e9a5..d62fd8646 100644 --- a/wp-includes/js/tinymce/langs/wp-langs.php +++ b/wp-includes/js/tinymce/langs/wp-langs.php @@ -397,5 +397,31 @@ wp_help_desc:"' . mce_escape( __('Help') ) . ' (Alt+Shift+H)", wp_more_alt:"' . mce_escape( __('More...') ) . '", wp_page_alt:"' . mce_escape( __('Next page...') ) . '" }); + +tinyMCE.addI18n("' . $language . '.wpeditimage",{ +edit_img:"' . mce_escape( __('Edit Image') ) . '", +adv_settings:"' . mce_escape( __('Advanced Settings') ) . '", +none:"' . mce_escape( __('None') ) . '", +size:"' . mce_escape( __('Size') ) . '", +thumbnail:"' . mce_escape( __('Thumbnail') ) . '", +medium:"' . mce_escape( __('Medium') ) . '", +full_size:"' . mce_escape( __('Full Size') ) . '", +alt_help:"' . js_escape( __('Alternate text, e.g. "The Mona Lisa"') ) . '", +current_link:"' . mce_escape( __('Current Link') ) . '", +link_to_img:"' . mce_escape( __('Link to Image') ) . '", +link_help:"' . mce_escape( __('Enter a link URL or click above for presets.') ) . '", +adv_img_settings:"' . mce_escape( __('Advanced Image Settings') ) . '", +source:"' . mce_escape( __('Source') ) . '", +width:"' . mce_escape( __('Width') ) . '", +height:"' . mce_escape( __('Height') ) . '", +orig_size:"' . mce_escape( __('Original Size') ) . '", +css:"' . mce_escape( __('CSS Class') ) . '", +adv_link_settings:"' . mce_escape( __('Advanced Link Settings') ) . '", +link_rel:"' . mce_escape( __('Link Rel') ) . '", +height:"' . mce_escape( __('Height') ) . '", +orig_size:"' . mce_escape( __('Original Size') ) . '", +css:"' . mce_escape( __('CSS Class') ) . '", +caption:"' . mce_escape( __('Caption') ) . '" +}); '; ?> \ No newline at end of file diff --git a/wp-includes/js/tinymce/plugins/wpeditimage/css/editimage.css b/wp-includes/js/tinymce/plugins/wpeditimage/css/editimage.css index 48a5a9f56..2519bbb6d 100644 --- a/wp-includes/js/tinymce/plugins/wpeditimage/css/editimage.css +++ b/wp-includes/js/tinymce/plugins/wpeditimage/css/editimage.css @@ -38,15 +38,17 @@ abbr.required { text-align: left; } +img.alignright, .alignright { float: right; } +img.alignleft, .alignleft { float: left; } -.aligncenter { +img.aligncenter { display: block; margin-left: auto; margin-right: auto; @@ -61,8 +63,9 @@ th.label { } .show-align { - padding: 8px; height: 200px; + width: 480px; + float: right; background-color: #f1f1f1; cursor: default; -moz-user-select: none; @@ -73,7 +76,7 @@ th.label { #media-upload #img-edit { border: 1px solid #c0c0c0; width: 623px; - margin: 20px auto auto; + margin: 15px auto; } #media-upload .media-upload-form table.describe { @@ -90,7 +93,7 @@ th.label { } #img_demo { - padding: 0 5px 4px; + padding: 0; } #saveeditimg { @@ -137,31 +140,38 @@ th.label { } #media-upload h3 { - clear:both; - padding:0pt 0pt 3px; - border-bottom-style:solid; - border-bottom-width:1px; - font-family:Georgia,"Times New Roman",Times,serif; - font-size:20px; - font-weight:normal; - line-height:normal; - margin:20px 0 15px -4px; - padding:0 0 3px 0; - border-bottom-color:#DADADA; - color:#5A5A5A; + clear: both; + padding: 0pt 0pt 3px; + border-bottom-style: solid; + border-bottom-width: 1px; + font-family: Georgia,"Times New Roman",Times,serif; + font-size: 20px; + font-weight: normal; + line-height: normal; + margin: 0 0 10px -4px; + padding: 15px 0 3px; + border-bottom-color: #DADADA; + color: #5A5A5A; } #img_dim #width, -#img_dim #height { - width:40px; +#img_dim #height, +#img_prop #border, +#img_prop #vspace, +#img_prop #hspace { + width: 36px; } #img_dim abbr { padding: 0 4px; } -#basic .align .field label { - margin: 0 10px 0 0; - padding: 0 0 0 25px; +#show_align_sp { + width: 115px; +} + +#img_dim input, +#img_prop input { + margin-right: 10px; } diff --git a/wp-includes/js/tinymce/plugins/wpeditimage/editimage.html b/wp-includes/js/tinymce/plugins/wpeditimage/editimage.html index 33ccc5f52..1d1188abe 100644 --- a/wp-includes/js/tinymce/plugins/wpeditimage/editimage.html +++ b/wp-includes/js/tinymce/plugins/wpeditimage/editimage.html @@ -1,5 +1,5 @@ - + @@ -9,38 +9,84 @@ +
-
-
+ -
+ +
Lorem ipsum dolor sit amet consectetuer velit pretium euismod ipsum enim. Mi cursus at a mollis senectus id arcu gravida quis urna. Sed et felis id tempus Morbi mauris tincidunt enim In mauris. Pede eu risus velit libero natoque enim lorem adipiscing ipsum consequat. In malesuada et sociis tincidunt tempus pellentesque cursus convallis ipsum Suspendisse. Risus In ac quis ut Nunc convallis laoreet ante Suspendisse Nam. Amet amet urna condimentum Vestibulum sem at Curabitur lorem et cursus. Sodales tortor fermentum leo dui habitant Nunc Sed Vestibulum. Ut lorem In penatibus libero id ipsum sagittis nec elit Sed. Condimentum eget Vivamus vel consectetuer lorem molestie turpis amet tellus id. Condimentum vel ridiculus Fusce sed pede Nam nunc sodales eros tempor. Sit lacus magna dictumst Curabitur fringilla auctor id vitae wisi facilisi. Fermentum eget turpis felis velit leo Nunc Proin orci molestie Praesent. Curabitur tellus scelerisque suscipit ut sem amet cursus mi Morbi eu. Donec libero Vestibulum augue et mollis accumsan ornare condimentum In enim. Leo eget ac consectetuer quis condimentum malesuada. Condimentum commodo et Lorem fringilla malesuada libero volutpat sem tellus enim. Tincidunt sed at Aenean nec nonummy porttitor Nam Sed Nulla ut. Auctor leo In aliquet Curabitur eros et velit Quisque justo morbi. Et vel mauris sit nulla semper vitae et quis at dui. Id at elit laoreet justo eu mauris Quisque et interdum pharetra. Nullam accumsan interdum Maecenas condimentum quis quis Fusce a sollicitudin Sed. Non Quisque Vivamus congue porttitor non semper ipsum porttitor quis vel. Donec eros lacus volutpat et tincidunt sem convallis id venenatis sit. Consectetuer odio. - Semper faucibus Morbi nulla convallis orci Aliquam Sed porttitor et Pellentesque. Venenatis laoreet lorem id a a Morbi augue turpis id semper. Arcu volutpat ac mauris Vestibulum fringilla Aenean condimentum nibh sed id. Sagittis eu lacus orci urna tellus tellus pretium Curabitur dui nunc. Et nibh eu eu nibh adipiscing at lorem Vestibulum adipiscing augue. Magna convallis Phasellus dolor malesuada Curabitur ornare adipiscing tellus Aliquam tempus. Id Aliquam Integer augue Nulla consectetuer ac Donec Curabitur tincidunt et. Id vel Nunc amet lacus dui magna ridiculus penatibus laoreet Duis. Enim sagittis nibh quis Nulla nec laoreet vel Maecenas mattis vel. Nullam velit est Curabitur gravida Vestibulum justo. + Semper faucibus Morbi nulla convallis orci Aliquam Sed porttitor et Pellentesque. Venenatis laoreet lorem id a a Morbi augue turpis id semper. Arcu volutpat ac mauris Vestibulum fringilla Aenean condimentum nibh sed id. Sagittis eu lacus orci urna tellus tellus pretium Curabitur dui nunc. Et nibh eu eu nibh adipiscing at lorem Vestibulum adipiscing augue. Magna convallis Phasellus dolor malesuada Curabitur ornare adipiscing tellus Aliquam tempus. Id Aliquam Integer augue Nulla consectetuer ac Donec Curabitur tincidunt et. Id vel Nunc amet lacus dui magna ridiculus penatibus laoreet Duis. Enim sagittis nibh quis Nulla nec laoreet vel Maecenas mattis vel.
- +
+
+ + + + + + + + + + + @@ -52,109 +98,69 @@ - - - - - - - - - -
+ + + + + + + + + + + + + +
+ + + + + + + + + + +
-

Alternate text, e.g. "The Mona Lisa"

+

{#wpeditimage.alt_help}

- - - -

Enter a link URL or click above for presets.

-
- - - - - - - - - - - - - -
- - - - - - - - - - + + + +

{#wpeditimage.link_help}
- - - diff --git a/wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.js b/wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.js index 8a218a1de..50355142c 100644 --- a/wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.js +++ b/wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.js @@ -94,6 +94,7 @@ var wpImage = { current : '', link : '', link_rel : '', + target_value : '', setTabs : function(tab) { var t = this; @@ -179,11 +180,11 @@ var wpImage = { if ( W > H ) { m = Math.min(W, m); f.width.value = m; - f.height.value = Math.floor((m / W) * H); + f.height.value = Math.round((m / W) * H); } else { m = Math.min(H, m); f.height.value = m; - f.width.value = Math.floor((m / H) * W); + f.width.value = Math.round((m / H) * W); } t.width = f.width.value; @@ -195,8 +196,15 @@ var wpImage = { demoSetSize : function(img) { var demo = this.I('img_demo'), f = document.forms[0]; - demo.style.width = f.width.value ? Math.floor(f.width.value * 0.6) + 'px' : ''; - demo.style.height = f.height.value ? Math.floor(f.height.value * 0.6) + 'px' : '60%'; + demo.width = f.width.value ? Math.floor(f.width.value * 0.5) : ''; + demo.height = f.height.value ? Math.floor(f.height.value * 0.5) : ''; + }, + + demoSetStyle : function() { + var f = document.forms[0], demo = this.I('img_demo'); + + if (demo) + tinyMCEPopup.editor.dom.setAttrib(demo, 'style', f.img_style.value); }, origSize : function() { @@ -217,14 +225,13 @@ var wpImage = { if (tinymce.isIE) h = h.replace(/ (value|title|alt)=([^"][^\s>]+)/gi, ' $1="$2"') - document.dir = ed.getParam('directionality',''); document.body.innerHTML = ed.translate(h); window.setTimeout( function(){wpImage.setup();}, 100 ); }, setup : function() { - var t = this, h, c, el, id, link, fname, f = document.forms[0], ed = tinyMCEPopup.editor, d = t.I('img_demo'), tr = ed.translate; - + var t = this, h, c, el, id, link, fname, f = document.forms[0], ed = tinyMCEPopup.editor, d = t.I('img_demo'), dom = tinyMCEPopup.dom; + document.dir = tinyMCEPopup.editor.getParam('directionality',''); tinyMCEPopup.restoreSelection(); el = ed.selection.getNode(); if (el.nodeName != 'IMG') return; @@ -241,18 +248,31 @@ var wpImage = { f.height.value = t.height = ed.dom.getAttrib(el, 'height'); f.img_classes.value = c = ed.dom.getAttrib(el, 'class'); f.img_style.value = ed.dom.getAttrib(el, 'style'); - this.updateStyle(); + + // Move attribs to styles + if (dom.getAttrib(el, 'align')) + t.updateStyle('align'); + + if (dom.getAttrib(el, 'hspace')) + t.updateStyle('hspace'); + + if (dom.getAttrib(el, 'border')) + t.updateStyle('border'); + + if (dom.getAttrib(el, 'vspace')) + t.updateStyle('vspace'); if (pa = ed.dom.getParent(el, 'A')) { f.link_href.value = t.current = ed.dom.getAttrib(pa, 'href'); f.link_title.value = ed.dom.getAttrib(pa, 'title'); f.link_rel.value = t.link_rel = ed.dom.getAttrib(pa, 'rel'); - f.link_rev.value = ed.dom.getAttrib(pa, 'rev'); f.link_style.value = ed.dom.getAttrib(pa, 'style'); - f.link_target.value = ed.dom.getAttrib(pa, 'target'); + t.target_value = ed.dom.getAttrib(pa, 'target'); f.link_classes.value = ed.dom.getAttrib(pa, 'class'); } + f.link_target.checked = ( t.target_value && t.target_value == '_blank' ) ? 'checked' : ''; + fname = link.substring( link.lastIndexOf('/') ); fname = fname.replace(/-[0-9]{2,4}x[0-9]{2,4}/, '' ); t.link = link.substring( 0, link.lastIndexOf('/') ) + fname; @@ -280,11 +300,13 @@ var wpImage = { document.body.style.display = ''; t.getImageData(); + t.demoSetStyle(); - if ( (id = c.match( /wp-image-([0-9]{1,6})/ )) && id[1] ) { - t.I('tab_attachment').href = tinymce.documentBaseURL + 'media.php?action=edit&attachment_id=' + id[1]; - t.I('tab_attachment').style.display = 'inline'; - } + // Test if is attachment +// if ( (id = c.match( /wp-image-([0-9]{1,6})/ )) && id[1] ) { +// t.I('tab_attachment').href = tinymce.documentBaseURL + 'media.php?action=edit&attachment_id=' + id[1]; +// t.I('tab_attachment').style.display = 'inline'; +// } }, remove : function() { @@ -350,8 +372,7 @@ var wpImage = { href : f.link_href.value, title : f.link_title.value, rel : f.link_rel.value, - rev : f.link_rev.value, - target : f.link_target.value, + target : (f.link_target.checked == true) ? '_blank' : '', 'class' : f.link_classes.value, style : f.link_style.value }); @@ -362,8 +383,7 @@ var wpImage = { href : f.link_href.value, title : f.link_title.value, rel : f.link_rel.value, - rev : f.link_rev.value, - target : f.link_target.value, + target : (f.link_target.checked == true) ? '_blank' : '', 'class' : f.link_classes.value, style : f.link_style.value }); @@ -372,63 +392,65 @@ var wpImage = { tinyMCEPopup.execCommand("mceEndUndoLevel"); tinyMCEPopup.close(); }, - - updateStyle : function() { - var dom = tinyMCEPopup.dom, st, v, f = document.forms[0]; + + updateStyle : function(ty) { + var dom = tinyMCEPopup.dom, st, v, f = document.forms[0], img = dom.create('img', {style : f.img_style.value}); if (tinyMCEPopup.editor.settings.inline_styles) { - st = tinyMCEPopup.dom.parseStyle(f.img_style.value); - // Handle align - v = f.align.value; - if (v) { - if (v == 'left' || v == 'right') { - st['float'] = v; - delete st['vertical-align']; - } else { - st['vertical-align'] = v; - delete st['float']; + if (ty == 'align') { + dom.setStyle(img, 'float', ''); + dom.setStyle(img, 'vertical-align', ''); + + v = f.align.value; + if (v) { + if (v == 'left' || v == 'right') + dom.setStyle(img, 'float', v); + else + img.style.verticalAlign = v; } - } else { - delete st['float']; - delete st['vertical-align']; } // Handle border - v = f.border.value; - if (v || v == '0') { - if (v == '0') - st['border'] = '0'; - else - st['border'] = v + 'px solid black'; - } else - delete st['border']; + if (ty == 'border') { + dom.setStyle(img, 'border', ''); + + v = f.border.value; + if (v || v == '0') { + if (v == '0') + img.style.border = '0'; + else + img.style.border = v + 'px solid black'; + } + } // Handle hspace - v = f.hspace.value; - if (v) { - delete st['margin']; - st['margin-left'] = v + 'px'; - st['margin-right'] = v + 'px'; - } else { - delete st['margin-left']; - delete st['margin-right']; + if (ty == 'hspace') { + dom.setStyle(img, 'marginLeft', ''); + dom.setStyle(img, 'marginRight', ''); + + v = f.hspace.value; + if (v) { + img.style.marginLeft = v + 'px'; + img.style.marginRight = v + 'px'; + } } // Handle vspace - v = f.vspace.value; - if (v) { - delete st['margin']; - st['margin-top'] = v + 'px'; - st['margin-bottom'] = v + 'px'; - } else { - delete st['margin-top']; - delete st['margin-bottom']; + if (ty == 'vspace') { + dom.setStyle(img, 'marginTop', ''); + dom.setStyle(img, 'marginBottom', ''); + + v = f.vspace.value; + if (v) { + img.style.marginTop = v + 'px'; + img.style.marginBottom = v + 'px'; + } } // Merge - st = tinyMCEPopup.dom.parseStyle(dom.serializeStyle(st)); - f.img_style.value = dom.serializeStyle(st); + f.img_style.value = dom.serializeStyle(dom.parseStyle(img.style.cssText)); + this.demoSetStyle(); } }, @@ -444,7 +466,7 @@ var wpImage = { resetImageData : function() { var f = document.forms[0]; - f.width.value = f.height.value = ""; + f.width.value = f.height.value = ''; }, updateImageData : function() { diff --git a/wp-includes/js/tinymce/tiny_mce_config.php b/wp-includes/js/tinymce/tiny_mce_config.php index 6f7b0cc0b..cb02a1e56 100644 --- a/wp-includes/js/tinymce/tiny_mce_config.php +++ b/wp-includes/js/tinymce/tiny_mce_config.php @@ -226,7 +226,7 @@ if ( $compress && isset($_SERVER['HTTP_ACCEPT_ENCODING']) ) { // Setup cache info if ( $disk_cache ) { - $cacheKey = apply_filters('tiny_mce_version', '20080606'); + $cacheKey = apply_filters('tiny_mce_version', '20080613'); foreach ( $initArray as $v ) $cacheKey .= $v; diff --git a/wp-includes/script-loader.php b/wp-includes/script-loader.php index 3615d41e1..55af06fe7 100644 --- a/wp-includes/script-loader.php +++ b/wp-includes/script-loader.php @@ -35,7 +35,7 @@ function wp_default_scripts( &$scripts ) { $scripts->add( 'editor_functions', '/wp-admin/js/editor.js', false, '20080325' ); // Modify this version when tinyMCE plugins are changed. - $mce_version = apply_filters('tiny_mce_version', '20080606'); + $mce_version = apply_filters('tiny_mce_version', '20080613'); $scripts->add( 'tiny_mce', '/wp-includes/js/tinymce/tiny_mce_config.php', array('editor_functions'), $mce_version ); $scripts->add( 'prototype', '/wp-includes/js/prototype.js', false, '1.6'); @@ -226,7 +226,7 @@ function wp_default_styles( &$styles ) { $styles->add( 'install', '/wp-admin/css/install.css' ); $styles->add( 'theme-editor', '/wp-admin/css/theme-editor.css' ); $styles->add( 'press-this', '/wp-admin/css/press-this.css' ); - $styles->add( 'thickbox', '/wp-includes/js/thickbox/thickbox.css' ); + $styles->add( 'thickbox', '/wp-includes/js/thickbox/thickbox.css', array(), '20080613' ); $styles->add( 'login', '/wp-admin/css/login.css' ); foreach ( $rtl_styles as $rtl_style )