Merge pull request #1473 from ProjectMirador/kiyonoriNagasaki-develop

Enable Right-to-Left viewing (from Kiyonori Nagasaki develop)
ProjectMirador · Sep 15, 2017 · 804d978 · 804d978
2 parents d03457b + 6e15d69
commit 804d978
Show file tree

Hide file tree

Showing 15 changed files with 380 additions and 176 deletions.
diff --git a/css/less/views/gallery-view.less b/css/less/views/gallery-view.less
@@ -92,4 +92,9 @@
   .hud-control .ui-slider-range {
     background: @deep-sky-blue;
   }
+
+  .thumbnail-rtl{
+    float: right !important;
+  }
+
 }
diff --git a/css/less/window.less b/css/less/window.less
@@ -98,4 +98,8 @@
     margin: 0px;
     height: 0px;
   }
+
+  .v-direction-rtl {
+    direction: rtl;
+  }
 }
diff --git a/css/less/workspace.less b/css/less/workspace.less
@@ -100,4 +100,4 @@
     left: 0;
     display: none;
   }
-}
+}
diff --git a/js/src/manifests/manifest.js b/js/src/manifests/manifest.js
@@ -252,6 +252,11 @@
         var canvas = this.canvasMap[canvasId.split('#')[0]];
         return canvas ? canvas.label : undefined;
       }
+    },
+    getViewingDirection : function() {
+      var _this = this;
+      return _this.jsonLd.viewingDirection || _this.jsonLd.sequences[0].viewingDirection;
+
     }
   };
 

diff --git a/js/src/widgets/bookView.js b/js/src/widgets/bookView.js
@@ -9,6 +9,7 @@
       stitchList:       [],
       canvasID:          null,
       imagesList:       [],
+      imagesListRtl:       [],
       element:          null,
       focusImages:      [],
       manifest:         null,
@@ -32,6 +33,9 @@
 
     init: function() {
       var _this = this;
+      if(this.vDirectionStatus == 'rtl'){
+        this.imagesList =  this.imagesListRtl.concat();
+      }
       if (this.canvasID !== null) {
         this.currentImgIndex = $.getImageIndexById(this.imagesList, this.canvasID);
       }
@@ -79,14 +83,14 @@
     },
 
     template: $.Handlebars.compile([
-                                 '<div class="book-view">',
-                                 '</div>'
+      '<div class="book-view">',
+      '</div>'
     ].join('')),
 
     listenForActions: function() {
       var _this = this,
-      firstCanvasId = _this.imagesList[0]['@id'],
-      lastCanvasId = _this.imagesList[_this.imagesList.length-1]['@id'];
+          firstCanvasId = _this.imagesList[0]['@id'],
+          lastCanvasId = _this.imagesList[_this.imagesList.length-1]['@id'];
 
       _this.eventEmitter.subscribe('bottomPanelSet.' + _this.windowId, function(event, visible) {
         var dodgers = _this.element.find('.mirador-osd-toggle-bottom-panel, .mirador-pan-zoom-controls');
@@ -121,7 +125,7 @@
       });
     },
 
