Skip to content

Commit

Permalink
Merge branch 'develop'
Browse files Browse the repository at this point in the history
  • Loading branch information
Dabolus committed Oct 16, 2018
2 parents e0ddbe5 + 5e3f05f commit be4db8e
Show file tree
Hide file tree
Showing 15 changed files with 17,808 additions and 1,090 deletions.
8 changes: 5 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# IntelliJ IDEA configuration
.idea/
# bower_components directory
bower_components/
node_modules/
share-menu.js
share-menu.d.ts
social-icons.js
social-icons.d.ts
7 changes: 7 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.idea/
demo/
node_modules/
src/
.*
index.html
ts*.json
31 changes: 31 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
language: node_js
node_js: 8.12.0
cache:
directories:
- node_modules
script:
- npm run lint
- npm run build
deploy:
- provider: npm
skip_cleanup: true
tag: latest
email: [email protected]
api_key:
secure: TYFc64TQp1kW8JvzBoMIomAl5oJnXH2zgovQaRPhV4rIdJTJ3SkytVwtGadelMyKAODFPVMj083cS8IhKatwvpwPBxG15H4GAzMi+iDawzGh1auTkMBL/1cMj6PPYXqkLmu4obcwPAmDCUFIxhIzAnD83MUluGrIxhnFEAD86xRCVnQevyEfWIf36VY0GhtCAX8fN8Bxo1kCXFh4l9Nz7zAz4yCsx5JyDlodvqEzF3X/2tZfaKRoL6b2JXwkGqv6/IT8ZFp4VQ0KXMmbBVncgh7kakbxI4RLdBJnKx1CFWv3x0mcpkMm+Lub8eMl0yY3HCThWrYlzPG/P4G8BxIxv8NKiITfFcBSDMYT0c6t5kmhlF/2xQkT61EsXTCQsYzxICKy9ctROLnxnz7s4JcW9lXL3beIIplyj/WYdmXB5Nfoi8urYjc+8k2WN1HVuMeJwdInyqTRlvsSUcR2mn0mCoBgg07JnXVtwKYrRTYSQwP+R3vyxlzre9qmksLckMm9Z92HnbXp1zhcSjvFSYUsuykGJxbCwNB8HswyHpfpH3bpYHvOMKQW3ab/ON1d7EqSbbVxmuoQT0U2DuhEbsoAGOc7XJf+YAVZ/1/cX1SVQE82yVa9yjHE4BsfRJ/1Khdd6UXQ3UPoqgJpSJpkrK7yWkExtoIIRegRQhcR0XJuiEc=
on:
branch: master
condition: $TRAVIS_BRANCH =~ ^[0-9]+\.[0-9]+\.[0-9]+$
repo: Dabolus/share-menu
tags: true
- provider: npm
skip_cleanup: true
tag: next
email: [email protected]
api_key:
secure: TYFc64TQp1kW8JvzBoMIomAl5oJnXH2zgovQaRPhV4rIdJTJ3SkytVwtGadelMyKAODFPVMj083cS8IhKatwvpwPBxG15H4GAzMi+iDawzGh1auTkMBL/1cMj6PPYXqkLmu4obcwPAmDCUFIxhIzAnD83MUluGrIxhnFEAD86xRCVnQevyEfWIf36VY0GhtCAX8fN8Bxo1kCXFh4l9Nz7zAz4yCsx5JyDlodvqEzF3X/2tZfaKRoL6b2JXwkGqv6/IT8ZFp4VQ0KXMmbBVncgh7kakbxI4RLdBJnKx1CFWv3x0mcpkMm+Lub8eMl0yY3HCThWrYlzPG/P4G8BxIxv8NKiITfFcBSDMYT0c6t5kmhlF/2xQkT61EsXTCQsYzxICKy9ctROLnxnz7s4JcW9lXL3beIIplyj/WYdmXB5Nfoi8urYjc+8k2WN1HVuMeJwdInyqTRlvsSUcR2mn0mCoBgg07JnXVtwKYrRTYSQwP+R3vyxlzre9qmksLckMm9Z92HnbXp1zhcSjvFSYUsuykGJxbCwNB8HswyHpfpH3bpYHvOMKQW3ab/ON1d7EqSbbVxmuoQT0U2DuhEbsoAGOc7XJf+YAVZ/1/cX1SVQE82yVa9yjHE4BsfRJ/1Khdd6UXQ3UPoqgJpSJpkrK7yWkExtoIIRegRQhcR0XJuiEc=
on:
branch: develop
condition: $TRAVIS_BRANCH =~ ^[0-9]+\.[0-9]+\.[0-9]+-rc\.[0-9]+$
repo: Dabolus/share-menu
tags: true
69 changes: 34 additions & 35 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,30 @@

