Currently image viewer half-implements photoswipe directly, with template HTML in the frontend (not even present in this repo)

Photoswipe is used to let the user:

• Overlay and view images in full screen
• Swipe between images
• Pinch/scroll zoom
• Pan
• Swipe (up) to exit zoom

Best scenario would be to have a custom own implementation or more polymer friendly component. But as a first step we might want to have a faster solution before the ui/ux decides exactly how it should work.

https://github.com/safetychanger/sc-photoswipe is probably the way to go

Hello,

We've tried to activate or update your repository on Depfu and couldn't find any supported dependency files. If we were to guess, we would say that this is not actually a project Depfu supports and has probably been activated by error.

Monorepos

Please note that Depfu currently only searches for your dependency files in the root folder. We do support monorepos and non-root files, but don't auto-detect them. If that's the case with this repo, please send us a quick email with the folder you want Depfu to work on and we'll set it up right away!

How to deactivate the project

• Go to the Settings page of either your own account or the organization you've used
• Go to "Installed Integrations"
• Click the "Configure" button on the Depfu integration
• Remove this repo (Neovici/cosmoz-image-viewer) from the list of accessible repos.

Please note that using the "All Repositories" setting doesn't make a lot of sense with Depfu.

If you think that this is a mistake

Please let us know by sending an email to [email protected].

This is an automated issue by Depfu. You're getting it because someone configured Depfu to automatically update dependencies on this project.

Image viewer in separate window

1 / 1 should be centered even though no arrow icons are available to the upper left.

We should check what's going on with:

https://github.com/safetychanger/iron-photo-viewer
https://github.com/safetychanger/iron-swiper

Swiper.js looks like a much better option than PhotoSwipe and these components were just updated a few days ago. Looks exciting!

Currently the print button only appears if the user detaches the image manually.

This button will do the same(detaches) but instantly give the user an print preview dialog. When the user either prints or cancels, the detached window closes.

Request for this feature comes from rm 24945.

The image is not shown when choosing fullscreen image.

If no images are loaded, deactivate buttons etc.

sometimes el.viewer is undefined on basic test zoomToogle.

See #21 and #22

The sooner, the better.

The dependencyFabricElements/skeleton-carousel is a Polymer 2 element. It's hybrid branch is a hybrid element which does not get maintained ...

also #33
[WIP]

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository with URL https://[secure]@github.com/neovici/cosmoz-image-viewer.git.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.

Good luck with your project ✨

Your semantic-release bot 📦🚀

tests coverage is around 34%

fixed already I will create an PR.

• Test opening/controlling external window
• Popup-blocker tests
• Test "taking" a window with another instance (shared)
• Test opening a window, refreshing the page, and re-attaching to (now unknown) window
• Make sure test coverage etc is handled for external window template script

Small image in safari when opening full screen mode, see print screen.

The image viewer doesn't scale properly when changing the size of the web browser. The whole image doesn't fit when minimizing the size.

We currently depend on JaySunSyn/skeleton-carousel#hybrid.
Any reason why this can be PR'ed/merged upstream to FabricElements/skeleton-carousel?
What do we lack upstream?

If we need custom features that won't be merged upstream, we need to have them in a Neovici repo fork.

Currently our image download function (only present in external window) downloads a ZIP-file with PNG images.
We should:

• Switch to jsPDF or other JavaScript-PDF library that can embed PNG-images as pages. (jsPDF has a lot more features than we need but maybe we can tree-shake it good :)
• Enable the download both detached, overlayed and inline
  ** Note that detached might mean a separate implementation since it's in a new window/document and can't easily make use of all FE capabilities

img-pan-zoom is not actively developed and it uses the huge openseadragon for the panning and zooming.

For now, https://github.com/fabricelements/skeleton-carousel provides the swiping between images so the replacement of img-pan-zoom really just need to be supplied an image and provide:

• [ Desktop ] - Click-to-drag panning
• [ Desktop ] - Scroll-to-zoom
• [ Mobile ] - Touch-move to pan
• [ Mobile ] - Pinch-zoom

Good starting points for light-weight modern solutions might be (for inspiration or usage)

• https://github.com/SpencerWie/Panzoom
• https://codepen.io/techslides/pen/zowLd
• https://www.cssscript.com/tag/image-pan/

After switching to haunted-pan-zoom, I'm unable to scroll the images with the scroll wheel, I think the user should be able to. (Even further than 100%)

Replace iron-resizable-behavior with a ResizeObserver

https://medium.com/faun/automate-your-releases-versioning-and-release-notes-with-semantic-release-d5575b73d986
https://www.conventionalcommits.org/en/v1.0.0/

When opening the image in a new window from the overlay state, the overlay should close and the inline-image should be hidden (the same way detach works when pressed on the inline image).

chrome 67 [1.x] ✖️ test/basic.html » cosmoz-image-viewer-loading-error » error is shown with img-pan-zoom active
expected true to equal false

When multiple instances are used, the external window should (optionally) be reused among instances

Download images can't be opened correctly. System says file is corrupt.

related issue: https://github.com/Neovici/cosmoz-frontend/issues/312

Currently only the active image in a list will get loaded in the external window. The whole list, along with an enhanced injected script with navigational controls, should be available in the opened window.

Description

When changing the images property to a new array of images, the displayed images might not be updated if the new array has the same size as the previous one.

See local demo of issue at:
http://127.0.0.1:8000/components/cosmoz-image-viewer/demo/issue-21.html
When clicking the "Change images" button, the displayed images do not change.
However, when clicking the "Next" button, the new image is displayed

I think this is because dom-repeat recycle template instances.
skeleton-caroussel uses iron-selector which uses Polymer.dom(node).observeNodes to observe child node changes. When changing the image list, if the new list has the same number of items, dom-repeat will recycle the template instances and observeNode will not observe any changes.

Like the title says, changing so the navigation arrows are not showing when there is only one page to be shown.

The image is not shown in the separate window.

• CSS spinner / loading when images are loading (replaced/changing)
• Transitions when switching images in detached window(?)
• Show current + total page numbers in detached window
• Disable prev/next in detached window when on first/last (or loop)
• Consider putting detached window template into an actual <template>
• Split up JS into behaviors (detached, pan-zoom?)

We are currently using multiple instances of this component but they should share external window (when used).

We should introduce a behavior where we observe isAttached along with isVisible and call syncImageState() whenever any of them changes into a state where both are true:

Pseudo-code:

static get properties() {
  isVisible: {
    type: Boolean,
    readOnly: true
  },
  manualImageStateSync: {
    type: Boolean,
    value: false
  }
  ...
}

static get observers() {
  return [
    'autoSyncImageState(isAttached, isVisible, manualImageStateSync)'
  ];
}

...

_onResize(event) {
  this._setIsVisible(Boolean(this.offsetWidth || this.offsetHeight));
  ...
}

autoSyncImageState(isAttached, isVisible, manualImageStateSync) {
  if (isAttached && isVisible && !manualImageStateSync) {
    this.syncImageState();
  }
}