Nikita Karamov
GitHub
commit
fd54e4d8c7
|
|
@ -0,0 +1 @@
|
||||||
|
dist
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
module.exports = {
|
||||||
|
extends: ['airbnb-typescript/base'],
|
||||||
|
parserOptions: {
|
||||||
|
project: './tsconfig.json',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -1 +1,5 @@
|
||||||
node_modules
|
dev
|
||||||
|
dist
|
||||||
|
.idea
|
||||||
|
node_modules
|
||||||
|
yarn-error.log
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
language: node_js
|
||||||
|
node_js:
|
||||||
|
- node
|
||||||
|
- lts/erbium
|
||||||
|
- lts/dubnium
|
||||||
|
cache: yarn
|
||||||
|
|
||||||
|
install: yarn
|
||||||
|
script: yarn test
|
||||||
91
README.md
91
README.md
|
|
@ -1,24 +1,87 @@
|
||||||
# shareon
|
# shareon
|
||||||
|
|
||||||
<img src="https://raw.githubusercontent.com/googlefonts/noto-emoji/master/png/128/emoji_u1f4ef.png"
|
<img src="https://raw.githubusercontent.com/googlefonts/noto-emoji/master/png/128/emoji_u1f4ef.png" align="right" alt="Postal Horn emoji" width="96" height="96">
|
||||||
align="right"
|
|
||||||
alt="Postal Horn emoji"
|
|
||||||
width="96"
|
|
||||||
height="96">
|
|
||||||
|
|
||||||
Lightweight, stylish and ethical share buttons.
|
Lightweight, stylish and ethical share buttons.
|
||||||
|
|
||||||
- **Small.** Dependency-free.
|
- **Small.** Dependency-free. CSS+JS bundle is only 3.15 KB minified and gzipped.
|
||||||
- **Stylish.** Uses official vector logos and colors.
|
- **Stylish.** Uses official vector logos and colors with no visual mess.
|
||||||
- **Ethical.** No tracking code is being embedded.
|
- **Ethical.** No tracking code is being embedded. JS is used for quick setup only.
|
||||||
|
|
||||||
|
<img src="https://raw.githubusercontent.com/NickKaramoff/shareon/develop/docs/screen01@2x.png" height="114" alt="shareon example">
|
||||||
|
|
||||||
|
----
|
||||||
|
Observe the live demo here: [os.karamoff.dev/shareon](https://os.karamoff.dev/shareon)
|
||||||
|
|
||||||
|
## Install
|
||||||
|
|
||||||
|
Include the link to shareon's JS and CSS in your website:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- Define the container element -->
|
<link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css" rel="stylesheet">
|
||||||
<div class="sharevia">
|
<script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.js" type="text/javascript"></script>
|
||||||
<!-- Choose desired networks -->
|
```
|
||||||
<div class="twitter"></div>
|
|
||||||
|
|
||||||
<!-- Add optional text -->
|
or install it via NPM use it in a JS file that you will bundle:
|
||||||
<div class="facebook">Share</div>
|
|
||||||
|
```sh
|
||||||
|
npm install shareon
|
||||||
|
# or
|
||||||
|
yarn add shareon
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
require('shareon');
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
> shareon was heavily inspired by [Likely](https://ilyabirman.net/projects/likely/),
|
||||||
|
and has a backwards-compatible API (excluding themes and sizes).
|
||||||
|
|
||||||
|
Create a container with class `shareon` and populate it with elements, whose
|
||||||
|
classes match the names of social networks:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="shareon">
|
||||||
|
<a class="facebook"></a>
|
||||||
|
<a class="messenger"></a>
|
||||||
|
<a class="pinterest"></a>
|
||||||
|
<a class="telegram"></a>
|
||||||
|
<a class="twitter"></a>
|
||||||
|
<a class="whatsapp"></a>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
If you use `<a>`, the buttons will get a `href`-attribute to them. In other cases
|
||||||
|
they will get a listener on `click` event, so you can use `<button>`s if you wish.
|
||||||
|
|
||||||
|
By default the URL and the title of the page will be used in sharing dialogs.
|
||||||
|
To change this, you can use the `data-url` and `data-title` attributes. Use them
|
||||||
|
on the whole container or on the specific buttons:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="shareon" data-url="https://example.com">
|
||||||
|
<a class="facebook" data-title="Custom Facebook title"></a>
|
||||||
|
<a class="twitter" data-title="Custom Twitter title"></a>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
Apart from the URL and title, some networks support extra parameters:
|
||||||
|
|
||||||
|
- add `data-media` to a Pinterest button to customize the pinned picture
|
||||||
|
- add `data-text` to a WhatsApp or Telegram button to add custom message text
|
||||||
|
- add `data-via` to a Twitter button to mention a user
|
||||||
|
|
||||||
|
Here are all the custom parameters in their glory:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="shareon" data-url="https://example.com/custom-url">
|
||||||
|
<a class="facebook" data-title="Custom Facebook title"></a>
|
||||||
|
<a class="messenger" data-url="https://my-cool-website.com"></a>
|
||||||
|
<a class="pinterest" data-media="https://picsum.photos/500">Pin</a>
|
||||||
|
<a class="telegram" data-text="Check this out!"></a>
|
||||||
|
<a class="twitter" data-via="MyNickname"></a>
|
||||||
|
<a class="whatsapp">Send</a>
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 493 B |
Binary file not shown.
|
After Width: | Height: | Size: 820 B |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
155
docs/index.html
155
docs/index.html
|
|
@ -9,7 +9,16 @@
|
||||||
|
|
||||||
<title>shareon</title>
|
<title>shareon</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.shareon > a:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://igoradamenko.github.io/awsm.css/css/awsm.min.css">
|
<link rel="stylesheet" href="https://igoradamenko.github.io/awsm.css/css/awsm.min.css">
|
||||||
|
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
|
@ -43,12 +52,154 @@
|
||||||
<p>
|
<p>
|
||||||
<code>shareon</code> are share buttons for popular social networks.
|
<code>shareon</code> are share buttons for popular social networks.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<div class="shareon" data-title="shareon — lightweight, stylish and ethical share buttons"
|
||||||
|
style="text-align: center">
|
||||||
|
<a class="facebook"></a>
|
||||||
|
<a class="messenger"></a>
|
||||||
|
<a class="pinterest"></a>
|
||||||
|
<a class="telegram"></a>
|
||||||
|
<a class="twitter"></a>
|
||||||
|
<a class="whatsapp"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Unlike many other share buttons, <code>shareon</code> are:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><b>lightweight</b>, clocking in at only 3.15 KB gzipped code (JS+CSS)</li>
|
||||||
|
<li><b>stylish</b>, by having no visual features other than official colors and logos</li>
|
||||||
|
<li><b>ethical</b>, since they do not insert any pesky tracking code</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
The whole JavaScript code is quick and simple: it only populates the buttons with set up links. The
|
||||||
|
speed
|
||||||
|
and easy customization make <code>shareon</code> the perfect choice for your blog, news site or project
|
||||||
|
page!
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>
|
||||||
|
<a id="install" href="#install" aria-hidden="true"></a>
|
||||||
|
Install
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
Include the link to shareon's JS and CSS in your website:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<pre><code><link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css"
|
||||||
|
rel="stylesheet">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.js"
|
||||||
|
type="text/javascript"></script></code></pre>
|
||||||
|
|
||||||
|
<p>or install it via NPM use it in a JS file that you will later bundle:</p>
|
||||||
|
<pre><code>require('shareon');</code></pre>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>
|
||||||
|
<a id="usage" href="#usage" aria-hidden="true"></a>
|
||||||
|
Usage
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<aside>
|
||||||
|
<p>
|
||||||
|
<code>shareon</code> was heavily inspired by
|
||||||
|
<a href="https://ilyabirman.net/projects/likely/">Likely</a>,
|
||||||
|
and has a backwards-compatible API
|
||||||
|
</p>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Create a container with class <code>shareon</code> and populate it with elements, whose classes match
|
||||||
|
the
|
||||||
|
names of social networks:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<pre><code><div class="shareon">
|
||||||
|
<a class="facebook"></a>
|
||||||
|
<a class="messenger"></a>
|
||||||
|
<a class="pinterest"></a>
|
||||||
|
<a class="telegram"></a>
|
||||||
|
<a class="twitter"></a>
|
||||||
|
<a class="whatsapp"></a>
|
||||||
|
</div></code></pre>
|
||||||
|
<div class="shareon">
|
||||||
|
<a class="facebook"></a>
|
||||||
|
<a class="messenger"></a>
|
||||||
|
<a class="pinterest"></a>
|
||||||
|
<a class="telegram"></a>
|
||||||
|
<a class="twitter"></a>
|
||||||
|
<a class="whatsapp"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
If you use <code><a></code>, the buttons will get a `href`-attribute to them. In other cases they
|
||||||
|
will get a listener on <code>click</code> event, so you can use <code><button></code>s if you
|
||||||
|
wish.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
By default the URL and the title of the page will be used in sharing dialogs. To change this, you can
|
||||||
|
use
|
||||||
|
the <code>data-url</code> and <code>data-title</code> attributes. Use them on the whole container or on
|
||||||
|
the specific buttons:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<pre><code><div class="shareon" data-url="https://example.com">
|
||||||
|
<a class="facebook" data-title="Custom Facebook title"></a>
|
||||||
|
<a class="twitter" data-title="Custom Twitter title"></a>
|
||||||
|
</div></code></pre>
|
||||||
|
|
||||||
|
<div class="shareon" data-url="https://example.com">
|
||||||
|
<a class="whatsapp" data-title="Custom WhatsApp title"></a>
|
||||||
|
<a class="twitter" data-title="Custom Twitter title"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Apart from the URL and title, some networks support extra parameters:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>add <code>data-media</code> to a Pinterest button to customize the pinned picture</li>
|
||||||
|
<li>add <code>data-text</code> to a WhatsApp or Telegram button to add custom message text</li>
|
||||||
|
<li>add <code>data-via</code> to a Twitter button to mention a user</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Here are all the custom parameters in their glory:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<pre><code><div class="shareon" data-url="https://example.com/custom-url">
|
||||||
|
<a class="facebook" data-title="Custom Facebook title"></a>
|
||||||
|
<a class="messenger" data-url="https://my-cool-website.com"></a>
|
||||||
|
<a class="pinterest" data-media="https://picsum.photos/500">Pin</a>
|
||||||
|
<a class="telegram" data-text="Check this out!"></a>
|
||||||
|
<a class="twitter" data-via="MyNickname"></a>
|
||||||
|
<a class="whatsapp">Send</a>
|
||||||
|
</div></code></pre>
|
||||||
|
<div class="shareon" data-url="https://example.com/custom-url">
|
||||||
|
<a class="facebook" data-title="Custom Facebook title"></a>
|
||||||
|
<a class="messenger" data-url="https://my-cool-website.com"></a>
|
||||||
|
<a class="pinterest" data-media="https://picsum.photos/500">Pin</a>
|
||||||
|
<a class="telegram" data-text="Check this out!"></a>
|
||||||
|
<a class="twitter" data-via="MyNickname"></a>
|
||||||
|
<a class="whatsapp">Send</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>by <a href="https://karamoff.dev" target="_blank">Nikita Karamov</a></p>
|
<p>by <a href="https://karamoff.dev" target="_blank">Nikita Karamov</a></p>
|
||||||
<p>Website built with <a href="https://igoradamenko.github.io/awsm.css/index.html" target="_blank">awsm.css</a></p>
|
<p>Website built with <a href="https://igoradamenko.github.io/awsm.css/index.html" target="_blank">awsm.css</a>
|
||||||
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/shareon@1.0.0-beta.3/dist/shareon.min.css" rel="stylesheet">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/shareon@1.0.0-beta.3/dist/shareon.min.js" type="text/javascript"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
75
package.json
75
package.json
|
|
@ -1,9 +1,15 @@
|
||||||
{
|
{
|
||||||
"name": "shareon",
|
"name": "shareon",
|
||||||
"version": "1.0.0-alpha.0",
|
"version": "1.0.0-beta.3",
|
||||||
"repository": "https://github.com/NickKaramoff/shareon",
|
"homepage": "https://os.karamoff.dev/shareon",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/NickKaramoff/shareon.git"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/NickKaramoff/shareon/issues"
|
||||||
|
},
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
||||||
"author": "Nikita Karamov <nick@karamoff.dev>",
|
"author": "Nikita Karamov <nick@karamoff.dev>",
|
||||||
"description": "Lightweight, stylish and ethical share buttons for popular social networks",
|
"description": "Lightweight, stylish and ethical share buttons for popular social networks",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
|
|
@ -11,12 +17,61 @@
|
||||||
"sharing",
|
"sharing",
|
||||||
"social networks"
|
"social networks"
|
||||||
],
|
],
|
||||||
|
"files": [
|
||||||
"main": "./dist/shareon.js",
|
"dist",
|
||||||
|
"LICENSE",
|
||||||
"scripts": {},
|
"README.md"
|
||||||
|
],
|
||||||
|
"main": "./dist/shareon.cjs",
|
||||||
|
"exports": {
|
||||||
|
"require": "./dist/shareon.cjs"
|
||||||
|
},
|
||||||
|
"unpkg": "./dist/shareon.min.js",
|
||||||
|
"scripts": {
|
||||||
|
"build": "rollup -c ./rollup/rollup.config.prod.js",
|
||||||
|
"dev": "rollup -w -c ./rollup/rollup.config.dev.js",
|
||||||
|
"pretest": "run-p build",
|
||||||
|
"test:lint": "eslint-ci --ext .js,.ts ./src/",
|
||||||
|
"test:size": "size-limit",
|
||||||
|
"test": "run-p test:*"
|
||||||
|
},
|
||||||
"dependencies": {},
|
"dependencies": {},
|
||||||
|
"devDependencies": {
|
||||||
"devDependencies": {}
|
"@rollup/plugin-strip": "^1.3.2",
|
||||||
|
"@rollup/plugin-typescript": "^4.0.0",
|
||||||
|
"@size-limit/preset-small-lib": "^4.4.1",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^2.24.0",
|
||||||
|
"cssnano": "^4.1.10",
|
||||||
|
"eslint": "^6.8.0",
|
||||||
|
"eslint-ci": "^1.0.0",
|
||||||
|
"eslint-config-airbnb-typescript": "^7.2.0",
|
||||||
|
"eslint-plugin-import": "^2.20.1",
|
||||||
|
"node-sass": "^4.13.1",
|
||||||
|
"np": "^6.2.0",
|
||||||
|
"npm-run-all": "^4.1.5",
|
||||||
|
"rollup": "^1.32.1",
|
||||||
|
"rollup-plugin-banner": "^0.2.1",
|
||||||
|
"rollup-plugin-postcss": "^2.5.0",
|
||||||
|
"rollup-plugin-terser": "^5.3.0",
|
||||||
|
"size-limit": "^4.4.1",
|
||||||
|
"typescript": "^3.8.3"
|
||||||
|
},
|
||||||
|
"size-limit": [
|
||||||
|
{
|
||||||
|
"limit": "1 KB",
|
||||||
|
"path": "./dist/shareon.min.js",
|
||||||
|
"webpack": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"limit": "1 KB",
|
||||||
|
"path": [
|
||||||
|
"./dist/shareon.cjs"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"limit": "7 KB",
|
||||||
|
"path": "./dist/shareon.min.css",
|
||||||
|
"webpack": false
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
import postcssPluginCssnano from 'cssnano';
|
||||||
|
import rollupPluginBanner from 'rollup-plugin-banner';
|
||||||
|
import rollupPluginPostcss from 'rollup-plugin-postcss';
|
||||||
|
import rollupPluginStrip from '@rollup/plugin-strip';
|
||||||
|
import { terser as rollupPluginTerser } from 'rollup-plugin-terser';
|
||||||
|
import rollupPluginTypescript from '@rollup/plugin-typescript';
|
||||||
|
|
||||||
|
export const banner = () => rollupPluginBanner(
|
||||||
|
'<%= pkg.name %> by Nikita Karamov\nInspired by Likely (https://ilyabirman.net/projects/likely/)'
|
||||||
|
)
|
||||||
|
|
||||||
|
export const postcss = (file, minify) => rollupPluginPostcss({
|
||||||
|
extract: file || true,
|
||||||
|
plugins: [
|
||||||
|
minify && postcssPluginCssnano({
|
||||||
|
preset: 'default',
|
||||||
|
})
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
export const strip = () => rollupPluginStrip({
|
||||||
|
debugger: true,
|
||||||
|
include: ['**/*.js', '**/*.ts'],
|
||||||
|
functions: ['console.log', 'console.debug', 'assert.*'],
|
||||||
|
sourceMap: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const terser = () => rollupPluginTerser({
|
||||||
|
sourcemap: false,
|
||||||
|
output: {
|
||||||
|
comments: false,
|
||||||
|
ecma: 5,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const typescript = () => rollupPluginTypescript();
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
import { postcss, typescript } from './plugins';
|
||||||
|
|
||||||
|
const input = './src/index.ts';
|
||||||
|
const name = 'shareon';
|
||||||
|
const outputDir = './dev/';
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
input,
|
||||||
|
output: {
|
||||||
|
name,
|
||||||
|
format: 'iife',
|
||||||
|
file: `${outputDir}${name}.js`,
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
typescript(),
|
||||||
|
postcss(`${outputDir}${name}.css`, false),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { banner, postcss, strip, terser, typescript } from './plugins';
|
||||||
|
|
||||||
|
const input = './src/index.ts';
|
||||||
|
const name = 'shareon';
|
||||||
|
const outputDir = './dist/';
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
input,
|
||||||
|
output: [
|
||||||
|
{
|
||||||
|
name,
|
||||||
|
format: 'cjs',
|
||||||
|
file: `${outputDir}${name}.cjs`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name,
|
||||||
|
format: 'iife',
|
||||||
|
file: `${outputDir}${name}.min.js`,
|
||||||
|
plugins: [terser()],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
typescript(),
|
||||||
|
strip(),
|
||||||
|
postcss(`${outputDir}${name}.min.css`, true),
|
||||||
|
banner()
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
import './style.scss';
|
||||||
|
|
||||||
|
interface PublishPreset {
|
||||||
|
url: string,
|
||||||
|
title: string,
|
||||||
|
extra: {
|
||||||
|
media: string,
|
||||||
|
text: string,
|
||||||
|
via: string,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
type UrlBuilder = (data: PublishPreset) => string;
|
||||||
|
|
||||||
|
const NETWORKS: { [name: string]: UrlBuilder } = {
|
||||||
|
facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}`,
|
||||||
|
messenger: (d) => `https://www.facebook.com/dialog/send?app_id=3619024578167617&link=${d.url}&redirect_uri=${d.url}`,
|
||||||
|
pinterest: (d) => `https://pinterest.com/pin/create/button/?url=${d.url}&description=${d.title}${d.extra.media ? `&media=${d.extra.media}` : ''}`,
|
||||||
|
telegram: (d) => `https://telegram.me/share/url?url=${d.url}${d.extra.text ? `&text=${d.extra.text}` : ''}`,
|
||||||
|
twitter: (d) => `https://twitter.com/intent/tweet?url=${d.url}&text=${d.title}${d.extra.via ? `&via=${d.extra.via}` : ''}`,
|
||||||
|
whatsapp: (d) => `whatsapp://send?text=${d.title}%0D%0A${d.url}${d.extra.text ? `%0D%0A%0D%0A${d.extra.text}` : ''}`,
|
||||||
|
};
|
||||||
|
|
||||||
|
function initShareonChild(child: HTMLElement, preset: PublishPreset) {
|
||||||
|
if (child) {
|
||||||
|
child.classList.forEach((cls) => {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(NETWORKS, cls)) {
|
||||||
|
const url = NETWORKS[cls](preset);
|
||||||
|
if (child.tagName.toLowerCase() === 'a') {
|
||||||
|
child.setAttribute('href', url);
|
||||||
|
child.setAttribute('rel', 'noopener noreferrer');
|
||||||
|
child.setAttribute('target', '_blank');
|
||||||
|
} else {
|
||||||
|
child.addEventListener('click', () => { window.open(url, '_blank', 'noopener,noreferrer').opener = null; });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onload = () => {
|
||||||
|
const shareonContainers = document.getElementsByClassName('shareon');
|
||||||
|
|
||||||
|
for (let i = 0; i < shareonContainers.length; i += 1) {
|
||||||
|
const container = shareonContainers[i] as HTMLElement;
|
||||||
|
|
||||||
|
for (let j = 0; j < container.children.length; j += 1) {
|
||||||
|
const child = container.children[j] as HTMLElement;
|
||||||
|
|
||||||
|
const preset: PublishPreset = {
|
||||||
|
url: encodeURIComponent(child.dataset.url || container.dataset.url || window.location.href),
|
||||||
|
title: encodeURIComponent(child.dataset.title || container.dataset.title || document.title || ''),
|
||||||
|
extra: {
|
||||||
|
media: encodeURIComponent(child.dataset.media || container.dataset.media || ''),
|
||||||
|
text: encodeURIComponent(child.dataset.text || container.dataset.text || ''),
|
||||||
|
via: encodeURIComponent(child.dataset.via || container.dataset.via || ''),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
initShareonChild(
|
||||||
|
child as HTMLElement,
|
||||||
|
preset,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
$button-size: 36px;
|
||||||
|
$icon-size: 20px;
|
||||||
|
|
||||||
|
$padding-ver: 0.3*$icon-size;
|
||||||
|
$padding-hor: $icon-size / 2;
|
||||||
|
$padding-icon: ($button-size - $icon-size) / 2;
|
||||||
|
|
||||||
|
$height: $button-size - 2*$padding-ver;
|
||||||
|
$width: $button-size - 2*$padding-hor;
|
||||||
|
|
||||||
|
.shareon {
|
||||||
|
& > * {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
height: $height;
|
||||||
|
min-width: $width;
|
||||||
|
|
||||||
|
padding: $padding-ver $padding-hor;
|
||||||
|
|
||||||
|
background-color: #ccc;
|
||||||
|
border-radius: $icon-size / 6;
|
||||||
|
border: none;
|
||||||
|
box-sizing: content-box;
|
||||||
|
color: white;
|
||||||
|
line-height: 1.5;
|
||||||
|
transition: opacity 300ms ease;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:empty) {
|
||||||
|
font-size: 0.8 * $icon-size;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
height: 100%;
|
||||||
|
width: $icon-size+$padding-icon;
|
||||||
|
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
height: $icon-size;
|
||||||
|
width: $icon-size;
|
||||||
|
|
||||||
|
top: $padding-icon;
|
||||||
|
left: $padding-icon;
|
||||||
|
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: $icon-size $icon-size;
|
||||||
|
content: '';
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
&.facebook {
|
||||||
|
background-color: #1877F2;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.messenger {
|
||||||
|
background-color: #0099FF;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 11.64C0 4.95 5.24 0 12 0s12 4.95 12 11.64-5.24 11.64-12 11.64c-1.21 0-2.38-.16-3.47-.46a.96.96 0 00-.64.05L5.5 23.92a.96.96 0 01-1.35-.85l-.07-2.14a.97.97 0 00-.32-.68A11.39 11.39 0 010 11.64zm8.32-2.19l-3.52 5.6c-.35.53.32 1.14.82.75l3.79-2.87c.26-.2.6-.2.87 0l2.8 2.1c.84.63 2.04.4 2.6-.48l3.52-5.6c.35-.53-.32-1.13-.82-.75l-3.79 2.87c-.25.2-.6.2-.86 0l-2.8-2.1a1.8 1.8 0 00-2.61.48z'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.pinterest {
|
||||||
|
background-color: #e60023;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026z'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.telegram {
|
||||||
|
background-color: #179CDE;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='4.4 5 14 14' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M4.987 11.948c3.69-1.487 6.151-2.468 7.382-2.941 3.515-1.352 4.245-1.587 4.721-1.595.105-.002.339.022.491.136a.482.482 0 01.18.317c.017.091.038.299.021.461-.19 1.851-1.015 6.343-1.434 8.417-.177.877-.529 1.065-.867 1.094-.736.062-1.291-.343-2.003-.775-1.114-.675-1.788-.987-2.869-1.646-1.25-.762-.15-1.118.562-1.802.186-.179 3.371-3.042 3.357-3.128-.005-.032-.099-.34-.173-.401s-.184-.04-.262-.024c-.112.024-1.892 1.112-5.339 3.264-.506.321-.963.477-1.373.469-.452-.009-1.321-.236-1.968-.43-.792-.239-1.085-.351-1.03-.756.028-.211.23-.431.604-.66z'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.twitter {
|
||||||
|
background-color: #1da1f2;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.whatsapp {
|
||||||
|
background-color: #25D366;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 00-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"es6"
|
||||||
|
],
|
||||||
|
"module": "ES2020",
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"target": "es5"
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"./src/**/*"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue