Merge remote-tracking branch 'origin/master' into ParseData

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 .vscode/
+dist/

README.md

@@ -1,30 +1,29 @@
-# Skohub-extension
+# SkoHub WebExtension
 
-Webextension to send page data to the skohub-editor
+WebExtension to send page data to the skohub-editor
 
-## Instructions for install
+## Instructions for installing
 
-### Add to Chrome
-
-In `Extensions`, click `load unpacked`, open the directory `skohub-extension/src`.
+```
+$ git clone https://github.com/hbz/skohub-extension.git
+$ cd skohub-extension
+$ npm install
+```
 
-### Add to firefox
+### Add to Chrome
 
-Go to `Add-ons` in `Tools for Add-ons` click `Debug Add-ons` and load a new temporary add-on selecting the manifes in `skohub-extension/src`.
+In `Extensions`, enable Developer mode, click `load unpacked` and open the directory `skohub-extension/src`.
 
-### Lunch with a temporal Firefox Profile
+### Add to Firefox
 
-```
-npm run start:firefox
-```
+Go to `Add-ons` in `Tools for Add-ons` click `Debug Add-ons` and load a new temporary add-on selecting the manifest in `skohub-extension/src`. Alternatively, you can directly launch Firefox with a temporary profile by running `npm run start:firefox`
 
 ## Usage
 
-After installing the extension click the new extension icon on any webpage, this will open a new tab to Skohub-editor with the extracted content of the page.
+After installing the extension click the new extension icon on any webpage, this will open a new tab to SkoHub Editor with the extracted content of the page.
 
 ## Test
 
 ```
-npm install // Only the first time
-npm run test
+$ npm run test
 ```

package.json

@@ -7,7 +7,8 @@
     "test": "npm run lint:js && npm run lint:extension",
     "lint:js": "eslint .",
     "lint:extension": "web-ext lint -s ./src",
-    "start:firefox": "web-ext run -s ./src"
+    "start:firefox": "web-ext run -s ./src",
+    "build": "web-ext build -s ./src -a dist"
   },
   "keywords": [],
   "author": "",

src/manifest.json

@@ -26,7 +26,11 @@
     "scripts": ["background.js"]
   },
 
