Skip to content

Feature/refactoring#149

Merged
Phocacius merged 25 commits intodevelopfrom
feature/refactoring
Feb 3, 2026
Merged

Feature/refactoring#149
Phocacius merged 25 commits intodevelopfrom
feature/refactoring

Conversation

@frwg
Copy link
Contributor

@frwg frwg commented Jan 23, 2026

  • see internal 12246

DataManager & Digitizer: Dialog Improvements and Mobile Optimization

This PR implements comprehensive improvements to the DataManager and Digitizer dialogs, focusing on usability, mobile responsiveness, and enhanced configuration options.

Dialog System Modernization

  • Migrate to Mapbender.Popup: Complete migration from jQuery UI dialogs to Mapbender.Popup for better integration
  • Code modernization: Convert ES5 pseudo-classes to ES6 classes (DialogFactory, FormRenderer, FormUtil, TableRenderer, FeatureEditor, FeatureRenderer, FeatureStyleEditor, StyleAdapter, ContextMenu, Toolset)
  • File structure: Rename files to start with uppercase letters for consistency

Dialog Configuration Enhancements

  • Dynamic popup titles: Support data expressions in popup titles (e.g., data.title + " - " + data.ort)
  • Template literal syntax: Add support for ${data.property} syntax in expressions
  • Remove close button: Hide redundant close/cancel button in edit dialogs (X button in title bar remains)

Form Item Improvements

  • Label type enhancements: Add title attribute support for type: label
  • Dynamic expressions: Enable expression evaluation for title, label and text types (similar to existing html type)
    • Supports JavaScript expressions: "'Titel lautet: ' + data.title"
    • Supports template literals: "${data.title}"
    • Supports complex expressions with functions: "(function(){ return data.gemarkung ? 'Gemarkung: ' + data.gemarkung : 'Gemarkung:'; })()"
  • Image preview layout: Display image preview below the title instead of next to it for better mobile experience

Display-Only Mode Detection

  • Automatic Save button hiding: Hide Save button when form contains only display fields (no editable inputs)
  • Visual feedback: Show magnifying glass icon instead of pencil in table rows for display-only forms
  • Smart detection: Automatically detect editable vs. display-only fields

Mobile Optimization

  • Responsive dialogs: On mobile devices (max-width: 767px):
    • Dialogs take full viewport width
    • Limited to upper portion of screen (max 60vh)
    • Content area scrollable for long forms
  • Improved usability: Better touch-friendly interface on mobile devices

frwg added 18 commits January 20, 2026 13:16
…ove Structure

- Introduced FeatureStyleEditor class to manage feature styling in a more structured way.
- Refactored StyleAdapter to use ES6 class syntax, enhancing readability and maintainability.
- Updated TableRenderer to extend from DataManager.TableRenderer, simplifying event handling.
- Created Toolset class for managing drawing tools, improving organization of tool-related logic.
- Removed legacy featureStyleEditor.js file in favor of the new FeatureStyleEditor class.
- Introduce ExpressionEvaluator class for dynamic expression handling
- Implement dynamic title expressions in DataManager
- Update FormRenderer to recognize dynamic expressions
…and 'text' and implement title attribute handling
…fy FormRenderer to apply 'd-block' class for responsive images
@astroidex
Copy link
Member

Shows Lupe, but does not zoom
lupe_aber_kein Zoom

@PhilVanB PhilVanB self-requested a review February 2, 2026 09:20
Copy link
Contributor

@PhilVanB PhilVanB left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code-wise, that's a nice refactoring.

Copy link
Member

@astroidex astroidex left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested. Works fine.

@astroidex astroidex added this to the major milestone Feb 2, 2026
@astroidex astroidex requested a review from Phocacius February 2, 2026 14:58
Copy link
Member

@Phocacius Phocacius left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the conversion to Javascript classes 😊

Apart from the comments in code, one thing I noticed in the frontend: When using tabs the container is a bit too wide resulting in a scrollbar being visible where it should not be, even when making the popup window very wide:

Image

test-case-container-too-wide.txt

@Phocacius Phocacius merged commit a387a98 into develop Feb 3, 2026
@Phocacius Phocacius deleted the feature/refactoring branch February 3, 2026 15:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants