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   buttonToolbar: null,
   8
   9   init: function(element, model, template) {
  10     this._super(element, model, template);
  11
  12     this.freeze('Ładowanie edytora...');
  13         this.editor = new CodeMirror($('.xmlview', this.element).get(0), {
  14       parserfile: 'parsexml.js',
  15       path: "/static/js/lib/codemirror/",
  16       stylesheet: "/static/css/xmlcolors.css",
  17       parserConfig: {useHTMLKludges: false},
  18       textWrapping: false,
  19       tabMode: 'spaces',
  20       indentUnit: 0,
  21       onChange: this.editorDataChanged.bind(this),
  22       initCallback: this.editorDidLoad.bind(this)
  23     });
  24   },
  25
  26   editorDidLoad: function(editor) {
  27     $(editor.frame).css({width: '100%', height: '100%'});
  28
  29     this.model
  30       .addObserver(this, 'data', this.modelDataChanged.bind(this))
  31       .addObserver(this, 'synced', this.modelSyncChanged.bind(this));
  32
  33     if (!this.model.get('synced')) {
  34       this.freeze('Niezsynchronizowany...');
  35       this.model.load();
  36     } else {
  37       this.editor.setCode(this.model.get('data'));
  38     }
  39     this.unfreeze();
  40
  41     // editor.grabKeys(
  42     //   $.fbind(self, self.hotkeyPressed),
  43     //   $.fbind(self, self.isHotkey)
  44     // );
  45   },
  46
  47   editorDataChanged: function() {
  48     this.model.set('data', this.editor.getCode());
  49   },
  50
  51   modelDataChanged: function(property, value) {
  52     if (this.editor.getCode() != value) {
  53       this.editor.setCode(value);
  54     }
  55   },
  56
  57   modelSyncChanged: function(property, value) {
  58     if (value) {
  59       this.unfreeze();
  60     } else {
  61       this.freeze('Niezsynchronizowany...');
  62     }
  63   },
  64
  65   dispose: function() {
  66     this.model.removeObserver(this);
  67     $(this.editor.frame).remove();
  68     this._super();
  69   }
  70 });
  71
  72 // Register view
  73 panels['xml'] = XMLView;