pagoda-jekyll 0.0.2 → 0.0.3

data/lib/pagoda/public/css/tiptip.css

@@ -0,0 +1,114 @@
+/* TipTip CSS - Version 1.2 */
+
+#tiptip_holder {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 99999;
+}
+
+#tiptip_holder.tip_top {
+  padding-bottom: 5px;
+}
+
+#tiptip_holder.tip_bottom {
+  padding-top: 5px;
+}
+
+#tiptip_holder.tip_right {
+  padding-left: 5px;
+}
+
+#tiptip_holder.tip_left {
+  padding-right: 5px;
+}
+
+#tiptip_content {
+  font-size: 11px;
+  color: #fff;
+  text-shadow: 0 0 2px #000;
+  padding: 4px 8px;
+  border: 1px solid rgba(255,255,255,0.25);
+  background-color: rgb(25,25,25);
+  background-color: rgba(25,25,25,0.92);
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
+  border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  box-shadow: 0 0 3px #555;
+  -webkit-box-shadow: 0 0 3px #555;
+  -moz-box-shadow: 0 0 3px #555;
+}
+
+#tiptip_arrow, #tiptip_arrow_inner {
+  position: absolute;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 6px;
+  height: 0;
+  width: 0;
+}
+
+#tiptip_holder.tip_top #tiptip_arrow {
+  border-top-color: #fff;
+  border-top-color: rgba(255,255,255,0.35);
+}
+
+#tiptip_holder.tip_bottom #tiptip_arrow {
+  border-bottom-color: #fff;
+  border-bottom-color: rgba(255,255,255,0.35);
+}
+
+#tiptip_holder.tip_right #tiptip_arrow {
+  border-right-color: #fff;
+  border-right-color: rgba(255,255,255,0.35);
+}
+
+#tiptip_holder.tip_left #tiptip_arrow {
+  border-left-color: #fff;
+  border-left-color: rgba(255,255,255,0.35);
+}
+
+#tiptip_holder.tip_top #tiptip_arrow_inner {
+  margin-top: -7px;
+  margin-left: -6px;
+  border-top-color: rgb(25,25,25);
+  border-top-color: rgba(25,25,25,0.92);
+}
+
+#tiptip_holder.tip_bottom #tiptip_arrow_inner {
+  margin-top: -5px;
+  margin-left: -6px;
+  border-bottom-color: rgb(25,25,25);
+  border-bottom-color: rgba(25,25,25,0.92);
+}
+
+#tiptip_holder.tip_right #tiptip_arrow_inner {
+  margin-top: -6px;
+  margin-left: -5px;
+  border-right-color: rgb(25,25,25);
+  border-right-color: rgba(25,25,25,0.92);
+}
+
+#tiptip_holder.tip_left #tiptip_arrow_inner {
+  margin-top: -6px;
+  margin-left: -7px;
+  border-left-color: rgb(25,25,25);
+  border-left-color: rgba(25,25,25,0.92);
+}
+
+/* Webkit Hacks  */
+@media screen and (-webkit-min-device-pixel-ratio:0) {  
+  #tiptip_content {
+    padding: 0px 8px 1px 8px;
+    background-color: rgba(45,45,45,0.88);
+    margin-top: 2px;
+  }
+  #tiptip_holder.tip_bottom #tiptip_arrow_inner { 
+    border-bottom-color: rgba(45,45,45,0.88);
+  }
+  #tiptip_holder.tip_top #tiptip_arrow_inner { 
+    border-top-color: rgba(20,20,20,0.92);
+  }
+}

data/lib/pagoda/public/js/editor.coffee

