Add location support flags.

Closes #68

app/components/base-target/index.js

@@ -9,6 +9,13 @@ import autobind from "autobind-decorator"
 import BaseComponent from "components/base-component"
 import Clipboard from "clipboard"
 
+function getLocation(targetUsesHead, storeUsesHead) {
+  // Respect target specific falsey values.
+  const insertInHead = typeof targetUsesHead !== "undefined" ? targetUsesHead : storeUsesHead
+
+  return insertInHead ? "head" : "body"
+}
+
 export default class BaseTarget extends BaseComponent {
   static template = template;
   static titleTemplate = titleTemplate;
@@ -38,14 +45,19 @@ export default class BaseTarget extends BaseComponent {
 
   static isConstructable(config, store) {
     const supportsPlugin = this.supports.plugin
+    const supportsLocation = this.supports.insertInto
     const hasLocalEmbed = !!config.embedCode
     const hasGlobalEmbed = !!store.embedCode
     const embedCodePresent = hasLocalEmbed || hasGlobalEmbed
     const hasPluginURL = !!config.pluginURL
+    const location = getLocation(config.insertInHead, store.insertInHead)
 
-    if (supportsPlugin) return hasPluginURL || embedCodePresent
+    const locationIsValid = location === "head" && supportsLocation.head ||
+      location === "body" && supportsLocation.body
 
-    return hasPluginURL && hasLocalEmbed || !hasPluginURL && embedCodePresent
+    if (supportsPlugin) return hasPluginURL || locationIsValid && embedCodePresent
+
+    return locationIsValid && embedCodePresent
   }
 
   constructor(spec = {}) {
@@ -88,13 +100,7 @@ export default class BaseTarget extends BaseComponent {
   }
 
   get location() {
-    const targetUsesHead = this.config.insertInHead
-    const storeUsesHead = this.store.insertInHead
-
-    // Respect target specific falsey values.
-    const insertInHead = typeof targetUsesHead !== "undefined" ? targetUsesHead : storeUsesHead
-
-    return insertInHead ? "head" : "body"
+    return getLocation(this.config.insertInHead, this.store.insertInHead)
   }
 
   get icon() {

app/site/documentation.pug

@@ -90,6 +90,8 @@ table#target-supports
       th.id ID
       th.embed-code <code>embedCode</code>
       th.plugin-url <code>pluginUrl</code>
+      th.insert-head <code>insertInto.head</code>
+      th.insert-body <code>insertInto.body</code>
   tbody
 
 +anchored("h5", "autoDownload")

app/site/lib/render-support-table.js

@@ -1,22 +1,31 @@
+const booleanToLabel = boolean => ({
+  label: boolean ? "✓" : "✗",
+  supported: !!boolean
+})
+
 function targetToRow({supports}) {
-  const {embedCode, plugin} = supports
-  const yes = "Yes"
-  const no = "No"
+  const {embedCode, plugin, insertInto = {}} = supports
 
   return [
-    embedCode ? yes : no,
-    plugin ? yes : no
-  ]
+    embedCode,
+    plugin,
+    insertInto.head,
+    insertInto.body
+  ].map(booleanToLabel)
+}
+
+function rowTemplate(html, {label, supported = ""}) {
+  return `${html}<td data-supported="${supported}">${label}</td>`
 }
 
 export default function renderSupportTable(EmbedBox) {
   const tableBody = document.querySelector("#target-supports tbody")
 
   EmbedBox.fetchedTargets.forEach(Target => {
     const row = document.createElement("tr")
-    const cells = [`<code>${Target.id}</code>`].concat(targetToRow(Target))
+    const cells = [{label: `<code>${Target.id}</code>`}].concat(targetToRow(Target))
 
-    row.innerHTML = cells.reduce((html, cell) => `${html}<td>${cell}</td>`, "")
+    row.innerHTML = cells.reduce(rowTemplate, "")
 
     tableBody.appendChild(row)
   })

app/site/site.styl

@@ -198,6 +198,12 @@ html
     th.id
       width 20%
 
+    td[data-supported="false"]
+      color lightRed
+
+    td[data-supported="true"]
+      color lightGreen
+
     tbody tr:nth-child(odd)
       background-color rgba(#fff, .05)
 

app/styl/colors.styl

@@ -13,4 +13,8 @@ warnColor = #713b1b
 
 brandBlue = #2d88f3
 brandYellow = #e6db74
+
 errorRed = #c62838
+lightRed = hsl(0,100%,72%)
+
+lightGreen = hsl(100,100%,88%)

app/targets/drupal/index.js

@@ -8,7 +8,7 @@ export default class DrupalTarget extends BaseTarget {
   static icon = icon;
   static id = "drupal";
   static label = "Drupal";
-  static supports = {embedCode: true, plugin: true};
+  static supports = {embedCode: true, plugin: true, insertInto: {body: true}};
   static versions = [
     drupal8,
     drupal7

app/targets/generic/index.js

@@ -5,7 +5,7 @@ import BaseTarget from "components/base-target"
 export default class GenericTarget extends BaseTarget {
   static id = "generic";
   static label = "Any other site";
-  static supports = {embedCode: true};
+  static supports = {embedCode: true, insertInto: {head: true, body: true}};
   static versions = [genericLatest];
 
   get modalTitle() {

app/targets/joomla/index.js

@@ -7,6 +7,6 @@ export default class JoomlaTarget extends BaseTarget {
   static icon = icon;
   static id = "joomla";
   static label = "Joomla";
-  static supports = {embedCode: true, plugin: true};
+  static supports = {embedCode: true, plugin: true, insertInto: {head: true, body: true}};
   static versions = [{id: "3.6.x", template: joomla3_6_x}];
 }

app/targets/shopify/index.js

@@ -7,6 +7,6 @@ export default class ShopifyTarget extends BaseTarget {
   static icon = icon;
   static id = "shopify";
   static label = "Shopify";
-  static supports = {embedCode: true};
+  static supports = {embedCode: true, insertInto: {head: true, body: true}};
   static versions = [shopifyLatest];
 }

app/targets/squarespace/index.js

@@ -7,6 +7,6 @@ export default class SquarespaceTarget extends BaseTarget {
   static icon = icon;
   static id = "squarespace";
   static label = "Squarespace";
-  static supports = {embedCode: true};
+  static supports = {embedCode: true, insertInto: {head: true, body: true}};
   static versions = [squarespaceLatest];
 }

app/targets/tumblr/index.js

@@ -7,6 +7,6 @@ export default class TumblrTarget extends BaseTarget {
   static icon = icon;
   static id = "tumblr";
   static label = "Tumblr";
-  static supports = {embedCode: true};
+  static supports = {embedCode: true, insertInto: {head: true, body: true}};
   static versions = [tumblrLatest];
 }

app/targets/weebly/index.js

@@ -7,6 +7,6 @@ export default class WeeblyTarget extends BaseTarget {
   static icon = icon;
   static id = "weebly";
   static label = "Weebly";
-  static supports = {embedCode: true};
+  static supports = {embedCode: true, insertInto: {head: true, body: true}};
   static versions = [{id: "Latest", template: weeblyLatest}];
 }

app/targets/wordpress/index.js

@@ -7,6 +7,6 @@ export default class WordPressTarget extends BaseTarget {
   static icon = icon;
   static id = "wordpress";
   static label = "WordPress";
-  static supports = {embedCode: true, plugin: true};
+  static supports = {embedCode: true, plugin: true, insertInto: {head: true, body: true}};
   static versions = [{id: "4.x", template: wordpress4}];
 }

docs/new-targets.md

@@ -42,7 +42,7 @@ export default class WordPressTarget extends BaseTarget {
   static icon = icon;
   static id = "wordpress";
   static label = "WordPress";
-  static supports = {embedCode: true, plugin: true};
+  static supports = {embedCode: true, plugin: true, insertInto: {head: true, body: true}};
   static versions = [{id: "4.x", template: wordpress4}];
 }
 ```