cleanup: Remove legacy keymap
This commit is contained in:
Farkas József
149
src/app.js
149
src/app.js
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -66,11 +66,6 @@
|
||||
<i class="fa fa-chevron-up pull-right"></i>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="sidebar__level-2--item" data-name="Keymap legacy" data-abbrev="QTY">
|
||||
<div class="sidebar__level-2">
|
||||
<a [routerLink]="['/legacy', 'keymap']">Keymap HTML</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="sidebar__level-2--item " data-name="Macro legacy" data-abbrev="DVR">
|
||||
<div class="sidebar__level-2">
|
||||
<a [routerLink]="['/legacy', 'macro']">Macro</a>
|
||||
|
||||
@@ -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>
|
||||
299
src/popup.html
299
src/popup.html
@@ -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 – 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>
|
||||
@@ -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
src/script.js
974
src/script.js
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user