platforma/templates/wiki/document_details.html

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