uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Version on 11th October 2016

Browse Source
This commit is contained in:
Farkas József
2016-10-11 17:44:03 +02:00
parent 9317f23fb1
commit fa517e01e7
20 changed files with 24430 additions and 23719 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
app.js
View File

@@ -1,149 +0,0 @@
$(function() {
_init('.keymap--edit');
$('.notification').on('click', '.notification__dismiss', function(e) {
$('.notification').hide();
}).on('click', '.notification__action--undo', function(e) {
$('.notification').hide();
$('.sidebar__level-2--item:hidden').show().click();
});;
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
// =======================
// Menu-item functionality LEGACY TODO remove
// =======================
$('.pane-title__name, .pane-title__abbrev').on('mouseover', function() {
$(this).addClass('active');
}).on('mouseout', function() {
if (!$(this).is(':focus')) {
$(this).removeClass('active');
}
}).on('focusout', function() {
$(this).removeClass('active');
});
$('.keymap__is-default').on('click', function() {
$(this).toggleClass('fa-star-o');
});
// ========================
// Keymap related settings.
// ========================
$('button.uhk__layer-switcher').on('click', function(e) {
var button = $(this),
layerOrder = ['base', 'mod', 'fn', 'mouse'],
currentButton = $('button.uhk__layer-switcher.current'),
slideLayer = button.data('layer'),
slideNumber = layerOrder.indexOf(slideLayer),
currentSlideLayer = currentButton.data('layer'),
currentSlideNumber = layerOrder.indexOf(currentSlideLayer),
slide = $('.uhk__layer-wrapper--' + slideLayer),
currentSlide = $('.uhk__layer-wrapper.current'),
slideWidth = currentSlide.width() + 'px';
if (slideNumber < currentSlideNumber) {
// From left to right
currentSlide.css('left', 0);
slide.css('left', '-' + slideWidth);
currentSlide.animate({left: slideWidth}, function() {
$(this).removeClass('current');
});
slide.animate({left: 0}, function() {
$(this).addClass('current');
});
currentButton.removeClass('current btn-primary').addClass('btn-default');
button.addClass('current btn-primary').removeClass('btn-default').blur();
} else if (slideNumber != currentSlideNumber) {
// From right to left
currentSlide.css({left: 0});
slide.css({left: slideWidth});
currentSlide.animate({left: '-' + slideWidth}, function() {
$(this).removeClass('current');
});
slide.animate({left: 0}, function() {
$(this).addClass('current');
});
currentButton.removeClass('current btn-primary').addClass('btn-default');
button.addClass('current btn-primary').addClass('btn-default').blur();
}
});
$('.keymap__remove').on('click', function(e) {
// Mimic the removal of a keymap with undo option.
$('.sidebar__level-2--item:hidden').remove();
$('.sidebar__level-2--item.active').hide();
// Show the factory keymap after removal of a keymap.
$('.sidebar__level-2--item:first').click();
$('.notification').show();
});
// Based on: http://stackoverflow.com/a/24933495
$('img.uhk').each(function(){
var $img = $(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
var imgSelector = '.' + imgClass.replace(' ', '.')
$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = $(data).find('svg');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Check if the viewport is set, else we gonna set it if we can.
if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
$svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
}
// Replace image with new SVG
$img.replaceWith($svg);
$('.keyboard-slider').height($svg.height());
// Quick fix as jQuery 2.1.4 addClass() method is not working on SVG elements.
var finalClasses = $svg.attr('class');
$('#left-parts rect, #right-parts rect', imgSelector).on('click', function() {
var _popup = $('.key-editor__popup'),
rectB7 = $('rect#b7', $svg);
if (_popup.is(':hidden')) {
$svg.attr('class', finalClasses + ' faded');
_popup.show();
rectB7.attr('class', 'active');
} else {
$svg.attr('class', finalClasses);
_popup.hide();
rectB7.attr('class', '');
}
});
}, 'xml');
});
});
function _init(view) {
switch (view) {
case '.keymap--edit':
var h = $('.uhk--base-layer').height();
$('.keyboard-slider').height(h + 'px');
break;
}
}

2
assets/compiled_sprite.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

195
css/app.css
View File

