project/static/js/views/xml.js

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