Skip to content
GitLab
Commit d1b33d3a authored by Richard Mansfield's avatar Richard Mansfield
Browse files

Make blogpost image insert button a tinymce inline popup (bug 1912)

parent 6fb3671f
Hide whitespace changes
Inline Side-by-side
htdocs/artefact/blog/image_popup.js 0 → 100644
View file @ d1b33d3a
function insertImage() {
var src = document.forms[0].src.value;
var alt = document.forms[0].alt.value;
var border = document.forms[0].border.value;
var vspace = document.forms[0].vspace.value;
var hspace = document.forms[0].hspace.value;
var width = document.forms[0].width.value;
var height = document.forms[0].height.value;
var align = document.forms[0].align.options[document.forms[0].align.selectedIndex].value;
tinyMCEPopup.restoreSelection();
tinyMCE.themes['advanced']._insertImage(src, alt, border, hspace, vspace, width, height, align);
tinyMCEPopup.close();
}
function imageSelectorHTML(src) {
var imageid = tinyMCEPopup.windowOpener.imageIdFromSrc(src);
var imagefiles = tinyMCEPopup.windowOpener.imageList;
if (imagefiles.length == 0) {
return '';
}
else {
var sel = '<select class="select" name="image_list" id="image_list" onchange="this.form.src.value=this.options[this.selectedIndex].value;resetImageData();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>';
}
return sel;
}
}
function init() {
tinyMCEPopup.resizeToInnerSize();
var formObj = document.forms[0];
for (var i=0; i<document.forms[0].align.options.length; i++) {
if (document.forms[0].align.options[i].value == tinyMCE.getWindowArg('align'))
document.forms[0].align.options.selectedIndex = i;
}
formObj.src.value = tinyMCE.getWindowArg('src');
formObj.alt.value = tinyMCE.getWindowArg('alt');
formObj.border.value = tinyMCE.getWindowArg('border');
formObj.vspace.value = tinyMCE.getWindowArg('vspace');
formObj.hspace.value = tinyMCE.getWindowArg('hspace');
formObj.width.value = tinyMCE.getWindowArg('width');
formObj.height.value = tinyMCE.getWindowArg('height');
formObj.insert.value = tinyMCE.getLang('lang_' + tinyMCE.getWindowArg('action'), 'Insert', true);
// Handle file browser
if (isVisible('srcbrowser'))
document.getElementById('src').style.width = '180px';
// Get image list from calling window
document.getElementById('image_list_container').innerHTML = imageSelectorHTML(formObj.src.value);
}
var preloadImg = new Image();
function resetImageData() {
var formObj = document.forms[0];
formObj.width.value = formObj.height.value = "";
}
function updateImageData() {
var formObj = document.forms[0];
if (formObj.width.value == "")
formObj.width.value = preloadImg.width;
if (formObj.height.value == "")
formObj.height.value = preloadImg.height;
}
function getImageData(imageid) {
preloadImg = new Image();
tinyMCE.addEvent(preloadImg, "load", updateImageData);
tinyMCE.addEvent(preloadImg, "error", function () {var formObj = document.forms[0];formObj.width.value = formObj.height.value = "";});
var imgsrc = tinyMCEPopup.windowOpener.imageSrcFromId(imageid);
var f = document.forms[0];
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;
}
f.imgid.value = imageid;
preloadImg.src = imgsrc;
}
htdocs/artefact/blog/image_popup.php 0 → 100644
View file @ d1b33d3a
<?php
/**
* Mahara: Electronic portfolio, weblog, resume builder and social networking
* Copyright (C) 2006-2007 Catalyst IT Ltd (http://www.catalyst.net.nz)
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
* @package mahara
* @subpackage artefact-blog
* @author Alastair Pharo <alastair@catalyst.net.nz>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL
* @copyright (C) 2006,2007 Catalyst IT Ltd http://catalyst.net.nz
*
*/
define('INTERNAL', 1);
require(dirname(dirname(dirname(__FILE__))) . '/init.php');
$smarty = smarty_core();
$smarty->display('artefact:blog:image_popup.tpl');
?>
htdocs/artefact/blog/post.php
View file @ d1b33d3a
......@@ -141,31 +141,15 @@ $getstring = quotestrings(array(
'mahara' => array(
),
'artefact.blog' => array(
'absolutemiddle',
'absolutebottom',
'alignment',
'attach',
'baseline',
'blogpost',
'border',
'bottom',
'cancel',
'dimensions',
'horizontalspace',
'insert',
'insertimage',
'left',
'mustspecifycontent',
'mustspecifytitle',
'middle',
'name',
'nofilesattachedtothispost',
'remove',
'right',
'texttop',
'top',
'update',
'verticalspace',
'noimageshavebeenattachedtothispost',
)));
......@@ -475,44 +459,6 @@ function attachedImageList() {
}
function insertImage() {
var form = $('insertimageform');
var alt = scrapeText(form.imageselector.options[form.imageselector.selectedIndex]);
var src = imageSrcFromId(form.imgid.value);
var border = form.border.value;
var vspace = form.vspace.value;
var hspace = form.hspace.value;
var height = form.height.value;
var width = form.width.value;
var align = form.align.value;
// Insert image doesn't work in IE without first focusing the editor:
tinyMCE.execCommand('mceFocus', false, 'mce_editor_0');
tinyMCE.themes['advanced']._insertImage(src, alt, border, hspace, vspace,
width, height, align, '', '', '');
replaceChildNodes('insertimage', null);
}
function resetImageData() {
var form = $('insertimageform');
form.width.value = form.height.value = "";
}
var preloadImage = new Image();
function updateImageData() {
var form = $('insertimageform');
if (form.width.value == "") {
form.width.value = preloadImage.width;
}
if (form.height.value == "") {
form.height.value = preloadImage.height;
}
}
function imageSrcFromId(imageid) {
var idparts = imageid.split(':');
if (idparts[0] == 'artefact') {
......@@ -525,21 +471,6 @@ function imageSrcFromId(imageid) {
return '';
}
function getImageData(imageid) {
preloadImage = new Image();
preloadImage.onload = updateImageData;
preloadImage.onerror = function () {
var form = $('insertimageform');
form.width.value = form.height.value = "";
};
var imgsrc = imageSrcFromId(imageid);
$('insertimageform').imgsrc.value = imgsrc;
$('insertimageform').imgid.value = imageid;
preloadImage.src = imgsrc;
}
function imageIdFromSrc(src) {
var artefactstring = 'download.php?file=';
var ind = src.indexOf(artefactstring);
......@@ -554,97 +485,32 @@ function imageIdFromSrc(src) {
return '';
}
function imageSelector(src) {
var imageid = imageIdFromSrc(src);
var imagefiles = attachedImageList();
if (imagefiles.length == 0) {
return false;
}
else {
var sel = SELECT({'class':'select', 'id':'imageselector'});
appendChildNodes(sel, OPTION({'value':''}, '--'));
for (var i = 0; i < imagefiles.length; i++) {
if (imageid == imagefiles[i].id) {
appendChildNodes(sel, OPTION({'value':imagefiles[i].id, 'selected':true},
imagefiles[i].name));
}
else {
appendChildNodes(sel, OPTION({'value':imagefiles[i].id}, imagefiles[i].name));
}
}
sel.onchange = function () {
resetImageData();
$('insertimageform').imgid.value = sel.value;
getImageData(sel.value);
};
return sel;
}
}
function alignSelector(align) {
var sel = SELECT({'name':'align', 'class':'select'});
var options = {'' : '--',
'baseline': {$getstring['baseline']},
'top': {$getstring['top']},
'middle': {$getstring['middle']},
'bottom': {$getstring['bottom']},
'texttop': {$getstring['texttop']},
'absmiddle': {$getstring['absolutemiddle']},
'absbottom': {$getstring['absolutebottom']},
'left': {$getstring['left']},
'right': {$getstring['right']}};
for (option in options) {
if (align == option) {
appendChildNodes(sel, OPTION({'value':option, 'selected':true}, options[option]));
}
else {
appendChildNodes(sel, OPTION({'value':option}, options[option]));
}
}
return sel;
}
var imageList = {};
function blogpostExecCommandHandler(editor_id, elm, command, user_interface, value) {
var linkElm, imageElm, inst;
switch (command) {
case "mceImage":
a = getSelectedImgAttributes(editor_id);
var sel = imageSelector(a.src);
if (!sel) {
imageList = attachedImageList();
if (imageList.length == 0) {
alert({$getstring['noimageshavebeenattachedtothispost']});
return true;
}
var tbody = TBODY(null,
TR(null, TH({'colSpan':2}, LABEL(null,{$getstring['insertimage']}))),
TR(null, TH(null, LABEL(null,{$getstring['name']})),
TD(null, sel)),
TR(null, TH(null, LABEL(null,{$getstring['alignment']})),
TD(null, alignSelector(a.align))),
TR(null, TH(null, LABEL(null,{$getstring['dimensions']})),
TD(null,INPUT({'type':'text', 'class':'text', 'name':'width', 'size':3, 'value':a.width}),
' x ', INPUT({'type':'text', 'class':'text', 'name':'height', 'size':3, 'value':a.height}))),
TR(null, TH(null, LABEL(null,{$getstring['border']})),
TD(null,INPUT({'type':'text', 'class':'text', 'name':'border', 'size':3, 'value':a.border}))),
TR(null, TH(null, LABEL(null,{$getstring['verticalspace']})),
TD(null,INPUT({'type':'text', 'class':'text', 'name':'vspace', 'size':3, 'value':a.vspace}))),
TR(null, TH(null, LABEL(null,{$getstring['horizontalspace']})),
TD(null,INPUT({'type':'text', 'class':'text', 'name':'hspace', 'size':3, 'value':a.hspace}))));
var imageform = FORM({'id':'insertimageform'},
INPUT({'type':'hidden', 'name':'imgsrc', 'value':a.src}),
INPUT({'type':'hidden', 'name':'imgid', 'value':imageIdFromSrc(a.src)}),
TABLE(null,tbody));
appendChildNodes(tbody, TR(null,TD({'colSpan':2},
INPUT({'type':'button', 'class':'button',
'value':(a.src == '' ? {$getstring['insert']} : {$getstring['update']}),
'onclick':function () { insertImage(); }}),
INPUT({'type':'button', 'class':'button', 'value':{$getstring['cancel']},
'onclick':function () { replaceChildNodes('insertimage', null); }}))));
replaceChildNodes('insertimage', imageform);
var template = new Array();
template['file'] = '{$wwwroot}artefact/blog/image_popup.php?src=\{\$src\}';
template['width'] = 355;
template['height'] = 265 + (tinyMCE.isMSIE ? 25 : 0);
// Language specific width and height addons
template['width'] += tinyMCE.getLang('lang_insert_image_delta_width', 0);
template['height'] += tinyMCE.getLang('lang_insert_image_delta_height', 0);
a.inline = "yes";
tinyMCE.openWindow(template, a);
return true;
}
......
htdocs/artefact/blog/theme/default/image_popup.tpl 0 → 100644
View file @ d1b33d3a
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{str tag=insertimage section=artefact.blog}</title>
<script language="javascript" type="text/javascript" src="{$WWWROOT}js/tinymce/tiny_mce_popup.js"></script>
<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>
<base target="_self" />
</head>
<body id="image" onload="tinyMCEPopup.executeOnLoad('init();');" style="display: none">
<form onsubmit="insertImage();return false;" action="#">
<div class="tabs">
<ul>
<li id="general_tab" class="current"><span><a href="javascript:mcTabs.displayTab('general_tab','general_panel');" onmousedown="return false;">{str tag=insertimage section=artefact.blog}</a></span></li>
</ul>
</div>
<div class="panel_wrapper">
<div id="general_panel" class="panel current">
<!--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">
<!-- Image list -->
<tr>
<td nowrap="nowrap"><label for="align">{str tag=image}</label></td>
<td id="image_list_container"></td>
</tr>
<!-- /Image list -->
<tr>
<td nowrap="nowrap"><label for="align">{str section=artefact.blog tag=alignment}</label></td>
<td><select id="align" name="align">
<option value="">--</option>
<option value="baseline">{str section=artefact.blog tag=baseline}</option>
<option value="top">{str section=artefact.blog tag=top}</option>
<option value="middle">{str section=artefact.blog tag=middle}</option>
<option value="bottom">{str section=artefact.blog tag=bottom}</option>
<option value="texttop">{str section=artefact.blog tag=texttop}</option>
<option value="absmiddle">{str section=artefact.blog tag=absolutemiddle}</option>
<option value="absbottom">{str section=artefact.blog tag=absolutebottom}</option>
<option value="left">{str section=artefact.blog tag=left}</option>
<option value="right">{str section=artefact.blog tag=right}</option>
</select></td>
</tr>
<tr>
<td nowrap="nowrap"><label for="width">{str section=artefact.blog tag=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">{str section=artefact.blog tag=border}</label></td>
<td><input id="border" name="border" type="text" value="" size="3" maxlength="3" /></td>
</tr>
<tr>
<td nowrap="nowrap"><label for="vspace">{str section=artefact.blog tag=verticalspace}</label></td>
<td><input id="vspace" name="vspace" type="text" value="" size="3" maxlength="3" /></td>
</tr>
<tr>
<td nowrap="nowrap"><label for="hspace">{str section=artefact.blog tag=horizontalspace}</label></td>
<td><input id="hspace" name="hspace" type="text" value="" size="3" maxlength="3" /></td>
</tr>
</table>
</div>
</div>
<div class="mceActionPanel">
<div style="float: left">
<input type="button" id="insert" name="insert" value="{str section=artefact.blog tag=insert}" onclick="insertImage();" />
</div>
<div style="float: right">
<input type="button" id="cancel" name="cancel" value="{str section=artefact.blog tag=cancel}" onclick="tinyMCEPopup.close();" />
</div>
</div>
</form>
</body>
</html>
Supports Markdown
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