shortcuts

generator/generate.html

     <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap-theme.min.css" />
     <!-- Library: Bootstrap typeahead -->
     <script type="text/javascript" src="lib/typeahead/bootstrap3-typeahead.min.js" charset="utf-8"></script>
+    <!-- Library: Shortcut -->
+    <script type="text/javascript" src="lib/shortcut/shortcut.js" charset="utf-8"></script>
     <!-- Library: Color picker -->
     <link href="lib/colorpicker/css/bootstrap-colorselector.css" rel="stylesheet" />
     <script type="text/javascript" src="lib/colorpicker/js/bootstrap-colorselector.js" charset="utf-8"></script>
                     <div class="form-group">
                         <label for="selected-card" class="col-sm-2 control-label">Deck</label>
                         <div class="col-sm-10">
-                            <p class="form-control-static" id="total_card_count">Deck contains 0 cards.</p>
+                            <p class="form-control-static" id="total_card_count">This deck contains 0 cards.</p>
                         </div>
                     </div>
                     <div class="form-group">

generator/js/card.ts

             return this.color_back || this.color || options.default_color || "black";
         }
         public getIconFront(options: Options): string {
-            return this.icon_front || this.icon || options.default_icon || "ace";
+            return this.icon_front || this.icon || options.default_icon || "";
         }
         public getIconBack(options: Options): string {
-            return this.icon_back || this.icon || options.default_icon || "ace";
+            return this.icon_back || this.icon || options.default_icon || "";
         }
     };
 
         constructor() {
         }
 
