project/static/js/views/xml.js

   1 /*global Class CodeMirror render_template panels */
   2 var XMLView = Class.extend({
   3   element: null,
   4   model: null,
   5   template: 'xml-view-template',
   6   editor: null,
   7
   8   init: function(element, model, template) {
   9     this.element = $(element);
  10     this.model = $(model).get(0);
  11     console.log('XMLView#init model:', model);
  12     this.template = template || this.template;
  13     this.element.html(render_template(this.template, {}));
  14
  15     var self = this;
  16         this.editor = new CodeMirror($('.xmlview', this.element).get(0), {
  17       parserfile: 'parsexml.js',
  18       path: "/static/js/lib/codemirror/",
  19       stylesheet: "/static/css/xmlcolors.css",
  20       parserConfig: {useHTMLKludges: false},
  21       // onChange: function() {
  22       //        self.fireEvent('contentChanged');
  23       // },
  24       initCallback: this.editorDidLoad.bind(this)
  25     });
  26   },
  27
  28   editorDidLoad: function(editor) {
  29     console.log('init', this.model);
  30     editor.setCode('Ładowanie...');
  31     $(editor.frame).css({width: '100%', height: '100%'});
  32     this.editor.setCode(this.model.xml);
  33     $(this.model).bind('modelxmlchanged.xmlview', this.codeChanged.bind(this));
  34     this.model.getXML();
  35     // editor.grabKeys(
  36     //   $.fbind(self, self.hotkeyPressed),
  37     //   $.fbind(self, self.isHotkey)
  38     // );
  39   },
  40
  41   codeChanged: function() {
  42     console.log('setCode:', this.editor, this.model);
  43     this.editor.setCode(this.model.xml);
  44   },
  45
  46   dispose: function() {
  47     $(this.model).unbind('modelxmlchanged.xmlview');
  48     $(this.editor.frame).remove();
  49   }
  50 });
  51
  52 // Register view
  53 panels.push({name: 'xml', klass: XMLView});