Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Support <amp-social-share type="system"> (#6688)
* Add "native" share type

* charset=utf8 -> charset=utf-8
  • Loading branch information
ithinkihaveacat authored and jridgewell committed Jan 31, 2017
1 parent 81b8020 commit 883053b
Show file tree
Hide file tree
Showing 6 changed files with 57 additions and 7 deletions.
1 change: 1 addition & 0 deletions examples/social-share.amp.html
Expand Up @@ -38,6 +38,7 @@ <h1>Social Share</h1>
<amp-social-share type="email" data-param-subject="Hello World" data-param-body="What's up?"></amp-social-share>
<amp-social-share type="whatsapp"></amp-social-share>
<amp-social-share type="pinterest" data-param-media="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w400-h300-no"></amp-social-share>
<amp-social-share type="system" data-mode="replace" data-param-text="Shared via the Web Share API"></amp-social-share>
<amp-social-share type="facebook"
data-param-text="Hello world"
data-param-href="https://example.com/?ref=URL"
Expand Down
7 changes: 7 additions & 0 deletions extensions/amp-social-share/0.1/amp-social-share-config.js
Expand Up @@ -80,4 +80,11 @@ const BUILTINS = {
text: 'TITLE - CANONICAL_URL',
},
},
system: {
shareEndpoint: 'navigator-share:',
defaultParams: {
text: 'TITLE',
url: 'CANONICAL_URL',
},
},
};
7 changes: 6 additions & 1 deletion extensions/amp-social-share/0.1/amp-social-share.css
Expand Up @@ -66,7 +66,12 @@ amp-social-share {
background-color: #000000;
}

/** Whatsapp Styling */
/* Whatsapp Styling */
.amp-social-share-whatsapp {
background-color: #25d366;
}

/* "system" styling */
.amp-social-share-system {
background-color: #000000;
}
30 changes: 27 additions & 3 deletions extensions/amp-social-share/0.1/amp-social-share.js
Expand Up @@ -14,7 +14,8 @@
* limitations under the License.
*/

import {addParamsToUrl, parseUrl} from '../../../src/url';
import {addParamsToUrl, parseUrl, parseQueryString} from '../../../src/url';
import {setStyle} from '../../../src/style';
import {getDataParamsFromAttributes} from '../../../src/dom';
import {getSocialConfig} from './amp-social-share-config';
import {isLayoutSizeDefined} from '../../../src/layout';
Expand Down Expand Up @@ -58,6 +59,22 @@ class AmpSocialShare extends AMP.BaseElement {
user().assert(!/\s/.test(typeAttr),
'Space characters are not allowed in type attribute value. %s',
this.element);
if (typeAttr === 'system') {
// Hide/ignore system component if navigator.share unavailable
if (!('share' in navigator)) {
setStyle(this.element, 'display', 'none');
return;
}
} else {
// Hide/ignore non-system component if system share wants to be unique
const systemOnly = ('share' in navigator) &&
!!this.win.document.querySelectorAll(
'amp-social-share[type=system][data-mode=replace]').length;
if (systemOnly) {
setStyle(this.element, 'display', 'none');
return;
}
}
const typeConfig = getSocialConfig(typeAttr) || {};
this.shareEndpoint_ = user().assert(
this.element.getAttribute('data-share-endpoint') ||
Expand Down Expand Up @@ -85,10 +102,17 @@ class AmpSocialShare extends AMP.BaseElement {
/** @private */
handleClick_() {
user().assert(this.href_ && this.target_, 'Clicked before href is set.');
const windowFeatures = 'resizable,scrollbars,width=640,height=480';
const href = dev().assertString(this.href_);
const target = dev().assertString(this.target_);
openWindowDialog(this.win, href, target, windowFeatures);
if (this.shareEndpoint_ === 'navigator-share:') {
dev().assert(navigator.share !== undefined,
'navigator.share disappeared.');
// navigator.share() fails 'gulp check-types' validation on Travis
navigator['share'](parseQueryString(href.substr(href.indexOf('?'))));
} else {
const windowFeatures = 'resizable,scrollbars,width=640,height=480';
openWindowDialog(this.win, href, target, windowFeatures);
}
}

};
Expand Down
15 changes: 12 additions & 3 deletions extensions/amp-social-share/amp-social-share.md
Expand Up @@ -79,11 +79,11 @@ Some popular providers have pre-configured share endpoints. For details, see the

**data-param-***

All `data-param-*` prefixed attributes are turned into URL parameters and passed to the share endpoint.
All `data-param-*` prefixed attributes are turned into URL parameters and passed to the share endpoint.


## Pre-configured Providers
The `amp-social-share` component provides [some pre-configured providers](0.1/amp-social-share-config.js) that know their sharing endpoints as well as some default parameters.
The `amp-social-share` component provides [some pre-configured providers](0.1/amp-social-share-config.js) that know their sharing endpoints as well as some default parameters.

<table>
<tr>
Expand Down Expand Up @@ -159,6 +159,15 @@ The `amp-social-share` component provides [some pre-configured providers](0.1/am
</ul>
</td>
</tr>
<tr>
<td><a href="https://developers.google.com/web/updates/2016/10/navigator-share">Web Share API</a> (available in Chrome as an <a href="https://github.com/jpchase/OriginTrials/blob/gh-pages/developer-guide.md">origin trial</a>)</td>
<td>
<ul>
<li><code>text</code>: optional, defaults to: "Current page title"</li>
<li><code>data-mode</code>: optional, if set to <code>override</code>, all other share options are removed.</li>
</ul>
</td>
</tr>
</table>


Expand Down Expand Up @@ -187,7 +196,7 @@ By default, `amp-social-share` includes some popular pre-configured providers. B

### Custom Styles

Sometimes you want to provide your own style. You can simply override the provided styles like the following:
Sometimes you want to provide your own style. You can simply override the provided styles like the following:
```css
amp-social-share[type="twitter"] {
background: red;
Expand Down
4 changes: 4 additions & 0 deletions third_party/optimized-svg-icons/amp-social-share-svgs.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 883053b

Please sign in to comment.