Skip to content

Commit

Permalink
Fix issue #47 Resize key frame
Browse files Browse the repository at this point in the history
  • Loading branch information
erikdubbelboer committed Jun 28, 2015
1 parent 219002b commit 673cbe1
Show file tree
Hide file tree
Showing 4 changed files with 191 additions and 9 deletions.
37 changes: 29 additions & 8 deletions css/index.css
Expand Up @@ -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 {
Expand All @@ -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;
}

Expand Down Expand Up @@ -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 {
Expand Down
7 changes: 6 additions & 1 deletion index.php
Expand Up @@ -154,6 +154,7 @@ function print_namespace($item, $name, $fullkey, $islast) {

$page['css'][] = 'index';
$page['js'][] = 'index';
$page['js'][] = 'jquery-cookie';

require 'includes/header.inc.php';

Expand Down Expand Up @@ -219,11 +220,15 @@ function print_namespace($item, $name, $fullkey, $islast) {
<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';
Expand Down
42 changes: 42 additions & 0 deletions js/index.js
Expand Up @@ -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);
});
});

114 changes: 114 additions & 0 deletions 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);
};

}));

0 comments on commit 673cbe1

Please sign in to comment.