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

Jamoore branch #3

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from
+31 −10
Draft

Jamoore branch #3

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
929c54a
Refactor marquee.js for improved code readability and maintainability
janellemoore Feb 6, 2024
c45b5c3
new message
janellemoore Feb 6, 2024
002d7e4
peanut
janellemoore Feb 6, 2024
bbf81bd
Merge branch 'jamoore-main' into jamoore-branch
janellemoore Feb 6, 2024
a16c55a
monster
janellemoore Feb 6, 2024
f731442
tiny
janellemoore Feb 6, 2024
530e210
Merge branch 'jamoore-main' into jamoore-branch
janellemoore Feb 6, 2024
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
41 changes: 31 additions & 10 deletions libs/blocks/marquee/marquee.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@
* Marquee - v6.0
*/

import { decorateButtons, getBlockSize, decorateBlockBg } from '../../utils/decorate.js';
import {
decorateButtons,
getBlockSize,
decorateBlockBg,
} from '../../utils/decorate.js';
import { createTag, getConfig, loadStyle } from '../../utils/utils.js';

// [headingSize, bodySize, detailSize]
Expand All @@ -24,7 +28,9 @@
headingEl.nextElementSibling?.classList.add(`body-${typeSize[1]}`);
const sib = headingEl.previousElementSibling;
if (sib) {
const className = sib.querySelector('img, .icon') ? 'icon-area' : `detail-${typeSize[2]}`;
const className = sib.querySelector('img, .icon')
? 'icon-area'
: `detail-${typeSize[2]}`;
sib.classList.add(className);
sib.previousElementSibling?.classList.add('icon-area');
}
Expand All @@ -43,13 +49,16 @@
a.appendChild(picture);
}
});
if (iconArea.childElementCount > 1) iconArea.classList.add('icon-area-multiple');
if (iconArea.childElementCount > 1)
iconArea.classList.add('icon-area-multiple');
}

function extendButtonsClass(text) {
const buttons = text.querySelectorAll('.con-button');
if (buttons.length === 0) return;
buttons.forEach((button) => { button.classList.add('button-justified-mobile'); });
buttons.forEach((button) => {
button.classList.add('button-justified-mobile');
});
}

const decorateImage = (media) => {
Expand All @@ -58,7 +67,11 @@
const imageLink = media.querySelector('a');
const picture = media.querySelector('picture');

if (imageLink && picture && !imageLink.parentElement.classList.contains('modal-img-link')) {
if (
imageLink &&
picture &&
!imageLink.parentElement.classList.contains('modal-img-link')
) {
imageLink.textContent = '';
imageLink.append(picture);
}
Expand All @@ -70,18 +83,19 @@
const stylePromise = new Promise((resolve) => {
loadStyle(`${base}/blocks/mnemonic-list/mnemonic-list.css`, resolve);
});
const loadModule = import('../mnemonic-list/mnemonic-list.js')
.then(({ decorateMnemonicList }) => decorateMnemonicList(foreground));
const loadModule = import('../mnemonic-list/mnemonic-list.js').then(
({ decorateMnemonicList }) => decorateMnemonicList(foreground)
);
await Promise.all([stylePromise, loadModule]);
} catch (err) {
window.lana?.log(`Failed to load mnemonic list module: ${err}`);
}
}

export default async function init(el) {

Check failure on line 95 in libs/blocks/marquee/marquee.js

View workflow job for this annotation

GitHub Actions / Running eslint 

[eslint] reported by reviewdog 🐶
Block must not be padded by blank lines.

Raw Output:
{"ruleId":"padded-blocks","severity":2,"message":"Block must not be padded by blank lines.","line":95,"column":40,"nodeType":"BlockStatement","messageId":"neverPadBlock","endLine":97,"endColumn":3,"fix":{"range":[2729,2731],"text":"\n"}}
const excDark = ['light', 'quiet'];
if (!excDark.some((s) => el.classList.contains(s))) el.classList.add('dark');
const children = el.querySelectorAll(':scope > div');

Check warning on line 98 in libs/blocks/marquee/marquee.js

View workflow job for this annotation

GitHub Actions / Running eslint 

[eslint] reported by reviewdog 🐶
Unexpected console statement.

Raw Output:
{"ruleId":"no-console","severity":1,"message":"Unexpected console statement.","line":98,"column":5,"nodeType":"MemberExpression","messageId":"unexpected","endLine":98,"endColumn":16}
const foreground = children[children.length - 1];
if (children.length > 1) {
children[0].classList.add('background');
Expand All @@ -92,19 +106,22 @@
const text = headline.closest('div');
text.classList.add('text');
const media = foreground.querySelector(':scope > div:not([class])');

if (el.classList.contains('new-variant')) {
console.log('tiny');
}
Comment on lines +109 to +111
Copy link
Collaborator

Choose a reason for hiding this comment

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

Some blocking issue comment.

if (media) {
media.classList.add('media');
if (!media.querySelector('video, a[href*=".mp4"]')) decorateImage(media);
}

const firstDivInForeground = foreground.querySelector(':scope > div');
if (firstDivInForeground?.classList.contains('media')) el.classList.add('row-reversed');
if (firstDivInForeground?.classList.contains('media'))
el.classList.add('row-reversed');

const size = getBlockSize(el);
decorateButtons(text, size === 'large' ? 'button-xl' : 'button-l');
decorateText(text, size);
const iconArea = text.querySelector('.icon-area');

Check failure on line 124 in libs/blocks/marquee/marquee.js

View workflow job for this annotation

GitHub Actions / Running eslint 

[eslint] reported by reviewdog 🐶
Expected no linebreak before this statement.

Raw Output:
{"ruleId":"nonblock-statement-body-position","severity":2,"message":"Expected no linebreak before this statement.","line":124,"column":5,"nodeType":"ExpressionStatement","messageId":"expectNoLinebreak","endLine":124,"endColumn":38,"fix":{"range":[3788,3793],"text":" "}}

Check failure on line 124 in libs/blocks/marquee/marquee.js

View workflow job for this annotation

GitHub Actions / Running eslint 

[eslint] reported by reviewdog 🐶
Expected { after 'if' condition.

Raw Output:
{"ruleId":"curly","severity":2,"message":"Expected { after 'if' condition.","line":124,"column":5,"nodeType":"IfStatement","messageId":"missingCurlyAfterCondition","endLine":124,"endColumn":38,"fix":{"range":[3793,3826],"text":"{el.classList.add('row-reversed');}"}}
if (iconArea?.childElementCount > 1) decorateMultipleIconArea(iconArea);
extendButtonsClass(text);
if (el.classList.contains('split')) {
Expand All @@ -122,11 +139,15 @@
}

if (mediaCreditInner) {
const mediaCredit = createTag('div', { class: 'media-credit container' }, mediaCreditInner);
const mediaCredit = createTag(
'div',
{ class: 'media-credit container' },
mediaCreditInner
);
el.appendChild(mediaCredit);
el.classList.add('has-credit');
media?.lastChild.remove();
}

Check failure on line 150 in libs/blocks/marquee/marquee.js

View workflow job for this annotation

GitHub Actions / Running eslint 

[eslint] reported by reviewdog 🐶
Missing trailing comma.

Raw Output:
{"ruleId":"comma-dangle","severity":2,"message":"Missing trailing comma.","line":150,"column":25,"nodeType":"Identifier","messageId":"missing","endLine":151,"endColumn":1,"fix":{"range":[4726,4750],"text":"mediaCreditInner,\n      )"}}
}
if (el.classList.contains('mnemonic-list') && foreground) {
await loadMnemonicList(foreground);
Expand Down
Loading