Commit f601d9f1 authored by John Crepezzi's avatar John Crepezzi
Browse files

Implement redesign of key

parent 051a545a

config.js

+1 −1
Original line number Diff line number Diff line
@@ -7,7 +7,7 @@ 


  "maxLength": 400000,



  "cacheStaticAssets": true,

  "cacheStaticAssets": false,



  "logging": [

    {

lib/static_handler.js

+1 −0
Original line number Diff line number Diff line
@@ -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

+74 −12
Original line number Diff line number Diff line
@@ -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 .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 em {

	display: block;

	margin-bottom: 5px;

	color: #ccc !important;

#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

+110 −32
Original line number Diff line number Diff line
@@ -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';

  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;

      }

  $('#key').html(text);

    }

    $this.removeClass('enabled');

  });

};



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

};



// Configure keyboard shortcuts for the textarea

haste.prototype.configureShortcuts = function() {

haste.prototype.configureButtons = function() {

  var _this = this;

  $(document.body).keydown(function(evt) {

    // ^L or ^S for lock

    if (evt.ctrlKey && (evt.keyCode === 76 || evt.keyCode === 83)) {

  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, '') !== '') {

        evt.preventDefault();

          _this.lockDocument();

        }

      }

    // ^N for new document

    else if (evt.ctrlKey && evt.keyCode === 78) {

      evt.preventDefault();

    },

    {

      $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);

      }

    // ^D for duplicate - only when locked

    else if (_this.doc.locked && evt.ctrlKey && evt.keyCode === 68) {

      evt.preventDefault();

    },

    {

      $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();

      }

    // ^T for redirecting to twitter

    else if (_this.options.twitter && _this.doc.locked && evt.ctrlKey && evt.keyCode == 84) {

      evt.preventDefault();

    },

    {

      $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) {

    var button;

    for (var i = 0 ; i < _this.buttons.length; i++) {

      button = _this.buttons[i];

      if (button.shortcut && button.shortcut(evt)) {

        evt.preventDefault();

        button.action();

        return;

      }

    }

  });

};

static/function-icons.png

0 → 100644
+6.67 KiB
Loading image diff...