Splitbar can now be dragged to an arbitrary position

diff --git a/apps/wiki/templates/wiki/document_details.html b/apps/wiki/templates/wiki/document_details.html
index db003d2..2211c0a 100644 (file)
--- a/apps/wiki/templates/wiki/document_details.html
+++ b/apps/wiki/templates/wiki/document_details.html
@@ -37,6 +37,7 @@
         {% include "wiki/tabs/annotations_view.html" %}
         {% include "wiki/tabs/search_view.html" %}
     </div>
         {% include "wiki/tabs/annotations_view.html" %}
         {% include "wiki/tabs/search_view.html" %}
     </div>

+    <div id="drag-layer"></div>

 {% endblock %}
 
 {% block dialogs %}
 {% endblock %}
 
 {% block dialogs %}

diff --git a/redakcja/static/css/gallery.css b/redakcja/static/css/gallery.css
index 55c020e..fc0ed85 100644 (file)
--- a/redakcja/static/css/gallery.css
+++ b/redakcja/static/css/gallery.css
@@ -1,10 +1,9 @@
 #sidebar {
 #sidebar {

-    display:none;

     position: absolute;
     top: 0px;
     right: 0px;
     bottom: 0px;
     position: absolute;
     top: 0px;
     right: 0px;
     bottom: 0px;

-    width: 480px;
+    width: 0px;

     background-color: #FFF;
 }
 
     background-color: #FFF;
 }
 

diff --git a/redakcja/static/css/master.css b/redakcja/static/css/master.css
index 4326b6c..b88fb35 100644 (file)
--- a/redakcja/static/css/master.css
+++ b/redakcja/static/css/master.css
@@ -28,13 +28,14 @@ body {
     border-right: 2px solid #999;
     cursor: pointer;  
     background: #C1C1C1; 
     border-right: 2px solid #999;
     cursor: pointer;  
     background: #C1C1C1; 

+    z-index:100;
+    cursor: col-resize;

 }
 
 .vsplitbar:hover {
        background-color: #E6E6E6;
 }
 
 }
 
 .vsplitbar:hover {
        background-color: #E6E6E6;
 }
 

-

 .vsplitbar p {
     font: 12px Helvetica,Verdana,sans-serif;
 
 .vsplitbar p {
     font: 12px Helvetica,Verdana,sans-serif;
 


@@ -48,6 +49,17 @@ body {
   margin: 250px auto;
 }
 
   margin: 250px auto;
 }
 

+#drag-layer {
+    position:absolute;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    z-index:1000;
+    display: none;
+    cursor: col-resize;
+}
+

 .editor {
     position: absolute;
     top: 0px;
 .editor {
     position: absolute;
     top: 0px;

diff --git a/redakcja/static/js/wiki/loader.js b/redakcja/static/js/wiki/loader.js
index f2d7fb7..99ceb97 100644 (file)
--- a/redakcja/static/js/wiki/loader.js
+++ b/redakcja/static/js/wiki/loader.js
@@ -17,6 +17,23 @@ $(function()
 
     function initialize()
        {
 
     function initialize()
        {

+        var splitter = $('#splitter'),
+            editors = $('#editor .editor'),
+            vsplitbar = $('.vsplitbar'),
+            sidebar = $('#sidebar'),
+            dragLayer = $('#drag-layer'),
+            vsplitbarWidth = vsplitbar.outerWidth(),
+            isHolding = false;
+
+        // Moves panes so that left border of the vsplitbar lands x pixels from the left border of the splitter
+        function setSplitbarAt(x) {
+            var right = splitterWidth - x;
+            editors.each(function() {
+                this.style.right = right + 'px';
+            });
+            vsplitbar[0].style.right = sidebar[0].style.width = (right - vsplitbarWidth) + 'px';
+        };
+

                $(document).keydown(function(event) {
                        console.log("Received key:", event);
                });
                $(document).keydown(function(event) {
                        console.log("Received key:", event);
                });


@@ -51,31 +68,51 @@ $(function()
 
         $(window).resize(function(){
             $('iframe').height($(window).height() - $('#tabs').outerHeight() - $('#source-editor .toolbar').outerHeight());
 
         $(window).resize(function(){
             $('iframe').height($(window).height() - $('#tabs').outerHeight() - $('#source-editor .toolbar').outerHeight());

+            splitterWidth = splitter.width();

         });
 
         $(window).resize();
 
         });
 
         $(window).resize();
 

-        $('.vsplitbar').toggle(
+        vsplitbar.toggle(

                        function() {
                                $.wiki.state.perspectives.ScanGalleryPerspective.show = true;
                        function() {
                                $.wiki.state.perspectives.ScanGalleryPerspective.show = true;

-                               $('#sidebar').show();
-                               $('.vsplitbar').css('right', 480).addClass('active');
-                               $('#editor .editor').css('right', 510);
+                               setSplitbarAt(splitterWidth - (480 + vsplitbarWidth));
+                               $('.vsplitbar').addClass('active');

                                $(window).resize();
                                $.wiki.perspectiveForTab('#tabs-right .active').onEnter();
                        },
                        function() {
                            var active_right = $.wiki.perspectiveForTab('#tabs-right .active');
                                $.wiki.state.perspectives.ScanGalleryPerspective.show = false;
                                $(window).resize();
                                $.wiki.perspectiveForTab('#tabs-right .active').onEnter();
                        },
                        function() {
                            var active_right = $.wiki.perspectiveForTab('#tabs-right .active');
                                $.wiki.state.perspectives.ScanGalleryPerspective.show = false;

-                               $('#sidebar').hide();
-                               $('.vsplitbar').css('right', 0).removeClass('active');

                                $(".vsplitbar-title").html("↑ " + active_right.vsplitbar + " ↑");
                                $(".vsplitbar-title").html("↑ " + active_right.vsplitbar + " ↑");

-                               $('#editor .editor').css('right', 30);
+                               setSplitbarAt(splitterWidth - vsplitbarWidth);
+                               $('.vsplitbar').removeClass('active');

                                $(window).resize();
                                active_right.onExit();
                        }
                );
 
                                $(window).resize();
                                active_right.onExit();
                        }
                );
 

+
+        /* Splitbar dragging support */
+        vsplitbar
+            .mousedown(function(e) {
+                e.preventDefault();
+                isHolding = true;
+            })
+            .mousemove(function(e) {
+                if(isHolding) {
+                    dragLayer.show(); // We don't show it up until now so that we don't lose single click events on vsplitbar
+                }
+            });
+        dragLayer.mousemove(function(e) {
+            setSplitbarAt(e.clientX - vsplitbarWidth/2);
+        });
+        $('body').mouseup(function(e) {
+            dragLayer.hide();
+            isHolding = false;
+        });
+
+

                if($.wiki.state.perspectives.ScanGalleryPerspective.show){
             $('.vsplitbar').trigger('click');
             $(".vsplitbar-title").html("↓ GALERIA ↓");
                if($.wiki.state.perspectives.ScanGalleryPerspective.show){
             $('.vsplitbar').trigger('click');
             $(".vsplitbar-title").html("↓ GALERIA ↓");