-  "web_accessible_resources": ["src/page.js"],
+  "web_accessible_resources": [
+    "src/page.js",
+    "icons/chevron-right.svg",
+    "icons/chevron-left.svg"
+  ],
 
   "permissions": [
     "activeTab"

src/page.js

@@ -1,36 +1,114 @@
-const EDITOR_URL = 'https://test.skohub.io/editor/'
-const SCHEMA_URL = 'https://raw.githubusercontent.com/literarymachine/oer-metadata-schemas/generic-OER/oer.json'
 
-const url = new URL(EDITOR_URL)
-url.searchParams.set('schema', SCHEMA_URL)
+/* global chrome */
+var attach = () => {
+  const EDITOR_URL = 'https://test.skohub.io/editor/'
+  const SCHEMA_URL = 'https://raw.githubusercontent.com/literarymachine/oer-metadata-schemas/generic-OER/oer.json'
 
-const getMetaTag = (attribute, value) => {
-  return (document.querySelector(`meta[${attribute}="${value}"]`) && document.querySelector(`meta[${attribute}="${value}"]`).content) || null
-}
+  const url = new URL(EDITOR_URL)
+  url.searchParams.set('schema', SCHEMA_URL)
+
+  const getMetaTag = (attribute, value) => {
+    return (document.querySelector(`meta[${attribute}="${value}"]`) && document.querySelector(`meta[${attribute}="${value}"]`).content) || null
+  }
 
-const pageGetData = () => {
-  return {
-    name: getMetaTag('property', 'og:title') ||
+  const pageGetData = () => {
+    return {
+      name: getMetaTag('property', 'og:title') ||
       getMetaTag('name', 'twitter:title') ||
       document.title,
-    id: getMetaTag('property', 'og:url') || window.location.href,
-    description: getMetaTag('name', 'description') ||
+      id: getMetaTag('property', 'og:url') || window.location.href,
+      description: getMetaTag('name', 'description') ||
       getMetaTag('property', 'og:description') ||
       getMetaTag('name', 'twitter:description'),
-    keywords: getMetaTag('name', 'keywords'),
-    author: getMetaTag('name', 'author'),
-    image: getMetaTag('property', 'og:image') ||
+      keywords: getMetaTag('name', 'keywords'),
+      author: getMetaTag('name', 'author'),
+      image: getMetaTag('property', 'og:image') ||
       getMetaTag('name', 'twitter:image'),
-    locale: getMetaTag('property', 'og:locale'),
-    type: getMetaTag('property', 'og:type') || 'CreativeWork'
+      locale: getMetaTag('property', 'og:locale'),
+      type: getMetaTag('property', 'og:type') || 'CreativeWork'
+    }
   }
-}
 
-const data = pageGetData()
-Object.entries(data)
-  .filter(([key, val]) => val !== null)
-  .forEach(([key, value]) => {
-    url.searchParams.set(key, encodeURIComponent(value))
+  const data = pageGetData()
+  Object.entries(data)
+    .filter(([key, val]) => val !== null)
+    .forEach(([key, value]) => {
+      url.searchParams.set(key, encodeURIComponent(value))
+    })
+
+  const styleContent = `
+    #SkoHubFrame {
+      position: fixed;
+      height: 100%;
+      width: 500px;
+      top: 0;
+      right: 0;
+      z-index: 2147483647;
+      box-shadow: 0px 3px 15px hsla(0, 0%, 0%, 0.2);
+      transition: transform 0.5s;
+      border: none;
+    }
+
+    #SkoHubCollapseBtn {
+      position: fixed;
+      top: 0;
+      right: 500px;
+      width: 40px;
+      height: 40px;
+      background-size: contain;
+      background-image: url(${chrome.runtime.getURL('icons/chevron-right.svg')});
+      background-color: hsl(154, 68%, 47%);
+      z-index: 2147483647;
+      border: none;
+      border-radius: 0 0 0 14px;
+      transition: transform 0.5s;
+    }
+
+    #SkoHubCollapseBtn.collapsed {
+      transition: transform 0.5s;
+      transform: translateX(500px);
+      background-image: url(${chrome.runtime.getURL('icons/chevron-left.svg')});
+    }
+
+    #SkoHubFrame.collapsed {
+      transition: transform 0.5s;
+      transform: translateX(500px);
+    }
+  `
+
+  const SkoHubCollapseBtn = document.createElement('button')
+  SkoHubCollapseBtn.id = 'SkoHubCollapseBtn'
+  SkoHubCollapseBtn.title = 'Collapse'
+  SkoHubCollapseBtn.addEventListener('click', () => {
+    const iframe = document.getElementById('SkoHubFrame')
+    if (iframe.classList.contains('collapsed')) {
+      iframe.classList.remove('collapsed')
+      SkoHubCollapseBtn.classList.remove('collapsed')
+      SkoHubCollapseBtn.title = 'Collapse'
+    } else {
+      iframe.classList.add('collapsed')
+      SkoHubCollapseBtn.classList.add('collapsed')
+      SkoHubCollapseBtn.title = 'Expand'
+    }
   })
 
-window.open(url.href, '_blank')
+  const style = document.createElement('style')
+  style.innerHTML = styleContent
+
+  const iframe = document.createElement('iframe')
+  iframe.src = url
+  iframe.id = 'SkoHubFrame'
+
+  document.body.appendChild(style)
+  document.body.appendChild(iframe)
+  document.body.appendChild(SkoHubCollapseBtn)
+}
+
+var iframeExist = document.getElementById('SkoHubFrame')
+
+if (!iframeExist) {
+  attach()
+} else {
+  iframeExist.remove()
+  document.getElementById('SkoHubCollapseBtn').remove()
+}