-bindEvents: function() {
+    bindEvents: function() {
       var _this = this;
 
       this.element.find('.mirador-osd-next').on('click', function() {
@@ -196,12 +200,12 @@ bindEvents: function() {
       this.osdOptions.osdBounds = this.osd.viewport.getBounds(true);
       _this.eventEmitter.publish("imageBoundsUpdated", {
         id: _this.windowId,
-          osdBounds: {
-            x: _this.osdOptions.osdBounds.x,
-            y: _this.osdOptions.osdBounds.y,
-            width: _this.osdOptions.osdBounds.width,
-            height: _this.osdOptions.osdBounds.height
-          }
+        osdBounds: {
+          x: _this.osdOptions.osdBounds.x,
+          y: _this.osdOptions.osdBounds.y,
+          width: _this.osdOptions.osdBounds.width,
+          height: _this.osdOptions.osdBounds.height
+        }
       });
     },
 
@@ -265,19 +269,19 @@ bindEvents: function() {
 
     createOpenSeadragonInstance: function() {
       var uniqueID = $.genUUID(),
-      osdId = 'mirador-osd-' + uniqueID,
-      osdToolBarId = osdId + '-toolbar',
-      elemOsd,
-      tileSources = [],
-      _this = this,
-      toolbarID = 'osd-toolbar-' + uniqueID,
-      dfd = jQuery.Deferred();
+          osdId = 'mirador-osd-' + uniqueID,
+          osdToolBarId = osdId + '-toolbar',
+          elemOsd,
+          tileSources = [],
+          _this = this,
+          toolbarID = 'osd-toolbar-' + uniqueID,
+          dfd = jQuery.Deferred();
 
       this.element.find('.' + this.osdCls).remove();
 
       jQuery.each(this.stitchList, function(index, image) {
         var imageUrl = $.Iiif.getImageUrl(image),
-        infoJsonUrl = imageUrl + '/info.json';
+            infoJsonUrl = imageUrl + '/info.json';
 
         jQuery.getJSON(infoJsonUrl).done(function (data, status, jqXHR) {
           tileSources.splice(index, 0, data);
@@ -290,9 +294,9 @@ bindEvents: function() {
 
         elemOsd =
           jQuery('<div/>')
-        .addClass(_this.osdCls)
-        .attr('id', osdId)
-        .appendTo(_this.element);
+          .addClass(_this.osdCls)
+          .attr('id', osdId)
+          .appendTo(_this.element);
 
         _this.osd = $.OpenSeadragon({
           'id':           elemOsd.attr('id'),
@@ -402,11 +406,11 @@ bindEvents: function() {
       // Default to 'paged' and 'left-to-right'
       // Set index(es) for any other images to stitch with selected image
       var stitchList = [],
-      leftIndex = [],
-      rightIndex = [],
-      topIndex = [],
-      bottomIndex = [],
-      _this = this;
+          leftIndex = [],
+          rightIndex = [],
+          topIndex = [],
+          bottomIndex = [],
+          _this = this;
 
       this.focusImages = [];
 
@@ -421,46 +425,46 @@ bindEvents: function() {
         } else if (this.currentImgIndex % 2 === 0) {
           // even, get previous page.  set order in array based on viewingDirection
           switch (this.viewingDirection) {
-            case "left-to-right":
-              leftIndex[0] = this.currentImgIndex-1;
+          case "left-to-right":
+            leftIndex[0] = this.currentImgIndex-1;
             stitchList = [this.imagesList[this.currentImgIndex-1], this.currentImg];
             break;
-            case "right-to-left":
-              rightIndex[0] = this.currentImgIndex-1;
+          case "right-to-left":
+            rightIndex[0] = this.currentImgIndex-1;
             stitchList = [this.currentImg, this.imagesList[this.currentImgIndex-1]];
             break;
-            case "top-to-bottom":
-              topIndex[0] = this.currentImgIndex-1;
+          case "top-to-bottom":
+            topIndex[0] = this.currentImgIndex-1;
             stitchList = [this.imagesList[this.currentImgIndex-1], this.currentImg];
             break;
-            case "bottom-to-top":
-              bottomIndex[0] = this.currentImgIndex-1;
+          case "bottom-to-top":
+            bottomIndex[0] = this.currentImgIndex-1;
             stitchList = [this.currentImg, this.imagesList[this.currentImgIndex-1]];
             break;
-            default:
-              break;
+          default:
+            break;
           }
         } else {
           // odd, get next page
           switch (this.viewingDirection) {
-            case "left-to-right":
-              rightIndex[0] = this.currentImgIndex+1;
+          case "left-to-right":
+            rightIndex[0] = this.currentImgIndex+1;
             stitchList = [this.currentImg, this.imagesList[this.currentImgIndex+1]];
             break;
-            case "right-to-left":
-              leftIndex[0] = this.currentImgIndex+1;
+          case "right-to-left":
+            leftIndex[0] = this.currentImgIndex+1;
             stitchList = [this.imagesList[this.currentImgIndex+1], this.currentImg];
             break;
-            case "top-to-bottom":
-              bottomIndex[0] = this.currentImgIndex+1;
+          case "top-to-bottom":
+            bottomIndex[0] = this.currentImgIndex+1;
             stitchList = [this.currentImg, this.imagesList[this.currentImgIndex+1]];
             break;
-            case "bottom-to-top":
-              topIndex[0] = this.currentImgIndex+1;
+          case "bottom-to-top":
+            topIndex[0] = this.currentImgIndex+1;
             stitchList = [this.imagesList[this.currentImgIndex+1], this.currentImg];
             break;
-            default:
-              break;
+          default:
+            break;
           }
         }
       } else if (this.viewingHint === 'continuous') {

diff --git a/js/src/widgets/imageView.js b/js/src/widgets/imageView.js
@@ -9,6 +9,7 @@
       canvasID:         null,
       canvases:         null,
       imagesList:       [],
+      imagesListRtl:    [],
       element:          null,
       elemOsd:          null,
       manifest:         null,
@@ -22,7 +23,8 @@
       annoCls:          'annotation-canvas',
       annotationsLayer: null,
       forceShowControls: false,
-      eventEmitter:     null
+      eventEmitter:     null,
+      vDirectionStatus: ''
     }, options);
 
     this.init();
@@ -34,7 +36,9 @@
       var _this = this;
       this.horizontallyFlipped = false;
       this.originalDragHandler = null;
-
+      if(this.vDirectionStatus == 'rtl'){
+          this.imagesList =  this.imagesListRtl.concat();
+       }
       // check (for thumbnail view) if the canvasID is set.
       // If not, make it page/item 1.
       if (this.canvasID !== null) {

diff --git a/js/src/widgets/scrollView.js b/js/src/widgets/scrollView.js
@@ -13,11 +13,15 @@
       thumbInfo:            {thumbsHeight: 150, listingCssCls: 'listing-thumbs', thumbnailCls: 'thumbnail-view'},
       windowId:             null,
       panel:                false,
+      vDirectionStatus: '',
       lazyLoadingFactor:    1.5  //should be >= 1
     }, options);
-    
+
     jQuery.extend($.ScrollView.prototype, $.ThumbnailsView.prototype);
     this.init();
+    if(this.vDirectionStatus == 'rtl') {
+      jQuery(this.appendTo).find('.scroll-view').addClass('v-direction-rtl');
+    }
   };
-  
+
 }(Mirador));
diff --git a/js/src/widgets/thumbnailsView.js b/js/src/widgets/thumbnailsView.js
@@ -9,6 +9,8 @@
       manifest:             null,
       element:              null,
       imagesList:           [],
+      imagesListLtr:           [],
+      vDirectionStatus:           '',
       appendTo:             null,
       thumbInfo:            {thumbsHeight: 150, listingCssCls: 'listing-thumbs', thumbnailCls: 'thumbnail-view'},
       defaultThumbHeight:   150,
@@ -21,15 +23,24 @@
     this.init();
   };
 
-
   $.ThumbnailsView.prototype = {
 
     init: function() {
       if (this.canvasID !== null) {
         this.currentImgIndex = $.getImageIndexById(this.imagesList, this.canvasID);
       }
-
+      if(this.vDirectionStatus == 'rtl'){
+        this.imagesList =  this.imagesListLtr.concat();
+      }
       this.loadContent();
+      if(this.vDirectionStatus == 'rtl'){
+        var firstCanvasId = this.imagesList[0]['@id'];
+        var firstCanvasThumbSelector = 'img.thumbnail-image[data-image-id="'+firstCanvasId+'"]';
+        jQuery(this.appendTo).find('.panel-thumbnail-view').addClass('v-direction-rtl');
+        jQuery(this.appendTo).find('.thumbnail-view').find('li').each(function(){
+          jQuery(this).addClass('thumbnail-rtl');
+        });
+      }
       this.bindEvents();
       this.listenForActions();
     },
-Original file line number
+Diff line change
@@ Expand Up / @@ -100,4 +100,4 @@ @@
         left: 0;
         display: none;
       }
-    }
+    }