project/templates/explorer/panels/xmleditor.html

   1 {% load toolbar_tags %}
   2
   3 {% toolbar %}
   4 <div class="iframe-container" style="position: absolute; top: 48px; left:0px; right:0px; bottom: 0px;">
   5         <textarea name="text">{{ text }}</textarea>
   6 </div>
   7
   8 <script type="text/javascript" charset="utf-8">
   9
  10 panel_hooks = {
  11         load: function () {
  12                 var self = this;
  13                 var panel = self.contentDiv;
  14
  15         var textareaId = 'xmleditor-' + Math.ceil(Math.random() * 1000000000);
  16                 $('textarea', panel).attr('id', textareaId);
  17
  18                 var texteditor = CodeMirror.fromTextArea(textareaId, {
  19             parserfile: 'parsexml.js',
  20             path: "/static/js/codemirror/",
  21             stylesheet: "/static/css/xmlcolors.css",
  22             parserConfig: {useHTMLKludges: false},
  23             onChange: function() {
  24                                 panel.trigger('panel:contentChanged', self);
  25             },
  26             initCallback: function(editor) {
  27                 // Toolbar
  28                 $('.toolbar-tabs li', panel).click(function() {
  29                     var id = $(this).attr('p:button-list');
  30                     $('.toolbar-tabs li', panel).removeClass('active');
  31                     $(this).addClass('active');
  32                     if (!$('.' + id, panel).is(':visible')) {
  33                         $('.toolbar-buttons ol', panel).not('#' + id).hide();
  34                         $('.' + id, panel).show();
  35                     }
  36                 })
  37
  38                 var keys = {};
  39                 $('.toolbar-buttons li', panel).each(function() {
  40                     var tag = $(this).attr('p:tag');
  41                     var handler = function() {
  42                         var text = texteditor.selection();
  43                         editor.replaceSelection('<' + tag + '>' + text + '</' + tag + '>');
  44                         if (text.length == 0) {
  45                             var pos = texteditor.cursorPosition();
  46                             texteditor.selectLines(pos.line, pos.character + tag.length + 2);
  47                         }
  48                         $(document).trigger('panel:contentChanged', self);
  49                     }
  50                     if ($(this).attr('p:key')) {
  51                         keys[$(this).attr('p:key')] = handler;
  52                     }
  53                     $(this).click(handler)
  54                 });
  55
  56                 texteditor.grabKeys(function(event) {
  57                     if (keys[event.keyCode]) {
  58                         keys[event.keyCode]();
  59                     }
  60                 }, function(event) { return event.altKey && keys[event.keyCode]; });
  61             }
  62         })
  63
  64         $(texteditor.frame).css({width: '100%', height: '100%'});
  65
  66         $('#toolbar-buttons li').wTooltip({
  67             delay: 1000,
  68             style: {
  69                 border: "1px solid #7F7D67",
  70                 opacity: 0.9,
  71                 background: "#FBFBC6",
  72                 padding: "1px",
  73                 fontSize: "12px",
  74             }
  75         });
  76
  77                 this.texteditor = texteditor;
  78     },
  79
  80         unload: function() {
  81                 this.texteditor = null;
  82         },
  83
  84
  85         //refresh: function() { }, // no support for refresh
  86
  87         saveInfo: function(saveInfo) {
  88                 var myInfo = {
  89                         url: "{% url file_xml fpath %}",
  90                         postData: {
  91                                 content: this.texteditor.getCode()
  92                         }
  93                 };
  94                 $.extend(saveInfo, myInfo);
  95         }
  96 };
  97
  98 </script>