From 80ba576b659d4ee4e19e9f422cef4e1644a03d8d Mon Sep 17 00:00:00 2001 From: Lukasz Rekucki Date: Sun, 23 Aug 2009 13:08:27 +0200 Subject: [PATCH] Rewrite to use absolutes instead of floats. --- project/static/css/master.css | 44 ++++++++--- project/static/js/jquery.cookie.js | 96 ++++++++++++++++++++++++ project/static/js/jquery.hpanel.js | 67 +++++++++++++++++ project/static/js/jquery.resizable.js | 24 ++++-- project/static/js/panels.js | 28 +++---- project/templates/explorer/file_xml.html | 15 ++-- 6 files changed, 236 insertions(+), 38 deletions(-) create mode 100644 project/static/js/jquery.cookie.js create mode 100644 project/static/js/jquery.hpanel.js diff --git a/project/static/css/master.css b/project/static/css/master.css index 8b971142..f7450f52 100644 --- a/project/static/css/master.css +++ b/project/static/css/master.css @@ -77,19 +77,45 @@ label { /* ========== */ /* = Panels = */ /* ========== */ + +#panels { + position: absolute; + bottom: 0px; left: 0px; right: 0px; top: 100px; +} + .panel-wrap { overflow: hidden; + position: absolute; /* absolute to relation with #panels */ + top: 0px; + bottom: 0px; } #left-panel-wrap { - float: left; - width: 8px; + left: 0px; + width: 8px; /* initial width */ +} + +#right-panel-wrap { + right: 0px; + width: auto; + left: 8px; /* initial width of the left panel */ +} + +/* contents */ +.panel-contents { + position: absolute; + top: 22px; left: 0px; right: 8px; bottom:0px; } +.panel-wrap.no-slider .panel-contents { + right: 0px; +} /* Toolbars with select box to change panel contents*/ .panel-toolbar { - height: 20px; + position: absolute; + top: 0px; left:0px; right: 0px; height: 20px; + padding: 0 0 2px 0; border-top: 1px solid #AAA; border-bottom: 1px solid #AAA; @@ -107,16 +133,16 @@ label { } /* Slider between panels */ -#slider { +.panel-wrap .panel-slider { + position: absolute; + + top: 0px; bottom: 0px; right: 0px; width: 6px; + border-left: 1px solid #999; border-right: 1px solid #999; - background-color: #DDD; - width: 8px; - height: 100%; - float: left; } -#slider:hover { +.panel-wrap .panel-slider:hover { background-color: #999; cursor: col-resize; } diff --git a/project/static/js/jquery.cookie.js b/project/static/js/jquery.cookie.js new file mode 100644 index 00000000..6df1faca --- /dev/null +++ b/project/static/js/jquery.cookie.js @@ -0,0 +1,96 @@ +/** + * Cookie plugin + * + * Copyright (c) 2006 Klaus Hartl (stilbuero.de) + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * + */ + +/** + * Create a cookie with the given name and value and other optional parameters. + * + * @example $.cookie('the_cookie', 'the_value'); + * @desc Set the value of a cookie. + * @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true }); + * @desc Create a cookie with all available options. + * @example $.cookie('the_cookie', 'the_value'); + * @desc Create a session cookie. + * @example $.cookie('the_cookie', null); + * @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain + * used when the cookie was set. + * + * @param String name The name of the cookie. + * @param String value The value of the cookie. + * @param Object options An object literal containing key/value pairs to provide optional cookie attributes. + * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object. + * If a negative value is specified (e.g. a date in the past), the cookie will be deleted. + * If set to null or omitted, the cookie will be a session cookie and will not be retained + * when the the browser exits. + * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie). + * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie). + * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will + * require a secure protocol (like HTTPS). + * @type undefined + * + * @name $.cookie + * @cat Plugins/Cookie + * @author Klaus Hartl/klaus.hartl@stilbuero.de + */ + +/** + * Get the value of a cookie with the given name. + * + * @example $.cookie('the_cookie'); + * @desc Get the value of a cookie. + * + * @param String name The name of the cookie. + * @return The value of the cookie. + * @type String + * + * @name $.cookie + * @cat Plugins/Cookie + * @author Klaus Hartl/klaus.hartl@stilbuero.de + */ +jQuery.cookie = function(name, value, options) { + if (typeof value != 'undefined') { // name and value given, set cookie + options = options || {}; + if (value === null) { + value = ''; + options.expires = -1; + } + var expires = ''; + if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { + var date; + if (typeof options.expires == 'number') { + date = new Date(); + date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); + } else { + date = options.expires; + } + expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE + } + // CAUTION: Needed to parenthesize options.path and options.domain + // in the following expressions, otherwise they evaluate to undefined + // in the packed version for some reason... + var path = options.path ? '; path=' + (options.path) : ''; + var domain = options.domain ? '; domain=' + (options.domain) : ''; + var secure = options.secure ? '; secure' : ''; + document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); + } else { // only name given, get cookie + var cookieValue = null; + if (document.cookie && document.cookie != '') { + var cookies = document.cookie.split(';'); + for (var i = 0; i < cookies.length; i++) { + var cookie = jQuery.trim(cookies[i]); + // Does this cookie string begin with the name we want? + if (cookie.substring(0, name.length + 1) == (name + '=')) { + cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); + break; + } + } + } + return cookieValue; + } +}; \ No newline at end of file diff --git a/project/static/js/jquery.hpanel.js b/project/static/js/jquery.hpanel.js new file mode 100644 index 00000000..ec8c1e74 --- /dev/null +++ b/project/static/js/jquery.hpanel.js @@ -0,0 +1,67 @@ +(function($){ + + /* behaviour */ + $.hpanel = { + settings: {}, + current_data: {}, + resize_start: function(event, mydata) { + console.log('Panel ' + mydata.panel.attr('id') + ' started resizing'); + $(document).bind('mousemove', mydata, $.hpanel.resize_changed). + bind('mouseup', mydata, $.hpanel.resize_stop); + return false; + }, + resize_changed: function(event) { + var old_width = parseInt(event.data.panel.css('width')); + var delta = event.pageX + event.data.hotspot_x - old_width; + + console.log('o: ' + (old_width) + ' pX: ' + event.pageX + ' hX: ' + event.data.hotspot_x); + console.log('next_panel: ' + $(event.data.panel.next_panel).attr('id')); + event.data.panel.css({'width': old_width + delta}); + + if(event.data.panel.next_panel) { + var left = parseInt(event.data.panel.next_panel.css('left')); + console.log('left: ' + left + ' new_left: ' + (left+delta) ); + event.data.panel.next_panel.css('left', left+delta); + } + + return false; + }, + resize_stop: function(event) { + $(document).unbind('mousemove', $.hpanel.resize_changed).unbind('mouseup', $.hpanel.resize_stop); + $('body').css('cursor', 'auto'); + } + }; + + $.fn.make_hpanel = function(options) + { + console.log('Making an hpanel out of "#' + $(this).attr('id') + '"'); + var root = $(this) + var all_panels = $('.panel-wrap', root) + console.log('Panels: ' + all_panels); + + var prev = null; + + all_panels.each(function(i) { + var panel = $(all_panels[i]); + var handle = $('.panel-slider', panel) + + panel.next_panel = null; + if (prev) prev.next_panel = panel; + + /* attach the trigger */ + handle.mousedown(function(event) { + var touch_data = { + panel_root: root, + panel: panel, + hotspot_x: event.pageX - handle.position().left + }; + $(this).trigger('hpanel:panel-resize-start', touch_data); + return false; + }); + prev = panel; + }); + + root.bind('hpanel:panel-resize-start', $.hpanel.resize_start); + }; +})(jQuery); + diff --git a/project/static/js/jquery.resizable.js b/project/static/js/jquery.resizable.js index c77c85b4..3fae2bf0 100644 --- a/project/static/js/jquery.resizable.js +++ b/project/static/js/jquery.resizable.js @@ -18,7 +18,7 @@ } }; - $.fn.resizable = function(handle, options) { + $.fn.resizable = function(options) { var settings = { minWidth: 0, maxWidth: $(window).width() @@ -27,18 +27,26 @@ $.extend(settings, options); var element = $(this); + var handle = $('.panel-slider', element) - $(handle, element).mousedown(function(event) { + handle.mousedown(function(event) { var position = element.position(); - $.resizable.settings = settings; - $.resizable.element = { + console.log('Mouse down on position: ' + position); + /* from this point on, the panel should resize events */ + + /* $.resizable.settings = settings; + $.resizable.data = { element: element, width: parseInt(element.css('width')) || element[0].scrollWidth || 0, mouseX: event.pageX, - }; - $(document).mousemove($.resizable.drag).mouseup($.resizable.stop); - $('body').css('cursor', 'col-resize'); - }).bind('dragstart', function(event) { event.preventDefault(); }) + }; */ + + $(document).mousemove($.resizable.ondrag, element).mouseup($.resizable.stop, element); + /* $('body').css('cursor', 'col-resize'); */ + }); + + /* stop drag events */ + handle.bind('dragstart', function(event) { event.preventDefault(); }) .bind('drag', function(event) { event.preventDefault(); }) .bind('draggesture', function(event) { event.preventDefault(); }); }; diff --git a/project/static/js/panels.js b/project/static/js/panels.js index abbd2182..562d82b4 100644 --- a/project/static/js/panels.js +++ b/project/static/js/panels.js @@ -46,20 +46,22 @@ $(function() { // ======================== // = Resizable panels = // ======================== - function resizePanels() { - $('.panel').height($(window).height() - $('.panel').position().top); - $('.panel-contents').height($(window).height() - $('.panel-contents').position().top); - $('#right-panel-wrap').width($(window).width() - $('#left-panel-wrap').outerWidth()); - } +// function resizePanels() { +// // called on resize +// $('.panel').height($(window).height() - $('.panel').position().top); +// $('.panel-contents').height($(window).height() - $('.panel-contents').position().top); +// $('#right-panel-wrap').width($(window).width() - $('#left-panel-wrap').outerWidth()); +// } - $(window).resize(function() { - resizePanels(); - }) - - $('#left-panel-wrap').bind('resizable:stop', resizePanels) - .resizable('#slider', {minWidth: 8}); - - resizePanels(); +// $(window).resize(function() { +// resizePanels(); +// }) + + $('#panels').make_hpanel({}); + +// $('#left-panel-wrap').bind('resizable:stop', resizePanels) +// .resizable({minWidth: 8}); +// resizePanels(); $('.panel-toolbar select').change(function() { loadPanel($('.panel-contents', $(this).parent().parent()), $(this).val()) diff --git a/project/templates/explorer/file_xml.html b/project/templates/explorer/file_xml.html index 093e3044..30c52f72 100644 --- a/project/templates/explorer/file_xml.html +++ b/project/templates/explorer/file_xml.html @@ -5,7 +5,8 @@ - + + {% endblock extrahead %} @@ -15,22 +16,20 @@
-
-
+
-
-
+
+
+
-
+
-- 2.20.1