From 4ab174e2dca4965f8f9b35ff694e01b6974e4eee Mon Sep 17 00:00:00 2001
From: quasi <quasi@8810af33-2d31-482b-a856-94f89814c4df>
Date: Fri, 6 Jul 2012 11:19:59 +0000
Subject: [PATCH] Aktuelle Version vom Xinha-PlugIn
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Weitere Verbesserungen:

* Aspect-Ration wird berechent und bei der Größenänderung automatisch verwendet
* Werte werden nun korrekt eingelesen und im Diaog gesetzt (außer Alignment)
* Verändern eines vorhandenen Bildes funktioniert
* Remove-Button im Dialog hinzugefügt
* Nach dem Bearbeiten wird der Cursor nun hinter das Bild gesetzt

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@1753 8810af33-2d31-482b-a856-94f89814c4df
---
 .../arsdigita/cms/dispatcher/BaseImage.java   |  18 +-
 .../xinha/plugins/OpenCCM/images/images.html  |   4 +-
 .../xinha/plugins/OpenCCM/images/images.js    | 181 +++++++++++-------
 3 files changed, 126 insertions(+), 77 deletions(-)

diff --git a/ccm-cms/src/com/arsdigita/cms/dispatcher/BaseImage.java b/ccm-cms/src/com/arsdigita/cms/dispatcher/BaseImage.java
index 9b13bf534..fbb67ef70 100755
--- a/ccm-cms/src/com/arsdigita/cms/dispatcher/BaseImage.java
+++ b/ccm-cms/src/com/arsdigita/cms/dispatcher/BaseImage.java
@@ -168,11 +168,7 @@ public class BaseImage extends ResourceHandlerImpl {
                     e.toString());
             return;
         }
