33 |
34 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | /* global document, fetch */
2 |
3 | import 'whatwg-fetch'
4 | import { Cite, plugins } from '@citation-js/core'
5 |
6 | const CSL_BASE_URL = 'cdn.jsdelivr.net/gh/citation-style-language'
7 | const CONFIG = document.currentScript.dataset
8 |
9 | async function get (url) {
10 | return (await fetch(url)).text()
11 | }
12 |
13 | function getOpts (options, prefix) {
14 | return Object.keys(options).reduce((output, key) => {
15 | if (key.slice(0, prefix.length) === prefix) {
16 | let option = key.slice(prefix.length)
17 | option = option[0].toLowerCase() + option.slice(1)
18 | output[option] = options[key] === 'false' ? false : options[key]
19 | }
20 |
21 | return output
22 | }, {})
23 | }
24 |
25 | window.addEventListener('load', function () {
26 | const inputOptions = getOpts(CONFIG, 'input')
27 |
28 | const pluginConfig = getOpts(CONFIG, 'plugin')
29 | for (const plugin of plugins.list()) {
30 | const config = plugins.config.get(plugin)
31 | if (config) {
32 | Object.assign(config, getOpts(pluginConfig, plugin.slice(1)))
33 | }
34 | }
35 |
36 | const elements = document.getElementsByClassName('citation-js')
37 | Array.prototype.map.call(elements, async function (element) {
38 | const format = element.dataset.outputFormat || 'bibliography'
39 | const options = {
40 | ...getOpts(element.dataset, 'output'),
41 | format: 'html'
42 | }
43 |
44 | try {
45 | const csl = plugins.config.get('@csl')
46 | if (options.template && !csl.templates.has(options.template)) {
47 | csl.templates.add(options.template, await get(`https://${CSL_BASE_URL}/styles@master/${options.template}.csl`))
48 | }
49 | if (options.lang && !csl.locales.has(options.lang)) {
50 | csl.locales.add(options.lang, await get(`https://${CSL_BASE_URL}/locales@master/${options.lang}.csl`))
51 | }
52 | } catch (e) {
53 | console.error(e)
54 | }
55 |
56 | const data = await Cite.async(element.dataset.input || element, inputOptions)
57 | const output = data.format(format, options)
58 |
59 | // Only remove children after all other code has run, so that if there's an error
60 | // the DOM still has the 'fallback', whatever that is
61 | while (element.firstChild) {
62 | element.removeChild(element.firstChild)
63 | }
64 |
65 | element.insertAdjacentHTML('beforeend', output)
66 | })
67 | })
68 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # @citation-js/replacer
2 |
3 | Simple HTML API for [Citation.js](https://citation.js.org).
4 |
5 | ##### Table of Contents
6 |
7 | * [Get Started](#starting)
8 | * [Example](#starting.example)
9 | * [Use](#use)
10 | * [Element](#use.element)
11 | * [Output options](#use.output)
12 | * [Special options](#use.special)
13 |
14 | ## Get Started
15 |
16 | Create a bundle with the plugins you want to use with the [Bundle Tool](https://github.com/citation-js/bundle-tool) ([here](https://juniper-coat.glitch.me)).
17 |
18 | ## Use
19 |
20 | **citation.js-replacer** is a HTML API, so everything is done by adding HTML to your page.
21 |
22 | ## Element
23 |
24 | To add a reference, insert any element with the class `citation-js`. By default, the program will use the `textContent` of the element as input.
25 |
26 | ```html
27 |
Q21972834
28 | ```
29 |
30 | You can also use pass input with the `data-input` attribute.
31 |
32 | ```html
33 |
This text can now be ignored
34 | ```
35 |
36 | This is usefull, as you can put a fallback in the element, in case the API fails, JavaScript is blocked or the program doesn't work for another reason.
37 |
38 | ```html
39 |
42 | ```
43 |
44 | ## Output options
45 |
46 | You can specify output options too, with the `data-output-*` attribute. These are the same as the [Citation.js Output options](https://citation.js.org/api/tutorial-output_formats.html). `data-output-format` is reserved for the format name (`bibliography`, `citation`, `bibtex`). It automatically fetches templates and styles that are not built into Citation.js.
47 |
48 | ```html
49 |
52 | ```
53 |
54 | ## Special options
55 |
56 | [Input options](https://citation.js.org/api/tutorial-input_options.html) and [plugin configuration](https://citation.js.org/api/tutorial-plugins.html#config) can be set by `data-input-*` and `data-plugin-$PLUGIN-*` respectively.
57 |
58 | ### using
59 | 
60 |
--------------------------------------------------------------------------------