Skip to content

Commit

Permalink
Display images defined in SAB with placements (#430)
Browse files Browse the repository at this point in the history 
* Display illustrations defined with placements

* Pass lint check and remove unused variable definition
  • Loading branch information
@davidmoore1
davidmoore1 authored Dec 6, 2023
1 parent 765026d commit ec766c8
Show file tree
Hide file tree
Showing 2 changed files with 116 additions and 21 deletions.
61 changes: 59 additions & 2 deletions scripts/convertConfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,17 @@ export type ConfigData = {
collection: string;
};
}[];
illustrations?: {
width: number;
height: number;
filename: string;
placement?: {
pos: string;
ref: string;
collection: string;
caption: string;
};
}[];
defaultLayout?: string;
layouts?: {
mode: string;
Expand Down Expand Up @@ -689,7 +700,7 @@ function convertConfig(dataDir: string, verbose: number) {
? parseInt(tag.attributes.getNamedItem('width')!.value)
: 0;
const tagHeight = tag.attributes.getNamedItem('height')
? parseInt(tag.attributes.getNamedItem('width')!.value)
? parseInt(tag.attributes.getNamedItem('height')!.value)
: 0;
const onlineUrlHTML = tag.getElementsByTagName('online-url')[0]
? tag.getElementsByTagName('online-url')[0]?.innerHTML
Expand All @@ -705,7 +716,53 @@ function convertConfig(dataDir: string, verbose: number) {
});
}
}

const imagesTags = document.getElementsByTagName('images');
if (imagesTags?.length > 0) {
data.illustrations = [];
for (const tag of imagesTags) {
const imageType = tag.attributes.getNamedItem('type')
? tag.attributes.getNamedItem('type')!.value
: '';
if (imageType === 'illustration') {
const illustrationTags = tag.getElementsByTagName('image');
if (illustrationTags?.length > 0) {
for (const image of illustrationTags) {
const filename = image.getElementsByTagName('filename')[0]
? image.getElementsByTagName('filename')[0]?.innerHTML
: image.innerHTML;
const imageWidth = image.attributes.getNamedItem('width')
? parseInt(image.attributes.getNamedItem('width')!.value)
: 0;
const imageHeight = image.attributes.getNamedItem('height')
? parseInt(image.attributes.getNamedItem('height')!.value)
: 0;
const placementTag = image.getElementsByTagName('placement')[0];
const placement =
placementTag == undefined
? undefined
: {
pos: placementTag.attributes.getNamedItem('pos')!.value,
ref: placementTag.attributes
.getNamedItem('ref')!
.value.split('|')[1],
caption: placementTag.attributes.getNamedItem('caption')
? placementTag.attributes.getNamedItem('caption')!.value
: '',
collection: placementTag.attributes
.getNamedItem('ref')!
.value.split('|')[0]
};
data.illustrations.push({
filename: filename,
width: imageWidth,
height: imageHeight,
placement
});
}
}
}
}
}
const layoutRoot = document.getElementsByTagName('layouts')[0];
data.defaultLayout = layoutRoot?.attributes.getNamedItem('default')?.value;

