Update of
/var/cvs/contributions/CMSContainer/cmsc/richtext/src/webapp/mmbase/edit/wizard/xinha/popups
In directory
james.mmbase.org:/tmp/cvs-serv21891/cmsc/richtext/src/webapp/mmbase/edit/wizard/xinha/popups
Modified Files:
Tag: b1_4
insertinline_image.html
Log Message:
CMSC-890 - Added a little JavaScript that stores the ratio and adjusts it
accordingly when width/height is changed. Also added a checkbox to "lock ratio"
See also:
http://cvs.mmbase.org/viewcvs/contributions/CMSContainer/cmsc/richtext/src/webapp/mmbase/edit/wizard/xinha/popups
See also: http://www.mmbase.org/jira/browse/CMSC-890
Index: insertinline_image.html
===================================================================
RCS file:
/var/cvs/contributions/CMSContainer/cmsc/richtext/src/webapp/mmbase/edit/wizard/xinha/popups/insertinline_image.html,v
retrieving revision 1.3
retrieving revision 1.3.6.1
diff -u -b -r1.3 -r1.3.6.1
--- insertinline_image.html 23 Mar 2007 16:44:46 -0000 1.3
+++ insertinline_image.html 21 Jun 2008 11:51:35 -0000 1.3.6.1
@@ -13,9 +13,9 @@
return (HTMLArea._lc(str, 'cmscrichtext'));
}
-var IMAGE_WIDTH_LEFT = 176;
-var IMAGE_WIDTH_RIGHT = 176;
-var IMAGE_WIDTH_FULL = 353;
+var IMAGE_WIDTH_LEFT = 160;
+var IMAGE_WIDTH_RIGHT = 160;
+var IMAGE_WIDTH_FULL = 450;
function Init() {
__dlg_translate('cmscrichtext');
@@ -35,8 +35,14 @@
}
if (document.getElementById("f_width").value == "") {
document.getElementById("f_align").value = "left";
- document.getElementById("f_width").value = IMAGE_WIDTH_LEFT;
}
+ if (document.getElementById("f_url").value == "") {
+ document.getElementById("f_width").disabled = true;
+ document.getElementById("f_height").disabled = true;
+ document.getElementById("f_border").disabled = true;
+ document.getElementById("f_align").disabled = true;
+ }
+
document.getElementById("f_url").focus();
}
@@ -81,6 +87,11 @@
if (url != undefined && url.length != 0 ) {
document.getElementById("f_url").value = url;
+ document.getElementById("f_width").disabled = false;
+ document.getElementById("f_height").disabled = false;
+ document.getElementById("f_border").disabled = false;
+ document.getElementById("f_align").disabled = false;
+ ratio = "";
}
if (document.getElementById("f_alt").value == undefined
|| document.getElementById("f_alt").value.length == 0 ) {
@@ -173,89 +184,107 @@
</script>
+
+
+<script type="text/javascript">
+
+var ratio = "";
+
+function saveRatio() {
+ if ( ratio == "" || ratio == null ) {
+ width = document.getElementById("f_width").value;
+ height = document.getElementById("f_height").value;
+ if ( width > height ) {
+ ratio = ( width / height );
+ } else if ( width < height ) {
+ ratio = ( height / width );
+ } else {
+ ratio = 0;
+ }
+ }
+}
+
+ function calculateWidth() {
+ if ( document.getElementById("f_lock_ratio").checked ) {
+ height = document.getElementById("f_height").value;
+ document.getElementById("f_width").value = Math.round ( height / ratio)
;
+ }
+ }
+
+ function calculateHeight() {
+ if ( document.getElementById("f_lock_ratio").checked ) {
+ width = document.getElementById("f_width").value;
+ document.getElementById("f_height").value = Math.round ( width * ratio );
+ }
+ }
+
+</script>
+
</head>
<body class="dialog" onload="Init()">
-<div class="title">Insert Image</div>
-
-<form name="inlineImageForm" action="" method="get">
+ <div class="title">Insert Image</div>
+ <form name="inlineImageForm" action="" method="get">
<input type="hidden" name="destination" id="f_destination" />
-
-<table border="0" width="100%" style="padding: 0px; margin: 0px">
+ <table border="0" width="100%" style="padding: 0px; margin: 0px">
<tbody>
<tr>
<td style="width: 7em; text-align: right">Image URL:</td>
<td>
<input type="text" name="url" id="f_url" style="width:75%" readonly />
- <button name="select" onclick="return onSelect();"
- title="Search for an image">Search</button>
+ <button name="select" onclick="return onSelect();"
title="Search for an image">Search</button>
</td>
</tr>
<tr>
<td style="width: 7em; text-align: right">Alternate text:</td>
- <td><input type="text" name="alt" id="f_alt" style="width:100%"
- title="For browsers that don't support images" /></td>
+ <td><input type="text" name="alt" id="f_alt"
style="width:100%" title="For browsers that don't support images" /></td>
</tr>
</tbody>
-</table>
-
-<p />
-
-<fieldset style="float: left; margin-left: 5px;">
-<legend>Layout</legend>
-
-<div class="space"></div>
-
-<div class="fl">Alignment:</div>
-<select size="1" name="align" id="f_align"
- title="Positioning of this image"
- onchange="onSelectPosition()">
- <option value="" >Not set</option>
- <option value="left" >Left</option>
- <option value="right" >Right</option>
- <option value="texttop" >Texttop</option>
- <option value="absmiddle" >Absmiddle</option>
- <option value="baseline" selected="1" >Baseline</option>
- <option value="absbottom" >Absbottom</option>
- <option value="bottom" >Bottom</option>
- <option value="middle" >Middle</option>
- <option value="top" >Top</option>
-</select>
-
-<p />
-
-<div class="fl">Border thickness:</div>
-<input type="text" name="border" id="f_border" size="5"
-title="Leave empty for no border" />
-
-<div class="space"></div>
-
-</fieldset>
-
-<fieldset style="float:right; margin-right: 5px;">
-<legend>Size</legend>
-
-<div class="fr">Width:</div>
-<input type="text" name="width" id="f_width" size="5"
-title="Width" />
-
-<p />
-
-<div class="fr">Height:</div>
-<input type="text" name="height" id="f_height" size="5"
-title="Height" />
-
-<div class="space"></div>
-
-</fieldset>
-
-<div style="margin-top: 85px; text-align: right;">
-<hr />
-<button type="button" name="ok" onclick="return onOK();">OK</button>
-<button type="button" name="cancel" onclick="return
onCancel();">Cancel</button>
-</div>
+ </table>
-</form>
+ <p />
-</body>
+ <fieldset style="float: left; margin-left: 5px;">
+ <legend>Layout</legend>
+ <div class="space"></div>
+
+ <div class="fl">Alignment:</div>
+ <select size="1" name="align" id="f_align" title="Positioning
of this image" onchange="onSelectPosition()">
+ <option value="">Not set</option>
+ <option value="left" selected="1">Left</option>
+ <option value="right">Right</option>
+ <option value="texttop" style="visibility:
hidden;">Texttop</option>
+ <option value="absmiddle" style="visibility:
hidden;">Absmiddle</option>
+ <option value="baseline" style="visibility:
hidden;">Baseline</option>
+ <option value="absbottom" style="visibility:
hidden;">Absbottom</option>
+ <option value="bottom" style="visibility:
hidden;">Bottom</option>
+ <option value="middle" style="visibility:
hidden;">Middle</option>
+ <option value="top" style="visibility: hidden;">Top</option>
+ </select>
+ <p />
+ <div class="fl">Border thickness:</div>
+ <input type="text" name="border" id="f_border" size="5"
title="Leave empty for no border" />
+ <div class="space"></div>
+ </fieldset>
+
+ <fieldset style="float:right; margin-right: 5px;">
+ <legend>Size</legend>
+ <div class="fr">Width:</div>
+ <input type="text" name="width" id="f_width" size="5"
title="Width" onfocus="saveRatio();" onblur="calculateHeight();"
onchange="calculateHeight();" />
+ <p />
+ <div class="fr">Height:</div>
+ <input type="text" name="height" id="f_height" size="5"
title="Height" onfocus="saveRatio();" onblur="calculateWidth();"
onchange="calculateWidth();" />
+ <p />
+ <div class="fr">Lock ratio:</div>
+ <input type="checkbox" name="lock_ratio" id="f_lock_ratio"
title="Lock aspect ratio" checked="checked" />
+ <div class="space"></div>
+ </fieldset>
+ <div class="space"></div>
+ <div style="margin-top: 85px; text-align: right;">
+ <hr />
+ <button type="button" name="ok" onclick="return
onOK();">OK</button>
+ <button type="button" name="cancel" onclick="return
onCancel();">Cancel</button>
+ </div>
+ </form>
+ </body>
</html>
_______________________________________________
Cvs mailing list
[email protected]
http://lists.mmbase.org/mailman/listinfo/cvs
