easyHotkey

by KwangPil Hong

HTML

<h1>Easy hotkey plugin - press Alt + Ctrl</h1>
<h3>a tag with img</h3>
<div class="btn d1">
<a href="#" onclick="alert('a1')"><img src="https://www.gravatar.com/avatar/d752e54241f7282c2456e23d8157ac6c/?default=&s=80" /></a>
<a href="#" onclick="alert('a2')"><img src="https://www.gravatar.com/avatar/d752e54241f7282c2456e23d8157ac6c/?default=&s=80" /></a>
<a href="#" onclick="alert('a3')"><img src="https://www.gravatar.com/avatar/d752e54241f7282c2456e23d8157ac6c/?default=&s=80" /></a>
</div>
<h3>input:button tag</h3>
<div class="btn d2">
<input type="button" value="input1" onclick="alert($(this).val())" />
<input type="button" value="input2" onclick="alert($(this).val())" />
<input type="button" value="input3" onclick="alert($(this).val())" />
</div>
<h3>button tag</h3>
<div class="btn d3">
<button onclick="alert($(this).text())">button1</button>
<button onclick="alert($(this).text())">button2</button>
<button onclick="alert($(this).text())">button3</button>
</div>

SCSS

.d2 {
  a, input[type=button], button {
    width:120px; height: 50px;
  }
}
.d3 {
  a, input[type=button], button {
    width:50px; height: 25px;
  }
}

JavaScript

/************************************************************************
@Name 		:   easyHotkey - jQuery Plugin
@description:	쉬운 단축키 사용.
@Revison 	:   1.0
@Date 		: 	2015-08-31
@Author		:   Hong, Kwang Pil 
@use		:	
	$('*[onclick]').easyHotkey();
*************************************************************************/
(function($) {
	$.fn.easyHotkey = function(options) 
	{
		var sKeys = {
			"CTRL" : 17, "ALT" : 18, "SHIFT" : 16,
			"ENTER" : 13,
			"SPACE" : 32,
			"TAB" : 9,
			"ESC" : 27,
			"BACKSPACE" : 8,
			"N_1": 49, "N_2": 50, "N_3": 51, "N_4": 52, "N_5": 53, "N_6": 54, "N_7": 55, "N_8": 55, "N_9": 56,
			"A":65, "B":66, "C":67, "D":68, "E":69
		};
		
		var option = $.extend({
			
			cssKey : "hotkey_disp",
			shape : "circle",
			bgColor : "#ff0000",
			fontColor : "#ffffff",
			size : "20px",
			side : "left",
			
			getDiameter : function() {
				return parseInt(this.size);
			},
			getRadius : function() {
				return parseInt(this.size) / 2;
			}
		}, options);

		// 단축키 등록 타겟 엘리먼트 반환 - 추후 기능 확장을 위해 함수로 만들어놓음.
		var $root = $(this);
		var $target = function() {
			return $root;
		};
		
		// CSS 생성/등록
		var createCSS = function() {
			var css = "<style>."+option.cssKey+" {" +
			"position:absolute;" +
			"font-weight:bolder;" +
			"font-size: " + parseInt(option.getDiameter() * 2 / 3) + "px;" +
			"color:"+option.fontColor+";" +
			"text-align:center;" +
			"line-height:"+option.size+";" +
			"height: "+option.size+";" +
			"width: "+option.size+";" +
			"background-color: "+option.bgColor+";" +
			"-webkit-border-radius: "+option.getRadius()+"px;" +
			"-moz-border-radius: "+option.getRadius()+"px;  " +
			"border-radius: "+option.getRadius()+"px;" +
			"}</style> ";
			
			$('head').append(css);
		};
		
		// 단축키 엘리먼트 생성
		var makeHotkey = function(e, text) {
			var obj = e.offset();
			var width = e.width();
			var left = '';
			
			switch(option.side) {
			case 'left':
				if(width < option.getDiameter()) {
					left =...