* Plugin jQuery.modal
[redakcja.git] / project / static / js / editor.ui.js
diff --git a/project/static/js/editor.ui.js b/project/static/js/editor.ui.js
new file mode 100755 (executable)
index 0000000..b27daac
--- /dev/null
@@ -0,0 +1,297 @@
+/*\r
+ * UI related Editor methods\r
+ */\r
+Editor.prototype.setupUI = function() {\r
+    // set up the UI visually and attach callbacks\r
+    var self = this;\r
+\r
+    var resize_start = function(event, mydata) {\r
+        $(document).bind('mousemove', mydata, resize_changed).\r
+        bind('mouseup', mydata, resize_stop);\r
+\r
+        $('.panel-overlay', mydata.root).css('display', 'block');\r
+        return false;\r
+    }\r
+    var resize_changed =  function(event) {\r
+        var old_width = parseInt(event.data.overlay.css('width'));\r
+        var delta = event.pageX + event.data.hotspot_x - old_width;\r
+        event.data.overlay.css({\r
+            'width': old_width + delta\r
+        });\r
+\r
+        if(event.data.overlay.next) {\r
+            var left = parseInt(event.data.overlay.next.css('left'));\r
+            event.data.overlay.next.css('left', left+delta);\r
+        }\r
+\r
+        return false;\r
+    };\r
+\r
+    var resize_stop = function(event) {\r
+        $(document).unbind('mousemove', resize_changed).unbind('mouseup', resize_stop);\r
+        // $('.panel-content', event.data.root).css('display', 'block');\r
+        var overlays = $('.panel-content-overlay', event.data.root);\r
+        $('.panel-content-overlay', event.data.root).each(function(i) {\r
+            if( $(this).data('panel').hasClass('last-panel') )\r
+                $(this).data('panel').css({\r
+                    'left': $(this).css('left'),\r
+                    'right': $(this).css('right')\r
+                });\r
+            else\r
+                $(this).data('panel').css({\r
+                    'left': $(this).css('left'),\r
+                    'width': $(this).css('width')\r
+                });\r
+        });\r
+        $('.panel-overlay', event.data.root).css('display', 'none');\r
+        $(event.data.root).trigger('stopResize');\r
+    };\r
+\r
+    /*\r
+     * Prepare panels (overlays & stuff)\r
+     */\r
+    /* create an overlay */\r
+    var panel_root = self.rootDiv;\r
+    var overlay_root = $("<div class='panel-overlay'></div>");\r
+    panel_root.append(overlay_root);\r
+\r
+    var prev = null;\r
+\r
+    $('*.panel-wrap', panel_root).each( function()\r
+    {\r
+        var panel = $(this);\r
+        var handle = $('.panel-slider', panel);\r
+        var overlay = $("<div class='panel-content-overlay panel-wrap'>&nbsp;</div>");\r
+        overlay_root.append(overlay);\r
+        overlay.data('panel', panel);\r
+        overlay.data('next', null);\r
+\r
+        if (prev) prev.next = overlay;\r
+\r
+        if( panel.hasClass('last-panel') )\r
+        {\r
+            overlay.css({\r
+                'left': panel.css('left'),\r
+                'right': panel.css('right')\r
+            });\r
+        }\r
+        else {\r
+            overlay.css({\r
+                'left': panel.css('left'),\r
+                'width': panel.css('width')\r
+            });\r
+            // $.log('Has handle: ' + panel.attr('id'));\r
+            overlay.append(handle.clone());\r
+            /* attach the trigger */\r
+            handle.mousedown(function(event) {\r
+                var touch_data = {\r
+                    root: panel_root,\r
+                    overlay: overlay,\r
+                    hotspot_x: event.pageX - handle.position().left\r
+                };\r
+\r
+                $(this).trigger('hpanel:panel-resize-start', touch_data);\r
+                return false;\r
+            });\r
+            $('.panel-content', panel).css('right',\r
+                (handle.outerWidth() || 10) + 'px');\r
+            $('.panel-content-overlay', panel).css('right',\r
+                (handle.outerWidth() || 10) + 'px');\r
+        };\r
+\r
+        prev = overlay;\r
+    });\r
+\r
+    panel_root.bind('hpanel:panel-resize-start', resize_start);\r
+    self.rootDiv.bind('stopResize', function() {\r
+        self.savePanelOptions()\r
+    });\r
+\r
+    /*\r
+     * Connect panel actions\r
+     */\r
+    $('#panels > *.panel-wrap').each(function() {\r
+        var panelWrap = $(this);\r
+        // $.log('wrap: ', panelWrap);\r
+        var panel = new Panel(panelWrap);\r
+        panelWrap.data('ctrl', panel); // attach controllers to wraps\r
+        panel.load($('.panel-toolbar select', panelWrap).val());\r
+\r
+        $('.panel-toolbar select', panelWrap).change(function() {\r
+            var url = $(this).val();\r
+            panelWrap.data('ctrl').load(url);\r
+            self.savePanelOptions();\r
+        });\r
+\r
+        $('.panel-toolbar button.refresh-button', panelWrap).click(\r
+            function() {\r
+                panel.refresh();\r
+            } );\r
+    });\r
+\r
+    $(document).bind('panel:contentChanged', function() {\r
+        self.onContentChanged.apply(self, arguments)\r
+    });\r
+\r
+    /*\r
+     * Connect various buttons\r
+     */\r
+\r
+    $('#toolbar-button-save').click( function (event, data) {\r
+        self.saveToBranch();\r
+    } );\r
+\r
+    $('#toolbar-button-update').click( function (event, data) {\r
+        if (self.updateUserBranch()) {\r
+            // commit/update can be called only after proper, save\r
+            // this means all panels are clean, and will get refreshed\r
+            // do this only, when there are any changes to local branch\r
+            self.refreshPanels();\r
+        }\r
+    } );\r
+\r
+    /* COMMIT DIALOG */\r
+    $('#commit-dialog').\r
+    jqm({\r
+        modal: true,\r
+        trigger: '#toolbar-button-commit'\r
+    });\r
+\r
+    $('#commit-dialog-cancel-button').click(function() {\r
+        $('#commit-dialog-error-empty-message').hide();\r
+        $('#commit-dialog').jqmHide();\r
+    });\r
+\r
+    $('#commit-dialog-save-button').click( function (event, data) \r
+    {\r
+        if( $('#commit-dialog-message').val().match(/^\s*$/)) {\r
+            $('#commit-dialog-error-empty-message').fadeIn();\r
+        }\r
+        else {\r
+            $('#commit-dialog-error-empty-message').hide();\r
+            $('#commit-dialog').jqmHide();\r
+            self.sendMergeRequest($('#commit-dialog-message').val() );\r
+        }       \r
+     \r
+        return false;\r
+    });    \r
+\r
+    /* SPLIT DIALOG */\r
+    $('#split-dialog').jqm({\r
+        modal: true,\r
+        onShow: $.fbind(self, self.loadSplitDialog)\r
+    }).\r
+    jqmAddClose('button.dialog-close-button');\r
+\r
+// $('#split-dialog').   \r
+}\r
+\r
+Editor.prototype.loadSplitDialog = function(hash)\r
+{\r
+    var self = this;    \r
+    \r
+    $("div.loading-box", hash.w).show();\r
+    $("div.fatal-error-box", hash.w).hide();\r
+    $('div.container-box', hash.w).hide();\r
+    hash.w.show();\r
+\r
+    function onFailure(rq, tstat, err) {\r
+        $('div.container-box', hash.w).html('');\r
+        $("div.loading-box", hash.w).hide();\r
+        $("div.fatal-error-box", hash.w).show();\r
+        hash.t.failure();\r
+    };\r
+\r
+    function onSuccess(data, status) {\r
+        // put the form into the window\r
+        $('div.container-box', hash.w).html(data);\r
+        $("div.loading-box", hash.w).hide();\r
+        $('form input[name=splittext]', hash.w).val(hash.t.selection);\r
+        $('form input[name=fulltext]', hash.w).val(hash.t.fulltext);\r
+        $('div.container-box', hash.w).show();\r
+\r
+        // connect buttons\r
+        $('#split-dialog-button-accept').click(function() {\r
+            self.postSplitRequest(onSuccess, onFailure);\r
+            return false;\r
+        });\r
+\r
+        $('#split-dialog-button-close').click(function() {\r
+            hash.w.jqmHide();\r
+            $('div.container-box', hash.w).html('');\r
+            hash.t.failure();\r
+        });\r
+\r
+        $('#split-dialog-button-dismiss').click(function() {\r
+            hash.w.jqmHide();\r
+            $('div.container-box', hash.w).html('');\r
+        });\r
+    };   \r
+\r
+    $.ajax({\r
+        url: 'split',\r
+        dataType: 'html',\r
+        success: onSuccess,\r
+        error: onFailure,\r
+        type: 'GET',\r
+        data: {}\r
+    });\r
+}\r
+\r
+/* Refreshing routine */\r
+Editor.prototype.refreshPanels = function() {\r
+    var self = this;\r
+\r
+    self.allPanels().each(function() {\r
+        var panel = $(this).data('ctrl');\r
+        $.log('Refreshing: ', this, panel);\r
+        if ( panel.changed() )\r
+            panel.unmarkChanged();\r
+        else\r
+            panel.refresh();\r
+    });\r
+};\r
+\r
+\r
+/*\r
+ * Pop-up messages\r
+ */\r
+Editor.prototype.showPopup = function(name, text, timeout)\r
+{\r
+    timeout = timeout || 4000;\r
+    var self = this;\r
+    self.popupQueue.push( [name, text, timeout] )\r
+\r
+    if( self.popupQueue.length > 1)\r
+        return;\r
+\r
+    var box = $('#message-box > #' + name);\r
+    $('*.data', box).html(text || '');\r
+    box.fadeIn(100);\r
+\r
+    if(timeout > 0)\r
+        setTimeout( $.fbind(self, self.advancePopupQueue), timeout);\r
+};\r
+\r
+Editor.prototype.advancePopupQueue = function() {\r
+    var self = this;\r
+    var elem = this.popupQueue.shift();\r
+    if(elem) {\r
+        var box = $('#message-box > #' + elem[0]);\r
+\r
+        box.fadeOut(100, function()\r
+        {\r
+            $('*.data', box).html('');\r
+\r
+            if( self.popupQueue.length > 0) {\r
+                var ibox = $('#message-box > #' + self.popupQueue[0][0]);\r
+                $('*.data', ibox).html(self.popupQueue[0][1] || '');\r
+                ibox.fadeIn(100);\r
+                if(self.popupQueue[0][2] > 0)\r
+                    setTimeout( $.fbind(self, self.advancePopupQueue), self.popupQueue[0][2]);\r
+            }\r
+        });\r
+    }\r
+};\r
+\r
+\r