Skip to content

Commit 673cbe1

Browse files
Fix issue erikdubbelboer#47 Resize key frame
1 parent 219002b commit 673cbe1

File tree

4 files changed

+191
-9
lines changed

4 files changed

+191
-9
lines changed

css/index.css

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@ position: absolute;
33
top: 0;
44
bottom: 0;
55
left: 0;
6-
width: 24em;
6+
width: 290px;
77
height: 100%;
8-
padding-left: 1em;
8+
padding-left: 10px;
99
border-right: 1px solid #000;
10-
overflow: hidden;
1110
}
1211

1312
#sidebar a, #sidebar a:visited {
@@ -24,11 +23,12 @@ text-decoration: underline;
2423

2524

2625
#keys {
27-
position: fixed;
26+
position: absolute;
2827
top: 18.5em;
28+
left: 0;
2929
bottom: 0;
30-
width: 24em;
31-
padding-bottom: 1em;
30+
width: 290px;
31+
padding-left: 10px;
3232
overflow: auto;
3333
}
3434

@@ -104,14 +104,35 @@ display: none;
104104
display: inline;
105105
}
106106

107+
#resize {
108+
position: fixed;
109+
top: 0;
110+
left: 300px;
111+
bottom: 0;
112+
width: 5px;
113+
background-color: #aaa;
114+
cursor: col-resize;
115+
padding: 0;
116+
margin: 0;
117+
}
118+
119+
#resize-layover {
120+
position: fixed;
121+
top: 0;
122+
left: 305px;
123+
right: 0;
124+
bottom: 0;
125+
width: 100%;
126+
z-index: 1000;
127+
}
107128

108129
#frame {
109130
position: fixed;
110131
top: 0;
111-
left: 25em;
132+
left: 305px;
112133
right: 0;
113134
bottom: 0;
114-
padding-left: 1em;
135+
padding-left: 2em;
115136
}
116137

117138
#frame iframe {

index.php

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,7 @@ function print_namespace($item, $name, $fullkey, $islast) {
154154

155155
$page['css'][] = 'index';
156156
$page['js'][] = 'index';
157+
$page['js'][] = 'jquery-cookie';
157158

158159
require 'includes/header.inc.php';
159160

@@ -219,11 +220,15 @@ function print_namespace($item, $name, $fullkey, $islast) {
219220
<div style="color:red">Can't connect to this server</div>
220221
<?php } ?>
221222

223+
</div><!-- #sidebar -->
224+
225+
<div id="resize"></div>
226+
<div id="resize-layover"></div>
227+
222228
<div id="frame">
223229
<iframe src="<?php echo format_html($iframe)?>" id="iframe" frameborder="0" scrolling="0"></iframe>
224230
</div><!-- #frame -->
225231

226-
</div><!-- #sidebar -->
227232
<?php
228233

229234
require 'includes/footer.inc.php';

js/index.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,5 +133,47 @@ $(function() {
133133
}
134134
});
135135

136+
137+
var isResizing = false;
138+
var lastDownX = 0;
139+
var lastWidth = 0;
140+
141+
var resizeSidebar = function(w) {
142+
$('#sidebar').css('width', w);
143+
$('#keys').css('width', w);
144+
$('#resize').css('left', w + 10);
145+
$('#resize-layover').css('left', w + 15);
146+
$('#frame').css('left', w + 15);
147+
};
148+
149+
if (parseInt($.cookie('sidebar')) > 0) {
150+
resizeSidebar(parseInt($.cookie('sidebar')));
151+
}
152+
153+
$('#resize').on('mousedown', function (e) {
154+
isResizing = true;
155+
lastDownX = e.clientX;
156+
lastWidth = $('#sidebar').width();
157+
$('#resize-layover').css('z-index', 1000);
158+
e.preventDefault();
159+
});
160+
$(document).on('mousemove', function (e) {
161+
if (!isResizing) {
162+
return;
163+
}
164+
165+
var w = lastWidth - (lastDownX - e.clientX);
166+
if (w < 250 ) {
167+
w = 250;
168+
} else if (w > 1000) {
169+
w = 1000;
170+
}
171+
172+
resizeSidebar(w);
173+
$.cookie('sidebar', w);
174+
}).on('mouseup', function (e) {
175+
isResizing = false;
176+
$('#resize-layover').css('z-index', 0);
177+
});
136178
});
137179

