diff --git a/openlibrary/plugins/openlibrary/js/editions-table/index.js b/openlibrary/plugins/openlibrary/js/editions-table/index.js index ea31b0dbdfe..f34ed07a794 100644 --- a/openlibrary/plugins/openlibrary/js/editions-table/index.js +++ b/openlibrary/plugins/openlibrary/js/editions-table/index.js @@ -8,6 +8,10 @@ export function initEditionsTable() { var rowCount; let currentLength; + // Prevent reinitialization of the editions datatable + if ($.fn.DataTable.isDataTable($('#editions'))) { + return; + } $('#editions th.title').on('mouseover', function(){ if ($(this).hasClass('sorting_asc')) { $(this).attr('title','Sort latest to earliest'); @@ -54,7 +58,6 @@ export function initEditionsTable() { }); } else { currentLength = Number(localStorage.getItem(LS_RESULTS_LENGTH_KEY)); - $('#editions').DataTable({ aoColumns: [{sType: 'html'},null], order: [ [1,'asc'] ], @@ -65,7 +68,33 @@ export function initEditionsTable() { bFilter: true, bStateSave: false, bAutoWidth: false, - pageLength: currentLength ? currentLength : DEFAULT_LENGTH - }); + pageLength: currentLength ? currentLength : DEFAULT_LENGTH, + drawCallback: function() { + if ($('#ile-toolbar')) { + const editionStorage = JSON.parse(sessionStorage.getItem('ile-items'))['edition'] + const matchEdition = (string) => { + return string.match(/OL[0-9]+[a-zA-Z]/) + } + for (const el of $('.ile-selected')) { + const anchor = el.getElementsByTagName('a'); + if (anchor.length) { + const edIdentifier = matchEdition(anchor[0].getAttribute('href')) + if (!editionStorage.includes(edIdentifier[0])) { + el.classList.remove('ile-selected'); + } + } + } + for (const el of $('.ile-selectable')) { + const anchor = el.getElementsByTagName('a'); + if (anchor.length) { + const edIdentifier = matchEdition(anchor[0].getAttribute('href')); + if (editionStorage.includes(edIdentifier[0])) { + el.classList.add('ile-selected'); + } + } + } + } + } + }) } } diff --git a/openlibrary/plugins/openlibrary/js/index.js b/openlibrary/plugins/openlibrary/js/index.js index 523b59071ea..4bf627bb4ef 100644 --- a/openlibrary/plugins/openlibrary/js/index.js +++ b/openlibrary/plugins/openlibrary/js/index.js @@ -85,12 +85,6 @@ jQuery(function () { init($); - // conditionally load functionality based on what's in the page - if (document.getElementsByClassName('editions-table--progressively-enhanced').length) { - import(/* webpackChunkName: "editions-table" */ './editions-table') - .then(module => module.initEditionsTable()); - } - const edition = document.getElementById('addWork'); const autocompleteAuthor = document.querySelector('.multi-input-autocomplete--author'); const autocompleteLanguage = document.querySelector('.multi-input-autocomplete--language'); @@ -339,8 +333,17 @@ jQuery(function () { if (document.getElementsByClassName('show-librarian-tools').length) { import(/* webpackChunkName: "ile" */ './ile') .then((module) => module.init()); + // Import ile then the datatable to apply clickable classes to all listed editions + if (document.getElementsByClassName('editions-table--progressively-enhanced').length) { + import(/* webpackChunkName: "editions-table" */ './editions-table') + .then(module => module.initEditionsTable()) + } + } + // conditionally load functionality based on what's in the page + if (document.getElementsByClassName('editions-table--progressively-enhanced').length) { + import(/* webpackChunkName: "editions-table" */ './editions-table') + .then(module => module.initEditionsTable()); } - if ($('#cboxPrevious').length) { $('#cboxPrevious').attr({'aria-label': 'Previous button', 'aria-hidden': 'true'}); } diff --git a/static/css/components/editions.less b/static/css/components/editions.less index 4df8debcd36..f1788c60962 100644 --- a/static/css/components/editions.less +++ b/static/css/components/editions.less @@ -40,7 +40,7 @@ table#editions, td.book { vertical-align: top; - display: inline-flex; + display: table-cell; } div.cover { @@ -159,6 +159,15 @@ table#editions, } } +@media only screen and (max-width: @width-breakpoint-desktop) { + table#editions { + td.book { + width: 100%; + display: inline-flex; + } + } +} + @media only screen and (max-width: @width-breakpoint-tablet) { table#editions { width: 100%;