Implement redesign of key

config.js

@@ -7,7 +7,7 @@
 
   "maxLength": 400000,
 
-  "cacheStaticAssets": true,
+  "cacheStaticAssets": false,
 
   "logging": [
     {

lib/static_handler.js

@@ -28,6 +28,7 @@ StaticHandler.contentTypeFor = function(ext) {
   else if (ext == '.html') return 'text/html';
   else if (ext == '.ico') return 'image/ico';
   else if (ext == '.txt') return 'text/plain';
+  else if (ext == '.png') return 'image/png';
   else {
     winston.error('unable to determine content type for static asset with extension: ' + ext);
     return 'text/plain';

static/application.css

@@ -33,18 +33,80 @@ textarea {
 
 #key {
 	position: fixed;
-	top: 20px;
-	right: 20px;
-	text-align: right;
-	z-index: -1000; /* watch out */
-	color: #999;
-	font-size: 13px;
-	font-family: monospace;
-	line-height: 1.3em;
+	top: 0px;
+	right: 0px;
+	z-index: +1000; /* watch out */
 }
 
-#key em {
-	display: block;
-	margin-bottom: 5px;
-	color: #ccc !important;
+#key .box1 {
+	padding: 5px;
+	text-align: center;
+	background: #00222b;
 }
+
+#key .box2 {
+	padding: 5px;
+	background: #08323c;
+	font-size: 0px;
+}
+
+#key .box1 a.logo, #key .box1 a.logo:visited {
+	display: inline-block;
+	background: url(logo.png);
+	width: 126px;
+	height: 42px;
+}
+
+#key .box1 a.logo:hover {
+	background-position: 0 bottom;
+}
+
+#key .box2 .function {
+	background: url(function-icons.png);
+	width: 32px;
+	height: 37px;
+	display: inline-block;
+}
+
+#key .box2 .function.enabled:hover {
+	cursor: hand;
+	cursor: pointer;
+}
+
+#key .box3 {
+	background: #173e48;
+	font-family: Helvetica, sans-serif;
+	font-size: 12px;
+	line-height: 14px;
+	padding: 10px 15px;
+}
+
+#key .box3 .label {
+	color: #fff;
+	font-weight: bold;
+}
+
+#key .box3 .shortcut {
+	color: #c4dce3;
+	font-weight: normal;
+}
+
+#key .box2 .function.save { background-position: 0px top; }
+#key .box2 .function.enabled.save { background-position: 0px center; }
+#key .box2 .function.enabled.save:hover { background-position: 0px bottom; }
+
+#key .box2 .function.new { background-position: -32px top; }
+#key .box2 .function.enabled.new { background-position: -32px center; }
+#key .box2 .function.enabled.new:hover { background-position: -32px bottom; }
+
+#key .box2 .function.duplicate { background-position: -64px top; }
+#key .box2 .function.enabled.duplicate { background-position: -64px center; }
+#key .box2 .function.enabled.duplicate:hover { background-position: -64px bottom; }
+
+#key .box2 .function.link { background-position: -96px top; }
+#key .box2 .function.enabled.link { background-position: -96px center; }
+#key .box2 .function.enabled.link:hover { background-position: -96px bottom; }
+
+#key .box2 .function.twitter { background-position: -128px top; }
+#key .box2 .function.enabled.twitter { background-position: -128px center; }
+#key .box2 .function.enabled.twitter:hover { background-position: -128px bottom; }

static/application.js

@@ -61,6 +61,11 @@ var haste = function(appName, options) {
   this.$code = $('#box code');
   this.options = options;
   this.configureShortcuts();
+  this.configureButtons();
+  // If twitter is disabled, hide the button
+  if (!options.twitter) {
+    $('#key .box2 .twitter').hide();
+  }
 };
 
 // Set the page title - include the appName
@@ -71,23 +76,27 @@ haste.prototype.setTitle = function(ext) {
 
 // Show the light key
 haste.prototype.lightKey = function() {
-  var text = '';
-  text += '<em>' + this.appName + '</em>';
-  text += '^s - save<br>';
-  text += '^n - new';
-  $('#key').html(text);
+  this.configureKey(['new', 'save']);
 };
 
 // Show the full key
 haste.prototype.fullKey = function() {
-  var text = '';
-  text += '<em>' + this.appName + '</em>';
-  text += '^n - new<br>';
-  text += '^d - duplicate<br>';
-  if (this.options.twitter) {
-    text += '^t - twitter';
-  }
-  $('#key').html(text);
+  this.configureKey(['new', 'duplicate', 'twitter', 'link']);
+};
+
+// Set the key up for certain things to be enabled
+haste.prototype.configureKey = function(enable) {
+  var $this, i = 0;
+  $('#key .box2 .function').each(function() {
+    $this = $(this);
+    for (i = 0; i < enable.length; i++) {
+      if ($this.hasClass(enable[i])) {
+        $this.addClass('enabled');
+        return true;
+      }
+    }
+    $this.removeClass('enabled');
+  });
 };
 
 // Remove the current document (if there is one)
@@ -170,32 +179,101 @@ haste.prototype.lockDocument = function() {
   });
 };
 
