toggle fullscreen icon in osd depending on fullscreen active or not

CHANGELOG.md

@@ -5,9 +5,17 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+
+## [0.0.2] - 2020-05-15
 ### Added
-- Pages deployment on per commit and per branch base
+- openseadragon.vue: Event listener for fullscreen change
+
+### Changed
+- toggle fs icon on fullscreen change
 
 ## [0.0.1] - 2020-05-14
 ### Added
 - This CHANGELOG file
+
+### Added
+- Pages deployment on per commit and per branch base

src/components/openseadragon.vue

@@ -24,6 +24,7 @@ import {
   fasSearchMinus,
   fasExpand,
   fasExpandArrowsAlt,
+  fasCompressArrowsAlt,
 } from '@quasar/extras/fontawesome-v5';
 
 export default {
@@ -58,6 +59,14 @@ export default {
     const viewer = new OpenSeadragon.Viewer(this.options);
     OpenSeadragon.setString('Tooltips.Home', 'Default View');
     OpenSeadragon.setString('Tooltips.FullPage', 'Toggle Fullscreen');
+
+    document.addEventListener('fullscreenchange', () => {
+      Object.values(this.buttons).forEach((v) => {
+        if (v.id === 'fullscreen') {
+          v.svg = document.fullscreenElement !== null ? fasCompressArrowsAlt : fasExpandArrowsAlt;
+        }
+      });
+    });
   },
 };
 </script>