chore: update versions, better build phase

jukben · Aug 17, 2018 · 5b17e11 · 5b17e11
1 parent c5af6ae
commit 5b17e11
Show file tree

Hide file tree

Showing 31 changed files with 1,836 additions and 18,090 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/app/manifest.json b/app/manifest.json
@@ -2,24 +2,18 @@
   "name": "__MSG_appName__",
   "short_name": "__MSG_appShortName__",
   "description": "__MSG_appDescription__",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "manifest_version": 2,
   "default_locale": "en",
-  "web_accessible_resources": [
-    "sounds/*"
-  ],
+  "web_accessible_resources": ["sounds/*"],
   "icons": {
     "16": "images/icon-16.png",
     "128": "images/icon-128.png"
   },
   "background": {
-    "scripts": [
-      "scripts/background.js"
-    ]
+    "scripts": ["scripts/background.js"]
   },
-  "permissions": [
-    "storage"
-  ],
+  "permissions": ["storage"],
   "page_action": {
     "default_title": "__MSG_browserActionTitle__"
   },
@@ -30,16 +24,9 @@
   },
   "content_scripts": [
     {
-      "matches": [
-        "http://*/*",
-        "https://*/*"
-      ],
-      "css": [
-        "styles/contentscript.css"
-      ],
-      "js": [
-        "scripts/contentscript.js"
-      ],
+      "matches": ["http://*/*", "https://*/*"],
+      "css": ["styles/contentscript.css"],
+      "js": ["scripts/contentscript.js"],
       "run_at": "document_end",
       "all_frames": false
     }

diff --git a/app/scripts/Clappe/Clappe.js b/app/scripts/Clappe/Clappe.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import { observer } from 'mobx-react';
-import classNames from 'classnames';
-import { store } from './index';
-import { CLAP_LIMIT, CLAP_TYPE } from '../constants';
+import React from "react";
+import { observer } from "mobx-react";
+import classNames from "classnames";
+import { store } from "./index";
+import { CLAP_LIMIT, CLAP_TYPE } from "../constants";
 
 class ClappeContainer extends React.Component {
   isDisabled() {
@@ -22,11 +22,11 @@ class ClappeContainer extends React.Component {
       <div
         tabIndex={-1}
         role="button"
-        className={classNames('clappe__superClap', {
-          'clappe__superClap--disabled': this.isDisabled(),
-          'clappe__superClap--left': type === CLAP_TYPE.LEFT,
-          'clappe__superClap--footer': type === CLAP_TYPE.FOOTER,
-          'clappe__superClap--bar': type === CLAP_TYPE.BAR,
+        className={classNames("clappe__superClap", {
+          "clappe__superClap--disabled": this.isDisabled(),
+          "clappe__superClap--left": type === CLAP_TYPE.LEFT,
+          "clappe__superClap--footer": type === CLAP_TYPE.FOOTER,
+          "clappe__superClap--bar": type === CLAP_TYPE.BAR
         })}
         onClick={this.superClick}
       >

diff --git a/app/scripts/background.js b/app/scripts/background.js
@@ -1,13 +1,11 @@
-import 'chromereload/devonly'; // eslint-disable-line
-
-import { Howl } from 'howler';
+import { Howl } from "howler";
 import {
   CLAP_SOUND,
   CLAP_DEFAULT_SETTINGS,
   CLAP_SYNC_SETTINGS,
-  CLAP_LOCAL_SETTINGS,
-} from './constants';
-import { getNewSettings } from './helpers';
+  CLAP_LOCAL_SETTINGS
+} from "./constants";
+import { getNewSettings } from "./helpers";
 
 let settings = { ...CLAP_DEFAULT_SETTINGS };
 
@@ -24,12 +22,12 @@ chrome.storage.local.get(CLAP_LOCAL_SETTINGS, updateSettings);
 
 const playSound = type => {
   const defaultSounds = {
-    [CLAP_SOUND.NORMAL]: chrome.runtime.getURL('sounds/clap.mp3'),
-    [CLAP_SOUND.SUPER]: chrome.runtime.getURL('sounds/superClap.mp3'),
+    [CLAP_SOUND.NORMAL]: chrome.runtime.getURL("sounds/clap.mp3"),
+    [CLAP_SOUND.SUPER]: chrome.runtime.getURL("sounds/superClap.mp3")
   };
 
   new Howl({
-    src: settings[type] || defaultSounds[type],
+    src: settings[type] || defaultSounds[type]
   }).play();
 };
 

diff --git a/app/scripts/constants.js b/app/scripts/constants.js
@@ -1,26 +1,26 @@
 export const CLAP_LIMIT = 50;
-export const CLAP_CONTAINER_SELECTOR = 'js-actionMultirecommend';
-export const CLAP_BUTTON_SELECTOR = 'js-actionMultirecommendButton';
-export const CLAP_UNDO_BUTTON_SELECTOR = 'js-clapUndo';
-export const CLAP_COMMENTS_SELECTOR = 'js-actionMultirecommendButton';
+export const CLAP_CONTAINER_SELECTOR = "js-actionMultirecommend";
+export const CLAP_BUTTON_SELECTOR = "js-actionMultirecommendButton";
+export const CLAP_UNDO_BUTTON_SELECTOR = "js-clapUndo";
+export const CLAP_COMMENTS_SELECTOR = "js-actionMultirecommendButton";
 export const CLAP_TYPE = {
-  DISABLED: 'disabled',
-  LEFT: 'post_share_widget',
-  FOOTER: 'post_actions_footer',
-  BAR: 'post_actions_bar',
+  DISABLED: "disabled",
+  LEFT: "post_share_widget",
+  FOOTER: "post_actions_footer",
+  BAR: "post_actions_bar"
 };
 export const CLAP_SOUND = {
-  NORMAL: 'clap',
-  SUPER: 'superClap',
-};
-export const CLAP_DEFAULT_SETTINGS = {
-  ...CLAP_SYNC_SETTINGS,
-  ...CLAP_LOCAL_SETTINGS,
+  NORMAL: "clap",
+  SUPER: "superClap"
 };
 export const CLAP_SYNC_SETTINGS = {
-  sounds: true,
+  sounds: true
 };
 export const CLAP_LOCAL_SETTINGS = {
   clap: null,
-  superClap: null,
+  superClap: null
+};
+export const CLAP_DEFAULT_SETTINGS = {
+  ...CLAP_SYNC_SETTINGS,
+  ...CLAP_LOCAL_SETTINGS
 };
diff --git a/app/scripts/contentscript.js b/app/scripts/contentscript.js
@@ -1,22 +1,20 @@
-import 'chromereload/devonly'; // eslint-disable-line
-
-import Clappe from './Clappe';
+import Clappe from "./Clappe";
 
 const html = document.body.innerHTML;
 
 function isMedium() {
-  return /medium/.test(document.head.getAttribute('prefix'));
+  return /medium/.test(document.head.getAttribute("prefix"));
 }
 
 function isUserLogged() {
   const loggedRegex = /"isAuthenticated":([a-z]*)/;
-  return html.match(loggedRegex) && html.match(loggedRegex)[1] === 'true';
+  return html.match(loggedRegex) && html.match(loggedRegex)[1] === "true";
 }
 
 if (isMedium() && isUserLogged()) {
   console.info(
-    '%c 👏 Clappe installed!',
-    'border: 1px solid black; color: black'
+    "%c 👏 Clappe installed!",
+    "border: 1px solid black; color: black"
   );
   new Clappe(html).install();
 }
diff --git a/app/scripts/options.js b/app/scripts/options.js
@@ -1,14 +1,12 @@
-import 'chromereload/devonly'; // eslint-disable-line
-
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom";
 
 import {
   CLAP_DEFAULT_SETTINGS,
   CLAP_LOCAL_SETTINGS,
-  CLAP_SYNC_SETTINGS,
-} from './constants';
-import { getNewSettings } from './helpers';
+  CLAP_SYNC_SETTINGS
+} from "./constants";
+import { getNewSettings } from "./helpers";
 
 class File extends React.PureComponent {
   removeSound = () => this.props.removeSound(this.props.id);
@@ -64,7 +62,7 @@ class Options extends React.Component {
     const sounds = e.target.checked;
 
     chrome.storage.sync.set({
-      sounds,
+      sounds
     });
   };
 
@@ -74,14 +72,14 @@ class Options extends React.Component {
     reader.readAsDataURL(file);
     reader.onload = () => {
       chrome.storage.local.set({
-        [placeholder]: reader.result,
+        [placeholder]: reader.result
       });
     };
   };
 
   removeSound = placeholder => {
     chrome.storage.local.set({
-      [placeholder]: null,
+      [placeholder]: null
     });
   };
 
@@ -92,7 +90,7 @@ class Options extends React.Component {
       <div className="settings">
         <h2>Misc</h2>
         <div className="settings__item">
-          <label htmlFor={'sounds'}>
+          <label htmlFor={"sounds"}>
             <input
               id="sounds"
               type="checkbox"
@@ -105,15 +103,15 @@ class Options extends React.Component {
         <h2>Custom sounds</h2>
         {[
           {
-            name: 'Clap',
-            id: 'clap',
-            file: clap,
+            name: "Clap",
+            id: "clap",
+            file: clap
           },
           {
-            name: 'Super clap',
-            id: 'superClap',
-            file: superClap,
-          },
+            name: "Super clap",
+            id: "superClap",
+            file: superClap
+          }
         ].map(({ name, id, file }) => (
           <div key={id} className="settings__item">
             <File
@@ -126,14 +124,14 @@ class Options extends React.Component {
           </div>
         ))}
         <footer>
-          {'Built with ❤️ by '}
+          {"Built with ❤️ by "}
           <a href="https://jukben.cz">jukben</a>
-          {'. Licensed under MIT. Code on '}
+          {". Licensed under MIT. Code on "}
           <a href="https://github.com/jukben/clappe">GitHub</a>.
         </footer>
       </div>
     );
   }
 }
 
-ReactDOM.render(<Options />, document.getElementById('options'));
+ReactDOM.render(<Options />, document.getElementById("options"));
diff --git a/app/styles/contentscript.css b/app/styles/contentscript.css
@@ -0,0 +1,53 @@
+.js-actionMultirecommend {
+  position: relative;
+}
+.js-actionMultirecommend:hover .clappe > .clappe__superClap {
+  opacity: 1;
+}
+.js-actionMultirecommend:hover .clappe > .clappe__superClap--disabled {
+  opacity: 0;
+  transform: translate(0, 0) scale(0);
+}
+.js-actionMultirecommend:hover .clappe > .clappe__superClap--footer {
+  transform: translate(-40px, -40px) scale(1);
+}
+.js-actionMultirecommend:hover .clappe > .clappe__superClap--left {
+  transform: translate(40px, -40px) scale(1);
+}
+.js-actionMultirecommend:hover .clappe > .clappe__superClap--bar {
+  transform: translate(-43px, 8px) scale(1);
+}
+
+.clappe {
+  position: absolute;
+  bottom: 0;
+  width: 60px;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.clappe__superClap {
+  opacity: 0;
+  outline: none;
+  line-height: 40px;
+  width: 40px;
+  height: 40px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 999em;
+  text-align: center;
+  transition: 0.2s all;
+  transform: translate(0, 0) scale(0);
+}
+.clappe__superClap--bar {
+  line-height: 25px;
+  font-size: 12px;
+  width: 25px;
+  height: 25px;
+  transform: translate(-15px, 8px) scale(0);
+}
+.clappe__superClap:hover {
+  cursor: pointer;
+  border-color: #00ab6b;
+}