@@ -1,195 +0,0 @@
.main-content {
margin-left: 250px; }
.sidebar-menu {
background-color: #f5f5f5;
border-right: 1px solid #ccc;
position: fixed;
overflow-y: auto;
width: 250px;
height: 100%; }
ul {
padding: 0;
margin: 0; }
ul li {
list-style: none;
padding: 0; }
.sidebar__level-1 {
padding: 0.5rem 1rem;
font-size: 2rem;
line-height: 3rem; }
.sidebar__level-1--item {
margin-top: 0; }
.sidebar__level-1--item:nth-child(1) {
margin: 0; }
.sidebar__level-1 .fa-chevron-up,
.sidebar__level-1 .fa-chevron-down {
margin-right: 1rem;
font-size: 1.5rem;
position: relative;
top: 0.5rem;
display: none; }
.sidebar__level-1:hover .fa-chevron-up,
.sidebar__level-1:hover .fa-chevron-down {
display: inline-block; }
.sidebar__level-1, .sidebar__level-2 {
padding-left: 15px; }
.sidebar__level-2 {
margin-left: 15px; }
.sidebar__level-2--item {
padding: 0 20px 0 0; }
.sidebar__level-2--item.active {
background-color: #555;
color: #fff; }
.sidebar__level-2--item.active .fa-star {
color: #fff; }
.sidebar__level-2--item.active:hover {
background-color: #555; }
.sidebar__level-2--item .fa.pull-right {
position: relative;
top: 2px; }
.sidebar__level-2--item .fa-star {
color: #666; }
.sidebar__level-1:hover, .sidebar__level-2--item:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.05); }
.menu--bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%; }
.menu--bottom .sidebar__level-1 {
background-color: transparent;
padding: 1rem; }
.pane-title {
margin-bottom: 1em; }
.pane-title__name[contenteditable=true], .pane-title__abbrev[contenteditable=true] {
border: none;
border-bottom: 2px dotted #999;
padding: 0 0.5rem;
margin: 0 0.25rem; }
.pane-title__name[contenteditable=true].active, .pane-title__abbrev[contenteditable=true].active {
box-shadow: 0 0 0 1px #ccc, 0 0 5px 0 #ccc;
border-color: transparent; }
.keymap__is-default.fa-star {
color: #333; }
.keymap__is-default.fa-star-o {
color: #333; }
.keymap__is-default:hover {
color: #555;
cursor: pointer; }
.keymap__remove {
font-size: 0.75em;
top: 0.3em; }
.keymap__remove:hover {
cursor: pointer;
color: #900; }
.notification {
padding: 1rem 1.5rem;
box-shadow: 0 0 0 1px #000;
border-radius: 0.5rem;
position: absolute;
top: 2rem;
right: 2rem;
z-index: 2000;
background-color: #333;
color: #eee; }
.notification__action {
margin-left: 1rem;
margin-right: 1rem;
color: #5bc0de;
text-transform: uppercase;
font-weight: bold; }
.notification__action:focus, .notification__action:active, .notification__action:hover {
text-decoration: none;
color: #5bc0de; }
.notification__dismiss {
position: relative;
bottom: 1px;
color: #ccc; }
.notification__dismiss:hover {
cursor: pointer;
color: #fff; }
.uhk__layer-switcher--wrapper {
position: relative; }
.uhk__layer-switcher--wrapper:before {
content: attr(data-title);
display: inline-block;
position: absolute;
bottom: -0.3em;
right: 100%;
font-size: 2.4rem;
padding-right: 0.25em;
margin: 0; }
.keyboard-slider {
position: relative;
overflow: hidden;
width: 100%;
height: auto; }
.keyboard-slider .uhk__layer-wrapper {
width: 100%;
height: auto;
text-align: center;
position: absolute;
left: 100%; }
.keyboard-slider .uhk__layer-wrapper.current {
left: 0; }
.keyboard-slider .uhk__layer-wrapper .uhk {
max-width: 100%;
width: 98%; }
.key-editor__popup {
border: none;
width: 0;
height: 0;
position: absolute;
top: 215px;
left: 50%;
margin-left: -310px; }
svg.uhk rect.active {
fill: #337ab7; }
/* GitHub ribbon */
.github-fork-ribbon {
background-color: #a00;
overflow: hidden;
white-space: nowrap;
position: fixed;
right: -50px;
bottom: 40px;
z-index: 2000;
/* stylelint-disable indentation */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: 0 0 10px #888;
-moz-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
/* stylelint-enable indentation */ }
.github-fork-ribbon a {
border: 1px solid #faa;
color: #fff;
display: block;
font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 1px 0;
padding: 10px 50px;
text-align: center;
text-decoration: none;
text-shadow: 0 0 5px #444; }

76
css/macro.css
View File

@@ -1,76 +0,0 @@
.main-wrapper {
width: 500px; }
h1 {
margin-bottom: 3rem; }
.action--item {
padding-left: 8px; }
.action--item.active,
.action--item.active:hover {
background-color: white;
font-weight: bold;
color: black;
border-color: black;
z-index: 10; }
.macro-settings {
border: 1px solid black;
border-top-color: #999;
z-index: 100; }
.macro-settings .helper {
position: absolute;
display: block;
height: 13px;
background: #fff;
width: 100%;
left: 0;
top: -14px; }
.action--item.active.callout,
.macro-settings.callout {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5); }
.list-group-item .move-handle:hover {
cursor: move; }
.action--edit {
float: right; }
.action--edit:hover {
color: #337ab7;
cursor: pointer; }
.action--trash {
float: right;
margin-right: 1rem; }
.action--trash:hover {
color: #d9534f;
cursor: pointer; }
.action--edit__form {
background-color: whtie;
margin-left: -0.5rem;
margin-right: -15px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #ddd; }
.flex-button-wrapper {
display: flex;
flex-direction: row-reverse; }
.flex-button {
align-self: flex-end; }
.add-new__action-item:hover {
cursor: pointer; }
.add-new__action-item--link,
.add-new__action-item--link:active,
.add-new__action-item--link:hover {
text-decoration: none;
color: #337ab7; }

127
css/style.css
View File

@@ -1,127 +0,0 @@
.popover {
padding: 0; }
.popover.bottom > .arrow {
border-bottom-color: #000; }
.popover.bottom > .arrow:after {
border-bottom-color: #f7f7f7; }
.popover-content {
padding: 10px 24px; }
.popover-title.menu-tabs {
padding: 0.5rem 0.5rem 0;
display: block; }
.popover-title.menu-tabs .nav-tabs {
position: relative;
top: 1px; }
.popover-title.menu-button-group {
display: none; }
.popover-actions {
padding: 8px 14px;
margin: 0;
font-size: 14px;
background-color: #f7f7f7;
border-top: 1px solid #ebebeb;
border-radius: 0 0 5px 5px;
text-align: right; }
.select2-container {
z-index: 100; }
.nav-tabs > li > a {
cursor: pointer; }
.scancode--searchterm {
color: lightgray;
float: right; }
.layout-abbreviation {
font-weight: bold;
color: #fff;
background: #333;
padding: 4px 8px;
font-family: monospace;
margin-right: 0.5em; }
.layout-preview img {
max-width: 100%;
margin-top: 10px; }
.key-editor--none__description p {
padding: 2rem 0;
margin: 0;
text-align: center; }
.select2-item {
position: relative;
font-size: 1.5rem; }
.select2-item.keymap-name--wrapper {
padding-left: 50px; }
.select2-item .layout-segment-code {
height: 2rem;
position: absolute;
left: 0;
top: 50%;
margin-top: -1rem; }
.preview-wrapper img {
max-width: 100%; }
.global-key-setup.disabled {
opacity: 0; }
.global-key-setup.disabled .setting-label {
color: #999; }
.setting-label.disabled {
color: #999; }
.global-key-setup--wrapper {
position: relative; }
.global-key-setup--wrapper .disabled-state--text {
position: absolute;
top: 50%;
margin-top: -4rem; }
.mouse.popover-content {
padding: 10px;
display: flex;
align-items: center; }
.mouse__action--type .nav {
border-right: 1px solid #ccc; }
.mouse__action--type .nav li a {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.mouse__action--type .nav li a.selected {
font-style: italic; }
.mouse__action--type .nav li.active a.selected {
font-style: normal; }
.mouse__action--type .nav li.active a:after {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
top: 0;
right: -4rem;
border-color: transparent transparent transparent #337ab7;
border-style: solid;
border-width: 2rem; }
.mouse__action--config .btn-placeholder {
visibility: hidden; }
.help-text--mouse-speed {
margin-bottom: 2rem;
font-size: 0.9em;
color: #666; }
.help-text--mouse-speed p {
margin: 0; }
.select2-results {
text-align: center; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 26px; }

126
images/icons/kbd__mouse--scroll-right.svg Normal file
View File

@@ -0,0 +1,126 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="16"
height="16"
viewBox="0 0 16 16"
id="svg5234"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="kbd__mosue--scroll-rigth.svg">
<defs
id="defs5236" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="57.6875"
inkscape:cx="8"
inkscape:cy="8"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1920"
inkscape:window-height="1144"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1" />
<metadata
id="metadata5239">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1036.3622)">
<g
id="g4447"
transform="matrix(-0.05615454,0,0,-0.05615454,16,1052.3622)"
style="overflow:visible;fill:#000000;fill-opacity:1">
<g
id="g4403"
style="fill:#000000;fill-opacity:1">
<g
id="g4405"
style="fill:#000000;fill-opacity:1">
<path
id="path4407"
d="M 165.304,142.468 277.517,30.267 c 1.902,-1.903 2.847,-4.093 2.847,-6.567 0,-2.475 -0.951,-4.665 -2.847,-6.567 L 263.239,2.857 C 261.337,0.955 259.146,0 256.676,0 c -2.478,0 -4.665,0.955 -6.571,2.857 L 117.057,135.9 c -1.903,1.903 -2.853,4.093 -2.853,6.567 0,2.475 0.95,4.664 2.853,6.567 l 133.048,133.043 c 1.903,1.906 4.086,2.851 6.564,2.851 2.478,0 4.66,-0.947 6.563,-2.851 l 14.277,-14.267 c 1.902,-1.903 2.851,-4.094 2.851,-6.57 0,-2.472 -0.948,-4.661 -2.851,-6.564 L 165.304,142.468 Z"
inkscape:connector-curvature="0"
style="fill:#000000;fill-opacity:1" />
<path
id="path4409"
d="M 55.668,142.468 167.87,30.267 c 1.903,-1.903 2.851,-4.093 2.851,-6.567 0,-2.475 -0.947,-4.665 -2.851,-6.567 L 153.6,2.857 C 151.697,0.955 149.507,0 147.036,0 c -2.478,0 -4.668,0.955 -6.57,2.857 L 7.417,135.9 c -1.903,1.903 -2.853,4.093 -2.853,6.567 0,2.475 0.95,4.664 2.853,6.567 l 133.048,133.043 c 1.902,1.906 4.09,2.851 6.57,2.851 2.471,0 4.661,-0.947 6.563,-2.851 l 14.271,-14.267 c 1.903,-1.903 2.851,-4.094 2.851,-6.57 0,-2.472 -0.947,-4.661 -2.851,-6.564 L 55.668,142.468 Z"
inkscape:connector-curvature="0"
style="fill:#000000;fill-opacity:1" />
</g>
</g>
<g
id="g4411"
style="fill:#000000;fill-opacity:1" />
<g
id="g4413"
style="fill:#000000;fill-opacity:1" />
<g
id="g4415"
style="fill:#000000;fill-opacity:1" />
<g
id="g4417"
style="fill:#000000;fill-opacity:1" />
<g
id="g4419"
style="fill:#000000;fill-opacity:1" />
<g
id="g4421"
style="fill:#000000;fill-opacity:1" />
<g
id="g4423"
style="fill:#000000;fill-opacity:1" />
<g
id="g4425"
style="fill:#000000;fill-opacity:1" />
<g
id="g4427"
style="fill:#000000;fill-opacity:1" />
<g
id="g4429"
style="fill:#000000;fill-opacity:1" />
<g
id="g4431"
style="fill:#000000;fill-opacity:1" />
<g
id="g4433"
style="fill:#000000;fill-opacity:1" />
<g
id="g4435"
style="fill:#000000;fill-opacity:1" />
<g
id="g4437"
style="fill:#000000;fill-opacity:1" />
<g
id="g4439"
style="fill:#000000;fill-opacity:1" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

2
index.html
View File

@@ -26,9 +26,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<main-app></main-app>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script> <!-- TODO remove in near future -->
<script src="vendor/sortablejs/Sortable.min.js"></script>
<script src="vendor/select2/js/select2.min.js"></script>
<script src="app.js"></script> <!-- TODO move to typescript and components -->
<script src="uhk.js"></script>
</body>
</html>

79
keymapLegacy.html
View File

@@ -1,79 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Hacking Keyboard Configurator</title>
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
<link href="css/macro.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="vendor/jquery/jquery.min.js"></script>
<script>
// This js function is here to make sure it loads before any iframe content on the page.
function resizeIframe(ifr) {
ifr.style.height = (ifr.contentWindow.document.body.scrollHeight + 300) + 'px';
ifr.style.width = ifr.contentWindow.document.body.scrollWidth + 'px';
}
</script>
</head>
<body>
<!-- Google Tag Manager -->
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-PQLCXB"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PQLCXB');
</script>
<div class="keymap--edit keymap--qwerty main-content__inner">
<div class="row">
<h1 class="col-xs-12 pane-title">
<i class="fa fa-keyboard-o"></i>
<span class="keymap__name pane-title__name" contenteditable="true">QWERTY</span> keymap (<span class="keymap__abbrev pane-title__abbrev" contenteditable="true">QTY</span>)
<i class="fa fa-star-o fa-star keymap__is-default"></i>
<i class="glyphicon glyphicon-trash keymap__remove pull-right" title="Remove keymap" data-toggle="tooltip" data-placement="left"></i>
</h1>
</div>
<div class="row">
</div>
<div class="row uhk--wrapper">
<div class="col-xs-12 text-center" style="margin-bottom: 2rem;">
<span class="uhk__layer-switcher--wrapper" role="" data-title="Layers: ">
<button type="button" data-layer="base" class="uhk__layer-switcher btn btn-primary btn-lg current">Base</button>
<button type="button" data-layer="mod" class="uhk__layer-switcher btn btn-default btn-lg">Mod</button>
<button type="button" data-layer="fn" class="uhk__layer-switcher btn btn-default btn-lg">Fn</button>
<button type="button" data-layer="mouse" class="uhk__layer-switcher btn btn-default btn-lg">Mouse</button>
</span>
</div>
<div class="col-xs-12">
<div class="keyboard-slider">
<div class="item uhk__layer-wrapper uhk__layer-wrapper--base current">
<img src="./images/base-layer.svg" class="uhk uhk--base-layer" alt="">
</div>
<div class="item uhk__layer-wrapper uhk__layer-wrapper--mod">
<img src="./images/base-layer--blank.svg" class="uhk uhk--mod-layer" alt="">
</div>
<div class="item uhk__layer-wrapper uhk__layer-wrapper--fn">
<img src="./images/base-layer--dvorak.svg" class="uhk uhk--fn-layer" alt="">
</div>
<div class="item uhk__layer-wrapper uhk__layer-wrapper--mouse">
<img src="./images/base-layer.svg" class="uhk uhk--mouse-layer" alt="">
</div>
</div>
<iframe src="popup__iframe.html" class="key-editor__popup" frameborder="0" scrolling="no" onload="resizeIframe(this)" style="display: none;"></iframe>
</div>
</div>
</div>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/sortablejs/Sortable.min.js"></script>
<script src="vendor/select2/js/select2.min.js"></script>
<script src="app.js"></script>
</body>

104
macro.html
View File

@@ -1,104 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="node_modules/select2/dist/css/select2.min.css" rel="stylesheet">
<link href="css/macro.css" rel="stylesheet">
<meta charset="utf-8">
<title>Ultimate Hacking Keyboard - Agent mockups</title>
</head>
<body style="padding: 50px;">
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PQLCXB"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PQLCXB');</script>
<!-- End Google Tag Manager -->
<h1>Ultimate Hacking Keyboard &mdash; Agent mockups</h1>
<ul class="nav nav-pills">
<li role="presentation"><a href="popup.html">Key action editor</a></li>
<li role="presentation" class="active"><a href="macro.html">Macro editor</a></li>
</ul>
<div class="main-wrapper" style="margin: 50px;">
<div class="container-fluid">
<div class="row">
<div id="listWithHandle" class="list-group col-xs-10 col-xs-offset-1">
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-mouse-pointer"></i> Move pointer by 100px leftward
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item macro-settings" style="display: none;">
<div class="helper"></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="row">
<div class="col-sm-12 flex-button-wrapper">
<button class="btn btn-primary btn-sm pull-right flex-button settings-save">Save</button>
<button class="btn btn-default btn-sm pull-right flex-button settings-cancel" style="margin-right: .5em;">Cancel</button>
</div>
</div>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-square"></i> Press letter A
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-square"></i> Press Alt+Tab
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-clock-o"></i> Delay of 235ms
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-mouse-pointer"></i> Press button 1
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-mouse-pointer"></i> Scroll by 150px downward
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item add-new__action-item no-reorder">
<a href="#" class="add-new__action-item--link"><i class="fa fa-plus"></i> Add new action item</a>
</div>
<div class="list-group-item new-macro-settings">
<div class="helper"></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="row">
<div class="col-sm-12 flex-button-wrapper">
<button class="btn btn-primary btn-sm pull-right flex-button settings-save">Save</button>
<button class="btn btn-default btn-sm pull-right flex-button settings-cancel" style="margin-right: .5em;">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/sortablejs/Sortable.js"></script>
<script src="macro.js"></script>
</body>
</html>

70
macro.js
View File

@@ -1,70 +0,0 @@
$(function() {
var macroSettingsHtml = $('.macro-settings');
var toggleSpeed = 'fast';
var notActiveOpacity = '0.75';
var newMacroHtml = $('.new-macro-settings');
// List with handle
Sortable.create(document.getElementById('listWithHandle'), {
handle: '.move-handle',
filter: '.no-reorder',
draggable: '.list-group-item',
animation: 150
});
$('.action--edit').on('click', function(e) {
var $this = $(this);
var action = $this.parent('.list-group-item');
$('.action--item.active').removeClass('callout');
macroSettingsHtml.removeClass('callout');
if (macroSettingsHtml.is(':visible') && !action.hasClass('active')) {
macroSettingsHtml.slideToggle(toggleSpeed, function() {
$('.action--item:not(.active)').css('opacity', '1');
$('.action--item.active').removeClass('active');
action.toggleClass('active');
$('.action--item:not(.active)').css('opacity', notActiveOpacity);
$(this).detach().insertAfter(action).slideToggle(toggleSpeed, function () {
action.addClass('callout');
macroSettingsHtml.addClass('callout');
});
});
}
else {
if (!macroSettingsHtml.is(':visible')) {
action.addClass('active');
}
macroSettingsHtml.detach().insertAfter(action).slideToggle(toggleSpeed, function() {
if (macroSettingsHtml.is(':visible')) {
$('.action--item:not(.active)').css('opacity', notActiveOpacity);
action.addClass('callout');
macroSettingsHtml.addClass('callout');
}
else {
$('.action--item:not(.active)').css('opacity', '1');
action.removeClass('active');
}
});
}
});
$('.flex-button', '.macro-settings').on('click', function() {
$('.action--item.active .action--edit').click();
});
$('.flex-button', '.new-macro-settings').on('click', function() {
newMacroHtml.slideToggle(toggleSpeed, function() {
newMacroHtml.hide().detach();
});
});
$('.add-new__action-item').on('click', function() {
newMacroHtml.insertAfter($(this));
newMacroHtml.slideToggle(toggleSpeed);
});
// Detach and remove this item only after all event listhere has been registered on it.
newMacroHtml.hide().detach();
});

97
macroLegacy.html
View File

@@ -1,97 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Hacking Keyboard Configurator</title>
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
<link href="css/macro.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="vendor/jquery/jquery.min.js"></script>
</head>
<body>
<div class="macro--edit main-content__inner">
<div class="row">
<h1 class="col-xs-12 pane-title">
<i class="fa fa-play"></i>
<span class="macro__name pane-title__name" contenteditable="true">Macro1</span> <i class="fa"></i>
</h1>
</div>
<div class="row">
<div id="listWithHandle" class="list-group col-xs-10 col-xs-offset-1">
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-mouse-pointer"></i> Move pointer by 100px leftward
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item macro-settings" style="display: none;">
<div class="helper"></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.</p>
<div class="row">
<div class="col-sm-12 flex-button-wrapper">
<button class="btn btn-primary btn-sm pull-right flex-button settings-save">Save</button>
<button class="btn btn-default btn-sm pull-right flex-button settings-cancel" style="margin-right: .5em;">Cancel</button>
</div>
</div>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-square"></i> Press letter A
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-square"></i> Press Alt+Tab
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-clock-o"></i> Delay of 235ms
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-mouse-pointer"></i> Press button 1
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-mouse-pointer"></i> Scroll by 150px downward
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item add-new__action-item no-reorder">
<a href="#" class="add-new__action-item--link"><i class="fa fa-plus"></i> Add new action item</a>
</div>
<div class="list-group-item new-macro-settings">
<div class="helper"></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.</p>
<div class="row">
<div class="col-sm-12 flex-button-wrapper">
<button class="btn btn-primary btn-sm pull-right flex-button settings-save">Save</button>
<button class="btn btn-default btn-sm pull-right flex-button settings-cancel" style="margin-right: .5em;">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/sortablejs/Sortable.min.js"></script>
<script src="vendor/select2/js/select2.min.js"></script>
<script src="macro.js"></script>
</body>
</html>

299
popup.html
View File

@@ -1,299 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/select2/css/select2.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<meta charset="utf-8">
<title>Ultimate Hacking Keyboard - Agent mockups</title>
</head>
<body style="padding:50px">
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PQLCXB"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PQLCXB');</script>
<!-- End Google Tag Manager -->
<h1>Ultimate Hacking Keyboard &ndash; Agent mockups</h1>
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="popup.html">Key action editor</a></li>
<li role="presentation"><a href="macro.html">Macro editor</a></li>
</ul>
<!--
Basic structure of the popover to be used with the Handlebars templates.
-->
<div class="popover bottom" style="display: inline-block; min-width: 541px; margin: 50px; position: relative;">
<div class="arrow"></div>
<div class="container-fluid">
<div class="row">
<div id="key-editor-top__target"></div>
</div>
<div class="row">
<div id="key-editor-content__target"></div>
</div>
<div class="row">
<div id="key-editor-bottom__target"></div>
</div>
</div>
</div>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/handlebars/handlebars.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/select2/js/select2.min.js"></script>
<script src="script.js"></script>
<!--
Handlebars templates for the common parts of the popover.
-->
<!-- Popover titlebar (where the tabs resides). -->
<script id="key-editor-top__source" type="text/x-handlebars-template">
<div class="popover-title menu-button-group">
Action:
<div class="btn-group popover-menu" role="group" aria-label="...">
{{#each buttons}}
<button class="btn btn-sm btn-{{type}}" data-content="{{content}}" type="button"><i class="fa {{icon}}"></i> {{title}}</button>
{{/each}}
</div>
</div>
<div class="popover-title menu-tabs">
<ul class="nav nav-tabs popover-menu">
{{#each buttons}}
<li role="presentation"><a href="#" class="menu-tabs--item" data-content="{{content}}"><i class="fa {{icon}}"></i> {{title}}</a></li>
{{/each}}
</ul>
</div>
</script>
<!-- Popover footer. -->
<script id="key-editor-bottom__source" type="text/x-handlebars-template">
<div class="popover-actions">
<button class="btn btn-sm btn-default" type="button">Cancel</button>
<button class="btn btn-sm btn-primary" type="button">Remap key</button>
</div>
</script>
<!--
Handlebars templates for the contents of the popover tabs.
-->
<!-- Keypress action. -->
<script id="key-editor-content__source--keypress" type="text/x-handlebars-template">
<div class="popover-content" style="margin-bottom:2px">
<!-- Layer selection. -->
<div style="margin-bottom: 10px;">
<b class="setting-label">Layer action:</b>
<div class="btn-group btn-group-sm layer-action--buttons">
{{#each layers}}
<button type="button" class="btn btn-default {{primary}} {{class}}">{{name}}</button>
{{/each}}
</div>
</div>
<hr>
<div class="global-key-setup--wrapper">
<div class="global-key-setup">
<!-- Primary action setup: scancode+modifiers. -->
<div class="scancode-options">
<b class="setting-label" style="position:relative; top:-9px; margin-right:4px;">Modifiers:</b>
<div class="btn-toolbar modifiers" style="display:inline-block">
<div class="btn-group btn-group-sm modifiers__left">
{{#each modifiers.left}}
<button type="button" class="btn btn-default {{primary}}">{{name}}</button>
{{/each}}
</div>
<div class="btn-group btn-group-sm modifiers__right">
{{#each modifiers.right}}
<button type="button" class="btn btn-default {{primary}}">{{name}}</button>
{{/each}}
</div>
</div>
</div>
<div class="scancode-options" style="margin-bottom:10px; margin-top:2px">
<b class="setting-label" style="position:relative; top:2px;">Scancode:</b>
<select class="scancode" style="width: 200px">
{{#each scancode}}
<optgroup label="{{groupName}}">
{{#each groupValues}}
<option value="{{value}}" data-explanation="{{dataExplanation}}">{{label}}</option>
{{/each}}
</optgroup>
{{/each}}
</select>
<!-- bof optional -->
<!-- Icon for switching the keyboard layout preview when capturing. -->
<!-- <i class="fa fa-eye pull-right" style="margin: 0 0 0 2rem; position: relative; top: 0.65rem;" data-toggle="tooltip" data-placement="bottom" title="Show preview keyboard."></i> -->
<!-- eof optional -->
<button style="display: block; margin: 0 0 0 2rem;" type="button" class="btn btn-sm btn-default pull-right btn--capture-keystroke btn--capture-keystroke__start">
<i class="fa fa-circle" style="color:#c00"></i> Capture keystroke
</button>
<button style="display: none; margin: 0 0 0 2rem;" type="button" class="btn btn-sm btn-info pull-right btn--capture-keystroke btn--capture-keystroke__stop">
<i class="fa fa-square"></i> Stop capturing
</button>
</div>
<!-- bof optional -->
<!-- Keyboard layout preview to be shown in capturing mode. -->
<!--
<div class="preview-wrapper">
<img src="images/base-layer.svg" />
</div>
-->
<!-- eof optional -->
<!-- Secondary action setup: long press action. -->
<div style="margin-top: 3rem;">
<b class="setting-label" style="position:relative;">Long press action:</b>
<select class="secondary-role" style="width:135px">
{{#each secondaryRole}}
<option value="{{name}}">{{name}}</option>
{{/each}}
</select>
<i class="fa fa-question-circle" style="margin-left:5px" data-toggle="tooltip" data-placement="right" title="When you press and hold the key."></i>
</div>
</div>
<!-- Informational text to display when a layer action is selected. -->
<div class="disabled-state--text" style="display: none; color: #31708f; padding-right: 40px;">
<i class="fa fa-info-circle" style="font-size: 2.6rem; float: left; padding: 1rem 1.5rem 2rem;"></i>
When a key is configured as layer switcher key, you can't assign other functions to it.
To assign a scancode to the key, set the <em>Layer action</em> to <em>None</em>.
</div>
</div>
</div>
</script>
<!-- Mouse action. -->
<script id="key-editor-content__source--mouse" type="text/x-handlebars-template">
<div class="popover-content" style="margin-bottom:2px">
<div class="row" style="padding-bottom: 1rem;">
<div class="col-xs-6 mouse-action__card" style="">
<b class="col-xs-12 text-center" style="margin-bottom: .5rem;">Move</b>
<div class="buttons-row row">
<button type="button" class="btn btn-default col-xs-2 col-xs-push-5"><i class="fa fa-arrow-up"></i></button>
</div>
<div class="buttons-row row">
<button type="button" class="btn btn-default col-xs-2 col-xs-push-3"><i class="fa fa-arrow-left"></i></button>
<button type="button" class="btn btn-default col-xs-2 col-xs-push-5"><i class="fa fa-arrow-right"></i></button><br>
</div>
<div class="buttons-row row">
<button type="button" class="btn btn-default col-xs-2 col-xs-push-5"><i class="fa fa-arrow-down"></i></button>
</div>
</div>
<div class="col-xs-6 mouse-action__card">
<b class="col-xs-12 text-center" style="margin-bottom: .5rem;">Scroll</b>
<div class="buttons-row row">
<button type="button" class="btn btn-default col-xs-2 col-xs-push-5"><i class="fa fa-arrow-up"></i></button>
</div>
<div class="buttons-row row">
<button type="button" class="btn btn-default col-xs-2 col-xs-push-3"><i class="fa fa-arrow-left"></i></button>
<button type="button" class="btn btn-default col-xs-2 col-xs-push-5"><i class="fa fa-arrow-right"></i></button><br>
</div>
<div class="buttons-row row">
<button type="button" class="btn btn-default col-xs-2 col-xs-push-5"><i class="fa fa-arrow-down"></i></button>
</div>
</div>
</div>
<div class="row" style="margin-top: 1rem;">
<div class="col-xs-6 mouse-action__card" style="">
<b class="col-xs-12 text-center" style="margin-bottom: .5rem;">Click</b>
<div class="btn-group col-xs-12" role="group">
<button type="button" class="btn btn-default col-xs-4">Left</button>
<button type="button" class="btn btn-default col-xs-4">Middle</button>
<button type="button" class="btn btn-default col-xs-4">Right</button>
</div>
</div>
<div class="col-xs-6 mouse-action__card">
<b class="col-xs-12 text-center" style="margin-bottom: .5rem;">Speed</b>
<div class="btn-group col-xs-12" role="group">
<button type="button" class="btn btn-default col-xs-6"><i class="fa fa-angle-double-down"></i> decelerate</button>
<button type="button" class="btn btn-default col-xs-6">accelerate <i class="fa fa-angle-double-up"></i></button>
</div>
</div>
</div>
</div>
</script>
<!-- Macro action. -->
<script id="key-editor-content__source--macro" type="text/x-handlebars-template">
<div class="popover-content" style="margin-bottom:2px">
<div style="margin-bottom:0px; margin-top:2px">
<b style="">Macro:</b>
<select class="macro-selector" style="width:402px">
{{#each macros}}
<option value="{{value}}" data-abbrev="{{abbrev}}" data-abbrev-image="{{dataAbbrevImage}}" data-image="{{dataImage}}">{{name}}</option>
{{/each}}
</select>
</div>
<div class="macro-preview" style="opacity: .35;">
<div class="list-group" style="margin-top: 20px;">
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-square"></i> Press a key
<i class="glyphicon glyphicon-pencil action--edit pull-right"></i>
<i class="glyphicon glyphicon-trash action--trash pull-right" style="margin-right: 1rem;"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-clock-o"></i> Wait some time
<i class="glyphicon glyphicon-pencil action--edit pull-right"></i>
<i class="glyphicon glyphicon-trash action--trash pull-right" style="margin-right: 1rem;"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-mouse-pointer"></i> Move mouse
<i class="glyphicon glyphicon-pencil action--edit pull-right"></i>
<i class="glyphicon glyphicon-trash action--trash pull-right" style="margin-right: 1rem;"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-square"></i> Press and hold a key
<i class="glyphicon glyphicon-pencil action--edit pull-right"></i>
<i class="glyphicon glyphicon-trash action--trash pull-right" style="margin-right: 1rem;"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-mouse-pointer"></i> Click with mouse
<i class="glyphicon glyphicon-pencil action--edit pull-right"></i>
<i class="glyphicon glyphicon-trash action--trash pull-right" style="margin-right: 1rem;"></i>
</div>
</div>
</div>
</div>
</script>
<!-- Switch keymap action. -->
<script id="key-editor-content__source--switchKeymap" type="text/x-handlebars-template">
<div class="popover-content" style="margin-bottom:2px">
<div style="margin-bottom:0px; margin-top:2px">
<b style="">Keymap:</b>
<select class="layout-switcher" style="width:402px">
{{#each layouts}}
<option value="{{value}}" data-abbrev="{{abbrev}}" data-abbrev-image="{{dataAbbrevImage}}" data-image="{{dataImage}}">{{name}}</option>
{{/each}}
</select>
</div>
<div class="layout-preview">
<img src="images/base-layer--blank.svg" />
</div>
</div>
</script>
<!-- None action. -->
<script id="key-editor-content__source--none" type="text/x-handlebars-template">
<div class="key-editor--none__description col-sm-12">
<i class="icon fa fa-ban"></i>
<p class="col-sm-12">This key will be unassigned and will have no functionality at all.</p>
</div>
</script>
</body>
</html>

294
popup__iframe.html
View File

@@ -1,294 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/select2/css/select2.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<meta charset="utf-8">
<title>Ultimate Hacking Keyboard - Agent mockups</title>
</head>
<body style="background-color: transparent; width: 581px; text-align: center; padding: 0 20px 20px;">
<!--
Basic structure of the popover to be used with the Handlebars templates.
-->
<div class="popover bottom" style="display: inline-block; min-width: 577px; position: relative;">
<div class="arrow"></div>
<div class="container-fluid">
<div class="row">
<div id="key-editor-top__target"></div>
</div>
<div class="row">
<div id="key-editor-content__target"></div>
</div>
<div class="row">
<div id="key-editor-bottom__target"></div>
</div>
</div>
</div>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/handlebars/handlebars.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/select2/js/select2.min.js"></script>
<script src="script.js"></script>
<!--
Handlebars templates for the common parts of the popover.
-->
<!-- Popover titlebar (where the tabs resides). -->
<script id="key-editor-top__source" type="text/x-handlebars-template">
<div class="popover-title menu-button-group">
Action:
<div class="btn-group popover-menu" role="group" aria-label="...">
{{#each buttons}}
<button class="btn btn-sm btn-{{type}}" data-content="{{content}}" type="button"><i class="fa {{icon}}"></i> {{title}}</button>
{{/each}}
</div>
</div>
<div class="popover-title menu-tabs">
<ul class="nav nav-tabs popover-menu">
{{#each buttons}}
<li role="presentation">
<a href="#" class="menu-tabs--item" data-content="{{content}}">
<i class="fa {{icon}}"></i> {{title}}
</a>
</li>
{{/each}}
</ul>
</div>
</script>
<!-- Popover footer. -->
<script id="key-editor-bottom__source" type="text/x-handlebars-template">
<div class="popover-actions">
<button class="btn btn-sm btn-default" type="button">Cancel</button>
<button class="btn btn-sm btn-primary" type="button">Remap key</button>
</div>
</script>
<!--
Handlebars templates for the contents of the popover tabs.
-->
<!-- Keypress action. -->
<script id="key-editor-content__source--keypress" type="text/x-handlebars-template">
<div class="popover-content" style="margin-bottom:2px">
<div class="global-key-setup--wrapper">
<div class="global-key-setup">
<!-- Primary action setup: scancode+modifiers. -->
<div class="scancode-options" style="margin-bottom:10px; margin-top:2px">
<b class="setting-label" style="position:relative; top:2px;">Scancode:</b>
<select class="scancode" style="width: 200px">
{{#each scancode}}
<optgroup label="{{groupName}}">
{{#each groupValues}}
<option value="{{scancode}}" data-searchterm="{{searchTerm}}">{{label}}</option>
{{/each}}
</optgroup>
{{/each}}
</select>
<!-- bof optional -->
<!-- Icon for switching the keyboard layout preview when capturing. -->
<!-- <i class="fa fa-eye pull-right" style="margin: 0 0 0 2rem; position: relative; top: 0.65rem;" data-toggle="tooltip" data-placement="bottom" title="Show preview keyboard."></i> -->
<!-- eof optional -->
<button style="display: inline-block; margin: 0 0 0 .25rem;" type="button" class="btn btn-sm btn-default btn--capture-keystroke btn--capture-keystroke__start">
<i class="fa fa-circle" style="color:#c00"></i> Capture keystroke
</button>
<button style="display: none; margin: 0 0 0 .25rem;" type="button" class="btn btn-sm btn-info btn--capture-keystroke btn--capture-keystroke__stop">
<i class="fa fa-square"></i> Stop capturing
</button>
</div>
<div class="scancode-options">
<b class="setting-label" style="position:relative; top:-9px; margin-right:4px;">Modifiers:</b>
<div class="btn-toolbar modifiers" style="display:inline-block">
<div class="btn-group btn-group-sm modifiers__left">
{{#each modifiers.left}}
<button type="button" class="btn btn-default {{primary}}">{{name}}</button>
{{/each}}
</div>
<div class="btn-group btn-group-sm modifiers__right">
{{#each modifiers.right}}
<button type="button" class="btn btn-default {{primary}}">{{name}}</button>
{{/each}}
</div>
</div>
</div>
<!-- bof optional -->
<!-- Keyboard layout preview to be shown in capturing mode. -->
<!--
<div class="preview-wrapper">
<img src="images/base-layer.svg" />
</div>
-->
<!-- eof optional -->
<!-- Secondary action setup: long press action. -->
<div style="margin-top: 3rem;">
<b class="setting-label" style="position:relative;">Long press action:</b>
<select class="secondary-role" style="width:135px">
{{#each secondaryRole}}
{{#if groupName}}
<optgroup label="{{groupName}}">
{{/if}}
{{#each groupValues}}
<option value="{{value}}">{{label}}</option>
{{/each}}
{{#if groupName}}
</optgroup>
{{/if}}
{{/each}}
</select>
<i class="fa fa-question-circle" style="margin-left:5px" data-toggle="tooltip" data-placement="right" title="This action happens when the key is being held along with another key."></i>
</div>
</div>
<!-- Informational text to display when a layer action is selected. -->
<div class="disabled-state--text" style="display: none; color: #31708f; padding-right: 40px;">
<i class="fa fa-info-circle" style="font-size: 2.6rem; float: left; padding: 1rem 1.5rem 2rem;"></i>
When a key is configured as layer switcher key, you can't assign other functions to it.
To assign a scancode to the key, set the <em>Layer action</em> to <em>None</em>.
</div>
</div>
</div>
</script>
<!-- Layer modifier/togge action. -->
<script id="key-editor-content__source--layer" type="text/x-Handlebars-template">
<div class="popover-content" style="margin-bottom:2px">
<div style="margin-bottom:0px; margin-top:2px">
<select class="layer-toggle" style="width: 100px">
<option value="activate">Activate</option>
<option value="toggle">Toggle</option>
</select>
<span> the </span>
<select class="layer-switcher" style="width: 100px">
<option value="mod">Mod</option>
<option value="fn">Fn</option>
<option value="mouse">Mouse</option>
</select>
<span>layer by <span class="layer-help">holding</span><span class="layer-help" style="display: none;">pressing</span> this key.</span>
</div>
</div>
</script>
<!-- Mouse action. -->
<script id="key-editor-content__source--mouse" type="text/x-handlebars-template">
<div class="popover-content mouse row" style="margin-bottom:2px">
<div class="col-xs-4 mouse__action--type">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#" data-config="move">Move</a></li>
<li role="presentation"><a href="#" data-config="scroll">Scroll</a></li>
<li role="presentation"><a href="#" data-config="click">Click</a></li>
<li role="presentation"><a href="#" data-config="speed">Speed</a></li>
</ul>
</div>
<div class="col-xs-8 mouse__action--config">
<div class="mouse__config mouse__config--move text-center">
<div class="row">
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-arrow-up"></i></button>
</div>
<div class="row">
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-arrow-left"></i></button>
<button type="button" class="btn btn-default btn-lg btn-placeholder"><i class="fa fa-square"></i></button>
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-arrow-right"></i></button>
</div>
<div class="row">
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-arrow-down"></i></button>
</div>
</div>
<div style="display: none;" class="mouse__config mouse__config--scroll text-center">
<div class="row">
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-angle-double-up"></i></button>
</div>
<div class="row">
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-angle-double-left"></i></button>
<button type="button" class="btn btn-default btn-lg btn-placeholder"><i class="fa fa-square"></i></button>
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-angle-double-right"></i></button>
</div>
<div class="row">
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-angle-double-down"></i></button>
</div>
</div>
<div style="display: none;" class="mouse__config mouse__config--click">
<div class="btn-group col-xs-12" role="group">
<button type="button" class="btn btn-default col-xs-4">Left</button>
<button type="button" class="btn btn-default col-xs-4">Middle</button>
<button type="button" class="btn btn-default col-xs-4">Right</button>
</div>
</div>
<div style="display: none;" class="mouse__config mouse__config--speed text-center">
<div class="help-text--mouse-speed text-left">
<p>Press this key along with mouse movement/scrolling to accelerate/decelerate the speed of the action.</p>
<p>You can set the multiplier in <a href="#" title="link to the setting">link to setting</a>.</p>
</div>
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-default">-</button>
<button type="button" class="btn btn-default">+</button>
</div>
</div>
</div>
</div>
</script>
<!-- Macro action. -->
<script id="key-editor-content__source--macro" type="text/x-handlebars-template">
<div class="popover-content" style="margin-bottom:2px">
<div style="margin-bottom:0px; margin-top:2px">
<b style="">Play macro:</b>
<select class="macro-selector" style="width:402px">
{{#each macros}}
<option value="{{value}}" data-abbrev="{{abbrev}}" data-abbrev-image="{{dataAbbrevImage}}" data-image="{{dataImage}}">{{name}}</option>
{{/each}}
</select>
</div>
<div class="macro-preview" style="opacity: .35;">
<div class="list-group" style="margin-top: 20px;">
<div class="list-group-item action--item">
<i class="fa fa-square"></i> Press a key
</div>
<div class="list-group-item action--item">
<i class="fa fa-clock-o"></i> Wait some time
</div>
<div class="list-group-item action--item">
<i class="fa fa-mouse-pointer"></i> Move mouse
</div>
<div class="list-group-item action--item">
<i class="fa fa-square"></i> Press and hold a key
</div>
<div class="list-group-item action--item">
<i class="fa fa-mouse-pointer"></i> Click with mouse
</div>
</div>
</div>
</div>
</script>
<!-- Switch keymap action. -->
<script id="key-editor-content__source--switchKeymap" type="text/x-handlebars-template">
<div class="popover-content" style="margin-bottom:2px">
<div style="margin-bottom:0px; margin-top:2px">
<b style="">Switch to keymap:</b>
<select class="layout-switcher" style="width:390px">
{{#each layouts}}
<option value="{{value}}" data-abbrev="{{abbrev}}" data-abbrev-image="{{dataAbbrevImage}}" data-image="{{dataImage}}">{{name}}</option>
{{/each}}
</select>
</div>
<div class="layout-preview">
<img src="images/base-layer--blank.svg" />
</div>
</div>
</script>
<!-- None action. -->
<script id="key-editor-content__source--none" type="text/x-handlebars-template">
<div class="key-editor--none__description col-sm-12">
<p class="col-sm-12">This key is unassigned and has no functionality.</p>
</div>
</script>
</body>
</html>

974
script.js
View File

File diff suppressed because it is too large Load Diff

45512
uhk.js
View File

File diff suppressed because one or more lines are too long

2
uhk.js.map
View File

File diff suppressed because one or more lines are too long

29
vendor/handlebars/handlebars.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
vendor/jquery/jquery.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
vendor/jquery/jquery.min.map vendored
View File

File diff suppressed because one or more lines are too long

2
vendor/sortablejs/Sortable.min.js vendored
View File

File diff suppressed because one or more lines are too long