64fc89a2e481214132e4d4d984421f3eb81724bf
[redakcja.git] / platforma / templates / wiki / document_details.html
1 {% extends "base.html" %}
2 {% load toolbar_tags %}
3
4 {% block extrahead %}
5     <link rel="stylesheet" href="{{STATIC_URL}}css/html.css" type="text/css" media="screen" charset="utf-8">
6     <script src="{{STATIC_URL}}js/lib/codemirror/codemirror.js" type="text/javascript" charset="utf-8"></script>
7     <script src="{{STATIC_URL}}js/lib/jquery.splitter.js" type="text/javascript" charset="utf-8"></script>
8     <script src="{{STATIC_URL}}js/lib/jquery.form.js" type="text/javascript" charset="utf-8"></script>
9     <script src="{{STATIC_URL}}js/button_scripts.js" type="text/javascript" charset="utf-8"></script>
10     <script type="text/javascript" charset="utf-8">
11     
12         function serialize(element) {
13             if (element.nodeType == 3) { // tekst
14                 return [$.trim(element.nodeValue)];
15             } else if (element.nodeType != 1) { // pomijamy węzły nie będące elementami XML ani tekstem
16                 return [];
17             }
18             
19             var result = [];
20             var hasContent = false;
21             
22             result.push('<');
23             result.push(element.tagName);
24             
25             // Mozilla nie uważa deklaracji namespace za atrybuty
26             var ns = element.tagName.indexOf(':');
27             if (ns != -1 && $.browser.mozilla) {
28                 result.push(' xmlns:');
29                 result.push(element.tagName.substring(0, ns));
30                 result.push('="');
31                 result.push(element.namespaceURI);
32                 result.push('"');
33             }
34             
35             if (element.attributes) {
36                 for (var i=0; i < element.attributes.length; i++) {
37                     var attr = element.attributes[i];
38                     result.push(' ');
39                     result.push(attr.name);
40                     result.push('="');
41                     result.push(attr.value);
42                     result.push('"');
43                     hasContent = true;
44                 }
45             }
46             
47             if (element.childNodes.length == 0) {
48                 result.push(' />');
49             } else {
50                 result.push('>');
51     
52                 for (var i=0; i < element.childNodes.length; i++) {
53                     result = result.concat(serialize(element.childNodes[i]));
54                 }
55     
56                 result.push('</');
57                 result.push(element.tagName);
58                 result.push('>');
59             }
60             
61             if (element.tagName == 'akap' || element.tagName == 'akap_dialog' || element.tagName == 'akap_cd') {
62                 result.push('\n\n\n');
63             } else if (element.tagName == 'rdf:RDF') {
64                 result.push('\n\n\n\n\n');
65             } else if (element.tagName.indexOf('dc:') != -1) {
66                 result.push('\n');
67             }
68             
69             return result;
70         };
71         
72
73         $(function() {
74             var editor = CodeMirror.fromTextArea('id_text', {
75                 parserfile: 'parsexml.js',
76                 path: "{{ STATIC_URL }}js/lib/codemirror/",
77                 stylesheet: "{{ STATIC_URL }}css/xmlcolors.css",
78                 parserConfig: {
79                     useHTMLKludges: false
80                 },
81                 textWrapping: true,
82                 tabMode: 'spaces',
83                 indentUnit: 0,
84             });
85             
86             $('#splitter').splitter({
87                 type: "v",
88                 outline: true,
89                 minLeft: 480,
90                 sizeRight: 0,
91                 anchorToWindow: true,
92                 resizeToWidth: true,
93             });
94             
95             $(window).resize(function() {
96                 $('iframe').height($(window).height() - $('#tabs').outerHeight());
97             });
98             
99             $(window).resize();
100             
101             $('.vsplitbar').dblclick(function() {
102                 if ($('#sidebar').width() == 0) {
103                     $('#splitter').trigger('resize', [$(window).width() - 480]);
104                 } else {
105                     $('#splitter').trigger('resize', [$(window).width()]);
106                 }
107             });
108
109             loadSuccess = function() {
110                 if (this.get('state') != 'loading') {
111                     alert('erroneous state:', this.get('state'));
112                 }
113
114                 // prepare text
115                 var doc = null;
116
117                 messageCenter.addMessage('success', 'xmlload', 'Wczytałem HTML :-)');
118             }
119                         
120             function createXSLT(xsl) {
121                 var p = new XSLTProcessor();
122                 p.importStylesheet(xsl);
123                 return p;
124             }
125             
126             function transform() {
127                 $.ajax({
128                     url: '{{ STATIC_URL }}xsl/wl2html_client.xsl',
129                     dataType: 'xml',
130                     success: function(data) {
131                         var doc = null;
132                         var parser = new DOMParser();
133                         var serializer = new XMLSerializer();
134                         var htmlXSL = createXSLT(data);
135                         
136                         doc = editor.getCode().replace(/\/\s+/g, '<br />');
137                         doc = parser.parseFromString(doc, 'text/xml');
138                         console.log('xml', doc);
139                         doc = htmlXSL.transformToFragment(doc, document);
140                         console.log('after transform', doc);
141                         $('#simple-editor').html(doc.firstChild);
142                     },
143                     error: function() {alert('Error loading XSL!')}
144                 });        
145             };
146             
147             function reverseTransform () {
148                 $.ajax({
149                     url: '{{ STATIC_URL }}xsl/html2wl_client.xsl',
150                     dataType: 'xml',
151                     success: function(data) {
152                         var doc = null;
153                         var parser = new DOMParser();
154                         var serializer = new XMLSerializer();
155                         var xsl = createXSLT(data);
156                         
157                         doc = serializer.serializeToString($('#simple-editor div').get(0))
158                         doc = parser.parseFromString(doc, 'text/xml');
159                         console.log('xml',doc, doc.documentElement);
160                         // TODO: Sprawdzenie błędów
161                         doc = xsl.transformToDocument(doc);
162                         console.log('after transform', doc, doc.documentElement);
163                         doc = serialize(doc.documentElement).join('');
164                         // doc = serializer.serializeToString(doc.documentElement)
165                         editor.setCode(doc);
166                     },
167                     error: function() {alert('Error loading XSL!')}
168                 });
169             };
170             
171             $('#save-button').click(function(event) {
172                 event.preventDefault();
173                 console.log(editor.getCode(), $('form input[name=text]').get(0));
174                 $('form textarea[name=text]').val(editor.getCode());
175                 $('form').ajaxSubmit(function() {
176                     alert('Udało się!');
177                 });
178             });
179             
180             $('#simple-view-tab').click(function() {
181                 if ($(this).hasClass('active')) {
182                     return;
183                 }
184                 $(this).addClass('active');
185                 $('#source-view-tab').removeClass('active');
186                 $('#source-editor').hide();
187                 $('#simple-editor').show();
188                 transform();
189             });
190             
191             $('#source-view-tab').click(function() {
192                 if ($(this).hasClass('active')) {
193                     return;
194                 }
195                 $(this).addClass('active');
196                 $('#simple-view-tab').removeClass('active');
197                 $('#simple-editor').hide();
198                 $('#source-editor').show();
199                 reverseTransform();
200             });
201             
202             $('.toolbar button').click(function(event) {
203                 event.preventDefault();
204                 var params = eval("(" + $(this).attr('ui:action-params') + ")");
205                 scriptletCenter.scriptlets[$(this).attr('ui:action')](editor, params);
206             });
207             
208             $('.toolbar select').change(function() {
209                 var slug = $(this).val();
210                 
211                 $('.toolbar-buttons-container').hide().filter('[data-group=' + slug + ']').show();
212             });
213             
214             $('.toolbar-buttons-container').hide();
215             $('.toolbar select').change();
216         });
217     </script>
218     
219     <style type="text/css" media="screen">
220     
221         body {
222             margin: 0;
223             overflow: hidden;
224             padding: 0;
225             min-width: 960px;
226         }
227         
228         .vsplitbar {
229             width: 14px;
230             background: #EEE url(/static/img/gallery.png) no-repeat scroll center center;
231             border-left: 1px solid #999;
232             cursor: col-resize;
233         }
234         
235         .active {
236             background-color: #DDD;
237         }
238         
239         #simple-editor {
240             overflow: auto;
241             height: 100%;
242         }
243         
244         #sidebar {
245             overflow: auto;
246 /*            padding: 5px; */
247         }
248         
249         #header {
250             margin: 0;
251             padding: 0;
252             background-color: #C1C1C1;
253             background-image: -webkit-gradient(linear, left top, left bottom, from(#C1C1C1), color-stop(0.9, #A2A2A2));
254             font: 11px Helvetica, Verdana, sans-serif;
255             font-weight: bold;
256         }
257         
258         #header h1 {
259             margin: 0;
260             padding: 0;
261             font: 17px Helvetica, Verdana, sans-serif;
262             font-weight: bold;
263             float: left;
264             padding: 3px 6px 2px 6px;
265             color: #222;
266             line-height: 20px;
267         }
268         
269         #tabs {
270             margin: 0;
271             padding: 0;
272             
273             width: 100%;
274             height: 22px;
275             padding-top: 2px;
276             border-bottom: 1px solid #777;
277         }
278         
279         #tabs li {
280             -webkit-user-select: none;
281             cursor: default;
282             display: block;
283             float: left;
284             padding: 5px 12px 3px 12px;
285             border: 1px solid #999;
286             -webkit-border-radius: 4px;
287             -webkit-border-bottom-left-radius: 0;
288             -webkit-border-bottom-right-radius: 0;
289             font-weight: bold;
290             color: #222;
291 /*            text-shadow: #CCC 1px 1px 1px;*/
292             height: 13px;
293             background-color: #C1C1C1;
294             -webkit-box-shadow: 1px -1px 2px rgba(127, 127, 127, 0.25);
295             margin-left: 4px;
296             margin-bottom: -1px;
297         }
298         
299         #tabs li.active {
300             background-color: #FEFCDF;
301             background-image: none;
302 /*            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #C1C1C1), to(#FFFFFF));            */
303             border-bottom: 1px solid #FEFCDF;
304         }
305         
306         .toolbar {
307             border-bottom: 1px solid #777;
308             background-color: #FEFCDF;
309             margin: 0;
310             padding: 2px;
311         }
312         
313         .toolbar select {
314             float: left;
315             margin: 2px 5px 2px 0;
316             background: none;
317             border: 1px solid #999;
318             padding: 1px;
319         }
320         
321         .toolbar button {
322             display: block;
323             float: left;
324             margin: 4px 0 2px 0;
325             padding: 0 5px 2px 5px;
326             border: none;
327             background: none;
328         }
329         
330         .toolbar-end {
331             clear: both;
332         }
333         
334         .toolbar button:hover, .toolbar button:active {
335             background: #A2A2A2;
336             color: #FFF;
337             -webkit-border-radius: 10px;
338             -moz-border-radius: 10px;
339             border-radius: 10px;
340         }
341         
342         /* Remove extra padding in Firefox */
343         button::-moz-focus-inner { 
344             border: 0;
345             padding: 0;
346         }
347         
348         p { margin: 0;}
349     </style>
350 {% endblock %}
351
352 {% block maincontent %}
353     <form action="{% url wiki.views.document_detail document.name|urlencode %}" method="post" accept-charset="utf-8">
354         <div id="header">
355             <div id="tools" style="float: right;">Wersja: {{ document.revision }}<button style="margin-left: 6px" id="save-button">Zapisz</button></div>
356             <h1>{{ document.name }}</h1>
357             <ol id="tabs">
358                 <li id="simple-view-tab">Widok prosty</li>
359                 <li id="source-view-tab" class="active">Widok zaawansowany</li>
360             </ol>
361             <div style="clear: both"></div>
362         </div>
363         <div id="splitter">
364             <div id="editor">
365                 <div id="source-editor">
366                     {% toolbar %}
367                     {{ form.text }}
368                     <input type="hidden" name="name" value="{{ document.name }}" />
369                     <input type="hidden" name="author" value="annonymous" />
370                     <input type="hidden" name="comment" value="no comment" />
371                     <input type="hidden" name="revision" value="{{ document.revision }}" />
372                 </div>
373                 <div id="simple-editor" class="htmlview" style="display: none">
374                 </div>
375             </div>
376
377             <div id="sidebar" style="width: 200px">
378                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
379                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
380             </div>
381         </div>
382     </form>
383 {% endblock %}