platforma/static/js/main.js

   1 function serialize(element) {
   2     if (element.nodeType == 3) { // tekst
   3         return [$.trim(element.nodeValue)];
   4     } else if (element.nodeType != 1) { // pomijamy węzły nie będące elementami XML ani tekstem
   5         return [];
   6     }
   7
   8     var result = [];
   9     var hasContent = false;
  10
  11     result.push('<');
  12     result.push(element.tagName);
  13
  14     // Mozilla nie uważa deklaracji namespace za atrybuty
  15     var ns = element.tagName.indexOf(':');
  16     if (ns != -1 && $.browser.mozilla) {
  17         result.push(' xmlns:');
  18         result.push(element.tagName.substring(0, ns));
  19         result.push('="');
  20         result.push(element.namespaceURI);
  21         result.push('"');
  22     }
  23
  24     if (element.attributes) {
  25         for (var i=0; i < element.attributes.length; i++) {
  26             var attr = element.attributes[i];
  27             result.push(' ');
  28             result.push(attr.name);
  29             result.push('="');
  30             result.push(attr.value);
  31             result.push('"');
  32             hasContent = true;
  33         }
  34     }
  35
  36     if (element.childNodes.length == 0) {
  37         result.push(' />');
  38     } else {
  39         result.push('>');
  40
  41         for (var i=0; i < element.childNodes.length; i++) {
  42             result = result.concat(serialize(element.childNodes[i]));
  43         }
  44
  45         result.push('</');
  46         result.push(element.tagName);
  47         result.push('>');
  48     }
  49
  50     if (element.tagName == 'akap' || element.tagName == 'akap_dialog' || element.tagName == 'akap_cd') {
  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/js/lib/codemirror/",
  66         stylesheet: "/static/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
 104     function createXSLT(xsl) {
 105         var p = new XSLTProcessor();
 106         p.importStylesheet(xsl);
 107         return p;
 108     }
 109
 110     function transform() {
 111         $.ajax({
 112             url: '/static/xsl/wl2html_client.xsl',
 113             dataType: 'xml',
 114             success: function(data) {
 115                 var doc = null;
 116                 var parser = new DOMParser();
 117                 var serializer = new XMLSerializer();
 118                 var htmlXSL = createXSLT(data);
 119
 120                 doc = editor.getCode().replace(/\/\s+/g, '<br />');
 121                 doc = parser.parseFromString(doc, 'text/xml');
 122                 console.log('xml', doc);
 123                 doc = htmlXSL.transformToFragment(doc, document);
 124                 console.log('after transform', doc);
 125                 $('#html-view').html(doc.firstChild);
 126             },
 127             error: function() {alert('Error loading XSL!')}
 128         });
 129     };
 130
 131     function reverseTransform () {
 132         $.ajax({
 133             url: '/static/xsl/html2wl_client.xsl',
 134             dataType: 'xml',
 135             success: function(data) {
 136                 var doc = null;
 137                 var parser = new DOMParser();
 138                 var serializer = new XMLSerializer();
 139                 var xsl = createXSLT(data);
 140
 141                 doc = serializer.serializeToString($('#html-view div').get(0))
 142                 doc = parser.parseFromString(doc, 'text/xml');
 143                 console.log('xml',doc, doc.documentElement);
 144                 // TODO: Sprawdzenie błędów
 145                 doc = xsl.transformToDocument(doc);
 146                 console.log('after transform', doc, doc.documentElement);
 147                 doc = serialize(doc.documentElement).join('');
 148                 // doc = serializer.serializeToString(doc.documentElement)
 149                 editor.setCode(doc);
 150             },
 151             error: function() {alert('Error loading XSL!')}
 152         });
 153     };
 154
 155     $('#save-button').click(function(event) {
 156         event.preventDefault();
 157         console.log(editor.getCode(), $('form input[name=text]').get(0));
 158         $('form textarea[name=text]').val(editor.getCode());
 159         $('form').ajaxSubmit(function() {
 160             alert('Udało się!');
 161         });
 162     });
 163
 164     $('#simple-view-tab').click(function() {
 165         if ($(this).hasClass('active')) {
 166             return;
 167         }
 168         $(this).addClass('active');
 169         $('#source-view-tab').removeClass('active');
 170         $('#source-editor').hide();
 171         $('#simple-editor').show();
 172         transform();
 173     });
 174
 175     $('#source-view-tab').click(function() {
 176         if ($(this).hasClass('active')) {
 177             return;
 178         }
 179         $(this).addClass('active');
 180         $('#simple-view-tab').removeClass('active');
 181         $('#simple-editor').hide();
 182         $('#source-editor').show();
 183         reverseTransform();
 184     });
 185
 186     $('.toolbar button').click(function(event) {
 187         event.preventDefault();
 188         var params = eval("(" + $(this).attr('ui:action-params') + ")");
 189         scriptletCenter.scriptlets[$(this).attr('ui:action')](editor, params);
 190     });
 191
 192     $('.toolbar select').change(function() {
 193         var slug = $(this).val();
 194
 195         $('.toolbar-buttons-container').hide().filter('[data-group=' + slug + ']').show();
 196     });
 197
 198     $('.toolbar-buttons-container').hide();
 199     $('.toolbar select').change();
 200
 201     // $('#html-view *[x-editable]').live('mouseover', function() {
 202     //     $(this).css({backgroundColor: 'red', marginLeft: -50, paddingLeft: 50});
 203     //     $(this).append('<button class="edit-button">Edytuj</button>');
 204     // }).live('mouseout', function() {
 205     //     $(this).css({backgroundColor: null, marginLeft: 0, paddingLeft: 0});
 206     //     $('.edit-button', this).remove();
 207     // });
 208 });