Add shortcut keys

This commit is contained in:
Merricx 2017-05-14 02:51:29 +07:00
parent 8069a29fed
commit d4143f5c00
8 changed files with 150 additions and 5 deletions

View file

@ -63,6 +63,7 @@
<a href="misc/index.html"><li>Miscellaneous</li></a>
<ul class="help-menu hide">
<a href="misc/qr-code-samples.html"><li>QR Code samples</li></a>
<a href="misc/shortcut-keys.html"><li>Shortcut Keys</li></a>
<a href="misc/license.html"><li>Third-Party &amp; License</li></a>
</ul>
</ul>
@ -100,6 +101,7 @@
<br>
<h4><a href="misc/index.html">Miscellaneous</a></h4>
<p><a href="misc/qr-code-samples.html">QR Code samples</a></p>
<p><a href="misc/shortcut-keys.html">Shortcut Keys</a></p>
<p><a href="misc/license.html">Third-Party &amp; License</a></p>
</div>
<br>

View file

@ -32,6 +32,7 @@ var sidebarMenu =
<a href="../misc/index.html"><li>Miscellaneous</li></a>\
<ul class="help-menu hide">\
<a href="../misc/qr-code-samples.html"><li>QR Code samples</li></a>\
<a href="../misc/shortcut-keys.html"><li>Shortcut Keys</li></a>\
<a href="../misc/license.html"><li>Third-Party &amp; License</li></a>\
</ul>\
</ul>';

View file

@ -44,7 +44,8 @@
<br>
<ul>
<li><p><b><a href="qr-code-samples.html">QR Code Samples</a></b></p></li>
<li><p><b><a href="qr-code-samples.html">Third Party and License</a></b></p></li>
<li><p><b><a href="shortcut-keys.html">Shortcut Keys</a></b></p></li>
<li><p><b><a href="license.html">Third Party and License</a></b></p></li>
</ul>
<div class="space"></div>
<div class="nav">

View file

@ -38,7 +38,7 @@
<div class="help">
<div class="breadcrumbs noselect">
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> <a href="../index.html">Miscellaneous</a> <span>&rsaquo;</span> Third-Party &amp; License</h6>
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> <a href="index.html">Miscellaneous</a> <span>&rsaquo;</span> Third-Party &amp; License</h6>
</div>
<h2>Third-Party &amp; License</h2>
@ -67,7 +67,7 @@
<br><br>
<div class="space"></div>
<div class="nav">
<button class="left" onclick="window.location='index.html';">Prev : QR Code Samples</button>
<button class="left" onclick="window.location='shortcut-keys.html';">Prev : Shortcut Keys</button>
</div>
<div class="clear"></div>
<div class="space"></div>

View file

@ -56,7 +56,7 @@
<div class="help">
<div class="breadcrumbs noselect">
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> <a href="../index.html">Miscellaneous</a> <span>&rsaquo;</span> QR Code Samples</h6>
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> <a href="index.html">Miscellaneous</a> <span>&rsaquo;</span> QR Code Samples</h6>
</div>
<h2>QR Code Samples</h2>
@ -97,7 +97,7 @@
<div class="space"></div>
<div class="nav">
<button class="left" onclick="window.location='index.html';">Prev : Miscellaneous</button>
<button class="right" onclick="window.location='license.html';">Next : Third Party &amp; License</button>
<button class="right" onclick="window.location='shortcut-keys.html';">Next : Shortcut Keys</button>
</div>
<div class="clear"></div>
<div class="space"></div>

View file

@ -0,0 +1,88 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../css/style.css">
<link rel="icon" href="../../img/icon.png">
<title>QRazyBox - Help Page</title>
</head>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.mark.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<style type="text/css">
.sample-box {
float: left;
margin: 25px;
}
.sample-box img {
max-height: 200px;
width: auto;
border: solid 2px #000;
cursor: pointer;
}
.sample-box img:hover {
opacity: .85;
}
</style>
<body style="background:white;">
<div class="header noselect">
<div class="left">
<img src="../../img/icon.png" class="icon">
<h3>QRazyBox Help</h3>
</div>
<div class="right">
<div class="search">
<img src="../../img/search.png">
<input type="text" placeholder="Search here...">
</div>
<img src="../../img/bars.png" class="menu-bar">
</div>
</div>
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
<div style="height:80px;"></div>
<div id="help-menu">
</div>
</div>
<div class="help">
<div class="breadcrumbs noselect">
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> <a href="index.html">Miscellaneous</a> <span>&rsaquo;</span> Shortcut Keys</h6>
</div>
<h2>Shortcut Keys</h2>
<br>
<p>This is list of shortcut keys that can be used as alternate way to do various commands.</p>
<br>
<p><b>Q</b> &ensp; : Black color palette</p>
<p><b>W</b> &ensp; : White color palette</p>
<p><b>E</b> &ensp; : Grey color palette</p>
<p><b>G</b> &ensp; : Toggle flood fill</p>
<br>
<p><b>-</b> &ensp; : Zoom out (-5px module size)</p>
<p><b>=</b> &ensp; : Zoom in (+5px module size)</p>
<br>
<p><b>Z</b> &ensp; : Undo (move to previous <i>history</i>)</p>
<p><b>X</b> &ensp; : Redo (move to next <i>history</i>)</p>
<br>
<p><b>TAB</b> &ensp; : Switch working mode</p>
<div class="clear"></div>
<div class="space"></div>
<div class="nav">
<button class="left" onclick="window.location='qr-code-samples.html';">Prev : QR Code Samples</button>
<button class="right" onclick="window.location='license.html';">Next : Third Party &amp; License</button>
</div>
<div class="clear"></div>
<div class="space"></div>
</div>
</body>
</html>

View file

@ -106,6 +106,7 @@
<a href="misc/index.html"><li>Miscellaneous</li></a>
<ul class="help-menu hide">
<a href="misc/qr-code-samples.html"><li>QR Code samples</li></a>
<a href="misc/shortcut-keys.html"><li>Shortcut Keys</li></a>
<a href="misc/license.html"><li>Third-Party &amp; License</li></a>
</ul>
</ul>

View file

@ -1819,6 +1819,58 @@ $(document).ready(function(){
}
})
$(document).keydown(function(e){
if(!$("input[type=text], textarea").is(":focus") && !$("#tools-extract").hasClass("active")){
//Shortcut key : Tab
if(e.keyCode == 9){
e.preventDefault();
$("#btn-switch-mode").trigger("click");
}
//Shortcut key : -
else if(e.keyCode == 173){
$("#btn-size-min").trigger("click");
}
//Shortcut key : =
else if(e.keyCode == 61){
$("#btn-size-plus").trigger("click");
}
//Shortcut key : Q
else if(e.keyCode == 81){
$("#painter-black").trigger("click");
}
//Shortcut key : W
else if(e.keyCode == 87){
$("#painter-white").trigger("click");
}
//Shortcut key : E
else if(e.keyCode == 69){
$("#painter-eraser").trigger("click");
}
//Shortcut key : G
else if(e.keyCode == 71){
$("#painter-fill").trigger("click");
}
//Shortcut key : Z
else if(e.keyCode == 90){
$(".history div.active").next().trigger("click");
}
//Shortcut key : X
else if(e.keyCode == 88){
$(".history div.active").prev().trigger("click");
}
}
})
//Prevent page from closing
window.onbeforeunload = function(){
if(changed_state)