叩き台

.gitignore

@@ -0,0 +1,4 @@
+
+yarn-error\.log
+
+chrome/dist/

.tern-project

@@ -0,0 +1,19 @@
+{
+  "ecmaVersion": "7",
+  "libs": [
+    "browser"
+  ],
+  "dontLoad": [
+    "node_modules/**"
+  ],
+  "loadEagerly": [
+    "src/**/*.js",
+    "node_modules/react/**/*.js"
+  ],
+  "plugins": {
+    "doc_comment": {
+      "fullDocs": true,
+      "strong": true
+    }
+  }
+}

chrome/src/background.js

@@ -0,0 +1,15 @@
+const openOrFocusOptionsPage = () => {
+  const favoritesUrl = chrome.runtime.getURL('favorites.html');
+
+  chrome.tabs.query({ url: favoritesUrl }, (tabs) => {
+    if (tabs.length) {
+      chrome.tabs.update(tabs[0].id, { active: true });
+    } else {
+      chrome.tabs.create({ url: favoritesUrl });
+    }
+  });
+};
+
+chrome.browserAction.onClicked.addListener(() => {
+  openOrFocusOptionsPage();
+});

chrome/src/detail.js

@@ -0,0 +1,41 @@
+const createFollowButtons = () => {
+  const performerLinks = document.querySelectorAll('#performer > a');
+  const coverArtUrl = document.querySelector('[name=package-image]').href;
+  const handleClickFollowButton = newFollowing => () => {
+    console.log('newFollowing', newFollowing);
+
+    chrome.storage.local.get('following', ({ following = [] }) => {
+      const index = following.findIndex(performer => performer.id === newFollowing.id);
+
+      if (index === -1) {
+        following.push(newFollowing);
+      } else {
+        following.splice(index, 1, newFollowing);
+      }
+
+      chrome.storage.local.set({ following }, () => {
+        console.log('Value is set to', following);
+      });
+    });
+  };
+
+  [...performerLinks].forEach((link) => {
+    const [, type, id] = /digital\/videoa\/-\/list\/=\/article=(.*)\/id=(\d*)\//.exec(link);
+    const performer = {
+      type,
+      id,
+      name: link.innerText,
+    };
+
+    const followButton = document.createElement('button', { type: 'button' });
+    followButton.innerHTML = 'follow';
+    followButton.addEventListener('click', handleClickFollowButton({ ...performer, coverArtUrl }));
+
+    const performerSpan = document.createElement('span');
+    performerSpan.append(link.cloneNode(true), followButton);
+
+    link.parentNode.replaceChild(performerSpan, link);
+  });
+};
+
+createFollowButtons();

