d24dfa947ebcbe9ff95b42b3b2045422d00b3073
[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         this.hotkeys = [];
18         var self = this;
19
20         $('.xmlview-toolbar', this.element).bind('resize.xmlview', this.resized.bind(this));
21    
22     
23         this.parent.freeze('Ładowanie edytora...');
24         this.editor = new CodeMirror($('.xmlview', this.element).get(0), {
25             parserfile: 'parsexml.js',
26             path: "/static/js/lib/codemirror/",
27             stylesheet: "/static/css/xmlcolors.css",
28             parserConfig: {
29                 useHTMLKludges: false
30             },
31             textWrapping: false,
32             tabMode: 'spaces',
33             indentUnit: 0,
34             onChange: this.editorDataChanged.bind(this),
35             initCallback: this.editorDidLoad.bind(this)
36         });
37     },
38   
39     resized: function(event) {
40         var height = this.element.height() - $('.xmlview-toolbar', this.element).outerHeight();
41         $('.xmlview', this.element).height(height);
42     },
43   
44     reload: function() {
45         this.model.load(true);
46     },
47   
48     editorDidLoad: function(editor) {
49         $(editor.frame).css({
50             width: '100%',
51             height: '100%'
52         });
53         this.model
54         .addObserver(this, 'data', this.modelDataChanged.bind(this))
55         .addObserver(this, 'state', this.modelStateChanged.bind(this))
56         .load();
57     
58         this.parent.unfreeze();
59       
60         this.editor.setCode(this.model.get('data'));
61         this.modelStateChanged('state', this.model.get('state'));
62         
63         editor.grabKeys(
64             this.hotkeyPressed.bind(this),
65             this.isHotkey.bind(this)
66             );
67     },
68   
69     editorDataChanged: function() {
70         this.model.set('data', this.editor.getCode());
71     },
72   
73     modelDataChanged: function(property, value) {
74         if (this.editor.getCode() != value) {
75             this.editor.setCode(value);
76         }
77     },
78   
79     modelStateChanged: function(property, value) {
80         if (value == 'synced' || value == 'dirty') {
81             this.unfreeze();
82         } else if (value == 'unsynced') {
83             this.freeze('Niezsynchronizowany...');
84         } else if (value == 'loading') {
85             this.freeze('Ładowanie...');
86         } else if (value == 'saving') {
87             this.freeze('Zapisywanie...');
88         } else if (value == 'error') {
89             this.freeze(this.model.get('error'));
90         }
91     },
92     
93     dispose: function() {
94         this.model.removeObserver(this);
95         $(this.editor.frame).remove();
96         this._super();
97     },    
98
99     getHotkey: function(event) {
100         var code = event.keyCode;
101         var ch = String.fromCharCode(code & 0xff).toLowerCase();
102         var button = $('.buttontoolbarview-button[title='+ch+']', this.element)[0]
103
104         console.log(ch, '#', button);       
105         var mod = 0;
106             
107         if(event.altKey) mod |= 0x01;
108         if(event.ctrlKey) mod |= 0x02;
109         if(event.shiftKey) mod |= 0x04;
110
111         if(button) {
112             var match = null;
113
114             $(button).each(function() {
115                 if( parseInt($(this).attr('ui:hotkey_mod')) == mod ) {
116                     match = this;
117                     return;
118                 }
119             })
120
121             return match;
122         }
123         else {
124             return null;
125         }
126     },
127
128     isHotkey: function() {
129         console.log(arguments);
130         
131         if(this.getHotkey.apply(this, arguments))
132             return true;
133         else
134             return false;
135     },
136
137     hotkeyPressed: function() {
138         var button = this.getHotkey.apply(this, arguments);
139         this.buttonToolbar.buttonPressed({
140             target: button
141         });
142     }
143
144 });
145
146 function Hotkey(code) {
147     this.code = code;
148     this.has_alt = ((code & 0x01 << 8) !== 0);
149     this.has_ctrl = ((code & 0x01 << 9) !== 0);
150     this.has_shift = ((code & 0x01 << 10) !== 0);
151     this.character = String.fromCharCode(code & 0xff);
152 }
153
154 Hotkey.prototype.toString = function() {
155     var mods = [];
156     if(this.has_alt) mods.push('Alt');
157     if(this.has_ctrl) mods.push('Ctrl');
158     if(this.has_shift) mods.push('Shift');
159     mods.push('"'+this.character+'"');
160     return mods.join('+');
161 };
162
163 // Register view
164 panels['xml'] = XMLView;