Mastodon
/
shareon-pulsanti-condivisione-social
mirror of https://github.com/NickKaramoff/shareon
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #14 from NickKaramoff/feature/default-export 

Export the `shareon` function
This commit is contained in:
Nikita Karamov 2020-07-26 14:44:10 +02:00 committed by GitHub
parent 5f5abd1611 bece4cdcf2
commit 8ccc88d99a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 166 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
README.md
View File

@ -18,8 +18,8 @@ Observe the live demo here: [shareon.js.org](https://shareon.js.org)
Include the link to shareon's JS and CSS in your website:
```html
<link href="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js" type="text/javascript"></script>
```
or install it via NPM use it in a JS file that you will bundle:
@ -31,7 +31,48 @@ yarn add shareon
```
```js
require('shareon');
const shareon = require('shareon');
// or
import shareon from 'shareon';
```
## Initialization
By default, shareon will initialize every button after page load. It also
exports the `shareon` function, that will let you repopulate your buttons with
updated information (for example, if you changed the page title):
```js
// shareon auto-initializes
window.title = "Cool new window title";
shareon();
```
If you want to postpone the initialization, you can import the `noinit`-version
of the package. You'll need to manually call the `shareon` function when you
want the buttons to be initialized:
```html
<!-- notice the 'noinit' section of the url for JS -->
<link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/noinit/shareon.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js" type="text/javascript"></script>
<script type="text/javascript">
// do something important
shareon();
</script>
```
or, if you're using Node:
```js
const shareon = require('shareon/dist/noinit/shareon');
// or
import shareon from 'shareon/dist/noinit/shareon';
// do something important
shareon();
```
## Usage

60
docs/index.html
View File

@ -103,14 +103,60 @@
Include the link to shareon's JS and CSS in your website:
</p>
<pre><code>&lt;link href="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.css"
<pre><code>&lt;link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css"
rel="stylesheet"&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.js"
&lt;script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js"
type="text/javascript"&gt;&lt;/script&gt;</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>
<pre><code>import 'shareon';</code></pre>
<p>or install it via NPM and use it in a JS file that you will later bundle:</p>
<pre><code>const shareon = require('shareon');</code></pre>
<pre><code>import shareon from 'shareon';</code></pre>
</article>
<article>
<h2>
<a id="initialization" href="#initialization" aria-hidden="true"></a>
Initialization
</h2>
<p>
By default, shareon will initialize every button after page load.
It also exports the <code>shareon</code> function, that will let
you repopulate your buttons with updated information (for example,
if you changed the page title):
</p>
<pre><code>// shareon auto-initializes
window.title = "Cool new window title";
shareon();</code></pre>
<p>
If you want to postpone the initialization, you can import the
<code>noinit</code>-version of the package. You'll need to
manually call the <code>shareon</code> function when you want the
buttons to be initialized:
</p>
<pre><code>&lt;!-- notice the 'noinit' section of the url for JS --&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js"
type="text/javascript"&gt;&lt;/script&gt;
&lt;link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css"
rel="stylesheet"&gt;
&lt;script type="text/javascript"&gt;
// do something important
shareon();
&lt;/script&gt;</code></pre>
<p>
or, if you're using Node:
</p>
<pre><code>const shareon = require('shareon');
// or
import shareon from 'shareon';
// do something important
shareon();</code></pre>
</article>
<article>
@ -225,7 +271,7 @@
</p>
</footer>
<link href="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js" type="text/javascript"></script>
</body>
</html>

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "shareon",
"version": "1.2.1",
"version": "1.3.0-6",
"description": "Lightweight, stylish and ethical share buttons for popular social networks",
"license": "MIT",
"homepage": "https://shareon.js.org",

98
rollup.config.js
View File

@ -10,18 +10,18 @@ const isDev = process.env.ROLLUP_WATCH || process.env.NODE_ENV === 'development'
const pkg = require('./package.json');
const inputFile = './src/index.ts';
const outputDir = isDev ? './dev/' : './dist/';
const bannerText = `${pkg.name} v${pkg.version} by Nikita Karamov\n${pkg.homepage}`;
/*
* PLUGINS
/**
* Plugins to build the project
*
* @type {Plugin[]}
*/
const plugins = [];
plugins.push(typescript());
const plugins = [
typescript(),
];
if (!isDev) {
plugins.push(strip({
@ -52,43 +52,57 @@ plugins.push(postcss({
],
}));
/*
* OUTPUTS
/**
* @typedef {import('rollup').OutputOptions} OutputOptions
*/
const output = [];
if (isDev) {
output.push({
name: pkg.name,
format: 'iife',
file: `${outputDir}${pkg.name}.js`,
});
} else {
output.push({
name: pkg.name,
format: 'cjs',
file: `${outputDir}${pkg.name}.cjs`,
});
output.push({
name: pkg.name,
format: 'esm',
file: `${outputDir}${pkg.name}.mjs`,
});
output.push({
name: pkg.name,
format: 'iife',
file: `${outputDir}${pkg.name}.min.js`,
plugins: [terser({ output: { comments: false } })],
});
}
/*
* EXPORT
/**
*
* @param {string} baseDir base directory for the output files
* @return {OutputOptions[]} array of outputs
*/
const getOutputs = (baseDir) => {
const result = [];
export default {
input: inputFile,
output,
plugins,
if (isDev) {
result.push({
name: pkg.name,
format: 'iife',
file: `${baseDir}${pkg.name}.js`,
});
} else {
result.push({
name: pkg.name,
format: 'cjs',
file: `${baseDir}${pkg.name}.cjs`,
});
result.push({
name: pkg.name,
format: 'esm',
file: `${baseDir}${pkg.name}.mjs`,
});
result.push({
name: pkg.name,
format: 'iife',
file: `${baseDir}${pkg.name}.min.js`,
plugins: [terser({ output: { comments: false } })],
});
}
return result;
};
const config = [
{
input: './src/autoinit.ts',
output: getOutputs(`${outputDir}`),
plugins,
},
{
input: './src/shareon.ts',
output: getOutputs(`${outputDir}noinit/`),
plugins: plugins.slice(0, -1),
},
];
export default config;

9
src/autoinit.ts Normal file
View File

@ -0,0 +1,9 @@
import './style.scss';
import initializeShareon from './shareon';
window.onload = () => {
initializeShareon();
};
export default initializeShareon;

6
src/index.ts → src/shareon.ts
View File

@ -1,5 +1,3 @@
import './style.scss';
interface PublishPreset {
url: string,
title: string,
@ -44,7 +42,7 @@ function initShareonChild(child: HTMLElement, preset: PublishPreset) {
}
}
window.onload = () => {
const initializeShareon = () : void => {
const shareonContainers = document.getElementsByClassName('shareon');
for (let i = 0; i < shareonContainers.length; i += 1) {
@ -70,3 +68,5 @@ window.onload = () => {
}
}
};
export default initializeShareon;