rtl title and left panel contents

src/content-handlers/iiif/modules/uv-contentleftpanel-module/TreeView.ts

@@ -18,7 +18,7 @@ export class TreeView extends BaseView {
  this.setConfig("contentLeftPanel");
  super.create();
 
- this.$tree = $('<div class="iiif-tree-component"></div>');
+ this.$tree = $('<div class="iiif-tree-component rtl"></div>');
  this.$element.append(this.$tree);
  }
 

src/content-handlers/iiif/modules/uv-contentleftpanel-module/css/styles.less

@@ -115,6 +115,11 @@
  font-weight: normal;
  overflow: auto;
 
+ .iiif-tree-component.rtl {
+ direction: rtl;
+ padding-right: @padding-medium-horizontal;
+ }
+
  .iiif-tree-component ul li a.selected {
  color: @brand-primary !important;
  }

src/content-handlers/iiif/modules/uv-openseadragoncenterpanel-module/OpenSeadragonCenterPanel.ts

@@ -594,7 +594,7 @@ export class OpenSeadragonCenterPanel extends CenterPanel {
  maxLevel: info.levels - 1,
  units: "mm",
  spacing: [info.mm_x, info.mm_y],
- getTileUrl: function (level, x, y, query) {
+ getTileUrl: function(level, x, y, query) {
  var url =
  tileDescriptor + "/zxy/" + level + "/" + x + "/" + y;
  if (query) {
@@ -947,9 +947,9 @@ export class OpenSeadragonCenterPanel extends CenterPanel {
  const canvas: Canvas = this.extension.helper.getCurrentCanvas();
  const dimensions: CroppedImageDimensions | null = (this
  .extension as OpenSeadragonExtension).getCroppedImageDimensions(
-  canvas,
-  this.viewer
-  );
+ canvas,
+ this.viewer
+ );
 
  if (dimensions) {
  const bounds: XYWHFragment = new XYWHFragment(
@@ -985,7 +985,7 @@ export class OpenSeadragonCenterPanel extends CenterPanel {
  if (!center) return;
 
  // postpone pan for a millisecond - fixes iPad image stretching/squashing issue.
- setTimeout(function () {
+ setTimeout(function() {
  viewer.viewport.panTo(center, true);
  }, 1);
  }
@@ -1296,10 +1296,6 @@ export class OpenSeadragonCenterPanel extends CenterPanel {
 
  if (!this.isCreated) return;
 
- if (this.title) {
- this.$title.text(sanitize(this.title));
- }
-
  this.$spinner.css(
  "top",
  this.$content.height() / 2 - this.$spinner.height() / 2
@@ -1313,6 +1309,17 @@ export class OpenSeadragonCenterPanel extends CenterPanel {
  this.extension.helper.getViewingDirection() ||
  ViewingDirection.LEFT_TO_RIGHT;
 
+ if (this.title) {
+ this.$title.text(sanitize(this.title));
+ }
+
+ // if the manifest has a right-to-left viewing direction, add a class to the title to display it rtl
+ if (this.extension.helper.isRightToLeft()) {
+ this.$title.addClass("rtl");
+ } else {
+ this.$title.removeClass("rtl");
+ }
+
  if (
  this.extension.helper.isMultiCanvas() &&
  this.$prevButton &&

src/content-handlers/iiif/modules/uv-shared-module/css/center-panel.less

@@ -12,6 +12,10 @@
  text-overflow: ellipsis;
  line-height: 30px;
 
+ &.rtl {
+ direction: rtl;
+ }
+
  .xl-mediaquery({
  padding: 0 20px 0 20px;
  });