_[Demo and API docs](https://www.webcomponents.org/element/Dabolus/share-menu)_

A complete and simple to use share menu for Polymer 2 that uses [Web Share API](https://developers.google.com/web/updates/2016/10/navigator-share) when possible, with a fallback to a nice share menu that tries to emulate the experience of the native one.

_Note that in addition to the support to the Web Share API, your browser needs to be within a [secure context](https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features) to be able to use it. This components tries to automatically detect it, but it is not 100% reliable, so make sure you take the appropriate measures._
A complete and simple to use share menu that uses
[Web Share API](https://developers.google.com/web/updates/2016/10/navigator-share)
when possible, with a fallback to a nice share menu that tries to emulate the
experience of the native one.

## Features
- Incredibly simple to use. Just set the `title`, `text` and `url` properties and call the `share()` method to make the magic happen.
- Heavily customizable. It is designed to be customized as much as possible by using CSS custom properties and mixins. Check the **Styling** section to see what you can do.
- Compatible with almost any browser. The Web Share API is still quite young, but the fallback menu should work on any of the major browsers, since it mostly uses `window.open` calls.
- Incredibly simple to use. Just set the `title`, `text`, `url` and `via`
properties and call the `share()` method to make the magic happen.
- Customizable. It offers a great material design UI by default, but it is also
designed to be customizable through CSS custom properties. However, keep in
mind that CSS mixins have been deprecated, so you won't be able to customize
it a lot until [the new standard](https://drafts.csswg.org/css-shadow-parts)
makes its way into the browsers.
- Compatible with any major browser. The Web Share API is still quite young, but
the fallback dialog works on any browser supporting Custom Elements (directly
or through a polyfill). Unlike the native share menu, the fallback will also
work on desktop browsers and insecure contexts, so you will be able to offer
a much more coherent experience to your users.

## Installation
```
bower install --save Dabolus/share-menu
```bash
npm i share-menu
# or
yarn add share-menu
```

## Usage
Expand All @@ -33,20 +45,14 @@ bower install --save Dabolus/share-menu
url="https://www.example.com/"
via="Dabolus"
dialog-title="Share now!"
copy-success-text="Text copied to clipboard!"
copy-failed-text="Oh no! Couldn't copy the text automatically :("
facebook-app-id="<your Facebook App ID to use the Facebook UI share>"
is-image="auto"
hide-labels>
no-backdrop>
</share-menu>
```

As you can see in this last example, this component allows you to insert your own Facebook App ID to use the Facebook UI share.
It is **heavily recommended** to use it if possible, since it offers a much better user experience.
You can get one [here](https://developers.facebook.com/apps/).

## Supported socials (in the fallback dialog)
Here you can see the list of the supported socials, as well as the limitations that each one gives:
Here you can see the list of the supported socials, as well as the limitations
that each one gives:

- Baidu - _URL and title only_
- Blogger
Expand All @@ -57,7 +63,7 @@ Here you can see the list of the supported socials, as well as the limitations t
- Douban - _URL and title only_
- Email
- Evernote - _URL only_
- Facebook - _URL only if not using a Facebook App with the `facebook-app-id` parameter_
- Facebook - _URL only if not using [Facebook JS SDK](https://developers.facebook.com/docs/javascript)_
- FlipBoard - _URL and title only_
- Google+ - _URL only_
- Instapaper
Expand All @@ -71,7 +77,7 @@ Here you can see the list of the supported socials, as well as the limitations t
- Print - _Only prints the page at the given URL_
- QZone - _URL only_
- Reddit - _Shares an URL if there is no text provided, otherwise a text with the URL appended at the end will be shared._
- RenRen - _Currently disabled because it does not seem to work
- RenRen - _Currently disabled because it does not seem to work_
- Skype - _URL only_
- SMS
- StumbleUpon - _URL and title only_
Expand All @@ -90,23 +96,16 @@ Here you can see the list of the supported socials, as well as the limitations t
_The `via` parameter will only be used by Delicious, LinkedIn and Twitter._

## Icons
The icons used by the component are a special iconset, so you can also use them everywhere in your app by importing `social-icons.html` located in this package.
The icons used by the component are just simple SVGs, so you can use them anywhere in your app simply by importing
`social-icons.js` located in this package.

## Styling

The following custom properties and mixins are available for styling:

| Custom property | Description | Default |
| --------------------------------- | ------------------------------------------------------------------------------------ | --------- |
| `--dialog-background-color` | The background color of the dialogs | `white` |
| `--dialog-text-color` | The text color of the dialogs | `black` |
| `--toast-background-color` | The background color of the "copied to clipboard" toast | `#323232` |
| `--toast-text-color` | The text color of the "copied to clipboard" toast | `#f1f1f1` |
| `--clipboard-fallback-url-color` | The text color of the fallback url color (when automatic copying to clipboard fails) | `#ff6d00` |
| `--share-dialog` | Mixin applied to the share dialog | `{}` |
| `--copy-dialog` | Mixin applied to the "copy to clipboard" fallback dialog | `{}` |
| `--dialog-title` | Mixin applied to the share dialog title | `{}` |
| `--social-icon` | Mixin applied to the social icons | `{}` |
| `--social-text` | Mixin applied to the text under the social icons (the social name) | `{}` |
| `--clipboard-fallback-url-header` | Mixin applied to the header of the "copy to clipboard" fallback dialog | `{}` |
| `--clipboard-fallback-url` | Mixin applied to the url of the "copy to clipboard" fallback dialog | `{}` |
| Custom property | Description | Default |
| --------------------------- | ----------------------------------------------------- | -------------------- |
| `--backdrop-color` | The color of the backdrop | `#000` |
| `--background-color` | The background color of the fallback dialog | `#fff` |
| `--title-color` | The color of the title of the fallback dialog | `rgba(0, 0, 0, .6)` |
| `--ripple-color` | The color of the ripple of the fallback dialog | `#000` |
| `--labels-color` | The color of the social labels of the fallback dialog | `rgba(0, 0, 0, .87)` |
30 changes: 0 additions & 30 deletions bower.json

This file was deleted.

149 changes: 77 additions & 72 deletions demo/index.html
Original file line number Diff line number Diff line change
@@ -1,82 +1,87 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

<title>share-menu demo</title>
<title>share-menu demo</title>
<meta name="description" content="share-menu demo description">

<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../paper-input/paper-input.html">
<link rel="import" href="../../paper-input/paper-textarea.html">
<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../../paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../../paper-styles/color.html">
<link rel="import" href="../../paper-styles/typography.html">
<link rel="import" href="../share-menu.html">
<script type="module">
import '@polymer/iron-demo-helpers/demo-pages-shared-styles';
import '@polymer/iron-demo-helpers/demo-snippet';
import '@polymer/iron-flex-layout/iron-flex-layout';
import '@polymer/paper-input/paper-input';
import '@polymer/paper-input/paper-textarea';
import '@polymer/paper-button/paper-button';
import '@polymer/paper-toggle-button/paper-toggle-button';
import '@polymer/paper-styles/color';
import '@polymer/paper-styles/typography';
</script>

<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
.toggleWrapper {
@apply --layout-horizontal;
margin-top: 12px;
}
.toggleWrapper > .label {
@apply --paper-font-subhead;
}
.toggleWrapper > .spacer {
@apply --layout-flex;
}
.toggleWrapper > paper-toggle-button {
cursor: pointer;
}
#buttonWrapper {
@apply --layout-horizontal;
@apply --layout-end-justified;
margin-top: 12px;
}
#buttonWrapper > paper-button {
@apply --paper-font-button;
background-color: var(--paper-indigo-500);
color: var(--dark-theme-text-color);
}
</style>
</custom-style>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic share-menu demo</h3>
<demo-snippet>
<template>
<dom-bind>
<script type="module" src="../share-menu.js"></script>

<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
.toggleWrapper {
@apply --layout-horizontal;
margin-top: 12px;
}

.toggleWrapper > .label {
@apply --paper-font-subhead;
}

.toggleWrapper > .spacer {
@apply --layout-flex;
}

.toggleWrapper > paper-toggle-button {
cursor: pointer;
}

#buttonWrapper {
@apply --layout-horizontal;
@apply --layout-end-justified;
margin-top: 12px;
}

#buttonWrapper > paper-button {
@apply --paper-font-button;
background-color: var(--paper-indigo-500);
color: var(--dark-theme-text-color);
}
</style>
</custom-style>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic share-menu demo</h3>
<demo-snippet>
<template>
<paper-input label="Title" value="{{title}}"></paper-input>
<paper-textarea label="Text" value="{{text}}" rows="3" max-rows="3"></paper-textarea>
<paper-input label="URL" value="{{url}}"></paper-input>
<paper-input label="Via" value="{{via}}"></paper-input>
<div class="toggleWrapper">
<div class="label">Hide labels</div>
<div class="spacer"></div>
<paper-toggle-button checked="{{hideLabels}}"></paper-toggle-button>
</div>
<div class="toggleWrapper">
<div class="label">Hide backdrop</div>
<div class="spacer"></div>
<paper-toggle-button checked="{{hideBackdrop}}"></paper-toggle-button>
</div>
<div id="buttonWrapper">
<paper-button raised onclick="shareMenu.share()">Share!</paper-button>
</div>
<dom-bind>
<template>
<paper-input label="Title" value="{{title}}"></paper-input>
<paper-textarea label="Text" value="{{text}}" rows="3" max-rows="3"></paper-textarea>
<paper-input label="URL" value="{{url}}"></paper-input>
<paper-input label="Via" value="{{via}}"></paper-input>
<div class="toggleWrapper">
<div class="label">Hide backdrop</div>
<div class="spacer"></div>
<paper-toggle-button checked="{{hideBackdrop}}"></paper-toggle-button>
</div>
<div id="buttonWrapper">
<paper-button raised onclick="shareMenu.share()">Share!</paper-button>
</div>

<share-menu id="shareMenu" title="[[title]]" text="[[text]]" url="[[url]]" via="[[via]]" hide-labels="[[hideLabels]]" without-backdrop="[[hideBackdrop]]" is-image="auto"></share-menu>
<share-menu id="shareMenu" title$="[[title]]" text$="[[text]]" url$="[[url]]" via$="[[via]]"
no-backdrop$="[[hideBackdrop]]" is-image$="auto"></share-menu>
</template>
</dom-bind>
</template>
</dom-bind>
</template>
</demo-snippet>
</div>
</body>
</demo-snippet>
</div>
</body>
</html>
Loading

0 comments on commit be4db8e

Please sign in to comment.