From: Aleksander Ɓukasz Date: Fri, 3 Jan 2014 13:40:25 +0000 (+0100) Subject: Splitbar can now be dragged to an arbitrary position X-Git-Url: https://git.mdrn.pl/redakcja.git/commitdiff_plain/539b54d10d63f8638cfcda1ab0b34560cecdbe9b?ds=sidebyside;hp=c3f7497f5070c9b317a963a2db6cfe5880ff8d15 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 db003d2c..2211c0a3 100644 --- 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" %} +
{% endblock %} {% block dialogs %} diff --git a/redakcja/static/css/gallery.css b/redakcja/static/css/gallery.css index 55c020ee..fc0ed859 100644 --- a/redakcja/static/css/gallery.css +++ b/redakcja/static/css/gallery.css @@ -1,10 +1,9 @@ #sidebar { - display:none; position: absolute; top: 0px; right: 0px; bottom: 0px; - width: 480px; + width: 0px; background-color: #FFF; } diff --git a/redakcja/static/css/master.css b/redakcja/static/css/master.css index 4326b6c2..b88fb35a 100644 --- 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; + z-index:100; + cursor: col-resize; } .vsplitbar:hover { background-color: #E6E6E6; } - .vsplitbar p { font: 12px Helvetica,Verdana,sans-serif; @@ -48,6 +49,17 @@ body { 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; diff --git a/redakcja/static/js/wiki/loader.js b/redakcja/static/js/wiki/loader.js index f2d7fb71..99ceb976 100644 --- a/redakcja/static/js/wiki/loader.js +++ b/redakcja/static/js/wiki/loader.js @@ -17,6 +17,23 @@ $(function() 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); }); @@ -51,31 +68,51 @@ $(function() $(window).resize(function(){ $('iframe').height($(window).height() - $('#tabs').outerHeight() - $('#source-editor .toolbar').outerHeight()); + splitterWidth = splitter.width(); }); $(window).resize(); - $('.vsplitbar').toggle( + vsplitbar.toggle( 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; - $('#sidebar').hide(); - $('.vsplitbar').css('right', 0).removeClass('active'); $(".vsplitbar-title").html("↑ " + active_right.vsplitbar + " ↑"); - $('#editor .editor').css('right', 30); + setSplitbarAt(splitterWidth - vsplitbarWidth); + $('.vsplitbar').removeClass('active'); $(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 ↓");