js/jquery-cookie.js

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
/*!
2+
* jQuery Cookie Plugin v1.4.1
3+
* https://github.com/carhartl/jquery-cookie
4+
*
5+
* Copyright 2006, 2014 Klaus Hartl
6+
* Released under the MIT license
7+
*/
8+
(function (factory) {
9+
if (typeof define === 'function' && define.amd) {
10+
// AMD (Register as an anonymous module)
11+
define(['jquery'], factory);
12+
} else if (typeof exports === 'object') {
13+
// Node/CommonJS
14+
module.exports = factory(require('jquery'));
15+
} else {
16+
// Browser globals
17+
factory(jQuery);
18+
}
19+
}(function ($) {
20+
21+
var pluses = /\+/g;
22+
23+
function encode(s) {
24+
return config.raw ? s : encodeURIComponent(s);
25+
}
26+
27+
function decode(s) {
28+
return config.raw ? s : decodeURIComponent(s);
29+
}
30+
31+
function stringifyCookieValue(value) {
32+
return encode(config.json ? JSON.stringify(value) : String(value));
33+
}
34+
35+
function parseCookieValue(s) {
36+
if (s.indexOf('"') === 0) {
37+
// This is a quoted cookie as according to RFC2068, unescape...
38+
s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
39+
}
40+
41+
try {
42+
// Replace server-side written pluses with spaces.
43+
// If we can't decode the cookie, ignore it, it's unusable.
44+
// If we can't parse the cookie, ignore it, it's unusable.
45+
s = decodeURIComponent(s.replace(pluses, ' '));
46+
return config.json ? JSON.parse(s) : s;
47+
} catch(e) {}
48+
}
49+
50+
function read(s, converter) {
51+
var value = config.raw ? s : parseCookieValue(s);
52+
return $.isFunction(converter) ? converter(value) : value;
53+
}
54+
55+
var config = $.cookie = function (key, value, options) {
56+
57+
// Write
58+
59+
if (arguments.length > 1 && !$.isFunction(value)) {
60+
options = $.extend({}, config.defaults, options);
61+
62+
if (typeof options.expires === 'number') {
63+
var days = options.expires, t = options.expires = new Date();
64+
t.setMilliseconds(t.getMilliseconds() + days * 864e+5);
65+
}
66+
67+
return (document.cookie = [
68+
encode(key), '=', stringifyCookieValue(value),
69+
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
70+
options.path ? '; path=' + options.path : '',
71+
options.domain ? '; domain=' + options.domain : '',
72+
options.secure ? '; secure' : ''
73+
].join(''));
74+
}
75+
76+
// Read
77+
78+
var result = key ? undefined : {},
79+
// To prevent the for loop in the first place assign an empty array
80+
// in case there are no cookies at all. Also prevents odd result when
81+
// calling $.cookie().
82+
cookies = document.cookie ? document.cookie.split('; ') : [],
83+
i = 0,
84+
l = cookies.length;
85+
86+
for (; i < l; i++) {
87+
var parts = cookies[i].split('='),
88+
name = decode(parts.shift()),
89+
cookie = parts.join('=');
90+
91+
if (key === name) {
92+
// If second argument (value) is a function it's a converter...
93+
result = read(cookie, value);
94+
break;
95+
}
96+
97+
// Prevent storing a cookie that we couldn't decode.
98+
if (!key && (cookie = read(cookie)) !== undefined) {
99+
result[name] = cookie;
100+
}
101+
}
102+
103+
return result;
104+
};
105+
106+
config.defaults = {};
107+
108+
$.removeCookie = function (key, options) {
109+
// Must not alter options, thus extending a fresh object...
110+
$.cookie(key, '', $.extend({}, options, { expires: -1 }));
111+
return !$.cookie(key);
112+
};
113+
114+
}));

0 commit comments

Comments
 (0)