Aktuelle Version vom Xinha-PlugIn
Das - zur Zeit fest kodierte, daher nur bei funktionierende - Bild wird nun korrekt eingefügt. Löschen entfernt noch nicht alle Bestandteile. Zur Auswahl des Bildes aus dem CC wird eine JSP benötigt, die folgende Informationen im dem Dialog per JavaScript setzt: - name (Filname bzw. interne Bezeichnung) - src (url) - width - height git-svn-id: https://svn.libreccm.org/ccm/trunk@1751 8810af33-2d31-482b-a856-94f89814c4dfmaster
quasi
parent
0a8632bb26
commit
256434cad0
|
|
@ -64,6 +64,12 @@ function OpenCCM(editor)
|
|||
cfg.addToolbarElement(["separator"], "insertimage", 1);
|
||||
}
|
||||
|
||||
if(typeof editor._insertImage == 'undefined')
|
||||
{
|
||||
editor._insertImage = function() { self.showImageDialog(); };
|
||||
// editor.config.btnList.insertimage[3] = function() { self.show(); }
|
||||
}
|
||||
|
||||
// Register double click action
|
||||
cfg.dblclickList["a"][0] = function(e, target) { self.showLinkDialog(self._getSelectedAnchor()); };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,83 +1,165 @@
|
|||
<h1 id="[h1]"><l10n>Insert Image</l10n></h1>
|
||||
<!--- new stuff --->
|
||||
<form action="" method="get" style="padding-top:10px" id="[inputs]">
|
||||
<table border="0" width="95%" style="padding: 0px; margin: 0px">
|
||||
<tbody>
|
||||
<style>
|
||||
.common {
|
||||
margin: 0.4em;
|
||||
}
|
||||
fieldset {
|
||||
margin: 0.6em 0.3em;
|
||||
}
|
||||
|
||||
label.key {
|
||||
clear: left;
|
||||
float: left;
|
||||
width: 5em;
|
||||
padding: 0.25em 0.2em;
|
||||
}
|
||||
|
||||
fieldset label.key {
|
||||
width: 8em;
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-left: 5.5em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
fieldset .value {
|
||||
margin-left: 8.5em;
|
||||
}
|
||||
|
||||
.withButton {
|
||||
margin: 0em 0.2em 0em 12em;
|
||||
}
|
||||
|
||||
.withButton input[type="text"] {
|
||||
float: left;
|
||||
margin-left: -6em;
|
||||
}
|
||||
|
||||
.withButton input[type="button"] {
|
||||
position: relative;
|
||||
width: 5em !important;
|
||||
}
|
||||
|
||||
input {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
.itemname {
|
||||
margin: 0.1em;
|
||||
border: none;
|
||||
border-radius: 0.3em;
|
||||
padding: 0.2em;
|
||||
font-style: italic;
|
||||
color: #4a4a4a;
|
||||
background-color: #dddddd;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<h1 id="[h1]">
|
||||
<l10n>Insert/Modify Image</l10n>
|
||||
</h1>
|
||||
<div style="position:relative">
|
||||
<div id="[options]">
|
||||
<div class="common">
|
||||
<label class="key" for="[name]">
|
||||
<l10n>Name:</l10n>
|
||||
</label>
|
||||
<div class="value withButton">
|
||||
<input class="itemname" type="text" name="[name]" id="[name]" disabled="disabled"/>
|
||||
<input type="button"" name="[browse]" id="[browse]" value="_(Browse)">
|
||||
</div>
|
||||
<label class="key" for="[alt]">
|
||||
<l10n>Alternate:</l10n>
|
||||
</label>
|
||||
<div class="value">
|
||||
<input type="text" name="[alt]" id="[alt]" title="_(Insert image alternate text)" />
|
||||
</div>
|
||||
<label class="key" for="[title]">
|
||||
<l10n>Title:</l10n>
|
||||
</label>
|
||||
<div class="value">
|
||||
<input type="text" name="[title]" id="[title]" title="_(Insert image title)" />
|
||||
</div>
|
||||
<!--
|
||||
<label class="key" for="[context]">
|
||||
<l10n>Caption:</l10n>
|
||||
</label>
|
||||
<div class="value">
|
||||
<input type="text" name="[caption]" id="[caption]" title="_(Insert caption)" />
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<input type="hidden" name="[src]" id="[src]"/>
|
||||
|
||||
<tr>
|
||||
<td style="width: 7em; text-align: right"><l10n>Image URL:</l10n></td>
|
||||
<td><input type="text" name="[f_url]" id="[f_url]" style="width:75%"
|
||||
title="_(Enter the image URL here)" />
|
||||
<button id="[preview]" title="_(Preview the image in a new window)"><l10n>Preview</l10n></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 7em; text-align: right"><l10n>Alternate text:</l10n></td>
|
||||
<td><input type="text" name="[f_alt]" id="[f_alt]" style="width:100%"
|
||||
title="_(For browsers that don't support images)" /></td>
|
||||
</tr>
|
||||
<fieldset>
|
||||
<legend>
|
||||
<l10n>Layout</l10n>
|
||||
</legend>
|
||||
<label class="key" for="[alignment]">
|
||||
<l10n>Alignment:</l10n>
|
||||
</label>
|
||||
<div class="value">
|
||||
<select size="1" name="[alignment]" id="[alignment]" title="_(Positioning of this image)">
|
||||
<option value="" ><l10n>Not set</l10n></option>
|
||||
<option value="left" ><l10n>Left</l10n></option>
|
||||
<option value="center"><l10n>Center</l10n></option>
|
||||
<option value="right" ><l10n>Right</l10n></option>
|
||||
</select>
|
||||
</div>
|
||||
<label class="key" for="[caption]">
|
||||
<l10n>Show Caption:</l10n>
|
||||
</label>
|
||||
<div class="value">
|
||||
<input type="checkbox" name="[caption]" id="[caption]" title="_(Show caption)" checked="checked"/>
|
||||
</div>
|
||||
<label class="key" for="[zoom]">
|
||||
<l10n>Enable Zoom:</l10n>
|
||||
</label>
|
||||
<div class="value">
|
||||
<input type="checkbox" name="[zoom]" id="[zoom]" title="_(Enable zoom)" checked="checked"/>
|
||||
</div>
|
||||
<label class="key" for="[gallery]">
|
||||
<l10n>Enable Gallery:</l10n>
|
||||
</label>
|
||||
<div class="value">
|
||||
<input type="checkbox" name="[gallery]" id="[gallery]" title="_(Enable gallery)"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<fieldset>
|
||||
<legend>
|
||||
<l10n>Dimension</l10n>
|
||||
</legend>
|
||||
<label class="key" for="[width]">
|
||||
<l10n>Width:</l10n>
|
||||
</label>
|
||||
<div class="value">
|
||||
<input type="text" name="[width]" id="[width]" title="_(Resize to width)"/>
|
||||
</div>
|
||||
<label class="key" for="[height]">
|
||||
<l10n>Height:</l10n>
|
||||
</label>
|
||||
<div class="value">
|
||||
<input type="text" name="[height]" id="[height]" title="_(Resize to height)"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div>
|
||||
<l10n>Image Preview:</l10n><br />
|
||||
<iframe id="[ipreview]" frameborder="0" style="border : 1px solid gray;" height="200" width="100%" src="about:blank"></iframe>
|
||||
</div>
|
||||
|
||||
<fieldset style="float: left; margin-left: 5px;">
|
||||
<legend><l10n>Layout</l10n></legend>
|
||||
|
||||
<div class="space"></div>
|
||||
|
||||
<div class="fl"><l10n>Alignment:</l10n></div>
|
||||
<select size="1" name="[f_align]" id="[f_align]"
|
||||
title="_(Positioning of this image)">
|
||||
<option value="" ><l10n>Not set</l10n></option>
|
||||
<option value="left" ><l10n>Left</l10n></option>
|
||||
<option value="right" ><l10n>Right</l10n></option>
|
||||
<option value="texttop" ><l10n>Texttop</l10n></option>
|
||||
<option value="absmiddle" ><l10n>Absmiddle</l10n></option>
|
||||
<option value="baseline" ><l10n>Baseline</l10n></option>
|
||||
<option value="absbottom" ><l10n>Absbottom</l10n></option>
|
||||
<option value="bottom" ><l10n>Bottom</l10n></option>
|
||||
<option value="middle" ><l10n>Middle</l10n></option>
|
||||
<option value="top" ><l10n>Top</l10n></option>
|
||||
</select>
|
||||
|
||||
<br />
|
||||
|
||||
<div class="fl"><l10n>Border thickness:</l10n></div>
|
||||
<input type="text" name="[f_border]" id="[f_border]" size="5"
|
||||
title="_(Leave empty for no border)" />
|
||||
|
||||
<div class="space"></div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><l10n>Spacing</l10n></legend>
|
||||
|
||||
<div class="space"></div>
|
||||
|
||||
<div class="fr"><l10n>Horizontal:</l10n></div>
|
||||
<input type="text" name="[f_horiz]" id="[f_horiz]" size="5"
|
||||
title="_(Horizontal padding)" />
|
||||
|
||||
<br />
|
||||
|
||||
<div class="fr"><l10n>Vertical:</l10n></div>
|
||||
<input type="text" name="[f_vert]" id="[f_vert]" size="5"
|
||||
title="_(Vertical padding)" />
|
||||
|
||||
<div class="space"></div>
|
||||
|
||||
</fieldset>
|
||||
</form>
|
||||
<div>
|
||||
<l10n>Image Preview:</l10n><br />
|
||||
<iframe id="[ipreview]" frameborder="0" style="border : 1px solid gray;"
|
||||
height="200" width="100%" src="about:blank"></iframe>
|
||||
<div class="buttons" id="[buttons]">
|
||||
<input type="button" id="[ok]" value="_(OK)" />
|
||||
<input type="button" id="[cancel]" value="_(Cancel)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="buttons" id="[buttons]">
|
||||
<input type="button" id="[ok]" value="_(OK)" />
|
||||
<input type="button" id="[cancel]" value="_(Cancel)" />
|
||||
</div>
|
||||
|
|
@ -1,61 +1,62 @@
|
|||
OpenCCM.prototype.showImageDialog = function(image)
|
||||
{
|
||||
if (!this.dialogs["images"]) this.prepareImageDialog();
|
||||
if (!this.dialogs["images"])
|
||||
{
|
||||
this.prepareImageDialog();
|
||||
}
|
||||
|
||||
var editor = this.editor;
|
||||
if ( typeof image == "undefined" )
|
||||
this.image = image;
|
||||
|
||||
var data =
|
||||
{
|
||||
src : "",
|
||||
name : "",
|
||||
alt : "",
|
||||
title : "",
|
||||
width : "",
|
||||
height : "",
|
||||
caption : "",
|
||||
zoom : "",
|
||||
gallery : "",
|
||||
aspect : ""
|
||||
};
|
||||
|
||||
if (typeof image == "undefined" )
|
||||
{
|
||||
alert ("was?");
|
||||
image = editor.getParentElement();
|
||||
if ( image && image.tagName.toLowerCase() != 'img' )
|
||||
{
|
||||
image = null;
|
||||
alert("WAS?");
|
||||
}
|
||||
}
|
||||
|
||||
if ( image )
|
||||
if(image && image.tagName.toLowerCase == "img")
|
||||
{
|
||||
function getSpecifiedAttribute(element,attribute)
|
||||
{
|
||||
var a = element.attributes;
|
||||
for (var i=0;i<a.length;i++)
|
||||
{
|
||||
if (a[i].nodeName == attribute && a[i].specified)
|
||||
{
|
||||
return a[i].value;
|
||||
}
|
||||
}
|
||||
return '';
|
||||
}
|
||||
outparam =
|
||||
{
|
||||
f_url : editor.stripBaseURL(image.getAttribute('src',2)), // the second parameter makes IE return the value as it is set, as opposed to an "interpolated" (as MSDN calls it) value
|
||||
f_alt : image.alt,
|
||||
f_border : image.border,
|
||||
f_align : image.align,
|
||||
f_vert : getSpecifiedAttribute(image,'vspace'),
|
||||
f_horiz : getSpecifiedAttribute(image,'hspace'),
|
||||
f_width : image.width,
|
||||
f_height : image.height
|
||||
};
|
||||
var src = this.editor.fixRelativeLinks(image.getAttribute('src'));
|
||||
|
||||
data.src = src;
|
||||
data.alt = image.alt;
|
||||
data.name = image.name;
|
||||
data.title = image.title;
|
||||
data.width = image.width;
|
||||
data.height = image.height;
|
||||
|
||||
data.caption = ""/*image.next.tagName=="span"*/;
|
||||
data.zoom = "" /*image.parent.rel == "zoom"*/;
|
||||
data.gallery = "" /*image.parent.rel == "imageGallery"*/;
|
||||
|
||||
// data.context = image.parent.rel;
|
||||
|
||||
data.alignment = "" /*image.parent.parent.class*/;
|
||||
|
||||
// aspect = "";
|
||||
}
|
||||
else{
|
||||
{
|
||||
outparam =
|
||||
{
|
||||
f_url : '',
|
||||
f_alt : '',
|
||||
f_border : '',
|
||||
f_align : '',
|
||||
f_vert : '',
|
||||
f_horiz : '',
|
||||
f_width : '',
|
||||
f_height : ''
|
||||
};
|
||||
}
|
||||
}
|
||||
this.image = image;
|
||||
|
||||
// now calling the show method of the Xinha.Dialog object to set the values and show the actual dialog
|
||||
this.dialogs["images"].show(outparam);
|
||||
this.dialogs["images"].show(data);
|
||||
};
|
||||
|
||||
OpenCCM.prototype.prepareImageDialog = function()
|
||||
|
|
@ -67,51 +68,152 @@ OpenCCM.prototype.prepareImageDialog = function()
|
|||
|
||||
// Connect the OK and Cancel buttons
|
||||
dialog.getElementById('ok').onclick = function() {self.imageApply();}
|
||||
// dialog.getElementById('clear').onclick = function() { self.imageRemove(); };
|
||||
dialog.getElementById('cancel').onclick = function() { self.dialogs["images"].hide()};
|
||||
|
||||
/*
|
||||
dialog.getElementById('preview').onclick = function() {
|
||||
var f_url = dialog.getElementById("f_url");
|
||||
var url = f_url.value;
|
||||
|
||||
if (!url) {
|
||||
alert(dialog._lc("You must enter the URL"));
|
||||
f_url.focus();
|
||||
return false;
|
||||
}
|
||||
dialog.getElementById('ipreview').src = url;
|
||||
return false;
|
||||
}
|
||||
dialog.onresize = function ()
|
||||
{
|
||||
var newHeightForPreview =
|
||||
parseInt(this.height,10)
|
||||
- this.getElementById('h1').offsetHeight
|
||||
- this.getElementById('buttons').offsetHeight
|
||||
- this.getElementById('inputs').offsetHeight
|
||||
- parseInt(this.rootElem.style.paddingBottom,10); // we have a padding at the bottom, gotta take this into acount
|
||||
|
||||
|
||||
this.getElementById("ipreview").style.height = ((newHeightForPreview > 0) ? newHeightForPreview : 0) + "px"; // no-go beyond 0
|
||||
|
||||
this.getElementById("ipreview").style.width = this.width - 2 + 'px'; // and the width
|
||||
|
||||
}
|
||||
*/
|
||||
// Connect the Select button
|
||||
dialog.getElementById('browse').onclick = function() { self.imageBrowse(window); };
|
||||
|
||||
this.imageDialogReady = true;
|
||||
};
|
||||
|
||||
// and finally ... take some action
|
||||
//
|
||||
OpenCCM.prototype.imageApply = function()
|
||||
{
|
||||
var param = this.dialogs["images"].hide();
|
||||
if (!param.f_url)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
var values = this.dialogs["images"].hide();
|
||||
var image = this.image;
|
||||
var editor = this.editor;
|
||||
var img = this.image;
|
||||
|
||||
var imgAttr =
|
||||
{
|
||||
src : "",
|
||||
alt : "",
|
||||
title : "",
|
||||
width : "",
|
||||
height : ""
|
||||
};
|
||||
|
||||
var spanAttr =
|
||||
{
|
||||
class : "caption",
|
||||
style : "",
|
||||
}
|
||||
|
||||
var linkAttr =
|
||||
{
|
||||
href : "",
|
||||
rel : "",
|
||||
class : ""
|
||||
|
||||
};
|
||||
|
||||
var divAttr =
|
||||
{
|
||||
class : "image"
|
||||
};
|
||||
|
||||
// If not all mandatory informations are set
|
||||
if (!values.src)
|
||||
{
|
||||
// don't do anything at all
|
||||
return false;
|
||||
}
|
||||
|
||||
// Read form values for image
|
||||
imgAttr.src = values.src;
|
||||
imgAttr.alt = values.alt;
|
||||
imgAttr.title = values.title;
|
||||
imgAttr.width = values.width;
|
||||
imgAttr.height = values.height;
|
||||
|
||||
// Read form values for caption
|
||||
if(values.caption)
|
||||
{
|
||||
spanAttr.style = "width:" + imgAttr.width + "px";
|
||||
}
|
||||
|
||||
// Read form values for link
|
||||
if(values.zoom || values.gallery)
|
||||
{
|
||||
linkAttr.href = values.src;
|
||||
|
||||
if(values.zoom)
|
||||
{
|
||||
linkAttr.rel = "";
|
||||
linkAttr.class = "imageZoom";
|
||||
}
|
||||
|
||||
else if(values.gallery)
|
||||
{
|
||||
linkAttr.rel = "imageGalleryName";
|
||||
linkAttr.class = "imageGallery";
|
||||
}
|
||||
}
|
||||
|
||||
// Read form values for div
|
||||
/*
|
||||
if(values.alignment != "")
|
||||
{
|
||||
var alignment = values.alignment;
|
||||
divAttr.class += " " + alignment;
|
||||
}
|
||||
*/
|
||||
|
||||
// Modify Image
|
||||
if(image && image.tagName.toLowerCase() == "img")
|
||||
{
|
||||
alert("Modifying image aka removing currently selected image");
|
||||
}
|
||||
|
||||
// Add Image
|
||||
alert("Adding image");
|
||||
|
||||
|
||||
var div = document.createElement("div");
|
||||
for(var attr in divAttr)
|
||||
{
|
||||
div.setAttribute(attr, divAttr[attr]);
|
||||
}
|
||||
|
||||
if(values.zoom || values.gallery)
|
||||
{
|
||||
link = document.createElement("a");
|
||||
for(var attr in linkAttr)
|
||||
{
|
||||
link.setAttribute(attr, linkAttr[attr]);
|
||||
}
|
||||
div.appendChild(link);
|
||||
}
|
||||
|
||||
var img = document.createElement("img");
|
||||
for(var attr in imgAttr)
|
||||
{
|
||||
img.setAttribute(attr, imgAttr[attr]);
|
||||
}
|
||||
if(values.zoom || values.gallery)
|
||||
{
|
||||
link.appendChild(img);
|
||||
}
|
||||
else
|
||||
{
|
||||
div.appendChild(img);
|
||||
}
|
||||
|
||||
if(values.caption)
|
||||
{
|
||||
var span = document.createElement("span");
|
||||
for(var attr in spanAttr)
|
||||
{
|
||||
span.setAttribute(attr, spanAttr[attr]);
|
||||
}
|
||||
|
||||
div.appendChild(span);
|
||||
}
|
||||
|
||||
editor.insertNodeAtSelection(div);
|
||||
|
||||
/*
|
||||
if ( !img )
|
||||
{
|
||||
if ( Xinha.is_ie )
|
||||
|
|
@ -143,54 +245,13 @@ OpenCCM.prototype.imageApply = function()
|
|||
img.src = param.f_url;
|
||||
}
|
||||
|
||||
for ( var field in param )
|
||||
{
|
||||
var value = param[field];
|
||||
switch (field)
|
||||
{
|
||||
case "f_alt":
|
||||
if (value)
|
||||
img.alt = value;
|
||||
else
|
||||
img.removeAttribute("alt");
|
||||
break;
|
||||
case "f_border":
|
||||
if (value)
|
||||
img.border = parseInt(value || "0");
|
||||
else
|
||||
img.removeAttribute("border");
|
||||
break;
|
||||
case "f_align":
|
||||
if (value.value)
|
||||
img.align = value.value;
|
||||
else
|
||||
img.removeAttribute("align");
|
||||
break;
|
||||
case "f_vert":
|
||||
if (value != "")
|
||||
img.vspace = parseInt(value || "0");
|
||||
else
|
||||
img.removeAttribute("vspace");
|
||||
break;
|
||||
case "f_horiz":
|
||||
if (value != "")
|
||||
img.hspace = parseInt(value || "0");
|
||||
else
|
||||
img.removeAttribute("hspace");
|
||||
break;
|
||||
case "f_width":
|
||||
if (value)
|
||||
img.width = parseInt(value || "0");
|
||||
else
|
||||
img.removeAttribute("width");
|
||||
break;
|
||||
case "f_height":
|
||||
if (value)
|
||||
img.height = parseInt(value || "0");
|
||||
else
|
||||
img.removeAttribute("height");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
*/
|
||||
};
|
||||
|
||||
OpenCCM.prototype.imageBrowse = function(window)
|
||||
{
|
||||
this.dialogs["images"].getElementById(this.dialogs["images"].id["src"]).value = "/theme/mandalay/ccm/cms-service/stream/image/?image_id=9001";
|
||||
this.dialogs["images"].getElementById(this.dialogs["images"].id["width"]).value = "304";
|
||||
this.dialogs["images"].getElementById(this.dialogs["images"].id["height"]).value = "420";
|
||||
this.dialogs["images"].getElementById(this.dialogs["images"].id["name"]).value = "Schild.jpg";
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
}
|
||||
|
||||
label.key {
|
||||
clear: left;
|
||||
float: left;
|
||||
width: 5em;
|
||||
padding: 0.25em 0.2em;
|
||||
|
|
|
|||
|
|
@ -5,14 +5,15 @@ OpenCCM.prototype.showLinkDialog = function(link)
|
|||
this.prepareLinkDialog();
|
||||
}
|
||||
|
||||
var editor = this.editor;
|
||||
this.link = link;
|
||||
if(!link && this.editor.selectionEmpty(this.editor.getSelection()))
|
||||
{
|
||||
alert(this._lc("You need to select some text before creating a link"));
|
||||
return false;
|
||||
}
|
||||
|
||||
var editor = this.editor;
|
||||
this.link = link;
|
||||
|
||||
var data =
|
||||
{
|
||||
title : '',
|
||||
|
|
|
|||
Loading…
Reference in New Issue