55 |
58 |
63 |
26 |
27 |
28 |
29 |
`;
36 | }
37 | }
38 |
39 | /**
40 | * decorates the mini-resource-card
41 | * @param {Element} block The mini-resource-card block element
42 | */
43 | export default async function decorate(block) {
44 | block.setAttribute('daa-lh', 'mini resource card');
45 | const grid_div = createTag('div', {class: 'card-container'});
46 | block.querySelectorAll('.mini-resource-card > div').forEach((resource) => {
47 | removeEmptyPTags(resource);
48 | grid_div.appendChild(resource);
49 |
50 | //create spectrum cards
51 | const linkHref = resource.querySelector('a')?.href;
52 | const heading = resource.querySelector('a')?.innerText;
53 | const text = resource.querySelector('p')?.innerText;
54 | const picture = resource.querySelector('picture');
55 | const img = resource.querySelector('img');
56 | img.setAttribute('class', 'image-mini');
57 |
58 | resource.innerHTML = getMiniResourceCard(linkHref, heading, text);
59 | const pictureContainer = resource.querySelector('.mini-resource-card-image-container');
60 | pictureContainer.append(picture);
61 |
62 | });
63 | block.appendChild(grid_div);
64 | applyBkgColorOverride(block);
65 | applySectionTitle(block);
66 | applyAnalyticHeaderOverride(block);
67 | }
--------------------------------------------------------------------------------
/hlx_statics/icons/cloudservices.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/hlx_statics/blocks/mini-resource-card/mini-resource-card.css:
--------------------------------------------------------------------------------
1 | main div.mini-resource-card .card-container {
2 | display: grid;
3 | grid-template-columns: repeat(3, 1fr);
4 | column-gap: 10px;
5 | row-gap: 10px;
6 | margin-top: auto;
7 | margin: auto!important;
8 | width: 1280px !important;
9 | }
10 |
11 | main div.mini-resource-card .mini-card {
12 | display: flex;
13 | flex-direction: row;
14 | text-decoration: none!important;
15 |
16 | padding: 0;
17 | justify-self: center;
18 | align-self: center;
19 | grid-column-start: auto;
20 | grid-column-end: auto;
21 | grid-row-start: auto;
22 | grid-row-end: auto;
23 | border: none !important;
24 | margin: 0!important;
25 | width: 420px !important;
26 | height: 100px !important;
27 | box-shadow: 0 9px 15px 5px #e6e6e6;
28 | }
29 |
30 | main div.mini-resource-card .mini-resource-card-image-container {
31 | margin: 0!important;
32 | height: 100px !important;
33 | width: 100px!important;
34 | }
35 |
36 | main div.mini-resource-card .image-mini {
37 | height: 100px !important;
38 | width: auto !important;
39 | object-fit: cover;
40 | }
41 |
42 | main div.mini-resource-card .mini-resource-card-body {
43 | display: flex;
44 | flex-direction: column;
45 | justify-content: center;
46 |
47 | border: none!important;
48 | height: 100px !important;
49 | width: 320px !important;
50 | padding: 0 0 0 4%!important
51 | }
52 |
53 | main div.mini-resource-card-container .section-title {
54 | margin: var(--spectrum-global-dimension-size-600) 0 var(--spectrum-global-dimension-size-400) 0;
55 | }
56 |
57 | @media screen and (max-width: 1280px) {
58 | main div.mini-resource-card .card-container {
59 | grid-template-columns: repeat(2, 1fr);
60 | width: 90% !important;
61 | column-gap: 10px;
62 | row-gap: 10px;
63 | margin: auto!important;
64 | }
65 |
66 | main div.mini-resource-card .mini-card {
67 | width: auto !important;
68 | height: 100px !important;
69 | }
70 |
71 | main div.mini-resource-card .mini-resource-card-body {
72 | height: 100px !important;
73 | width: auto !important;
74 | }
75 | }
76 |
77 | @media screen and (max-width: 768px) {
78 | main div.mini-resource-card .card-container {
79 | grid-template-columns: repeat(1, 1fr);
80 | margin: auto !important;
81 | margin-top: auto;
82 |
83 | width: 80% !important;
84 | }
85 |
86 | main div.mini-resource-card .mini-card {
87 | width: auto !important;
88 | height: 100px !important;
89 | }
90 |
91 | main div.mini-resource-card .mini-resource-card-body {
92 | height: 100px !important;
93 | width: auto !important;
94 | }
95 | }
96 |
97 |
98 |
99 |
--------------------------------------------------------------------------------
/tools/preview/experimentation-preview.css:
--------------------------------------------------------------------------------
1 | .hlx-preview-overlay {
2 | z-index: 99;
3 | position: fixed;
4 | bottom: 32px;
5 | right: 32px;
6 | color: #eee;
7 | font-weight: 600;
8 | font-size: 24px;
9 | }
10 |
11 | .hlx-badge {
12 | border-radius: 32px;
13 | background-color: #888;
14 | color: #eee;
15 | padding: 16px 32px;
16 | cursor: pointer;
17 | display: flex;
18 | align-items: center;
19 | position: relative;
20 | }
21 |
22 | .hlx-badge .hlx-open {
23 | box-sizing: border-box;
24 | position: relative;
25 | display: block;
26 | width: 22px;
27 | height: 22px;
28 | border: 2px solid;
29 | border-radius: 100px;
30 | margin-left: 16px;
31 | }
32 |
33 | .hlx-badge .hlx-open::after {
34 | content: "";
35 | display: block;
36 | box-sizing: border-box;
37 | position: absolute;
38 | width: 6px;
39 | height: 6px;
40 | border-top: 2px solid;
41 | border-right: 2px solid;
42 | transform: rotate(-45deg);
43 | left: 6px;
44 | bottom: 5px;
45 | }
46 |
47 | .hlx-badge.hlx-testing {
48 | background-color: #fa0f00;
49 | color: #fff;
50 | }
51 |
52 | .hlx-popup {
53 | position: absolute;
54 | bottom: 64px;
55 | right: 0;
56 | background-color: #444;
57 | min-width: 300px;
58 | border-radius: 16px;
59 | box-shadow: 0 0 10px #000;
60 | font-size: 12px;
61 | }
62 |
63 | .hlx-popup a:any-link {
64 | color: #eee;
65 | border: 2px solid;
66 | padding: 5px 12px;
67 | display: inline-block;
68 | border-radius: 20px;
69 | text-decoration: none;
70 | }
71 |
72 | .hlx-popup .hlx-popup-header {
73 | display: flex;
74 | justify-content: space-between;
75 | background-color: #222;
76 | border-radius: 16px 16px 0 0;
77 | padding: 24px 16px;
78 | }
79 |
80 | .hlx-popup h4, .hlx-popup h5 {
81 | margin: 0;
82 | }
83 |
84 | .hlx-popup h4 {
85 | font-size: 16px;
86 | }
87 |
88 | .hlx-popup h5 {
89 | font-size: 14px;
90 | }
91 |
92 |
93 | .hlx-popup p {
94 | margin: 0;
95 | }
96 |
97 | .hlx-popup::before {
98 | content: '';
99 | width: 0;
100 | height: 0;
101 | position: absolute;
102 | border-left: 15px solid transparent;
103 | border-right: 15px solid transparent;
104 | border-top: 15px solid #444;
105 | bottom: -15px;
106 | right: 30px;
107 | }
108 |
109 | .hlx-hidden {
110 | display: none;
111 | }
112 |
113 | .hlx-badge.hlx-experiment-status-active {
114 | background-color: #280;
115 | }
116 |
117 | .hlx-variant {
118 | margin: 16px;
119 | display: flex;
120 | padding: 16px;
121 | border-radius: 16px;
122 | }
123 |
124 | .hlx-variant-selected {
125 | background-color: #666;
126 | }
127 |
128 | .hlx-variant > div {
129 | flex: 1 1 auto;
130 | }
131 |
132 | .hlx-variant > div.hlx-button {
133 | flex: 0 0 auto;
134 | }
135 |
--------------------------------------------------------------------------------
/hlx_statics/icons/dreamweaver.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/hlx_statics/blocks/footer/footer.js:
--------------------------------------------------------------------------------
1 | import { readBlockConfig } from '../../scripts/lib-helix.js';
2 | import {
3 | createTag,
4 | setExpectedOrigin,
5 | } from '../../scripts/lib-adobeio.js';
6 |
7 | function buildFooter(html) {
8 | const footer = createTag('div', { class: 'footer-links-container' });
9 | const footerInnerContainer = createTag('div', { class: 'footer-links-container-inner' });
10 | const horizontalDivider = createTag('div', { class: 'spectrum-Divider spectrum-Divider--sizeM footer-horizontal' });
11 | const footerLegal = createTag('div', { class: 'footer-legal' });
12 | footerInnerContainer.innerHTML = html;
13 | footerLegal.append(footerInnerContainer.querySelector('div:nth-child(5)'));
14 | footerLegal.append(footerInnerContainer.querySelector('div:nth-child(5)'));
15 |
16 | footerInnerContainer.querySelectorAll('div').forEach((footerColumn) => {
17 | const footerColumnWrapper = createTag('div');
18 | footerColumnWrapper.append(footerColumn);
19 | const footerDivider = createTag('div', { class: 'footer-divider' });
20 | const divider = createTag('div', { class: 'spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--vertical' });
21 | divider.setAttribute('style', 'height: 100%; align-self: stretch;');
22 | footerDivider.append(divider);
23 | footerColumnWrapper.append(footerDivider);
24 | footerInnerContainer.append(footerColumnWrapper);
25 | });
26 | footerInnerContainer.querySelector('div:last-child > .footer-divider').remove();
27 |
28 | footer.append(footerInnerContainer);
29 | footer.append(horizontalDivider);
30 | footer.append(footerLegal);
31 | return footer;
32 | }
33 |
34 | /**
35 | * loads and decorates the footer
36 | * @param {Element} block The footer block element
37 | */
38 |
39 | export default async function decorate(block) {
40 | block.setAttribute('daa-lh', 'footer');
41 | const cfg = readBlockConfig(block);
42 | block.textContent = '';
43 | const footerPath = cfg.footer || setExpectedOrigin(window.location.origin, '/franklin_assets/footer');
44 | const resp = await fetch(`${footerPath}.plain.html`);
45 | const html = await resp.text();
46 | block.classList.add('footer-links-container');
47 | block.append(buildFooter(html));
48 |
49 | block.querySelectorAll('.footer-links-container-inner ul').forEach((ul) => {
50 | ul.className = 'spectrum-Body spectrum-Body--sizeS';
51 | });
52 | block.querySelectorAll('h3').forEach((h3) => {
53 | h3.className = 'spectrum-Heading--sizeXS';
54 | });
55 | block.querySelector('.footer-legal ul').className = 'spectrum-Body spectrum-Body--sizeXS';
56 | block.querySelectorAll('a').forEach((a) => {
57 | const className = a.parentElement.tagName === 'STRONG'
58 | ? 'spectrum-Link spectrum-Link--quiet'
59 | : 'spectrum-Link spectrum-Link--secondary spectrum-Link--quiet';
60 | a.className = className;
61 | });
62 | block.querySelectorAll('div.footer-legal > div > p').forEach((p) => {
63 | p.className = 'spectrum-Body spectrum-Body--sizeXS footer-date';
64 | });
65 | }
66 |
--------------------------------------------------------------------------------
/hlx_statics/blocks/embed/embed.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Embed Block
3 | * Show videos and social posts directly on your page
4 | * https://www.hlx.live/developer/block-collection/embed
5 | */
6 |
7 | import { decorateLightOrDark } from '../../scripts/lib-helix.js';
8 | import { applyBkgColorOverride, applyAnalyticHeaderOverride } from '../../scripts/lib-adobeio.js';
9 |
10 | /**
11 | * Gets the video id from the authored URL and inserts the Youtube embed
12 | * The iframe is not loaded until the users moves the pointer over the thumbnail image
13 | * Or eventually with a delay of 3 seconds (see delayed.js)
14 | * @param {*} url The authored URL
15 | * @returns The HTML to embed
16 | */
17 | const embedYoutube = (url) => {
18 | const usp = new URLSearchParams(url.search);
19 | let vid = encodeURIComponent(usp.get('v'));
20 | const embed = url.pathname;
21 | if (url.origin.includes('youtu.be')) {
22 | [, vid] = url.pathname.split('/');
23 | }
24 | const embedHTML = `30 | ${heading} 31 |
32 |33 | ${text} 34 |
35 |
25 | 
27 |
28 |
29 |
`;
30 | return embedHTML;
31 | };
32 |
33 | /**
34 | * Decorates the block with the embedded HTML
35 | * Sets the event listener for pointer over thumbnail image
36 | * @param {*} block The block to decorate
37 | * @param {*} a The authored link
38 | * @returns Exits early if the embed is already loaded
39 | */
40 | const loadEmbed = (block, a) => {
41 | if (block.classList.contains('embed-is-loaded')) {
42 | return;
43 | }
44 | decorateLightOrDark(block, true);
45 | block.className = 'block embed embed-youtube';
46 | const link = a.href;
47 | const url = new URL(link);
48 | a.insertAdjacentHTML('afterend', embedYoutube(url));
49 | a.remove();
50 | block.classList.add('embed-is-loaded');
51 |
52 | const videoListener = () => {
53 | const iframe = block.querySelector('iframe');
54 | if (!iframe.src) {
55 | iframe.src = iframe.getAttribute('data-src');
56 | iframe.onload = () => { iframe.style.opacity = 1; };
57 | }
58 | block.removeEventListener('mouseover', videoListener);
59 | };
60 | block.addEventListener('mouseover', videoListener);
61 | applyBkgColorOverride(block);
62 | const wid = block?.parentElement?.parentElement?.getAttribute('data-width');
63 | if (wid) {
64 | block.classList.add('embed-custom-width');
65 | block.firstChild.firstChild.style.width = wid;
66 | }
67 | };
68 |
69 | /**
70 | * Decorates the embed
71 | * @param {*} block The embed block
72 | */
73 | export default async function decorate(block) {
74 | block.setAttribute('daa-lh', 'embed');
75 | applyAnalyticHeaderOverride(block);
76 | const a = block.querySelector('a');
77 | loadEmbed(block, a);
78 | }
79 |
--------------------------------------------------------------------------------
/hlx_statics/blocks/resource-card/resource-card.css:
--------------------------------------------------------------------------------
1 | .resource-cards-container {
2 | display: flex;
3 | }
4 |
5 | @media screen and (max-width: 1280px) {
6 | .resource-cards-container {
7 | flex-wrap: wrap;
8 | flex-direction: column;
9 | }
10 | }
11 |
12 | .resource-cards-left {
13 | display: flex;
14 | }
15 |
16 | div.resource-cards-left > a.resource-card-large-container-inner {
17 | margin-right: 0 !important;
18 | }
19 |
20 | @media screen and (min-width: 1280px) {
21 | div.resource-cards-left > a.resource-card-large-container-inner {
22 | width: 100%;
23 | }
24 | .resource-cards-left, .resource-cards-right {
25 | width: 50%
26 | }
27 | }
28 |
29 | .resource-cards-right {
30 | display: flex;
31 | flex-direction: column;
32 | }
33 |
34 | main div.resource-card-container {
35 | max-width: 1280px;
36 | margin: auto;
37 | }
38 |
39 | main div.resource-card {
40 | width: var(--spectrum-global-dimension-static-grid-fluid-width);
41 | background: var(--spectrum-global-color-gray-100);
42 | display: flex;
43 | justify-content: center;
44 | flex-direction: row;
45 | }
46 |
47 | main div.resource-card > div {
48 | width: 400px;
49 | }
50 |
51 | @media screen and (max-width: 1280px) {
52 | main div.resource-card {
53 | flex-direction: column;
54 | flex-wrap: wrap;
55 | align-items: center;
56 | }
57 |
58 | main div.resource-card > div {
59 | min-width: var(--spectrum-global-dimension-size-4600);
60 | }
61 |
62 | main div.resource-card > div:first-child {
63 | padding-left: 0 !important;
64 | }
65 | main div.resource-card > div:nth-child(2){
66 | padding-left: 0;
67 | padding-right: 0;
68 | }
69 |
70 | main div.resource-card-image-container img {
71 | object-fit: cover;
72 | width: 100% !important;
73 | }
74 | }
75 |
76 | main div.resource-card > div{
77 | padding: 24px;
78 | }
79 |
80 | main div.resource-card-preview {
81 | height: 200px;
82 | width: 100%;
83 | padding: 0 !important;
84 | }
85 |
86 | main div.resource-card-image-container {
87 | display: flex;
88 | align-items: center;
89 | justify-content: center;
90 | height: 100%;
91 | margin-bottom: 0 !important;
92 | margin-top: 0;
93 | }
94 |
95 | main div.resource-card-image-container img {
96 | object-fit: cover;
97 | width: 400px;
98 | }
99 |
100 | main div.resource-card-body {
101 | flex: 1;
102 | padding-top: 16px 16px 24px 16px !important;
103 | justify-content: flex-start !important;
104 | overflow: hidden;
105 | }
106 |
107 | main div.resource-card-header {
108 | height: auto;
109 | width: 100%;
110 | }
111 |
112 | main div.resource-card-title {
113 | white-space: normal;
114 | text-align: left;
115 | }
116 |
117 | main div.resource-card-content {
118 | margin-bottom: 24px !important;
119 | padding-bottom: 12px;
120 | }
121 |
122 | main div.resource-card h3 {
123 | margin-top: 0 !important;
124 | margin-bottom: 0 !important;
125 | }
126 |
127 | main div.resource-card p {
128 | text-align: left;
129 | color: var(--spectrum-global-color-gray-700);
130 | margin-top: 0;
131 | }
132 |
--------------------------------------------------------------------------------
/hlx_statics/blocks/hero/hero.css:
--------------------------------------------------------------------------------
1 | main div.hero {
2 | background: var(--spectrum-global-color-gray-50);
3 | height: calc(var(--spectrum-global-dimension-size-6000) + var(--spectrum-global-dimension-size-250));
4 | overflow: hidden;
5 | display: flex;
6 | justify-content: center;
7 | }
8 |
9 | main div.hero-container {
10 | padding: 0;
11 | }
12 |
13 | @media screen and (max-width: 768px) {
14 | main div.hero {
15 | height: auto;
16 | padding: var(--spectrum-global-dimension-size-400);
17 | }
18 | }
19 |
20 | main div.hero > div:first-child {
21 | display: flex;
22 | flex-direction: column;
23 | justify-content: center;
24 | width: calc(5 * 100% / 12);
25 |
26 | margin-left: var(--spectrum-global-dimension-size-800);
27 | margin-right: var(--spectrum-global-dimension-size-400);
28 | }
29 |
30 | @media screen and (max-width: 768px) {
31 | main div.hero > div:first-child {
32 | width: 100%;
33 | margin: 0;
34 | }
35 | }
36 |
37 | main div.hero div:nth-child(2) {
38 | flex: 1;
39 | }
40 |
41 | @media screen and (max-width: 768px) {
42 | main div.hero div:nth-child(2) {
43 | display: none;
44 | }
45 | }
46 |
47 | main div.hero div:nth-child(2) > div {
48 | display: flex;
49 | align-items: center;
50 | justify-content: center;
51 | height: 100%;
52 | margin-top: 0;
53 | }
54 |
55 | main div.hero div:nth-child(2) > div img {
56 | width: 100%;
57 | height: 100%;
58 | object-fit: cover;
59 | border-radius: 0;
60 | min-height: 500px;
61 | }
62 |
63 | main .hero .icon-container {
64 | height: var(--spectrum-global-dimension-size-600);
65 | width: var(--spectrum-global-dimension-size-600);
66 | margin-top: 0 !important;
67 | margin-bottom: var(--spectrum-global-dimension-size-300) !important;
68 | }
69 |
70 | main .hero span.icon {
71 | display: none;
72 | }
73 |
74 | main .hero .icon {
75 | height: 100%;
76 | object-fit: contain;
77 | }
78 |
79 | main .hero h3 {
80 | margin-top: 0;
81 | margin-bottom: var(--spectrum-global-dimension-size-200);
82 | }
83 |
84 | main .hero p.spectrum-Body--sizeL {
85 | margin-top: 0 !important;
86 | font-size: var(--spectrum-global-dimension-size-225);
87 | color: var(--spectrum-global-color-gray-800) !important;
88 | }
89 |
90 | main .hero h1 + p.last-of-type {
91 | margin-bottom: 0 !important;
92 | }
93 |
94 | main .hero .hero-button-container {
95 | display: flex;
96 | flex-wrap: wrap;
97 |
98 | margin-top: var(--spectrum-global-dimension-size-300);
99 | gap: var(--spectrum-global-dimension-size-200);
100 | }
101 |
102 | @media screen and (max-width: 768px) {
103 | main div.hero {
104 | overflow: auto;
105 | height: 100vh;
106 | }
107 | main div.hero .spectrum-Heading--sizeXXL {
108 | font-size: var(--spectrum-alias-heading-xl-text-size);
109 | }
110 |
111 | main .hero picture {
112 | display: none;
113 | }
114 | }
115 |
116 |
117 | @media screen and (max-width: 768px) {
118 | main div.hero > div:first-child {
119 | width: 100%;
120 | margin: 0;
121 | }
122 | }
123 |
124 | @media screen and (max-width: 768px) {
125 | main div.hero {
126 | height: 100%;
127 | }
128 | }
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to Project Helix
2 |
3 | This project (like almost all of Project Helix) is an Open Development project and welcomes contributions from everyone who finds it useful or lacking.
4 |
5 | ## Code Of Conduct
6 |
7 | This project adheres to the Adobe [code of conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to cstaub at adobe dot com.
8 |
9 | ## Contributor License Agreement
10 |
11 | All third-party contributions to this project must be accompanied by a signed contributor license. This gives Adobe permission to redistribute your contributions as part of the project. [Sign our CLA](http://opensource.adobe.com/cla.html)! You only need to submit an Adobe CLA one time, so if you have submitted one previously, you are good to go!
12 |
13 | ## Things to Keep in Mind
14 |
15 | This project uses a **commit then review** process, which means that for approved maintainers, changes can be merged immediately, but will be reviewed by others.
16 |
17 | For other contributors, a maintainer of the project has to approve the pull request.
18 |
19 | # Before You Contribute
20 |
21 | * Check that there is an existing issue in GitHub issues
22 | * Check if there are other pull requests that might overlap or conflict with your intended contribution
23 |
24 | # How to Contribute
25 |
26 | 1. Fork the repository
27 | 2. Make some changes on a branch on your fork
28 | 3. Create a pull request from your branch
29 |
30 | In your pull request, outline:
31 |
32 | * What the changes intend
33 | * How they change the existing code
34 | * If (and what) they breaks
35 | * Start the pull request with the GitHub issue ID, e.g. #123
36 |
37 | Lastly, please follow the [pull request template](.github/pull_request_template.md) when submitting a pull request!
38 |
39 | Each commit message that is not part of a pull request:
40 |
41 | * Should contain the issue ID like `#123`
42 | * Can contain the tag `[trivial]` for trivial changes that don't relate to an issue
43 |
44 |
45 |
46 | ## Coding Styleguides
47 |
48 | We enforce a coding styleguide using `eslint`. As part of your build, run `npm run lint` to check if your code is conforming to the style guide. We do the same for every PR in our CI, so PRs will get rejected if they don't follow the style guide.
49 |
50 | You can fix some of the issues automatically by running `npx eslint . --fix`.
51 |
52 | ## Commit Message Format
53 |
54 | This project uses a structured commit changelog format that should be used for every commit. Use `npm run commit` instead of your usual `git commit` to generate commit messages using a wizard.
55 |
56 | ```bash
57 | # either add all changed files
58 | $ git add -A
59 | # or selectively add files
60 | $ git add package.json
61 | # then commit using the wizard
62 | $ npm run commit
63 | ```
64 |
65 | # How Contributions get Reviewed
66 |
67 | One of the maintainers will look at the pull request within one week. Feedback on the pull request will be given in writing, in GitHub.
68 |
69 | # Release Management
70 |
71 | The project's committers will release to the [Adobe organization on npmjs.org](https://www.npmjs.com/org/adobe).
72 | Please contact the [Adobe Open Source Advisory Board](https://git.corp.adobe.com/OpenSourceAdvisoryBoard/discuss/issues) to get access to the npmjs organization.
73 |
74 | The release process is fully automated using `semantic-release`, increasing the version numbers, etc. based on the contents of the commit messages found.
75 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Adobe Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as
6 | contributors and maintainers pledge to making participation in our project and
7 | our community a harassment-free experience for everyone, regardless of age, body
8 | size, disability, ethnicity, gender identity and expression, level of experience,
9 | nationality, personal appearance, race, religion, or sexual identity and
10 | orientation.
11 |
12 | ## Our Standards
13 |
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 |
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 |
23 | Examples of unacceptable behavior by participants include:
24 |
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 | advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 | address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 | professional setting
33 |
34 | ## Our Responsibilities
35 |
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 |
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 |
46 | ## Scope
47 |
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 |
55 | ## Enforcement
56 |
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at Grp-opensourceoffice@adobe.com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 |
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 |
68 | ## Attribution
69 |
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at [http://contributor-covenant.org/version/1/4][version]
72 |
73 | [homepage]: http://contributor-covenant.org
74 | [version]: http://contributor-covenant.org/version/1/4/
--------------------------------------------------------------------------------
/hlx_statics/blocks/carousel/carousel.css:
--------------------------------------------------------------------------------
1 | picture {
2 | width: 100%;
3 | height: 100%;
4 | display: flex;
5 | }
6 |
7 | picture img {
8 | object-fit: cover;
9 | height: auto;
10 | width: 100%;
11 | }
12 |
13 | main div.carousel .image-container {
14 | height: 300px;
15 | max-width: 602px;
16 | }
17 |
18 | main div.carousel {
19 | width: var(--spectrum-global-dimension-static-grid-fixed-max-width);
20 | margin: auto;
21 | }
22 |
23 | main div.carousel .block-container {
24 | display: flex;
25 | flex-direction: row ;
26 | justify-content: center;
27 | align-content: space-between;
28 | position: relative;
29 | }
30 |
31 | main div.carousel .carousel-heading {
32 | margin-top: 1 !important;
33 | margin-bottom: var(--spectrum-global-dimension-size-100) !important;
34 | }
35 |
36 | main div.carousel .carousel-container {
37 | display: flex;
38 | flex-direction: row-reverse;
39 | justify-content: center;
40 | align-content: space-between;
41 | }
42 |
43 | main div.carousel .left-container {
44 | flex: 0 1 50%;
45 | min-height: 100%;
46 | max-width: 50%;
47 | padding: 0 var(--spectrum-global-dimension-size-100);
48 | }
49 |
50 | main div.carousel .right-container {
51 | display: flex;
52 | flex-direction: column;
53 | justify-content: center;
54 | flex: 0 1 50%;
55 | min-height: 100%;
56 | max-width: 50%;
57 | padding: 0 var(--spectrum-global-dimension-size-400);
58 | }
59 |
60 | main div.carousel .carousel-button-container {
61 | display: flex;
62 | flex-direction: row !important;
63 | margin-top: var(--spectrum-global-dimension-size-100);
64 | gap: var(--spectrum-global-dimension-size-200);
65 | }
66 |
67 | main div.carousel .slider-wrapper {
68 | position: relative;
69 | overflow: hidden;
70 | transition-property: transform;
71 | box-sizing: content-box;
72 | align-items: center;
73 | }
74 |
75 | main div.carousel .slides-container {
76 | width: 100%;
77 | display: flex;
78 | list-style: none;
79 | margin: 1;
80 | padding: 0;
81 | margin-bottom: 1;
82 | margin-top: 1;
83 | overflow: hidden;
84 | scroll-behavior: smooth;
85 | }
86 |
87 | main div.carousel .slide {
88 | width: 100%;
89 | height: 100%;
90 | flex: 1 0 100%;
91 | }
92 |
93 | main div.carousel .slide-arrow {
94 | margin: auto;
95 | background-color: transparent;
96 | border: none;
97 | font-size: 5rem;
98 | color: #b3cef7;
99 | cursor: pointer;
100 | }
101 |
102 | main .carousel .slide-arrow:hover,
103 | main .carousel .slide-arrow:focus {
104 | color: #007aff;
105 | }
106 |
107 | main div.carousel .slides-container {
108 | scrollbar-width: none; /* Firefox */
109 | -ms-overflow-style: none; /* Internet Explorer 10+ */
110 | }
111 |
112 | /* WebKit */
113 | main div.carousel .slides-container::-webkit-scrollbar {
114 | width: 0;
115 | height: 0;
116 | }
117 |
118 | main div.carousel .carousel-circle-div {
119 | display: flex;
120 | flex-direction: row;
121 | justify-content: center;
122 | align-items: center;
123 | }
124 |
125 | main div.carousel .carousel-circle {
126 | background-color: #c6c6c6;
127 | border: none;
128 | border-radius: 100%;
129 | width: 12px;
130 | height: 12px;
131 | margin: 4px 2px;
132 | cursor: pointer;
133 | }
134 |
135 | main div.carousel .carousel-circle-selected {
136 | background-color: #007aff !important;
137 | }
138 |
--------------------------------------------------------------------------------
/hlx_statics/blocks/iframe/iframe.js:
--------------------------------------------------------------------------------
1 | import {
2 | createTag,
3 | addExtraScriptWithReturn
4 | } from '../../scripts/lib-adobeio.js';
5 |
6 | function penpalOnLoad() {
7 | const createConnection = () => {
8 | const penpalIframe = document.querySelector('#penpalIframe');
9 | const connection = window.Penpal.connectToChild({
10 | // The iframe to which a connection should be made
11 | iframe: penpalIframe,
12 | // Manually set origin as auto-detection may fail, as the src of the iframe is set later
13 | //childOrigin: isExternalLink(src) ? new URL(src).origin : window.origin,
14 | // Methods the parent is exposing to the child
15 | methods: {
16 | scrollTop(position = 0) {
17 | if (document?.scrollingElement) {
18 | document.scrollingElement.scrollTop = position;
19 | }
20 | },
21 | getURL() {
22 | return window?.location?.href;
23 | },
24 | setURL(url) {
25 | if (window?.location) {
26 | window.location = url;
27 | }
28 | },
29 | setHeight(height) {
30 | penpalIframe.style.height = height;
31 | },
32 | getIMSAccessToken() {
33 | if (window.adobeIMS?.isSignedInUser()) {
34 | return window.adobeIMS.getAccessToken();
35 | }
36 |
37 | return null;
38 | },
39 | getIMSProfile() {
40 | if (window.adobeIMS?.isSignedInUser()) {
41 | return window.adobeIMS.getProfile();
42 | }
43 |
44 | return null;
45 | },
46 | signIn() {
47 | if (window.adobeIMS && !window.adobeIMS.isSignedInUser()) {
48 | window.adobeIMS.signIn();
49 | }
50 | },
51 | signOut() {
52 | if (window.adobeIMS && window.adobeIMS.isSignedInUser()) {
53 | window.adobeIMS.signOut();
54 | }
55 | },
56 | getIMSClientId() {
57 | if (window.adobeIMS) {
58 | return window.adobeIMS.adobeIdData.client_id;
59 | } else {
60 | return null;
61 | }
62 | },
63 | onSignIn(signinCallback) {
64 | window.addEventListener('imsSignIn', signinCallback);
65 | }
66 | }
67 | });
68 |
69 | connection.promise.then((child) => {
70 | if (penpalIframe.clientHeight === 0) {
71 | child.onHide();
72 | } else {
73 | child.onShow();
74 | }
75 | });
76 |
77 | return connection;
78 | };
79 |
80 | if (window.Penpal) {
81 | const connection = createConnection();
82 | }
83 | }
84 |
85 | /**
86 | * decorates the iframe
87 | * @param {Element} block The hero block element
88 | */
89 | export default async function decorate(block) {
90 | const penpalScript = addExtraScriptWithReturn(document.body, 'https://unpkg.com/penpal@^6/dist/penpal.min.js');
91 | const iframeSrc = block.querySelector('a');
92 | const iframeContainer = block.parentElement;
93 | const iframe = createTag('iframe', { class: 'iframe-container', 'src': iframeSrc.href, 'id': 'penpalIframe' });
94 | penpalScript.onload = () => {
95 | iframeContainer.append(iframe);
96 | penpalOnLoad();
97 | }
98 | block.remove();
99 | }
100 |
101 |
--------------------------------------------------------------------------------
/hlx_statics/blocks/video-carousel/video-carousel.css:
--------------------------------------------------------------------------------
1 | picture {
2 | width: 100%;
3 | height: 100%;
4 | display: flex;
5 | }
6 |
7 | picture img {
8 | object-fit: cover;
9 | height: auto;
10 | width: 100%;
11 | }
12 |
13 | main div.video-carousel .image-container {
14 | height: 300px;
15 | max-width: 602px;
16 | }
17 |
18 | main div.video-carousel {
19 | max-width: var(--spectrum-global-dimension-static-grid-fixed-max-width);
20 | margin: auto;
21 | }
22 |
23 | main div.video-carousel .video-block-container {
24 | display: flex;
25 | flex-direction: row ;
26 | justify-content: center;
27 | align-content: space-between;
28 | position: relative;
29 | }
30 |
31 | main div.video-carousel .video-carousel-heading {
32 | margin-top: 1 !important;
33 | margin-bottom: var(--spectrum-global-dimension-size-100) !important;
34 | }
35 |
36 | main div.video-carousel .video-container {
37 | display: flex;
38 | flex-direction: row-reverse;
39 | justify-content: center;
40 | align-content: space-between;
41 | }
42 |
43 | main div.video-carousel .left-container {
44 | flex: 0 1 50%;
45 | min-height: 100%;
46 | max-width: 50%;
47 | padding: 0 var(--spectrum-global-dimension-size-100);
48 | }
49 |
50 | main div.video-carousel .right-container {
51 | display: flex;
52 | flex-direction: column;
53 | justify-content: center;
54 | flex: 0 1 50%;
55 | min-height: 100%;
56 | max-width: 50%;
57 | padding: 0 var(--spectrum-global-dimension-size-400);
58 | }
59 |
60 | main div.video-carousel .video-carousel-button-container {
61 | display: flex;
62 | flex-direction: row !important;
63 | margin-top: var(--spectrum-global-dimension-size-100);
64 | gap: var(--spectrum-global-dimension-size-200);
65 | }
66 |
67 | main div.video-carousel .video-slider-wrapper {
68 | position: relative;
69 | overflow: hidden;
70 | transition-property: transform;
71 | box-sizing: content-box;
72 | align-items: center;
73 | }
74 |
75 | main div.video-carousel .video-slides-container {
76 | width: 100%;
77 | display: flex;
78 | list-style: none;
79 | margin: 1;
80 | padding: 0;
81 | margin-bottom: 1;
82 | margin-top: 1;
83 | overflow: hidden;
84 | scroll-behavior: smooth;
85 | }
86 |
87 | main div.video-carousel .video-slide {
88 | width: 100%;
89 | height: 100%;
90 | flex: 1 0 100%;
91 | }
92 |
93 | main div.video-carousel .embed {
94 | margin-top: 0px;
95 | }
96 |
97 | main div.video-carousel .video-slide-arrow {
98 | margin: auto;
99 | background-color: transparent;
100 | border: none;
101 | font-size: 5rem;
102 | color: #b3cef7;
103 | cursor: pointer;
104 | }
105 |
106 | main .video-carousel .video-slide-arrow:hover,
107 | main .video-carousel .video-slide-arrow:focus {
108 | color: #007aff;
109 | }
110 |
111 | main div.video-carousel .video-slides-container {
112 | scrollbar-width: none; /* Firefox */
113 | -ms-overflow-style: none; /* Internet Explorer 10+ */
114 | }
115 |
116 | /* WebKit */
117 | main div.video-carousel .video-slides-container::-webkit-scrollbar {
118 | width: 0;
119 | height: 0;
120 | }
121 |
122 | main div.video-carousel .video-carousel-circle-div {
123 | display: flex;
124 | flex-direction: row;
125 | justify-content: center;
126 | align-items: center;
127 | }
128 |
129 | main div.video-carousel .video-carousel-circle {
130 | background-color: #c6c6c6;
131 | border: none;
132 | border-radius: 100%;
133 | width: 12px;
134 | height: 12px;
135 | margin: 4px 2px;
136 | cursor: pointer;
137 | }
138 |
139 | main div.video-carousel .video-carousel-circle-selected {
140 | background-color: #007aff !important;
141 | }
142 |
--------------------------------------------------------------------------------
/scripts/experimentation-ued.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | var LOCAL_STORAGE_KEY = 'unified-decisioning-experiments';
3 | function assignTreatment(allocationPercentages, treatments) {
4 | var random = Math.random() * 100;
5 | var i = treatments.length;
6 | while (random > 0 && i > 0) {
7 | i -= 1;
8 | random -= +allocationPercentages[i];
9 | }
10 | return treatments[i];
11 | }
12 | function getLastExperimentTreatment(experimentId) {
13 | var experimentsStr = localStorage.getItem(LOCAL_STORAGE_KEY);
14 | if (experimentsStr) {
15 | var experiments = JSON.parse(experimentsStr);
16 | if (experiments[experimentId]) {
17 | return experiments[experimentId].treatment;
18 | }
19 | }
20 | return null;
21 | }
22 | function setLastExperimentTreatment(experimentId, treatment) {
23 | var experimentsStr = localStorage.getItem(LOCAL_STORAGE_KEY);
24 | var experiments = experimentsStr ? JSON.parse(experimentsStr) : {};
25 | var now = new Date();
26 | var expKeys = Object.keys(experiments);
27 | expKeys.forEach(function (key) {
28 | var date = new Date(experiments[key].date);
29 | if ((now.getTime() - date.getTime()) > (1000 * 86400 * 30)) {
30 | delete experiments[key];
31 | }
32 | });
33 | var date = now.toISOString().split('T')[0];
34 | experiments[experimentId] = { treatment: treatment, date: date };
35 | localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(experiments));
36 | }
37 | function assignTreatmentByDevice(experimentId, allocationPercentages, treatments) {
38 | var cachedTreatmentId = getLastExperimentTreatment(experimentId);
39 | var treatmentIdResponse;
40 | if (!cachedTreatmentId) {
41 | var assignedTreatmentId = assignTreatment(allocationPercentages, treatments);
42 | setLastExperimentTreatment(experimentId, assignedTreatmentId);
43 | treatmentIdResponse = assignedTreatmentId;
44 | }
45 | else {
46 | treatmentIdResponse = cachedTreatmentId;
47 | }
48 | return {
49 | treatmentId: treatmentIdResponse
50 | };
51 | }
52 |
53 | var RandomizationUnit = {
54 | VISITOR: 'VISITOR',
55 | DEVICE: 'DEVICE'
56 | };
57 | function evaluateExperiment(context, experiment) {
58 | var experimentId = experiment.id, identityNamespace = experiment.identityNamespace, _a = experiment.randomizationUnit, randomizationUnit = _a === void 0 ? RandomizationUnit.VISITOR : _a;
59 | var identityMap = context.identityMap;
60 | var treatments = experiment.treatments.map(function (item) { return item.id; });
61 | var allocationPercentages = experiment.treatments.map(function (item) { return item.allocationPercentage; });
62 | var treatmentAssignment = null;
63 | switch (randomizationUnit) {
64 | case RandomizationUnit.DEVICE: {
65 | treatmentAssignment = assignTreatmentByDevice(experimentId, allocationPercentages, treatments);
66 | break;
67 | }
68 | default:
69 | throw new Error("Unknow randomization unit");
70 | }
71 | var evaluationResponse = {
72 | experimentId: experimentId,
73 | hashedBucket: treatmentAssignment.bucketId,
74 | treatment: {
75 | id: treatmentAssignment.treatmentId
76 | }
77 | };
78 | return evaluationResponse;
79 | }
80 |
81 | function traverseDecisionTree(decisionNodesMap, context, currentNodeId) {
82 | var _a = decisionNodesMap[currentNodeId], experiment = _a.experiment, type = _a.type;
83 | if (type === 'EXPERIMENTATION') {
84 | var treatment = evaluateExperiment(context, experiment).treatment;
85 | return [treatment];
86 | }
87 | }
88 |
89 | function evaluateDecisionPolicy(decisionPolicy, context) {
90 | var decisionNodesMap = {};
91 | decisionPolicy.decisionNodes.forEach(function (item) {
92 | decisionNodesMap[item['id']] = item;
93 | });
94 | var items = traverseDecisionTree(decisionNodesMap, context, decisionPolicy.rootDecisionNodeId);
95 | return {
96 | items: items
97 | };
98 | }
99 |
100 | export { evaluateDecisionPolicy };
101 |
--------------------------------------------------------------------------------
/hlx_statics/scripts/experimentation-ued.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | var LOCAL_STORAGE_KEY = 'unified-decisioning-experiments';
3 | function assignTreatment(allocationPercentages, treatments) {
4 | var random = Math.random() * 100;
5 | var i = treatments.length;
6 | while (random > 0 && i > 0) {
7 | i -= 1;
8 | random -= +allocationPercentages[i];
9 | }
10 | return treatments[i];
11 | }
12 | function getLastExperimentTreatment(experimentId) {
13 | var experimentsStr = localStorage.getItem(LOCAL_STORAGE_KEY);
14 | if (experimentsStr) {
15 | var experiments = JSON.parse(experimentsStr);
16 | if (experiments[experimentId]) {
17 | return experiments[experimentId].treatment;
18 | }
19 | }
20 | return null;
21 | }
22 | function setLastExperimentTreatment(experimentId, treatment) {
23 | var experimentsStr = localStorage.getItem(LOCAL_STORAGE_KEY);
24 | var experiments = experimentsStr ? JSON.parse(experimentsStr) : {};
25 | var now = new Date();
26 | var expKeys = Object.keys(experiments);
27 | expKeys.forEach(function (key) {
28 | var date = new Date(experiments[key].date);
29 | if ((now.getTime() - date.getTime()) > (1000 * 86400 * 30)) {
30 | delete experiments[key];
31 | }
32 | });
33 | var date = now.toISOString().split('T')[0];
34 | experiments[experimentId] = { treatment: treatment, date: date };
35 | localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(experiments));
36 | }
37 | function assignTreatmentByDevice(experimentId, allocationPercentages, treatments) {
38 | var cachedTreatmentId = getLastExperimentTreatment(experimentId);
39 | var treatmentIdResponse;
40 | if (!cachedTreatmentId) {
41 | var assignedTreatmentId = assignTreatment(allocationPercentages, treatments);
42 | setLastExperimentTreatment(experimentId, assignedTreatmentId);
43 | treatmentIdResponse = assignedTreatmentId;
44 | }
45 | else {
46 | treatmentIdResponse = cachedTreatmentId;
47 | }
48 | return {
49 | treatmentId: treatmentIdResponse
50 | };
51 | }
52 |
53 | var RandomizationUnit = {
54 | VISITOR: 'VISITOR',
55 | DEVICE: 'DEVICE'
56 | };
57 | function evaluateExperiment(context, experiment) {
58 | var experimentId = experiment.id, identityNamespace = experiment.identityNamespace, _a = experiment.randomizationUnit, randomizationUnit = _a === void 0 ? RandomizationUnit.VISITOR : _a;
59 | var identityMap = context.identityMap;
60 | var treatments = experiment.treatments.map(function (item) { return item.id; });
61 | var allocationPercentages = experiment.treatments.map(function (item) { return item.allocationPercentage; });
62 | var treatmentAssignment = null;
63 | switch (randomizationUnit) {
64 | case RandomizationUnit.DEVICE: {
65 | treatmentAssignment = assignTreatmentByDevice(experimentId, allocationPercentages, treatments);
66 | break;
67 | }
68 | default:
69 | throw new Error("Unknow randomization unit");
70 | }
71 | var evaluationResponse = {
72 | experimentId: experimentId,
73 | hashedBucket: treatmentAssignment.bucketId,
74 | treatment: {
75 | id: treatmentAssignment.treatmentId
76 | }
77 | };
78 | return evaluationResponse;
79 | }
80 |
81 | function traverseDecisionTree(decisionNodesMap, context, currentNodeId) {
82 | var _a = decisionNodesMap[currentNodeId], experiment = _a.experiment, type = _a.type;
83 | if (type === 'EXPERIMENTATION') {
84 | var treatment = evaluateExperiment(context, experiment).treatment;
85 | return [treatment];
86 | }
87 | }
88 |
89 | function evaluateDecisionPolicy(decisionPolicy, context) {
90 | var decisionNodesMap = {};
91 | decisionPolicy.decisionNodes.forEach(function (item) {
92 | decisionNodesMap[item['id']] = item;
93 | });
94 | var items = traverseDecisionTree(decisionNodesMap, context, decisionPolicy.rootDecisionNodeId);
95 | return {
96 | items: items
97 | };
98 | }
99 |
100 | export { evaluateDecisionPolicy };
101 |
--------------------------------------------------------------------------------
/hlx_statics/styles/spectrum/font.css:
--------------------------------------------------------------------------------
1 | /*
2 | * The Typekit service used to deliver this font or fonts for use on websites
3 | * is provided by Adobe and is subject to these Terms of Use
4 | * http://www.adobe.com/products/eulas/tou_typekit. For font license
5 | * information, see the list below.
6 | *
7 | * adobe-clean:
8 | * - http://typekit.com/eulas/000000000000000000017701
9 | * - http://typekit.com/eulas/000000000000000000017702
10 | * - http://typekit.com/eulas/000000000000000000017703
11 | * - http://typekit.com/eulas/0000000000000000000176ff
12 | * adobe-clean-serif:
13 | * - http://typekit.com/eulas/00000000000000003b9aee44
14 | *
15 | * © 2009-2022 Adobe Systems Incorporated. All Rights Reserved.
16 | */
17 | /*{"last_published":"2019-05-08 18:18:41 UTC"}*/
18 |
19 | @import url("https://p.typekit.net/p.css?s=1&k=uma8ayv&ht=tk&f=7180.7181.7182.7184.22747&a=9025710&app=typekit&e=css");
20 |
21 | @font-face {
22 | font-family:"adobe-clean";
23 | src:url("https://use.typekit.net/af/cb695f/000000000000000000017701/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/cb695f/000000000000000000017701/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/cb695f/000000000000000000017701/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
24 | font-display:swap;font-style:normal;font-weight:400;font-stretch:normal;
25 | }
26 |
27 | @font-face {
28 | font-family:"adobe-clean";
29 | src:url("https://use.typekit.net/af/74ffb1/000000000000000000017702/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/74ffb1/000000000000000000017702/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/74ffb1/000000000000000000017702/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
30 | font-display:swap;font-style:italic;font-weight:400;font-stretch:normal;
31 | }
32 |
33 | @font-face {
34 | font-family:"adobe-clean";
35 | src:url("https://use.typekit.net/af/eaf09c/000000000000000000017703/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/eaf09c/000000000000000000017703/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/eaf09c/000000000000000000017703/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
36 | font-display:swap;font-style:normal;font-weight:700;font-stretch:normal;
37 | }
38 |
39 | @font-face {
40 | font-family:"adobe-clean";
41 | src:url("https://use.typekit.net/af/40207f/0000000000000000000176ff/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/40207f/0000000000000000000176ff/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/40207f/0000000000000000000176ff/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
42 | font-display:swap;font-style:normal;font-weight:300;font-stretch:normal;
43 | }
44 |
45 | @font-face {
46 | font-family:"adobe-clean-serif";
47 | src:url("https://use.typekit.net/af/505d17/00000000000000003b9aee44/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/505d17/00000000000000003b9aee44/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/505d17/00000000000000003b9aee44/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype");
48 | font-display:swap;font-style:normal;font-weight:900;font-stretch:normal;
49 | }
50 |
51 | .tk-adobe-clean { font-family: "adobe-clean",sans-serif; }
52 | .tk-adobe-clean-serif { font-family: "adobe-clean-serif",sans-serif; }
53 |
--------------------------------------------------------------------------------
/hlx_statics/blocks/accordion/accordion.js:
--------------------------------------------------------------------------------
1 | import {removeEmptyPTags, createTag, applyWidthOverride, applyBkgColorOverride, applyAnalyticHeaderOverride} from '../../scripts/lib-adobeio.js';
2 |
3 | /**
4 | * Returns the HTML for an accordion item
5 | * @param {*} heading The heading text of the accordion
6 | * @returns The accordion item HTML
7 | */
8 | function getAccordionItem(heading) {
9 | return `
10 |
27 |
28 |
29 | 11 | 24 |
25 |
26 |
27 |
`;
28 | //text is added later
29 | }
30 |
31 | /**
32 | * decorates the accordion
33 | * @param {Element} block The accordion block element
34 | */
35 | export default async function decorate(block) {
36 | block.setAttribute('daa-lh', 'accordion');
37 | removeEmptyPTags(block);
38 | block.parentElement.parentElement.classList.add('accordion-whole');
39 |
40 | const accordion_div = createTag('div', {class: 'accordion-div'});
41 | block.querySelectorAll('.accordion > div').forEach((item) => {
42 | const text = item.querySelector('p');
43 | if(text === null){ //title
44 | const title = item.querySelector('h1, h2');
45 | title.setAttribute('class', 'spectrum-Heading spectrum-Heading--sizeM');
46 | title.parentElement.setAttribute('class', 'accordion-title');
47 | }else{ //accordion item
48 | item.setAttribute("class", "accordion-item");
49 | const heading = item.querySelector('h3, h4, h5, h6')?.innerText;
50 | item.innerHTML = getAccordionItem(heading);
51 | item.querySelector('.accordion-itemContent').appendChild(text);
52 | accordion_div.appendChild(item);
53 | };
54 | });
55 | block.appendChild(accordion_div);
56 |
57 | const accordion_items = block.querySelectorAll('.accordion-item');
58 | accordion_items.forEach((item, i) => {
59 | item.addEventListener("click", () => {
60 | const heading = item.querySelector('.accordion-itemHeader');
61 | const content = item.querySelector('.accordion-itemContent');
62 | if(!heading.classList.contains('active')){ //click on item - show content
63 | heading.classList.add('active');
64 | content.style.display = 'block';
65 | heading.querySelector('.spectrum-UIIcon-ChevronRight100').style.display = 'none';
66 | heading.querySelector('.spectrum-UIIcon-ChevronDown100').style.display = 'block';
67 | }else{ //hide contents
68 | heading.classList.remove('active');
69 | content.style.display = 'none';
70 | heading.querySelector('.spectrum-UIIcon-ChevronRight100').style.display = 'block';
71 | heading.querySelector('.spectrum-UIIcon-ChevronDown100').style.display = 'none';
72 | };
73 | });
74 | });
75 | applyBkgColorOverride(block);
76 | applyWidthOverride(block);
77 | applyAnalyticHeaderOverride(block);
78 | }
--------------------------------------------------------------------------------
/hlx_statics/blocks/footer/footer.css:
--------------------------------------------------------------------------------
1 | footer {
2 | position: relative;
3 | padding-bottom: var(--spectrum-global-dimension-size-400);
4 | padding-top: var(--spectrum-global-dimension-size-600);
5 | background-color: var(--spectrum-global-color-gray-75);
6 | width: 100%;
7 | }
8 |
9 | @media screen and (max-width: 768px) {
10 | footer {
11 | padding-top: 0;
12 | }
13 | }
14 |
15 | @media screen and (max-width:768px) {
16 | footer {
17 | max-width: none;
18 | }
19 | }
20 |
21 | footer > div {
22 | box-sizing: border-box;
23 | max-width: calc(12 * var(--spectrum-global-dimension-static-grid-fixed-max-width) / var(--spectrum-global-dimension-static-grid-columns));
24 | margin: 0 auto;
25 | }
26 |
27 | footer > div ul {
28 | list-style: none;
29 | padding: 0;
30 | }
31 |
32 | footer h3.spectrum-Heading--XS {
33 | position: absolute;
34 | white-space: nowrap;
35 | }
36 |
37 | footer > div ul.spectrum-Body--sizeS {
38 | padding-top: var(--spectrum-global-dimension-size-500);
39 | padding-right: var(--spectrum-global-dimension-size-200);
40 | }
41 |
42 | footer > div ul.spectrum-Body--sizeS > li {
43 | margin-top: var(--spectrum-global-dimension-size-200);
44 | }
45 |
46 | footer > div ul.spectrum-Body--sizeS > li:first-of-type {
47 | margin-top: 0;
48 | }
49 |
50 | footer .footer-links-container-inner {
51 | display: grid;
52 | grid-template-areas: 'apis blogs support developer';
53 | grid-template-columns: 30% 22% 19%;
54 | gap: var(--spectrum-global-dimension-size-400);
55 | padding: var(--spectrum-global-dimension-size-200);
56 | }
57 |
58 | @media screen and (max-width: 320px) {
59 | footer .footer-links-container-inner {
60 | display: flex;
61 | flex-direction: column;
62 | padding: var(--spectrum-global-dimension-size-200);
63 | margin: 0 auto;
64 | }
65 | }
66 |
67 | @media screen and (max-width: 768px) {
68 | footer .footer-links-container-inner {
69 | display: flex;
70 | flex-wrap: wrap;
71 | flex-direction: row;
72 | justify-content: center;
73 | }
74 | }
75 |
76 | footer .footer-divider {
77 | position: absolute;
78 | top: 0;
79 | right: 0;
80 | height: 100%;
81 | }
82 |
83 | footer div.footer-links-container-inner > div:nth-child(1) {
84 | position: relative;
85 | grid-area: apis;
86 | }
87 |
88 | footer div.footer-links-container-inner > div:nth-child(1) > div > ul > li > strong > a {
89 | padding-bottom: var(--spectrum-global-dimension-size-750) !important;
90 | }
91 |
92 | footer .footer-apis-container {
93 | display: flex;
94 | }
95 |
96 | @media screen and (max-width: 768px) {
97 | footer .footer-apis-container {
98 | flex-direction: column;
99 | }
100 |
101 | footer .footer-apis-container > div {
102 | margin: 0;
103 | }
104 | }
105 |
106 | footer .footer-services-container {
107 | margin-left: var(--spectrum-global-dimension-size-400);
108 | }
109 |
110 | footer .footer-services-container ul {
111 | padding-top: var(--spectrum-global-dimension-size-750) !important;
112 | }
113 |
114 | footer div.footer-links-container-inner > div:nth-child(2) {
115 | position: relative;
116 | grid-area: blogs;
117 | }
118 |
119 | footer div.footer-links-container-inner > div:nth-child(3) {
120 | position: relative;
121 | grid-area: support;
122 | }
123 |
124 | footer .footer-legal {
125 | display: flex;
126 | align-items: center;
127 | justify-content: space-between;
128 | margin-top: var(--spectrum-global-dimension-size-100);
129 | }
130 |
131 | footer .footer-legal ul {
132 | display: inline-flex;
133 | color: var(--spectrum-global-color-gray-700);
134 | }
135 |
136 | footer .footer-legal ul > li {
137 | margin-right: var(--spectrum-global-dimension-size-400);
138 | }
139 |
140 | @media screen and (max-width: 768px) {
141 | footer .footer-legal {
142 | flex-direction: column;
143 | align-items: flex-start;
144 | padding: var(--spectrum-global-dimension-size-200);
145 | margin: 0 auto;
146 | }
147 | }
148 |
149 | footer .footer-legal p {
150 | color: var(--spectrum-global-color-gray-700);
151 | }
152 |
153 | @media screen and (max-width: 768px) {
154 | footer .footer-legal p {
155 | display: block;
156 | margin-top: var(--spectrum-global-dimension-size-200);
157 | }
158 | }
159 |
160 | footer .footer-horizontal {
161 | margin-top: var(--spectrum-global-dimension-size-700);
162 | }
163 |
--------------------------------------------------------------------------------
/hlx_statics/scripts/scripts.js:
--------------------------------------------------------------------------------
1 | import {
2 | sampleRUM,
3 | buildBlock,
4 | decorateBlock,
5 | loadBlock,
6 | decorateButtons,
7 | decorateIcons,
8 | decorateSections,
9 | decorateBlocks,
10 | decorateTemplateAndTheme,
11 | waitForLCP,
12 | loadBlocks,
13 | loadCSS,
14 | addFavIcon,
15 | getMetadata,
16 | toCamelCase,
17 | toClassName,
18 | } from './lib-helix.js';
19 |
20 | import {
21 | buildEmbeds,
22 | toggleScale,
23 | decorateAnchorLink,
24 | } from './lib-adobeio.js';
25 |
26 | export {
27 | sampleRUM,
28 | toCamelCase,
29 | toClassName,
30 | getMetadata,
31 | loadCSS,
32 | };
33 |
34 | /*
35 | * ------------------------------------------------------------
36 | * Edit above at your own risk
37 | * ------------------------------------------------------------
38 | */
39 |
40 | window.hlx = window.hlx || {};
41 | window.adobeid = window.adobeid || {};
42 |
43 | const LCP_BLOCKS = []; // add your LCP blocks to the list
44 | window.hlx.RUM_GENERATION = 'project-1'; // add your RUM generation information here
45 |
46 | window.addEventListener('resize', toggleScale);
47 |
48 | function loadHeader(header) {
49 | const headerBlock = buildBlock('header', '');
50 | header.append(headerBlock);
51 | decorateBlock(headerBlock);
52 | loadBlock(headerBlock);
53 | }
54 |
55 | function loadFooter(footer) {
56 | const footerBlock = buildBlock('footer', '');
57 | footer.append(footerBlock);
58 | decorateBlock(footerBlock);
59 | loadBlock(footerBlock);
60 | }
61 |
62 | /**
63 | * Builds all synthetic blocks in a container element.
64 | * @param {Element} main The container element
65 | */
66 |
67 | function buildAutoBlocks(main) {
68 | try {
69 | buildEmbeds(main);
70 | } catch (error) {
71 | // eslint-disable-next-line no-console
72 | console.error('Auto Blocking failed', error);
73 | }
74 | }
75 |
76 | /**
77 | * Decorates the main element.
78 | * @param {Element} main The main element
79 | */
80 | // eslint-disable-next-line import/prefer-default-export
81 | export function decorateMain(main) {
82 | // hopefully forward compatible button decoration
83 | decorateButtons(main);
84 | buildAutoBlocks(main);
85 | decorateSections(main);
86 | decorateBlocks(main);
87 | }
88 |
89 | /**
90 | * Decorates the html element.
91 | * @param {*} html The html element
92 | */
93 | function decorateHTML(html) {
94 | html.className = 'spectrum spectrum--light spectrum--medium';
95 | html.dir = 'ltr';
96 | html.lang = 'en';
97 | }
98 |
99 | /**
100 | * loads everything needed to get to LCP.
101 | */
102 | async function loadEager(doc) {
103 | const experiment = getMetadata('experiment');
104 | const instantExperiment = getMetadata('instant-experiment');
105 | if (instantExperiment || experiment) {
106 | // eslint-disable-next-line import/no-cycle
107 | const { runExperiment } = await import('./experimentation.js');
108 | await runExperiment(experiment, instantExperiment);
109 | }
110 |
111 | decorateTemplateAndTheme();
112 | const html = doc.querySelector('html');
113 | if (html) {
114 | decorateHTML(html);
115 | }
116 | toggleScale();
117 | const main = doc.querySelector('main');
118 | if (main) {
119 | decorateMain(main);
120 | await waitForLCP(LCP_BLOCKS);
121 | }
122 | }
123 |
124 | /**
125 | * loads everything that doesn't need to be delayed.
126 | */
127 | async function loadLazy(doc) {
128 | const main = doc.querySelector('main');
129 | await loadBlocks(main);
130 | const { hash } = window.location;
131 | const element = hash ? doc.getElementById(hash.substring(1)) : false;
132 | if (hash && element) element.scrollIntoView();
133 |
134 | loadHeader(doc.querySelector('header'));
135 | decorateIcons(main);
136 | loadFooter(doc.querySelector('footer'));
137 |
138 | loadCSS(`${window.hlx.codeBasePath}/styles/lazy-styles.css`);
139 | addFavIcon(`/hlx_statics/icons/adobe.svg`);
140 |
141 | if (window.location.hostname.endsWith('hlx.page') || window.location.hostname === ('localhost')) {
142 | // eslint-disable-next-line import/no-cycle
143 | import('../../tools/preview/experimentation-preview.js');
144 | }
145 | }
146 |
147 | /**
148 | * loads everything that happens a lot later, without impacting
149 | * the user experience.
150 | */
151 | function loadDelayed() {
152 | // eslint-disable-next-line import/no-cycle
153 | window.setTimeout(() => import('./delayed.js'), 500);
154 | // load anything that can be postponed to the latest here
155 | }
156 |
157 | async function loadPage() {
158 | await loadEager(document);
159 | await loadLazy(document);
160 | loadDelayed(document);
161 | }
162 |
163 | loadPage();
164 |
--------------------------------------------------------------------------------
/hlx_statics/blocks/columns/columns.js:
--------------------------------------------------------------------------------
1 | import {
2 | checkExternalLink,
3 | createTag,
4 | removeEmptyPTags,
5 | getBlockSectionContainer,
6 | decorateAnchorLink,
7 | applyBkgColorOverride,
8 | applyWidthOverride,
9 | applyAnalyticHeaderOverride,
10 | } from '../../scripts/lib-adobeio.js';
11 |
12 | import {
13 | createOptimizedPicture,
14 | decorateLightOrDark,
15 | } from '../../scripts/lib-helix.js';
16 |
17 | /**
18 | * Generates optimized images for all columns in the block
19 | * @param {*} block The columns block
20 | */
21 | function processImages(block) {
22 | block.querySelectorAll('picture > img').forEach((img) => {
23 | const picture = createOptimizedPicture(img.src, img.alt);
24 | const parent = img.parentElement.parentElement;
25 | const p = createTag('p', { class: 'spectrum-Body spectrum-Body--sizeM' });
26 | p.appendChild(picture);
27 | parent.replaceChild(p, img.parentElement);
28 | });
29 | }
30 |
31 | /**
32 | * loads and decorates the columns
33 | * @param {Element} block The columns block element
34 | */
35 | export default async function decorate(block) {
36 | const container = getBlockSectionContainer(block);
37 |
38 | block.setAttribute('daa-lh', 'column');
39 | applyAnalyticHeaderOverride(block);
40 | decorateLightOrDark(block);
41 |
42 | if (!container.classList.contains('columns-container')) {
43 | // eslint-disable-next-line no-console
44 | console.error('Columns Block expects .columns-container to be parent.');
45 | }
46 |
47 | removeEmptyPTags(block);
48 |
49 | block.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((h) => {
50 | h.classList.add('spectrum-Heading', 'spectrum-Heading--sizeM', 'column-header');
51 | decorateAnchorLink(h);
52 | });
53 | block.querySelectorAll('p').forEach((p) => {
54 | const hasLinks = p.querySelectorAll('a, button');
55 | // don't attach to icon container or if p tag contains links
56 | if (!p.classList.contains('icon-container') && hasLinks.length === 0) {
57 | p.classList.add('spectrum-Body', 'spectrum-Body--sizeM');
58 | } else if (hasLinks.length > 0) {
59 | p.classList.add('icon-container');
60 | }
61 | });
62 |
63 | block.querySelectorAll('.columns > div > div').forEach((column) => {
64 | const buttonGroupContainer = createTag('div', { class: 'button-group-container' });
65 | column.querySelectorAll('.button-container').forEach((p, key) => {
66 | const prevElement = p.previousElementSibling;
67 | if (key === 0) {
68 | prevElement.insertAdjacentElement("afterend",buttonGroupContainer);
69 | }
70 | buttonGroupContainer.appendChild(p);
71 | });
72 | column.querySelectorAll('ul').forEach((ul) => {
73 | ul.parentElement.classList.add('listing');;
74 | ul.classList.add('spectrum-Body', 'spectrum-Body--sizeM');
75 | });
76 | });
77 |
78 | block.querySelectorAll('a').forEach((a) => {
79 | if (!a.classList.contains('button')) {
80 | a.classList.add('spectrum-Link', 'spectrum-Link--quiet');
81 | }
82 | if (!a.classList.contains('anchor-link')) {
83 | checkExternalLink(a);
84 | }
85 | });
86 |
87 | block.querySelectorAll('.button').forEach((button) => {
88 | button.classList.add('spectrum-Button', 'spectrum-Button--sizeM');
89 | if (button.parentElement.tagName.toLowerCase() !== 'strong') {
90 | button.classList.add('spectrum-Button--secondary', 'spectrum-Button--outline');
91 | } else {
92 | button.parentElement.replaceWith(button);
93 | button.classList.add('spectrum-Button--cta');
94 | }
95 | });
96 |
97 | /* Stop here when metadata is `style: center` */
98 | if (container.classList.contains('center')) {
99 | return;
100 | }
101 |
102 | block.querySelectorAll('.columns > div > div:first-child').forEach((column) => {
103 | column.classList.add('first-column');
104 | });
105 | block.querySelectorAll('.columns > div > div:nth-child(2)').forEach((column) => {
106 | column.classList.add('second-column');
107 | });
108 |
109 | block.querySelectorAll('div > div.second-column').forEach((secondColumn) => {
110 | const productLinkContainer = createTag('div', { class: 'product-link-container' });
111 | secondColumn.querySelectorAll('p.icon-container').forEach((innerSecond) => {
112 | productLinkContainer.append(innerSecond);
113 | });
114 | secondColumn.append(productLinkContainer);
115 | });
116 | const observer = new IntersectionObserver((entries) => {
117 | if (entries.some((e) => e.isIntersecting)) {
118 | observer.disconnect();
119 | processImages(block);
120 | }
121 | });
122 | observer.observe(block);
123 | applyBkgColorOverride(block);
124 | applyWidthOverride(block);
125 | }
126 |
--------------------------------------------------------------------------------
/hlx_statics/blocks/api-browser/api-browser.css:
--------------------------------------------------------------------------------
1 | main .api-browser-container {
2 | background-color: #fff;
3 | padding-top: 32px;
4 | padding-bottom: 32px;
5 | }
6 |
7 | main .picker {
8 | display: flex;
9 | align-items: right;
10 | height: var(--spectrum-global-dimension-size-800);
11 | justify-content: flex-end;
12 | margin-right: var(--spectrum-global-dimension-size-400);
13 | }
14 |
15 | main .picker .sort-group{
16 | display: flex;
17 | }
18 |
19 | main .picker .sort-by-label{
20 | margin: 8px;
21 | }
22 |
23 | main .picker .filter-by-popover {
24 | display: flex;
25 | min-width: var(--spectrum-global-dimension-size-800);
26 | width: auto;
27 | z-index: 100;
28 | max-height: calc(100vh - var(--spectrum-global-dimension-size-2400));
29 | overflow: auto;
30 | margin-top: 32px;
31 | margin-left: 40px;
32 | }
33 |
34 | main .api-browser {
35 | max-width: var(--spectrum-global-dimension-static-grid-fixed-max-width);
36 | margin: var(--spectrum-global-dimension-size-400) auto;
37 | margin-bottom: 0;
38 | }
39 |
40 | main .api-cards {
41 | display: grid;
42 | grid-template-columns: repeat(auto-fit, calc(var(--spectrum-global-dimension-size-4600) - var(--spectrum-global-dimension-size-800)));
43 | grid-auto-rows: calc(var(--spectrum-global-dimension-size-4600) - var(--spectrum-global-dimension-size-500));
44 | justify-content: center;
45 | gap: var(--spectrum-global-dimension-size-400);
46 | flex: 1;
47 | }
48 |
49 | @media screen and (max-width: 320px) {
50 | main .api-cards {
51 | margin-top: var(--spectrum-global-dimension-size-400);
52 | display: flex;
53 | flex-direction: column;
54 | }
55 | }
56 |
57 | main .api-card {
58 | display: inline-flex;
59 | flex-direction: column;
60 | align-items: center;
61 | width: 100%;
62 |
63 | background: var(--spectrum-global-color-gray-100);
64 | }
65 |
66 | @media screen and (max-width: 320px) {
67 | main .api-card {
68 | display: flex;
69 | width: 100%;
70 | align-items: center;
71 | }
72 | }
73 |
74 | @media screen and (max-width: 768px) {
75 | main .api-card {
76 | flex-wrap: wrap;
77 | }
78 | main .api-card>* {
79 | flex: 0 0 50%;
80 | }
81 | }
82 |
83 | main .api-cards-inner {
84 | display: flex;
85 | }
86 |
87 | @media screen and (max-width: 320px) {
88 | main .api-cards-inner {
89 | flex-direction: column;
90 | align-items: center;
91 | }
92 | }
93 |
94 |
95 | main .api-card-inner {
96 | margin: 0 var(--spectrum-global-dimension-size-300);
97 | width: calc(var(--spectrum-global-dimension-size-4600) - var(--spectrum-global-dimension-size-800));
98 | height: calc(var(--spectrum-global-dimension-size-4600) - var(--spectrum-global-dimension-size-500));
99 | }
100 |
101 | main .api-card-inner:hover {
102 | border-color: var(--spectrum-card-border-color, var(--spectrum-global-color-gray-200));
103 | }
104 |
105 | @media screen and (max-width: 320px) {
106 | main .api-card-inner {
107 | width: 0;
108 | margin: 0;
109 | }
110 | }
111 |
112 | main .api-card-body {
113 | height: calc(var(--spectrum-global-dimension-size-4600) - var(--spectrum-global-dimension-size-500));
114 | overflow: auto;
115 | text-align: left;
116 | }
117 |
118 | main .api-card-icon-container {
119 | position: absolute;
120 | height: var(--spectrum-global-dimension-size-800);
121 | z-index: 1;
122 | }
123 |
124 | main .api-card-icon {
125 | height: var(--spectrum-global-dimension-size-600);
126 | width: var(--spectrum-global-dimension-size-600);
127 | margin-top: 0;
128 | }
129 |
130 | main .api-card-icon img {
131 | display: block;
132 | height: 100%;
133 | object-fit: contain;
134 | }
135 |
136 | main .api-card-icon-container + .api-card-body-inner{
137 | top: var(--spectrum-global-dimension-size-800)
138 | }
139 |
140 | main .api-card-body-inner {
141 | position: relative;
142 | z-index: 1;
143 | background-color: var(--spectrum-global-color-gray-50);
144 |
145 | }
146 |
147 | main .api-card-title-container {
148 | margin-top: 0 !important;
149 | margin-bottom: var(--spectrum-global-dimension-size-100) !important;
150 | }
151 |
152 | main .api-card-title {
153 | font-size: var(--spectrum-global-dimension-size-200);
154 | }
155 |
156 | main .api-card-title h4 {
157 | margin-top: 0;
158 | margin-bottom: var(--spectrum-global-dimension-size-200);
159 | }
160 |
161 | main .api-card-content {
162 | height: auto;
163 | margin-bottom: 0 !important;
164 | }
165 |
166 | main .api-card-button-container {
167 | display: flex;
168 | --gap: var(--spectrum-global-dimension-size-200);
169 | flex-wrap: wrap;
170 | margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
171 | width: calc(100% + var(--gap));
172 | justify-content: flex-end;
173 | }
174 |
175 | main .api-card-button-container a {
176 | margin: var(--gap) 0 0 var(--gap);
177 | }
178 |
179 |
180 | @media screen and (max-width: 320px) {
181 | main .api-card-button-container {
182 | justify-content: center;
183 | }
184 | }
185 |
186 | main .api-browser .filters {
187 | width: var(--spectrum-global-dimension-size-3000, var(--spectrum-alias-size-3000));
188 | align-items: flex-end;
189 | flex-direction: column;
190 | display: flex;
191 | }
192 |
193 | @media screen and (max-width: 768px) {
194 | main .api-browser .api-cards-inner {
195 | display: block;
196 | }
197 | main .api-browser .filters{
198 | padding: var(--spectrum-global-dimension-size-400);
199 | }
200 | }
201 |
202 | main .api-browser .filters-inner {
203 | align-items: flex-start;
204 | flex-direction: column;
205 | display: flex;
206 | }
207 |
208 | main .filter-item {
209 | margin-bottom: var(--spectrum-global-dimension-size-100, var(--spectrum-alias-size-100));
210 | }
211 |
212 | main .filters-list {
213 | margin-top: var(--spectrum-global-dimension-size-100);
214 | display: flex;
215 | flex-direction: column;
216 | }
217 |
218 | main .filter-label {
219 | margin-left: var(--spectrum-checkbox-text-gap);
220 | }
221 |
--------------------------------------------------------------------------------
/hlx_statics/blocks/columns/columns.css:
--------------------------------------------------------------------------------
1 | main div.columns-container {
2 | width: 100%;
3 | background: var(--spectrum-global-color-gray-100);
4 | }
5 |
6 | main div.columns {
7 | width: var(--spectrum-global-dimension-static-grid-fixed-max-width);
8 | box-sizing: border-box;
9 | margin: auto;
10 | }
11 |
12 | @media screen and (max-width: 1280px) {
13 | main div.columns {
14 | width: 100%;
15 | }
16 | main div.columns > div {
17 | flex-direction: column !important;
18 | }
19 | }
20 |
21 | main div.columns > div {
22 | display: flex;
23 | align-items: center;
24 | padding: var(--spectrum-global-dimension-size-1000) 0;
25 | }
26 |
27 | main div.columns > div:nth-child(even) {
28 | flex-direction: row-reverse;
29 | }
30 |
31 | main div.columns-container.background-color-white {
32 | background-color: white;
33 | }
34 |
35 | main div.columns-container.section[data-class="photoshoppricing"] .columns > div > div{
36 | flex-basis:auto;
37 | flex-grow: 1;
38 | flex-shink: 1;
39 | text-align: left;
40 | padding: 0 var(--spectrum-global-dimension-size-800);
41 | }
42 |
43 | main div.columns-container.section[data-class="photoshoppricing"] .columns .button-container{
44 | margin-left:0px;
45 | }
46 |
47 | main div.columns-container.section[data-list-class="checkmark"] ul {
48 | list-style: none;
49 | font-size: var(--spectrum-global-dimension-font-size-200);
50 | padding-top: var(--spectrum-global-dimension-size-300);
51 | padding-left: 0px;
52 | }
53 |
54 | main div.columns-container.section[data-list-class="checkmark"] ul > li {
55 | margin-bottom: 12px;
56 | }
57 |
58 | main div.columns-container.section[data-list-class="checkmark"] ul > li:before{
59 | color: #096;
60 | content: "\2714\0020";
61 | }
62 |
63 | main div.columns-container
64 | @media screen and (max-width: 1280px) {
65 | main div.columns > div {
66 | flex-direction: column;
67 | }
68 | }
69 |
70 | main div.columns div.first-column {
71 | display: flex;
72 | align-items: center;
73 | justify-content: center;
74 | width: 50%;
75 | height: calc(var(--spectrum-global-dimension-size-4600) - var(--spectrum-global-dimension-size-225));
76 | box-sizing: border-box;
77 | padding: 0 var(--spectrum-global-dimension-size-100);
78 | margin-top: 0;
79 | }
80 |
81 | main div.columns div.first-column img {
82 | max-height: 350px;
83 | }
84 |
85 | @media screen and (max-width: 1280px) {
86 | main div.columns div.first-column {
87 | width: 100%;
88 | }
89 | }
90 |
91 | main div.second-column {
92 | width: 50%;
93 | display: flex;
94 | flex-direction: column;
95 | justify-content: center;
96 | text-align: left;
97 | box-sizing: border-box;
98 | padding: 0 var(--spectrum-global-dimension-size-400);
99 | }
100 |
101 | main .column-header .anchor-link{
102 | padding-left: 10px;
103 | visibility: hidden;
104 | }
105 |
106 | main .column-header:hover .anchor-link{
107 | padding-left: 10px;
108 | visibility: visible;
109 | }
110 |
111 | @media screen and (max-width: 1280px) {
112 | main div.columns div.second-column {
113 | width: 100%;
114 | margin: var(--spectrum-global-dimension-size-400) 0;
115 | }
116 | }
117 |
118 | main div.columns h3.column-header {
119 | margin-top: 0!important;
120 | margin-bottom: var(--spectrum-global-dimension-size-200)!important;
121 | scroll-margin-top:100px;
122 | }
123 |
124 | main div.columns h3.column-header + p {
125 | margin-top: 0!important;
126 | }
127 |
128 | main div.columns p + p {
129 | margin-top: var(--spectrum-global-dimension-size-300);
130 | }
131 |
132 | main div.columns div.product-link-container p {
133 | margin-top: var(--spectrum-global-dimension-size-300);
134 | }
135 |
136 | main div.columns div.listing.second-column[data-align="right"]{
137 | text-align: right;
138 | width: auto;
139 | }
140 |
141 | main div.columns div.listing ul {
142 | text-align: left;
143 | }
144 |
145 | @media screen and (min-width:768px) {
146 | main div.columns div.product-link-container p + p {
147 | margin-left: var(--spectrum-global-dimension-size-300);
148 | }
149 | }
150 |
151 | main div.second-column div.product-link-container {
152 | display: flex;
153 | flex-direction: row;
154 | }
155 |
156 | @media screen and (max-width:768px) {
157 | main div.second-column div.product-link-container {
158 | flex-wrap: wrap;
159 | }
160 | main div.columns div.product-link-container p {
161 | width: 150px;
162 | }
163 | }
164 |
165 | main div.second-column div.product-link-container p.icon-container {
166 | display: flex;
167 | align-items: center;
168 | }
169 |
170 | main div.second-column div.product-link-container img {
171 | height: var(--spectrum-global-dimension-size-400);
172 | width: var(--spectrum-global-dimension-size-400);
173 | object-fit: contain;
174 | }
175 |
176 | main div.second-column div.product-link-container svg {
177 | height: var(--spectrum-global-dimension-size-400);
178 | width: var(--spectrum-global-dimension-size-400);
179 | object-fit: contain;
180 | }
181 |
182 | main div.second-column div.product-link-container a {
183 | margin-left: var(--spectrum-global-dimension-size-100);
184 | }
185 |
186 | /* metadata: style: center */
187 |
188 | main .columns-container.center div.columns {
189 | width: auto;
190 | }
191 |
192 | main .columns-container.center div.columns > div {
193 | align-items: start;
194 | }
195 |
196 | main .columns-container.center div.columns > div > div {
197 | display: flex;
198 | flex-direction: column;
199 | text-align: center;
200 | padding: 0 var(--spectrum-global-dimension-size-400);
201 | }
202 |
203 | main .columns-container.center div.columns .button-container {
204 | display: inline-flex;
205 | margin: var(--spectrum-global-dimension-size-200) var(--spectrum-global-dimension-size-100);
206 | margin-bottom: 0;
207 | }
208 |
209 | @media screen and (max-width: 1280px) {
210 | main .columns-container.center div.columns > div > div {
211 | text-align: center;
212 | padding: var(--spectrum-global-dimension-size-1000) var(--spectrum-global-dimension-size-400);
213 | }
214 |
215 | main .columns-container.center div.columns > div {
216 | align-items: center;
217 | }
218 | }
219 |
--------------------------------------------------------------------------------
/hlx_statics/icons/genstudio.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/hlx_statics/scripts/delayed.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line import/no-cycle
2 | import {
3 | focusRing,
4 | isHlxPath,
5 | isStageEnvironment,
6 | decorateProfile,
7 | addExtraScript,
8 | addExtraScriptWithLoad,
9 | setAnalyticsAttributes
10 | } from './lib-adobeio.js';
11 |
12 | async function fetchProfileAvatar(userId) {
13 | try {
14 | const req = await fetch(`https://cc-api-behance.adobe.io/v2/users/${userId}?api_key=SUSI2`);
15 | if (req) {
16 | const res = await req.json();
17 | const avatarUrl = res?.user?.images?.['138'] ?? '/hlx_statics/icons/avatar.svg';
18 | if (document.querySelector('#nav-profile-popover-avatar-img')) {
19 | document.querySelector('#nav-profile-popover-avatar-img').src = avatarUrl;
20 | }
21 |
22 | const profileButton = document.querySelector('#nav-profile-dropdown-button');
23 | if (profileButton.querySelector('svg')) {
24 | profileButton.querySelector('svg').remove();
25 | }
26 | profileButton.innerHTML = `
27 |
28 | 
29 |
30 | `;
31 | }
32 | } catch (e) {
33 | // eslint-disable-next-line no-console
34 | console.warn(e);
35 | }
36 | }
37 |
38 | if (isHlxPath(window.location.host) || isStageEnvironment(window.location.host)) {
39 | addExtraScript(document.body, 'https://auth-stg1.services.adobe.com/imslib/imslib.js');
40 | } else {
41 | addExtraScript(document.body, 'https://auth.services.adobe.com/imslib/imslib.min.js');
42 | }
43 |
44 | addExtraScript(document.body, 'https://www.adobe.com/marketingtech/main.min.js');
45 | addExtraScript(document.body, 'https://wwwimages2.adobe.com/etc/beagle/public/globalnav/adobe-privacy/latest/privacy.min.js');
46 |
47 | document.querySelectorAll('.embed').forEach((embed) => {
48 | const iframe = embed.querySelector('iframe');
49 | if (!iframe.src) {
50 | iframe.src = iframe.getAttribute('data-src');
51 | iframe.onload = () => { iframe.style.opacity = 1; };
52 | }
53 | });
54 |
55 | focusRing();
56 | setAnalyticsAttributes();
57 |
58 | const imsSignIn = new Event('imsSignIn');
59 |
60 | // should refactor this if we get more ims clients coming
61 | if (isHlxPath(window.location.host)) {
62 | window.adobeid = {
63 | client_id: 'helix_adobeio',
64 | scope:
65 | 'AdobeID,openid,read_organizations,additional_info.projectedProductContext,additional_info.roles,gnav,read_pc.dma_bullseye,creative_sdk',
66 | locale: 'en_US',
67 | environment: 'stg1',
68 | useLocalStorage: true,
69 | logsEnabled: true,
70 | redirect_uri: window.location.href,
71 | isSignedIn: false,
72 | onError: (error) => {
73 | // eslint-disable-next-line no-console
74 | console.log(error);
75 | },
76 | onReady: () => {
77 | if (window.adobeIMSMethods.isSignedIn()) {
78 | window.dispatchEvent(imsSignIn);
79 | window.adobeIMSMethods.getProfile();
80 | }
81 | },
82 | };
83 | window.marketingtech = {
84 | adobe: {
85 | launch: {
86 | property: 'global',
87 | environment: 'dev',
88 | },
89 | analytics: {
90 | additionalAccounts: 'pgeo1xxpnwadobeio-qa',
91 | },
92 | },
93 | };
94 | } else if (!isHlxPath(window.location.host) && isStageEnvironment(window.location.host)) {
95 |
96 | if (window.location.pathname.includes('/photoshop/api')) {
97 | window.adobeid = {
98 | client_id: 'cis_easybake',
99 | scope:
100 | 'AdobeID,openid,creative_sdk,creative_cloud,unified_dev_portal,read_organizations,additional_info.projectedProductContext,additional_info.roles,gnav,read_pc.dma_bullseye',
101 | locale: 'en_US',
102 | environment: 'stg1',
103 | useLocalStorage: true,
104 | logsEnabled: true,
105 | redirect_uri: window.location.href,
106 | isSignedIn: false,
107 | onError: (error) => {
108 | // eslint-disable-next-line no-console
109 | console.log(error);
110 | },
111 | onReady: () => {
112 | if (window.adobeIMSMethods.isSignedIn()) {
113 | window.dispatchEvent(imsSignIn);
114 | window.adobeIMSMethods.getProfile();
115 | }
116 | },
117 | };
118 | } else {
119 | window.adobeid = {
120 | client_id: 'stage_adobe_io',
121 | scope:
122 | 'AdobeID,openid,unified_dev_portal,read_organizations,additional_info.projectedProductContext,additional_info.roles,gnav,read_pc.dma_bullseye,creative_sdk',
123 | locale: 'en_US',
124 | environment: 'stg1',
125 | useLocalStorage: true,
126 | logsEnabled: true,
127 | redirect_uri: window.location.href,
128 | isSignedIn: false,
129 | onError: (error) => {
130 | // eslint-disable-next-line no-console
131 | console.log(error);
132 | },
133 | onReady: () => {
134 | if (window.adobeIMSMethods.isSignedIn()) {
135 | window.dispatchEvent(imsSignIn);
136 | window.adobeIMSMethods.getProfile();
137 | }
138 | },
139 | };
140 | }
141 |
142 | window.marketingtech = {
143 | adobe: {
144 | launch: {
145 | property: 'global',
146 | environment: 'dev',
147 | },
148 | analytics: {
149 | additionalAccounts: 'pgeo1xxpnwadobeio-qa',
150 | },
151 | },
152 | };
153 | } else if (!isHlxPath(window.location.host) && !isStageEnvironment(window.location.host)) {
154 | if (window.location.pathname.includes('/photoshop/api')) {
155 | window.adobeid = {
156 | client_id: 'cis_easybake',
157 | scope:
158 | 'AdobeID,openid,creative_sdk,creative_cloud,unified_dev_portal,read_organizations,additional_info.projectedProductContext,additional_info.roles,gnav,read_pc.dma_bullseye',
159 | locale: 'en_US',
160 | environment: 'prod',
161 | useLocalStorage: true,
162 | logsEnabled: false,
163 | redirect_uri: window.location.href,
164 | isSignedIn: false,
165 | onError: (error) => {
166 | // eslint-disable-next-line no-console
167 | console.log(error);
168 | },
169 | onReady: () => {
170 | if (window.adobeIMSMethods.isSignedIn()) {
171 | window.dispatchEvent(imsSignIn);
172 | window.adobeIMSMethods.getProfile();
173 | }
174 | },
175 | };
176 | } else {
177 | window.adobeid = {
178 | client_id: 'adobe_io',
179 | scope:
180 | 'AdobeID,openid,unified_dev_portal,read_organizations,additional_info.projectedProductContext,additional_info.roles,gnav,read_pc.dma_bullseye,creative_sdk',
181 | locale: 'en_US',
182 | environment: 'prod',
183 | useLocalStorage: true,
184 | logsEnabled: false,
185 | redirect_uri: window.location.href,
186 | isSignedIn: false,
187 | onError: (error) => {
188 | // eslint-disable-next-line no-console
189 | console.log(error);
190 | },
191 | onReady: () => {
192 | if (window.adobeIMSMethods.isSignedIn()) {
193 | window.dispatchEvent(imsSignIn);
194 | window.adobeIMSMethods.getProfile();
195 | }
196 | },
197 | };
198 | }
199 |
200 | window.marketingtech = {
201 | adobe: {
202 | launch: {
203 | property: 'global',
204 | environment: 'production',
205 | },
206 | analytics: {
207 | additionalAccounts: 'pgeo1xxpnwadobeio-prod',
208 | },
209 | },
210 | };
211 | }
212 |
213 | window.adobeIMSMethods = {
214 | isSignedIn: () => window.adobeIMS.isSignedInUser(),
215 | signIn: () => {
216 | window.adobeIMS.signIn();
217 | },
218 | signOut() {
219 | window.adobeIMS.signOut({});
220 | },
221 | getProfile() {
222 | window.adobeIMS.getProfile().then((profile) => {
223 | window.adobeid.profile = profile;
224 | window.adobeid.profile.avatarUrl = '/hlx_statics/icons/avatar.svg';
225 | decorateProfile(window.adobeid.profile);
226 | fetchProfileAvatar(window.adobeid.profile.userId);
227 | })
228 | .catch((ex) => {
229 | window.adobeid.profile = ex;
230 | });
231 | },
232 | };
233 |
234 | // cookie preference
235 | window.fedsConfig = {
236 | privacy: {
237 | // TODO config from adobe.com
238 | otDomainId: '7a5eb705-95ed-4cc4-a11d-0cc5760e93db',
239 | footerLinkSelector: '#openPrivacy',
240 | },
241 | };
242 |
243 | if (window.adobeImsFactory && window.adobeImsFactory.createIMSLib) {
244 | window.adobeImsFactory.createIMSLib(window.adobeid);
245 | }
246 |
247 | if (window.adobeIMS && window.adobeIMS.initialize) {
248 | window.adobeIMS.initialize();
249 | }
250 |
--------------------------------------------------------------------------------
/hlx_statics/blocks/carousel/carousel.js:
--------------------------------------------------------------------------------
1 | import { createTag, decorateButtons, removeEmptyPTags, applyWidthOverride, applyBkgColorOverride, applyAnalyticHeaderOverride} from '../../scripts/lib-adobeio.js';
2 | /**
3 | * decorates the carousel
4 | * @param {Element} block The carousel block element
5 | */
6 | export default async function decorate(block) {
7 | block.setAttribute('daa-lh', 'carousel');
8 | removeEmptyPTags(block);
9 | decorateButtons(block);
10 |
11 | const carousel_block_child = createTag('div', {class: 'block-container'});
12 | block.append(carousel_block_child);
13 |
14 | const carousel_block_circle = createTag('div', {class: 'carousel-circle-div'});
15 | block.append(carousel_block_circle);
16 |
17 | const carousel_section = createTag('section', {class: 'slider-wrapper'});
18 | carousel_block_child.append(carousel_section);
19 |
20 | const arrow_button_previous = createTag('button', {class: 'slide-arrow'});
21 | arrow_button_previous.classList.add('slide-arrow-previous');
22 | arrow_button_previous.innerHTML = '‹'
23 | const arrow_button_forward = createTag('button', {class: 'slide-arrow'});
24 | arrow_button_forward.classList.add('slide-arrow-forward');
25 | arrow_button_forward.innerHTML = '›'
26 |
27 | const carousel_ul = createTag('ul', {class: 'slides-container'});
28 | carousel_section.append(carousel_ul);
29 |
30 | //add a count to keep track of which slide is showing
31 | let count = 1;
32 |
33 | block.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((h) => {
34 | h.parentElement.classList.add('carousel-container');
35 | h.parentElement.parentElement.replaceWith(carousel_block_child);
36 | h.classList.add('spectrum-Heading', 'spectrum-Heading--sizeL', 'carousel-heading');
37 | h.parentElement.setAttribute('id', h.id);
38 |
39 | //add circle for every slide
40 | let div_slide_circle = block.querySelector(".carousel-circle-div");
41 | let circle_button = createTag('button', {class: 'carousel-circle'});
42 | circle_button.setAttribute('id', count);
43 | div_slide_circle.append(circle_button);
44 | count += 1;
45 |
46 | let carousel_li = createTag('li', {class: 'slide'});
47 | carousel_ul.append(carousel_li);
48 | carousel_li.append(h.parentElement);
49 |
50 | //add everything but image to the left div
51 | let flex_div = createTag('div', { id: 'right-flex-div-'+h.id});
52 | h.parentElement.append(flex_div);
53 | flex_div.append(h);
54 |
55 | let button_div = createTag('div', { id: 'button-div-'+h.id});
56 | h.parentElement.append(button_div);
57 |
58 | });
59 |
60 | carousel_block_child.insertBefore(arrow_button_previous, carousel_section);
61 | carousel_block_child.append(arrow_button_forward);
62 |
63 | //add id to image and add image to left div
64 | block.querySelectorAll('img').forEach((img) => {
65 | img.parentElement.parentElement.classList.add('IMAGE');
66 | //add image to left div
67 | let flex_div = createTag('div', { id: 'left-flex-div-'+img.parentElement.parentElement.parentElement.id});
68 | img.parentElement.parentElement.parentElement.append(flex_div);
69 | flex_div.append(img.parentElement.parentElement);
70 | flex_div.classList.add('left-container');
71 | });
72 |
73 | block.querySelectorAll('p').forEach(function (p){
74 | //add everything but image to the right div
75 | if(p.classList.contains("IMAGE") ){
76 | p.classList.add('image-container');
77 | }else{
78 | let button_div = block.querySelector("[id=button-div-" + p.parentElement.id + "]");
79 | if(p.classList.contains('button-container')){
80 | button_div.classList.add('carousel-button-container');
81 | button_div.append(p);
82 | }else{
83 | let flex_div = block.querySelector("[id=right-flex-div-" + p.parentElement.id + "]");
84 | flex_div.setAttribute('class', 'right-container');
85 | p.classList.add('spectrum-Body', 'spectrum-Body--sizeM');
86 | flex_div.insertBefore(p, button_div);
87 | }
88 | };
89 | });
90 |
91 | //slide functionality with arrow buttons
92 | const slidesContainer = block.querySelector(".slides-container");
93 | const slide = block.querySelector(".slide");
94 | const prevButton = block.querySelector(".slide-arrow-previous");
95 | const nextButton = block.querySelector(".slide-arrow-forward");
96 |
97 | //for automatic scrolling
98 | let isPaused = false;
99 |
100 | nextButton.addEventListener("click", () => {
101 | isPaused = true;
102 | let slide_selected = block.querySelector(".carousel-circle-selected");
103 | let slide_selected_num = parseInt(slide_selected.id);
104 | let new_slide_num = slide_selected_num+1;
105 | let new_slide;
106 | if(new_slide_num !== count){ //at last slide - can't go forward more
107 | //slide over to new slide
108 | const slideDx = slidesContainer.clientLeft + (slide.clientWidth * slide_selected_num);
109 | slidesContainer.scrollLeft = slideDx;
110 | //change color of circle
111 | new_slide = block.querySelector("[id=" + CSS.escape(new_slide_num)+ "]");
112 | slide_selected.classList.remove('carousel-circle-selected')
113 | new_slide.classList.add('carousel-circle-selected');
114 | };
115 | });
116 |
117 | prevButton.addEventListener("click", () => {
118 | isPaused = true;
119 | let slide_selected = block.querySelector(".carousel-circle-selected"); //should only be one in the block
120 | let slide_selected_num = parseInt(slide_selected.id);
121 | let new_slide_num = slide_selected_num-1;
122 | let new_slide;
123 | if(new_slide_num !== 0){ //at first slide - can't go back more
124 | //slide over to new slide
125 | const slideDx = (new_slide_num-1) * slide.clientWidth;
126 | slidesContainer.scrollLeft = slideDx;
127 | //change color of circle
128 | new_slide = block.querySelector("[id=" + CSS.escape(new_slide_num)+ "]");
129 | slide_selected.classList.remove('carousel-circle-selected');
130 | new_slide.classList.add('carousel-circle-selected');
131 | };
132 | });
133 |
134 | //change color of circle button when clicked
135 | const buttons = block.querySelectorAll('.carousel-circle');
136 | buttons[0].classList.add('carousel-circle-selected'); //when reloading first slide should be selected
137 |
138 | buttons.forEach((button, i) => {
139 | button.addEventListener("click", () => {
140 | isPaused = true;
141 | let new_slide_num = button.id;
142 | const slideDx = slidesContainer.clientLeft + (slide.clientWidth * (new_slide_num-1));
143 | slidesContainer.scrollLeft = slideDx;
144 | //change circle color
145 | buttons.forEach((button) =>
146 | button.classList.remove('carousel-circle-selected')
147 | );
148 | button.classList.add('carousel-circle-selected');
149 | });
150 | });
151 |
152 | //automatic scrolling
153 | function advanceSlide() {
154 | let slide_selected = block.querySelector('.carousel-circle-selected');
155 | let slide_selected_num = parseInt(slide_selected.id);
156 | let new_slide_num = slide_selected_num+1;
157 | let new_slide;
158 | if(new_slide_num === count){ //at last slide - can't go forward more
159 | new_slide = block.querySelector("[id=" + CSS.escape(1)+ "]");
160 | //change color of circle
161 | slide_selected.classList.remove('carousel-circle-selected')
162 | new_slide.classList.add('carousel-circle-selected');
163 | //slide over to new slide - needs to start over
164 | const difference = count - 1 - 1;
165 | const slideWidth = slide.clientWidth;
166 | slidesContainer.scrollLeft -= (difference*slideWidth);
167 | }else{
168 | //slide over to new slide
169 | const slideDx = slidesContainer.clientLeft + (slide.clientWidth * slide_selected_num);
170 | slidesContainer.scrollLeft = slideDx;
171 | //change color of circle
172 | new_slide = block.querySelector("[id=" + CSS.escape(new_slide_num)+ "]");
173 | new_slide.classList.add('carousel-circle-selected');
174 | slide_selected.classList.remove('carousel-circle-selected')
175 | };
176 | };
177 |
178 | if(block.parentElement.parentElement.classList.contains('background-color-white')){
179 | block.parentElement.parentElement.style.backgroundColor = 'white';
180 | };
181 |
182 | function slideTimer() {
183 | if(!isPaused){
184 | advanceSlide();
185 | setTimeout(slideTimer, 9000);
186 | }else{
187 | clearTimeout(timer);
188 | //after set amount of time automatic scrolling can commence
189 | setTimeout(() => {isPaused = false;}, 18000);
190 | setTimeout(slideTimer, 9000);
191 | };
192 | };
193 |
194 | const timer = setTimeout(slideTimer, 9000);
195 | timer;
196 | applyBkgColorOverride(block);
197 | applyWidthOverride(block);
198 | applyAnalyticHeaderOverride(block);
199 | }
--------------------------------------------------------------------------------
/hlx_statics/icons/substance3d.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------