skins/ckeditor/plugins/plinn_image/dialog/embedded_images.html.pt

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2
   3 <html xmlns="http://www.w3.org/1999/xhtml">
   4
   5         <head>
   6                 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   7                 <title>Embedded images</title>
   8                 <style type="text/css" media="screen">
   9                   a, a:hover, a:active, a:visited {
  10         text-decoration:none;
  11         color:#369;
  12       }
  13
  14                   #slides {
  15                     margin-top: 1em;
  16                   }
  17
  18                   .lightbox span {
  19           width: 222px;
  20           height: 222px;
  21           display:block;
  22           float:left;
  23           margin-left:1px;
  24           margin-top:1px;
  25       }
  26
  27       .lightbox a.slide {
  28         position:absolute;
  29         display:block;
  30         width: 222px;
  31         height: 222px;
  32         border: 1px solid #ddd;
  33       }
  34
  35       .lightbox .slide img {
  36         position:absolute;
  37         border: 1px solid black;
  38       }
  39
  40       .lightbox span.button {
  41         background:none;
  42         position: relative;
  43       }
  44
  45       .lightbox span[class].button {
  46         visibility:hidden;
  47       }
  48
  49       .lightbox span:hover span.button {
  50         visibility:visible;
  51       }
  52
  53                 </style>
  54                 <script type="text/javascript" language="javascript" charset="utf-8" src="epoz_script_detect.js"></script>
  55                 <script type="text/javascript" language="javascript" charset="utf-8" src="javascript_events_api.js"></script>
  56                 <script type="text/javascript" language="javascript" charset="utf-8" src="sarissa.js"></script>
  57                 <script type="text/javascript" language="javascript" charset="utf-8" src="DHTMLapi.js"></script>
  58                 <script type="text/javascript">
  59                 <!--
  60                 var editor = window.parent.editor;
  61                 var contentPath = editor.contentPath;
  62                 var connUrl = window.parent.editor.config.attachmentBrowserConnectorUrl;
  63
  64                 var slide_size = 222;
  65
  66                 function _initBrowser(){
  67                   var form = document.getElementById('uploadAttachmentForm');
  68                   form.elements['path'].value = contentPath;
  69                   var loc = window.location;
  70                   form.elements['redirUrl'].value = loc.protocol + '//' + loc.host + loc.pathname;
  71                   form.action = connUrl;
  72                   addListener(document.getElementById('slides'), 'click', handleClick)
  73                   importAttachments();
  74                 }
  75
  76                 function importAttachments() {
  77                   var req = new XMLHttpRequest();
  78                         req.open("POST", connUrl, false); // synchrone
  79                         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
  80                         req.send("command=ls&path="+escape(contentPath));
  81                         var respDom = req.responseXML.documentElement;
  82
  83                         var rows = respDom.getElementsByTagName('row');
  84                         var row, img, slide, a;
  85                         var slides = document.getElementById('slides');
  86
  87                         for (var i = 0 ; i<rows.length ; i++)
  88                           addControlThumbnail(rows[i], slides);
  89                 }
  90
  91                 function addControlThumbnail(row, dest) {
  92                                 var slide = document.createElement('span');
  93
  94                                 var a = document.createElement('a');
  95                                 a.href = row.getAttribute('url');
  96                                 a.className = 'slide';
  97
  98                                 var img = document.createElement('img');
  99                                 img.src = row.getAttribute('previewUrl');
 100                                 img.width = row.getAttribute('width');
 101                                 img.height = row.getAttribute('height');
 102                                 img.style.marginTop = (slide_size - parseInt(img.height)) / 2 + 'px';
 103                                 img.style.marginLeft = (slide_size - parseInt(img.width)) / 2 + 'px';
 104                                 img.border = 0;
 105
 106                                 a.appendChild(img);
 107                                 slide.appendChild(a);
 108                                 dest.appendChild(slide);
 109
 110                                 var spanButton = document.createElement('span');
 111                                 spanButton.className = 'button';
 112                                 var a = document.createElement('a');
 113                                 a.href = '#';
 114                                 a.innerHTML = "Supprimer";
 115                                 a.name = 'suppr';
 116                                 spanButton.appendChild(a);
 117                                 slide.appendChild(spanButton);
 118
 119         var spanButtonWidth = getObjectWidth(a);
 120         var spanButtonHeight = getObjectHeight(a);
 121                                 spanButton.style.width = spanButtonWidth + 'px';
 122                                 spanButton.style.height = spanButtonHeight + 'px';
 123                                 spanButton.style.top = slide_size - spanButtonHeight - 3 + 'px';
 124                                 spanButton.style.left = slide_size - spanButtonWidth - 3 + 'px';
 125                 }
 126
 127                 function handleClick(evt) {
 128                   var target = getTargetedObject(evt);
 129             disableDefault(evt);
 130             disablePropagation(evt);
 131             switch (target.tagName) {
 132               case 'IMG' :
 133                     var a = target.parentNode;
 134                     window.parent.updateOrInsertImage(a.getAttribute('href', 2), true);
 135                     break;
 136                   case 'A' :
 137                     if (target.name == 'suppr')
 138                       var a = target.parentNode.parentNode.getElementsByTagName('a')[0];
 139                       var href = a.getAttribute('href', 2);
 140                       var imgPath = contentPath + '/' + href;
 141
 142                       var req = new XMLHttpRequest();
 143                         req.open("POST", connUrl, false); // synchrone
 144                         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
 145                         req.send("command=rm&path="+escape(imgPath));
 146                   var doc = req.responseXML.documentElement;
 147                   if (doc.tagName == 'done') {
 148                     var slide = target.parentNode.parentNode;
 149                     slide.parentNode.removeChild(slide);
 150                     }
 151                 }
 152                 }
 153
 154                 addListener(window, 'load', _initBrowser);
 155                 // -->
 156                 </script>
 157         </head>
 158
 159         <body i18n:domain="plinn">
 160           <form id="uploadAttachmentForm" action="." method="post" enctype="multipart/form-data">
 161             <input type="file" name="file"/>
 162             <input type="hidden" name="path" value="" />
 163             <input type="hidden" name="command" value="upload" />
 164             <input type="hidden" name="Type" value="Photo" />
 165             <input type="hidden" name="redirUrl" value="">
 166             <input type="submit" name="upload" value="Upload" i18n:attributes="value"/>
 167           </form>
 168           <div id="slides" class="lightbox"></div>
 169   </body>
 170 </html>
 171