Adding tabs to shortcuts

This commit is contained in:
Kushan Joshi
2017-02-09 22:32:40 +05:30
committed by Bryan Housel
parent 5e8ad595b0
commit 8d2e2c7f9f
5 changed files with 227 additions and 80 deletions
+127 -28
View File
@@ -2,16 +2,109 @@ import * as d3 from 'd3';
import { uiCmd } from './cmd';
import { uiModal } from './modal';
import { d3keybinding } from '../lib/d3.keybinding.js';
import shortcuts from '../../data/shortcuts.json';
import { t } from '../util/locale';
import { shortcuts as shortcutsData } from '../../data';
export function uiShortcuts(context) {
var key = uiCmd('⇧/');
var activeTab = 0;
function shortcuts(selection) {
if (!d3.selectAll('.modal').empty()) return;
var modalSelection;
function render(selection) {
var wrapper = selection
.selectAll('.wrapper')
.data([0]);
var wrapperEnter = wrapper
.enter()
.append('div')
.attr('class', 'wrapper');
var tabsBar = wrapperEnter
.append('div')
.attr('class', 'tabs-bar');
var shortcutsList = wrapperEnter
.append('div')
.attr('class', 'shortcuts-list');
wrapper = wrapper.merge(wrapperEnter);
var tabs = tabsBar
.selectAll('.tab')
.data(shortcutsData);
var tabsEnter = tabs
.enter()
.append('div')
.attr('class', 'tab')
.on('click', function (d, i) {
activeTab = i;
render(selection);
});
tabsEnter
.append('span')
.text(function (d) { return t(d.desc); });
tabs = tabs
.merge(tabsEnter);
// Update
wrapper.selectAll('.tab')
.classed('active', function (d, i) {
return i === activeTab;
});
var shortcuts = shortcutsList
.selectAll('.shortcut-tab')
.data(shortcutsData);
var shortcutsEnter = shortcuts
.enter()
.append('div')
.attr('class', 'shortcut-tab')
.on('click', function (d, i) {
activeTab = i;
render(selection);
});
var row = shortcutsEnter
.selectAll('.shortcut-row')
.data(function (d) { return d.shortcuts; })
.enter()
.append('div')
.attr('class', 'shortcut-row');
var shortcutsRow = row
.append('div')
.attr('class', 'kbd-row col6');
shortcutsRow
.selectAll('kbd')
.data(function (d) { return d.shortcut; })
.enter().append('kbd')
.text(function (d) { return uiCmd(d); });
var description = row
.append('div')
.attr('class', 'shorctut-desc col6')
.text(function (d) { return t(d.key); });
shortcuts = shortcuts
.merge(shortcutsEnter);
wrapper.selectAll('.shortcut-tab')
.style('display', function (d, i) {
return i === activeTab ? 'block' : 'none';
});
}
function show() {
if (!d3.selectAll('.modal').empty()) return;
var modalSelection = uiModal(selection);
modalSelection = uiModal(selection);
modalSelection.select('.modal')
.attr('class', 'modal fillL col6');
@@ -19,7 +112,7 @@ export function uiShortcuts(context) {
var shortcutsModal = modalSelection.select('.content');
shortcutsModal
.attr('class','cf');
.attr('class', 'cf modal-shortcuts');
shortcutsModal
.append('div')
@@ -27,35 +120,41 @@ export function uiShortcuts(context) {
.append('h3')
.text('Keyboard shortcuts');
var section = shortcutsModal
.selectAll('section')
.data(shortcuts)
.enter().append('section')
.attr('class', 'modal-section modal-shortcuts cf');
// var wrap = shortcutsModal.selectAll('.wrapper')
// - .data([0]);
section
.append('h4')
.text(function(d) { return d.desc; });
// wrap = wrap.enter()
// .append('div')
// .attr('class', 'preset-input-wrap')
// .merge(wrap);
shortcutsModal.call(render);
var p = section
.selectAll('p')
.data(function(d) { return d.shortcuts; })
.enter().append('p');
var shortcuts = p
.append('span')
.attr('class', 'col4');
// section
// .append('h4')
// .text(function(d) { return t(d.desc); });
shortcuts
.selectAll('kbd')
.data(function(d) { return d.shortcut; })
.enter().append('kbd')
.text(function(d) { return uiCmd(d); });
// var row = section
// .selectAll('.shortcut-row')
// .data(function(d) { return d.shortcuts; })
// .enter()
// .append('div')
// .attr('class', 'shortcut-row');
var description = p
.append('span')
.attr('class', 'col8')
.text(function(d) { return t('shortcuts.' });
// var shortcuts = row
// .append('div')
// .attr('class', 'kbd-row col4');
// shortcuts
// .selectAll('kbd')
// .data(function(d) { return d.shortcut; })
// .enter().append('kbd')
// .text(function(d) { return uiCmd(d); });
// var description = row
// .append('div')
// .attr('class', 'shorctut-desc col6')
// .text(function(d) { return t(d.key); });
}
var keybinding = d3keybinding('shortcuts')