diff --git a/src/data/styles.json b/src/data/styles.json new file mode 100644 index 0000000..ee16c88 --- /dev/null +++ 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 index 3664738..309db3c 100644 --- 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 index f24f6dc..8d3d584 100644 --- a/src/scripts/util.js +++ b/src/scripts/util.js @@ -1,3 +1,5 @@ +import styles from '../data/styles'; + export const htmlButton = ` `; -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 index 09c4d60..ce445d4 100644 --- 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; +}