From c0352e1e48b7929a097a8f083b988cd73f84c770 Mon Sep 17 00:00:00 2001 From: Sandy Chu Date: Tue, 17 Sep 2024 17:10:09 -0700 Subject: [PATCH 1/2] Change initialization order of ILE and editions datatable for magic select --- .../openlibrary/js/editions-table/index.js | 16 +++++++++++--- openlibrary/plugins/openlibrary/js/index.js | 21 +++++++++++++------ static/css/components/editions.less | 11 +++++++++- 3 files changed, 38 insertions(+), 10 deletions(-) diff --git a/openlibrary/plugins/openlibrary/js/editions-table/index.js b/openlibrary/plugins/openlibrary/js/editions-table/index.js index ea31b0dbdfe..32f55f61852 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,14 @@ export function initEditionsTable() { bFilter: true, bStateSave: false, bAutoWidth: false, - pageLength: currentLength ? currentLength : DEFAULT_LENGTH - }); + pageLength: currentLength ? currentLength : DEFAULT_LENGTH, + drawCallback: function() { + if ($('#ile-toolbar').css('display') === 'none') { + for (const elem of $('.ile-selected')) { + elem.classList.remove('ile-selected'); + } + } + } + }) } } diff --git a/openlibrary/plugins/openlibrary/js/index.js b/openlibrary/plugins/openlibrary/js/index.js index 523b59071ea..ecef825fbb0 100644 --- a/openlibrary/plugins/openlibrary/js/index.js +++ b/openlibrary/plugins/openlibrary/js/index.js @@ -85,11 +85,11 @@ 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()); - } + // // 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'); @@ -339,8 +339,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%; From f816e5287bf9a177f6b67fed15cbc823dd562460 Mon Sep 17 00:00:00 2001 From: Sandy Chu Date: Wed, 18 Sep 2024 05:30:52 -0700 Subject: [PATCH 2/2] Fix edge case for magic select interaction with edition table --- .../openlibrary/js/editions-table/index.js | 25 ++++++++++++++++--- openlibrary/plugins/openlibrary/js/index.js | 6 ----- 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/openlibrary/plugins/openlibrary/js/editions-table/index.js b/openlibrary/plugins/openlibrary/js/editions-table/index.js index 32f55f61852..f34ed07a794 100644 --- a/openlibrary/plugins/openlibrary/js/editions-table/index.js +++ b/openlibrary/plugins/openlibrary/js/editions-table/index.js @@ -70,9 +70,28 @@ export function initEditionsTable() { bAutoWidth: false, pageLength: currentLength ? currentLength : DEFAULT_LENGTH, drawCallback: function() { - if ($('#ile-toolbar').css('display') === 'none') { - for (const elem of $('.ile-selected')) { - elem.classList.remove('ile-selected'); + 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 ecef825fbb0..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');