Skip to content

Commit f601d9f

Browse files
seejohnrunseejohnrun
committed
Implement redesign of key
1 parent 051a545 commit f601d9f

8 files changed

+203
-46
lines changed

‎config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
"maxLength": 400000,
99

10-
"cacheStaticAssets": true,
10+
"cacheStaticAssets": false,
1111

1212
"logging": [
1313
{

‎lib/static_handler.js

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ StaticHandler.contentTypeFor = function(ext) {
2828
else if (ext == '.html') return 'text/html';
2929
else if (ext == '.ico') return 'image/ico';
3030
else if (ext == '.txt') return 'text/plain';
31+
else if (ext == '.png') return 'image/png';
3132
else {
3233
winston.error('unable to determine content type for static asset with extension: ' + ext);
3334
return 'text/plain';

‎static/application.css

+74-12
Original file line numberDiff line numberDiff line change
@@ -33,18 +33,80 @@ textarea {
3333

3434
#key {
3535
position: fixed;
36-
top: 20px;
37-
right: 20px;
38-
text-align: right;
39-
z-index: -1000; /* watch out */
40-
color: #999;
41-
font-size: 13px;
42-
font-family: monospace;
43-
line-height: 1.3em;
36+
top: 0px;
37+
right: 0px;
38+
z-index: +1000; /* watch out */
39+
}
40+
41+
#key .box1 {
42+
padding: 5px;
43+
text-align: center;
44+
background: #00222b;
45+
}
46+
47+
#key .box2 {
48+
padding: 5px;
49+
background: #08323c;
50+
font-size: 0px;
51+
}
52+
53+
#key .box1 a.logo, #key .box1 a.logo:visited {
54+
display: inline-block;
55+
background: url(logo.png);
56+
width: 126px;
57+
height: 42px;
58+
}
59+
60+
#key .box1 a.logo:hover {
61+
background-position: 0 bottom;
62+
}
63+
64+
#key .box2 .function {
65+
background: url(function-icons.png);
66+
width: 32px;
67+
height: 37px;
68+
display: inline-block;
4469
}
4570

46-
#key em {
47-
display: block;
48-
margin-bottom: 5px;
49-
color: #ccc !important;
71+
#key .box2 .function.enabled:hover {
72+
cursor: hand;
73+
cursor: pointer;
5074
}
75+
76+
#key .box3 {
77+
background: #173e48;
78+
font-family: Helvetica, sans-serif;
79+
font-size: 12px;
80+
line-height: 14px;
81+
padding: 10px 15px;
82+
}
83+
84+
#key .box3 .label {
85+
color: #fff;
86+
font-weight: bold;
87+
}
88+
89+
#key .box3 .shortcut {
90+
color: #c4dce3;
91+
font-weight: normal;
92+
}
93+
94+
#key .box2 .function.save { background-position: 0px top; }
95+
#key .box2 .function.enabled.save { background-position: 0px center; }
96+
#key .box2 .function.enabled.save:hover { background-position: 0px bottom; }
97+
98+
#key .box2 .function.new { background-position: -32px top; }
99+
#key .box2 .function.enabled.new { background-position: -32px center; }
100+
#key .box2 .function.enabled.new:hover { background-position: -32px bottom; }
101+
102+
#key .box2 .function.duplicate { background-position: -64px top; }
103+
#key .box2 .function.enabled.duplicate { background-position: -64px center; }
104+
#key .box2 .function.enabled.duplicate:hover { background-position: -64px bottom; }
105+
106+
#key .box2 .function.link { background-position: -96px top; }
107+
#key .box2 .function.enabled.link { background-position: -96px center; }
108+
#key .box2 .function.enabled.link:hover { background-position: -96px bottom; }
109+
110+
#key .box2 .function.twitter { background-position: -128px top; }
111+
#key .box2 .function.enabled.twitter { background-position: -128px center; }
112+
#key .box2 .function.enabled.twitter:hover { background-position: -128px bottom; }

‎static/application.js

+110-32
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,11 @@ var haste = function(appName, options) {
6161
this.$code = $('#box code');
6262
this.options = options;
6363
this.configureShortcuts();
64+
this.configureButtons();
65+
// If twitter is disabled, hide the button
66+
if (!options.twitter) {
67+
$('#key .box2 .twitter').hide();
68+
}
6469
};
6570

6671
// Set the page title - include the appName
@@ -71,23 +76,27 @@ haste.prototype.setTitle = function(ext) {
7176

7277
// Show the light key
7378
haste.prototype.lightKey = function() {
74-
var text = '';
75-
text += '<em>' + this.appName + '</em>';
76-
text += '^s - save<br>';
77-
text += '^n - new';
78-
$('#key').html(text);
79+
this.configureKey(['new', 'save']);
7980
};
8081

8182
// Show the full key
8283
haste.prototype.fullKey = function() {
83-
var text = '';
84-
text += '<em>' + this.appName + '</em>';
85-
text += '^n - new<br>';
86-
text += '^d - duplicate<br>';
87-
if (this.options.twitter) {
88-
text += '^t - twitter';
89-
}
90-
$('#key').html(text);
84+
this.configureKey(['new', 'duplicate', 'twitter', 'link']);
85+
};
86+
87+
// Set the key up for certain things to be enabled
88+
haste.prototype.configureKey = function(enable) {
89+
var $this, i = 0;
90+
$('#key .box2 .function').each(function() {
91+
$this = $(this);
92+
for (i = 0; i < enable.length; i++) {
93+
if ($this.hasClass(enable[i])) {
94+
$this.addClass('enabled');
95+
return true;
96+
}
97+
}
98+
$this.removeClass('enabled');
99+
});
91100
};
92101

93102
// Remove the current document (if there is one)
@@ -170,32 +179,101 @@ haste.prototype.lockDocument = function() {
170179
});
171180
};
172181

