Commit ea5b31df authored by Ruslan Kabalin's avatar Ruslan Kabalin
Browse files

Blogpost: tinymce image popup allows both internal and external images (bug #625081)



    * Choosing of either image inserting method disables another one.
    * When editing existing image, the correct method is used (ether URL
      substituted or image choosen from dropdown list)
    * Image description (alt) is taken from attached image description if one
      is avialable.
Signed-off-by: default avatarRuslan Kabalin <ruslan.kabalin@luns.net.uk>
parent 1beae02f
......@@ -50,26 +50,35 @@ var ImageDialog = {
// Get image list from calling window
document.getElementById('image_list_container').innerHTML = this.imageSelectorHTML(f.src.value);
// Check if the image attached
if (e.nodeName == 'IMG' && f.image_list.selectedIndex == 0) {
f.img_src.value = f.src.value;
}
// Refresh
this.getImageData(f.image_list.options[f.image_list.selectedIndex].value);
},
imageSelectorHTML : function(src) {
var imageid = tinyMCEPopup.getWin().imageIdFromSrc(src);
var imagefiles = tinyMCEPopup.getWin().imageList;
var disabled = '';
if (imagefiles.length == 0) {
return '';
disabled = 'disabled';
}
else {
var sel = '<select class="select" name="image_list" id="image_list" onchange="this.form.src.value=this.options[this.selectedIndex].value;ImageDialog.resetImageData();ImageDialog.getImageData(this.form.src.value);">';
sel += '<option value="">--</option>';
for (var i = 0; i < imagefiles.length; i++) {
sel += '<option value="' + imagefiles[i].id + '"';
if (imageid == imagefiles[i].id) {
sel += ' selected';
}
sel += '>' + imagefiles[i].name + '</option>';
var sel = '<select class="select" name="image_list" id="image_list" ' + disabled + ' onchange="this.form.src.value=this.options[this.selectedIndex].value;ImageDialog.resetImageData();ImageDialog.getImageData(this.form.src.value);">';
sel += '<option value="">--</option>';
for (var i = 0; i < imagefiles.length; i++) {
sel += '<option value="' + imagefiles[i].id + '" title="' + imagefiles[i].description + '"';
if (imageid == imagefiles[i].id) {
sel += ' selected';
}
return sel;
sel += '>' + imagefiles[i].name + '</option>';
}
return sel;
},
update : function() {
......@@ -241,7 +250,7 @@ var ImageDialog = {
resetImageData : function() {
var f = document.forms[0];
f.width.value = f.height.value = "";
f.width.value = f.height.value = f.alt.value = "";
},
updateImageData : function() {
......@@ -256,18 +265,32 @@ var ImageDialog = {
getImageData : function(imageid) {
var f = document.forms[0];
var imgsrc = '';
this.preloadImg = new Image();
this.preloadImg.onload = this.updateImageData;
this.preloadImg.onerror = this.resetImageData;
var imgsrc = tinyMCEPopup.getWin().imageSrcFromId(imageid);
f.src.value = imgsrc;
if (f.image_list.options[f.image_list.selectedIndex].childNodes[0].nodeValue &&
typeof(f.image_list.options[f.image_list.selectedIndex].childNodes[0].nodeValue) == 'string') {
f.alt.value = f.image_list.options[f.image_list.selectedIndex].childNodes[0].nodeValue;
if (imageid) {
// Image list
imgsrc = tinyMCEPopup.getWin().imageSrcFromId(imageid);
f.src.value = imgsrc;
// Use discription of attached image if possible, but preserve if it was changed.
if (f.image_list.options[f.image_list.selectedIndex].title && !f.alt.value.length) {
f.alt.value = f.image_list.options[f.image_list.selectedIndex].title;
}
else if (f.image_list.selectedIndex && !f.alt.value.length) {
f.alt.value = f.image_list.options[f.image_list.selectedIndex].childNodes[0].nodeValue;
}
// Disable img_src inputbox
f.img_src.disabled = true;
}
else {
// Image URL
f.img_src.disabled = false;
f.image_list.disabled = (f.img_src.value.length || f.image_list.options.length == 1) ? true : false;
imgsrc = f.src.value;
}
f.imgid.value = imageid;
this.preloadImg.src = imgsrc;
}
......
......@@ -126,6 +126,9 @@ $string['texttop'] = 'Text top';
$string['textbottom'] = 'Text bottom';
$string['left'] = 'Left';
$string['right'] = 'Right';
$string['src'] = 'Image URL';
$string['image_list'] = 'Attached image';
$string['alt'] = 'Description';
$string['copyfull'] = 'Others will get their own copy of your %s';
$string['copyreference'] = 'Others may display your %s in their View';
......
......@@ -188,78 +188,6 @@ $javascript = <<<EOF
// to select an image from the list of image files attached to the
// post.
// The contents of this function is stolen straight out of the tinyMCE
// code in tinymce/themes/advanced/editor_template_src.js
function getSelectedImgAttributes (editorid) {
var src = "", alt = "", border = "", hspace = "", vspace = "", width = "", height = "", align = "";
var title = "", onmouseover = "", onmouseout = "", action = "insert";
var img = tinyMCE.imgElement;
var inst = tinyMCE.getInstanceById(editorid);
if (tinyMCE.selectedElement != null && tinyMCE.selectedElement.nodeName.toLowerCase() == "img") {
img = tinyMCE.selectedElement;
tinyMCE.imgElement = img;
}
if (img) {
// Is it a internal MCE visual aid image, then skip this one.
if (tinyMCE.getAttrib(img, 'name').indexOf('mce_') == 0)
return true;
src = tinyMCE.getAttrib(img, 'src');
alt = tinyMCE.getAttrib(img, 'alt');
// Try polling out the title
if (alt == "")
alt = tinyMCE.getAttrib(img, 'title');
// Fix width/height attributes if the styles is specified
if (tinyMCE.isGecko) {
var w = img.style.width;
if (w != null && w != "")
img.setAttribute("width", w);
var h = img.style.height;
if (h != null && h != "")
img.setAttribute("height", h);
}
border = tinyMCE.getAttrib(img, 'border');
hspace = tinyMCE.getAttrib(img, 'hspace');
vspace = tinyMCE.getAttrib(img, 'vspace');
width = tinyMCE.getAttrib(img, 'width');
height = tinyMCE.getAttrib(img, 'height');
align = tinyMCE.getAttrib(img, 'align');
onmouseover = tinyMCE.getAttrib(img, 'onmouseover');
onmouseout = tinyMCE.getAttrib(img, 'onmouseout');
title = tinyMCE.getAttrib(img, 'title');
// Is realy specified?
if (tinyMCE.isMSIE) {
width = img.attributes['width'].specified ? width : "";
height = img.attributes['height'].specified ? height : "";
}
src = eval(tinyMCE.settings['urlconverter_callback'] + "(src, img, true);");
// Use mce_src if defined
mceRealSrc = tinyMCE.getAttrib(img, 'mce_src');
if (mceRealSrc != "") {
src = mceRealSrc;
if (tinyMCE.getParam('convert_urls'))
src = eval(tinyMCE.settings['urlconverter_callback'] + "(src, img, true);");
}
action = "update";
}
return {'src' : src, 'alt' : alt, 'border' : border, 'hspace' : hspace, 'vspace' : vspace,
'width' : width, 'height' : height, 'align' : align, 'title' : title,
'onmouseover' : onmouseover, 'onmouseout' : onmouseout, 'action' : action};
}
// Get all the files in the attached files list that have been
// recognised as images. This function is called by the the popup
// window, but needs access to the attachment list on this page
......@@ -268,7 +196,7 @@ function attachedImageList() {
var attachments = editpost_filebrowser.selecteddata;
for (var a in attachments) {
if (attachments[a].artefacttype == 'image') {
images.push({'id': attachments[a].id, 'name': attachments[a].title});
images.push({'id': attachments[a].id, 'name': attachments[a].title, 'description': attachments[a].description});
}
}
return images;
......@@ -294,14 +222,10 @@ function blogpostImageWindow(ui, v) {
var t = tinyMCE.activeEditor;
imageList = attachedImageList();
if (imageList.length == 0) {
alert({$noimagesmessage});
return true;
}
var template = new Array();
template['file'] = '{$wwwroot}artefact/blog/image_popup.php?src=\{\$src\}';
template['file'] = '{$wwwroot}artefact/blog/image_popup.php';
template['width'] = 355;
template['height'] = 275 + (tinyMCE.isMSIE ? 25 : 0);
......
......@@ -5,6 +5,7 @@
<script language="javascript" type="text/javascript" src="{$WWWROOT}js/tinymce/utils/mctabs.js"></script>
<script language="javascript" type="text/javascript" src="{$WWWROOT}js/tinymce/utils/form_utils.js"></script>
<script language="javascript" type="text/javascript" src="{$WWWROOT}artefact/blog/image_popup.js"></script>
<link rel="stylesheet" href="{$WWWROOT}artefact/blog/theme/raw/static/style/style.css"></link>
<base target="_self" />
</head>
<body id="image" style="display: none">
......@@ -20,15 +21,22 @@
<!--input id="src" name="src" type="text" value="" style="width: 200px" onchange="getImageData();" /-->
<input id="src" name="src" type="hidden" value="" />
<input id="imgid" name="imgid" type="hidden" value="" />
<input id="alt" name="alt" type="hidden" value="" />
<div id="srcbrowsercontainer"></div>
<table border="0" cellpadding="4" cellspacing="0">
<tr>
<td class="nowrap"><label for="img_src">{str section=artefact.blog tag=src}</label></td>
<td><input id="img_src" name="img_src" type="text" value="" style="width: 200px" onchange="this.form.src.value=this.value;ImageDialog.getImageData();" onmouseup="this.onchange();" onkeyup="this.onchange();"/></td>
</tr>
<!-- Image list -->
<tr>
<td nowrap="nowrap"><label for="align">{str tag=image}</label></td>
<td nowrap="nowrap"><label for="image_list">{str section=artefact.blog tag=image_list}</label></td>
<td id="image_list_container"></td>
</tr>
<!-- /Image list -->
<tr>
<td class="nowrap"><label for="alt">{str section=artefact.blog tag=alt}</label></td>
<td><input id="alt" name="alt" type="text" value="" style="width: 200px" /></td>
</tr>
<tr>
<td nowrap="nowrap"><label for="align">{str section=artefact.blog tag=alignment}</label></td>
<td><select id="align" name="align">
......
......@@ -89,4 +89,9 @@
}
.attachments .unselect {
font-size: .9167em;
}
/* Insert Image Dialog */
#img_src[disabled=""] {
background-color: #F0F0EE;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment