Citation Plugin v1.0.0 (#2)

* Citation working in browser via console.log * Now outputs to results * Cleaned up the code and added some comments. * commented out some html, and changed pad to cite * Changed style on label and changed output to textarea * Changed manifest.json file to reflect the project and use a new icon * some changes * Allows for entering a url into the text box * Modified textarea to be disabled and not resizable * Modified textarea to be disabled and not resizable * Added Citation Format Dropdown * Moved citation style above citation text * Update citation core to 1.0.1 * Added eslinter and corrected the code formatting * Removed a line from the ignore that was copied and not used * Change comments to better describe what is going on. * Added Readme * Cleaned up the look of the plugin * "Changes for pr" * Updated stylesheet * Changes for the PR * Change to the description * Added EOF and fixed the issues with the readme
mozillascience · Feb 21, 2017 · 864ada7 · 864ada7
1 parent 7670f1b
commit 864ada7
Show file tree

Hide file tree

Showing 11 changed files with 270 additions and 0 deletions.
diff --git a/Plugin/.eslintignore b/Plugin/.eslintignore
@@ -0,0 +1,4 @@
+/node_modules/*
+**/*.md
+**/*.json
+**/*.conf
diff --git a/Plugin/.eslintrc.json b/Plugin/.eslintrc.json
@@ -0,0 +1,17 @@
+{
+    "extends": "airbnb-base",
+    "plugins": [
+        "import"
+    ],
+    "rules": {
+        "max-len": "off",
+        "brace-style": ["error", "stroustrup"],
+        "no-unused-vars": ["error", { "args": "none" }],
+        "no-underscore-dangle": ["error", { "allowAfterThis": true }]
+    },
+    "env": {
+        "browser": true,
+        "node": true,
+        "webextensions": true
+    }
+}
diff --git a/Plugin/citation-plugin.html b/Plugin/citation-plugin.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body class="panel">
+        <form id="citation-form">
+                <table>
+                  <tr>
+                    <td><label for="citation-URL">Search URL</label></td>
+                    <td><input class="panel-formElements-item" type="text" id="citation-URL"></td>
+                  </tr>
+
+                  <tr>
+                    <td><label for="citationFormats">Citation Format</label></td>
+                    <td><select class="panel-formElements-item" id="citationFormats"></select></td>
+                  </tr>
+
+                  <tr>
+                    <td><label for="result">Result:</label></td>
+                    <td><textArea class="outputTextArea" id="result"></textArea></td>
+                </tr>
+              <table>
+
+            <footer class="panel-section panel-section-footer">
+                <button type="submit" class="panel-section-footer-button default">Cite!</button>
+                <div class="panel-section-footer-separator selectable"></div>
+            </footer>
+        </form>
+        <script src="index.js"></script>
+    </body>
+</html>
diff --git a/Plugin/citation-plugin.js b/Plugin/citation-plugin.js
@@ -0,0 +1,63 @@
+const CitationCore = require('citation-core');
+
+const resultNode = document.getElementById('result');
+const citationFormatsNode = document.getElementById('citationFormats');
+const textNode = document.getElementById('citation-URL');
+
+/**
+ * Generates the citation based on the link that is passed in from tab info.
+ * @param  {String} tabInfo - The url passed in as a string
+ * @return {String} citationStr The citation is returned as a string
+ */
+function citationGeneration(tabInfo) {
+  const formatOptions = new CitationCore.FormatOptions();
+  const selectedStyleIndex = citationFormatsNode.selectedIndex;
+  const selectedStyle = citationFormatsNode.options[selectedStyleIndex].value;
+
+  formatOptions.url = tabInfo;
+  formatOptions.style = CitationCore.styles[selectedStyle];
+  CitationCore.generate(formatOptions, (citationStr, errors) => {
+    // Handle completion of citation generation
+    resultNode.value = citationStr;
+  });
+}
+
+/**
+ * A helper to get the url from the tab info if there is no user entered url.
+ * @param  {List} browserURL - Contains a list of objects that hold the tab information.
+ */
+function generationHelper(browserURL) {
+  citationGeneration(browserURL[0].url);
+}
+
+/**
+ * Error handler
+ * @param  {Error[]} error - The error if there is one that occurs during operation.
+ */
+function onError(error) {
+  throw new Error(`Error: ${error}`);
+}
+
+/**
+ * Get the current tabs url, then send it via a promise to citation generation.
+ * @param  {string} On click of the cite button return the correct citation.
+ * @return {string} The string representation of the citation
+ */
+document.getElementById('citation-form').addEventListener('submit', (e) => {
+  e.preventDefault();
+  if (textNode.value === '') {
+    const gettingCurrent = browser.tabs.query({ active: true });
+    gettingCurrent.then(generationHelper).catch(onError);
+  }
+  else {
+    citationGeneration(textNode.value);
+  }
+}, false);
+
+const styles = Object.keys(CitationCore.styles);
+styles.forEach((style) => {
+  const newElement = document.createElement('option');
+  newElement.innerHTML = style;
+  newElement.value = style;
+  citationFormatsNode.appendChild(newElement);
+});
diff --git a/Plugin/icons/cite-placeholder-32.png b/Plugin/icons/cite-placeholder-32.png
diff --git a/Plugin/icons/placeholder-32.png b/Plugin/icons/placeholder-32.png
diff --git a/Plugin/manifest.json b/Plugin/manifest.json
@@ -0,0 +1,19 @@
+{
+    "manifest_version": 2,
+    "name": "Software Citation Tools Plugin",
+    "version": "1.0.0",
+    "description": "A browser based tool for generating citations",
+    "icons": {
+        "32": "icons/cite-placeholder-32.png"
+    },
+    "browser_action": {
+        "default_icon": "icons/cite-placeholder-32.png",
+        "default_title": "Cite This",
+        "default_popup": "citation-plugin.html",
+        "browser_style": true
+    },
+    "permissions": [
+        "*://developer.mozilla.org/*",
+        "tabs"
+    ]
+}
diff --git a/Plugin/package.json b/Plugin/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "citation-plugin",
+  "version": "1.0.0",
+  "description": "A browser based tool for generating citations",
+  "main": "citation-plugin.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "install": "./node_modules/browserify/bin/cmd.js citation-plugin.js -o index.js",
+    "build": "./node_modules/browserify/bin/cmd.js citation-plugin.js -o index.js"
+
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mozillascience/citation-plugin.git"
+  },
+  "keywords": [
+    "citation"
+  ],
+  "author": ["Eric Lee <[email protected]>", "Robert Lowe <[email protected]>", "Colin O'Neill <[email protected]>", "Samuel Mosher <[email protected]>", "mozillafoundation"],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mozillascience/citation-plugin/issues"
+  },
+  "homepage": "https://github.com/mozillascience/citation-plugin#readme",
+  "dependencies": {
+    "citation-core": "1.0.1"
+  },
+  "devDependencies": {
+    "browserify": "^14.0.0",
+    "eslint": "^3.13.1",
+    "eslint-config-airbnb-base": "^11.0.1",
+    "eslint-plugin-import": "^2.2.0"
+  }
+}
diff --git a/Plugin/style.css b/Plugin/style.css
@@ -0,0 +1,55 @@
+/*
+ * These styles extend the styles from browser_styles, see https://firefoxux.github.io/StyleGuide.
+ */
+
+/* For some reason the footer creates a horizontal overflow */
+body {
+    overflow-x: hidden;
+}
+
+.panel-formElements-item output,
+.panel-formElements-item input[type="number"] {
+    flex-grow: 1;
+}
+
+.panel-formElements-item{
+    width:100%;
+}
+
+.outputTextArea {
+    height:160px;
+    width:350px;
+    resize:none;
+}
+
+input[type="number"] {
+    background-color: #ffffff;
+    border: 1px solid #b1b1b1;
+    box-shadow: 0 0 0 0 #61b5ff;
+    font: caption;
+    padding: 0 6px 0;
+    transition-duration: 250ms;
+    transition-property: box-shadow;
+    height: 24px;
+}
+
+input[type="number"]:hover {
+    border-color: #858585;
+}
+
+input[type="number"]:focus {
+    border-color: #0996f8;
+    box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
+}
+.result{
+    -moz-user-select: text;
+    -khtml-user-select: text;
+    -webkit-user-select: text;
+    -o-user-select: text;
+}
+
+/* Reset the default styles for buttons if it's a footer button */
+button.panel-section-footer-button {
+    background-color: #28A75F;
+    padding: 12px;
+}
diff --git a/README.md b/README.md
@@ -1 +1,19 @@
 # citation-plugin
+
+citation-plugin is a firefox plugin which presents the [CitationCore](https://github.com/mozillascience/CitationCore) library in a user friendly way in browswer. It is part of a larger effort, lead by Mozilla Science Lab, to develop a suite of tools that aim to implement a standard for citing software and making it easier to cite software correctly.  To learn more about this project you can visit the [Software Citation Tools repository](https://github.com/mozillascience/software-citation-tools).
+
+## Install
+To install:
+```
+cd Plugin
+npm install 
+```
+
+Once the install script finishes, navigate to [about:debugging#addons](about:debugging#addons). Once there, select "Load Temporary Add-on", navigate to the Plugin directory and select the manifest.json and click load
+## Contributor Install
+If you are interested in contributing to citation-plugin please follow these install instructions. They will add a pre-commit hook that will run our linter and reject commits that do not meet the project's coding standards.  We are adhereing to the [AirBnb style guide](https://github.com/airbnb/javascript). 
+```
+git clone https://github.com/mozillascience/citation-plugin.git
+cd Plugin
+cp dev/pre-commit .git/hooks/
+```
diff --git a/dev/pre-commit b/dev/pre-commit
@@ -0,0 +1,27 @@
+#!/bin/bash
+echo "Precommit running"
+esLintPath="Plugin/node_modules/eslint/bin/eslint.js"
+esLintConfig="Plugin/.eslintrc.json"
+
+files=$(git diff --cached --name-only | grep "\.js$")
+
+echo "Running ESLint on JS files:"
+
+passing=true
+for file in ${files}; do
+  output="$($esLintPath --fix ${file})"
+
+  echo "$output"
+  check="$(echo "$output" | grep "0 errors")"
+  if [ "$check" == "" ] && [ "$output" != "" ]; then
+    passing=false
+  fi
+done
+
+if $passing; then
+  echo "Linter sucessfully passed. Commiting..."
+  exit 0
+else
+  echo "Linter failed. Please correct errors. Aborting commit..."
+  exit 1
+fi