e4c69eda2120d0cd3a6c42546857dc791b4761f3
[redakcja.git] / platforma / templates / wiki / document_details.html
1 {% extends "base.html" %}
2
3 {% block extrahead %}
4     <script src="{{STATIC_URL}}js/lib/codemirror/codemirror.js" type="text/javascript" charset="utf-8"></script>
5     <script src="{{STATIC_URL}}js/lib/jquery.splitter.js" type="text/javascript" charset="utf-8"></script>
6     <script src="{{STATIC_URL}}js/lib/jquery.form.js" type="text/javascript" charset="utf-8"></script>
7     <script type="text/javascript" charset="utf-8">
8     
9         function serialize(element) {
10             if (element.nodeType == 3) {
11                 return [$.trim(element.nodeValue)];
12             }
13             
14             var result = [];
15             
16             result.push('<');
17             result.push(element.tagName);
18             
19             var ns = element.tagName.indexOf(':');
20             if (ns != -1 && $.browser.mozilla) {
21                 result.push(' xmlns:');
22                 result.push(element.tagName.substring(0, ns));
23                 result.push('="');
24                 result.push(element.namespaceURI);
25                 result.push('"');
26             }
27             
28             if (element.attributes) {
29                 for (var i=0; i < element.attributes.length; i++) {
30                     var attr = element.attributes[i];
31                     result.push(' ');
32                     result.push(attr.name);
33                     result.push('="');
34                     result.push(attr.value);
35                     result.push('"');
36                 }
37             }
38             
39             result.push('>');
40     
41             for (var i=0; i < element.childNodes.length; i++) {
42                 var child = element.childNodes[i];
43                 result = result.concat(serialize(child));
44             }
45     
46             result.push('</');
47             result.push(element.tagName);
48             result.push('>');
49     
50             if (element.tagName == 'akap') {
51                 result.push('\n\n\n');
52             } else if (element.tagName == 'rdf:RDF') {
53                 result.push('\n\n\n\n\n');
54             } else if (element.tagName.indexOf('dc:') != -1) {
55                 result.push('\n');
56             }
57             
58             return result;
59         };
60         
61
62         $(function() {
63             var editor = CodeMirror.fromTextArea('id_text', {
64                 parserfile: 'parsexml.js',
65                 path: "{{ STATIC_URL }}js/lib/codemirror/",
66                 stylesheet: "{{ STATIC_URL }}css/xmlcolors.css",
67                 parserConfig: {
68                     useHTMLKludges: false
69                 },
70                 textWrapping: true,
71                 tabMode: 'spaces',
72                 indentUnit: 0,
73             });
74             
75             $('#splitter').splitter({
76                 type: "v",
77                 outline: true,
78                 minLeft: 480,
79                 sizeRight: 0,
80                 anchorToWindow: true,
81                 resizeToWidth: true,
82             });
83             
84             $(window).resize(function() {
85                 $('iframe').height($(window).height() - $('#tabs').outerHeight());
86             });
87             
88             $(window).resize();
89             
90             $('.vsplitbar').dblclick(function() {
91                 if ($('#sidebar').width() == 0) {
92                     $('#splitter').trigger('resize', [$(window).width() - 480]);
93                 } else {
94                     $('#splitter').trigger('resize', [$(window).width()]);
95                 }
96             });
97
98             loadSuccess = function() {
99                 if (this.get('state') != 'loading') {
100                     alert('erroneous state:', this.get('state'));
101                 }
102
103                 // prepare text
104                 var doc = null;
105
106                 messageCenter.addMessage('success', 'xmlload', 'Wczytałem HTML :-)');
107             }
108                         
109             function createXSLT(xsl) {
110                 var p = new XSLTProcessor();
111                 p.importStylesheet(xsl);
112                 return p;
113             }
114             
115             function transform() {
116                 $.ajax({
117                     url: '{{ STATIC_URL }}xsl/wl2html_client.xsl',
118                     dataType: 'xml',
119                     success: function(data) {
120                         var doc = null;
121                         var parser = new DOMParser();
122                         var serializer = new XMLSerializer();
123                         var htmlXSL = createXSLT(data);
124                         
125                         doc = editor.getCode().replace(/\/\s+/g, '<br />');
126                         doc = parser.parseFromString(doc, 'text/xml');
127                         console.log('xml', doc);
128                         doc = htmlXSL.transformToFragment(doc, document);
129                         console.log('after transform', doc);
130                         $('#simple-editor').html(doc.firstChild);
131                     },
132                     error: function() {alert('Error loading XSL!')}
133                 });        
134             };
135             
136             function reverseTransform () {
137                 $.ajax({
138                     url: '{{ STATIC_URL }}xsl/html2wl_client.xsl',
139                     dataType: 'xml',
140                     success: function(data) {
141                         var doc = null;
142                         var parser = new DOMParser();
143                         var serializer = new XMLSerializer();
144                         var xsl = createXSLT(data);
145                         
146                         doc = serializer.serializeToString($('#simple-editor div').get(0))
147                         doc = parser.parseFromString(doc, 'text/xml');
148                         console.log('xml',doc, doc.documentElement);
149                         doc = xsl.transformToDocument(doc);
150                         console.log('after transform', doc, doc.documentElement);
151                         doc = serialize(doc.documentElement).join('');
152                         // doc = serializer.serializeToString(doc.documentElement)
153                         editor.setCode(doc);
154                     },
155                     error: function() {alert('Error loading XSL!')}
156                 });
157             };
158             
159             $('#save-button').click(function(event) {
160                 event.preventDefault();
161                 console.log(editor.getCode(), $('form input[name=text]').get(0));
162                 $('form textarea[name=text]').val(editor.getCode());
163                 $('form').ajaxSubmit(function() {
164                     alert('Udało się!');
165                 });
166             });
167             
168             $('#simple-view-tab').click(function() {
169                 $(this).addClass('active');
170                 $('#source-view-tab').removeClass('active');
171                 $('#source-editor').hide();
172                 $('#simple-editor').show();
173                 transform();
174             });
175             
176             $('#source-view-tab').click(function() {
177                 $(this).addClass('active');
178                 $('#simple-view-tab').removeClass('active');
179                 $('#simple-editor').hide();
180                 $('#source-editor').show();
181                 reverseTransform();
182             });
183         });
184     </script>
185     
186     <style type="text/css" media="screen">
187     
188         body {
189             margin: 0;
190             overflow: hidden;
191             padding: 0;
192         }
193         
194         .vsplitbar {
195             width: 14px;
196             background: #EEE url(/static/img/gallery.png) no-repeat scroll center center;
197             border-left: 1px solid #999;
198             cursor: col-resize;
199         }
200         
201         .active {
202             background-color: #DDD;
203         }
204         
205         #simple-editor {
206             overflow: auto;
207             height: 100%;
208         }
209         
210         #sidebar {
211             overflow: auto;
212             padding: 5px;
213         }
214         
215         #header {
216             margin: 0;
217             padding: 0;
218             background-color: #C1C1C1;
219             background-image: -webkit-gradient(linear, left top, left bottom, from(#C1C1C1), color-stop(0.9, #A2A2A2));
220             font: 11px Helvetica, Verdana, sans-serif;
221             font-weight: bold;
222         }
223         
224         #header h1 {
225             margin: 0;
226             padding: 0;
227             font: 17px Helvetica, Verdana, sans-serif;
228             font-weight: bold;
229             float: left;
230             padding: 3px 6px 2px 6px;
231             color: #222;
232         }
233         
234         #tabs {
235             margin: 0;
236             padding: 0;
237             
238             width: 100%;
239             height: 22px;
240             padding-top: 2px;
241             border-bottom: 1px solid #777;
242         }
243         
244         #tabs li {
245             -webkit-user-select: none;
246             cursor: default;
247             display: block;
248             float: left;
249             padding: 5px 12px 3px 12px;
250             border: 1px solid #999;
251             -webkit-border-radius: 4px;
252             -webkit-border-bottom-left-radius: 0;
253             -webkit-border-bottom-right-radius: 0;
254             font-weight: bold;
255             color: #222;
256 /*            text-shadow: #CCC 1px 1px 1px;*/
257             height: 13px;
258             background-color: #C1C1C1;
259             -webkit-box-shadow: 1px -1px 2px rgba(127, 127, 127, 0.25);
260             margin-left: 4px;
261             margin-bottom: -1px;
262         }
263         
264         #tabs li.active {
265             background-color: #FFF;
266             background-image: none;
267 /*            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #C1C1C1), to(#FFFFFF));            */
268             border-bottom: 1px solid #FFF;
269         }
270     </style>
271 {% endblock %}
272
273 {% block maincontent %}
274     <form action="{% url wiki.views.document_detail document.name|urlencode %}" method="post" accept-charset="utf-8">
275         <div id="header">
276             <div id="tools" style="float: right;">Wersja: {{ document.revision }}<button style="margin-left: 6px" id="save-button">Zapisz</button></div>
277             <h1>{{ document.name }}</h1>
278             <ol id="tabs">
279                 <li id="simple-view-tab">Widok prosty</li>
280                 <li id="source-view-tab" class="active">Widok zaawansowany</li>
281             </ol>
282             <div style="clear: both"></div>
283         </div>
284         <div id="splitter">
285             <div id="editor">
286                 <div id="source-editor">
287                     {{ form.text }}
288                     <input type="hidden" name="name" value="{{ document.name }}" />
289                     <input type="hidden" name="author" value="annonymous" />
290                     <input type="hidden" name="comment" value="no comment" />
291                     <input type="hidden" name="revision" value="{{ document.revision }}" />
292                 </div>
293                 <div id="simple-editor" style="display: none">
294                 </div>
295             </div>
296
297             <div id="sidebar" style="width: 200px">
298                 <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>
299                 <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>
300             </div>
301         </div>
302     </form>
303 {% endblock %}