Adds support for multiple styles

zenorocha · May 9, 2017 · 99c7673 · 99c7673
1 parent 39e991f
commit 99c7673
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 14 deletions.
diff --git a/src/data/styles.json b/src/data/styles.json
@@ -0,0 +1,23 @@
+{
+  "small": [
+    "askubuntu.com",
+    "serverfault.com",
+    "stackexchange.com",
+    "stackoverflow.com",
+    "superuser.com"
+  ],
+  "large": [
+    "github.com",
+    "gist.github.com",
+    "medium.com",
+    "www.npmjs.com",
+    "developer.mozilla.org",
+    "tableless.com.br",
+    "laracasts.com",
+    "docs.rs",
+    "www.digitalocean.com"
+  ],
+  "xlarge": [
+    "nodejs.org"
+  ]
+}
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -1,5 +1,9 @@
 import Clipboard from 'clipboard';
-import {htmlButton, isLargeButton} from './util';
+import {htmlButton, getSiteStyle} from './util';
+
+// Get button style based on the current page
+
+const siteStyle = getSiteStyle();
 
 // Scan for code snippets and append buttons
 
@@ -12,12 +16,8 @@ snippets.forEach((snippet) => {
   parent.replaceChild(wrapper, snippet);
   wrapper.appendChild(snippet);
 
-  wrapper.classList.add('codecopy');
+  wrapper.classList.add('codecopy', `codecopy-${siteStyle}`);
   wrapper.firstChild.insertAdjacentHTML('beforebegin', htmlButton);
-
-  if (isLargeButton()) {
-    wrapper.classList.add('codecopy-lg');
-  }
 });
 
 // Add copy to clipboard functionality and user feedback

diff --git a/src/scripts/util.js b/src/scripts/util.js
@@ -1,11 +1,20 @@
+import styles from '../data/styles';
+
 export const htmlButton = `
   <button class="codecopy-btn tooltipped tooltipped-s" aria-label="Copy to clipboard">
     <svg height="16" class="codecopy-btn-icon" viewBox="0 0 14 16" version="1.1" width="16" aria-hidden="true">
       <path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path>
     </svg>
   </button>`;
 
-export const isLargeButton = () => {
-  const sites = /^(github.com|gist.github.com|medium.com|www.npmjs.com|developer.mozilla.org|tableless.com.br|laracasts.com|docs.rs|www.digitalocean.com)$/;
-  return sites.exec(document.location.hostname);
-}
+export function getSiteStyle() {
+  var currentStyle;
+
+  Object.keys(styles).forEach((style) => {
+    if (styles[style].indexOf(document.location.hostname) !== -1) {
+      currentStyle = style;
+    }
+  });
+
+  return currentStyle || 'small';
+};
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -16,9 +16,6 @@
     opacity: 0;
 
     position: absolute;
-    padding: 2px 6px;
-    right: 0;
-    top: 0;
     z-index: 1;
 
     .codecopy-btn-icon {
@@ -42,8 +39,20 @@
   }
 }
 
-.codecopy.codecopy-lg .codecopy-btn {
+.codecopy.codecopy-small .codecopy-btn {
+  padding: 2px 6px;
+  right: 0;
+  top: 0;
+}
+
+.codecopy.codecopy-large .codecopy-btn {
   padding: 3px 6px;
   right: 5px;
   top: 5px;
 }
+
+.codecopy.codecopy-xlarge .codecopy-btn {
+  padding: 3px 6px;
+  right: 30px;
+  top: 10px;
+}