project/templates/explorer/panels/xmleditor.html

   1 {% load toolbar_tags %}
   2
   3 <div class="change-font-size" style="">
   4     <div class="decrease-font-size">A<sup>-</sup></div>
   5     <div class="increase-font-size">A<sup>+</sup></div>
   6 </div>
   7
   8 <div class="iframe-container" style="position: absolute; top: 41pt; left:0px; right:0px; bottom: 0px;">
   9         <textarea name="text">{{ text }}</textarea>
  10 </div>
  11
  12
  13 {% toolbar %}
  14
  15 <script type="text/javascript" charset="utf-8">
  16
  17 panel_hooks = {
  18         load: function () {
  19                 var self = this;
  20                 var panel = self.contentDiv;
  21
  22         var textareaId = 'xmleditor-' + Math.ceil(Math.random() * 1000000000);
  23                 $('textarea', panel).attr('id', textareaId);
  24
  25         var texteditor = CodeMirror.fromTextArea(textareaId, {
  26             parserfile: 'parsexml.js',
  27             path: "{{STATIC_URL}}js/codemirror/",
  28             stylesheet: "{{STATIC_URL}}css/xmlcolors.css",
  29             parserConfig: {useHTMLKludges: false},
  30             onChange: function() {
  31                 self.fireEvent('contentChanged');
  32             },
  33             initCallback: function(editor) {
  34                 // Editor is loaded
  35                 // Buttons are connected
  36                 // register callbacks for actions
  37                 texteditor.grabKeys(
  38                     $.fbind(self, self.hotkeyPressed),
  39                     $.fbind(self, self.isHotkey) );
  40             }
  41         })
  42
  43         $(texteditor.frame).css({width: '100%', height: '100%'});
  44
  45
  46
  47         $('.decrease-font-size', panel).click(function() {
  48             var frameBody = $('body', $(texteditor.frame).contents());
  49             console.log(frameBody.css('font-size'));
  50             frameBody.css('font-size', parseInt(frameBody.css('font-size')) - 2);
  51         });
  52
  53         $('.increase-font-size', panel).click(function() {
  54             var frameBody = $('body', $(texteditor.frame).contents());
  55             console.log(frameBody.css('font-size'));
  56             frameBody.css('font-size', parseInt(frameBody.css('font-size')) + 2);
  57         });
  58         this.texteditor = texteditor;
  59     },
  60
  61         unload: function() {
  62                 this.texteditor = null;
  63         },
  64
  65
  66         //refresh: function() { }, // no support for refresh
  67
  68         saveInfo: function(saveInfo) {
  69                 var myInfo = {
  70                         url: "{% url file_xml fpath %}",
  71                         postData: {
  72                                 content: this.texteditor.getCode()
  73                         }
  74                 };
  75                 $.extend(saveInfo, myInfo);
  76         }
  77 };
  78
  79 </script>