Dodanie PanelContainerView oraz postawy HTMLView i XMLView.
[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-quick-save').click( function (event, data) {\r
150         self.saveToBranch();\r
151     } );\r
152 \r
153     $('#toolbar-button-save').click( function (event, data) {\r
154         $('#commit-dialog').jqmShow( {callback: $.fbind(self, self.saveToBranch)} );\r
155     } );\r
156 \r
157     $('#toolbar-button-update').click( function (event, data) {\r
158         if (self.updateUserBranch()) {\r
159             // commit/update can be called only after proper, save\r
160             // this means all panels are clean, and will get refreshed\r
161             // do this only, when there are any changes to local branch\r
162             self.refreshPanels();\r
163         }\r
164     } );\r
165 \r
166     /* COMMIT DIALOG */\r
167     $('#commit-dialog').\r
168     jqm({\r
169         modal: true,\r
170         onShow: $.fbind(self, self.loadRelatedIssues)        \r
171     });\r
172 \r
173     $('#toolbar-button-commit').click( function (event, data) {\r
174         $('#commit-dialog').jqmShow( {callback: $.fbind(self, self.sendMergeRequest)} );\r
175     } );\r
176     \r
177     /* STATIC BINDS */\r
178     $('#commit-dialog-cancel-button').click(function() {\r
179         $('#commit-dialog-error-empty-message').hide();\r
180         $('#commit-dialog').jqmHide();\r
181     });   \r
182     \r
183 \r
184     /* SPLIT DIALOG */\r
185     $('#split-dialog').jqm({\r
186         modal: true,\r
187         onShow: $.fbind(self, self.loadSplitDialog)\r
188     }).\r
189     jqmAddClose('button.dialog-close-button');\r
190 }\r
191 \r
192 Editor.prototype.loadRelatedIssues = function(hash)\r
193 {\r
194     var self = this;\r
195     var c = $('#commit-dialog-related-issues');\r
196 \r
197     $('#commit-dialog-save-button').click( function (event, data)\r
198     {\r
199         if( $('#commit-dialog-message').val().match(/^\s*$/)) {\r
200             $('#commit-dialog-error-empty-message').fadeIn();\r
201         }\r
202         else {\r
203             $('#commit-dialog-error-empty-message').hide();\r
204             $('#commit-dialog').jqmHide();\r
205 \r
206             var message = $('#commit-dialog-message').val();\r
207             $('#commit-dialog-related-issues input:checked').\r
208                 each(function() { message += ' refs #' + $(this).val(); });\r
209             $.log("COMMIT APROVED", hash.t);\r
210             hash.t.callback(message);\r
211         }\r
212 \r
213         return false;\r
214     });\r
215 \r
216     $("div.loading-box", c).show();\r
217     $("div.fatal-error-box", c).hide();\r
218     $("div.container-box", c).hide();\r
219     \r
220     $.getJSON( c.attr('ui:ajax-src') + '?callback=?',\r
221     function(data, status)\r
222     {\r
223         var fmt = '';\r
224         $(data).each( function() {\r
225             fmt += '<label><input type="checkbox" checked="checked"'\r
226             fmt += ' value="' + this.id + '" />' + this.subject +'</label>\n'\r
227         });\r
228         $("div.container-box", c).html(fmt);\r
229         $("div.loading-box", c).hide();\r
230         $("div.container-box", c).show();        \r
231     });   \r
232     \r
233     hash.w.show();\r
234 }\r
235 \r
236 Editor.prototype.loadSplitDialog = function(hash)\r
237 {\r
238     var self = this;    \r
239     \r
240     $("div.loading-box", hash.w).show();\r
241     $("div.fatal-error-box", hash.w).hide();\r
242     $('div.container-box', hash.w).hide();\r
243     hash.w.show();\r
244 \r
245     function onFailure(rq, tstat, err) {\r
246         $('div.container-box', hash.w).html('');\r
247         $("div.loading-box", hash.w).hide();\r
248         $("div.fatal-error-box", hash.w).show();\r
249         hash.t.failure();\r
250     };\r
251 \r
252     function onSuccess(data, status) {\r
253         // put the form into the window\r
254         $('div.container-box', hash.w).html(data);\r
255         $("div.loading-box", hash.w).hide();\r
256         $('form input[name=splitform-splittext]', hash.w).val(hash.t.selection);\r
257         $('form input[name=splitform-fulltext]', hash.w).val(hash.t.fulltext);\r
258         $('div.container-box', hash.w).show();\r
259 \r
260         // connect buttons\r
261         $('#split-dialog-button-accept').click(function() {\r
262             self.postSplitRequest(onSuccess, onFailure);\r
263             return false;\r
264         });\r
265 \r
266         $('#split-dialog-button-close').click(function() {\r
267             hash.w.jqmHide();\r
268             $('div.container-box', hash.w).html('');\r
269             hash.t.failure();\r
270         });\r
271 \r
272         $('#split-dialog-button-dismiss').click(function() {\r
273             hash.w.jqmHide();\r
274             $('div.container-box', hash.w).html('');\r
275             hash.t.success();\r
276         });\r
277 \r
278         if($('#id_splitform-autoxml').is(':checked'))\r
279             $('#split-form-dc-subform').show();\r
280         else\r
281             $('#split-form-dc-subform').hide();\r
282 \r
283         $('#id_splitform-autoxml').change(function() {            \r
284             if( $(this).is(':checked') )\r
285                 $('#split-form-dc-subform').show();\r
286             else\r
287                 $('#split-form-dc-subform').hide();\r
288         });\r
289     };   \r
290 \r
291     $.ajax({\r
292         url: 'split',\r
293         dataType: 'html',\r
294         success: onSuccess,\r
295         error: onFailure,\r
296         type: 'GET',\r
297         data: {}\r
298     });\r
299 }\r
300 \r
301 /* Refreshing routine */\r
302 Editor.prototype.refreshPanels = function() {\r
303     var self = this;\r
304 \r
305     self.allPanels().each(function() {\r
306         var panel = $(this).data('ctrl');\r
307         $.log('Refreshing: ', this, panel);\r
308         if ( panel.changed() )\r
309             panel.unmarkChanged();\r
310         else\r
311             panel.refresh();\r
312     });\r
313 \r
314     $('button.provides-save').attr('disabled', 'disabled');\r
315     $('button.requires-save').removeAttr('disabled');\r
316 };\r
317 \r
318 /*\r
319  * Pop-up messages\r
320  */\r
321 Editor.prototype.showPopup = function(name, text, timeout)\r
322 {\r
323     timeout = timeout || 4000;\r
324     var self = this;\r
325     self.popupQueue.push( [name, text, timeout] )\r
326 \r
327     if( self.popupQueue.length > 1)\r
328         return;\r
329 \r
330     var box = $('#message-box > #' + name);\r
331     $('*.data', box).html(text || '');\r
332     box.fadeIn(100);\r
333 \r
334     if(timeout > 0)\r
335         setTimeout( $.fbind(self, self.advancePopupQueue), timeout);\r
336 };\r
337 \r
338 Editor.prototype.advancePopupQueue = function() {\r
339     var self = this;\r
340     var elem = this.popupQueue.shift();\r
341     if(elem) {\r
342         var box = $('#message-box > #' + elem[0]);\r
343 \r
344         box.fadeOut(100, function()\r
345         {\r
346             $('*.data', box).html('');\r
347 \r
348             if( self.popupQueue.length > 0) {\r
349                 var ibox = $('#message-box > #' + self.popupQueue[0][0]);\r
350                 $('*.data', ibox).html(self.popupQueue[0][1] || '');\r
351                 ibox.fadeIn(100);\r
352                 if(self.popupQueue[0][2] > 0)\r
353                     setTimeout( $.fbind(self, self.advancePopupQueue), self.popupQueue[0][2]);\r
354             }\r
355         });\r
356     }\r
357 };\r
358 \r
359 \r