aed04553242ebc5db3924625f24cc7b110e90fa8
[redakcja.git] / project / static / js / editor.ui.js
1 /*\r
2  * UI related Editor methods\r
3  */\r
4 Editor.prototype.setupUI = function() {\r
5     // set up the UI visually and attach callbacks\r
6     var self = this;\r
7 \r
8     var resize_start = function(event, mydata) {\r
9         $(document).bind('mousemove', mydata, resize_changed).\r
10         bind('mouseup', mydata, resize_stop);\r
11 \r
12         $('.panel-overlay', mydata.root).css('display', 'block');\r
13         return false;\r
14     }\r
15     var resize_changed =  function(event) {\r
16         var old_width = parseInt(event.data.overlay.css('width'));\r
17         var delta = event.pageX + event.data.hotspot_x - old_width;\r
18 \r
19         if(old_width + delta < 12) delta = 12 - old_width;\r
20         if(old_width + delta > $(window).width()) \r
21             delta = $(window).width() - old_width;\r
22         \r
23         event.data.overlay.css({\r
24             'width': old_width + delta\r
25         });\r
26 \r
27         if(event.data.overlay.next) {\r
28             var left = parseInt(event.data.overlay.next.css('left'));\r
29             event.data.overlay.next.css('left', left+delta);\r
30         }\r
31 \r
32         return false;\r
33     };\r
34 \r
35     var resize_stop = function(event) {\r
36         $(document).unbind('mousemove', resize_changed).unbind('mouseup', resize_stop);\r
37         // $('.panel-content', event.data.root).css('display', 'block');\r
38         var overlays = $('.panel-content-overlay', event.data.root);\r
39         $('.panel-content-overlay', event.data.root).each(function(i) {\r
40             if( $(this).data('panel').hasClass('last-panel') )\r
41                 $(this).data('panel').css({\r
42                     'left': $(this).css('left'),\r
43                     'right': $(this).css('right')\r
44                 });\r
45             else\r
46                 $(this).data('panel').css({\r
47                     'left': $(this).css('left'),\r
48                     'width': $(this).css('width')\r
49                 });\r
50         });\r
51         $('.panel-overlay', event.data.root).css('display', 'none');\r
52         $(event.data.root).trigger('stopResize');\r
53     };\r
54 \r
55     /*\r
56      * Prepare panels (overlays & stuff)\r
57      */\r
58     /* create an overlay */\r
59     var panel_root = self.rootDiv;\r
60     var overlay_root = $("<div class='panel-overlay'></div>");\r
61     panel_root.append(overlay_root);\r
62 \r
63     var prev = null;\r
64 \r
65     $('*.panel-wrap', panel_root).each( function()\r
66     {\r
67         var panel = $(this);\r
68         var handle = $('.panel-slider', panel);\r
69         var overlay = $("<div class='panel-content-overlay panel-wrap'>&nbsp;</div>");\r
70         overlay_root.append(overlay);\r
71         overlay.data('panel', panel);\r
72         overlay.data('next', null);\r
73 \r
74         if (prev) prev.next = overlay;\r
75 \r
76         if( panel.hasClass('last-panel') )\r
77         {\r
78             overlay.css({\r
79                 'left': panel.css('left'),\r
80                 'right': panel.css('right')\r
81             });\r
82         }\r
83         else {\r
84             overlay.css({\r
85                 'left': panel.css('left'),\r
86                 'width': panel.css('width')\r
87             });\r
88             // $.log('Has handle: ' + panel.attr('id'));\r
89             overlay.append(handle.clone());\r
90             /* attach the trigger */\r
91             handle.mousedown(function(event) {\r
92                 var touch_data = {\r
93                     root: panel_root,\r
94                     overlay: overlay,\r
95                     hotspot_x: event.pageX - handle.position().left\r
96                 };\r
97 \r
98                 $(this).trigger('hpanel:panel-resize-start', touch_data);\r
99                 return false;\r
100             });\r
101             $('.panel-content', panel).css('right',\r
102                 (handle.outerWidth() || 10) + 'px');\r
103             $('.panel-content-overlay', panel).css('right',\r
104                 (handle.outerWidth() || 10) + 'px');\r
105         };\r
106 \r
107         prev = overlay;\r
108     });\r
109 \r
110     panel_root.bind('hpanel:panel-resize-start', resize_start);\r
111     self.rootDiv.bind('stopResize', function() {\r
112         self.savePanelOptions();      \r
113     });\r
114     \r
115     /*\r
116      * Connect panel actions\r
117      */\r
118     $('#panels > *.panel-wrap').each(function() {\r
119         var panelWrap = $(this);\r
120         // $.log('wrap: ', panelWrap);\r
121         var panel = new Panel(panelWrap);\r
122         panelWrap.data('ctrl', panel); // attach controllers to wraps\r
123         panel.load($('.panel-toolbar select', panelWrap).val());\r
124 \r
125         $('.panel-toolbar select', panelWrap).change(function() {\r
126             var url = $(this).val();\r
127             panelWrap.data('ctrl').load(url);\r
128             self.savePanelOptions();\r
129         });\r
130 \r
131         $('.panel-toolbar button.refresh-button', panelWrap).click(\r
132             function() {\r
133                 panel.refresh();\r
134             } );\r
135 \r
136         self.rootDiv.bind('stopResize', function() {\r
137             panel.callHook('toolbarResized');\r
138         });\r
139     });\r
140 \r
141     $(document).bind('panel:contentChanged', function() {\r
142         self.onContentChanged.apply(self, arguments)\r
143     });  \r
144 \r
145     /*\r
146      * Connect various buttons\r
147      */\r
148 \r
149     $('#toolbar-button-save').click( function (event, data) {\r
150         self.saveToBranch();\r
151     } );\r
152 \r
153     $('#toolbar-button-update').click( function (event, data) {\r
154         if (self.updateUserBranch()) {\r
155             // commit/update can be called only after proper, save\r
156             // this means all panels are clean, and will get refreshed\r
157             // do this only, when there are any changes to local branch\r
158             self.refreshPanels();\r
159         }\r
160     } );\r
161 \r
162     /* COMMIT DIALOG */\r
163     $('#commit-dialog').\r
164     jqm({\r
165         modal: true,\r
166         trigger: '#toolbar-button-commit'\r
167     });\r
168 \r
169     $('#commit-dialog-cancel-button').click(function() {\r
170         $('#commit-dialog-error-empty-message').hide();\r
171         $('#commit-dialog').jqmHide();\r
172     });\r
173 \r
174     $('#commit-dialog-save-button').click( function (event, data) \r
175     {\r
176         if( $('#commit-dialog-message').val().match(/^\s*$/)) {\r
177             $('#commit-dialog-error-empty-message').fadeIn();\r
178         }\r
179         else {\r
180             $('#commit-dialog-error-empty-message').hide();\r
181             $('#commit-dialog').jqmHide();\r
182             self.sendMergeRequest($('#commit-dialog-message').val() );\r
183         }       \r
184      \r
185         return false;\r
186     });    \r
187 \r
188     /* SPLIT DIALOG */\r
189     $('#split-dialog').jqm({\r
190         modal: true,\r
191         onShow: $.fbind(self, self.loadSplitDialog)\r
192     }).\r
193     jqmAddClose('button.dialog-close-button');\r
194 \r
195 // $('#split-dialog').   \r
196 }\r
197 \r
198 Editor.prototype.loadSplitDialog = function(hash)\r
199 {\r
200     var self = this;    \r
201     \r
202     $("div.loading-box", hash.w).show();\r
203     $("div.fatal-error-box", hash.w).hide();\r
204     $('div.container-box', hash.w).hide();\r
205     hash.w.show();\r
206 \r
207     function onFailure(rq, tstat, err) {\r
208         $('div.container-box', hash.w).html('');\r
209         $("div.loading-box", hash.w).hide();\r
210         $("div.fatal-error-box", hash.w).show();\r
211         hash.t.failure();\r
212     };\r
213 \r
214     function onSuccess(data, status) {\r
215         // put the form into the window\r
216         $('div.container-box', hash.w).html(data);\r
217         $("div.loading-box", hash.w).hide();\r
218         $('form input[name=splitform-splittext]', hash.w).val(hash.t.selection);\r
219         $('form input[name=splitform-fulltext]', hash.w).val(hash.t.fulltext);\r
220         $('div.container-box', hash.w).show();\r
221 \r
222         // connect buttons\r
223         $('#split-dialog-button-accept').click(function() {\r
224             self.postSplitRequest(onSuccess, onFailure);\r
225             return false;\r
226         });\r
227 \r
228         $('#split-dialog-button-close').click(function() {\r
229             hash.w.jqmHide();\r
230             $('div.container-box', hash.w).html('');\r
231             hash.t.failure();\r
232         });\r
233 \r
234         $('#split-dialog-button-dismiss').click(function() {\r
235             hash.w.jqmHide();\r
236             $('div.container-box', hash.w).html('');\r
237             hash.t.success();\r
238         });\r
239 \r
240         if($('#id_splitform-autoxml').is(':checked'))\r
241             $('#split-form-dc-subform').show();\r
242         else\r
243             $('#split-form-dc-subform').hide();\r
244 \r
245         $('#id_splitform-autoxml').change(function() {            \r
246             if( $(this).is(':checked') )\r
247                 $('#split-form-dc-subform').show();\r
248             else\r
249                 $('#split-form-dc-subform').hide();\r
250         });\r
251     };   \r
252 \r
253     $.ajax({\r
254         url: 'split',\r
255         dataType: 'html',\r
256         success: onSuccess,\r
257         error: onFailure,\r
258         type: 'GET',\r
259         data: {}\r
260     });\r
261 }\r
262 \r
263 /* Refreshing routine */\r
264 Editor.prototype.refreshPanels = function() {\r
265     var self = this;\r
266 \r
267     self.allPanels().each(function() {\r
268         var panel = $(this).data('ctrl');\r
269         $.log('Refreshing: ', this, panel);\r
270         if ( panel.changed() )\r
271             panel.unmarkChanged();\r
272         else\r
273             panel.refresh();\r
274     });\r
275 \r
276     $('#toolbar-button-save').attr('disabled', 'disabled');\r
277     $('#toolbar-button-commit').removeAttr('disabled');\r
278     $('#toolbar-button-update').removeAttr('disabled');\r
279 };\r
280 \r
281 /*\r
282  * Pop-up messages\r
283  */\r
284 Editor.prototype.showPopup = function(name, text, timeout)\r
285 {\r
286     timeout = timeout || 4000;\r
287     var self = this;\r
288     self.popupQueue.push( [name, text, timeout] )\r
289 \r
290     if( self.popupQueue.length > 1)\r
291         return;\r
292 \r
293     var box = $('#message-box > #' + name);\r
294     $('*.data', box).html(text || '');\r
295     box.fadeIn(100);\r
296 \r
297     if(timeout > 0)\r
298         setTimeout( $.fbind(self, self.advancePopupQueue), timeout);\r
299 };\r
300 \r
301 Editor.prototype.advancePopupQueue = function() {\r
302     var self = this;\r
303     var elem = this.popupQueue.shift();\r
304     if(elem) {\r
305         var box = $('#message-box > #' + elem[0]);\r
306 \r
307         box.fadeOut(100, function()\r
308         {\r
309             $('*.data', box).html('');\r
310 \r
311             if( self.popupQueue.length > 0) {\r
312                 var ibox = $('#message-box > #' + self.popupQueue[0][0]);\r
313                 $('*.data', ibox).html(self.popupQueue[0][1] || '');\r
314                 ibox.fadeIn(100);\r
315                 if(self.popupQueue[0][2] > 0)\r
316                     setTimeout( $.fbind(self, self.advancePopupQueue), self.popupQueue[0][2]);\r
317             }\r
318         });\r
319     }\r
320 };\r
321 \r
322 \r