Merge pull request #14 from NickKaramoff/feature/default-export
Export the `shareon` functionpull/16/head
Nikita Karamov
GitHub
commit
8ccc88d99a
47
README.md
47
README.md
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -103,14 +103,60 @@
|
|||
Include the link to shareon's JS and CSS in your website:
|
||||
</p>
|
||||
|
||||
<pre><code><link href="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.css"
|
||||
<pre><code><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.2.1/dist/shareon.min.js"
|
||||
<script src="https://cdn.jsdelivr.net/npm/shareon@1.3/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>
|
||||
<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><!-- notice the 'noinit' section of the url for JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/shareon@1.3/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 type="text/javascript">
|
||||
// do something important
|
||||
shareon();
|
||||
</script></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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import './style.scss';
|
||||
|
||||
import initializeShareon from './shareon';
|
||||
|
||||
window.onload = () => {
|
||||
initializeShareon();
|
||||
};
|
||||
|
||||
export default initializeShareon;
|
||||
|
|
@ -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;
|
||||
Loading…
Reference in New Issue