Automatically add classes to images for floated images. Props azaozz. fixes #5803
git-svn-id: https://develop.svn.wordpress.org/trunk@6769 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Ryan Boren
parent
5deeece50b
commit
671d6a0692
File diff suppressed because one or more lines are too long
|
|
@ -2,12 +2,12 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>{#advanced_dlg.image_title}</title>
|
||||
<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
|
||||
<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
|
||||
<script type="text/javascript" src="../../utils/mctabs.js"></script>
|
||||
<script type="text/javascript" src="../../utils/form_utils.js"></script>
|
||||
<script type="text/javascript" src="js/image.js"></script>
|
||||
<script type="text/javascript">tinyMCEPopup.onInit.add(function(){window.setTimeout(function(){document.getElementById('src').focus();},500);});</script>
|
||||
<base target="_self" />
|
||||
<base target="_self" />
|
||||
</head>
|
||||
<body id="image" style="display: none">
|
||||
<form onsubmit="ImageDialog.update();return false;" action="#">
|
||||
|
|
@ -18,8 +18,8 @@
|
|||
</div>
|
||||
|
||||
<div class="panel_wrapper">
|
||||
<div id="general_panel" class="panel current">
|
||||
<table border="0" cellpadding="4" cellspacing="0">
|
||||
<div id="general_panel" class="panel current">
|
||||
<table border="0" cellpadding="4" cellspacing="0">
|
||||
<tr>
|
||||
<td nowrap="nowrap"><label for="src">{#advanced_dlg.image_src}</label></td>
|
||||
<td><table border="0" cellspacing="0" cellpadding="0">
|
||||
|
|
@ -37,20 +37,9 @@
|
|||
<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 style="width: 200px"><select id="align" name="align" onchange="ImageDialog.updateStyle();">
|
||||
<tr>
|
||||
<td nowrap="nowrap"><label for="align">{#advanced_dlg.image_align}</label></td>
|
||||
<td><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>
|
||||
|
|
@ -62,6 +51,16 @@
|
|||
<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>
|
||||
|
|
@ -70,11 +69,8 @@
|
|||
<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>
|
||||
<input type="hidden" id="class_name" name="class_name" value="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ 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');
|
||||
|
|
@ -32,7 +31,6 @@ 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();
|
||||
}
|
||||
|
|
@ -70,15 +68,18 @@ var ImageDialog = {
|
|||
border : nl.border.value,
|
||||
align : getSelectValue(f, 'align')
|
||||
});
|
||||
} else
|
||||
args.style = this.styleVal;
|
||||
|
||||
} else {
|
||||
args = tinymce.extend(args, {
|
||||
style : this.styleVal,
|
||||
'class' : f.class_name.value
|
||||
});
|
||||
}
|
||||
|
||||
tinymce.extend(args, {
|
||||
src : f.src.value,
|
||||
alt : f.alt.value,
|
||||
width : f.width.value,
|
||||
height : f.height.value,
|
||||
'class' : f.class_list ? f.class_list.options[f.class_list.selectedIndex].value : null
|
||||
height : f.height.value
|
||||
});
|
||||
|
||||
el = ed.selection.getNode();
|
||||
|
|
@ -106,13 +107,16 @@ var ImageDialog = {
|
|||
if (v == 'left' || v == 'right') {
|
||||
st['float'] = v;
|
||||
delete st['vertical-align'];
|
||||
f.class_name.value = (v == 'right') ? 'alignright' : 'alignleft';
|
||||
} else {
|
||||
st['vertical-align'] = v;
|
||||
delete st['float'];
|
||||
f.class_name.value = null;
|
||||
}
|
||||
} else {
|
||||
delete st['float'];
|
||||
delete st['vertical-align'];
|
||||
f.class_name.value = null;
|
||||
}
|
||||
|
||||
// Handle border
|
||||
|
|
@ -235,32 +239,7 @@ 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();
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ a.charmap {color:#000; text-decoration:none}
|
|||
|
||||
/* Panels */
|
||||
.panel_wrapper div.panel {display:none;}
|
||||
.panel_wrapper div.current {display:block; height:300px; width:100%; overflow:visible;}
|
||||
.panel_wrapper div.current {display:block; width:100%; height:300px; 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:255px;}
|
||||
#image .panel_wrapper, #image div.current {height:200px;}
|
||||
#plugintable thead {font-weight:bold; background:#DDD;}
|
||||
#plugintable, #about #plugintable td {border:1px solid #919B9C;}
|
||||
#plugintable {width:96%; margin-top:10px;}
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ tinyMCEPopup = {
|
|||
close : function() {
|
||||
var t = this;
|
||||
|
||||
t.dom = t.dom.doc = null; // Cleanup
|
||||
t.dom = null; // t.dom.doc = null; // Cleanup
|
||||
t.editor.windowManager.close(window, t.id);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,5 @@
|
|||
/* This file contains the CSS data for the editable area(iframe) of TinyMCE */
|
||||
|
||||
.alignleft {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.alignright {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/*
|
||||
.aligncenter {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
*/
|
||||
/* css for the editor */
|
||||
body {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
|
|
|
|||
Loading…
Reference in New Issue