Skip to content

Commit 41ed1c2

Browse files
realPrimohalanorozco
authored and
ed-bird
committed
✨ Bento port of amp-instagram (ampproject#30230)
* Preact version of amp-instagram (first pass) * added title logic from old extension * ran prettier * Made changes. * Deleted unnecessary CSS file * Made changes based on suggestions. Updated build-system * Addressed nits * Made changes to title * cleared some build errors * addressed more travis errors * Should pass travis now. * Added intermediate height variable. * Initialize heightStyle to prop. * initial test * Added some working Preact tests * Made non-test changes * Updated tests * Preliminary resize function test. * Preact tests complete. * Updated amp-instagram test (Trial) * Added test-amp-instagram tests * fixed height jsc compiler error * Can't pass in resize prop for amp component * Removed shortcode error handling * Used dict() to bypass JSC compiler error w/ useState * Remove unnecessary requestResize Co-authored-by: Alan Orozco <alanorozco@users.noreply.github.com> * Removed style prop and added onLoad to iframe * addressed all comments except for testing changes * Modularized Preact component to make it easier to test * Addressed comment. * Addressed new comments. * Draft PR: testing on travis * Added waitForPromise to fix any race conditions * Addressed comments * Some finishing touches to the tests. * Used createElementWithAttributes (optional nit) * Preact version of amp-instagram (first pass) * added title logic from old extension * ran prettier * Made changes. * Deleted unnecessary CSS file * Made changes based on suggestions. Updated build-system * Addressed nits * Made changes to title * cleared some build errors * addressed more travis errors * Should pass travis now. * Added intermediate height variable. * Initialize heightStyle to prop. * initial test * Added some working Preact tests * Made non-test changes * Updated tests * Preliminary resize function test. * Preact tests complete. * Updated amp-instagram test (Trial) * Added test-amp-instagram tests * fixed height jsc compiler error * Can't pass in resize prop for amp component * Removed shortcode error handling * Used dict() to bypass JSC compiler error w/ useState * Remove unnecessary requestResize Co-authored-by: Alan Orozco <alanorozco@users.noreply.github.com> * Removed style prop and added onLoad to iframe * addressed all comments except for testing changes * Modularized Preact component to make it easier to test * Addressed comment. * Addressed new comments. * Draft PR: testing on travis * Added waitForPromise to fix any race conditions * Addressed comments * Some finishing touches to the tests. * Used createElementWithAttributes (optional nit) * Removed unnecessary isLayoutSupported Co-authored-by: Alan Orozco <alanorozco@users.noreply.github.com> * Addressed comments * Addressed comments. Removed unnecessary attachments from tests. * re-pushing for travis build to re-run * re-pushing due to unrelated visual test error Co-authored-by: Alan Orozco <alanorozco@users.noreply.github.com>
1 parent 42a3441 commit 41ed1c2

File tree

8 files changed

+508
-0
lines changed

8 files changed

+508
-0
lines changed

‎build-system/compile/bundles.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -686,6 +686,12 @@ exports.extensionBundles = [
686686
options: {hasCss: true},
687687
type: TYPES.MISC,
688688
},
689+
{
690+
name: 'amp-instagram',
691+
version: '1.0',
692+
latestVersion: '0.1',
693+
type: TYPES.MISC,
694+
},
689695
{
690696
name: 'amp-install-serviceworker',
691697
version: '0.1',

‎extensions/amp-instagram/1.0/amp-instagram.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/**
2+
* Copyright 2020 The AMP HTML Authors. All Rights Reserved.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS-IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import {Instagram} from './instagram';
18+
import {PreactBaseElement} from '../../../src/preact/base-element';
19+
import {dict} from '../../../src/utils/object';
20+
21+
/** @const {string} */
22+
const TAG = 'amp-instagram';
23+
24+
class AmpInstagram extends PreactBaseElement {
25+
/** @override */
26+
init() {
27+
return dict({
28+
'requestResize': (height) => {
29+
this.forceChangeHeight(height);
30+
},
31+
});
32+
}
33+
}
34+
35+
/** @override */
36+
AmpInstagram['Component'] = Instagram;
37+
38+
/** @override */
39+
AmpInstagram['children'] = {};
40+
41+
/** @override */
42+
AmpInstagram['loadable'] = true;
43+
44+
/** @override */
45+
AmpInstagram['props'] = {
46+
'shortcode': {attr: 'data-shortcode'},
47+
'captioned': {attr: 'data-captioned'},
48+
'title': {attr: 'title'},
49+
};
50+
51+
/** @override */
52+
AmpInstagram['layoutSizeDefined'] = true;
53+
54+
AMP.extension(TAG, '1.0', (AMP) => {
55+
AMP.registerElement(TAG, AmpInstagram);
56+
});

‎extensions/amp-instagram/1.0/instagram.js‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/**
2+
* Copyright 2020 The AMP HTML Authors. All Rights Reserved.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS-IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import * as Preact from '../../../src/preact';
18+
import {ContainWrapper} from '../../../src/preact/component';
19+
import {dict} from '../../../src/utils/object';
20+
import {getData} from '../../../src/event-helper';
21+
import {parseJson} from '../../../src/json';
22+
import {useLayoutEffect, useRef, useState} from '../../../src/preact';
23+
24+
const NO_HEIGHT_STYLE = dict();
25+
26+
/**
27+
* @param {!InstagramPropsDef} props
28+
* @return {PreactDef.Renderable}
29+
*/
30+
export function Instagram({
31+
shortcode,
32+
captioned,
33+
title,
34+
requestResize,
35+
loading = 'lazy',
36+
...rest
37+
}) {
38+
const iframeRef = useRef(null);
39+
const [heightStyle, setHeightStyle] = useState(NO_HEIGHT_STYLE);
40+
const [opacity, setOpacity] = useState(0);
41+
42+
useLayoutEffect(() => {
43+
const messageHandler = (event) => {
44+
if (
45+
event.origin != 'https://www.instagram.com' ||
46+
event.source != iframeRef.current.contentWindow
47+
) {
48+
return;
49+
}
50+
51+
const data = parseJson(getData(event));
52+
53+
if (data['type'] == 'MEASURE' && data['details']) {
54+
const height = data['details']['height'];
55+
if (requestResize) {
56+
requestResize(height);
57+
} else {
58+
setHeightStyle(dict({'height': height}));
59+
}
60+
setOpacity(1);
61+
}
62+
};
63+
const {defaultView} = iframeRef.current.ownerDocument;
64+
65+
defaultView.addEventListener('message', messageHandler);
66+
67+
return () => {
68+
defaultView.removeEventListener('message', messageHandler);
69+
};
70+
}, [requestResize, heightStyle]);
71+
72+
return (
73+
<ContainWrapper {...rest} wrapperStyle={heightStyle} layout size paint>
74+
<iframe
75+
ref={iframeRef}
76+
src={
77+
'https://www.instagram.com/p/' +
78+
encodeURIComponent(shortcode) +
79+
'/embed/' +
80+
(captioned ? 'captioned/' : '') +
81+
'?cr=1&v=12'
82+
}
83+
scrolling="no"
84+
frameborder="0"
85+
allowtransparency
86+
title={title}
87+
loading={loading}
88+
style={{
89+
width: '100%',
90+
height: '100%',
91+
opacity,
92+
contentVisibility: 'auto',
93+
}}
94+
/>
95+
</ContainWrapper>
96+
);
97+
}

‎extensions/amp-instagram/1.0/instagram.type.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* Copyright 2020 The AMP HTML Authors. All Rights Reserved.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS-IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/** @externs */
18+
19+
/** @typedef {{
20+
* shortcode: string,
21+
* captioned: (boolean|undefined),
22+
* title: (string|undefined),
23+
* requestResize: (function(number):*|undefined),
24+
* loading: (string)
25+
* }}
26+
*/
27+
var InstagramPropsDef;

‎extensions/amp-instagram/1.0/storybook/Basic.amp.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/**
2+
* Copyright 2020 The AMP HTML Authors. All Rights Reserved.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS-IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import * as Preact from '../../../../src/preact';
18+
import {boolean, number, text, withKnobs} from '@storybook/addon-knobs';
19+
import {withA11y} from '@storybook/addon-a11y';
20+
import {withAmp} from '@ampproject/storybook-addon';
21+
22+
export default {
23+
title: 'amp-instagram',
24+
decorators: [withA11y, withKnobs, withAmp],
25+
26+
parameters: {
27+
extensions: [{name: 'amp-instagram', version: '1.0'}],
28+
},
29+
};
30+
31+
export const _default = () => {
32+
const width = number('width', 500);
33+
const height = number('height', 600);
34+
const shortcode = text('shortcode', 'B8QaZW4AQY_');
35+
const captioned = boolean('captioned');
36+
const layout = text('layout', 'fixed');
37+
38+
return (
39+
<amp-instagram
40+
data-shortcode={shortcode}
41+
data-captioned={captioned}
42+
width={width}
43+
height={height}
44+
layout={layout}
45+
></amp-instagram>
46+
);
47+
};

‎extensions/amp-instagram/1.0/storybook/Basic.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* Copyright 2020 The AMP HTML Authors. All Rights Reserved.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS-IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import * as Preact from '../../../../src/preact';
18+
import {Instagram} from '../instagram';
19+
import {boolean, number, text, withKnobs} from '@storybook/addon-knobs';
20+
import {withA11y} from '@storybook/addon-a11y';
21+
22+
export default {
23+
title: 'Instagram',
24+
component: Instagram,
25+
decorators: [withA11y, withKnobs],
26+
};
27+
28+
export const _default = () => {
29+
const width = number('width', 500);
30+
const height = number('height', 600);
31+
const shortcode = text('shortcode', 'B8QaZW4AQY_');
32+
const captioned = boolean('captioned');
33+
34+
return (
35+
<Instagram
36+
shortcode={shortcode}
37+
style={{width, height}}
38+
captioned={captioned}
39+
alt="AMP Instagram Storybook Preact Example"
40+
></Instagram>
41+
);
42+
};

0 commit comments

Comments
 (0)