Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image Captions #199

Merged
merged 5 commits into from
Oct 25, 2023
Merged

Image Captions #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1932f0f
Image Captions
Oct 24, 2023
4fce537
Fixed tests
Oct 24, 2023
4500c2a
removed a console log
Oct 24, 2023
b404c3d
changed muted text color to match captions
Oct 24, 2023
a775c08
removed unused function and its tests
Oct 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion blocks/columns/columns.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@
/* both autoblocking options for bottom caption */
.columns.history div.image-collage.autoblocked picture ~ em,
.columns.history div.image-collage.autoblocked picture ~ p {
color: var(--transparent-grey-color-2);
color: var(--steel-blue);
font-size: var(--body-font-size-s);
margin: 1rem 0;
text-align: center;
Expand Down
2 changes: 1 addition & 1 deletion blocks/text/text.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ main .block.text.highlight a.button.primary {
}

main .block.text.muted {
color: var(--muted-text-block-color);
color: var(--steel-blue);
font-size: var(--body-font-size-s);
padding-bottom: 0.5rem;
}
Expand Down
52 changes: 5 additions & 47 deletions scripts/scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,54 +103,12 @@ function buildModalFragmentBlock(main) {
}
}

/**
* Split children of this div up into 1, 2 or 3 separate divs with cut points as specified in
* the from and to indexes, separating the elements from-to into
* a separate div on the same level and putting the remaining elements in new divs surrounding it.
* @param {HTMLElement} div The element to work on.
* @param {number} from The index from from which to put element into the middle div.
* @param {number} to The index up-to-but-not-including the element that marks then end of the
* middle div.
* @returns Returns the middle div.
*/
export function splitChildDiv(div, from, to) {
// run backwards because moving element will delete them from the original

let afterDiv;
if (to < div.children.length - 1) {
afterDiv = document.createElement('div');
for (let i = div.children.length - 1; i >= to; i -= 1) {
afterDiv.prepend(div.children[i]);
}
}

const midDiv = document.createElement('div');
for (let i = to - 1; i >= from; i -= 1) {
midDiv.prepend(div.children[i]);
}

let beforeDiv;
if (from > 0) {
beforeDiv = document.createElement('div');
for (let i = from - 1; i >= 0; i -= 1) {
beforeDiv.prepend(div.children[i]);
}
}

if (beforeDiv) {
div.parentElement.insertBefore(beforeDiv, div);
}
div.parentElement.insertBefore(midDiv, div);
if (afterDiv) {
div.parentElement.insertBefore(afterDiv, div);
}
div.parentElement.removeChild(div);

return midDiv;
}