@@ -0,0 +1,114 @@
+$(document).ready ->
+
+  # Keymaster doesn't allow INPUT, TEXTAREA to have shortcuts.
+  # Override it.
+  key.filter = (e)->
+    true
+
+  is_edit_page = ->
+    window.location.pathname.indexOf('edit')
+
+  set_save_button = (status)->
+    if(status == 'saving')
+      $('#save-button').val('Saving')
+      $('#save-button').addClass('post-saving')
+    else if status == 'saved'
+      $('#save-button').val('Saved')
+      setTimeout((->
+        $('#save-button').val('Save')
+        $('#save-button').removeClass('post-saving')
+      ), 1000)
+    else if status == 'error'
+      $('#save-button').val('Error')
+      $('#save-button').removeClass('post-saving')
+      setTimeout((->set_save_button('saved')),2000)
+
+  # Save post
+  save_post = ->
+    set_save_button('saving')
+    draft = if $('#post_draft').is(':checked') then 'on' else 'off'
+
+    post_obj = 
+      post : 
+        title   : $('#post_title').val()
+        content : $('#post_content').val()
+        name    : $('#post_name').val()
+        draft   : draft
+
+      ajax    : true
+
+    $.post('/save-post', post_obj, (data)->
+      response = $.parseJSON(data)
+      if response['status'] == 'OK'
+        setTimeout((->set_save_button('saved')),1000)
+      else
+        set_save_button('error')
+    )
+    .fail((->set_save_button('error')))
+
+  # Dom invoked events
+  handle_events =->
+    $('#post-editor #post_title').autosize({append: "\n"})
+
+    $("#fullscreen").click (e)->
+      screenfull.request();
+
+    screenfull.onchange = ->
+      if screenfull.isFullscreen
+        $('#fullscreen').hide();
+
+        setTimeout( ->
+          console.log $(window).height()
+          rows = Math.ceil($(window).height()/40)
+          $('#post_content').attr('rows', rows);
+        , 1000)
+
+      else
+        $('#fullscreen').show();
+        $('#post_content').attr('rows', 18);
+
+    $('.delete-button').click ->
+      if not confirm("Confirm delete?")
+        return false
+
+    if is_edit_page()
+      $('#save-button').click( ->
+        save_post()
+        false
+      )
+
+  keyboard_events =->
+    key('⌘+enter, ctrl+enter', (e)->
+      screenfull.toggle()
+    )
+
+    key('⌘+s, ctrl+s',(e) ->
+      if not is_edit_page()
+        $('.edit_post').submit()
+      else
+        save_post()
+      false
+    )
+
+
+  show_shortcuts =->
+    is_mac = navigator.platform.toUpperCase().indexOf('MAC')>=0;
+    special_key = if is_mac then '⌘' else 'ctrl'
+
+
+    save_shortcut  = special_key + '+S'
+    fulls_shortcut = special_key + '+Enter'
+  
+    $('#save-button').attr('title', save_shortcut)
+    $('#fullscreen').attr('title', fulls_shortcut)
+    $("#save-button").tipTip({delay: 200})
+    $("#fullscreen").tipTip({delay: 200, defaultPosition: 'right'})
+
+
+  init =->
+    handle_events()
+    keyboard_events()
+    show_shortcuts()
+
+
+  init()

data/lib/pagoda/public/js/editor.js

