Rewrite to use absolutes instead of floats.
authorLukasz Rekucki <lreqc@localhost.(none)>
Sun, 23 Aug 2009 11:08:27 +0000 (13:08 +0200)
committerLukasz Rekucki <lreqc@localhost.(none)>
Sun, 23 Aug 2009 11:08:27 +0000 (13:08 +0200)
project/static/css/master.css
project/static/js/jquery.cookie.js [new file with mode: 0644]
project/static/js/jquery.hpanel.js [new file with mode: 0644]
project/static/js/jquery.resizable.js
project/static/js/panels.js
project/templates/explorer/file_xml.html

index 8b97114..f7450f5 100644 (file)
@@ -77,19 +77,45 @@ label {
 /* ========== */
 /* = Panels = */
 /* ========== */
 /* ========== */
 /* = Panels = */
 /* ========== */
+
+#panels {
+       position: absolute;
+       bottom: 0px; left: 0px; right: 0px; top: 100px;
+}
+
 .panel-wrap {
     overflow: hidden;
 .panel-wrap {
     overflow: hidden;
+       position: absolute; /* absolute to relation with #panels */
+       top: 0px;
+       bottom: 0px;
 }
 
 #left-panel-wrap {
 }
 
 #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 {
 
 /* 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;
     padding: 0 0 2px 0;
     border-top: 1px solid #AAA;
     border-bottom: 1px solid #AAA;
@@ -107,16 +133,16 @@ label {
 }
 
 /* Slider between panels */
 }
 
 /* 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;
     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;
 }
     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 (file)
index 0000000..6df1fac
--- /dev/null
@@ -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 (file)
index 0000000..ec8c1e7
--- /dev/null
@@ -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);
+
index c77c85b..3fae2bf 100644 (file)
@@ -18,7 +18,7 @@
         }
     };
     
         }
     };
     
-    $.fn.resizable = function(handle, options) {
+    $.fn.resizable = function(options) {
         var settings = {
             minWidth: 0,
             maxWidth: $(window).width()
         var settings = {
             minWidth: 0,
             maxWidth: $(window).width()
         $.extend(settings, options);
         
         var element = $(this);
         $.extend(settings, options);
         
         var element = $(this);
+               var handle = $('.panel-slider', element)
         
         
-        $(handle, element).mousedown(function(event) {
+        handle.mousedown(function(event) {
             var position = element.position();
             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,
                 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(); });
     };
           .bind('drag', function(event) { event.preventDefault(); })
           .bind('draggesture', function(event) { event.preventDefault(); });
     };
index abbd218..562d82b 100644 (file)
@@ -46,20 +46,22 @@ $(function() {
     // ========================
     // = Resizable panels =
     // ========================
     // ========================
     // = 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())
     
     $('.panel-toolbar select').change(function() {
         loadPanel($('.panel-contents', $(this).parent().parent()), $(this).val())
index 093e304..30c52f7 100644 (file)
@@ -5,7 +5,8 @@
     <script src="/static/js/codemirror/codemirror.js" type="text/javascript" charset="utf-8"></script>
     <script src="/static/js/jquery.autoscroll.js" type="text/javascript" charset="utf-8"></script>
     <script src="/static/js/jquery.wtooltip.js" type="text/javascript" charset="utf-8"></script>
     <script src="/static/js/codemirror/codemirror.js" type="text/javascript" charset="utf-8"></script>
     <script src="/static/js/jquery.autoscroll.js" type="text/javascript" charset="utf-8"></script>
     <script src="/static/js/jquery.wtooltip.js" type="text/javascript" charset="utf-8"></script>
-    <script src="/static/js/jquery.resizable.js" type="text/javascript" charset="utf-8"></script>
+<!--    <script src="/static/js/jquery.resizable.js" type="text/javascript" charset="utf-8"></script> -->
+    <script src="/static/js/jquery.hpanel.js" type="text/javascript" charset="utf-8"></script>
     <script src="/static/js/panels.js" type="text/javascript" charset="utf-8"></script>
 {% endblock extrahead %}
 
     <script src="/static/js/panels.js" type="text/javascript" charset="utf-8"></script>
 {% endblock extrahead %}
 
         <div id="panels">
             <div id="left-panel-wrap" class="panel-wrap">
                 <div id="left-panel" class="panel">
         <div id="panels">
             <div id="left-panel-wrap" class="panel-wrap">
                 <div id="left-panel" class="panel">
-                    <div id="slider" style="float: right"></div>
-                    <div style="margin-right: 10px">
+                    <div>
                         <div id="left-panel-toolbar" class="panel-toolbar">
                             <label for="select-left-panel">Lewy panel:</label>
                             <select name="select-left-panel" id="select-left-panel">
                                 <option value="{% url xmleditor_panel hash %}">Edytor XML</option>
                                 <option value="{% url htmleditor_panel hash %}">Edytor HTML</option>
                         <div id="left-panel-toolbar" class="panel-toolbar">
                             <label for="select-left-panel">Lewy panel:</label>
                             <select name="select-left-panel" id="select-left-panel">
                                 <option value="{% url xmleditor_panel hash %}">Edytor XML</option>
                                 <option value="{% url htmleditor_panel hash %}">Edytor HTML</option>
-                                <option value="{% url gallery_panel hash %}">Galeria skanów</option>                            
-                            </select>
-                        </div>
-                        <div id="left-panel-contents" class="panel-contents">
+                                <option value="{% url gallery_panel hash %}">Galeria skanów</option>                                                  </select>
                         </div>
                         </div>
+                        <div id="left-panel-contents" class="panel-contents"></div>
                     </div>
                     </div>
+                    <button class="panel-slider">&nbsp;</button>
                 </div>
             </div>
                 </div>
             </div>
-            <div id="right-panel-wrap" class="panel-wrap">
+            <div id="right-panel-wrap" class="panel-wrap no-slider">
                 <div id="right-panel" class="panel">
                     <div id="right-panel-toolbar" class="panel-toolbar">
                         <label for="select-right-panel">Prawy panel:</label>
                 <div id="right-panel" class="panel">
                     <div id="right-panel-toolbar" class="panel-toolbar">
                         <label for="select-right-panel">Prawy panel:</label>