Replaces JSON textarea with professional Excel-like spreadsheet interface for managing product variant properties. Features: - Handsontable 14.6.1 spreadsheet component - Property presets (Size, Color, Material, Storage, Custom) - Inline cell editing with Tab/Enter navigation - Context menu for add/remove rows and columns - Keyboard shortcuts (Ctrl+D delete, Ctrl+Enter save, Ctrl+Z undo) - Mobile touch gestures (swipe to delete rows) - Automatic JSON serialization on form submit - Form validation before saving - Comprehensive user guide documentation Files Changed: - LittleShop/package.json: NPM package management setup - LittleShop/wwwroot/js/variant-editor.js: 400-line spreadsheet editor module - LittleShop/wwwroot/lib/handsontable/: Handsontable library (Community Edition) - LittleShop/wwwroot/lib/hammerjs/: Hammer.js touch gesture library - LittleShop/Areas/Admin/Views/VariantCollections/Edit.cshtml: Spreadsheet UI integration - VARIANT_COLLECTIONS_USER_GUIDE.md: Complete user guide (18+ pages) Technical Details: - Excel-like editing experience (no more manual JSON editing) - Mobile-first responsive design - Browser compatibility: Chrome 90+, Firefox 88+, Edge 90+, Safari 14+ - Touch-optimized for mobile administration - Automatic data validation and error handling
58 lines
1.2 KiB
JavaScript
58 lines
1.2 KiB
JavaScript
var MOUSE_INPUT_MAP = {
|
|
mousedown: INPUT_START,
|
|
mousemove: INPUT_MOVE,
|
|
mouseup: INPUT_END
|
|
};
|
|
|
|
var MOUSE_ELEMENT_EVENTS = 'mousedown';
|
|
var MOUSE_WINDOW_EVENTS = 'mousemove mouseup';
|
|
|
|
/**
|
|
* Mouse events input
|
|
* @constructor
|
|
* @extends Input
|
|
*/
|
|
function MouseInput() {
|
|
this.evEl = MOUSE_ELEMENT_EVENTS;
|
|
this.evWin = MOUSE_WINDOW_EVENTS;
|
|
|
|
this.pressed = false; // mousedown state
|
|
|
|
Input.apply(this, arguments);
|
|
}
|
|
|
|
inherit(MouseInput, Input, {
|
|
/**
|
|
* handle mouse events
|
|
* @param {Object} ev
|
|
*/
|
|
handler: function MEhandler(ev) {
|
|
var eventType = MOUSE_INPUT_MAP[ev.type];
|
|
|
|
// on start we want to have the left mouse button down
|
|
if (eventType & INPUT_START && ev.button === 0) {
|
|
this.pressed = true;
|
|
}
|
|
|
|
if (eventType & INPUT_MOVE && ev.which !== 1) {
|
|
eventType = INPUT_END;
|
|
}
|
|
|
|
// mouse must be down
|
|
if (!this.pressed) {
|
|
return;
|
|
}
|
|
|
|
if (eventType & INPUT_END) {
|
|
this.pressed = false;
|
|
}
|
|
|
|
this.callback(this.manager, eventType, {
|
|
pointers: [ev],
|
|
changedPointers: [ev],
|
|
pointerType: INPUT_TYPE_MOUSE,
|
|
srcEvent: ev
|
|
});
|
|
}
|
|
});
|