-        if (imageId == null && oid == null) {
-            response.sendError(HttpServletResponse.SC_BAD_REQUEST,
-                    "either " + IMAGE_ID + " or " + OID_PARAM + " is required.");
-            return;
-        } else if (imageId != null && oid != null) {
+        if ((imageId == null && oid == null) || (imageId != null && oid != null)) {
             response.sendError(HttpServletResponse.SC_BAD_REQUEST,
                     "either " + IMAGE_ID + " or " + OID_PARAM + " is required.");
             return;
@@ -228,6 +224,18 @@ public class BaseImage extends ResourceHandlerImpl {
 
 //        response.setContentType(image.getMimeType().getMimeType());
 
+/* Quasimodo: on demand resizing of images
+        int width;
+        int height;
+        
+        width = Integer.parseInt(request.getParameter("width"));
+        height = Integer.parseInt(request.getParameter("height"));
+        
+        if(width || height) {
+            
+        }
+*/
+        
         setHeaders(response, image);
         send(response, image);
     }
diff --git a/ccm-cms/web/assets/xinha/plugins/OpenCCM/images/images.html b/ccm-cms/web/assets/xinha/plugins/OpenCCM/images/images.html
index 4db09ce7e..bc5b41ef4 100644
--- a/ccm-cms/web/assets/xinha/plugins/OpenCCM/images/images.html
+++ b/ccm-cms/web/assets/xinha/plugins/OpenCCM/images/images.html
@@ -124,7 +124,7 @@
         <l10n>Enable Zoom:</l10n>
       </label>
       <div class="value">
-        <input type="checkbox" name="[zoom]" id="[zoom]" title="_(Enable zoom)" checked="checked"/>
+        <input type="checkbox" name="[zoom]" id="[zoom]" title="_(Enable zoom)"/>
       </div>
       <label class="key" for="[gallery]">
         <l10n>Enable Gallery:</l10n>
@@ -150,6 +150,7 @@
       <div class="value">
         <input type="text" name="[height]" id="[height]" title="_(Resize to height)"/>
       </div>
+      <input type="hidden" name="[aspect]" id="[aspect]"/>
     </fieldset>
   </div>
 
@@ -160,6 +161,7 @@
 
   <div class="buttons" id="[buttons]">
     <input type="button" id="[ok]"     value="_(OK)"     />
+    <input type="button" id="[remove]"     value="_(Remove)"     />
     <input type="button" id="[cancel]" value="_(Cancel)" />
   </div>
 </div>
diff --git a/ccm-cms/web/assets/xinha/plugins/OpenCCM/images/images.js b/ccm-cms/web/assets/xinha/plugins/OpenCCM/images/images.js
index c88d14699..ae0ce3971 100644
--- a/ccm-cms/web/assets/xinha/plugins/OpenCCM/images/images.js
+++ b/ccm-cms/web/assets/xinha/plugins/OpenCCM/images/images.js
@@ -24,35 +24,40 @@ OpenCCM.prototype.showImageDialog = function(image)
 
   if (typeof image == "undefined" )
   {
-  alert ("was?");
     image = editor.getParentElement();
-    if ( image && image.tagName.toLowerCase() != 'img' )
+    if ( image && image.tagName.toLowerCase() != "img" )
     {
       image = null;
-      alert("WAS?");
     }
   }
 
-  if(image && image.tagName.toLowerCase == "img")
+  this.image = image;
+
+  if(image && image.tagName.toLowerCase() == "img")
   {
-    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.src    = this.editor.fixRelativeLinks(image.getAttribute("src"));
+    data.alt    = image.getAttribute("alt");
+    data.name   = image.getAttribute("name");
+    data.title  = image.getAttribute("title");
+    data.width  = image.getAttribute("width");
+    data.height = image.getAttribute("height");
 
-    data.caption = ""/*image.next.tagName=="span"*/;
-    data.zoom = "" /*image.parent.rel == "zoom"*/;
-    data.gallery = "" /*image.parent.rel == "imageGallery"*/;
+    if(image.parentNode.tagName.toLowerCase() == "div")
+    {
+      data.alignment = image.parentNode.getAttribute("class").substring(image.parentNode.getAttribute("class").indexOf(" "));
+      data.caption = (image.nextSibling.tagName.toLowerCase() == "span") ? image.nextSibling.firstChild.nodeValue : "";
+    }
+    else
+    {
+      data.alignment = image.parentNode.parentNode.getAttribute("class").substring(image.parentNode.getAttribute("class").indexOf(" "));
+      data.zoom = (image.parentNode.getAttribute("class") == "imageZoom") ? "on" : "";
+      data.gallery = (image.parentNode.getAttribute("class") == "imageGallery") ? "on" : "";
+//    data.galleryName = (image.parentNode.getAttribute("class") == "imageGallery") ? image.parentNode.getAttribute("rel") : "";
 
-//    data.context = image.parent.rel;
+      data.caption = (image.parentNode.nextSibling.tagName.toLowerCase() == "span") ? image.parentNode.nextSibling.firstChild.nodeValue : "";
+    }
 
-    data.alignment   = "" /*image.parent.parent.class*/;
-
-//      aspect      = "";
+    data.aspect = data.width / data.height;
   }
 
   // now calling the show method of the Xinha.Dialog object to set the values and show the actual dialog
@@ -68,12 +73,16 @@ 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('remove').onclick = function() { self.imageRemove(); };
   dialog.getElementById('cancel').onclick = function() { self.dialogs["images"].hide()};
 
   // Connect the Select button
   dialog.getElementById('browse').onclick = function() { self.imageBrowse(window); };
 
+  // Connect onkeyup ecent handler with dimension filed to recalculate the size according to aspect ratio
+  dialog.getElementById('width').onkeyup = function() { self.calcHeight(); };
+  dialog.getElementById('height').onkeyup = function() { self.calcWidth(); };
+
   this.imageDialogReady = true;
 };
 
@@ -84,7 +93,8 @@ OpenCCM.prototype.imageApply = function()
   var values = this.dialogs["images"].hide();
   var image  = this.image;
   var editor = this.editor;
-
+  var modifyImage = (image != null && image.tagName.toLowerCase() == "img");
+  
   var imgAttr =
   {
     src    : "",
@@ -137,7 +147,6 @@ OpenCCM.prototype.imageApply = function()
   if(values.zoom || values.gallery)
   {
     linkAttr.href = values.src;
-    
     if(values.zoom)
     {
       linkAttr.rel = "";
@@ -152,30 +161,48 @@ OpenCCM.prototype.imageApply = function()
   }
 
   // Read form values for div
-/*
-  if(values.alignment != "")
+  if(values.alignment.value != "")
   {
-    var alignment = values.alignment;
-    divAttr.class += " " + alignment;
+    divAttr.class += " " + values.alignment.value;
   }
-*/
+
+  var div;
 
   // Modify Image
-  if(image && image.tagName.toLowerCase() == "img")
+  if(modifyImage)
   {
-   alert("Modifying image aka removing currently selected image");
+    // Get the parent for img node
+    div = image.parentNode;
+    
+    // if the tagname of div is "a"
+    if(div.tagName.toLowerCase() == "a")
+    {
+      // go up one level to find the real div
+      div = div.parentNode;
+    }
+    
+    // remove all childs from div.image
+    while (div.childNodes.length > 0)
+    {
+      div.removeChild(div.firstChild);
+    }
+  }
+  
+  // Add Image
+  else
+  {
+    // create new div.image
+    div = document.createElement("div");
   }
 
-  // Add Image
-  alert("Adding image");
-  
-
-  var div = document.createElement("div");
+  // set attributes for div
   for(var attr in divAttr)
   {
     div.setAttribute(attr, divAttr[attr]);
   }
 
+  // the folling has to be done for both cases
+  // insert link, if fancybox features are activated
   if(values.zoom || values.gallery)
   {
     link = document.createElement("a");
@@ -186,6 +213,7 @@ OpenCCM.prototype.imageApply = function()
     div.appendChild(link);
   }
 
+  // insert the image, obviously
   var img = document.createElement("img");
   for(var attr in imgAttr)
   {
@@ -200,6 +228,7 @@ OpenCCM.prototype.imageApply = function()
     div.appendChild(img);
   }
 
+  // insert caption if selected
   if(values.caption)
   {
     var span = document.createElement("span");
@@ -207,51 +236,61 @@ OpenCCM.prototype.imageApply = function()
     {
       span.setAttribute(attr, spanAttr[attr]);
     }
+    span.appendChild(document.createTextNode(imgAttr.title));
     
     div.appendChild(span);
   }
 
-  editor.insertNodeAtSelection(div);
-
-/*
-  if ( !img )
-  {
-    if ( Xinha.is_ie )
-    {
-      var sel = editor.getSelection();
-      var range = editor.createRange(sel);
-      editor._doc.execCommand("insertimage", false, param.f_url);
-      img = range.parentElement();
-      // wonder if this works...
-      if ( img.tagName.toLowerCase() != "img" )
-      {
-        img = img.previousSibling;
-      }
-    }
-    else
-    {
-      img = document.createElement('img');
-      img.src = param.f_url;
-      editor.insertNodeAtSelection(img);
-      if ( !img.tagName )
-      {
-        // if the cursor is at the beginning of the document
-        img = range.startContainer.firstChild;
-      }
-    }
-  }
-  else
-  {
-    img.src = param.f_url;
+  // insert new div only if we not modifying an image
+  if(!modifyImage) {
+    editor.insertNodeAtSelection(div);
   }
 
-*/
+  // set cursor after div
+  this.editor.selectNodeContents(div.nextSibling, 0);
+};
+
+OpenCCM.prototype.imageRemove = function() {
+  
+  // Close the dialog
+  this.dialogs["images"].hide();
+  
+  // Get the parent div for img node
+  var div = this.image.parentNode;
+  
+  // if the tagname of div is "a"
+  if(div.tagName.toLowerCase() == "a")
+  {
+    // go up one level to find the real div
+    div = div.parentNode;
+  }
+  
+  // remove this div
+  div.parentNode.removeChild(div);
+  return true;
 };
 
 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";
+  var dialog = this.dialogs["images"];
+  dialog.getElementById(dialog.id["src"]).value = "/theme/mandalay/ccm/cms-service/stream/image/?image_id=9001";
+  dialog.getElementById(dialog.id["width"]).value = "304";
+  dialog.getElementById(dialog.id["height"]).value = "420";
+  dialog.getElementById(dialog.id["name"]).value = "Schild.jpg";
+  dialog.getElementById(dialog.id["aspect"]).value = dialog.getElementById(dialog.id["width"]).value / dialog.getElementById(dialog.id["height"]).value;
 };
+
+OpenCCM.prototype.calcWidth = function()
+{
+    var dialog = this.dialogs["images"];
+    dialog.getElementById(dialog.id["width"]).value = 
+      Math.round(dialog.getElementById("height").value * dialog.getElementById("aspect").value);
+};
+
+OpenCCM.prototype.calcHeight = function()
+{
+    var dialog = this.dialogs["images"];
+    dialog.getElementById(dialog.id["height"]).value = 
+      Math.round(dialog.getElementById("width").value / dialog.getElementById("aspect").value);
+};
+