From 47ed430847bab5851aa4a0115c10860a37f22bc8 Mon Sep 17 00:00:00 2001 From: Arpad Csanyi Date: Thu, 14 Jan 2016 00:45:19 +0100 Subject: [PATCH] Initial commit of the Keypress action editor's mockup. --- index.html | 289 ++++++++++++++++++++++++++++++++++++++ script.js | 397 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 121 ++++++++++++++++ 3 files changed, 807 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..9ef6017f --- /dev/null +++ b/index.html @@ -0,0 +1,289 @@ + + + + + + + + + Ultimate Hacking Keyboard - Agent mockups + + + +

Ultimate Hacking Keyboard – Agent mockups

+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 00000000..36cf76f3 --- /dev/null +++ b/script.js @@ -0,0 +1,397 @@ +$(function() { + // General configuration for popover contents. + var contentContext = { + keypress: { + layers: [ + { + name: 'None', + class: 'layer-key layer-key--disabled', + primary: 'btn-primary' + }, + { + name: 'Mod', + class: 'layer-key layer-key--mod', + primary: '' + }, + { + name: 'Fn', + class: 'layer-key layer-key--fn', + primary: '' + }, + { + name: 'Mouse', + class: 'layer-key layer-key--mouse', + primary: '' + } + ], + modifiers: { + left: [ + { + name: 'LShift', + primary: 'btn-primary' + }, + { + name: 'LCtrl', + primary: '' + }, + { + name: 'LSuper', + primary: '' + }, + { + name: 'LAlt', + primary: 'btn-primary' + } + ], + right: [ + { + name: 'RShift', + primary: '' + }, + { + name: 'RCtrl', + primary: '' + }, + { + name: 'RSuper', + primary: '' + }, + { + name: 'RAlt', + primary: '' + } + ] + }, + scancode: [ + { + groupName: 'Letters', + groupValues: [ + { + value: 'A', + dataExplanation: '', + label: 'A' + }, + { + value: 'B', + dataExplanation: '', + label: 'B' + }, + { + value: 'C', + dataExplanation: '', + label: 'C' + } + ] + }, + { + groupName: 'Numbers', + groupValues: [ + { + value: '1', + dataExplanation: '', + label: '1' + }, + { + value: '2', + dataExplanation: '', + label: '2' + }, + { + value: '3', + dataExplanation: '', + label: '3' + } + ] + }, + { + groupName: 'Punctuation', + groupValues: [ + { + value: '.', + dataExplanation: 'dot', + label: '.' + }, + { + value: ',', + dataExplanation: 'comma', + label: ',' + }, + { + value: '!', + dataExplanation: 'exclamation mark', + label: '!' + } + ] + }, + { + groupName: 'Other', + groupValues: [ + { + value: 'Tab', + dataExplanation: '', + label: 'Tab' + }, + { + value: 'Enter', + dataExplanation: '', + label: 'Enter' + } + ] + } + ], + secondaryRole: [ + { + name: 'None' + }, + { + name: 'LShift' + }, + { + name: 'LCtrl' + }, + { + name: 'LSuper' + }, + { + name: 'LAlt' + }, + { + name: 'RAlt' + }, + { + name: 'RSuper' + }, + { + name: 'RCtrl' + }, + { + name: 'RShift' + }, + { + name: 'Mod' + }, + { + name: 'Mouse' + }, + { + name: 'Fn' + }, + ] + }, + macro: { + macros: [ + { + value: 'Select macro', + name: 'Select macro' + }, + { + value: 'Latex custom equation', + name: 'Latex custom equation' + }, + { + value: 'Process shops xml', + name: 'Process shops xml' + }, + ] + }, + changeKeymap: { + layouts: [ + { + value: 'Select keymap', + name: 'Select keymap', + dataImage: 'base-layer--blank.svg', + abbrev: '', + dataAbbrevImage: '' + }, + { + value: 'Factory keymap', + name: 'Factory keymap', + dataImage: 'base-layer.svg', + abbrev: 'QWE', + dataAbbrevImage: 'segments_qwe.svg' + }, + { + value: 'Dvorak', + name: 'Dvorak', + dataImage: 'base-layer--dvorak.svg', + abbrev: 'DVR', + dataAbbrevImage: 'segments_dvr.svg' + } + ] + } + }; + + // Handlebars template for Popover top. + var keyEditorTopSource = $('#key-editor-top__source').html(); + var keyEditorTopTemplate = Handlebars.compile(keyEditorTopSource); + var keyEditorTopContext = { + buttons: [ + { + type: 'primary', + icon: 'fa-keyboard-o', + title: 'Keypress', + content: 'keypress' + }, + { + type: 'default', + icon: 'fa-mouse-pointer', + title: 'Mouse', + content: 'mouse' + }, + { + type: 'default', + icon: 'fa-play', + title: 'Macro', + content: 'macro' + }, + { + type: 'default', + icon: 'fa-keyboard-o', + title: 'Change keymap', + content: 'changeKeymap' + }, + { + type: 'default', + icon: 'fa-times', + title: 'None', + content: 'none' + } + ] + }; + $('#key-editor-top__target').html(keyEditorTopTemplate(keyEditorTopContext)); + + // Handlebars template for Popover bottom. + var keyEditorBottomSource = $('#key-editor-bottom__source').html(); + var keyEditorBottomTemplate = Handlebars.compile(keyEditorBottomSource); + var keyEditorBottomContext = {}; + $('#key-editor-bottom__target').html(keyEditorBottomTemplate(keyEditorBottomContext)); + + // Handlebars template for Popover content to be displayed by default. + var keyEditorContentSource = $('#key-editor-content__source--keypress').html(); + var keyEditorContentTemplate = Handlebars.compile(keyEditorContentSource); + $('#key-editor-content__target').html(keyEditorContentTemplate(contentContext.keypress)); + + + // ================================ + // General library initializations. + // ================================ + + // Init select2. + $('select').select2({ + templateResult: formatState + }); + + // Init tooltips. + $('[data-toggle="tooltip"]').tooltip() + + // Init popover-title tabs. + $('li:first', '.popover-title.menu-tabs').addClass('active'); + + + // =============== + // Event handlers. + // =============== + + $('.popover-menu').on('click', 'button', function() { + $('.btn-primary', '.popover-menu').removeClass('btn-primary').addClass('btn-default'); + $(this).addClass('btn-primary').blur(); + var tplName = $(this).data('content'); + var contentSource = $('#key-editor-content__source--' + tplName).html(); + var contentTemplate = Handlebars.compile(contentSource); + $('#key-editor-content__target').html(contentTemplate(contentContext[tplName])); + initSelect2items(); + }); + + $('.popover-menu').on('click', 'a.menu-tabs--item', function() { + $('.popover-menu.nav-tabs li.active').removeClass('active'); + $(this).parent('li').addClass('active'); + var tplName = $(this).data('content'); + var contentSource = $('#key-editor-content__source--' + tplName).html(); + var contentTemplate = Handlebars.compile(contentSource); + $('#key-editor-content__target').html(contentTemplate(contentContext[tplName])); + initSelect2items(); + }); + + $('.modifiers').on('click', 'button', function() { + $(this).toggleClass('btn-primary').blur(); + }); + + $('.btn--capture-keystroke').on('click', function(e) { + $('.btn--capture-keystroke').toggle(); + _toggleScancodeForm(); + }); + + $('.layer-action--buttons').on('click', '.layer-key', function(e) { + console.log('helllo'); + $this = $(this); + $('.layer-key.btn-primary', '.layer-action--buttons').removeClass('btn-primary'); + $this.addClass('btn-primary').blur(); + if ($this.hasClass('layer-key--disabled')) { + // Enable all form controls in .global-key-setup + $('button, select', '.global-key-setup').prop('disabled', false); + $('.global-key-setup').removeClass('disabled'); + $('.disabled-state--text').hide(); + } + else { + // Disable all form controls in .global-key-setup + $('button, select', '.global-key-setup').prop('disabled', true); + $('.global-key-setup').addClass('disabled'); + $('.disabled-state--text').show(); + } + }); +}); + + +// ========================== +// Select2 related functions. +// ========================== + +function initSelect2items() { + $('select').select2({ + templateResult: formatState + }); + + $('select').on('select2:select', function(e) { + var selected = $(e.params.data.element); + var image = selected.data('image'); + console.log(e, selected, image); + $('img', '.layout-preview').attr('src', 'images/' + image); + }); + + $('.layout-switcher').on('select2:open', function(e) { + $('.layout-preview').css('opacity', '0.1'); + }).on('select2:close', function(e) { + $('.layout-preview').css('opacity', '1'); + }); +} + +function formatState(state) { + if (!state.id) { return state.text; } + var dataExplanation = $(state.element).data('explanation'); + var dataAbbrev = $(state.element).data('abbrev'); + var dataAbbrevImage = $(state.element).data('abbrev-image'); + var $state = $('' + state.text + '') + if (dataExplanation != '' && typeof dataExplanation != 'undefined') { + $(' (' + dataExplanation + ')').appendTo($state); + } + if (dataAbbrevImage != '' && typeof dataAbbrevImage != 'undefined') { + $('') + .attr('src', 'images/' + dataAbbrevImage) + .attr('class', 'layout-segment-code') + .prependTo($state); + $state.addClass('keymap-name--wrapper'); + } + return $state; +} + + +// =============== +// Misc functions. +// =============== + +function _toggleScancodeForm() { + var disabledState = $('.btn--capture-keystroke__stop').is(':visible'); + $('button', '.modifiers__left, .modifiers__right').prop('disabled', disabledState); + $('select.scancode').prop('disabled', disabledState); + $('b', '.scancode-options').toggleClass('disabled'); +} diff --git a/style.css b/style.css new file mode 100644 index 00000000..d0d89a15 --- /dev/null +++ b/style.css @@ -0,0 +1,121 @@ +h1 { + margin-bottom: 3rem; +} + +.popover { + padding: 0; +} + +.popover-content { + padding: 10px 24px; +} + +.popover-title.menu-tabs { + padding: .5rem .5rem 0; + display: block; +} + +.popover-title.menu-button-group { + display: none; +} + +.popover-title.menu-tabs .nav-tabs { + position: relative; + top: 1px; +} + +.popover.bottom > .arrow:after { + border-bottom-color: #f7f7f7; +} + +.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: 100000; +} + +.scancode--explanation { + color: lightgray; + float: right; +} + +.layout-abbreviation { + font-weight: bold; + color: #FFF; + background: #333; + padding: 4px 8px; + font-family: monospace; + margin-right: .5em; +} + +.layout-preview img { + max-width: 100%; + margin-top: 10px; +} + +.key-editor--none__description p { + padding: 2rem 0; + margin: 0; + text-align: center; + font-style: italic; + color: #999; +} + +.key-editor--none__description .icon { + font-size: 5rem; + color: #feefef; + position: absolute; + z-index: 0; + left: 50%; + margin-left: -2.5rem; + top: 50%; + margin-top: -2.5rem; +} + +.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: .15; +} + +.global-key-setup.disabled .setting-label, +.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; +}