Skip to content

Commit

Permalink
Support multiple hotspots
Browse files Browse the repository at this point in the history
  • Loading branch information
@jrlarano
jrlarano committed Mar 19, 2024
1 parent a14fa94 commit 27c2153
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 85 deletions.
6 changes: 6 additions & 0 deletions lib/kits/core-ui/page-decorations.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@
position absolute
z-index 99

.sgn-pagedecoration-hotspot-link
text-decoration none
font-size 14px

.sgn-pagedecoration-hotspot-link-content
display flex
align-items flex-end
Expand All @@ -53,6 +57,8 @@
white-space nowrap
overflow hidden
text-overflow ellipsis
margin-left auto
margin-right auto



Expand Down
163 changes: 78 additions & 85 deletions lib/kits/core-ui/page-decorations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ import PageSpread from '../../verso-browser/page_spread';
import PagedPublicationPageSpread from '../paged-publication/page-spread';

const defaultTemplate = `\
{{#pageDecoration.hotspots}}
{{#hotspot}}
{{#link_embed}}
<iframe src="{{link}}" height="100%" width="100%" style="border:0;"></iframe>
{{/link_embed}}
Expand All @@ -19,16 +18,16 @@ const defaultTemplate = `\
</div>
</a>
{{/link_embed}}
{{/pageDecoration.hotspots}}
{{^pageDecoration.hotspots}}
{{/hotspot}}
{{^hotspot}}
{{#pageDecoration.website_link}}
<div class="sgn-pagedecoration__content">
<a href="{{pageDecoration.website_link}}" rel="noreferrer noopener" target="_blank">
<p class="sgn-pagedecoration-item__domain">{{pageDecoration.hostname}}</p>
</a>
</div>
{{/pageDecoration.website_link}}
{{/pageDecoration.hotspots}}
{{/hotspot}}
\
`;

Expand Down Expand Up @@ -71,92 +70,86 @@ const PageDecorations = () => {

filteredPageDecorations?.forEach((pageDecoration) => {
if (pageDecoration && pageDecoration.hotspots?.length) {
const [hotspot] = pageDecoration.hotspots;
const versoPageSpread = versoPageSpreads?.find((pageSpread) =>
pageSpread.pageIds.includes(
`page${pageDecoration.page_number}`
)
);
const contentRect = versoPageSpread?.getContentRect();
const transformedHotspot = {
...hotspot,
hostname: getHostname(hotspot.link)
};

const pageSpreadEl = pageSpreads
?.find((spread) =>
spread
.getPages()
.some(
(page) =>
page.id ===
`page${pageDecoration.page_number}`
pageDecoration.hotspots?.forEach((hotspot, index) => {
const el = document.createElement('div');
el.classList.add('sgn-pagedecoration-hotspot');
el.classList.add(`sgn-pagedecoration-hotspot-${index}`);

let x1 = hotspot.x1;
let x2 = hotspot.x2;

const versoPageSpread = versoPageSpreads?.find(
(pageSpread) =>
pageSpread.pageIds.includes(
`page${pageDecoration.page_number}`
)
)
?.getEl();
const boundingRect = pageSpreadEl?.getBoundingClientRect();

const el = document.createElement('div');
el.classList.add('sgn-pagedecoration-hotspot');

let x1 = hotspot.x1;
let x2 = hotspot.x2;

if (versoPageSpread?.pageIds?.length == 2 && contentRect) {
contentRect.width = contentRect?.width / 2;
if (
versoPageSpread?.pageIds?.indexOf(
`page${pageDecoration.page_number}`
);
const contentRect = versoPageSpread?.getContentRect();

const pageSpreadEl = pageSpreads
?.find((spread) =>
spread
.getPages()
.some(
(page) =>
page.id ===
`page${pageDecoration.page_number}`
)
)
) {
x1 += 1;
x2 += 1;
?.getEl();
const boundingRect = pageSpreadEl?.getBoundingClientRect();

if (versoPageSpread?.pageIds?.length == 2 && contentRect) {
contentRect.width = contentRect?.width / 2;
if (
versoPageSpread?.pageIds?.indexOf(
`page${pageDecoration.page_number}`
)
) {
x1 += 1;
x2 += 1;
}
}
}

let top = Math.round(
((contentRect?.height || 0) / 100) * (hotspot.y1! * 100)
);

let left = Math.round(
((contentRect?.width || 0) / 100) * (x1 * 100)
);

const width = Math.round(
((contentRect?.width || 0) / 100) * ((x2 - x1) * 100)
);

const height = Math.round(
((contentRect?.height || 0) / 100) *
((hotspot.y2 - hotspot.y1) * 100)
);

top += Math.round(contentRect?.top || 0);
left += Math.round(contentRect?.left || 0);
left -= boundingRect?.left || 0;

el.style.top = `${top}px`;
el.style.left = `${left}px`;
el.style.width = `${width}px`;
el.style.height = `${height}px`;
el.style.transform = `rotate(${hotspot.rotate}deg)`;

el.innerHTML = Mustache.render(
pageDecorationTemplate?.innerHTML || defaultTemplate,
{
pageDecoration: {
...pageDecoration,
hotspots: [transformedHotspot],
hostname:
pageDecoration.website_link_title ||
getHostname(pageDecoration?.website_link || ''),
width: `${width}px`,
height: `${height}px`
let top = Math.round(
((contentRect?.height || 0) / 100) * (hotspot.y1! * 100)
);

let left = Math.round(
((contentRect?.width || 0) / 100) * (x1 * 100)
);

const width = Math.round(
((contentRect?.width || 0) / 100) * ((x2 - x1) * 100)
);

const height = Math.round(
((contentRect?.height || 0) / 100) *
((hotspot.y2 - hotspot.y1) * 100)
);

top += Math.round(contentRect?.top || 0);
left += Math.round(contentRect?.left || 0);
left -= boundingRect?.left || 0;

el.style.top = `${top}px`;
el.style.left = `${left}px`;
el.style.width = `${width}px`;
el.style.height = `${height}px`;
el.style.transform = `rotate(${hotspot.rotate}deg)`;

Check failure on line 139 in lib/kits/core-ui/page-decorations.ts

View workflow job for this annotation

GitHub Actions / types 

Property 'rotate' does not exist on type '{ x1: number; x2: number; y1: number; y2: number; type: string; link: string; }'.

el.innerHTML = Mustache.render(
pageDecorationTemplate?.innerHTML || defaultTemplate,
{
hotspot: {
...hotspot,
hostname: getHostname(hotspot.link)
}
}
}
);
);

pageDecorationsEls?.appendChild(el);
pageDecorationsEls?.appendChild(el);
});
} else if (
pageDecoration &&
pageDecoration.website_link &&
Expand Down

0 comments on commit 27c2153

Please sign in to comment.