Adds support for StackExchange sites

zenorocha · Apr 16, 2017 · 3f6adff · 3f6adff
1 parent c888f1d
commit 3f6adff
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 9 deletions.
diff --git a/dist/manifest.json b/dist/manifest.json
@@ -18,6 +18,17 @@
   "content_scripts": [{
     "css": ["styles/main.css"],
     "js": ["scripts/main.js"],
-    "matches": ["https://github.com/*"]
+    "matches": [
+      "https://github.com/*",
+      "http://stackexchange.com/*",
+      "https://stackexchange.com/*",
+      "http://*.stackexchange.com/*",
+      "https://*.stackexchange.com/*",
+      "https://serverfault.com/*",
+      "https://superuser.com/*",
+      "https://askubuntu.com/*",
+      "http://stackoverflow.com/*",
+      "https://stackoverflow.com/*"
+    ]
   }]
 }
diff --git a/dist/scripts/main.js b/dist/scripts/main.js
@@ -784,6 +784,10 @@ var snippets = document.querySelectorAll('pre');
   parent.replaceChild(wrapper, snippet);
   wrapper.appendChild(snippet);
 
+  if (document.location.hostname === 'github.com') {
+    wrapper.classList.add('codecopy-github');
+  }
+
   wrapper.classList.add('codecopy');
   wrapper.firstChild.insertAdjacentHTML('beforebegin', '<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>');
 });

diff --git a/dist/styles/main.css b/dist/styles/main.css
@@ -467,17 +467,27 @@
     .codecopy .BtnGroup-form:hover + .BtnGroup-form .BtnGroup-item {
       border-left-width: 0; }
   .codecopy .codecopy-btn {
+    box-shadow: none;
+    min-height: initial;
     transition: opacity 0.3s ease-in-out;
     opacity: 0;
-    padding: 3px 6px;
     position: absolute;
-    right: 5px;
-    top: 5px; }
+    padding: 2px 6px;
+    right: 0;
+    top: 0; }
     .codecopy .codecopy-btn .codecopy-btn-icon {
       margin-top: -3px;
       position: relative;
-      top: 3px; }
-    .codecopy .codecopy-btn:focus {
+      top: 3px;
+      padding: 0;
+      vertical-align: initial;
+      min-height: initial; }
+    .codecopy .codecopy-btn:hover, .codecopy .codecopy-btn:focus {
       box-shadow: none; }
   .codecopy:hover .codecopy-btn {
     opacity: 1; }
+
+.codecopy.codecopy-github .codecopy-btn {
+  padding: 3px 6px;
+  right: 5px;
+  top: 5px; }
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -9,6 +9,10 @@ let snippets = document.querySelectorAll('pre');
   parent.replaceChild(wrapper, snippet);
   wrapper.appendChild(snippet);
 
+  if (document.location.hostname === 'github.com') {
+    wrapper.classList.add('codecopy-github');
+  }
+
   wrapper.classList.add('codecopy');
   wrapper.firstChild.insertAdjacentHTML('beforebegin', '<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>');
 });

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -9,20 +9,28 @@
     @extend .btn;
     @extend .btn-sm;
 
+    box-shadow: none;
+    min-height: initial;
+
     transition: opacity 0.3s ease-in-out;
     opacity: 0;
 
-    padding: 3px 6px;
     position: absolute;
-    right: 5px;
-    top: 5px;
+    padding: 2px 6px;
+    right: 0;
+    top: 0;
 
     .codecopy-btn-icon {
       margin-top: -3px;
       position: relative;
       top: 3px;
+
+      padding: 0;
+      vertical-align: initial;
+      min-height: initial;
     }
 
+    &:hover,
     &:focus {
       box-shadow: none;
     }
@@ -32,3 +40,9 @@
     opacity: 1;
   }
 }
+
+.codecopy.codecopy-github .codecopy-btn {
+  padding: 3px 6px;
+  right: 5px;
+  top: 5px;
+}