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