182+
haste.prototype.configureButtons = function() {
183+
var _this = this;
184+
this.buttons = [
185+
{
186+
$where: $('#key .box2 .save'),
187+
label: 'Save',
188+
shortcutDescription: 'control + s',
189+
shortcut: function(evt) {
190+
return evt.ctrlKey && (evt.keyCode === 76 || evt.keyCode === 83);
191+
},
192+
action: function() {
193+
if (_this.$textarea.val().replace(/^\s+|\s+$/g, '') !== '') {
194+
_this.lockDocument();
195+
}
196+
}
197+
},
198+
{
199+
$where: $('#key .box2 .new'),
200+
label: 'New',
201+
shortcut: function(evt) {
202+
return evt.ctrlKey && evt.keyCode === 78
203+
},
204+
shortcutDescription: 'control + n',
205+
action: function() {
206+
_this.newDocument(!_this.doc.key);
207+
}
208+
},
209+
{
210+
$where: $('#key .box2 .duplicate'),
211+
label: 'Duplicate & Edit',
212+
shortcut: function(evt) {
213+
return _this.doc.locked && evt.ctrlKey && evt.keyCode === 68;
214+
},
215+
shortcutDescription: 'control + d',
216+
action: function() {
217+
_this.duplicateDocument();
218+
}
219+
},
220+
{
221+
$where: $('#key .box2 .twitter'),
222+
label: 'Twitter',
223+
shortcut: function(evt) {
224+
return _this.options.twitter && _this.doc.locked && evt.ctrlKey && evt.keyCode == 84;
225+
},
226+
shortcutDescription: 'control + t',
227+
action: function() {
228+
window.open('https://twitter.com/share?url=' + encodeURI(_this.baseUrl + _this.doc.key));
229+
}
230+
},
231+
{
232+
$where: $('#key .box2 .link'),
233+
label: 'Copy URL',
234+
action: function() {
235+
alert('not yet implemented');
236+
}
237+
}
238+
];
239+
for (var i = 0; i < this.buttons.length; i++) {
240+
this.configureButton(this.buttons[i]);
241+
}
242+
};
243+
244+
haste.prototype.configureButton = function(options) {
245+
// Handle the click action
246+
options.$where.click(function(evt) {
247+
evt.preventDefault();
248+
if ($(this).hasClass('enabled')) {
249+
options.action();
250+
}
251+
});
252+
// Show the label
253+
options.$where.mouseenter(function(evt) {
254+
$('#key .box3 .label').text(options.label);
255+
$('#key .box3 .shortcut').text(options.shortcutDescription || '');
256+
$('#key .box3').show();
257+
});
258+
// Hide the label
259+
options.$where.mouseleave(function(evt) {
260+
$('#key .box3').hide();
261+
});
262+
};
263+
173264
// Configure keyboard shortcuts for the textarea
174265
haste.prototype.configureShortcuts = function() {
175266
var _this = this;
176267
$(document.body).keydown(function(evt) {
177-
// ^L or ^S for lock
178-
if (evt.ctrlKey && (evt.keyCode === 76 || evt.keyCode === 83)) {
179-
if (_this.$textarea.val().replace(/^\s+|\s+$/g, '') !== '') {
268+
var button;
269+
for (var i = 0 ; i < _this.buttons.length; i++) {
270+
button = _this.buttons[i];
271+
if (button.shortcut && button.shortcut(evt)) {
180272
evt.preventDefault();
181-
_this.lockDocument();
273+
button.action();
274+
return;
182275
}
183276
}
184-
// ^N for new document
185-
else if (evt.ctrlKey && evt.keyCode === 78) {
186-
evt.preventDefault();
187-
_this.newDocument(!_this.doc.key);
188-
}
189-
// ^D for duplicate - only when locked
190-
else if (_this.doc.locked && evt.ctrlKey && evt.keyCode === 68) {
191-
evt.preventDefault();
192-
_this.duplicateDocument();
193-
}
194-
// ^T for redirecting to twitter
195-
else if (_this.options.twitter && _this.doc.locked && evt.ctrlKey && evt.keyCode == 84) {
196-
evt.preventDefault();
197-
window.open('https://twitter.com/share?url=' + encodeURI(_this.baseUrl + _this.doc.key));
198-
}
199277
});
200278
};
201279

‎static/function-icons.png

6.67 KB
Loading

‎static/hover-dropdown-tip.png

2.8 KB
Loading

‎static/index.html

+17-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,23 @@
4444

4545
<body>
4646

47-
<div id="key"></div>
47+
<div id="key">
48+
<div class="box1">
49+
<a href="/about" class="logo"></a>
50+
</div>
51+
<div class="box2">
52+
<a href="#" class="save function"></a>
53+
<a href="#" class="new function"></a>
54+
<a href="#" class="duplicate function"></a>
55+
<a href="#" class="link function"></a>
56+
<a href="#" class="twitter function"></a>
57+
</div>
58+
<div class="box3" style="display:none;">
59+
<div class="label"></div>
60+
<div class="shortcut"></div>
61+
</div>
62+
</div>
63+
4864
<pre id="box" style="display:none;" tabindex="0"><code></code></pre>
4965
<textarea spellcheck="false" style="display:none;"></textarea>
5066

‎static/logo.png

4.6 KB
Loading

0 commit comments

Comments
 (0)