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, parent);
  16
  17     $('.xmlview-toolbar', this.element).bind('resize.xmlview', this.resized.bind(this));
  18
  19     this.parent.freeze('Ładowanie edytora...');
  20         this.editor = new CodeMirror($('.xmlview', this.element).get(0), {
  21       parserfile: 'parsexml.js',
  22       path: "/static/js/lib/codemirror/",
  23       stylesheet: "/static/css/xmlcolors.css",
  24       parserConfig: {useHTMLKludges: false},
  25       textWrapping: false,
  26       tabMode: 'spaces',
  27       indentUnit: 0,
  28       onChange: this.editorDataChanged.bind(this),
  29       initCallback: this.editorDidLoad.bind(this)
  30     });
  31   },
  32
  33   resized: function(event) {
  34     var height = this.element.height() - $('.xmlview-toolbar', this.element).outerHeight();
  35     $('.xmlview', this.element).height(height);
  36   },
  37
  38   reload: function() {
  39     this.model.load(true);
  40   },
  41
  42   editorDidLoad: function(editor) {
  43     $(editor.frame).css({width: '100%', height: '100%'});
  44     this.model
  45       .addObserver(this, 'data', this.modelDataChanged.bind(this))
  46       .addObserver(this, 'state', this.modelStateChanged.bind(this))
  47       .load();
  48
  49     this.parent.unfreeze();
  50
  51     this.editor.setCode(this.model.get('data'));
  52     this.modelStateChanged('state', this.model.get('state'));
  53
  54     // editor.grabKeys(
  55     //   $.fbind(self, self.hotkeyPressed),
  56     //   $.fbind(self, self.isHotkey)
  57     // );
  58   },
  59
  60   editorDataChanged: function() {
  61     this.model.set('data', this.editor.getCode());
  62   },
  63
  64   modelDataChanged: function(property, value) {
  65     if (this.editor.getCode() != value) {
  66       this.editor.setCode(value);
  67     }
  68   },
  69
  70   modelStateChanged: function(property, value) {
  71     if (value == 'synced' || value == 'dirty') {
  72       this.unfreeze();
  73     } else if (value == 'unsynced') {
  74       this.freeze('Niezsynchronizowany...');
  75     } else if (value == 'loading') {
  76       this.freeze('Ładowanie...');
  77     } else if (value == 'saving') {
  78       this.freeze('Zapisywanie...');
  79     } else if (value == 'error') {
  80       this.freeze(this.model.get('error'));
  81     }
  82   },
  83
  84   dispose: function() {
  85     this.model.removeObserver(this);
  86     $(this.editor.frame).remove();
  87     this._super();
  88   }
  89 });
  90
  91 // Register view
  92 panels['xml'] = XMLView;