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