function buildImageCollageForPicture(picture, caption, buildBlockFunction) {
const newBlock = buildBlockFunction('image-collage', { elems: [picture, caption] });
const captionText = caption.textContent;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should you use innerHTML here instead of textContent to retain any HTML tags inside it.

Copy link
Author

@dnbute dnbute Oct 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well I want to get rid of the <em> tag so the captions aren't italic anymore, so i just need the actual text

const captionP = document.createElement('p');
captionP.innerHTML = captionText;
caption.remove();
const newBlock = buildBlockFunction('image-collage', { elems: [picture, captionP] });
newBlock.classList.add('boxy-col-1');
return newBlock;
}
Expand Down
115 changes: 15 additions & 100 deletions test/scripts/scripts.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,10 @@ describe('Scripts', () => {
captionP.children = [{}, emChild];
enclosingDiv.children = [parentP, captionP];

captionP.remove = () => {
delete captionP.children[1];
};

const mockMain = {};
mockMain.querySelectorAll = () => [picture];

Expand All @@ -239,7 +243,8 @@ describe('Scripts', () => {
const mockBBFunction = (n, e) => {
blockName = n;
blockObj = e;

captionP.children[1] = document.createElement('p');
blockObj.elems = [picture, captionP];
return document.createElement('myblock');
};

Expand All @@ -249,7 +254,7 @@ describe('Scripts', () => {

expect(blockName).to.equal('image-collage');
expect(blockObj.elems[0]).to.equal(picture);
expect(blockObj.elems[1].children[1]).to.equal(emChild);
expect(blockObj.elems[1].children[1].localName).to.equal('p');

expect(enclosingDiv.lastChild.localName).to
.equal('myblock', 'Should have appended the block to the section');
Expand All @@ -275,6 +280,10 @@ describe('Scripts', () => {
picture.nextElementSibling = em;
parentP.parentElement = enclosingDiv;

em.remove = () => {
delete picture.nextElementSibling;
};

const mockdoc = {};
mockdoc.querySelectorAll = () => [picture];

Expand All @@ -283,7 +292,8 @@ describe('Scripts', () => {
const mockBBFunction = (n, e) => {
blockName = n;
blockObj = e;

em.children = document.createElement('p');
blockObj.elems = [picture, em];
return document.createElement('myblock');
};

Expand All @@ -292,9 +302,9 @@ describe('Scripts', () => {
expect(blockName).to.equal('image-collage');
expect(newChild.classList.contains('boxy-col-1')).to
.be.true;
const [actualPic, actualEM] = blockObj.elems;
const [actualPic, actualCaption] = blockObj.elems;
expect(actualPic).to.equal(picture);
expect(actualEM).to.equal(em);
expect(actualCaption).to.equal(em);
});

it('No Image Collage autoblock when no <em>', async () => {
Expand Down Expand Up @@ -340,101 +350,6 @@ describe('Scripts', () => {
expect(blockObj).to.undefined;
});

it('Test splitChildDiv with only picture and caption', async () => {
const pdiv = document.createElement('div');
const div = document.createElement('div');
const ppict = document.createElement('p');
const picture = document.createElement('picture');
const pcapt = document.createElement('p');
const em = document.createElement('em');

ppict.append(picture);
pcapt.append(em);
div.append(ppict, pcapt);
pdiv.append(div);

const res = scripts.splitChildDiv(div, 0, 2);
expect(pdiv.children.length).to.be.equal(1);
expect(pdiv.children[0]).to.be.equal(res);
expect(res.children.length).to.be.equal(2);
expect(res.children[0]).to.be.equal(ppict);
expect(res.children[1]).to.be.equal(pcapt);
});

it('Test splitChildDiv other and picture', async () => {
const pdiv = document.createElement('div');
const div = document.createElement('div');
const pother = document.createElement('p');
const ppict = document.createElement('p');
const picture = document.createElement('picture');
const pcapt = document.createElement('p');
const em = document.createElement('em');

ppict.append(picture);
pcapt.append(em);
div.append(pother, ppict, pcapt);
pdiv.append(div);

const res = scripts.splitChildDiv(div, 1, 3);
expect(pdiv.children.length).to.be.equal(2);
const preDiv = pdiv.children[0];
expect(preDiv.children.length).to.be.equal(1);
expect(preDiv.children[0]).to.be.equal(pother);
expect(pdiv.children[1]).to.be.equal(res);
});

it('Test splitChildDiv picture and other', async () => {
const pdiv = document.createElement('div');
const div = document.createElement('div');
const ppict = document.createElement('p');
const picture = document.createElement('picture');
const pcapt = document.createElement('p');
const em = document.createElement('em');
const pother1 = document.createElement('p');
const pother2 = document.createElement('p');

ppict.append(picture);
pcapt.append(em);
div.append(ppict, pcapt, pother1, pother2);
pdiv.append(div);

const res = scripts.splitChildDiv(div, 0, 2);
expect(pdiv.children.length).to.be.equal(2);
expect(pdiv.children[0]).to.be.equal(res);
const postDiv = pdiv.children[1];
expect(postDiv.children.length).to.be.equal(2);
expect(postDiv.children[0]).to.be.equal(pother1);
expect(postDiv.children[1]).to.be.equal(pother2);
});

it('Test splidChildDiv other-picture-other', async () => {
const pdiv = document.createElement('div');
const div = document.createElement('div');
const pother = document.createElement('p');
const ppict = document.createElement('p');
const picture = document.createElement('picture');
const pcapt = document.createElement('p');
const em = document.createElement('em');
const pother1 = document.createElement('p');
const pother2 = document.createElement('p');

ppict.append(picture);
pcapt.append(em);
div.append(pother, ppict, pcapt, pother1, pother2);
pdiv.append(div);

const res = scripts.splitChildDiv(div, 1, 3);
expect(pdiv.children.length).to.be.equal(3);
const preDiv = pdiv.children[0];
expect(preDiv.children.length).to.be.equal(1);
expect(preDiv.children[0]).to.be.equal(pother);
expect(pdiv.children[1]).to.be.equal(res);
const postDiv = pdiv.children[2];
expect(postDiv.children.length).to.be.equal(2);
expect(postDiv.children[0]).to.be.equal(pother1);
expect(postDiv.children[1]).to.be.equal(pother2);
});

it('Shuffles arrays', () => {
expect(shuffleArray([]).length).to.equal(0);
expect(shuffleArray(['hi'])).to.deep.equal(['hi']);
Expand Down