chrome/src/favorites/App.jsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import {
+  Button, Drawer, Checkbox, Layout, Switch, Row, Col,
+} from 'antd';
+
+import Card from './component/card';
+import FilterInDrawerContent from './component/drawer/filter';
+
+const {
+  Header, Content,
+} = Layout;
+
+export default class App extends React.Component {
+  state = {
+    following: [],
+    types: [],
+    filter: {
+      age: [18, 20],
+      bust: [90, 110],
+      west: [50, 80],
+      hip: [80, 110],
+    },
+    isBlur: true,
+  };
+
+  componentDidMount() {
+    chrome.storage.local.get('following', ({ following = [] }) => {
+      const types = [...new Set(following.map(item => item.type))];
+      this.setState({ following: following.reverse(), types });
+    });
+  }
+
+  _renderCard = item => (
+    <Card item={item} isBlur={this.state.isBlur} />
+  );
+
+  _handleChange = () => {
+    this.setState({ isBlur: !this.state.isBlur });
+  };
+
+  _handleToggleFilterDrawer = () => {
+    const { visibleDrawer, filter } = this.state;
+
+    if (visibleDrawer) {
+      this.setState({ visibleDrawer: false });
+    } else {
+      this.setState({
+        visibleDrawer: true,
+        drawerContent: <FilterInDrawerContent filter={filter} />,
+      });
+    }
+  }
+
+  render() {
+    const {
+      following, types, isBlur, visibleDrawer, drawerContent,
+    } = this.state;
+
+    return (
+      <Layout>
+        <Header style={{ color: 'white' }}>
+          DMM.pornstars
+        </Header>
+        <Content style={{ padding: '20px 50px' }}>
+          <div
+            style={{
+              height: '60px', paddingBottom: '20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+            }}
+          >
+            <p style={{ margin: 0 }}>
+              {following.length}
+              件の女優
+            </p>
+            <div style={{
+              display: 'flex', width: 100, justifyContent: 'space-between', alignItems: 'center',
+            }}
+            >
+              {/* <Button sieze="small" shape="circle" icon="filter" onClick={this._handleToggleFilterDrawer}/> */}
+              {/* types.map(type => (
+              <Checkbox>
+                {type}
+              </Checkbox>
+              )) */}
+              <Switch
+                checkedChildren="blur"
+                unCheckedChildren="blur"
+                defaultChecked
+                onChange={this._handleChange}
+                checked={!isBlur}
+              />
+            </div>
+          </div>
+          <Row gutter={15}>
+            {following.map(item => (
+              <Col span={6}>
+                <Card item={item} isBlur={isBlur} />
+              </Col>
+            ))}
+          </Row>
+        </Content>
+        <Drawer
+          title="Filter"
+          placement="right"
+          closable={false}
+          width={500}
+          onClose={this._handleToggleFilterDrawer}
+          visible={visibleDrawer}
+        >
+          {drawerContent}
+        </Drawer>
+      </Layout>
+    );
+  }
+}

chrome/src/favorites/component/card/index.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import {
+  Avatar, Card, Icon,
+} from 'antd';
+
+import style from './style';
+
+export default ({ item, isBlur }) => {
+  const handleDelete = () => {
+    chrome.storage.local.get('following', ({ following = [] }) => {
+      const index = following.findIndex(i => i.id === item.id);
+
+      following.splice(index, 1);
+
+      chrome.storage.local.set({ following }, () => {
+        console.log('Value is set to', following);
+      });
+    });
+  };
+
+  const Delete = () => (
+    <Icon type="delete" onClick={handleDelete} />
+  );
+
+  return (
+    <a
+      rel="noopener noreferrer"
+      target="_blank"
+      href={`http://www.dmm.co.jp/digital/videoa/-/list/=/article=actress/id=${item.id}/`}
+    >
+      <Card
+        style={{ marginBottom: '15px' }}
+        bordered={false}
+        hoverable
+        actions={[<Delete />]}
+        cover={(
+          <div style={style.imageWrapper}>
+            <img
+              style={Object.assign({}, style.image, isBlur && style.imageBlur)}
+              alt={item.name}
+              src={item.coverArtUrl}
+            />
+          </div>
+      )}
+      >
+        <Card.Meta
+          avatar={<Avatar icon="user" / >}
+          title={item.name}
+          description={null}
+        />
+      </Card>
+    </a>
+  );
+};

chrome/src/favorites/component/card/style.js

@@ -0,0 +1,15 @@
+export default {
+  imageWrapper: {
+    overflow: 'hidden',
+    height: '200px',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+    objectPosition: 'right',
+    objectFit: 'cover',
+  },
+  imageBlur: {
+    filter: 'blur(10px)',
+  },
+};

chrome/src/favorites/component/drawer/filter/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Slider } from 'antd';
+
+export default ({ filter }) => (
+  <div>
+    age:
+    <Slider range min={18} max={40} defaultValue={[18, 20]} value={filter.age} />
+    bust:
+    <Slider range min={40} max={150} defaultValue={[90, 110]} value={filter.bust} />
+    west:
+    <Slider range min={40} max={100} defaultValue={[50, 70]} value={filter.west}/>
+    hip:
+    <Slider range min={40} max={150} defaultValue={[80, 110]} value={filter.hip}/>
+  </div>
+);

chrome/src/favorites/context/favorites.js

@@ -0,0 +1,29 @@
+import React, { createContext } from 'react';
+
+const FavoritesContext = createContext();
+
+export class FavoritesProvider extends React.Component {
+  state = {
+    favorites: [],
+  };
+
+  _setFavorites = (favorites) => {
+    this.setState({ favorites });
+  }
+
+  render() {
+    const { children } = this.props;
+    const { favorites } = this.state;
+
+    return (
+      <FavoritesContext.Provider
+        favorites={favorites}
+        setFavorites={this._setFavorites}
+      >
+        {children}
+      </FavoritesContext.Provider>
+    );
+  }
+}
+
+export const FavoritesConsumer = FavoritesContext.Consumer;

chrome/src/favorites/index.css

@@ -0,0 +1 @@
+@import '~antd/dist/antd.css';

chrome/src/favorites/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>DMM.pornstars</title>
+  </head>
+  <body>
+    <div id="root" />
+  </body>
+  <script src="favorites.bundle.js"></script>
+  <link rel="stylesheet" href="index.css" />
+</html>

chrome/src/favorites/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App';
+
+const root = document.querySelector('#root');
+console.log(root);
+
+ReactDOM.render(
+  <App />,
+  root,
+);

chrome/src/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "DMM.pornstars",
+  "version": "1.0",
+  "description": "Build an Extension!",
+  "manifest_version": 2,
+  "content_scripts": [
+   {
+     "matches": ["http://www.dmm.co.jp/digital/videoa/-/detail/*"],
+     "js": ["detail.bundle.js"]
+   }
+ ],
+ "background": {
+   "scripts": ["background.bundle.js"],
+   "persistent": false
+ },
+ "browser_action": {
+ },
+ "permissions": [
+   "storage", "tabs"
+ ]
+}

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "pornstars",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack --watch --mode development",
+    "build": "webpack --mode production"
+  },
+  "dependencies": {
+    "antd": "^3.10.7",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "webpack-cli": "^3.1.2"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.1.5",
+    "@babel/core": "^7.1.6",
+    "@babel/node": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-import": "^1.11.0",
+    "copy-webpack-plugin": "^4.6.0",
+    "css-loader": "^1.0.1",
+    "less-loader": "^4.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.25.1",
+    "webpack-command": "^0.4.2"
+  }
+}