refactor book script to not need jquery

master
aundus 2021-03-05 10:41:12 -05:00
parent 573121b9e9
commit b44747bf2f
1 changed files with 37 additions and 42 deletions

View File

@ -1,59 +1,54 @@
(function ($) {
const addbtn = $('#add-to-booklist')
const url = window.location && window.location.toString().split('/') window.onload = function() {
const bookId = url[url.length - 1].match(/(\d+)/)[0]
const addbtn = document.getElementById('add-to-booklist')
const currentList = JSON.parse(localStorage.getItem('booklist')) const currentList = JSON.parse(localStorage.getItem('booklist'))
if (currentList && currentList[bookId]) { if (currentList && currentList[bookId]) {
// book already in list // book already in list
addbtn.html('-') addbtn.innerHTML = '-'
addbtn.attr('title', 'Remove book from My Book List') addbtn.setAttribute('title', 'Remove book from My Book List')
addbtn.css('background-color', 'indianred') addbtn.setAttribute('style', 'background-color: indianred;')
addbtn.addClass('book-in-list') addbtn.classList.add('book-in-list')
} }
addbtn.on('click', function (event) { addbtn.onclick = function () {
if (addbtn.hasClass('book-in-list')) { if(addbtn.classList.contains('book-in-list')){
removeBook() removeBook()
return return
} }
// add book to list try{
let author = '' const bookData = getBookMetadata();
$('tbody>tr').each(function (index) { const newList = { ...JSON.parse(localStorage.getItem('booklist')) }
const row = $(this) newList[bookId] = bookData
const rowTitle = row.find('th:first').html()
if (rowTitle === 'Author') { addbtn.classList.add('book-in-list')
const tableRow = row.find('td:first') addbtn.innerHTML = '-'
author = tableRow.find('a:first').html() addbtn.setAttribute('title', 'Remove book from My Book List')
} addbtn.setAttribute('style', 'background-color: indianred;')
})
const bookData = { localStorage.setItem('booklist', JSON.stringify(newList))
title: $('h1').html(), console.log(localStorage.getItem('booklist'))
bookId: bookId,
imgSrc: $('img.cover-art').attr('src'),
author: author,
url: window.location.href
} }
catch(err){
const newList = { ...JSON.parse(localStorage.getItem('booklist')) } console.log('Error adding book', err)
newList[bookId] = bookData }
addbtn.addClass('book-in-list')
addbtn.html('-') }
addbtn.attr('title', 'Remove book from My Book List')
addbtn.css('background-color', 'indianred')
localStorage.setItem('booklist', JSON.stringify(newList))
console.log(localStorage.getItem('booklist'))
})
function removeBook () { function removeBook () {
const newlist = JSON.parse(localStorage.getItem('booklist')) const newlist = JSON.parse(localStorage.getItem('booklist'))
delete newlist[bookId] delete newlist[bookId]
localStorage.setItem('booklist', JSON.stringify(newlist)) localStorage.setItem('booklist', JSON.stringify(newlist))
console.log(localStorage.getItem('booklist')) console.log(localStorage.getItem('booklist'))
addbtn.removeClass('book-in-list') addbtn.classList.remove('book-in-list')
addbtn.html('+') addbtn.innerHTML = '+'
addbtn.attr('title', 'Add book to My Book List') addbtn.setAttribute('title', 'Add book to My Book List')
addbtn.css('background-color', 'cornflowerblue') addbtn.setAttribute('style', 'background-color: cornflowerblue;')
} }
})(jQuery) // eslint-disable-line
}