mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-26 07:23:40 +00:00
Add drag-and-drop reordering of favorite presets
This commit is contained in:
@@ -316,6 +316,12 @@ export function coreContext() {
|
||||
context.getFavoritePresets = function() {
|
||||
return JSON.parse(context.storage('favorite_presets')) || [];
|
||||
};
|
||||
function setFavoritePresets(favs) {
|
||||
context.storage('favorite_presets', JSON.stringify(favs));
|
||||
|
||||
//and call update on modes
|
||||
dispatch.call('favoritePreset');
|
||||
}
|
||||
context.favoritePreset = function(preset, geom) {
|
||||
var favs = context.getFavoritePresets();
|
||||
|
||||
@@ -333,18 +339,20 @@ export function coreContext() {
|
||||
// prepend array
|
||||
favs.unshift({id: preset.id, geom: geom});
|
||||
}
|
||||
|
||||
context.storage('favorite_presets', JSON.stringify(favs));
|
||||
|
||||
//and call update on modes
|
||||
dispatch.call('favoritePreset');
|
||||
setFavoritePresets(favs);
|
||||
};
|
||||
|
||||
context.isFavoritePreset = function(preset, geom) {
|
||||
var favs = context.getFavoritePresets();
|
||||
return favs.some(function(d) {
|
||||
return d.id === preset.id && d.geom === geom;
|
||||
});
|
||||
};
|
||||
context.moveFavoritePreset = function(fromIndex, toIndex) {
|
||||
var favs = context.getFavoritePresets();
|
||||
favs.splice(toIndex, 0, favs.splice(fromIndex, 1)[0]);
|
||||
setFavoritePresets(favs);
|
||||
};
|
||||
|
||||
/* Map */
|
||||
var map;
|
||||
|
||||
@@ -125,7 +125,7 @@ export function uiModes(context) {
|
||||
var data = favoriteModes;
|
||||
|
||||
var buttons = selection.selectAll('button.add-button')
|
||||
.data(data, function(d) { return d.button; });
|
||||
.data(data, function(d, index) { return d.button + index; });
|
||||
|
||||
// exit
|
||||
buttons.exit()
|
||||
@@ -170,7 +170,7 @@ export function uiModes(context) {
|
||||
}
|
||||
});
|
||||
|
||||
var dragOrigin;
|
||||
var dragOrigin, targetIndex;
|
||||
|
||||
buttonsEnter.call(d3_drag()
|
||||
.on('start', function() {
|
||||
@@ -179,45 +179,65 @@ export function uiModes(context) {
|
||||
y: d3_event.y
|
||||
};
|
||||
})
|
||||
.on('drag', function() {
|
||||
.on('drag', function(d, index) {
|
||||
var x = d3_event.x - dragOrigin.x,
|
||||
y = d3_event.y - dragOrigin.y;
|
||||
|
||||
d3_select(this)
|
||||
.classed('dragging', true)
|
||||
.classed('removing', y > 50)
|
||||
.style('transform', 'translate(' + x + 'px, ' + y + 'px)');
|
||||
.classed('removing', y > 50);
|
||||
|
||||
targetIndex = null;
|
||||
|
||||
selection.selectAll('button.add-preset')
|
||||
.style('transform', function(d2, index2) {
|
||||
if (index === index2) {
|
||||
return 'translate(' + x + 'px, ' + y + 'px)';
|
||||
} else if (y > 50) {
|
||||
if (index2 > index) {
|
||||
return 'translateX(-100%)';
|
||||
}
|
||||
} else if (index2 > index && d3_event.x > d3_select(this).node().offsetLeft) {
|
||||
if (targetIndex === null || index2 > targetIndex) {
|
||||
targetIndex = index2;
|
||||
}
|
||||
return 'translateX(-100%)';
|
||||
} else if (index2 < index && d3_event.x < d3_select(this).node().offsetLeft + d3_select(this).node().offsetWidth) {
|
||||
if (targetIndex === null || index2 < targetIndex) {
|
||||
targetIndex = index2;
|
||||
}
|
||||
return 'translateX(100%)';
|
||||
}
|
||||
return null;
|
||||
});
|
||||
})
|
||||
.on('end', function(d) {
|
||||
.on('end', function(d, index) {
|
||||
|
||||
d3_select(this)
|
||||
.classed('dragging', false)
|
||||
.classed('removing', false)
|
||||
.classed('removing', false);
|
||||
|
||||
selection.selectAll('button.add-preset')
|
||||
.style('transform', null);
|
||||
|
||||
var y = d3_event.y - dragOrigin.y;
|
||||
if (y > 50) {
|
||||
// dragged out of the top bar, remove the favorite
|
||||
context.favoritePreset(d.preset, d.geometry);
|
||||
} else if (targetIndex !== null) {
|
||||
// dragged to a new position, reorder
|
||||
context.moveFavoritePreset(index, targetIndex);
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
/*
|
||||
buttonsEnter
|
||||
.append('span')
|
||||
.attr('class', 'label')
|
||||
.text(function(mode) { return mode.title; });
|
||||
*/
|
||||
// if we are adding/removing the buttons, check if toolbar has overflowed
|
||||
if (buttons.enter().size() || buttons.exit().size()) {
|
||||
context.ui().checkOverflow('#bar', true);
|
||||
}
|
||||
|
||||
// update
|
||||
buttons = buttons
|
||||
.merge(buttonsEnter)
|
||||
.classed('disabled', function(d) { return !enabled(d); });
|
||||
|
||||
// check if toolbar has overflowed
|
||||
context.ui().checkOverflow('#bar', true);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user