martindholmes / facsViewer

Simple HTML/CSS/JS facsimile viewer which can read server directory listings
Mozilla Public License 2.0
1 stars 0 forks source link

Switch to all-Javascript rather than depending on target for image selection #6

Open martindholmes opened 4 years ago

martindholmes commented 4 years ago

This is a large-scale change, but it really reflects the way this codebase has moved from a simple CSS-based thing to a more sophisticated tool that's completely JS-dependent.

The current dependency on setting the target to a specific image container to "select" it should be replaced with a JavaScript call which sets a class on it, removing that class from the last image that had it, if any. This would also enable the image to be reset to normal size and orientation at the same time, removing the odd situation where you can leave an image in a rotated or enlarged state and it retains that change even when it's no longer the focus, just an item in the list of thumbnails.

However, we do want to retain the location-hash functionality for the sake of bookmarking specific images, which means that:

  1. The JS that changes the selected image must also manipulate the location history.
  2. An option for the selected image must be allowed as one of the constructor options, so that a coder can create a viewer which opens on a specific image without a URL hash.
  3. The query parameter option can be dropped.
  4. The constructor must prioritize the URL hash over the option parameter so that there where there is a default first selection, it can be overridden using the location hash.
martindholmes commented 4 years ago

An additional note: when this is done, we could also add some code that runs when an image is selected, where if the picture element is being used, and a funcFolderToLarge function has been provided, an additional source element is added to the picture, causing the load of the large version of the image, which would presumably then be used when zooming. This would need some experimentation, but if it works, it would provide a system which uses thumbnails for the main listing, medium-sized images for initial selection, and large options when needed.

martindholmes commented 4 years ago

And when closing an image, the reset function should be run to unrotate and unzoom it.

martindholmes commented 4 years ago

This work is taking place in branch issue_6.

Working through the implications here:

  1. The image block needs an onclick event that calls a setSelected method, passing its id.
  2. The setSelected function needs to unset any previous selection (so we need a persistent property that tracks the id of the currently-selected item) and sets it to the new one. It should remove the selected class from the old item and add it to the new item. It also needs to remove the exSelected class from an item which has it (see below).
  3. The next and previous arrow buttons also need to call the setSelected method, passing the id of the next or previous image item.
  4. The close button needs to call an unsetSelected method, which in addition to emptying the tracking property, should call the reset method on the image, change the selected class on the item to exSelected, and scroll it into view.

So: new persistent properties: selectedItem (string id) exSelectedItem (string id)

New methods: setSelected() unsetSelected()

new CSS classes: fvSelected (repurpose existing :target rulesets) fvExSelected (just outlined somehow)

Once this is all working, we need to add the code to manipulate the History so that the back and forward buttons will move through selections. That'll need a bit more thought.