Expand Down
76 changes: 57 additions & 19 deletions src/lib/components/ScriptureViewSofria.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -408,6 +408,43 @@ TODO:
addVideoLinks(document, videos);
}
}
function addIllustrations(illustrations) {
if (illustrations) {
illustrations.forEach((illustration, index) => {
// ref can be MAT 1:1 or MAT.1.1
let verse = illustration.placement.ref.split(/[:.]/).at(-1);
const illustrationBlockDiv = createIllustrationBlock(illustration.filename, illustration.placement.caption);
placeElement(document, container, illustrationBlockDiv, illustration.placement.pos, verse);
});
}
}
function createIllustrationBlock(source: string, caption?: string) {
const imageSource = base + '/illustrations/' + source;
const divFigure = document.createElement('div');
divFigure.classList.add('image-block');
const spanFigure = document.createElement('span');
spanFigure.classList.add('image');
const figureImg = document.createElement('img');
figureImg.setAttribute('src', imageSource);
figureImg.style.display = 'inline-block';
spanFigure.appendChild(figureImg);
divFigure.appendChild(spanFigure);
if (caption !== null && caption !== '') {
const divFigureText = createIllustrationCaptionBlock(caption);
divFigure.appendChild(divFigureText);
}
return divFigure;
}
function createIllustrationCaptionBlock(caption: string) {
const divFigureText = document.createElement('div');
divFigureText.classList.add('caption');
const spanFigureText = document.createElement('span');
spanFigureText.classList.add('caption');
const spanFigureTextNode = document.createTextNode(caption);
spanFigureText.append(spanFigureTextNode);
divFigureText.append(spanFigureText);
return divFigureText;
}
function addFooter(document: Document, container: HTMLElement, docSet: string) {
const collection = docSet.split('_')[1];
const footer = config.bookCollections.find((x) => x.id === collection)?.footer;
Expand Down Expand Up @@ -446,17 +483,8 @@ TODO:
appendPhrase(workspace);
}
workspace.phraseDiv = null;
const divFigure = createIllustrationBlock(source, null);
const imageSource = base + '/illustrations/' + source;
const divFigure = document.createElement('div');
divFigure.classList.add('image-block');
const spanFigure = document.createElement('span');
spanFigure.classList.add('image');
const figureImg = document.createElement('img');
figureImg.setAttribute('src', imageSource);
figureImg.style.display = 'inline-block';
spanFigure.appendChild(figureImg);
divFigure.appendChild(spanFigure);
workspace.figureDiv = divFigure;
if (showImage()) {
checkImageExists(imageSource, divFigure);
Expand Down Expand Up @@ -518,7 +546,8 @@ TODO:
bookmarks: any[],
notes: any[],
highlights: any[],
videos: any[]
videos: any[],
illustrations: any[]
) => {
// Is it possible that this could be called and proskomma is not set yet?
if (!proskomma) return;
Expand Down Expand Up @@ -598,6 +627,7 @@ TODO:
addBookmarkedVerses(bookmarks);
addHighlightedVerses(highlights);
addVideos(videos);
addIllustrations(illustrations);
}
addFooter(document, container, docSet);
}
Expand Down Expand Up @@ -844,13 +874,7 @@ TODO:
break;
}
case 'fig': {
const divFigureText = document.createElement('div');
divFigureText.classList.add('caption');
const spanFigureText = document.createElement('span');
spanFigureText.classList.add('caption');
const spanFigureTextNode = document.createTextNode(text);
spanFigureText.append(spanFigureTextNode);
divFigureText.append(spanFigureText);
const divFigureText = createIllustrationCaptionBlock(text);
workspace.figureDiv.append(divFigureText);
break;
}
Expand Down Expand Up @@ -1356,6 +1380,18 @@ TODO:
);
return videos;
}
function illustrationsForChapter(docSet: string, bookCode: string, chapter: string) {
let collection = docSet.split('_')[1];
let illustrations = config.illustrations?.filter(
(x) =>
x.placement &&
x.placement.collection === collection &&
(x.placement.ref.startsWith(bookCode + ' ' + chapter + ':') ||
x.placement.ref.startsWith(bookCode + '.' + chapter + '.'))
);
return illustrations;
}
$: fontSize = bodyFontSize + 'px';
$: lineHeight = bodyLineHeight + '%';
Expand Down Expand Up @@ -1388,6 +1424,7 @@ TODO:
const chapter = chapterToDisplay;
const docSet = currentDocSet;
const videos = videosForChapter(docSet, bookCode, chapter);
const illustrations = illustrationsForChapter(docSet, bookCode, chapter);
query(
docSet,
bookCode,
Expand All @@ -1398,7 +1435,8 @@ TODO:
bookmarks,
notes,
highlights,
videos
videos,
illustrations
);
performance.mark('query-end');
performance.measure('query-duration', 'query-start', 'query-end');
Expand Down

0 comments on commit ec766c8

Please sign in to comment.