d272e277cf541c2540a8c4da508b98776343652e
[redakcja.git] / 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   editorDidLoad: function(editor) {
39     $(editor.frame).css({width: '100%', height: '100%'});
40     this.model
41       .addObserver(this, 'data', this.modelDataChanged.bind(this))
42       .addObserver(this, 'state', this.modelStateChanged.bind(this))
43       .load();
44     
45     this.parent.unfreeze();
46       
47     this.editor.setCode(this.model.get('data'));
48     this.modelStateChanged('state', this.model.get('state'));
49         
50     // editor.grabKeys(
51     //   $.fbind(self, self.hotkeyPressed),
52     //   $.fbind(self, self.isHotkey)
53     // );
54   },
55   
56   editorDataChanged: function() {
57     this.model.set('data', this.editor.getCode());
58   },
59   
60   modelDataChanged: function(property, value) {
61     if (this.editor.getCode() != value) {
62       this.editor.setCode(value);
63     }
64   },
65   
66   modelStateChanged: function(property, value) {
67     if (value == 'synced' || value == 'dirty') {
68       this.parent.unfreeze();
69     } else if (value == 'unsynced') {
70       this.parent.freeze('Niezsynchronizowany...');
71     } else if (value == 'loading') {
72       this.parent.freeze('Ładowanie...');
73     } else if (value == 'saving') {
74       this.parent.freeze('Zapisywanie...');
75     } else if (value == 'error') {
76       this.parent.freeze(this.model.get('error'));
77     }
78   },
79     
80   dispose: function() {
81     this.model.removeObserver(this);
82     $(this.editor.frame).remove();
83     this._super();
84   }
85 });
86
87 // Register view
88 panels['xml'] = XMLView;