Merge pull request #462 from DDMAL/develop

Merging develop
DDMAL · Sep 6, 2018 · 8619ed1 · 8619ed1
2 parents 3d828c5 + 8d3f7d7
commit 8619ed1
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 14 deletions.
diff --git a/AUTHORS b/AUTHORS
@@ -1,17 +1,16 @@
-
 Authors of diva.js
 
+William Bain (https://github.com/wabain)
+Andrew Horwitz (https://github.com/ahwitz)
+Eric Liu (https://github.com/erichanliu)
 Wendy Liu (https://github.com/dellsystem)
 Evan Magoni (https://github.com/magoni)
-Andrew Horwitz (https://github.com/ahwitz)
-Laurent Pugin (https://github.com/lpugin)
-William Bain (https://github.com/wabain)
 Jérôme Parent-Lévesque (https://github.com/jeromepl)
-Eric Liu (https://github.com/erichanliu)
+Laurent Pugin (https://github.com/lpugin)
 
 Project Coordinators:
-Andrew Hankinson (andrew.hankinson[at]mail.mcgill.ca)
-Ichiro Fujinaga (ich[at]music.mcgill.ca)
+Andrew Hankinson (andrew.hankinson[at]bodleian.ox.ac.uk)
+Ichiro Fujinaga (ichiro.fujinaga[at]mcgill.ca)
 
 Development of Diva.js (past and present versions) was sponsored by the following institutions:
 

diff --git a/source/css/plugins/_manipulation.scss b/source/css/plugins/_manipulation.scss
@@ -33,7 +33,7 @@
 }
 
 .manipulation-main-area {
-  width: 70%;
+  width: 80%;
   flex: 1 1 auto;
   background-color: rgba(255, 255, 255, 0.5);
   overflow: scroll;
@@ -56,10 +56,99 @@
 }
 
 .manipulation-tools {
+  width: 10%;
   flex: 1 1 auto;
+  overflow: auto;
 
   .manipulation-tools-text {
     color: #FBF7F6;
-    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
+    margin-bottom: 0.7em;
   }
 }
+
+input[type=range] {
+  -webkit-appearance: none;
+  width: 100%;
+  margin: 4.5px 0;
+}
+input[type=range]:focus {
+  outline: none;
+}
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 4px;
+  cursor: pointer;
+  box-shadow: 0.4px 0.4px 2.4px rgba(0, 0, 0, 0.32), 0px 0px 0.4px rgba(13, 13, 13, 0.32);
+  background: rgba(255, 255, 255, 0.66);
+  border-radius: 25px;
+  border: 0px solid rgba(1, 1, 1, 0);
+}
+input[type=range]::-webkit-slider-thumb {
+  box-shadow: 1px 1px 6.2px rgba(0, 0, 49, 0.66), 0px 0px 1px rgba(0, 0, 75, 0.66);
+  border: 0.9px solid rgba(0, 0, 30, 0.42);
+  height: 13px;
+  width: 13px;
+  border-radius: 10px;
+  background: #ffffff;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -4.5px;
+}
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: rgba(253, 133, 243, 0.66);
+}
+input[type=range]::-moz-range-track {
+  width: 100%;
+  height: 4px;
+  cursor: pointer;
+  box-shadow: 0.4px 0.4px 2.4px rgba(0, 0, 0, 0.32), 0px 0px 0.4px rgba(13, 13, 13, 0.32);
+  background: rgba(255, 255, 255, 0.66);
+  border-radius: 25px;
+  border: 0px solid rgba(1, 1, 1, 0);
+}
+input[type=range]::-moz-range-thumb {
+  box-shadow: 1px 1px 6.2px rgba(0, 0, 49, 0.66), 0px 0px 1px rgba(0, 0, 75, 0.66);
+  border: 0.9px solid rgba(0, 0, 30, 0.42);
+  height: 13px;
+  width: 13px;
+  border-radius: 10px;
+  background: #ffffff;
+  cursor: pointer;
+}
+input[type=range]::-ms-track {
+  width: 100%;
+  height: 4px;
+  cursor: pointer;
+  background: transparent;
+  border-color: transparent;
+  color: transparent;
+}
+input[type=range]::-ms-fill-lower {
+  background: rgba(251, 83, 239, 0.66);
+  border: 0px solid rgba(1, 1, 1, 0);
+  border-radius: 50px;
+  box-shadow: 0.4px 0.4px 2.4px rgba(0, 0, 0, 0.32), 0px 0px 0.4px rgba(13, 13, 13, 0.32);
+}
+input[type=range]::-ms-fill-upper {
+  background: rgba(252, 108, 241, 0.66);
+  border: 0px solid rgba(1, 1, 1, 0);
+  border-radius: 50px;
+  box-shadow: 0.4px 0.4px 2.4px rgba(0, 0, 0, 0.32), 0px 0px 0.4px rgba(13, 13, 13, 0.32);
+}
+input[type=range]::-ms-thumb {
+  box-shadow: 1px 1px 6.2px rgba(0, 0, 49, 0.66), 0px 0px 1px rgba(0, 0, 75, 0.66);
+  border: 0.9px solid rgba(0, 0, 30, 0.42);
+  height: 13px;
+  width: 13px;
+  border-radius: 10px;
+  background: #ffffff;
+  cursor: pointer;
+  height: 4px;
+}
+input[type=range]:focus::-ms-fill-lower {
+  background: rgba(252, 108, 241, 0.66);
+}
+input[type=range]:focus::-ms-fill-upper {
+  background: rgba(253, 133, 243, 0.66);
+}
+
diff --git a/source/js/plugins/manipulation.js b/source/js/plugins/manipulation.js
@@ -123,6 +123,12 @@ export default class ManipulationPlugin
 
         window.resetDragscroll();
         this._loadImageInMainArea(event, this._page.url);
+
+        // hide toolbar if fullscreen
+        if (settings.inFullscreen)
+        {
+            document.getElementById(settings.selector + 'tools').style.display = 'none';
+        }
     }
 
     handleDblClick (event)
@@ -206,6 +212,9 @@ export default class ManipulationPlugin
             document.removeEventListener('keyup', this.boundEscapeListener);
             document.body.style.overflow = 'auto';
             this._core.parentObject.removeChild(this._backdrop);
+
+            // show toolbar 
+            document.getElementById(`${this._core.settings.selector}tools`).style.display = 'block';
         }
     }
 
@@ -272,6 +281,7 @@ export default class ManipulationPlugin
         {
             document.body.style.overflow = 'auto';
             this._core.parentObject.removeChild(this._backdrop);
+            document.getElementById(this._core.settings.selector + 'tools').style.display = 'block';
         };
 
         // Header title
@@ -327,16 +337,15 @@ export default class ManipulationPlugin
 
         // Filters title
         let filtersTitle = document.createElement('div');
-        filtersTitle.setAttribute('style', 'height: 2em; width: 100%; margin-bottom: 1em;');
+        filtersTitle.setAttribute('style', 'margin: 1em 0;');
 
         let titleText = document.createElement('h3');
-        titleText.setAttribute('style', 'display: inline-block; margin-right: 3em;');
+        titleText.setAttribute('style', 'margin: 0;');
         titleText.classList.add('manipulation-tools-text');
         titleText.innerText = 'Filters';
 
         // Selection options (color filters or threshold)
         let select = document.createElement('select');
-        select.setAttribute('style', 'display: inline;');
         select.id = 'filter-select';
         select.style.backgroundColor = 'white';
 

diff --git a/source/js/plugins/metadata.js b/source/js/plugins/metadata.js
@@ -83,6 +83,15 @@ export default class MetadataPlugin
                 contentDiv.appendChild(value);
             }
 
+            // add link to manifest
+            let linkToManifest = document.createElement('p');
+            let manifestAnchor = document.createElement('a');
+            manifestAnchor.setAttribute("target", "_blank");
+            manifestAnchor.setAttribute("href", `${this.core.settings.objectData}`);
+            manifestAnchor.innerHTML = "IIIF Manifest";
+            linkToManifest.appendChild(manifestAnchor);
+            contentDiv.appendChild(linkToManifest);
+
             metadataDiv.appendChild(closeButton);
             metadataDiv.appendChild(title);
             metadataDiv.appendChild(contentDiv);
@@ -119,8 +128,8 @@ export default class MetadataPlugin
                 pos2 = pos4 - e.clientY;
                 pos3 = e.clientX;
                 pos4 = e.clientY;
-                metadataDiv.style.top = (metadataDiv.offsetTop - pos2) + 'px';
-                metadataDiv.style.left = (metadataDiv.offsetLeft - pos1) + 'px';
+                metadataDiv.style.top = `${(metadataDiv.offsetTop - pos2)}px`;
+                metadataDiv.style.left = `${(metadataDiv.offsetLeft - pos1)}px`;
             };
 
             document.onmouseup = () =>