add "select class" to the Image pop-up. Props azaozz. fixes #5803

git-svn-id: https://develop.svn.wordpress.org/trunk@6764 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Ryan Boren 2008-02-09 05:00:13 +00:00
parent d9127f97e1
commit 5867d80d9c
5 changed files with 69 additions and 20 deletions

File diff suppressed because one or more lines are too long

View File

@ -37,9 +37,20 @@
<td nowrap="nowrap"><label for="alt">{#advanced_dlg.image_alt}</label></td>
<td><input id="alt" name="alt" type="text" value="" style="width: 200px" /></td>
</tr>
<tr>
<td nowrap="nowrap"><label for="class_list">{#class_name}</label></td>
<td><select id="class_list" name="class_list"></select></td>
</tr>
<tr>
<td nowrap="nowrap"><label for="width">{#advanced_dlg.image_dimensions}</label></td>
<td><input id="width" name="width" type="text" value="" size="3" maxlength="5" />
x
<input id="height" name="height" type="text" value="" size="3" maxlength="5" /></td>
</tr>
<tr><td colspan="2" style="padding-top:12px;"><strong>{#advanced.style_select}:</strong></td></tr>
<tr>
<td nowrap="nowrap"><label for="align">{#advanced_dlg.image_align}</label></td>
<td><select id="align" name="align" onchange="ImageDialog.updateStyle();">
<td style="width: 200px"><select id="align" name="align" onchange="ImageDialog.updateStyle();">
<option value="">{#not_set}</option>
<option value="baseline">{#advanced_dlg.image_align_baseline}</option>
<option value="top">{#advanced_dlg.image_align_top}</option>
@ -51,16 +62,6 @@
<option value="right">{#advanced_dlg.image_align_right}</option>
</select></td>
</tr>
<tr>
<td nowrap="nowrap"><label for="width">{#advanced_dlg.image_dimensions}</label></td>
<td><input id="width" name="width" type="text" value="" size="3" maxlength="5" />
x
<input id="height" name="height" type="text" value="" size="3" maxlength="5" /></td>
</tr>
<tr>
<td nowrap="nowrap"><label for="border">{#advanced_dlg.image_border}</label></td>
<td><input id="border" name="border" type="text" value="" size="3" maxlength="3" onchange="ImageDialog.updateStyle();" /></td>
</tr>
<tr>
<td nowrap="nowrap"><label for="vspace">{#advanced_dlg.image_vspace}</label></td>
<td><input id="vspace" name="vspace" type="text" value="" size="3" maxlength="3" onchange="ImageDialog.updateStyle();" /></td>
@ -69,6 +70,10 @@
<td nowrap="nowrap"><label for="hspace">{#advanced_dlg.image_hspace}</label></td>
<td><input id="hspace" name="hspace" type="text" value="" size="3" maxlength="3" onchange="ImageDialog.updateStyle();" /></td>
</tr>
<tr>
<td nowrap="nowrap"><label for="border">{#advanced_dlg.image_border}</label></td>
<td><input id="border" name="border" type="text" value="" size="3" maxlength="3" onchange="ImageDialog.updateStyle();" /></td>
</tr>
</table>
</div>
</div>

View File

@ -19,6 +19,7 @@ var ImageDialog = {
e = ed.selection.getNode();
this.fillFileList('image_list', 'tinyMCEImageList');
this.fillClassList('class_list');
if (e.nodeName == 'IMG') {
f.src.value = ed.dom.getAttrib(e, 'src');
@ -31,6 +32,7 @@ var ImageDialog = {
f.insert.value = ed.getLang('update');
this.styleVal = ed.dom.getAttrib(e, 'style');
selectByValue(f, 'image_list', f.src.value);
selectByValue(f, 'class_list', ed.dom.getAttrib(e, 'class'));
selectByValue(f, 'align', this.getAttrib(e, 'align'));
this.updateStyle();
}
@ -75,7 +77,8 @@ var ImageDialog = {
src : f.src.value,
alt : f.alt.value,
width : f.width.value,
height : f.height.value
height : f.height.value,
'class' : f.class_list ? f.class_list.options[f.class_list.selectedIndex].value : null
});
el = ed.selection.getNode();
@ -232,7 +235,32 @@ var ImageDialog = {
this.preloadImg.onload = this.updateImageData;
this.preloadImg.onerror = this.resetImageData;
this.preloadImg.src = tinyMCEPopup.editor.documentBaseURI.toAbsolute(f.src.value);
},
fillClassList : function(id) {
var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl;
if (v = tinyMCEPopup.getParam('theme_advanced_styles')) {
cl = [];
tinymce.each(v.split(';'), function(v) {
var p = v.split('=');
cl.push({'title' : p[0], 'class' : p[1]});
});
} else
cl = tinyMCEPopup.editor.dom.getClasses();
if (cl.length > 0) {
lst.options[lst.options.length] = new Option(tinyMCEPopup.getLang('not_set'), '');
tinymce.each(cl, function(o) {
lst.options[lst.options.length] = new Option(o.title || o['class'], o['class']);
});
} else
dom.remove(dom.getParent(id, 'tr'));
}
};
ImageDialog.preInit();

View File

@ -85,7 +85,7 @@ a.charmap {color:#000; text-decoration:none}
/* Panels */
.panel_wrapper div.panel {display:none;}
.panel_wrapper div.current {display:block; width:100%; height:300px; overflow:visible;}
.panel_wrapper div.current {display:block; height:300px; width:100%; overflow:visible;}
.panel_wrapper {border:1px solid #919B9C; border-top:0px; padding:10px; padding-top:5px; clear:both; background:white;}
/* Columns */
@ -101,7 +101,7 @@ h3 {font-size:14px;}
/* Dialog specific */
#link .panel_wrapper, #link div.current {height:125px;}
#image .panel_wrapper, #image div.current {height:200px;}
#image .panel_wrapper, #image div.current {height:255px;}
#plugintable thead {font-weight:bold; background:#DDD;}
#plugintable, #about #plugintable td {border:1px solid #919B9C;}
#plugintable {width:96%; margin-top:10px;}
@ -115,3 +115,4 @@ h3 {font-size:14px;}
#colorpicker #namedcolors {width:150px;}
#colorpicker #namedcolors a {display:block; float:left; width:10px; height:10px; margin:1px 1px 0 0; overflow:hidden;}
#colorpicker #colornamecontainer {margin-top:5px;}
#colorpicker #picker_panel fieldset {margin:auto;width:325px;}

View File

@ -1,8 +1,23 @@
/* This file contains the CSS data for the editable area(iframe) of TinyMCE */
/* You can extend this CSS by adding your own CSS file with the the content_css option */
.alignleft {
float: left;
}
.alignright {
float: right;
}
/*
.aligncenter {
margin-left: auto;
margin-right: auto;
}
*/
/* css for the editor */
body {
background: #fff;
color: #000;
font: 13px/19px "Lucida Grande","Lucida Sans Unicode",Tahoma,Verdana,sans-serif;
padding: .2em;
}
@ -12,7 +27,7 @@ td {
}
pre {
font: 12px/18px "Courier New", fixed;
font: 12px/18px "Courier New", monospace;
}
.mceVisualAid {