Fix issue #47 Resize key frame

4 files changed, 191 insertions, 9 deletions

diff --git a/css/index.css b/css/index.css
index 6fa6dda..2c8faf5 100644
--- a/css/index.css
+++ b/css/index.css
@@ -3,11 +3,10 @@ position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
-width: 24em;
+width: 290px;
 height: 100%;
-padding-left: 1em;
+padding-left: 10px;
 border-right: 1px solid #000;
-overflow: hidden;
 }
 
 #sidebar a, #sidebar a:visited {
@@ -24,11 +23,12 @@ text-decoration: underline;
 
 
 #keys {
-position: fixed;
+position: absolute;
 top: 18.5em;
+left: 0;
 bottom: 0;
-width: 24em;
-padding-bottom: 1em;
+width: 290px;
+padding-left: 10px;
 overflow: auto;
 }
 
@@ -104,14 +104,35 @@ display: none;
 display: inline;
 }
 
+#resize {
+position: fixed;
+top: 0;
+left: 300px;
+bottom: 0;
+width: 5px;
+background-color: #aaa;
+cursor: col-resize;
+padding: 0;
+margin: 0;
+}
+
+#resize-layover {
+position: fixed;
+top: 0;
+left: 305px;
+right: 0;
+bottom: 0;
+width: 100%;
+z-index: 1000;
+}
 
 #frame {
 position: fixed;
 top: 0;
-left: 25em;
+left: 305px;
 right: 0;
 bottom: 0;
-padding-left: 1em;
+padding-left: 2em;
 }
 
 #frame iframe {
diff --git a/index.php b/index.php
index 851c9f4..499f1e1 100644
--- a/index.php
+++ b/index.php
@@ -154,6 +154,7 @@ if (count($_GET) == 0) {
 
 $page['css'][] = 'index';
 $page['js'][]  = 'index';
+$page['js'][]  = 'jquery-cookie';
 
 require 'includes/header.inc.php';
 
@@ -219,11 +220,15 @@ if ($databases > 1) { ?>
 <div style="color:red">Can't connect to this server</div>
 <?php } ?>
 
+</div><!-- #sidebar -->
+
+<div id="resize"></div>
+<div id="resize-layover"></div>
+
 <div id="frame">
 <iframe src="<?php echo format_html($iframe)?>" id="iframe" frameborder="0" scrolling="0"></iframe>
 </div><!-- #frame -->
 
-</div><!-- #sidebar -->
 <?php
 
 require 'includes/footer.inc.php';
diff --git a/js/index.js b/js/index.js
index 1fbb755..0b4d924 100644
--- a/js/index.js
+++ b/js/index.js
@@ -133,5 +133,47 @@ $(function() {
     }
   });
 
+
+  var isResizing = false;
+  var lastDownX  = 0;
+  var lastWidth  = 0;
+
+  var resizeSidebar = function(w) {
+    $('#sidebar').css('width', w);
+    $('#keys').css('width', w);
+    $('#resize').css('left', w + 10);
+    $('#resize-layover').css('left', w + 15);
+    $('#frame').css('left', w + 15);
+  };
+
+  if (parseInt($.cookie('sidebar')) > 0) {
+    resizeSidebar(parseInt($.cookie('sidebar')));
+  }
+
+  $('#resize').on('mousedown', function (e) {
+    isResizing = true;
+    lastDownX  = e.clientX;
+    lastWidth  = $('#sidebar').width();
+    $('#resize-layover').css('z-index', 1000);
+    e.preventDefault();
+  });
+  $(document).on('mousemove', function (e) {
+    if (!isResizing) {
+      return;
+    }
+
+    var w = lastWidth - (lastDownX - e.clientX);
+    if (w < 250 ) {
+      w = 250;
+    } else if (w > 1000) {
+      w = 1000;
+    }
+
+    resizeSidebar(w);
+    $.cookie('sidebar', w);
+  }).on('mouseup', function (e) {
+    isResizing = false;
+    $('#resize-layover').css('z-index', 0);
+  });
 });
 
diff --git a/js/jquery-cookie.js b/js/jquery-cookie.js
new file mode 100644
index 0000000..29769eb
--- /dev/null
+++ b/js/jquery-cookie.js
@@ -0,0 +1,114 @@
+/*!
+ * jQuery Cookie Plugin v1.4.1
+ * https://github.com/carhartl/jquery-cookie
+ *
+ * Copyright 2006, 2014 Klaus Hartl
+ * Released under the MIT license
+ */
+(function (factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD (Register as an anonymous module)
+    define(['jquery'], factory);
+  } else if (typeof exports === 'object') {
+    // Node/CommonJS
+    module.exports = factory(require('jquery'));
+  } else {
+    // Browser globals
+    factory(jQuery);
+  }
+}(function ($) {
+
+  var pluses = /\+/g;
+
+  function encode(s) {
+    return config.raw ? s : encodeURIComponent(s);
+  }
+
+  function decode(s) {
+    return config.raw ? s : decodeURIComponent(s);
+  }
+
+  function stringifyCookieValue(value) {
+    return encode(config.json ? JSON.stringify(value) : String(value));
+  }
+
+  function parseCookieValue(s) {
+    if (s.indexOf('"') === 0) {
+      // This is a quoted cookie as according to RFC2068, unescape...
+      s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
+    }
+
+    try {
+      // Replace server-side written pluses with spaces.
+      // If we can't decode the cookie, ignore it, it's unusable.
+      // If we can't parse the cookie, ignore it, it's unusable.
+      s = decodeURIComponent(s.replace(pluses, ' '));
+      return config.json ? JSON.parse(s) : s;
+    } catch(e) {}
+  }
+
+  function read(s, converter) {
+    var value = config.raw ? s : parseCookieValue(s);
+    return $.isFunction(converter) ? converter(value) : value;
+  }
+
+  var config = $.cookie = function (key, value, options) {
+
+    // Write
+
+    if (arguments.length > 1 && !$.isFunction(value)) {
+      options = $.extend({}, config.defaults, options);
+
+      if (typeof options.expires === 'number') {
+        var days = options.expires, t = options.expires = new Date();
+        t.setMilliseconds(t.getMilliseconds() + days * 864e+5);
+      }
+
+      return (document.cookie = [
+        encode(key), '=', stringifyCookieValue(value),
+        options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
+        options.path    ? '; path=' + options.path : '',
+        options.domain  ? '; domain=' + options.domain : '',
+        options.secure  ? '; secure' : ''
+      ].join(''));
+    }
+
+    // Read
+
+    var result = key ? undefined : {},
+      // To prevent the for loop in the first place assign an empty array
+      // in case there are no cookies at all. Also prevents odd result when
+      // calling $.cookie().
+      cookies = document.cookie ? document.cookie.split('; ') : [],
+      i = 0,
+      l = cookies.length;
+
+    for (; i < l; i++) {
+      var parts = cookies[i].split('='),
+        name = decode(parts.shift()),
+        cookie = parts.join('=');
+
+      if (key === name) {
+        // If second argument (value) is a function it's a converter...
+        result = read(cookie, value);
+        break;
+      }
+
+      // Prevent storing a cookie that we couldn't decode.
+      if (!key && (cookie = read(cookie)) !== undefined) {
+        result[name] = cookie;
+      }
+    }
+
+    return result;
+  };
+
+  config.defaults = {};
+
+  $.removeCookie = function (key, options) {
+    // Must not alter options, thus extending a fresh object...
+    $.cookie(key, '', $.extend({}, options, { expires: -1 }));
+    return !$.cookie(key);
+  };
+
+}));