diff --git a/build-system/compile/bundles.config.extensions.json b/build-system/compile/bundles.config.extensions.json index e9798dd627c2..94c0cea71517 100644 --- a/build-system/compile/bundles.config.extensions.json +++ b/build-system/compile/bundles.config.extensions.json @@ -370,42 +370,16 @@ "version": "0.1", "latestVersion": "0.1" }, - { - "name": "amp-facebook-comments", - "version": "1.0", - "latestVersion": "0.1", - "options": { - "wrapper": "bento" - } - }, { "name": "amp-facebook-like", "version": "0.1", "latestVersion": "0.1" }, - { - "name": "amp-facebook-like", - "version": "1.0", - "latestVersion": "0.1", - "options": { - "hasCss": true, - "wrapper": "bento" - } - }, { "name": "amp-facebook-page", "version": "0.1", "latestVersion": "0.1" }, - { - "name": "amp-facebook-page", - "version": "1.0", - "latestVersion": "0.1", - "options": { - "hasCss": true, - "wrapper": "bento" - } - }, { "name": "amp-fit-text", "version": "0.1", diff --git a/build-system/test-configs/dep-check-config.js b/build-system/test-configs/dep-check-config.js index 1a21ad02fad8..df6b7992f1a3 100644 --- a/build-system/test-configs/dep-check-config.js +++ b/build-system/test-configs/dep-check-config.js @@ -256,12 +256,6 @@ exports.rules = [ 'extensions/amp-facebook/1.0/amp-facebook.js->extensions/amp-facebook/0.1/facebook-loader.js', 'extensions/amp-facebook-page/0.1/amp-facebook-page.js->extensions/amp-facebook/0.1/facebook-loader.js', 'extensions/amp-facebook-comments/0.1/amp-facebook-comments.js->extensions/amp-facebook/0.1/facebook-loader.js', - 'extensions/amp-facebook-comments/1.0/amp-facebook-comments.js->extensions/amp-facebook/0.1/facebook-loader.js', - 'extensions/amp-facebook-comments/1.0/base-element.js->extensions/amp-facebook/1.0/facebook-base-element.js', - 'extensions/amp-facebook-like/1.0/amp-facebook-like.js->extensions/amp-facebook/0.1/facebook-loader.js', - 'extensions/amp-facebook-like/1.0/base-element.js->extensions/amp-facebook/1.0/facebook-base-element.js', - 'extensions/amp-facebook-page/1.0/amp-facebook-page.js->extensions/amp-facebook/0.1/facebook-loader.js', - 'extensions/amp-facebook-page/1.0/base-element.js->extensions/amp-facebook/1.0/facebook-base-element.js', // VideoBaseElement, VideoIframe and VideoWrapper are meant to be shared. 'extensions/**->extensions/amp-video/1.0/video-base-element.js', diff --git a/extensions/amp-facebook-comments/1.0/amp-facebook-comments.css b/extensions/amp-facebook-comments/1.0/amp-facebook-comments.css deleted file mode 100644 index 162acdee6fe0..000000000000 --- a/extensions/amp-facebook-comments/1.0/amp-facebook-comments.css +++ /dev/null @@ -1,38 +0,0 @@ -/** - * Copyright 2021 The AMP HTML Authors. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS-IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* - * Pre-upgrade: - * - display:block element - * - size-defined element - */ - amp-facebook-comments { - display: block; - overflow: hidden; - position: relative; -} - -/* Pre-upgrade: size-defining element - hide text. */ -amp-facebook-comments:not(.i-amphtml-built) { - color: transparent !important; -} - -/* Pre-upgrade: size-defining element - hide children. */ -amp-facebook-comments:not(.i-amphtml-built) - > :not([placeholder]):not(.i-amphtml-svc) { - display: none; - content-visibility: hidden; -} diff --git a/extensions/amp-facebook-comments/1.0/amp-facebook-comments.js b/extensions/amp-facebook-comments/1.0/amp-facebook-comments.js deleted file mode 100644 index 139e077d36df..000000000000 --- a/extensions/amp-facebook-comments/1.0/amp-facebook-comments.js +++ /dev/null @@ -1,74 +0,0 @@ -/** - * Copyright 2021 The AMP HTML Authors. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS-IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import {BaseElement} from './base-element'; -import {createLoaderLogo} from '../../amp-facebook/0.1/facebook-loader'; -import {dashToUnderline} from '#core/types/string'; -import {dict} from '#core/types/object'; -import {getBootstrapBaseUrl, getBootstrapUrl} from '../../../src/3p-frame'; -import {isExperimentOn} from '#experiments'; -import {userAssert} from '../../../src/log'; - -/** @const {string} */ -const TAG = 'amp-facebook-comments'; -const TYPE = 'facebook'; - -class AmpFacebookComments extends BaseElement { - /** @override @nocollapse */ - static createLoaderLogoCallback(element) { - return createLoaderLogo(element); - } - - /** @override @nocollapse */ - static getPreconnects(element) { - const ampdoc = element.getAmpDoc(); - const {win} = ampdoc; - const locale = element.hasAttribute('data-locale') - ? element.getAttribute('data-locale') - : dashToUnderline(window.navigator.language); - return [ - // Base URL for 3p bootstrap iframes - getBootstrapBaseUrl(win, ampdoc), - // Script URL for iframe - getBootstrapUrl(TYPE), - 'https://facebook.com', - // This domain serves the actual tweets as JSONP. - 'https://connect.facebook.net/' + locale + '/sdk.js', - ]; - } - - /** @override */ - init() { - return dict({ - 'onReady': () => this.togglePlaceholder(false), - 'requestResize': (height) => this.forceChangeHeight(height), - }); - } - - /** @override */ - isLayoutSupported(layout) { - userAssert( - isExperimentOn(this.win, 'bento') || - isExperimentOn(this.win, 'bento-facebook-comments'), - 'expected global "bento" or specific "bento-facebook-comments" experiment to be enabled' - ); - return super.isLayoutSupported(layout); - } -} - -AMP.extension(TAG, '1.0', (AMP) => { - AMP.registerElement(TAG, AmpFacebookComments); -}); diff --git a/extensions/amp-facebook-comments/1.0/base-element.js b/extensions/amp-facebook-comments/1.0/base-element.js deleted file mode 100644 index b97be17b6d55..000000000000 --- a/extensions/amp-facebook-comments/1.0/base-element.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * Copyright 2021 The AMP HTML Authors. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS-IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import {FacebookBaseElement} from '../../amp-facebook/1.0/facebook-base-element'; - -export class BaseElement extends FacebookBaseElement {} - -/** @override */ -BaseElement['props'] = { - ...FacebookBaseElement['props'], - 'numPosts': {attr: 'data-numposts'}, - 'colorscheme': {attr: 'data-colorscheme'}, - 'orderBy': {attr: 'data-order-by'}, -}; - -/** @override */ -BaseElement['staticProps'] = { - 'embedAs': 'comments', -}; diff --git a/extensions/amp-facebook-comments/1.0/storybook/Basic.amp.js b/extensions/amp-facebook-comments/1.0/storybook/Basic.amp.js deleted file mode 100644 index e271cdd52a42..000000000000 --- a/extensions/amp-facebook-comments/1.0/storybook/Basic.amp.js +++ /dev/null @@ -1,64 +0,0 @@ -/** - * Copyright 2021 The AMP HTML Authors. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS-IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import * as Preact from '#preact'; -import {boolean, text, withKnobs} from '@storybook/addon-knobs'; -import {withA11y} from '@storybook/addon-a11y'; -import {withAmp} from '@ampproject/storybook-addon'; - -export default { - title: 'amp-facebook-comments-1_0', - decorators: [withKnobs, withA11y, withAmp], - - parameters: { - extensions: [ - { - name: 'amp-facebook-comments', - version: '1.0', - }, - ], - experiments: ['bento'], - }, -}; - -export const _default = () => { - const href = text( - 'data-href', - 'http://www.directlyrics.com/adele-25-complete-album-lyrics-news.html' - ); - const numPosts = boolean('show 5 comments max') ? 5 : undefined; - const orderBy = boolean('order by time') ? 'time' : undefined; - const locale = boolean('french locale') ? 'fr_FR' : undefined; - return ( - -
-

Placeholder

-
- - ); -}; - -_default.story = { - name: 'Default', -}; diff --git a/extensions/amp-facebook-like/1.0/amp-facebook-like.css b/extensions/amp-facebook-like/1.0/amp-facebook-like.css deleted file mode 100644 index 273a9d292ac8..000000000000 --- a/extensions/amp-facebook-like/1.0/amp-facebook-like.css +++ /dev/null @@ -1,38 +0,0 @@ -/** - * Copyright 2021 The AMP HTML Authors. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS-IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* - * Pre-upgrade: - * - display:block element - * - size-defined element - */ -amp-facebook-like { - display: block; - overflow: hidden; - position: relative; -} - -/* Pre-upgrade: size-defining element - hide text. */ -amp-facebook-like:not(.i-amphtml-built) { - color: transparent !important; -} - -/* Pre-upgrade: size-defining element - hide children. */ -amp-facebook-like:not(.i-amphtml-built) - > :not([placeholder]):not(.i-amphtml-svc) { - display: none; - content-visibility: hidden; -} diff --git a/extensions/amp-facebook-like/1.0/amp-facebook-like.js b/extensions/amp-facebook-like/1.0/amp-facebook-like.js deleted file mode 100644 index 3ab84f30b9f9..000000000000 --- a/extensions/amp-facebook-like/1.0/amp-facebook-like.js +++ /dev/null @@ -1,79 +0,0 @@ -/** - * Copyright 2021 The AMP HTML Authors. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS-IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import {BaseElement} from './base-element'; -import {createLoaderLogo} from '../../amp-facebook/0.1/facebook-loader'; -import {dashToUnderline} from '#core/types/string'; -import {dict} from '#core/types/object'; -import {getBootstrapBaseUrl, getBootstrapUrl} from '../../../src/3p-frame'; -import {isExperimentOn} from '#experiments'; -import {userAssert} from '../../../src/log'; - -/** @const {string} */ -const TAG = 'amp-facebook-like'; - -/** @const {string} */ -const TYPE = 'facebook'; - -class AmpFacebookLike extends BaseElement { - /** @override @nocollapse */ - static createLoaderLogoCallback(element) { - return createLoaderLogo(element); - } - - /** @override @nocollapse */ - static getPreconnects(element) { - const ampdoc = element.getAmpDoc(); - const {win} = ampdoc; - const locale = element.hasAttribute('data-locale') - ? element.getAttribute('data-locale') - : dashToUnderline(window.navigator.language); - return [ - // Base URL for 3p bootstrap iframes - getBootstrapBaseUrl(win, ampdoc), - // Script URL for iframe - getBootstrapUrl(TYPE), - 'https://facebook.com', - // This domain serves the actual tweets as JSONP. - 'https://connect.facebook.net/' + locale + '/sdk.js', - ]; - } - - /** @override */ - init() { - return dict({ - 'onReady': () => this.togglePlaceholder(false), - 'requestResize': (height) => - this.attemptChangeHeight(height).catch(() => { - /* ignore failures */ - }), - }); - } - - /** @override */ - isLayoutSupported(layout) { - userAssert( - isExperimentOn(this.win, 'bento') || - isExperimentOn(this.win, 'bento-facebook-like'), - 'expected global "bento" or specific "bento-facebook-like" experiment to be enabled' - ); - return super.isLayoutSupported(layout); - } -} - -AMP.extension(TAG, '1.0', (AMP) => { - AMP.registerElement(TAG, AmpFacebookLike); -}); diff --git a/extensions/amp-facebook-like/1.0/base-element.js b/extensions/amp-facebook-like/1.0/base-element.js deleted file mode 100644 index 3b9a7eef2164..000000000000 --- a/extensions/amp-facebook-like/1.0/base-element.js +++ /dev/null @@ -1,36 +0,0 @@ -/** - * Copyright 2021 The AMP HTML Authors. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS-IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import {FacebookBaseElement} from '../../amp-facebook/1.0/facebook-base-element'; - -export class BaseElement extends FacebookBaseElement {} - -/** @override */ -BaseElement['props'] = { - ...FacebookBaseElement['props'], - 'action': {attr: 'data-action'}, - 'colorscheme': {attr: 'data-colorscheme'}, - 'kdSite': {attr: 'data-kd_site'}, - 'layout': {attr: 'data-layout'}, - 'refLabel': {attr: 'data-ref'}, - 'share': {attr: 'data-share'}, - 'size': {attr: 'data-size'}, -}; - -/** @override */ -BaseElement['staticProps'] = { - 'embedAs': 'like', -}; diff --git a/extensions/amp-facebook-like/1.0/storybook/Basic.amp.js b/extensions/amp-facebook-like/1.0/storybook/Basic.amp.js deleted file mode 100644 index bc95a35a46da..000000000000 --- a/extensions/amp-facebook-like/1.0/storybook/Basic.amp.js +++ /dev/null @@ -1,69 +0,0 @@ -/** - * Copyright 2021 The AMP HTML Authors. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS-IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import * as Preact from '#preact'; -import {boolean, select, text, withKnobs} from '@storybook/addon-knobs'; -import {withAmp} from '@ampproject/storybook-addon'; - -export default { - title: 'amp-facebook-like-1_0', - decorators: [withKnobs, withAmp], - - parameters: { - extensions: [{name: 'amp-facebook-like', version: '1.0'}], - experiments: ['bento'], - }, -}; - -export const _default = () => { - const href = text('href', 'https://www.facebook.com/nasa/'); - const locale = boolean('french locale') ? 'fr_FR' : undefined; - - const action = select('action', ['like', 'recommend'], undefined); - const colorscheme = select( - 'colorscheme (broken)', - ['light', 'dark'], - undefined - ); - const kdSite = boolean('kd_site') || undefined; - const layout = select( - 'layout', - ['standard', 'button_count', 'button', 'box_count'], - undefined - ); - const refLabel = text('ref', undefined); - const share = boolean('share') ? 'true' : undefined; - const size = select('size (small by default)', ['large', 'small'], undefined); - return ( - - ); -}; - -_default.story = { - name: 'Default', -}; diff --git a/extensions/amp-facebook-page/1.0/amp-facebook-page.css b/extensions/amp-facebook-page/1.0/amp-facebook-page.css deleted file mode 100644 index bca710d403f8..000000000000 --- a/extensions/amp-facebook-page/1.0/amp-facebook-page.css +++ /dev/null @@ -1,38 +0,0 @@ -/** - * Copyright 2021 The AMP HTML Authors. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS-IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* - * Pre-upgrade: - * - display:block element - * - size-defined element - */ -amp-facebook-page { - display: block; - overflow: hidden; - position: relative; -} - -/* Pre-upgrade: size-defining element - hide text. */ -amp-facebook-page:not(.i-amphtml-built) { - color: transparent !important; -} - -/* Pre-upgrade: size-defining element - hide children. */ -amp-facebook-page:not(.i-amphtml-built) - > :not([placeholder]):not(.i-amphtml-svc) { - display: none; - content-visibility: hidden; -} diff --git a/extensions/amp-facebook-page/1.0/amp-facebook-page.js b/extensions/amp-facebook-page/1.0/amp-facebook-page.js deleted file mode 100644 index 56443fc811d1..000000000000 --- a/extensions/amp-facebook-page/1.0/amp-facebook-page.js +++ /dev/null @@ -1,79 +0,0 @@ -/** - * Copyright 2021 The AMP HTML Authors. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS-IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import {BaseElement} from './base-element'; -import {createLoaderLogo} from '../../amp-facebook/0.1/facebook-loader'; -import {dashToUnderline} from '#core/types/string'; -import {dict} from '#core/types/object'; -import {getBootstrapBaseUrl, getBootstrapUrl} from '../../../src/3p-frame'; -import {isExperimentOn} from '#experiments'; -import {userAssert} from '../../../src/log'; - -/** @const {string} */ -const TAG = 'amp-facebook-page'; - -/** @const {string} */ -const TYPE = 'facebook'; - -class AmpFacebookPage extends BaseElement { - /** @override @nocollapse */ - static createLoaderLogoCallback(element) { - return createLoaderLogo(element); - } - - /** @override @nocollapse */ - static getPreconnects(element) { - const ampdoc = element.getAmpDoc(); - const {win} = ampdoc; - const locale = element.hasAttribute('data-locale') - ? element.getAttribute('data-locale') - : dashToUnderline(window.navigator.language); - return [ - // Base URL for 3p bootstrap iframes - getBootstrapBaseUrl(win, ampdoc), - // Script URL for iframe - getBootstrapUrl(TYPE), - 'https://facebook.com', - // This domain serves the actual tweets as JSONP. - 'https://connect.facebook.net/' + locale + '/sdk.js', - ]; - } - - /** @override */ - init() { - return dict({ - 'onReady': () => this.togglePlaceholder(false), - 'requestResize': (height) => - this.attemptChangeHeight(height).catch(() => { - /* ignore failures */ - }), - }); - } - - /** @override */ - isLayoutSupported(layout) { - userAssert( - isExperimentOn(this.win, 'bento') || - isExperimentOn(this.win, 'bento-facebook-page'), - 'expected global "bento" or specific "bento-facebook-page" experiment to be enabled' - ); - return super.isLayoutSupported(layout); - } -} - -AMP.extension(TAG, '1.0', (AMP) => { - AMP.registerElement(TAG, AmpFacebookPage); -}); diff --git a/extensions/amp-facebook-page/1.0/base-element.js b/extensions/amp-facebook-page/1.0/base-element.js deleted file mode 100644 index 319b2bc45f1e..000000000000 --- a/extensions/amp-facebook-page/1.0/base-element.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * Copyright 2021 The AMP HTML Authors. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS-IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import {FacebookBaseElement} from '../../amp-facebook/1.0/facebook-base-element'; - -export class BaseElement extends FacebookBaseElement {} - -/** @override */ -BaseElement['props'] = { - ...FacebookBaseElement['props'], - 'hideCover': {attr: 'data-hide-cover'}, - 'hideCta': {attr: 'data-hide-cta'}, - 'showFacepile': {attr: 'data-show-facepile'}, - 'smallHeader': {attr: 'data-small-header'}, - 'tabs': {attr: 'data-tabs'}, -}; - -/** @override */ -BaseElement['staticProps'] = { - 'embedAs': 'page', -}; diff --git a/extensions/amp-facebook-page/1.0/storybook/Basic.amp.js b/extensions/amp-facebook-page/1.0/storybook/Basic.amp.js deleted file mode 100644 index 7e7d9040b6aa..000000000000 --- a/extensions/amp-facebook-page/1.0/storybook/Basic.amp.js +++ /dev/null @@ -1,63 +0,0 @@ -/** - * Copyright 2021 The AMP HTML Authors. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS-IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import * as Preact from '#preact'; -import {boolean, optionsKnob, text, withKnobs} from '@storybook/addon-knobs'; -import {withAmp} from '@ampproject/storybook-addon'; - -export default { - title: 'amp-facebook-page-1_0', - decorators: [withKnobs, withAmp], - - parameters: { - extensions: [{name: 'amp-facebook-page', version: '1.0'}], - experiments: ['bento'], - }, -}; - -export const _default = () => { - const href = text('href', 'https://www.facebook.com/nasa/'); - const locale = boolean('french locale') ? 'fr_FR' : undefined; - - const hideCover = boolean('hide cover') ? 'true' : undefined; - const hideCta = boolean('hide cta') ? 'true' : undefined; - const smallHeader = boolean('small header') ? 'true' : undefined; - const showFacepile = boolean('show facepile') ? undefined : 'false'; - const tabs = optionsKnob( - 'tabs', - {timeline: 'timeline', events: 'events', messages: 'messages'}, - undefined, - {display: 'inline-check'} - ); - - return ( - - ); -}; - -_default.story = { - name: 'Default', -}; diff --git a/extensions/amp-facebook/1.0/amp-facebook.css b/extensions/amp-facebook/1.0/amp-facebook.css index 126c6f128bbb..db492fb52d2f 100644 --- a/extensions/amp-facebook/1.0/amp-facebook.css +++ b/extensions/amp-facebook/1.0/amp-facebook.css @@ -19,19 +19,31 @@ * - display:block element * - size-defined element */ -amp-facebook { +amp-facebook, +amp-facebook-comments, +amp-facebook-like, +amp-facebook-page { display: block; overflow: hidden; position: relative; } /* Pre-upgrade: size-defining element - hide text. */ -amp-facebook:not(.i-amphtml-built) { +amp-facebook:not(.i-amphtml-built), +amp-facebook-comments:not(.i-amphtml-built), +amp-facebook-like:not(.i-amphtml-built), +amp-facebook-page:not(.i-amphtml-built) { color: transparent !important; } /* Pre-upgrade: size-defining element - hide children. */ -amp-facebook:not(.i-amphtml-built) > :not([placeholder]):not(.i-amphtml-svc) { +amp-facebook:not(.i-amphtml-built) > :not([placeholder]):not(.i-amphtml-svc), +amp-facebook-comments:not(.i-amphtml-built) + > :not([placeholder]):not(.i-amphtml-svc), +amp-facebook-like:not(.i-amphtml-built) + > :not([placeholder]):not(.i-amphtml-svc), +amp-facebook-pagee:not(.i-amphtml-built) + > :not([placeholder]):not(.i-amphtml-svc) { display: none; content-visibility: hidden; } diff --git a/extensions/amp-facebook/1.0/amp-facebook.js b/extensions/amp-facebook/1.0/amp-facebook.js index a8d25a293ed2..2ab4d14fc750 100644 --- a/extensions/amp-facebook/1.0/amp-facebook.js +++ b/extensions/amp-facebook/1.0/amp-facebook.js @@ -24,6 +24,9 @@ import {userAssert} from '../../../src/log'; /** @const {string} */ const TAG = 'amp-facebook'; +const COMMENTS_TAG = 'amp-facebook-comments'; +const LIKE_TAG = 'amp-facebook-like'; +const PAGE_TAG = 'amp-facebook-page'; const TYPE = 'facebook'; class AmpFacebook extends BaseElement { @@ -77,9 +80,12 @@ class AmpFacebook extends BaseElement { function parseEmbed(element) { const embedAs = element.getAttribute('data-embed-as'); userAssert( - !embedAs || ['post', 'video', 'comment'].indexOf(embedAs) !== -1, + !embedAs || + ['post', 'video', 'comment', 'comments', 'like', 'page'].indexOf( + embedAs + ) !== -1, 'Attribute data-embed-as for value is wrong, should be' + - ' "post", "video" or "comment" but was: %s', + ' "post", "video", "comment", "comments", "like", or "page", but was: %s', embedAs ); return embedAs; @@ -94,6 +100,24 @@ AmpFacebook['props'] = { }, }; +class AmpFacebookComments extends AmpFacebook {} + +/** @override */ +AmpFacebookComments['staticProps'] = {'embedAs': 'comments'}; + +class AmpFacebookLike extends AmpFacebook {} + +/** @override */ +AmpFacebookLike['staticProps'] = {'embedAs': 'like'}; + +class AmpFacebookPage extends AmpFacebook {} + +/** @override */ +AmpFacebookPage['staticProps'] = {'embedAs': 'page'}; + AMP.extension(TAG, '1.0', (AMP) => { AMP.registerElement(TAG, AmpFacebook); + AMP.registerElement(COMMENTS_TAG, AmpFacebookComments); + AMP.registerElement(LIKE_TAG, AmpFacebookLike); + AMP.registerElement(PAGE_TAG, AmpFacebookPage); }); diff --git a/extensions/amp-facebook/1.0/base-element.js b/extensions/amp-facebook/1.0/base-element.js index 7d8100edf0b0..5613d7b49804 100644 --- a/extensions/amp-facebook/1.0/base-element.js +++ b/extensions/amp-facebook/1.0/base-element.js @@ -14,18 +14,55 @@ * limitations under the License. */ -import {FacebookBaseElement} from './facebook-base-element'; +import {Facebook} from './component'; +import {PreactBaseElement} from '#preact/base-element'; +import {dashToUnderline} from '#core/types/string'; -export class BaseElement extends FacebookBaseElement {} +export class BaseElement extends PreactBaseElement {} + +/** @override */ +BaseElement['Component'] = Facebook; /** @override */ BaseElement['props'] = { - ...FacebookBaseElement['props'], + // common attributes + 'title': {attr: 'title'}, // Needed for Preact component + 'href': {attr: 'data-href'}, + 'locale': { + attr: 'data-locale', + default: dashToUnderline(window.navigator.language), + }, + // amp-facebook 'allowFullScreen': {attr: 'data-allowfullscreen'}, + 'embedAs': {attr: 'data-embed-as'}, 'includeCommentParent': { attr: 'data-include-comment-parent', type: 'boolean', default: false, }, 'showText': {attr: 'data-show-text'}, + // -comments + 'numPosts': {attr: 'data-numposts'}, + 'orderBy': {attr: 'data-order-by'}, + // -comments & -like + 'colorscheme': {attr: 'data-colorscheme'}, + // -like + 'action': {attr: 'data-action'}, + 'kdSite': {attr: 'data-kd_site'}, + 'layout': {attr: 'data-layout'}, + 'refLabel': {attr: 'data-ref'}, + 'share': {attr: 'data-share'}, + 'size': {attr: 'data-size'}, + // -page + 'hideCover': {attr: 'data-hide-cover'}, + 'hideCta': {attr: 'data-hide-cta'}, + 'showFacepile': {attr: 'data-show-facepile'}, + 'smallHeader': {attr: 'data-small-header'}, + 'tabs': {attr: 'data-tabs'}, }; + +/** @override */ +BaseElement['layoutSizeDefined'] = true; + +/** @override */ +BaseElement['usesShadowDom'] = true; diff --git a/extensions/amp-facebook/1.0/facebook-base-element.js b/extensions/amp-facebook/1.0/facebook-base-element.js deleted file mode 100644 index 7137aa8a3b51..000000000000 --- a/extensions/amp-facebook/1.0/facebook-base-element.js +++ /dev/null @@ -1,40 +0,0 @@ -/** - * Copyright 2021 The AMP HTML Authors. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS-IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import {Facebook} from './component'; -import {PreactBaseElement} from '#preact/base-element'; -import {dashToUnderline} from '#core/types/string'; - -export class FacebookBaseElement extends PreactBaseElement {} - -/** @override */ -FacebookBaseElement['Component'] = Facebook; - -/** @override */ -FacebookBaseElement['props'] = { - 'title': {attr: 'title'}, // Needed for Preact component - 'href': {attr: 'data-href'}, - 'locale': { - attr: 'data-locale', - default: dashToUnderline(window.navigator.language), - }, -}; - -/** @override */ -FacebookBaseElement['layoutSizeDefined'] = true; - -/** @override */ -FacebookBaseElement['usesShadowDom'] = true; diff --git a/extensions/amp-facebook/1.0/storybook/Basic.amp.js b/extensions/amp-facebook/1.0/storybook/Basic.amp.js index 1adbcf2fca0c..3a187e5a2b9f 100644 --- a/extensions/amp-facebook/1.0/storybook/Basic.amp.js +++ b/extensions/amp-facebook/1.0/storybook/Basic.amp.js @@ -15,7 +15,13 @@ */ import * as Preact from '#preact'; -import {boolean, select, withKnobs} from '@storybook/addon-knobs'; +import { + boolean, + optionsKnob, + select, + text, + withKnobs, +} from '@storybook/addon-knobs'; import {withAmp} from '@ampproject/storybook-addon'; export default { @@ -62,3 +68,175 @@ export const Default = () => { ); }; + +export const FacebookComments = () => { + const embedAs = optionsKnob( + 'use as', + { + 'amp-facebook-comments': 'amp-facebook-comments', + 'amp-facebook data-embed-as="comments': + 'amp-facebook data-embed-as="comments', + }, + 'amp-facebook-comments', + {display: 'radio'} + ); + const href = text( + 'data-href', + 'http://www.directlyrics.com/adele-25-complete-album-lyrics-news.html' + ); + const numPosts = boolean('show 5 comments max') ? 5 : undefined; + const orderBy = boolean('order by time') ? 'time' : undefined; + const locale = boolean('french locale') ? 'fr_FR' : undefined; + return embedAs === 'amp-facebook-comments' ? ( + +
+

Placeholder

+
+ + ) : ( + +
+

Placeholder

+
+ + ); +}; + +export const FacebookLike = () => { + const embedAs = optionsKnob( + 'use as', + { + 'amp-facebook-like': 'amp-facebook-like', + 'amp-facebook data-embed-as="like': 'amp-facebook data-embed-as="like', + }, + 'amp-facebook-like', + {display: 'radio'} + ); + const href = text('href', 'https://www.facebook.com/nasa/'); + const locale = boolean('french locale') ? 'fr_FR' : undefined; + + const action = select('action', ['like', 'recommend'], undefined); + const colorscheme = select( + 'colorscheme (broken)', + ['light', 'dark'], + undefined + ); + const kdSite = boolean('kd_site') || undefined; + const layout = select( + 'layout', + ['standard', 'button_count', 'button', 'box_count'], + undefined + ); + const refLabel = text('ref', undefined); + const share = boolean('share') ? 'true' : undefined; + const size = select('size (small by default)', ['large', 'small'], undefined); + return embedAs === 'amp-facebook-like' ? ( + + ) : ( + + ); +}; + +export const FacebookPage = () => { + const embedAs = optionsKnob( + 'use as', + { + 'amp-facebook-page': 'amp-facebook-page', + 'amp-facebook data-embed-as="page"': 'amp-facebook data-embed-as="page"', + }, + 'amp-facebook-page', + {display: 'radio'} + ); + const href = text('href', 'https://www.facebook.com/nasa/'); + const locale = boolean('french locale') ? 'fr_FR' : undefined; + + const hideCover = boolean('hide cover') ? 'true' : undefined; + const hideCta = boolean('hide cta') ? 'true' : undefined; + const smallHeader = boolean('small header') ? 'true' : undefined; + const showFacepile = boolean('show facepile') ? undefined : 'false'; + const tabs = optionsKnob( + 'tabs', + {timeline: 'timeline', events: 'events', messages: 'messages'}, + undefined, + {display: 'inline-check'} + ); + + return embedAs === 'amp-facebook-page' ? ( + + ) : ( + + ); +}; + +export const InvalidEmbedType = () => { + return ( + + ); +}; diff --git a/extensions/amp-facebook-comments/1.0/test/test-amp-facebook-comments.js b/extensions/amp-facebook/1.0/test/test-amp-facebook-comments.js similarity index 94% rename from extensions/amp-facebook-comments/1.0/test/test-amp-facebook-comments.js rename to extensions/amp-facebook/1.0/test/test-amp-facebook-comments.js index 182a97a4c16d..9901394423c8 100644 --- a/extensions/amp-facebook-comments/1.0/test/test-amp-facebook-comments.js +++ b/extensions/amp-facebook/1.0/test/test-amp-facebook-comments.js @@ -14,7 +14,7 @@ * limitations under the License. */ -import '../amp-facebook-comments'; +import '../amp-facebook'; import {createElementWithAttributes} from '#core/dom'; import {doNotLoadExternalResourcesInTest} from '#testing/iframe'; import {resetServiceForTesting} from '../../../../src/service-helpers'; @@ -27,7 +27,7 @@ describes.realWin( 'amp-facebook-comments', { amp: { - extensions: ['amp-facebook-comments:1.0'], + extensions: ['amp-facebook:1.0'], }, }, (env) => { @@ -46,7 +46,7 @@ describes.realWin( beforeEach(async function () { win = env.win; doc = win.document; - toggleExperiment(win, 'bento-facebook-comments', true, true); + toggleExperiment(win, 'bento-facebook', true, true); // Override global window here because Preact uses global `createElement`. doNotLoadExternalResourcesInTest(window, env.sandbox); }); @@ -144,7 +144,9 @@ describes.realWin( await waitForRender(); const impl = await element.getImpl(false); - const forceChangeHeightStub = env.sandbox.stub(impl, 'forceChangeHeight'); + const attemptChangeHeightStub = env.sandbox + .stub(impl, 'attemptChangeHeight') + .resolves(); const mockEvent = new CustomEvent('message'); const sentinel = JSON.parse( @@ -156,7 +158,7 @@ describes.realWin( mockEvent.source = element.shadowRoot.querySelector('iframe').contentWindow; win.dispatchEvent(mockEvent); - expect(forceChangeHeightStub).to.be.calledOnce.calledWith(1000); + expect(attemptChangeHeightStub).to.be.calledOnce.calledWith(1000); }); } ); diff --git a/extensions/amp-facebook-like/1.0/test/test-amp-facebook-like.js b/extensions/amp-facebook/1.0/test/test-amp-facebook-like.js similarity index 97% rename from extensions/amp-facebook-like/1.0/test/test-amp-facebook-like.js rename to extensions/amp-facebook/1.0/test/test-amp-facebook-like.js index 9abf150ea27d..788ab2771c7e 100644 --- a/extensions/amp-facebook-like/1.0/test/test-amp-facebook-like.js +++ b/extensions/amp-facebook/1.0/test/test-amp-facebook-like.js @@ -14,7 +14,7 @@ * limitations under the License. */ -import '../amp-facebook-like'; +import '../amp-facebook'; import {createElementWithAttributes} from '#core/dom'; import {doNotLoadExternalResourcesInTest} from '#testing/iframe'; import {resetServiceForTesting} from '../../../../src/service-helpers'; @@ -27,7 +27,7 @@ describes.realWin( 'amp-facebook-like', { amp: { - extensions: ['amp-facebook-like:1.0'], + extensions: ['amp-facebook:1.0'], }, }, (env) => { @@ -44,7 +44,7 @@ describes.realWin( beforeEach(async function () { win = env.win; doc = win.document; - toggleExperiment(win, 'bento-facebook-like', true, true); + toggleExperiment(win, 'bento-facebook', true, true); // Override global window here because Preact uses global `createElement`. doNotLoadExternalResourcesInTest(window, env.sandbox); }); diff --git a/extensions/amp-facebook-page/1.0/test/test-amp-facebook-page.js b/extensions/amp-facebook/1.0/test/test-amp-facebook-page.js similarity index 97% rename from extensions/amp-facebook-page/1.0/test/test-amp-facebook-page.js rename to extensions/amp-facebook/1.0/test/test-amp-facebook-page.js index d43980a15037..15861b02f68c 100644 --- a/extensions/amp-facebook-page/1.0/test/test-amp-facebook-page.js +++ b/extensions/amp-facebook/1.0/test/test-amp-facebook-page.js @@ -14,7 +14,7 @@ * limitations under the License. */ -import '../amp-facebook-page'; +import '../amp-facebook'; import {createElementWithAttributes} from '#core/dom'; import {doNotLoadExternalResourcesInTest} from 'testing/iframe'; import {resetServiceForTesting} from '../../../../src/service-helpers'; @@ -27,7 +27,7 @@ describes.realWin( 'amp-facebook-page', { amp: { - extensions: ['amp-facebook-page:1.0'], + extensions: ['amp-facebook:1.0'], }, }, (env) => { @@ -44,7 +44,7 @@ describes.realWin( beforeEach(async function () { win = env.win; doc = win.document; - toggleExperiment(win, 'bento-facebook-page', true, true); + toggleExperiment(win, 'bento-facebook', true, true); // Override global window here because Preact uses global `createElement`. doNotLoadExternalResourcesInTest(window, env.sandbox); });