Skip to content

Commit

Permalink
final changes
Browse files Browse the repository at this point in the history
  • Loading branch information
Drashti Modasara committed Nov 21, 2023
1 parent e7f6252 commit f9787b3
Show file tree
Hide file tree
Showing 7 changed files with 182 additions and 7 deletions.
6 changes: 6 additions & 0 deletions creativecloud/blocks/interactive-marquee/interactive-marquee.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,12 @@ function interactiveInit(el) {

export default async function init(el) {
switch (true) {
case el.classList.contains('genfill'): {
interactiveInit(el);
const { default: decorateGenfill } = await import('../../features/genfill/genfill-interactive.js');
decorateGenfill(el);
break;
}
case el.classList.contains('firefly'): {
interactiveInit(el);
loadStyle('/creativecloud/features/interactive-elements/interactive-elements.css');
Expand Down
58 changes: 58 additions & 0 deletions creativecloud/features/genfill/genfill-interactive.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,20 @@
display: none;
}

/* Enticement */
.enticement-arrow {
display: none;
}

.enticement-text {
display: none;
max-width: 30ch;
}

.enticement-text.light {
color: #FFFFFF;
}

@media screen and (max-width: 600px) {
.genfill .mobile-media picture {
display: none;
Expand All @@ -40,6 +54,30 @@
.genfill .tablet-media picture:first-child {
display: block;
}

/* Enticement */
.enticement-arrow {
width: 49px !important;
height: 73px !important;
position: absolute;
right: 575px;
top: -45px;
display: block;
}

.enticement-text {
position: absolute;
right: 345px;
top: -60px;
width: 240px;
display: block;
color: #111111;

}

.enticement-text.light {
color: #FFFFFF;
}
}

@media screen and (min-width: 1200px) {
Expand All @@ -51,4 +89,24 @@
.genfill .desktop-media picture:first-child {
display: block;
}

/* Enticement */
.enticement-arrow {
width: 49px !important;
height: 73px !important;
position: absolute;
right: 575px;
top: -45px;
display: block;
}

.enticement-text {
position: absolute;
right: 345px;
top: -60px;
width: 240px;
display: block;
color: #000000;

}
}
14 changes: 7 additions & 7 deletions creativecloud/features/genfill/genfill-interactive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,13 @@ function handleClick(pics) {
}

function addEnticement(container, enticement, mode) {
const enticementElement = createEnticement(enticement.innerText, mode);
enticementElement.classList.add('enticement');
const n = container.children.length;
const desktopMedia = container.querySelector('.desktop-media');
const tabletMedia = (n > 2) ? container.querySelector('.tablet-media') : null;
desktopMedia.insertBefore(enticementElement, desktopMedia.firstElementChild);
tabletMedia?.insertBefore(enticementElement.cloneNode(true), tabletMedia.firstElementChild);
const enticementElement = createEnticement(enticement.innerText, mode);

Check failure on line 42 in creativecloud/features/genfill/genfill-interactive.js

View workflow job for this annotation

GitHub Actions / Running eslint 

[eslint] reported by reviewdog 🐶
Expected indentation of 2 spaces but found 0.

Raw Output:
{"ruleId":"indent","severity":2,"message":"Expected indentation of 2 spaces but found 0.","line":42,"column":1,"nodeType":"Keyword","messageId":"wrongIndentation","endLine":42,"endColumn":1,"fix":{"range":[1201,1201],"text":"  "}}
enticementElement.classList.add('enticement');

Check failure on line 43 in creativecloud/features/genfill/genfill-interactive.js

View workflow job for this annotation

GitHub Actions / Running eslint 

[eslint] reported by reviewdog 🐶
Expected indentation of 2 spaces but found 0.

Raw Output:
{"ruleId":"indent","severity":2,"message":"Expected indentation of 2 spaces but found 0.","line":43,"column":1,"nodeType":"Identifier","messageId":"wrongIndentation","endLine":43,"endColumn":1,"fix":{"range":[1273,1273],"text":"  "}}
const n = container.children.length;

Check failure on line 44 in creativecloud/features/genfill/genfill-interactive.js

View workflow job for this annotation

GitHub Actions / Running eslint 

[eslint] reported by reviewdog 🐶
Expected indentation of 2 spaces but found 0.

Raw Output:
{"ruleId":"indent","severity":2,"message":"Expected indentation of 2 spaces but found 0.","line":44,"column":1,"nodeType":"Keyword","messageId":"wrongIndentation","endLine":44,"endColumn":1,"fix":{"range":[1320,1320],"text":"  "}}
const desktopMedia = container.querySelector('.desktop-media');

Check failure on line 45 in creativecloud/features/genfill/genfill-interactive.js

View workflow job for this annotation

GitHub Actions / Running eslint 

[eslint] reported by reviewdog 🐶
Expected indentation of 2 spaces but found 0.

Raw Output:
{"ruleId":"indent","severity":2,"message":"Expected indentation of 2 spaces but found 0.","line":45,"column":1,"nodeType":"Keyword","messageId":"wrongIndentation","endLine":45,"endColumn":1,"fix":{"range":[1357,1357],"text":"  "}}
const tabletMedia = (n > 2) ? container.querySelector('.tablet-media') : null;

Check failure on line 46 in creativecloud/features/genfill/genfill-interactive.js

View workflow job for this annotation

GitHub Actions / Running eslint 

[eslint] reported by reviewdog 🐶
Expected indentation of 2 spaces but found 0.

Raw Output:
{"ruleId":"indent","severity":2,"message":"Expected indentation of 2 spaces but found 0.","line":46,"column":1,"nodeType":"Keyword","messageId":"wrongIndentation","endLine":46,"endColumn":1,"fix":{"range":[1421,1421],"text":"  "}}
desktopMedia.insertBefore(enticementElement, desktopMedia.firstElementChild);

Check failure on line 47 in creativecloud/features/genfill/genfill-interactive.js

View workflow job for this annotation

GitHub Actions / Running eslint 

[eslint] reported by reviewdog 🐶
Expected indentation of 2 spaces but found 0.

Raw Output:
{"ruleId":"indent","severity":2,"message":"Expected indentation of 2 spaces but found 0.","line":47,"column":1,"nodeType":"Identifier","messageId":"wrongIndentation","endLine":47,"endColumn":1,"fix":{"range":[1500,1500],"text":"  "}}
tabletMedia?.insertBefore(enticementElement.cloneNode(true), tabletMedia.firstElementChild);

Check failure on line 48 in creativecloud/features/genfill/genfill-interactive.js

View workflow job for this annotation

GitHub Actions / Running eslint 

[eslint] reported by reviewdog 🐶
Expected indentation of 2 spaces but found 0.

Raw Output:
{"ruleId":"indent","severity":2,"message":"Expected indentation of 2 spaces but found 0.","line":48,"column":1,"nodeType":"Identifier","messageId":"wrongIndentation","endLine":48,"endColumn":1,"fix":{"range":[1578,1578],"text":"  "}}
}

function getDeviceByScreenSize() {
Expand Down
Empty file added test/blocks/interactive-marquee/interactive-marquee.test.js
View file
Empty file.
Empty file added test/blocks/interactive-marquee/mocks/interactive-marquee.html
View file
Empty file.
38 changes: 38 additions & 0 deletions test/features/genfill/genfill-interactive.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { readFile } from '@web/test-runner-commands';
import { expect } from '@esm-bundle/chai';
import setInteractiveFirefly from '../../../creativecloud/features/genfill/genfill-interactive.js';

document.body.innerHTML = await readFile({ path: './mocks/genfill.html' });
describe('genfill-marquee', async () => {
const interactiveContainer = document.querySelector('.genfill');
setInteractiveFirefly(interactiveContainer);
it('media for different viewports should exist', () => {
const mobileMedia = document.querySelector('.mobile-media');
const tabletMedia = document.querySelector('.tablet-media');
const desktopMedia = document.querySelector('.desktop-media');
expect(mobileMedia).to.exist;
expect(tabletMedia).to.exist;
expect(desktopMedia).to.exist;
});

// it('Prompt should should be placed at proper place in interactive container', () => {
// const fireflypromptbar = document.querySelector('.fireflyPrompt');
// expect(fireflypromptbar).to.exist;
// });

// it('Interactive selector should exist', () => {
// const selector = document.querySelector('.options');
// expect(selector).to.exist;
// });

// it('Interactive selector should be placed at proper place in interactive container', () => {
// const fireflyselector = document.querySelector('.fireflySelectorTray');
// expect(fireflyselector).to.exist;
// });
it('Enticement should exist', () => {
const enticementText = document.querySelector('.enticementText');
const enticementArrow = document.querySelector('.enticementArrow');
expect(enticementText).to.exist;
expect(enticementArrow).to.exist;
});
});
73 changes: 73 additions & 0 deletions test/features/genfill/mocks/genfill.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<div class="interactive-marquee light genfill" daa-lh="b1|interactive-marquee|default|default">
<div class="background">
<div data-valign="middle">
<picture>
<source type="image/webp" srcset="./media_17d766f825a9e81814caa27c230d9acc7f824bd7c.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_17d766f825a9e81814caa27c230d9acc7f824bd7c.png?width=750&amp;format=webply&amp;optimize=medium">
<source type="image/png" srcset="./media_17d766f825a9e81814caa27c230d9acc7f824bd7c.png?width=2000&amp;format=png&amp;optimize=medium" media="(min-width: 600px)">
<img alt="" src="./media_17d766f825a9e81814caa27c230d9acc7f824bd7c.png?width=750&amp;format=png&amp;optimize=medium" width="1600" height="750">
</picture>
</div>
</div>
<div class="foreground container">
<div data-valign="middle" class="text">
<p class="icon-area">
<picture>
<source type="image/webp" srcset="./media_12bfb726aa0bd8e9f444f69e2bbeb3950cb2a867b.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_12bfb726aa0bd8e9f444f69e2bbeb3950cb2a867b.png?width=750&amp;format=webply&amp;optimize=medium">
<source type="image/png" srcset="./media_12bfb726aa0bd8e9f444f69e2bbeb3950cb2a867b.png?width=2000&amp;format=png&amp;optimize=medium" media="(min-width: 600px)">
<img loading="lazy" alt="" src="./media_12bfb726aa0bd8e9f444f69e2bbeb3950cb2a867b.png?width=750&amp;format=png&amp;optimize=medium" width="154" height="150">
</picture><div class="heading-xs icon-text">Photoshop</div></p>
<h2 id="edit-photos-online-with-adobe-photoshop" class="heading-xxl">Edit photos online with Adobe Photoshop</h2>
<p class="body-xl">Add, remove, or expand content in images right in your browser with Photoshop on the web. Included in every Photoshop plan.</p>
<p class="action-area body-xl pricing"><a href="https://www.adobe.com/" class="con-button blue button-l button-justified-mobile" daa-ll="Free Trial-1|Edit photos online w">Free Trial</a> <a href="http://www.adobe.com/" class="con-button outline button-l button-justified-mobile" daa-ll="Explore Photoshop on-2|Edit photos online w">Explore Photoshop online</a></p>
</div>

<div class="interactive-container"><div data-valign="middle" class="media mobile-media tablet-media desktop-media">










<div class="enticement"><h2 class="enticementText heading-l">See it in action</h2><img class="enticementArrow" alt="" src="https://main--cc--adobecom.hlx.page/drafts/ruchika/svg/enticement-arrow.svg"></div><picture style="display: none;">
<source type="image/webp" srcset="./media_123c43acc1f22cbaeecce43784b308164316df474.jpeg?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_123c43acc1f22cbaeecce43784b308164316df474.jpeg?width=750&amp;format=webply&amp;optimize=medium">
<source type="image/jpeg" srcset="./media_123c43acc1f22cbaeecce43784b308164316df474.jpeg?width=2000&amp;format=jpeg&amp;optimize=medium" media="(min-width: 600px)">
<img alt="" src="./media_123c43acc1f22cbaeecce43784b308164316df474.jpeg?width=750&amp;format=jpeg&amp;optimize=medium" width="1000" height="1000">
</picture><picture style="display: none;">
<source type="image/webp" srcset="./media_1b3d46d3b850f0e0a936ee7d91e296f80a27d882e.jpeg?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_1b3d46d3b850f0e0a936ee7d91e296f80a27d882e.jpeg?width=750&amp;format=webply&amp;optimize=medium">
<source type="image/jpeg" srcset="./media_1b3d46d3b850f0e0a936ee7d91e296f80a27d882e.jpeg?width=2000&amp;format=jpeg&amp;optimize=medium" media="(min-width: 600px)">
<img alt="" src="./media_1b3d46d3b850f0e0a936ee7d91e296f80a27d882e.jpeg?width=750&amp;format=jpeg&amp;optimize=medium" width="1000" height="1000">
</picture><picture style="display: none;">
<source type="image/webp" srcset="./media_1b719c559307e063934181699054dd4b4a6bb78ae.jpeg?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_1b719c559307e063934181699054dd4b4a6bb78ae.jpeg?width=750&amp;format=webply&amp;optimize=medium">
<source type="image/jpeg" srcset="./media_1b719c559307e063934181699054dd4b4a6bb78ae.jpeg?width=2000&amp;format=jpeg&amp;optimize=medium" media="(min-width: 600px)">
<img alt="" src="./media_1b719c559307e063934181699054dd4b4a6bb78ae.jpeg?width=750&amp;format=jpeg&amp;optimize=medium" width="1000" height="1000">
</picture><picture style="display: none;">
<source type="image/webp" srcset="./media_13ef1cbd6dd2d29ee3346556d85c01592142d9b9e.jpeg?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_13ef1cbd6dd2d29ee3346556d85c01592142d9b9e.jpeg?width=750&amp;format=webply&amp;optimize=medium">
<source type="image/jpeg" srcset="./media_13ef1cbd6dd2d29ee3346556d85c01592142d9b9e.jpeg?width=2000&amp;format=jpeg&amp;optimize=medium" media="(min-width: 600px)">
<img alt="" src="./media_13ef1cbd6dd2d29ee3346556d85c01592142d9b9e.jpeg?width=750&amp;format=jpeg&amp;optimize=medium" width="1000" height="1000">
</picture><picture style="display: none;">
<source type="image/webp" srcset="./media_196388dc12db8845443b163840a5c9829ac9c13f2.jpeg?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_196388dc12db8845443b163840a5c9829ac9c13f2.jpeg?width=750&amp;format=webply&amp;optimize=medium">
<source type="image/jpeg" srcset="./media_196388dc12db8845443b163840a5c9829ac9c13f2.jpeg?width=2000&amp;format=jpeg&amp;optimize=medium" media="(min-width: 600px)">
<img alt="" src="./media_196388dc12db8845443b163840a5c9829ac9c13f2.jpeg?width=750&amp;format=jpeg&amp;optimize=medium" width="1000" height="1000">
</picture><picture style="display: none;">
<source type="image/webp" srcset="./media_1385afbb414c63b60fe828588b45af73569fcfa51.jpeg?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_1385afbb414c63b60fe828588b45af73569fcfa51.jpeg?width=750&amp;format=webply&amp;optimize=medium">
<source type="image/jpeg" srcset="./media_1385afbb414c63b60fe828588b45af73569fcfa51.jpeg?width=2000&amp;format=jpeg&amp;optimize=medium" media="(min-width: 600px)">
<img alt="" src="./media_1385afbb414c63b60fe828588b45af73569fcfa51.jpeg?width=750&amp;format=jpeg&amp;optimize=medium" width="1000" height="1000">
</picture><picture style="display: block;">
<source type="image/webp" srcset="./media_15fa500f4f41d0a0eae79b950a2432d808ea8ea18.jpeg?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_15fa500f4f41d0a0eae79b950a2432d808ea8ea18.jpeg?width=750&amp;format=webply&amp;optimize=medium">
<source type="image/jpeg" srcset="./media_15fa500f4f41d0a0eae79b950a2432d808ea8ea18.jpeg?width=2000&amp;format=jpeg&amp;optimize=medium" media="(min-width: 600px)">
<img alt="" src="./media_15fa500f4f41d0a0eae79b950a2432d808ea8ea18.jpeg?width=750&amp;format=jpeg&amp;optimize=medium" width="1000" height="1000">
</picture></div></div></div>
</div>

0 comments on commit f9787b3

Please sign in to comment.