From 4c274f4cfb1690b13f32ee307d71780c1db9cffb Mon Sep 17 00:00:00 2001 From: Mike Perham Date: Tue, 8 Sep 2015 14:09:11 -0700 Subject: [PATCH] Implement Web UI keyboard shortcuts, #2540 Needs: JS concat --- Changes.md | 3 +- lib/sidekiq/web.rb | 12 + web/assets/javascripts/jquery.chaves.js | 133 +++++++++++ web/assets/javascripts/keymaster.js | 296 ++++++++++++++++++++++++ web/assets/stylesheets/application.css | 54 +++++ web/views/_nav.erb | 8 +- web/views/layout.erb | 14 ++ 7 files changed, 515 insertions(+), 5 deletions(-) create mode 100644 web/assets/javascripts/jquery.chaves.js create mode 100644 web/assets/javascripts/keymaster.js diff --git a/Changes.md b/Changes.md index b97100e6..78b1774c 100644 --- a/Changes.md +++ b/Changes.md @@ -1,6 +1,7 @@ -Next +HEAD ----------- +- Web UI now has keyboard shortcuts, hit '?' to see them. [#2540] - Add middleware stack to testing harness; see [wiki documentation](https://github.com/mperham/sidekiq/wiki/Testing#testing-server-middleware) [#2534, ryansch] 3.5.0 diff --git a/lib/sidekiq/web.rb b/lib/sidekiq/web.rb index bf2b8406..5f04f0c8 100644 --- a/lib/sidekiq/web.rb +++ b/lib/sidekiq/web.rb @@ -30,6 +30,18 @@ module Sidekiq "Dead" => 'morgue', } + SHORTCUTS = { + 'Dashboard' => 'h', + 'Busy' => 'b', + 'Queues' => 'q', + 'Retries' => 'r', + 'Scheduled' => 's', + 'Dead' => 'd', + 'Limits' => 'l', + 'Batches' => 'a', + 'Cron' => 'c', + } + class << self def default_tabs DEFAULT_TABS diff --git a/web/assets/javascripts/jquery.chaves.js b/web/assets/javascripts/jquery.chaves.js new file mode 100644 index 00000000..30a8bee9 --- /dev/null +++ b/web/assets/javascripts/jquery.chaves.js @@ -0,0 +1,133 @@ +// Generated by CoffeeScript 1.3.3 +(function() { + + $.fn.extend({ + chaves: function(options) { + var self; + self = $.fn.chaves; + options = $.extend({}, self.default_options, options); + return $(this).each(function(i, el) { + return self.init(el, options); + }); + } + }); + + $.extend($.fn.chaves, { + version: '0.1.1', + default_options: { + activeClass: 'active', + bindings: [], + childSelector: '> *', + className: 'jquery-chaves', + enableUpDown: false, + helpModalClass: 'jquery-chaves-help', + linkSelector: 'a:first', + scope: 'all', + searchSelector: '.search,\ + #search,\ + input[type="search"],\ + input[type="text"][value*="earch"],\ + input[type="text"][placeholder*="earch"]' + }, + init: function(el, options) { + var addToHelp, clickActive, downkeys, goDown, goUp, hideHelp, register_all_bindings, searchFocus, showHelp, upkeys, + _this = this; + this.options = options; + this.bindings = $.extend([], options.bindings); + this.el = $(el).addClass(options.className); + this.children = this.el.find(options.childSelector); + this.active = this.children.first().addClass(options.activeClass); + this.index = 0; + this.help = this.findOrCreateHelp(); + downkeys = 'j'; + upkeys = 'k'; + if (options.enableUpDown) { + downkeys += ", down"; + upkeys += ", up"; + } + register_all_bindings = function() { + var binding, _i, _len, _ref, _results; + _ref = _this.bindings; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + binding = _ref[_i]; + key(binding[0], _this.options.scope, binding[2]); + _results.push(addToHelp(binding[0], binding[1])); + } + return _results; + }; + addToHelp = function(keys, description) { + return _this.help.find('dl').append("
" + keys + "
" + description + "
"); + }; + goUp = function() { + var prev; + if (_this.index > 0) { + _this.index = _this.index - 1; + prev = $(_this.children[_this.index]).addClass(_this.options.activeClass); + _this.active.removeClass(_this.options.activeClass); + _this.active = prev; + return _this.readjust(150); + } + }; + goDown = function() { + var next; + if (_this.index < _this.children.length - 1) { + _this.index = _this.index + 1; + next = $(_this.children[_this.index]).addClass(_this.options.activeClass); + _this.active.removeClass(_this.options.activeClass); + _this.active = next; + return _this.readjust(0); + } + }; + showHelp = function() { + return _this.help.toggleClass('visible'); + }; + hideHelp = function() { + return _this.help.removeClass('visible'); + }; + searchFocus = function() { + _this.search = $(_this.options.searchSelector); + return window.setTimeout((function() { + return _this.search.focus(); + }), 10); + }; + clickActive = function() { + var link; + link = _this.active.find(_this.options.linkSelector); + if (link.trigger('click').attr('target') === '_blank') { + return window.open(link.attr('href'), 'popped'); + } else { + return window.location.href = link.attr('href'); + } + }; + this.bindings.push(['/', 'Focus on filter.', searchFocus]); + this.bindings.push(['shift+/', 'Toggle help dialog.', showHelp]); + this.bindings.push(['esc', 'Close help dialog.', hideHelp]); + return register_all_bindings(); + }, + readjust: function(buffer) { + var top; + if (this.elementOutOfViewport(this.active[0])) { + top = this.active.offset().top - buffer; + return $(window).scrollTop(top).trigger('scroll'); + } + }, + elementOutOfViewport: function(el) { + var rect; + if (el) { + rect = el.getBoundingClientRect(); + return !(rect.top >= 0 && rect.left >= 0 && rect.bottom <= window.innerHeight && rect.right <= window.innerWidth); + } + }, + findOrCreateHelp: function() { + var help, helpSelector; + helpSelector = "." + this.options.helpModalClass; + if (!$(helpSelector).length) { + $('body').append("
"); + help = $(helpSelector).append('

