Add bin/literal-widget
This commit is contained in:
parent
83dd15a7ed
commit
dadd2d4a6a
1 changed files with 204 additions and 0 deletions
204
bin/literal-widget
Normal file
204
bin/literal-widget
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
const target = document.querySelector('#literal-widget');
|
||||
|
||||
const variables = {
|
||||
handle: target.getAttribute('handle'),
|
||||
readingStatus: target.getAttribute('status'),
|
||||
layout: target.getAttribute('layout'),
|
||||
limit: parseInt(target.getAttribute('limit')) || 20,
|
||||
};
|
||||
|
||||
fetch('https://backend.literal.club/', {
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query: `
|
||||
query booksByReadingStateAndHandle($limit: Int!, $offset: Int!, $readingStatus: ReadingStatus!, $handle: String!) {
|
||||
booksByReadingStateAndHandle(
|
||||
limit: $limit
|
||||
offset: $offset
|
||||
readingStatus: $readingStatus
|
||||
handle: telescopefish
|
||||
) {
|
||||
...BookParts
|
||||
__typename
|
||||
}
|
||||
}
|
||||
|
||||
fragment BookParts on Book {
|
||||
id
|
||||
slug
|
||||
title
|
||||
subtitle
|
||||
description
|
||||
isbn10
|
||||
isbn13
|
||||
language
|
||||
pageCount
|
||||
publishedDate
|
||||
publisher
|
||||
physicalFormat
|
||||
cover
|
||||
authors {
|
||||
...AuthorMini
|
||||
__typename
|
||||
}
|
||||
gradientColors
|
||||
workId
|
||||
__typename
|
||||
}
|
||||
|
||||
fragment AuthorMini on Author {
|
||||
id
|
||||
name
|
||||
slug
|
||||
__typename
|
||||
}
|
||||
`,
|
||||
variables: {
|
||||
handle: variables.handle,
|
||||
readingStatus: variables.readingStatus,
|
||||
limit: variables.limit,
|
||||
offset: 0,
|
||||
},
|
||||
}),
|
||||
})
|
||||
.then((response) => {
|
||||
return response.json();
|
||||
})
|
||||
.then((response) => {
|
||||
const books = response.data.booksByReadingStateAndHandle || [];
|
||||
|
||||
const formatter = new Intl.ListFormat('en', { style: 'short', type: 'conjunction' });
|
||||
|
||||
const bookItems = books.map((book) => {
|
||||
const authors = formatter.format(book.authors.map((a) => a.name));
|
||||
const bookItem = document.createElement('div');
|
||||
bookItem.classList.add('literal-book-item');
|
||||
bookItem.innerHTML = `
|
||||
<a href="https://literal.club/${variables.handle}/book/${book.slug}?utm_source=${variables.handle}&utm_medium=widget" target="_blank">
|
||||
<div class="literal-book-item__inner">
|
||||
<div class="literal-book-item__image">
|
||||
<div class="literal-book-item__image_cover__outer">
|
||||
<img src="${book.cover}" alt="${book.title}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="literal-book-item__info">
|
||||
<div class="literal-book-item__title">
|
||||
${book.title}
|
||||
</div>
|
||||
<div class="literal-book-item__authors">
|
||||
${authors}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
return bookItem;
|
||||
});
|
||||
|
||||
target.append(...bookItems);
|
||||
});
|
||||
|
||||
var list = `
|
||||
#literal-widget .literal-book-item {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
transition: all .2s linear;
|
||||
}
|
||||
#literal-widget .literal-book-item:hover {
|
||||
border-color: #e1dddd;
|
||||
z-index: 1;
|
||||
}
|
||||
#literal-widget .literal-book-item a {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 10px 10px 10px 0;
|
||||
}
|
||||
#literal-widget .literal-book-item__inner {
|
||||
flex: 1 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#literal-widget .literal-book-item__image {
|
||||
width: 40px;
|
||||
flex: 0 0 40px;
|
||||
align-self: flex-start;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 23px;
|
||||
}
|
||||
#literal-widget .literal-book-item__image_cover__outer {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
line-height: 100%;
|
||||
}
|
||||
#literal-widget .literal-book-item__image_cover__outer img {
|
||||
user-select: none;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
border-top-left-radius: 1px;
|
||||
border-bottom-left-radius: 1px;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
filter: drop-shadow(0 calc((0 + 0) * 2px) calc((5 + 0) * 2px) rgba(0,0,0,calc((1.5 + 0) * .03)));
|
||||
border: 1px solid #f5f5f5;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
#literal-widget .literal-book-item__info {
|
||||
flex: 1 0;
|
||||
}
|
||||
#literal-widget .literal-book-item__title {
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
}
|
||||
#literal-widget .literal-book-item__authors {
|
||||
font-size: 14px;
|
||||
color: #9a988b;
|
||||
line-height: 145%;
|
||||
margin-top: 4px;
|
||||
}
|
||||
`;
|
||||
|
||||
var row = `
|
||||
#literal-widget {
|
||||
display: flex;
|
||||
}
|
||||
#literal-widget .literal-book-item {
|
||||
max-width: 50px;
|
||||
display: flex;
|
||||
align-self: flex-end;
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
transition: all .2s linear;
|
||||
}
|
||||
#literal-widget .literal-book-item__image_cover__outer img {
|
||||
user-select: none;
|
||||
border-top-left-radius: 1px;
|
||||
border-bottom-left-radius: 1px;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
filter: drop-shadow(0 calc((0 + 0) * 2px) calc((5 + 0) * 2px) rgba(0,0,0,calc((1.5 + 0) * .03)));
|
||||
border: 1px solid #f5f5f5;
|
||||
display: inline-block;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
#literal-widget .literal-book-item__info {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
var styleSheet = document.createElement('style');
|
||||
styleSheet.innerHTML = variables.layout === 'row' ? row : list;
|
||||
document.head.appendChild(styleSheet);
|
||||
Loading…
Reference in a new issue