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') {
  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         }
 226
 227         .vsplitbar {
 228             width: 14px;
 229             background: #EEE url(/static/img/gallery.png) no-repeat scroll center center;
 230             border-left: 1px solid #999;
 231             cursor: col-resize;
 232         }
 233
 234         .active {
 235             background-color: #DDD;
 236         }
 237
 238         #simple-editor {
 239             overflow: auto;
 240             height: 100%;
 241         }
 242
 243         #sidebar {
 244             overflow: auto;
 245 /*            padding: 5px; */
 246         }
 247
 248         #header {
 249             margin: 0;
 250             padding: 0;
 251             background-color: #C1C1C1;
 252             background-image: -webkit-gradient(linear, left top, left bottom, from(#C1C1C1), color-stop(0.9, #A2A2A2));
 253             font: 11px Helvetica, Verdana, sans-serif;
 254             font-weight: bold;
 255         }
 256
 257         #header h1 {
 258             margin: 0;
 259             padding: 0;
 260             font: 17px Helvetica, Verdana, sans-serif;
 261             font-weight: bold;
 262             float: left;
 263             padding: 3px 6px 2px 6px;
 264             color: #222;
 265         }
 266
 267         #tabs {
 268             margin: 0;
 269             padding: 0;
 270
 271             width: 100%;
 272             height: 22px;
 273             padding-top: 2px;
 274             border-bottom: 1px solid #777;
 275         }
 276
 277         #tabs li {
 278             -webkit-user-select: none;
 279             cursor: default;
 280             display: block;
 281             float: left;
 282             padding: 5px 12px 3px 12px;
 283             border: 1px solid #999;
 284             -webkit-border-radius: 4px;
 285             -webkit-border-bottom-left-radius: 0;
 286             -webkit-border-bottom-right-radius: 0;
 287             font-weight: bold;
 288             color: #222;
 289 /*            text-shadow: #CCC 1px 1px 1px;*/
 290             height: 13px;
 291             background-color: #C1C1C1;
 292             -webkit-box-shadow: 1px -1px 2px rgba(127, 127, 127, 0.25);
 293             margin-left: 4px;
 294             margin-bottom: -1px;
 295         }
 296
 297         #tabs li.active {
 298             background-color: #FEFCDF;
 299             background-image: none;
 300 /*            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #C1C1C1), to(#FFFFFF));            */
 301             border-bottom: 1px solid #FEFCDF;
 302         }
 303
 304         .toolbar {
 305             border-bottom: 1px solid #777;
 306             background-color: #FEFCDF;
 307             margin: 0;
 308             padding: 2px;
 309         }
 310
 311         .toolbar select {
 312             float: left;
 313             margin: 2px 5px 2px 0;
 314             background: none;
 315             border: 1px solid #999;
 316             padding: 1px;
 317         }
 318
 319         .toolbar button {
 320             display: block;
 321             float: left;
 322             margin: 4px 0 2px 0;
 323             padding: 0 5px 2px 5px;
 324             border: none;
 325             background: none;
 326         }
 327
 328         .toolbar-end {
 329             clear: both;
 330         }
 331
 332         .toolbar button:hover, .toolbar button:active {
 333             background: #A2A2A2;
 334             color: #FFF;
 335             -webkit-border-radius: 10px;
 336             -moz-border-radius: 10px;
 337             border-radius: 10px;
 338         }
 339
 340         p { margin: 0;}
 341     </style>
 342 {% endblock %}
 343
 344 {% block maincontent %}
 345     <form action="{% url wiki.views.document_detail document.name|urlencode %}" method="post" accept-charset="utf-8">
 346         <div id="header">
 347             <div id="tools" style="float: right;">Wersja: {{ document.revision }}<button style="margin-left: 6px" id="save-button">Zapisz</button></div>
 348             <h1>{{ document.name }}</h1>
 349             <ol id="tabs">
 350                 <li id="simple-view-tab">Widok prosty</li>
 351                 <li id="source-view-tab" class="active">Widok zaawansowany</li>
 352             </ol>
 353             <div style="clear: both"></div>
 354         </div>
 355         <div id="splitter">
 356             <div id="editor">
 357                 <div id="source-editor">
 358                     {% toolbar %}
 359                     {{ form.text }}
 360                     <input type="hidden" name="name" value="{{ document.name }}" />
 361                     <input type="hidden" name="author" value="annonymous" />
 362                     <input type="hidden" name="comment" value="no comment" />
 363                     <input type="hidden" name="revision" value="{{ document.revision }}" />
 364                 </div>
 365                 <div id="simple-editor" class="htmlview" style="display: none">
 366                 </div>
 367             </div>
 368
 369             <div id="sidebar" style="width: 200px">
 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                 <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>
 372             </div>
 373         </div>
 374     </form>
 375 {% endblock %}