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 %}