Commit a70226900609c43fd06eaab4e71afbf7b9dabdd2

  • avatar
  • admin
  • Sun Apr 01 19:18:34 IST 2012
Push for anon, implemented history
server/wsgi/pageEditor.js
(275 / 77)
  
1
21var pageEditor = {
32 template : '<div id="editoroverlay" title="Editor" alipielements="alipi" class="ui-widget-header ui-corner-all">'+
4 '<label style="left: 20%;">Reference</label>'+
5 '<div id="reference" readonly="yes"></div>'+
6 '<label style="left: 70%;">Editor</label>'+
7 '<div id="editor" alipielements="alipi" contenteditable="true"></div>'+
8 '<div id="forPrevData"></div>'+
9 '</div>',
3 '<label style="left: 20%;">Reference</label>'+
4 '<div id="reference" readonly="yes"></div>'+
5 '<label style="left: 70%;">Editor</label>'+
6 '<div id="editor" alipielements="alipi" contenteditable="true"></div>'+
7 '<div id="forPrevData"></div>'+
8 '</div>',
109 startEdit: function(event)
1110 {
1211 if($(event.target).attr('m4pageedittype') == 'text')
1312 {
14 _this = pageEditor;
15 //event.target.removeAttribute('m4pageedittype');
16 $(event.target).removeAttr('m4pageedittype');
17 $(body).append(_this.template);
18 /*editor = document.createElement("div");
19 editor.setAttribute("id", "editoroverlay");
20 editor.setAttribute("title", "Edit window");
21 editor.setAttribute("alipielements", "alipi");
22 editor.setAttribute("class", "ui-widget-header ui-corner-all");
23 document.body.appendChild(editor);
13 _this = pageEditor;
14 $(event.target).removeAttr('m4pageedittype');
15 $(event.target).children().removeAttr('m4pageedittype');
16 $(body).append(_this.template);
17 var tag = event.target.nodeName;
18 $('#reference').text('<'+tag+'>'+$(event.target).html()+'</'+tag+'>');
2419
25 refLabel= document.createElement("label");
26 refLabel.innerHTML = 'Reference';
27 refLabel.setAttribute("style", "position:absolute;top:5%;left:20%;color:#000;font-size:25px;");
28 editor.appendChild(refLabel);
29
30 refBox= document.createElement("div");
31 refBox.setAttribute("id","reference");
32 refBox.setAttribute("readonly", 'yes');
33 refBox.setAttribute("style","position:absolute;top:15%;left:4%;min-width:450px;max-width:450px;min-height:370px;max-height:370px;text-align:justify;color:#000;font-weight:normal;");
34 editor.appendChild(refBox);*/
35 //refBox.textContent = '<'+event.target.tagName+'>'+event.target.innerHTML+'</'+event.target.tagName+'>';
36 var tag = event.target.nodeName;
37 $('#reference').append('<'+tag+'>'+$(event.target).html()+'</'+tag+'>');
20 $('#editor').html($(event.target).html());
3821
39 /*editLabel= document.createElement("label");
40 editLabel.innerHTML = 'Editor';
41 editLabel.setAttribute("style", "position:absolute;top:5%;left:70%;color:#000;font-size:25px;");
42 editor.appendChild(editLabel);
43
44 editBox= document.createElement("div");
45 editBox.setAttribute("id","editor");
46 editBox.setAttribute("alipielements", "alipi");
47 editBox.setAttribute("contenteditable", true);
48 editBox.setAttribute("style","position:absolute;top:15%;left:51%;min-width:450px;max-width:450px;min-height:370px;max-height:370px;font-size:15;text-align:justify;color:#000;font-weight:normal;");
49 editor.appendChild(editBox);*/
50 //editBox.innerHTML = event.target.innerHTML;
51 $('#editor').html($(event.target).html());
52
53 /*forPrevData = document.createElement("div");
54 forPrevData.setAttribute("id","forPrevData");
55 forPrevData.setAttribute("style","display:none;height:1px;width:1px;");
56 editor.appendChild(forPrevData);*/
5722 $( "#editoroverlay" ).dialog({
58 width:1000,
59 height:550,
60 modal: true,
61 buttons: {
62 "+": function() {
63 //if(document.getElementById('editor').style.fontSize == '30px'){
64 if($('#editor').css('font-size') >= '30px') {
23 width:1000,
24 height:550,
25 modal: true,
26 buttons: {
27 "+": function() {
28
29 if($('#editor').css('font-size') >= '30px') {
6530 // passthrough
6631 }
67 else {
68 //document.getElementById('editor').style.fontSize = parseFloat(document.getElementById('editor').style.fontSize) + 1 + 'px';
69 //document.getElementById('reference').style.fontSize = parseFloat(document.getElementById('reference').style.fontSize) + 1 + 'px';
70 var font = parseFloat($('#editor').css('font-size')) + 1;
71 $('#editor').css('font-size', font+'px');
72 font = parseFloat($('#reference').css('font-size')) + 1;
73 $('#reference').css('font-size', font+'px');
32 else {
33
34 var font = parseFloat($('#editor').css('font-size')) + 1;
35 $('#editor').css('font-size', font+'px');
36 font = parseFloat($('#reference').css('font-size')) + 1;
37 $('#reference').css('font-size', font+'px');
7438 }
7539 },
7640 "-": function() {
77 //if(document.getElementById('editor').style.fontSize == '10px'){
78 if($('#editor').css('font-size') <= '10px') {
41
42 if($('#editor').css('font-size') <= '10px') {
7943 }
80 else {
81 //document.getElementById('editor').style.fontSize = parseFloat(document.getElementById('editor').style.fontSize) - 1 + 'px';
82 //document.getElementById('reference').style.fontSize = parseFloat(document.getElementById('reference').style.fontSize) - 1 + 'px';
83 var font = parseFloat($('#editor').css('font-size')) - 1;
84 $('#editor').css('font-size', font+'px');
85 font = parseFloat($('#reference').css('font-size')) - 1;
86 $('#reference').css('font-size', font+'px');
44 else {
8745
46 var font = parseFloat($('#editor').css('font-size')) - 1;
47 $('#editor').css('font-size', font+'px');
48 font = parseFloat($('#reference').css('font-size')) - 1;
49 $('#reference').css('font-size', font+'px');
50
8851 }
8952 },
9053 OK: function() {
9154 event.target.innerHTML = document.getElementById('editor').innerHTML;
92 $(event.target).html($('#editor').html());
55 $(event.target).html($('#editor').html());
9356 $(event.target).attr('m4pageedittype','text');
57 $(event.target).children().attr('m4pageedittype','text');
9458 $( "#editoroverlay" ).remove();
95 }
59 }
9660 },
9761 close: function() {
98 //document.getElementById("alipiSelectedElement").removeAttribute("id", "alipiSelectedElement");
9962 $("#editoroverlay" ).remove();
10063 }
10164 });
……
8080 var currentNode = element;
8181 var path = '';
8282 var index = -1;
83 // if ( currentNode == undefined) {
84 // currentNode = document.getElementById("alipiSelectedElement");
85 // }
8683
8784 if (currentNode.nodeName != "#text")
8885 {
……
127127 return path;
128128 },
129129};
130
131var util = {
132 historyObj : function EditCommandHistory(pageEditor) {
133 var self = this, history = [], imageSrc, imageMatcher, imageHeight, imageWidth, buildDataString, anchorElement, anchorElementId, ajaxResultProcessor = new AjaxResultProcessor();
134
135 this.hasChangesPending = function hasChangesPending() {
136 return history.length > 0;
137 };
138 this.formUncomplete = function formUnomplete(){
139 return (locName == '' && langName=='' && styleName == '' );
140 };
141
142 this.apply = function apply(command) {
143 var poofPosition, poofDiv;
144
145 switch (command.command) {
146 case 'TEXT_UPDATE':
147 command.element = document.getElementById("alipiSelectedElement");
148 command.previousData = document.getElementById("forPrevData").innerHTML;
149 command.data = document.getElementById("editor").innerHTML;
150 DOM.textContent(command.element, command.data);
151 pageEditor.showMessage('Text changed');
152 break;
153 case 'AUDIO_SRC_UPDATE':
154 textElementPopup.hasAudio = true;
155 command.previousData = "";
156 pageEditor.showMessage('Audio updated');
157 break;
158
159 // case 'DELETE':
160 // poofPosition = DOM.findPosition(command.element);
161
162 // poofDiv = DOM.BUILDER.DIV({'style' : 'width:32px;height:32px;background: transparent url(http://y.a11y.in/alipi/images/poof.png) no-repeat;position:absolute;top:' + poofPosition.y + 'px;left:' + poofPosition.x + 'px;'});
163 // document.body.appendChild(poofDiv);
164
165 // UTIL.animate(function(index, last) {
166 // if (last) {
167 // document.body.removeChild(poofDiv);
168 // } else {
169 // poofDiv.style.backgroundPosition = '0 -' + (index * 32) + 'px';
170 // }
171 // }, 5, 100);
172
173 // DOM.overrideStyleProperty(command.element, 'display', 'none');
174 // pageEditor.showMessage('Section deleted');
175 // break;
176
177 case 'IMAGE_SRC_UPDATE':
178 imageMatcher = new RegExp("(\\d+)x(\\d+),(.+)").exec(command.data);
179 imageWidth = imageMatcher[1];
180 imageHeight = imageMatcher[2];
181 imageSrc = imageMatcher[3];
182
183 if (imageSrc && command.element.src != imageSrc) {
184 command.element.src = imageSrc;
185 pageEditor.showMessage('Image changed');
186 }
187 if (imageWidth == 0) {
188 command.element.removeAttribute('width');
189 } else {
190 command.element.width = imageWidth;
191 }
192
193 if (imageHeight == 0) {
194 command.element.removeAttribute('height');
195 } else {
196 command.element.height = imageHeight;
197 }
198 break;
199
200 case 'ANCHOR_UPDATE':
201 command.element.setAttribute('href', command.data);
202 pageEditor.showMessage('Link changed');
203 break;
204
205 case 'ANCHOR_CREATE':
206 anchorElement = DOM.BUILDER.A({ 'href' : command.data });
207 console.log(command.element);
208 command.element.parentNode.replaceChild(anchorElement, command.element);
209 anchorElement.appendChild(command.element);
210 command.previousData = anchorElement;
211 pageEditor.showMessage('Link added');
212 break;
213
214 case 'AUDIO_UPDATE':
215 command.element.setAttribute('src', command.data);
216 pageEditor.showMessage('Audio changed');
217 break;
218
219 case 'AUDIO_CREATE':
220 audioElement = document.createElement('audio');
221 audioElement.setAttribute("id", "audiotag");
222 audioElement.setAttribute('src',command.data);
223 audioElement.setAttribute('controls','controls');
224 audioElement.setAttribute('style', 'display:table;');
225 $(audioElement).insertBefore($(selectedElement));
226 pageEditor.showMessage('Audio added');
227 break;
228
229 default:
230 console.error('Unknown command:', command);
231 }
232
233 history.push(command);
234 };
235
236 this.undo = function undo() {
237 var imageElement, command;
238
239 if (self.hasChangesPending()) {
240 command = history.pop();
241 switch (command.command) {
242 case 'TEXT_UPDATE':
243 console.log(command.element.innerHTML);
244 console.log(command.previousData.innerHTML);
245 command.element.innerHTML = command.previousData;
246 pageEditor.showMessage('Text change undone');
247 break;
248
249 case 'DELETE':
250 DOM.restoreStyleProperty(command.element, 'display', '');
251 pageEditor.showMessage('Delete undone');
252 break;
253
254 case 'IMAGE_SRC_UPDATE':
255 imageElement = new M4ImageElement(command.element);
256
257 command.element.src = command.previousData.src;
258 if (command.previousData.size.width) {
259 command.element.width = command.previousData.size.width;
260 } else {
261 command.element.removeAttribute('width');
262 }
263 if (command.previousData.size.height) {
264 command.element.height = command.previousData.size.height;
265 } else {
266 command.element.removeAttribute('height');
267 }
268 imageElement.setRawImageSize(command.previousData.rawImageSize)
269
270 pageEditor.showMessage('Image change undone');
271 break;
272
273 case 'AUDIO_SRC_UPDATE':
274 command.element.remove();
275 pageEditor.showMessage('Link removed');
276 break;
277 case 'ANCHOR_UPDATE':
278 command.element.setAttribute('href', command.previousData);
279 pageEditor.showMessage('Link change undone');
280 break;
281
282 case 'ANCHOR_CREATE':
283 command.previousData.parentNode.replaceChild(command.element, command.previousData);
284 pageEditor.showMessage('Link removed');
285 break;
286
287 default:
288 console.error('Unknown command:', command);
289 }
290 } else {
291 pageEditor.showMessage('Nothing to undo');
292 }
293 };
294
295 this.publish = function publish() {
296 var result;
297 if(document.getElementById('your-check').checked)
298 {
299 localStorage.myContent = buildDataString();
300 window.location.href = "http://dev.a11y.in/test.html";
301 window.reload();
302 }
303 else{
304
305 AJAX.post('http://dev.a11y.in/test', buildDataString(), function(result) {
306 ajaxResultProcessor.processPublishedResponse(result);
307 });
308 }
309 };
310
311 buildDataString = function buildDataString() {
312 var check_xpath = [], temp_history = [], index = [];
313 for(x=0; x<history.length; x++) {
314 check_xpath.push(history[x].xpath);
315 }
316 for(i=0; i<check_xpath.length-1; i++) {
317 for(j=i+1; j<check_xpath.length; j++) {
318 if ((check_xpath[i] == check_xpath[j]) && (history[i].elementType == history[j].elementType)) {
319 index.push(i);
320 }
321 }
322 }
323 if (index.length > 0) {
324 for (var z=0; z<index.length; z++) {
325 delete history[index[z]];
326 }
327 }
328
329 for (var x=0; x<history.length; x++) {
330 if (history[x] != undefined) {
331 temp_history.push(history[x]);
332 }
333 }
334
335 history = temp_history;
336 console.log("hello" + styleSelect.innerHTML);
337 var command, buffer;
338 buffer = new UTIL.StringBuffer();
339 UTIL.forEach(history, function(index, command) {
340 buffer.append('###'); //separates the commands
341 buffer.append('about='); //url=about //removed '&' on purpose
342 buffer.append(window.location.search.split('=')[1]);
343 buffer.append('&lang=');//lang
344 buffer.append(encodeURIComponent(langName.innerHTML));
345 buffer.append('&location=');//location
346 buffer.append(encodeURIComponent(locName.innerHTML));
347 buffer.append('&style=');//style
348 buffer.append(encodeURIComponent(styleSelect.innerHTML));
349 buffer.append('&blog='); //blog where to post
350 buffer.append(encodeURIComponent("blog"));
351 buffer.append('&elementtype='); // text, audio, img
352 buffer.append(encodeURIComponent(command.elementType));
353 buffer.append('&xpath=');//xpath
354 buffer.append(encodeURIComponent(command.xpath));
355 buffer.append('&data='); //data
356 buffer.append(encodeURIComponent(command.data));
357 buffer.append('&author='); //author
358 if (author.value == '') {
359 buffer.append(encodeURIComponent('Anonymous'));
360 } else {
361 buffer.append(encodeURIComponent(author.value));
362 }
363 }); console.log(buffer.toString());
364 return buffer.toString().substring(3);
365 };
366 },
367}