JSPM – barenote@0.3.0

Package Exports

barenote

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (barenote) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Barenote is a simple footnote library developed in JavaScript.

Usage

First of all, prepare the environment according to your usage. How to prepare is described below.

After the preparation, what you have to do is just insert a tag whose class name is barenote to make a footnote as follows.

This is the simplest sample<sup><span class='barenote'>Click me!</span></sup>.<br />
The number will be incremented automatically<sup><span class='barenote'>Like this</span></sup>.<br />

This is shown in browser as follows. When you hover the number, the floating note is shown.

Basic Preparation

If your page has only one Barenote, you can apply it to <body>.

Add barenote.min.js to your page.

<script src="https://kokufu.github.io/Barenote/dist/barenote.min.js"></script>

Apply Barenote to body element.
as follows.

<script type='text/javascript'>
  document.addEventListener("DOMContentLoaded", function(event) {
    const body = document.querySelector('body');
    new Barenote(body);
  });
</script>

Place barenote_ref_list where you want to show the list.
```
<div class='barenote_ref_list'></div>
```

Multi-articles Preparation

If your page has tow or more articles which have footnotes, you can apply it to each article as follows.

Add barenote.min.js to your page.

<script src="https://kokufu.github.io/Barenote/dist/barenote.min.js"></script>

Apply Barenote to each element as follows.

<script type='text/javascript'>
 document.addEventListener("DOMContentLoaded", function(event) {
   for (post_body of document.querySelectorAll('.post-body')) {
     new Barenote(post_body);
   }
 });
</script>

Place barenote_ref_list within the each element where you want to show the list.

<div class=".post-body">
  ...
  <div class='barenote_ref_list'></div>
</div>
<div class=".post-body">
  ...
  <div class='barenote_ref_list'></div>
</div>

Examples

sample01 The simplest sample. There is only one Barenote.
sample02 There are more than two Barenote in a page.
sample03 Another pattern of that there are more than two Barenote in a page.
sample04 How to modify the floating note display.

Build

git clone https://github.com/kokufu/Barenote
cd Barenote
npm install
npm run build

Then barenote.min.js is made in dist dir.