+haste.prototype.configureButtons = function() {
+  var _this = this;
+  this.buttons = [
+    {
+      $where: $('#key .box2 .save'),
+      label: 'Save',
+      shortcutDescription: 'control + s',
+      shortcut: function(evt) {
+        return evt.ctrlKey && (evt.keyCode === 76 || evt.keyCode === 83);
+      },
+      action: function() {
+        if (_this.$textarea.val().replace(/^\s+|\s+$/g, '') !== '') {
+          _this.lockDocument();
+        }
+      }
+    },
+    {
+      $where: $('#key .box2 .new'),
+      label: 'New',
+      shortcut: function(evt) {
+        return evt.ctrlKey && evt.keyCode === 78  
+      },
+      shortcutDescription: 'control + n',
+      action: function() {
+        _this.newDocument(!_this.doc.key);
+      }
+    },
+    {
+      $where: $('#key .box2 .duplicate'),
+      label: 'Duplicate & Edit',
+      shortcut: function(evt) {
+        return _this.doc.locked && evt.ctrlKey && evt.keyCode === 68;
+      },
+      shortcutDescription: 'control + d',
+      action: function() {
+        _this.duplicateDocument();
+      }
+    },
+    {
+      $where: $('#key .box2 .twitter'),
+      label: 'Twitter',
+      shortcut: function(evt) {
+        return _this.options.twitter && _this.doc.locked && evt.ctrlKey && evt.keyCode == 84;
+      },
+      shortcutDescription: 'control + t',
+      action: function() {
+        window.open('https://twitter.com/share?url=' + encodeURI(_this.baseUrl + _this.doc.key));
+      }
+    },
+    {
+      $where: $('#key .box2 .link'),
+      label: 'Copy URL',
+      action: function() {
+        alert('not yet implemented');
+      }
+    }
+  ];
+  for (var i = 0; i < this.buttons.length; i++) {
+    this.configureButton(this.buttons[i]);
+  }
+};
+
+haste.prototype.configureButton = function(options) {
+  // Handle the click action
+  options.$where.click(function(evt) {
+    evt.preventDefault();
+    if ($(this).hasClass('enabled')) {
+      options.action();
+    }
+  });
+  // Show the label
+  options.$where.mouseenter(function(evt) {
+    $('#key .box3 .label').text(options.label);
+    $('#key .box3 .shortcut').text(options.shortcutDescription || '');
+    $('#key .box3').show();
+  });
+  // Hide the label
+  options.$where.mouseleave(function(evt) {
+    $('#key .box3').hide();
+  });
+};
+
 // Configure keyboard shortcuts for the textarea
 haste.prototype.configureShortcuts = function() {
   var _this = this;
   $(document.body).keydown(function(evt) {
-    // ^L or ^S for lock
-    if (evt.ctrlKey && (evt.keyCode === 76 || evt.keyCode === 83)) {
-      if (_this.$textarea.val().replace(/^\s+|\s+$/g, '') !== '') {
+    var button;
+    for (var i = 0 ; i < _this.buttons.length; i++) {
+      button = _this.buttons[i];
+      if (button.shortcut && button.shortcut(evt)) {
         evt.preventDefault();
-        _this.lockDocument();
+        button.action();
+        return;
       }
     }
-    // ^N for new document
-    else if (evt.ctrlKey && evt.keyCode === 78) {
-      evt.preventDefault();
-      _this.newDocument(!_this.doc.key);
-    }
-    // ^D for duplicate - only when locked
-    else if (_this.doc.locked && evt.ctrlKey && evt.keyCode === 68) {
-      evt.preventDefault();
-      _this.duplicateDocument();
-    }
-    // ^T for redirecting to twitter
-    else if (_this.options.twitter && _this.doc.locked && evt.ctrlKey && evt.keyCode == 84) {
-      evt.preventDefault();
-      window.open('https://twitter.com/share?url=' + encodeURI(_this.baseUrl + _this.doc.key));
-    }
   });
 };
 

static/index.html

@@ -44,7 +44,23 @@
 
 	<body>
 
-		<div id="key"></div>
+		<div id="key">
+			<div class="box1">
+				<a href="/about" class="logo"></a>
+			</div>
+			<div class="box2">
+				<a href="#" class="save function"></a>
+				<a href="#" class="new function"></a>
+				<a href="#" class="duplicate function"></a>
+				<a href="#" class="link function"></a>
+				<a href="#" class="twitter function"></a>
+			</div>
+			<div class="box3" style="display:none;">
+				<div class="label"></div>
+				<div class="shortcut"></div>
+			</div>
+		</div>
+
 		<pre id="box" style="display:none;" tabindex="0"><code></code></pre>
 		<textarea spellcheck="false" style="display:none;"></textarea>