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