✨ Bento amp-copy

build-system/compile/bundles.config.extensions.json

@@ -278,6 +278,16 @@
       "hasCss": true
     }
   },
+  {
+    "name": "amp-copy",
+    "version": "1.0",
+    "latestVersion": "1.0",
+    "options": {
+      "npm": true,
+      "hasCss": true,
+      "wrapper": "bento"
+    }
+  },
   {
     "name": "amp-crypto-polyfill",
     "version": "0.1",

extensions/amp-copy/1.0/amp-copy.css

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */

extensions/amp-copy/1.0/amp-copy.js

@@ -0,0 +1,52 @@
+/**
+ * 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 {ActionTrust} from '#core/constants/action-constants';
+import {BaseElement} from './base-element';
+import {CSS} from '../../../build/amp-copy-1.0.css';
+import {isExperimentOn} from '#experiments';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+const TAG = 'amp-copy';
+
+class AmpCopy extends BaseElement {
+  /** @override */
+  init() {
+    this.registerApiAction(
+      'copyToClipboard',
+      (api, invocation) => {
+        const {args} = invocation;
+        api.copyToClipboard(args['selector'], args['staticText']);
+      },
+      ActionTrust.LOW
+    );
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-copy'),
+      'expected global "bento" or specific "bento-copy" experiment to be enabled'
+    );
+    return super.isLayoutSupported(layout);
+  }
+}
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpCopy, CSS);
+});

extensions/amp-copy/1.0/base-element.js

@@ -0,0 +1,40 @@
+/**
+ * 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 {CSS as COMPONENT_CSS} from './component.jss';
+import {Copy} from './component';
+import {PreactBaseElement} from '#preact/base-element';
+
+export class BaseElement extends PreactBaseElement {}
+
+/** @override */
+BaseElement['Component'] = Copy;
+
+/** @override */
+BaseElement['props'] = {
+  'children': {passthroughNonEmpty: true},
+  'sourceId': {attr: 'source-id', type: 'string'},
+  'text': {attr: 'text', type: 'string'},
+};
+
+/** @override */
+BaseElement['layoutSizeDefined'] = true;
+
+/** @override */
+BaseElement['usesShadowDom'] = true;
+
+/** @override */
+BaseElement['shadowCss'] = COMPONENT_CSS;

extensions/amp-copy/1.0/component.js

@@ -0,0 +1,121 @@
+/**
+ * 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 {
+  copyTextToClipboard,
+  isCopyingToClipboardSupported,
+} from '#core/window/clipboard';
+import {
+  useCallback,
+  useImperativeHandle,
+  useLayoutEffect,
+  useState,
+} from '#preact';
+import {forwardRef} from '#preact/compat';
+import {useStyles} from './component.jss';
+import objstr from 'obj-str';
+
+/**
+ * @param {!CopyDef.Props} props
+ * @param {{current: ?CopyDef.CopyApi}} ref
+ * @return {PreactDef.Renderable}
+ */
+export function CopyWithRef({children, sourceId, text, ...rest}, ref) {
+  const [status, setStatus] = useState(null);
+  const [isCopySupported, setIsCopySupported] = useState(false);
+  const classes = useStyles();
+  useLayoutEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    if (isCopyingToClipboardSupported(ref.current.ownerDocument)) {
+      setIsCopySupported(true);
+    } else {
+      setIsCopySupported(false);
+    }
+  }, [ref, setIsCopySupported]);
+
+  const copy = useCallback(
+    (sourceId) => {
+      let textToCopy = '';
+
+      if (sourceId == undefined) {
+        // Copy static text value
+        textToCopy = text;
+      } else {
+        // Copy content of sourceId element
+        const content = ref.current.ownerDocument.getElementById(sourceId);
+        textToCopy = (content.value ?? content.textContent).trim();
+      }
+
+      setStatus(copyTextToClipboard(window, textToCopy));
+
+      setTimeout(() => {
+        setStatus(null);
+      }, 3000);
+    },
+    [ref, text]
+  );
+
+  const copyText = useCallback((textToCopy) => {
+    setStatus(copyTextToClipboard(window, textToCopy));
+
+    setTimeout(() => {
+      setStatus(null);
+    }, 3000);
+  }, []);
+
+  /** Copy Component - API Function */
+  useImperativeHandle(
+    ref,
+    () =>
+      /** @type {!CopyDef.CopyApi} */ ({
+        copyToClipboard: (selector = null, staticText = null) => {
+          if (selector !== null) {
+            copy(selector);
+          } else if (staticText !== null) {
+            copyText(staticText);
+          } else {
+            // TODO: Assert Error
+          }
+        },
+      }),
+    [copy, copyText]
+  );
+
+  return (
+    <button
+      ref={ref}
+      className={objstr({
+        [classes.success]: status,
+        [classes.failed]: status === false,
+        [classes.enabled]: isCopySupported,
+        [classes.disabled]: !isCopySupported,
+      })}
+      layout
+      size
+      paint
+      {...rest}
+      onClick={() => copy(sourceId)}
+    >
+      {children}
+    </button>
+  );
+}
+
+const Copy = forwardRef(CopyWithRef);
+Copy.displayName = 'Copy'; // Make findable for tests.
+export {Copy};

extensions/amp-copy/1.0/component.jss.js

@@ -0,0 +1,40 @@
+/**
+ * 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 {createUseStyles} from 'react-jss';
+
+const disabled = {
+};
+
+const enabled = {
+};
+
+const success = {
+};
+
+const failed = {
+};
+
+const JSS = {
+  enabled,
+  disabled,
+  success,
+  failed,
+};
+
+// useStyles gets replaced for AMP builds via `babel-plugin-transform-jss`.
+// eslint-disable-next-line local/no-export-side-effect
+export const useStyles = createUseStyles(JSS);

extensions/amp-copy/1.0/component.type.js

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+
+/** @externs */
+
+/** @const */
+var CopyDef = {};
+
+/**
+ * @typedef {{
+ *   sourceId: (string|undefined),
+ *   text: (string|undefined),
+ * }}
+ */
+CopyDef.Props;
+
+/** @interface */
+CopyDef.CopyApi = class {
+  /**
+   * Copies content or static text
+   * @param {string} selector
+   * @param {string} staticText
+   */
+  copyToClipboard(selector = null, staticText = null) {}
+};

extensions/amp-copy/1.0/storybook/Basic.amp.js

@@ -0,0 +1,53 @@
+/**
+ * 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 {withAmp} from '@ampproject/storybook-addon';
+import {withKnobs} from '@storybook/addon-knobs';
+
+export default {
+  title: 'amp-copy-1_0',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-copy', version: '1.0'}],
+    experiments: ['bento'],
+  },
+};
+
+export const CopyInputValue = () => {
+  return (
+    <>
+      <input type="text" id="myInputField1" value="Text to copy!" />
+      <amp-copy width="100" height="20" source-id="myInputField1">
+        Copy Text
+      </amp-copy>
+    </>
+  );
+};
+
+export const CopyDIVContentText = () => {
+  return (
+    <>
+      <div id="myDiv1">
+        <p> hello world </p>
+      </div>
+      <amp-copy width="100" height="20" source-id="myDiv1">
+        Copy Content
+      </amp-copy>
+    </>
+  );
+};