@@ -2,40 +2,126 @@
 (function() {
 
   $(document).ready(function() {
-    $('#post-editor #post_title').autosize({
-      append: "\n"
-    });
-    $("#fullscreen").click(function(e) {
-      return screenfull.request();
-    });
-    screenfull.onchange = function() {
-      if (screenfull.isFullscreen) {
-        $('#fullscreen').hide();
-        return setTimeout(function() {
-          var rows;
-          console.log($(window).height());
-          rows = Math.ceil($(window).height() / 40);
-          return $('#post_content').attr('rows', rows);
-        }, 1000);
-      } else {
-        $('#fullscreen').show();
-        return $('#post_content').attr('rows', 18);
+    var handle_events, init, is_edit_page, keyboard_events, save_post, set_save_button, show_shortcuts;
+    key.filter = function(e) {
+      return true;
+    };
+    is_edit_page = function() {
+      return window.location.pathname.indexOf('edit');
+    };
+    set_save_button = function(status) {
+      if (status === 'saving') {
+        $('#save-button').val('Saving');
+        return $('#save-button').addClass('post-saving');
+      } else if (status === 'saved') {
+        $('#save-button').val('Saved');
+        return setTimeout((function() {
+          $('#save-button').val('Save');
+          return $('#save-button').removeClass('post-saving');
+        }), 1000);
+      } else if (status === 'error') {
+        $('#save-button').val('Error');
+        $('#save-button').removeClass('post-saving');
+        return setTimeout((function() {
+          return set_save_button('saved');
+        }), 2000);
       }
     };
-    $('.delete-button').click(function() {
-      if (!confirm("Confirm delete?")) {
-        return false;
+    save_post = function() {
+      var draft, post_obj;
+      set_save_button('saving');
+      draft = $('#post_draft').is(':checked') ? 'on' : 'off';
+      post_obj = {
+        post: {
+          title: $('#post_title').val(),
+          content: $('#post_content').val(),
+          name: $('#post_name').val(),
+          draft: draft
+        },
+        ajax: true
+      };
+      return $.post('/save-post', post_obj, function(data) {
+        var response;
+        response = $.parseJSON(data);
+        if (response['status'] === 'OK') {
+          return setTimeout((function() {
+            return set_save_button('saved');
+          }), 1000);
+        } else {
+          return set_save_button('error');
+        }
+      }).fail((function() {
+        return set_save_button('error');
+      }));
+    };
+    handle_events = function() {
+      $('#post-editor #post_title').autosize({
+        append: "\n"
+      });
+      $("#fullscreen").click(function(e) {
+        return screenfull.request();
+      });
+      screenfull.onchange = function() {
+        if (screenfull.isFullscreen) {
+          $('#fullscreen').hide();
+          return setTimeout(function() {
+            var rows;
+            console.log($(window).height());
+            rows = Math.ceil($(window).height() / 40);
+            return $('#post_content').attr('rows', rows);
+          }, 1000);
+        } else {
+          $('#fullscreen').show();
+          return $('#post_content').attr('rows', 18);
+        }
+      };
+      $('.delete-button').click(function() {
+        if (!confirm("Confirm delete?")) {
+          return false;
+        }
+      });
+      if (is_edit_page()) {
+        return $('#save-button').click(function() {
+          save_post();
+          return false;
+        });
       }
-    });
-    $(document).bind('keydown', 'ctrl+f', function() {
-      return screenfull.request();
-    });
-    $(document).bind('keydown', 'meta+f', function() {
-      return screenfull.request();
-    });
-    return $(document).bind('keydown', 'meta+s', function() {
-      return $('.edit_post').submit();
-    });
+    };
+    keyboard_events = function() {
+      key('⌘+enter, ctrl+enter', function(e) {
+        return screenfull.toggle();
+      });
+      return key('⌘+s, ctrl+s', function(e) {
+        if (!is_edit_page()) {
+          $('.edit_post').submit();
+        } else {
+          save_post();
+        }
+        return false;
+      });
+    };
+    show_shortcuts = function() {
+      var fulls_shortcut, is_mac, save_shortcut, special_key;
+      is_mac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+      special_key = is_mac ? '⌘' : 'ctrl';
+      save_shortcut = special_key + '+S';
+      fulls_shortcut = special_key + '+Enter';
+      $('#save-button').attr('title', save_shortcut);
+      $('#fullscreen').attr('title', fulls_shortcut);
+      $("#save-button").tipTip({
+        delay: 200
+      });
+      return $("#fullscreen").tipTip({
+        delay: 200,
+        defaultPosition: 'right'
+      });
+    };
+    init = function() {
+      handle_events();
+      keyboard_events();
+      return show_shortcuts();
+    };
+    return init();
   });
 
 }).call(this);

data/lib/pagoda/public/js/jquery.tiptip.min.js

@@ -0,0 +1,21 @@
+ /*
+ * TipTip
+ * Copyright 2010 Drew Wilson
+ * www.drewwilson.com
+ * code.drewwilson.com/entry/tiptip-jquery-plugin
+ *
+ * Version 1.3   -   Updated: Mar. 23, 2010
+ *
+ * This Plug-In will create a custom tooltip to replace the default
+ * browser tooltip. It is extremely lightweight and very smart in
+ * that it detects the edges of the browser window and will make sure
+ * the tooltip stays within the current window size. As a result the
+ * tooltip will adjust itself to be displayed above, below, to the left 
+ * or to the right depending on what is necessary to stay within the
+ * browser window. It is completely customizable as well via CSS.
+ *
+ * This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ */
+(function($){$.fn.tipTip=function(options){var defaults={activation:"hover",keepAlive:false,maxWidth:"200px",edgeOffset:3,defaultPosition:"bottom",delay:400,fadeIn:200,fadeOut:200,attribute:"title",content:false,enter:function(){},exit:function(){}};var opts=$.extend(defaults,options);if($("#tiptip_holder").length<=0){var tiptip_holder=$('<div id="tiptip_holder" style="max-width:'+opts.maxWidth+';"></div>');var tiptip_content=$('<div id="tiptip_content"></div>');var tiptip_arrow=$('<div id="tiptip_arrow"></div>');$("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>')))}else{var tiptip_holder=$("#tiptip_holder");var tiptip_content=$("#tiptip_content");var tiptip_arrow=$("#tiptip_arrow")}return this.each(function(){var org_elem=$(this);if(opts.content){var org_title=opts.content}else{var org_title=org_elem.attr(opts.attribute)}if(org_title!=""){if(!opts.content){org_elem.removeAttr(opts.attribute)}var timeout=false;if(opts.activation=="hover"){org_elem.hover(function(){active_tiptip()},function(){if(!opts.keepAlive){deactive_tiptip()}});if(opts.keepAlive){tiptip_holder.hover(function(){},function(){deactive_tiptip()})}}else if(opts.activation=="focus"){org_elem.focus(function(){active_tiptip()}).blur(function(){deactive_tiptip()})}else if(opts.activation=="click"){org_elem.click(function(){active_tiptip();return false}).hover(function(){},function(){if(!opts.keepAlive){deactive_tiptip()}});if(opts.keepAlive){tiptip_holder.hover(function(){},function(){deactive_tiptip()})}}function active_tiptip(){opts.enter.call(this);tiptip_content.html(org_title);tiptip_holder.hide().removeAttr("class").css("margin","0");tiptip_arrow.removeAttr("style");var top=parseInt(org_elem.offset()['top']);var left=parseInt(org_elem.offset()['left']);var org_width=parseInt(org_elem.outerWidth());var org_height=parseInt(org_elem.outerHeight());var tip_w=tiptip_holder.outerWidth();var tip_h=tiptip_holder.outerHeight();var w_compare=Math.round((org_width-tip_w)/2);var h_compare=Math.round((org_height-tip_h)/2);var marg_left=Math.round(left+w_compare);var marg_top=Math.round(top+org_height+opts.edgeOffset);var t_class="";var arrow_top="";var arrow_left=Math.round(tip_w-12)/2;if(opts.defaultPosition=="bottom"){t_class="_bottom"}else if(opts.defaultPosition=="top"){t_class="_top"}else if(opts.defaultPosition=="left"){t_class="_left"}else if(opts.defaultPosition=="right"){t_class="_right"}var right_compare=(w_compare+left)<parseInt($(window).scrollLeft());var left_compare=(tip_w+left)>parseInt($(window).width());if((right_compare&&w_compare<0)||(t_class=="_right"&&!left_compare)||(t_class=="_left"&&left<(tip_w+opts.edgeOffset+5))){t_class="_right";arrow_top=Math.round(tip_h-13)/2;arrow_left=-12;marg_left=Math.round(left+org_width+opts.edgeOffset);marg_top=Math.round(top+h_compare)}else if((left_compare&&w_compare<0)||(t_class=="_left"&&!right_compare)){t_class="_left";arrow_top=Math.round(tip_h-13)/2;arrow_left=Math.round(tip_w);marg_left=Math.round(left-(tip_w+opts.edgeOffset+5));marg_top=Math.round(top+h_compare)}var top_compare=(top+org_height+opts.edgeOffset+tip_h+8)>parseInt($(window).height()+$(window).scrollTop());var bottom_compare=((top+org_height)-(opts.edgeOffset+tip_h+8))<0;if(top_compare||(t_class=="_bottom"&&top_compare)||(t_class=="_top"&&!bottom_compare)){if(t_class=="_top"||t_class=="_bottom"){t_class="_top"}else{t_class=t_class+"_top"}arrow_top=tip_h;marg_top=Math.round(top-(tip_h+5+opts.edgeOffset))}else if(bottom_compare|(t_class=="_top"&&bottom_compare)||(t_class=="_bottom"&&!top_compare)){if(t_class=="_top"||t_class=="_bottom"){t_class="_bottom"}else{t_class=t_class+"_bottom"}arrow_top=-12;marg_top=Math.round(top+org_height+opts.edgeOffset)}if(t_class=="_right_top"||t_class=="_left_top"){marg_top=marg_top+5}else if(t_class=="_right_bottom"||t_class=="_left_bottom"){marg_top=marg_top-5}if(t_class=="_left_top"||t_class=="_left_bottom"){marg_left=marg_left+5}tiptip_arrow.css({"margin-left":arrow_left+"px","margin-top":arrow_top+"px"});tiptip_holder.css({"margin-left":marg_left+"px","margin-top":marg_top+"px"}).attr("class","tip"+t_class);if(timeout){clearTimeout(timeout)}timeout=setTimeout(function(){tiptip_holder.stop(true,true).fadeIn(opts.fadeIn)},opts.delay)}function deactive_tiptip(){opts.exit.call(this);if(timeout){clearTimeout(timeout)}tiptip_holder.fadeOut(opts.fadeOut)}}})}})(jQuery);

data/lib/pagoda/public/js/keymaster.min.js

@@ -0,0 +1,4 @@
+//     keymaster.js
+//     (c) 2011-2012 Thomas Fuchs
+//     keymaster.js may be freely distributed under the MIT license.
+(function(e){function f(e,t){var n=e.length;while(n--)if(e[n]===t)return n;return-1}function l(e,t){if(e.length!=t.length)return!1;for(var n=0;n<e.length;n++)if(e[n]!==t[n])return!1;return!0}function h(e){for(t in r)r[t]=e[c[t]]}function p(e,t){var i,o,u,l,c;i=e.keyCode,f(a,i)==-1&&a.push(i);if(i==93||i==224)i=91;if(i in r){r[i]=!0;for(u in s)s[u]==i&&(m[u]=!0);return}h(e);if(!m.filter.call(this,e))return;if(!(i in n))return;for(l=0;l<n[i].length;l++){o=n[i][l];if(o.scope==t||o.scope=="all"){c=o.mods.length>0;for(u in r)if(!r[u]&&f(o.mods,+u)>-1||r[u]&&f(o.mods,+u)==-1)c=!1;(o.mods.length==0&&!r[16]&&!r[18]&&!r[17]&&!r[91]||c)&&o.method(e,o)===!1&&(e.preventDefault?e.preventDefault():e.returnValue=!1,e.stopPropagation&&e.stopPropagation(),e.cancelBubble&&(e.cancelBubble=!0))}}}function d(e){var t=e.keyCode,n,i=f(a,t);i>=0&&a.splice(i,1);if(t==93||t==224)t=91;if(t in r){r[t]=!1;for(n in s)s[n]==t&&(m[n]=!1)}}function v(){for(t in r)r[t]=!1;for(t in s)m[t]=!1}function m(e,t,r){var i,s,o,a;i=T(e),r===undefined&&(r=t,t="all");for(o=0;o<i.length;o++)s=[],e=i[o].split("+"),e.length>1&&(s=N(e),e=[e[e.length-1]]),e=e[0],e=u(e),e in n||(n[e]=[]),n[e].push({shortcut:i[o],scope:t,method:r,key:i[o],mods:s})}function g(e,t){var r=e.split("+"),i=[],s,o;r.length>1&&(i=N(r),e=r[r.length-1]),e=u(e),t===undefined&&(t=S());if(!n[e])return;for(s in n[e])o=n[e][s],o.scope===t&&l(o.mods,i)&&(n[e][s]={})}function y(e){return typeof e=="string"&&(e=u(e)),f(a,e)!=-1}function b(){return a.slice(0)}function w(e){var t=(e.target||e.srcElement).tagName;return t!="INPUT"&&t!="SELECT"&&t!="TEXTAREA"}function E(e){i=e||"all"}function S(){return i||"all"}function x(e){var t,r,i;for(t in n){r=n[t];for(i=0;i<r.length;)r[i].scope===e?r.splice(i,1):i++}}function T(e){var t;return e=e.replace(/\s/g,""),t=e.split(","),t[t.length-1]==""&&(t[t.length-2]+=","),t}function N(e){var t=e.slice(0,e.length-1);for(mi=0;mi<t.length;mi++)t[mi]=s[t[mi]];return t}function C(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent&&e.attachEvent("on"+t,function(){n(window.event)})}function L(){var t=e.key;return e.key=k,t}var t,n={},r={16:!1,18:!1,17:!1,91:!1},i="all",s={"⇧":16,shift:16,"⌥":18,alt:18,option:18,"⌃":17,ctrl:17,control:17,"⌘":91,command:91},o={backspace:8,tab:9,clear:12,enter:13,"return":13,esc:27,escape:27,space:32,left:37,up:38,right:39,down:40,del:46,"delete":46,home:36,end:35,pageup:33,pagedown:34,",":188,".":190,"/":191,"`":192,"-":189,"=":187,";":186,"'":222,"[":219,"]":221,"\\":220},u=function(e){return o[e]||e.toUpperCase().charCodeAt(0)},a=[];for(t=1;t<20;t++)o["f"+t]=111+t;var c={16:"shiftKey",18:"altKey",17:"ctrlKey",91:"metaKey"};for(t in s)m[t]=!1;C(document,"keydown",function(e){p(e,i)}),C(document,"keyup",d),C(window,"focus",v);var k=e.key;e.key=m,e.key.setScope=E,e.key.getScope=S,e.key.deleteScope=x,e.key.filter=w,e.key.isPressed=y,e.key.getPressedKeyCodes=b,e.key.noConflict=L,e.key.unbind=g,typeof module!="undefined"&&(module.exports=key)})(this);

data/lib/pagoda/templates/edit.mustache

@@ -11,17 +11,6 @@
             <div class="left">
               <a href="/">&laquo; Admin</a>
               <a href="/delete/{{ name }}" class="delete-bar delete-button" >Delete</a>
-              <a href="#options" id="options" class="menu">Options</a>
-              <ul id="options" class="sub-menu">
-                <li>
-                  <label for="post_url">Slug</label>
-                  <input id="post_slug" name="post[slug]" placeholder="Leave blank to automatically generate" size="30" type="text" value="cream" />
-                </li>
-                <li>
-                  <label for="post_url">URL</label>
-                  <input id="post_url" name="post[url]" placeholder="Optional external link" size="30" type="text" value="" />
-                </li>
-              </ul>
             </div>
             <div class="right">
               <label for="post_draft">Draft</label>

data/lib/pagoda/templates/editor_area.mustache

@@ -2,7 +2,7 @@
   <div id="post-editor" class="split-section">
     <div id="text-title">
       <textarea cols="40" id="post_title" name="post[title]" placeholder="Title here" rows="1">{{#ptitle}}{{ ptitle }}{{/ptitle}}{{^ptitle}}{{ title }}{{/ptitle}}</textarea>
-      <input type="hidden" name="post[name]" value="{{ name }}">
+      <input type="hidden" id="post_name" name="post[name]" value="{{ name }}">
     </div>
 
     <div id="text-content">

data/lib/pagoda/templates/layout.mustache

@@ -2,7 +2,8 @@
 <html>
 <head>
   <meta http-equiv="Content-type" content="text/html;charset=utf-8">
-  <link rel="stylesheet" type="text/css" href="{{base_url}}/css/pagoda.css" media="all">
+    <link rel="stylesheet" type="text/css" href="{{base_url}}/css/pagoda.css" media="all">
+    <link rel="stylesheet" type="text/css" href="{{base_url}}/css/tiptip.css" media="all">
   <link href='http://fonts.googleapis.com/css?family=Lato:300,900' rel='stylesheet' type='text/css' />
   {{#css}}
   <link rel="stylesheet" type="text/css" href="{{base_url}}/custom.css" media="all">
@@ -15,7 +16,8 @@
   <script type="text/javascript" src="{{base_url}}/js/jquery.js"></script>
   <script type="text/javascript" src="{{base_url}}/js/screenfull.js"></script>
   <script type="text/javascript" src="{{base_url}}/js/jquery.autosize.js"></script>
-  <script type="text/javascript" src="{{base_url}}/js/jquery.hotkeys.js"></script>
+  <script type="text/javascript" src="{{base_url}}/js/keymaster.min.js"></script>
+  <script type="text/javascript" src="{{base_url}}/js/jquery.tiptip.min.js"></script>
   <script type="text/javascript" src="{{base_url}}/js/editor.js"></script>
   <title>{{title}}</title>
 </head>