Right-align rtl text in title fields (#1261)

* Functionality to get rtl titles aligned properly in index, show and browse pages done

* Lint

* Export the show_default methods and import where needed.  Adds jest test to test the alignRtl method

* moved some things around to be better organized

* Lint

* Reverted to == since we aren't doing a strict match

.eslintrc.json

@@ -23,6 +23,9 @@
     "plugins": [
         "prettier"
     ],
+    "ignorePatterns": [
+        "spec/javascript/psulib_blacklight/align_rtl_index.spec.js"
+    ],
     "rules": {
         "consistent-return": "off",
         "guard-for-in": "off",

app/javascript/psulib_blacklight/javascripts/align_rtl_index.js

@@ -0,0 +1,15 @@
+const alignRtl = function () {
+  // Align rtl text properly
+  $('article').each(function () {
+    const titleLink = this.querySelector('.index_title').querySelector('a');
+    titleLink.setAttribute('dir', 'auto');
+    if (window.getComputedStyle(titleLink).direction === 'rtl') {
+      titleLink.setAttribute(
+        'class',
+        'float-right text-align-start col-sm-11 p-0 pr-4'
+      );
+    }
+  });
+};
+
+export default alignRtl;

app/javascript/psulib_blacklight/javascripts/index.js

@@ -1,8 +1,11 @@
 import './show_default';
+import alignRtl from './align_rtl_index';
 import './google_preview';
 import './a11y_advanced_search';
 import './bookmark_all_on_page';
 
+$(document).ready(alignRtl());
+
 // Otherwise bootstrap-select won't fire on turbolinked clicks to Advance Search
 $(document).on('turbolinks:load', () => {
   $(window).trigger('load.bs.select.data-api');

app/javascript/psulib_blacklight/styles/_psulib_utilities.scss

@@ -6,3 +6,8 @@
 .documents-list .record-view-only {
   display: none;
 }
+
+.text-align-start {
+  text-align: start;
+}
+

app/javascript/psulib_blacklight/styles/index.scss

@@ -52,3 +52,4 @@ $fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
 @import 'external_links';
 @import 'google_preview';
 @import 'iiif_viewer';
+

app/views/browse/_call_numbers.html.erb

@@ -29,7 +29,7 @@
                     id: doc[:id]
                   ) %>
             </td>
-            <td><%= doc[:title_display_ssm]&.join(' / ') %></td>
+            <td class="text-align-start" dir="auto"><%= doc[:title_display_ssm]&.join(' / ') %></td>
             <td><%= doc.location_display %></td>
             <td><%= doc[:publication_display_ssm]&.join(' / ') %></td>
           </tr>

app/views/catalog/_show_header_default.html.erb

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col">
+  <div class="col text-align-start" dir="auto">
     <%= render_document_heading(@document, tag: :h1) %>
   </div>
 </div>

spec/javascript/psulib_blacklight/align_rtl_index.spec.js

@@ -0,0 +1,58 @@
+import $ from 'jquery';
+import alignRtl from '../../../app/javascript/psulib_blacklight/javascripts/align_rtl_index';
+
+global.$ = $;
+global.jQuery = $;
+
+beforeEach(() => {
+  document.body.innerHTML = `
+  <article data-document-id="123" data-document-counter="4" itemscope="itemscope" itemtype="http://schema.org/Thing" class="blacklight-musical-score document document-position-4">
+    <header class="documentHeader row">
+      <h3 class="index_title document-title-heading col-sm-9 col-lg-10">
+        <span class="document-counter">4.</span>
+        <a data-context-href="/catalog/123/track?counter=4&amp;document_id=2123&amp;search_id=106" href="/catalog/123">بعض عناوين الأدب</a>
+      </h3>
+    </header>
+  </article>
+  <article data-document-id="124" data-document-counter="4" itemscope="itemscope" itemtype="http://schema.org/Thing" class="blacklight-musical-score document document-position-5">
+    <header class="documentHeader row">
+      <h3 class="index_title document-title-heading col-sm-9 col-lg-10">
+        <span class="document-counter">5.</span>
+        <a data-context-href="/catalog/124/track?counter=4&amp;document_id=2124&amp;search_id=107" href="/catalog/124">Some other title</a>
+      </h3>
+    </header>
+  </article>
+  `;
+});
+
+describe('when catalog index list contains rtl text titles', () => {
+  test('Aligns rtl text to the right but does not change ltr text', () => {
+    const mockComputedStyleRtl = {
+      direction: 'rtl',
+    };
+
+    const mockComputedStyleLtr = {
+      direction: 'ltr',
+    };
+
+    window.getComputedStyle = jest.fn().mockImplementation((element) => {
+      if (element == 'http://localhost/catalog/123') {
+        return mockComputedStyleRtl;
+      }
+      return mockComputedStyleLtr;
+    });
+
+    alignRtl();
+    expect($('a')[0].outerHTML).toBe(
+      '<a data-context-href="/catalog/123/track?counter=4&amp;' +
+      'document_id=2123&amp;search_id=106" href="/catalog/123' +
+      '" dir="auto" class="float-right text-align-start col' +
+      '-sm-11 p-0 pr-4">بعض عناوين الأدب</a>'
+    );
+    expect($('a')[1].outerHTML).toBe(
+      '<a data-context-href="/catalog/124/track?counter=4&amp;' +
+      'document_id=2124&amp;search_id=107" href="/catalog/124' +
+      '" dir="auto">Some other title</a>'
+    );
+  });
+});