Callouts (CSNades.app)
I got inspired by some other site with their interactive page (only interactive one I found) and wanted to:
- Give possibility to zoom in/out map that I already have on page
- Give people to edit and add new callouts
- Have a place where I can store all callouts for all maps for all languages in one place
Contents:
Callout properties
To visually represent callout on map, I store:
- name, description, alternative names each as json object, partial mapping language codes (or any id for branch)
- list of children - callouts that are inside this one, they are highlighted on map when parent is hovered
- polygon - list of points that represent area of callout
- ui properties - elements list that each define slightly extended partial svg properties that define how text on map should be displayed, with sane defaults depending on rest of properties
Language branching
Each language is its own branch (en is main one, so each callout has to have en mapping) that gonna default its own language from mapping and gonna recursively fallback to parent branch if not found. That way en-us can extend specific callouts where they differ from en, leaving rest of them to be inherited, same thing could be done with other languages like: chinese variants, espanol-portugese, etc.
Current implementation serves whole languages at once, since I don't have that many callouts, but it could be optimized to serve only needed ones with computing static content for each branch on change commit and reserving only dynamic content for collaboration stages.
Adding/Editing callouts on page
So first of all on top of all properties, during editing/adding callout areas, each had to have intermediate states that are used to derive displayed props and store - like polygon points, text position, children, etc.
Each meaningful change produces json diff and is stored in local storage.
Each change can be temporary disabled or deleted and this will be reflected on map. There is possibility that current stack of patches will break at some point, then it will be indicated on list of changes.
Submitting changes
When user is happy with changes, they can submit them. This will send all changes to server, where they will be validated and stored in database and wait to be resolved by content manager.