Début d'intégration de la boît de dialogue d'image de Plinn. Pour l'instant, on affic...
authorBenoît Pin <pin@cri.ensmp.fr>
Thu, 18 Aug 2011 12:20:04 +0000 (14:20 +0200)
committerBenoît Pin <pin@cri.ensmp.fr>
Thu, 18 Aug 2011 12:20:04 +0000 (14:20 +0200)
skins/ckeditor/plugins/plinn_image/connectors/plinn/connector.py [new file with mode: 0644]
skins/ckeditor/plugins/plinn_image/dialog/embedded_images.html.pt [new file with mode: 0644]
skins/ckeditor/plugins/plinn_image/dialog/plinn_image.html.pt [new file with mode: 0644]
skins/ckeditor/plugins/plinn_image/dialog/plinn_image.js [new file with mode: 0644]
skins/ckeditor/plugins/plinn_image/dialog/plinn_image_tabs.html.pt [new file with mode: 0644]
skins/ckeditor/plugins/plinn_image/plugin.js

diff --git a/skins/ckeditor/plugins/plinn_image/connectors/plinn/connector.py b/skins/ckeditor/plugins/plinn_image/connectors/plinn/connector.py
new file mode 100644 (file)
index 0000000..9c0deb8
--- /dev/null
@@ -0,0 +1,54 @@
+##parameters=command, path, file='', Type='', redirUrl=''
+
+from Products.CMFCore.utils import getToolByName
+
+def replaceXMLEntities(text) :
+       for c, ent in (('<', '&lt;'), ('>', '&gt;'), ('&', '&amp;')) :
+               text = text.replace(c, ent)
+       return text
+
+utool = getToolByName(context, 'portal_url')
+atool = getToolByName(context, 'portal_attachment')
+
+portal = utool.getPortalObject()
+
+ob = portal
+path = path.strip('/')
+
+ob = portal
+path = path.strip('/')
+
+for name in path.split('/') :
+       ob = getattr(ob, name)
+
+if command == 'ls':
+       attachments = atool.getAttachmentsFor(ob)
+       attachments = attachments.objectValues()
+       
+       print '<ls>'
+       for o in attachments :
+               size = o.getThumbnailSize()
+               row = '<row previewUrl="%(previewUrl)s" url="%(url)s" meta_type="%(meta_type)s" width="%(width)d" height="%(height)d">%(title)s</row>' % {
+                               'previewUrl' : '%s/getThumbnail' % o.absolute_url(),
+                               'url' : 'attachments/%s' % o.getId(),
+                               'meta_type' : o.meta_type,
+                               'title' : replaceXMLEntities(o.title_or_id()),
+                               'width' : size['width'],
+                               'height' : size['height']
+                       }
+               print row
+       print '</ls>'
+
+if command == 'upload' :
+       atool.uploadAttachmentFor(ob, file, typeName=Type)
+       return context.REQUEST.RESPONSE.redirect(redirUrl);
+
+if command == 'rm' :
+    ob = context.restrictedTraverse(path)
+    parent = ob.getParentNode()
+    parent.manage_delObjects(ob.getId())
+    print '<done/>'
+       
+    
+context.REQUEST.RESPONSE.setHeader('content-type', 'text/xml; charset=utf-8')
+return printed
\ No newline at end of file
diff --git a/skins/ckeditor/plugins/plinn_image/dialog/embedded_images.html.pt b/skins/ckeditor/plugins/plinn_image/dialog/embedded_images.html.pt
new file mode 100644 (file)
index 0000000..0efdcdd
--- /dev/null
@@ -0,0 +1,175 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+       <head>
+               <meta http-equiv="content-type" content="text/html;charset=utf-8" />
+               <title>Embedded images</title>
+               <style type="text/css" media="screen">
+                 a, a:hover, a:active, a:visited {
+        text-decoration:none;
+        color:#369;
+      }
+      
+                 #slides {
+                   margin-top: 1em;
+                 }
+
+                 .lightbox span {
+          width: 222px;
+          height: 222px;
+          display:block;
+          float:left;
+          margin-left:1px;
+          margin-top:1px;
+      }
+
+      .lightbox a.slide {
+        position:absolute;
+        display:block;
+        width: 222px;
+        height: 222px;
+        border: 1px solid #ddd;
+      }
+      
+      .lightbox .slide img {
+        position:absolute;
+        border: 1px solid black;
+      }
+      
+      .lightbox span.button {
+        background:none;
+        position: relative;
+      }
+
+      .lightbox span[class].button {
+        visibility:hidden;
+      }
+
+      .lightbox span:hover span.button {
+        visibility:visible;
+      }
+      
+               </style>
+               <script type="text/javascript" language="javascript" charset="utf-8" src="epoz_script_detect.js"></script>
+               <script type="text/javascript" language="javascript" charset="utf-8" src="javascript_events_api.js"></script>
+               <script type="text/javascript" language="javascript" charset="utf-8" src="sarissa.js"></script>
+               <script type="text/javascript" language="javascript" charset="utf-8" src="DHTMLapi.js"></script>
+               <script type="text/javascript">
+               // <!--
+               var FCK = window.parent.FCK;
+               var contentPath = FCK.Config.contentPath;
+
+               var FCKConfig = window.parent.FCKConfig;
+               var connUrl = FCKConfig.AttachmentBrowserConnectorUrl;
+               var imagesPath = 'images/';
+               
+               var slide_size = 222;
+               
+               function _initBrowser(){
+                 var form = document.getElementById('uploadAttachmentForm');
+                 form.elements['path'].value = contentPath;
+                 var loc = window.location;
+                 form.elements['redirUrl'].value = loc.protocol + '//' + loc.host + loc.pathname;
+                 form.action = connUrl;
+                 addListener(document.getElementById('slides'), 'click', handleClick)
+                 importAttachments();
+               }
+
+               function importAttachments() {
+                 var req = new XMLHttpRequest();
+                       req.open("POST", connUrl, false); // synchrone
+                       req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
+                       req.send("command=ls&path="+escape(contentPath));
+                       var respDom = req.responseXML.documentElement;
+                       
+                       var rows = respDom.getElementsByTagName('row');
+                       var row, img, slide, a;
+                       var slides = document.getElementById('slides');
+       
+                       for (var i = 0 ; i<rows.length ; i++)
+                         addControlThumbnail(rows[i], slides);
+               }
+               
+               function addControlThumbnail(row, dest) {
+                               var slide = document.createElement('span');
+
+                               var a = document.createElement('a');
+                               a.href = row.getAttribute('url');
+                               a.className = 'slide';
+
+                               var img = document.createElement('img');
+                               img.src = row.getAttribute('previewUrl');
+                               img.width = row.getAttribute('width');
+                               img.height = row.getAttribute('height');
+                               img.style.marginTop = (slide_size - parseInt(img.height)) / 2 + 'px';
+                               img.style.marginLeft = (slide_size - parseInt(img.width)) / 2 + 'px';
+                               img.border = 0;
+                               
+                               a.appendChild(img);
+                               slide.appendChild(a);
+                               dest.appendChild(slide);
+                               
+                               var spanButton = document.createElement('span');
+                               spanButton.className = 'button';
+                               var a = document.createElement('a');
+                               a.href = '#';
+                               a.text = "Supprimer";
+                               a.name = 'suppr';
+                               spanButton.appendChild(a);
+                               slide.appendChild(spanButton);
+        
+        var spanButtonWidth = getObjectWidth(a);
+        var spanButtonHeight = getObjectHeight(a);
+                               spanButton.style.width = spanButtonWidth + 'px';
+                               spanButton.style.height = spanButtonHeight + 'px';
+                               spanButton.style.top = slide_size - spanButtonHeight - 3 + 'px';
+                               spanButton.style.left = slide_size - spanButtonWidth - 3 + 'px';
+               }
+               
+               function handleClick(evt) {
+                 var target = getTargetedObject(evt);
+           disableDefault(evt);
+           disablePropagation(evt);
+           switch (target.tagName) {
+             case 'IMG' :
+                   var a = target.parentNode;
+                   window.parent.updateOrInsertImage(a.getAttribute('href', 2));
+                   break;
+                 case 'A' :
+                   if (target.name == 'suppr')
+                     var a = target.parentNode.parentNode.getElementsByTagName('a')[0];
+                     var href = a.getAttribute('href', 2);
+                     var imgPath = window.parent.editor.FCKConfig.EditorPath + href;
+                     
+                     var req = new XMLHttpRequest();
+                       req.open("POST", connUrl, false); // synchrone
+                       req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
+                       req.send("command=rm&path="+escape(imgPath));
+                 var doc = req.responseXML.documentElement;
+                 if (doc.tagName == 'done') {
+                   var slide = target.parentNode.parentNode;
+                   slide.parentNode.removeChild(slide);
+                   }
+               }
+                 
+               }
+               
+               addListener(window, 'load', _initBrowser);
+               // -->
+               </script>
+       </head>
+
+       <body i18n:domain="plinn">
+         <form id="uploadAttachmentForm" action="." method="post" enctype="multipart/form-data">
+           <input type="file" name="file"/>
+           <input type="hidden" name="path" value="" />
+           <input type="hidden" name="command" value="upload" />
+           <input type="hidden" name="Type" value="Photo" />
+           <input type="hidden" name="redirUrl" value="">
+           <input type="submit" name="upload" value="Upload" i18n:attributes="value"/>
+         </form>
+         <div id="slides" class="lightbox"></div>
+  </body>
+</html>
+
diff --git a/skins/ckeditor/plugins/plinn_image/dialog/plinn_image.html.pt b/skins/ckeditor/plugins/plinn_image/dialog/plinn_image.html.pt
new file mode 100644 (file)
index 0000000..cc5dcf1
--- /dev/null
@@ -0,0 +1 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">\r\r<html xmlns="http://www.w3.org/1999/xhtml">\r\r       <head>\r         <meta http-equiv="content-type" content="text/html;charset=utf-8" />\r           <title>Image selector</title>\r          <script type="text/javascript" language="javascript" charset="utf-8" src="epoz_script_detect.js"></script>\r             <script type="text/javascript" language="javascript" charset="utf-8" src="javascript_events_api.js"></script>\r          <script type="text/javascript" language="javascript" charset="utf-8" src="sarissa.js"></script>\r                <!--<script type="text/javascript" src="plinn_image.js"></script>-->\r   </head>\r\r       <frameset rows="27,*" border="0" frameborder="no" framespacing="0">\r            <frame name="tabs" src="about:blank" noresize="noresize" scrolling="no" />\r             <frame name="main" src="about:blank" />\r                <noframes><body></body></noframes>\r     </frameset>\r\r</html>
\ No newline at end of file
diff --git a/skins/ckeditor/plugins/plinn_image/dialog/plinn_image.js b/skins/ckeditor/plugins/plinn_image/dialog/plinn_image.js
new file mode 100644 (file)
index 0000000..424024a
--- /dev/null
@@ -0,0 +1,42 @@
+// (c) Benoît PIN 2006-2007
+// http://plinn.org
+// Licence GPL
+
+var editor             = window.dialogArguments.editor;
+var FCK                        = editor.FCK ;
+var FCKLang            = editor.FCKLang ;
+var FCKConfig  = editor.FCKConfig ;
+var FCKPlugins = editor.FCKPlugins;
+var FCKDebug   = editor.FCKDebug ;
+
+window.onload = function() {
+       var mainFrame = window.frames['main'];
+       mainFrame.src = FCKPlugins.Items['image'].Path + 'embedded_images.html';
+       mainFrame.location.href = mainFrame.src;
+       
+       var tabsFrame = window.frames['tabs'];
+       tabsFrame.src = FCKPlugins.Items['image'].Path + 'plinn_image_tabs.html'
+       tabsFrame.location.href = FCKPlugins.Items['image'].Path + 'plinn_image_tabs.html'
+}
+
+function updateOrInsertImage(url) {
+       var getSizeUrl = url + '/getResizedImageSize';
+       var req = new XMLHttpRequest();
+       req.open("POST", getSizeUrl, false); // synchrone
+       req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
+       var boxSize = FCKConfig.ImageMaxDefaultDimension + '_' + FCKConfig.ImageMaxDefaultDimension;
+       req.send("asXml:boolean=True&size=" + boxSize);
+       var doc = req.responseXML.documentElement;
+       
+       var width = doc.getElementsByTagName('width')[0].firstChild.nodeValue;
+       var height = doc.getElementsByTagName('height')[0].firstChild.nodeValue;
+       
+       
+       var img = FCK.CreateElement('img');
+       img.src = url + '/getResizedImage?size=' + boxSize;
+       img.width = width;
+       img.height = height;
+       
+       //FCK.InsertElement(img);
+       window.close();
+}
\ No newline at end of file
diff --git a/skins/ckeditor/plugins/plinn_image/dialog/plinn_image_tabs.html.pt b/skins/ckeditor/plugins/plinn_image/dialog/plinn_image_tabs.html.pt
new file mode 100644 (file)
index 0000000..4beb51a
--- /dev/null
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+       <head>
+               <meta http-equiv="content-type" content="text/html;charset=utf-8" />
+               <title>Image tabs options</title>
+               <style>
+                 <!--
+                 body {
+                   margin:0;
+                   padding:0;
+                 }
+      ul {
+        border-bottom:2px solid #DDDDDD;
+        border-collapse:collapse;
+        margin:0pt;
+        padding-left:1em;
+        white-space:nowrap;
+        position:absolute;
+        bottom:0;
+        width:100%;
+      }
+      li {
+        display:inline;
+        font-family: Arial,Helvetica,Geneva,Swiss,SunSans-Regular,sans-serif;
+        font-size:90%;
+      }
+      a {
+        text-decoration:none;
+      }
+      a, a:visited {
+        background-color:#fff;
+        border-left:1px dashed #ddd;
+        border-right:1px dashed #ddd;
+        border-top:1px dashed #ddd;
+        color:#369;
+        margin-right:0.5em;
+        padding:0pt 1em;
+      }
+      a:hover, a:active {
+        background-color:#ddd;
+        color:#369;
+      }
+      .selected a, .selected a:visited, .selected a:hover {
+        background-color:#FFFFFF;
+        border-color:#ddd rgb(221, 221, 221) rgb(255, 255, 255);
+        border-style:solid;
+        border-width:2px 2px 3px;
+        color:#336699;
+      }
+      -->
+               </style>
+
+               <script type="text/javascript" language="javascript" charset="utf-8" src="epoz_script_detect.js"></script>
+               <script type="text/javascript" language="javascript" charset="utf-8" src="javascript_events_api.js"></script>
+               <script type="text/javascript">
+               // <!--
+                 var tabs = [];
+                 function initTabs() {
+                   var FCKPlugins = window.parent.FCKPlugins;
+
+                   tabs = document.getElementsByTagName('a');
+                   tabs[0].href = FCKPlugins.Items['image'].Path + 'embedded_images.html';
+                   tabs[1].href = window.parent.FCKConfig.ImageBrowserURL;
+                   addListener(document, 'click', updateTabs)
+                 };
+                 addListener(window, 'load', initTabs);
+
+                 function updateTabs(evt) {
+                   var t = getTargetedObject(evt);
+                   if (t.tagName == 'A') {
+                   for (var i=0 ; i<tabs.length ; i++) {
+                     if (t == tabs[i])
+                       tabs[i].parentNode.className = 'selected';
+                     else
+                       tabs[i].parentNode.className = '';
+                   }
+                   t.blur();
+                   }
+                 }
+               // -->
+               </script>
+       </head>
+
+       <body>
+    <ul>
+      <li class="selected"><a href="." target="main">Images du document</a></li>
+      <li><a href="." target="main">Images du site</a></li>
+    </ul>
+  </body>
+</html>
+
index 442a2be..17658a9 100644 (file)
@@ -23,6 +23,19 @@ function updateImageSizeUrlParameters(img) {
        }
 }
 
        }
 }
 