-        private  _icon(src: string, ind: string, ind0: string): string {
-            return ind + '<card-icon src="/icons/' + src + '.svg"></card-icon>\n';
+        private _icon(src: string, ind: string, ind0: string): string {
+            if (src.length > 0) {
+                return ind + '<card-icon src="/icons/' + src + '.svg"></card-icon>\n';
+            } else {
+                return "";
+            }
         }
 
         private  _subtitle(params: string[], card: Card, options: Options, ind: string, ind0: string): string {

generator/js/ui.ts

 /// <reference path="./example_data.ts" />
 /// <reference path="./jquery.d.ts" />
 /// <reference path="./ace.d.ts" />
+/// <reference path="./shortcut.d.ts" />
 
 module RpgCardsUI {
 
     }
 
     function select_card_by_index(index: number) {
-        if (index > -1) {
-            $("#selected-card").val("" + index);
+        var size = deck.cards.length;
+        if (size === 0) {
+            $("#selected-card").val("");
         } else {
-            $("#selected-card").val("" + (deck.cards.length - 1));
+            index = Math.min(size - 1, index);
+            index = Math.max(0, index);
+            $("#selected-card").val("" + index);
         }
         update_selected_card();
     }
 
+    function select_first_card() {
+        select_card_by_index(0);
+    }
+
+    function select_last_card() {
+        select_card_by_index(deck.cards.length - 1);
+    }
+
+    function select_next_card() {
+        select_card_by_index(selected_card_index() + 1);
+    }
+
+    function select_prev_card() {
+        select_card_by_index(selected_card_index() - 1);
+    }
+
     function select_card_by_card(card: RpgCards.Card) {
         var index = deck.cards.indexOf(card);
         select_card_by_index(index);
 
     function update_card_list() {
         deck.commit();
-        $("#total_card_count").text("Deck contains " + deck.cards.length + " unique cards.");
+        $("#total_card_count").text("This deck contains " + deck.cards.length + " unique cards.");
 
         $('#selected-card').empty();
         for (var i = 0; i < deck.cards.length; ++i) {
         setup_color_selector();
         (<any>$('.icon-list')).typeahead({ source: icon_names });
 
-
         // Menu
         $("#sort-execute").click(sort_execute);
         $("#filter-execute").click(filter_execute);
 
         $(".icon-select-button").click(select_icon);
 
+        // Shortcuts
+        var shortcut_options = { disable_in_input: true };
+        shortcut.add("ctrl+n", add_new_card, shortcut_options);
+        shortcut.add("ctrl+d", duplicate_card, shortcut_options);
+        shortcut.add("delete", delete_card, shortcut_options);
+        shortcut.add("down", select_next_card, shortcut_options);
+        shortcut.add("page_down", select_next_card, shortcut_options);
+        shortcut.add("up", select_prev_card, shortcut_options);
+        shortcut.add("page_up", select_prev_card, shortcut_options);
+        shortcut.add("home", select_first_card, shortcut_options);
+        shortcut.add("end", select_last_card, shortcut_options);
+
         update_card_list();
     }
 

generator/lib/shortcut/shortcut.js

+/**
+ * http://www.openjs.com/scripts/events/keyboard_shortcuts/
+ * Version : 2.01.B
+ * By Binny V A
+ * License : BSD
+ */
+shortcut = {
+	'all_shortcuts':{},//All the shortcuts are stored in this array
+	'add': function(shortcut_combination,callback,opt) {
+		//Provide a set of default options
+		var default_options = {
+			'type':'keydown',
+			'propagate':false,
+			'disable_in_input':false,
+			'target':document,
+			'keycode':false
+		}
+		if(!opt) opt = default_options;
+		else {
+			for(var dfo in default_options) {
+				if(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];
+			}
+		}
+
+		var ele = opt.target;
+		if(typeof opt.target == 'string') ele = document.getElementById(opt.target);
+		var ths = this;
+		shortcut_combination = shortcut_combination.toLowerCase();
+
+		//The function to be called at keypress
+		var func = function(e) {
+			e = e || window.event;
+			
+			if(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields
+				var element;
+				if(e.target) element=e.target;
+				else if(e.srcElement) element=e.srcElement;
+				if(element.nodeType==3) element=element.parentNode;
+
+				if(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;
+			}
+	
+			//Find Which key is pressed
+			if (e.keyCode) code = e.keyCode;
+			else if (e.which) code = e.which;
+			var character = String.fromCharCode(code).toLowerCase();
+			
+			if(code == 188) character=","; //If the user presses , when the type is onkeydown
+			if(code == 190) character="."; //If the user presses , when the type is onkeydown
+
+			var keys = shortcut_combination.split("+");
+			//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked
+			var kp = 0;
+			
+			//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken
+			var shift_nums = {
+				"`":"~",
+				"1":"!",
+				"2":"@",
+				"3":"#",
+				"4":"$",
+				"5":"%",
+				"6":"^",
+				"7":"&",
+				"8":"*",
+				"9":"(",
+				"0":")",
+				"-":"_",
+				"=":"+",
+				";":":",
+				"'":"\"",
+				",":"<",
+				".":">",
+				"/":"?",
+				"\\":"|"
+			}
+			//Special Keys - and their codes
+			var special_keys = {
+				'esc':27,
+				'escape':27,
+				'tab':9,
+				'space':32,
+				'return':13,
+				'enter':13,
+				'backspace':8,
+	
+				'scrolllock':145,
+				'scroll_lock':145,
+				'scroll':145,
+				'capslock':20,
+				'caps_lock':20,
+				'caps':20,
+				'numlock':144,
+				'num_lock':144,
+				'num':144,
+				
+				'pause':19,
+				'break':19,
+				
+				'insert':45,
+				'home':36,
+				'delete':46,
+				'end':35,
+				
+				'pageup':33,
+				'page_up':33,
+				'pu':33,
+	
+				'pagedown':34,
+				'page_down':34,
+				'pd':34,
+	
+				'left':37,
+				'up':38,
+				'right':39,
+				'down':40,
+	
+				'f1':112,
+				'f2':113,
+				'f3':114,
+				'f4':115,
+				'f5':116,
+				'f6':117,
+				'f7':118,
+				'f8':119,
+				'f9':120,
+				'f10':121,
+				'f11':122,
+				'f12':123
+			}
+	
+			var modifiers = { 
+				shift: { wanted:false, pressed:false},
+				ctrl : { wanted:false, pressed:false},
+				alt  : { wanted:false, pressed:false},
+				meta : { wanted:false, pressed:false}	//Meta is Mac specific
+			};
+                        
+			if(e.ctrlKey)	modifiers.ctrl.pressed = true;
+			if(e.shiftKey)	modifiers.shift.pressed = true;
+			if(e.altKey)	modifiers.alt.pressed = true;
+			if(e.metaKey)   modifiers.meta.pressed = true;
+                        
+			for(var i=0; k=keys[i],i<keys.length; i++) {
+				//Modifiers
+				if(k == 'ctrl' || k == 'control') {
+					kp++;
+					modifiers.ctrl.wanted = true;
+
+				} else if(k == 'shift') {
+					kp++;
+					modifiers.shift.wanted = true;
+
+				} else if(k == 'alt') {
+					kp++;
+					modifiers.alt.wanted = true;
+				} else if(k == 'meta') {
+					kp++;
+					modifiers.meta.wanted = true;
+				} else if(k.length > 1) { //If it is a special key
+					if(special_keys[k] == code) kp++;
+					
+				} else if(opt['keycode']) {
+					if(opt['keycode'] == code) kp++;
+
+				} else { //The special keys did not match
+					if(character == k) kp++;
+					else {
+						if(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase
+							character = shift_nums[character]; 
+							if(character == k) kp++;
+						}
+					}
+				}
+			}
+			
+			if(kp == keys.length && 
+						modifiers.ctrl.pressed == modifiers.ctrl.wanted &&
+						modifiers.shift.pressed == modifiers.shift.wanted &&
+						modifiers.alt.pressed == modifiers.alt.wanted &&
+						modifiers.meta.pressed == modifiers.meta.wanted) {
+				callback(e);
+	
+				if(!opt['propagate']) { //Stop the event
+					//e.cancelBubble is supported by IE - this will kill the bubbling process.
+					e.cancelBubble = true;
+					e.returnValue = false;
+	
+					//e.stopPropagation works in Firefox.
+					if (e.stopPropagation) {
+						e.stopPropagation();
+						e.preventDefault();
+					}
+					return false;
+				}
+			}
+		}
+		this.all_shortcuts[shortcut_combination] = {
+			'callback':func, 
+			'target':ele, 
+			'event': opt['type']
+		};
+		//Attach the function with the event
+		if(ele.addEventListener) ele.addEventListener(opt['type'], func, false);
+		else if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);
+		else ele['on'+opt['type']] = func;
+	},
+
+	//Remove the shortcut - just specify the shortcut and I will remove the binding
+	'remove':function(shortcut_combination) {
+		shortcut_combination = shortcut_combination.toLowerCase();
+		var binding = this.all_shortcuts[shortcut_combination];
+		delete(this.all_shortcuts[shortcut_combination])
+		if(!binding) return;
+		var type = binding['event'];
+		var ele = binding['target'];
+		var callback = binding['callback'];
+
+		if(ele.detachEvent) ele.detachEvent('on'+type, callback);
+		else if(ele.removeEventListener) ele.removeEventListener(type, callback, false);
+		else ele['on'+type] = false;
+	}
+}