Canevas pour un nouveau plugin d'application de styles basés sur des classes css...
[ckeditor.git] / 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