mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-30 03:39:36 +02:00
Make rtl compatible
and minor refactor
This commit is contained in:
committed by
Bryan Housel
parent
957c75a7cc
commit
d45063dd69
+128
-129
@@ -3,142 +3,141 @@ import { uiCmd } from './cmd';
|
||||
import { uiModal } from './modal';
|
||||
import { d3keybinding } from '../lib/d3.keybinding.js';
|
||||
import { t } from '../util/locale';
|
||||
import { shortcuts as shortcutsData } from '../../data';
|
||||
import { dataShortcuts } from '../../data';
|
||||
|
||||
export function uiShortcuts() {
|
||||
var key = '⇧/';
|
||||
var activeTab = 0;
|
||||
var modalSelection;
|
||||
var savedSelection;
|
||||
var keybinding = d3keybinding('shortcuts')
|
||||
.on(key, function () {
|
||||
if (modalSelection) {
|
||||
modalSelection.close();
|
||||
modalSelection = null;
|
||||
return;
|
||||
}
|
||||
modalSelection = uiModal(savedSelection);
|
||||
shortcutsModal(modalSelection);
|
||||
});
|
||||
|
||||
function shortcuts(selection) {
|
||||
var modalSelection;
|
||||
d3.select(document)
|
||||
.call(keybinding);
|
||||
|
||||
function shortcutsModal(modalSelection) {
|
||||
modalSelection.select('.modal')
|
||||
.attr('class', 'modal modal-shortcuts fillL col6');
|
||||
|
||||
function show() {
|
||||
modalSelection = uiModal(selection);
|
||||
var shortcutsModal = modalSelection.select('.content');
|
||||
|
||||
modalSelection.select('.modal')
|
||||
.attr('class', 'modal fillL col6');
|
||||
|
||||
var shortcutsModal = modalSelection.select('.content');
|
||||
|
||||
shortcutsModal
|
||||
.attr('class', 'cf modal-shortcuts');
|
||||
|
||||
shortcutsModal
|
||||
.append('div')
|
||||
.attr('class', 'modal-section')
|
||||
.append('h3')
|
||||
.text('Keyboard shortcuts');
|
||||
|
||||
shortcutsModal
|
||||
.call(render);
|
||||
}
|
||||
|
||||
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');
|
||||
|
||||
shortcutsRow
|
||||
.selectAll('kbd')
|
||||
.data(function (d) { return d.shortcut; })
|
||||
.enter()
|
||||
.append('kbd')
|
||||
.text(function (d) { return uiCmd(d); });
|
||||
|
||||
row
|
||||
.append('div')
|
||||
.attr('class', 'shortcut-desc')
|
||||
.text(function (d) { return t(d.key); });
|
||||
|
||||
shortcuts = shortcuts
|
||||
.merge(shortcutsEnter);
|
||||
|
||||
// Update
|
||||
wrapper.selectAll('.shortcut-tab')
|
||||
.style('display', function (d, i) {
|
||||
return i === activeTab ? 'flex' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
var keybinding = d3keybinding('shortcuts')
|
||||
.on(key, function () {
|
||||
if (modalSelection) {
|
||||
modalSelection.close();
|
||||
modalSelection = null;
|
||||
return;
|
||||
}
|
||||
show();
|
||||
});
|
||||
|
||||
d3.select(document)
|
||||
.call(keybinding);
|
||||
shortcutsModal
|
||||
.append('div')
|
||||
.attr('class', 'modal-section')
|
||||
.append('h3')
|
||||
.text(t('shortcuts.modal.title'));
|
||||
|
||||
shortcutsModal
|
||||
.call(renderTabs);
|
||||
}
|
||||
|
||||
return shortcuts;
|
||||
function renderTabs(selection) {
|
||||
var wrapper = selection
|
||||
.selectAll('.wrapper')
|
||||
.data([0]);
|
||||
|
||||
var wrapperEnter = wrapper
|
||||
.enter()
|
||||
.append('div')
|
||||
.attr('class', 'wrapper modal-section');
|
||||
|
||||
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(dataShortcuts);
|
||||
|
||||
var tabsEnter = tabs
|
||||
.enter()
|
||||
.append('div')
|
||||
.attr('class', 'tab')
|
||||
.on('click', function (d, i) {
|
||||
activeTab = i;
|
||||
renderTabs(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(dataShortcuts);
|
||||
|
||||
var shortcutsEnter = shortcuts
|
||||
.enter()
|
||||
.append('div')
|
||||
.attr('class', 'shortcut-tab')
|
||||
.on('click', function (d, i) {
|
||||
activeTab = i;
|
||||
renderTabs(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');
|
||||
|
||||
shortcutsRow
|
||||
.selectAll('kbd')
|
||||
.data(function (d) { return d.shortcut; })
|
||||
.enter()
|
||||
.append('kbd')
|
||||
.text(function (d) { return uiCmd(d); });
|
||||
|
||||
row
|
||||
.append('div')
|
||||
.attr('class', 'shortcut-desc')
|
||||
.text(function (d) { return t(d.key); });
|
||||
|
||||
shortcuts = shortcuts
|
||||
.merge(shortcutsEnter);
|
||||
|
||||
// Update
|
||||
wrapper.selectAll('.shortcut-tab')
|
||||
.style('display', function (d, i) {
|
||||
return i === activeTab ? 'flex' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
return function(selection, show) {
|
||||
savedSelection = selection;
|
||||
if (show) {
|
||||
modalSelection = uiModal(selection);
|
||||
shortcutsModal(modalSelection);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user