Keyboard Shortcuts

'); + } + return $(helpSelector); + } + }); + +}).call(this); diff --git a/web/assets/javascripts/keymaster.js b/web/assets/javascripts/keymaster.js new file mode 100644 index 00000000..8f5b5fc5 --- /dev/null +++ b/web/assets/javascripts/keymaster.js @@ -0,0 +1,296 @@ +// keymaster.js +// (c) 2011-2013 Thomas Fuchs +// keymaster.js may be freely distributed under the MIT license. + +;(function(global){ + var k, + _handlers = {}, + _mods = { 16: false, 18: false, 17: false, 91: false }, + _scope = 'all', + // modifier keys + _MODIFIERS = { + '⇧': 16, shift: 16, + '⌥': 18, alt: 18, option: 18, + '⌃': 17, ctrl: 17, control: 17, + '⌘': 91, command: 91 + }, + // special keys + _MAP = { + backspace: 8, tab: 9, clear: 12, + enter: 13, 'return': 13, + esc: 27, escape: 27, space: 32, + left: 37, up: 38, + right: 39, down: 40, + del: 46, 'delete': 46, + home: 36, end: 35, + pageup: 33, pagedown: 34, + ',': 188, '.': 190, '/': 191, + '`': 192, '-': 189, '=': 187, + ';': 186, '\'': 222, + '[': 219, ']': 221, '\\': 220 + }, + code = function(x){ + return _MAP[x] || x.toUpperCase().charCodeAt(0); + }, + _downKeys = []; + + for(k=1;k<20;k++) _MAP['f'+k] = 111+k; + + // IE doesn't support Array#indexOf, so have a simple replacement + function index(array, item){ + var i = array.length; + while(i--) if(array[i]===item) return i; + return -1; + } + + // for comparing mods before unassignment + function compareArray(a1, a2) { + if (a1.length != a2.length) return false; + for (var i = 0; i < a1.length; i++) { + if (a1[i] !== a2[i]) return false; + } + return true; + } + + var modifierMap = { + 16:'shiftKey', + 18:'altKey', + 17:'ctrlKey', + 91:'metaKey' + }; + function updateModifierKey(event) { + for(k in _mods) _mods[k] = event[modifierMap[k]]; + }; + + // handle keydown event + function dispatch(event) { + var key, handler, k, i, modifiersMatch, scope; + key = event.keyCode; + + if (index(_downKeys, key) == -1) { + _downKeys.push(key); + } + + // if a modifier key, set the key. property to true and return + if(key == 93 || key == 224) key = 91; // right command on webkit, command on Gecko + if(key in _mods) { + _mods[key] = true; + // 'assignKey' from inside this closure is exported to window.key + for(k in _MODIFIERS) if(_MODIFIERS[k] == key) assignKey[k] = true; + return; + } + updateModifierKey(event); + + // see if we need to ignore the keypress (filter() can can be overridden) + // by default ignore key presses if a select, textarea, or input is focused + if(!assignKey.filter.call(this, event)) return; + + // abort if no potentially matching shortcuts found + if (!(key in _handlers)) return; + + scope = getScope(); + + // for each potential shortcut + for (i = 0; i < _handlers[key].length; i++) { + handler = _handlers[key][i]; + + // see if it's in the current scope + if(handler.scope == scope || handler.scope == 'all'){ + // check if modifiers match if any + modifiersMatch = handler.mods.length > 0; + for(k in _mods) + if((!_mods[k] && index(handler.mods, +k) > -1) || + (_mods[k] && index(handler.mods, +k) == -1)) modifiersMatch = false; + // call the handler and stop the event if neccessary + if((handler.mods.length == 0 && !_mods[16] && !_mods[18] && !_mods[17] && !_mods[91]) || modifiersMatch){ + if(handler.method(event, handler)===false){ + if(event.preventDefault) event.preventDefault(); + else event.returnValue = false; + if(event.stopPropagation) event.stopPropagation(); + if(event.cancelBubble) event.cancelBubble = true; + } + } + } + } + }; + + // unset modifier keys on keyup + function clearModifier(event){ + var key = event.keyCode, k, + i = index(_downKeys, key); + + // remove key from _downKeys + if (i >= 0) { + _downKeys.splice(i, 1); + } + + if(key == 93 || key == 224) key = 91; + if(key in _mods) { + _mods[key] = false; + for(k in _MODIFIERS) if(_MODIFIERS[k] == key) assignKey[k] = false; + } + }; + + function resetModifiers() { + for(k in _mods) _mods[k] = false; + for(k in _MODIFIERS) assignKey[k] = false; + }; + + // parse and assign shortcut + function assignKey(key, scope, method){ + var keys, mods; + keys = getKeys(key); + if (method === undefined) { + method = scope; + scope = 'all'; + } + + // for each shortcut + for (var i = 0; i < keys.length; i++) { + // set modifier keys if any + mods = []; + key = keys[i].split('+'); + if (key.length > 1){ + mods = getMods(key); + key = [key[key.length-1]]; + } + // convert to keycode and... + key = key[0] + key = code(key); + // ...store handler + if (!(key in _handlers)) _handlers[key] = []; + _handlers[key].push({ shortcut: keys[i], scope: scope, method: method, key: keys[i], mods: mods }); + } + }; + + // unbind all handlers for given key in current scope + function unbindKey(key, scope) { + var multipleKeys, keys, + mods = [], + i, j, obj; + + multipleKeys = getKeys(key); + + for (j = 0; j < multipleKeys.length; j++) { + keys = multipleKeys[j].split('+'); + + if (keys.length > 1) { + mods = getMods(keys); + } + + key = keys[keys.length - 1]; + key = code(key); + + if (scope === undefined) { + scope = getScope(); + } + if (!_handlers[key]) { + return; + } + for (i = 0; i < _handlers[key].length; i++) { + obj = _handlers[key][i]; + // only clear handlers if correct scope and mods match + if (obj.scope === scope && compareArray(obj.mods, mods)) { + _handlers[key][i] = {}; + } + } + } + }; + + // Returns true if the key with code 'keyCode' is currently down + // Converts strings into key codes. + function isPressed(keyCode) { + if (typeof(keyCode)=='string') { + keyCode = code(keyCode); + } + return index(_downKeys, keyCode) != -1; + } + + function getPressedKeyCodes() { + return _downKeys.slice(0); + } + + function filter(event){ + var tagName = (event.target || event.srcElement).tagName; + // ignore keypressed in any elements that support keyboard data input + return !(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA'); + } + + // initialize key. to false + for(k in _MODIFIERS) assignKey[k] = false; + + // set current scope (default 'all') + function setScope(scope){ _scope = scope || 'all' }; + function getScope(){ return _scope || 'all' }; + + // delete all handlers for a given scope + function deleteScope(scope){ + var key, handlers, i; + + for (key in _handlers) { + handlers = _handlers[key]; + for (i = 0; i < handlers.length; ) { + if (handlers[i].scope === scope) handlers.splice(i, 1); + else i++; + } + } + }; + + // abstract key logic for assign and unassign + function getKeys(key) { + var keys; + key = key.replace(/\s/g, ''); + keys = key.split(','); + if ((keys[keys.length - 1]) == '') { + keys[keys.length - 2] += ','; + } + return keys; + } + + // abstract mods logic for assign and unassign + function getMods(key) { + var mods = key.slice(0, key.length - 1); + for (var mi = 0; mi < mods.length; mi++) + mods[mi] = _MODIFIERS[mods[mi]]; + return mods; + } + + // cross-browser events + function addEvent(object, event, method) { + if (object.addEventListener) + object.addEventListener(event, method, false); + else if(object.attachEvent) + object.attachEvent('on'+event, function(){ method(window.event) }); + }; + + // set the handlers globally on document + addEvent(document, 'keydown', function(event) { dispatch(event) }); // Passing _scope to a callback to ensure it remains the same by execution. Fixes #48 + addEvent(document, 'keyup', clearModifier); + + // reset modifiers to false whenever the window is (re)focused. + addEvent(window, 'focus', resetModifiers); + + // store previously defined key + var previousKey = global.key; + + // restore previously defined key and return reference to our key object + function noConflict() { + var k = global.key; + global.key = previousKey; + return k; + } + + // set window.key and window.key.set/get/deleteScope, and the default filter + global.key = assignKey; + global.key.setScope = setScope; + global.key.getScope = getScope; + global.key.deleteScope = deleteScope; + global.key.filter = filter; + global.key.isPressed = isPressed; + global.key.getPressedKeyCodes = getPressedKeyCodes; + global.key.noConflict = noConflict; + global.key.unbind = unbindKey; + + if(typeof module !== 'undefined') module.exports = assignKey; + +})(this); diff --git a/web/assets/stylesheets/application.css b/web/assets/stylesheets/application.css index a832143c..bda0a6f5 100755 --- a/web/assets/stylesheets/application.css +++ b/web/assets/stylesheets/application.css @@ -744,3 +744,57 @@ div.interval-slider input { max-width: 350px; } } + +.jquery-chaves-help { + width: 250px; + position: fixed; + left: 50%; + top: 20%; + padding: 15px 0px; + margin-left: -110px; + margin-top: -200px; + background: white; + display: none; + border: 3px solid #efefef; + border-radius: 5px; + box-shadow: 0 0 18px rgba(0,0,0,0.4); + z-index: 9000; + font-family: Helvetica,arial,freesans,clean,sans-serif; +} + +.jquery-chaves-help h3 { + border-bottom: 1px solid #DDD; + margin: 0 0 20px; + padding: 5px 20px 10px; + font-size: 16px; + font-weight: bold; +} +.jquery-chaves-help dl { + padding: 0 20px; + margin: 0; +} +.jquery-chaves-help dt { + display: inline-block; + font-size: 11px; + margin: 0 0 15px 0; + padding: 3px 6px; + min-width: 10px; + text-align: center; + font-family: Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace; + background: #333; + color: #EEE; + border-radius: 2px; + text-shadow: 1px 1px 0 black; +} +.jquery-chaves-help dd { + display: inline; + margin: 0 0 0 10px; + font-size: 13px; +} +.jquery-chaves-help dd:after { + content: '\A'; + white-space: pre; +} +.jquery-chaves-help.visible { + display: block; +} diff --git a/web/views/_nav.erb b/web/views/_nav.erb index e7c3da1c..88a3ccf2 100644 --- a/web/views/_nav.erb +++ b/web/views/_nav.erb @@ -23,11 +23,11 @@ <% Sidekiq::Web.default_tabs.each do |title, url| %> <% if url == '' %>
  • - <%= t(title) %> + <%= t(title) %>
    • <% else %>
  • - <%= t(title) %> + <%= t(title) %>
    • <% end %> <% end %> @@ -39,7 +39,7 @@ @@ -47,7 +47,7 @@ <% Sidekiq::Web.custom_tabs.each do |title, url| %>
  • - <%= t(title) %> + <%= t(title) %>
    • <% end %> diff --git a/web/views/layout.erb b/web/views/layout.erb index 86447612..df365745 100644 --- a/web/views/layout.erb +++ b/web/views/layout.erb @@ -7,6 +7,8 @@ + + <%= display_custom_head %> @@ -27,5 +29,17 @@ <%= erb :_footer %> <%= erb :_poll_js %> +