+function openPlinnImageDialog(path, editor) {
+       var winOptions  = "location=no,menubar=no,toolbar=no,dependent=yes,dialog=yes,minimizable=no,modal=yes,alwaysRaised=yes" +
+               ",resizable=yes"  +
+               ",width=801"  +
+               ",height=600";
+               //",top="  + iTop +
+               //",left=" + iLeft ;
+       
+       var win = open(path + 'dialog/plinn_image.html', 'PlinnImageDialog', winOptions);
+       win.dialogArguments = new Object();
+       win.dialogArguments.editor = editor;
+}
+
 
 CKEDITOR.plugins.add( 'plinn_image',
 {
 
 CKEDITOR.plugins.add( 'plinn_image',
 {
@@ -42,21 +55,18 @@ CKEDITOR.plugins.add( 'plinn_image',
                                }
                        );
                });
                                }
                        );
                });
-               
+               var pluginPath = this.path;
                var command = editor.addCommand('plinn_image',
                        {
                var command = editor.addCommand('plinn_image',
                        {
-                               exec : function(editor) {
-                                       alert('Bonjour la France !');
-                               }
+                               exec : function(editor){openPlinnImageDialog(pluginPath, editor);}
                        });
                
                editor.ui.addButton('PlinnImage',
                        {
                                label : editor.lang.common.image,
                        });
                
                editor.ui.addButton('PlinnImage',
                        {
                                label : editor.lang.common.image,
-                               icon : this.path + 'dialog/plinn_image.gif',
+                               icon : pluginPath + 'dialog/plinn_image.gif',
                                command : 'plinn_image'
                        });
                                command : 'plinn_image'
                        });
-               console.log(this.path);
        }
 });
 
        }
 });