project/static/js/views/xml.js

   1 /*global View CodeMirror render_template panels */
   2 var XMLView = View.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     $(this.model)
  16       .bind('modelxmlfreeze.xmlview',
  17         function() { this.freeze('Ładowanie danych z serwera...'); }.bind(this))
  18       .bind('modelxmlunfreeze.xmlview',
  19         this.unfreeze.bind(this));
  20
  21     this.freeze('Ładowanie edytora...');
  22         this.editor = new CodeMirror($('.xmlview', this.element).get(0), {
  23       parserfile: 'parsexml.js',
  24       path: "/static/js/lib/codemirror/",
  25       stylesheet: "/static/css/xmlcolors.css",
  26       parserConfig: {useHTMLKludges: false},
  27       textWrapping: false,
  28       tabMode: 'spaces',
  29       indentUnit: 0,
  30       // onChange: function() {
  31       //        self.fireEvent('contentChanged');
  32       // },
  33       initCallback: this.editorDidLoad.bind(this)
  34     });
  35   },
  36
  37   editorDidLoad: function(editor) {
  38     console.log('init', this.model);
  39     editor.setCode('Ładowanie...');
  40     $(editor.frame).css({width: '100%', height: '100%'});
  41     this.editor.setCode(this.model.xml);
  42     $(this.model).bind('modelxmlchanged.xmlview', this.codeChanged.bind(this));
  43     this.unfreeze();
  44     this.model.getXML();
  45     // editor.grabKeys(
  46     //   $.fbind(self, self.hotkeyPressed),
  47     //   $.fbind(self, self.isHotkey)
  48     // );
  49   },
  50
  51   codeChanged: function() {
  52     console.log('setCode:', this.editor, this.model);
  53     this.editor.setCode(this.model.xml);
  54     this.unfreeze();
  55   },
  56
  57   dispose: function() {
  58     $(this.model)
  59       .unbind('modelxmlchanged.xmlview')
  60       .unbind('modelxmlfreeze.xmlview')
  61       .unbind('modelxmlunfreeze.xmlview');
  62     $(this.editor.frame).remove();
  63     this._super();
  64   }
  65 });
  66
  67 // Register view
  68 panels.push({name: 'xml', klass: XMLView});