Citation.js Form

Table of Contents

• Use
  • jQueryCite
  • HTML templates
    • Input form
    • Input form fields
    • Output form
• Dependencies
• Demo

This plugin builds a form for input for the Cite object.

Use

After including the necessary files like below, you can make a new jQueryCite object.

<script type="text/javascript" src="https://github.com/larsgw/citation.js-form/raw/master/path/to/jquery.js"></script>
<script type="text/javascript" src="https://github.com/larsgw/citation.js-form/raw/master/path/to/citeproc.js"></script>
<script type="text/javascript" src="https://github.com/larsgw/citation.js-form/raw/master/path/to/citation-0.2.js"></script>
<script type="text/javascript" src="https://github.com/larsgw/citation.js-form/raw/master/path/to/jquery.citation-0.2.js"></script>

jQueryCite

Make a new jQueryCite object like this:

var example = new jQueryCite( <options> )

The options are:

1. defaultOptions: Options to be passed to Cite
2. saveInCookies: Save data in cookies when .save()d
3. add: Callback to execute when data is submitted to collection
4. inputForm and outputForm: HTML template (see docs)

HTML templates

Of course, you can include all sorts of things in the templates, but the following things are going to get used. Templates below are in Jade/Pug. Elements may be wrapped in containers, but the general hierarchy should be like this

Input form

.cjs-in
  .cjs-piece.cjs-input
    // List of fieldsets, see below
  .cjs-piece.cjs-import
    .cjs-import-name // Text input to hold input value names
    .cjs-import-file // File input
  .cjs-piece.cjs-preview
    .cjs-draft // Element holding draft
    .cjs-add // Submit (and clear) draft
    .cjs-delete // Clear draft

Input form fields

Form fields consist of a fieldset element and inside an input element, with the following attributes:

• fieldset
  • data-cjs-field-type: For what publication types should this field be visible (omit when it should always be visible)
  • data-cjs-field-state: "hidden", omitted or "visible". Assigned by program
• input
  • data-cjs-field: Name of the corresponding CSL property. When CSL properties are complex, jQueryCite usually helps out
  • type: Usually "text", but depends on CSL property. If it gives input to jQuery in the correct format, it's okay

Exceptions:

• The field or the page property should have two inputs
• Fields author, container-author, editor and publisher-title get .CJSMultipleInput(), so multiple inputs aren't necessary, as they're added dynamically
• One of the fields, preferably the first one, should be a select (data-cjs-field="type"), containing publication type options

Output form

.cjs-out
  .cjs-piece.cjs-settings
    .cjs-opt
      fieldset
        select.cjs-type // HTML text or plain text
          option(value="html")
          option(value="string")
      fieldset
        select.cjs-style // Formatting style
          option(value="citation.apa")
          option(value="citation.vancouver")
          option(value="citation.harvard1")
          // Formatted citations can be expanded, if correct material is provided to Cite
          option(value="bibtex")
          option(value="csl")
      fieldset
        select.cjs-lan // Output language
          option(value="en-US")
          option(value="es-ES")
          option(value="du-DU")
          option(value="fr-FR")
          option(value="nl-NL")
          // Langs can be expanded, if correct material is provided to Cite
  .cjs-piece
    .cjs-output // Holds data
  .cjs-piece.cjs-export
    .cjs-export-copy // Copy data on click
    .cjs-export-save // Download data on click

Dependencies

• jQuery
• Citation.js

Demo

• Demo