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

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

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

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/citeproc.js"></script>
<script type="text/javascript" src="path/to/citation-0.2.js"></script>
<script type="text/javascript" src="path/to/jquery.citation-0.2.js"></script>

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)

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

.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

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

.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

• jQuery
• Citation.js

• Demo