mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-22 00:07:03 +02:00
Adding tabs to shortcuts
This commit is contained in:
committed by
Bryan Housel
parent
5e8ad595b0
commit
8d2e2c7f9f
+127
-28
@@ -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')
|
||||
|
||||
Reference in New Issue
Block a user