copy_tuner_client 0.4.1 → 0.4.2

data/package.json

@@ -5,10 +5,23 @@
   "author": "SonicGarden",
   "license": "MIT",
   "scripts": {
-    "build": "coffee -o app/assets/javascripts -c src/copyray.coffee",
-    "watch": "coffee -o app/assets/javascripts -w src/copyray.coffee"
+    "build": "rollup -c",
+    "watch": "rollup -c -w"
+  },
+  "dependencies": {
+    "keycode-js": "0.0.4",
+    "lodash.debounce": "^4.0.8"
   },
   "devDependencies": {
-    "coffeescript": "^1.12.6"
+    "babel-plugin-external-helpers": "^6.22.0",
+    "babel-preset-env": "^1.6.0",
+    "eslint": "^3.19.0",
+    "eslint-config-airbnb-base": "^11.2.0",
+    "eslint-plugin-import": "^2.7.0",
+    "rollup": "^0.45.2",
+    "rollup-plugin-babel": "^2.7.1",
+    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-watch": "^4.3.1"
   }
 }

data/rollup.config.js

@@ -0,0 +1,14 @@
+import babel from 'rollup-plugin-babel';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+
+export default {
+  entry: 'src/main.js',
+  dest: 'app/assets/javascripts/copyray.js',
+  format: 'iife',
+  plugins: [
+    resolve({ jsnext: true, main: true }),
+    commonjs(),
+    babel({ exclude: 'node_modules/**' }),
+  ],
+};

data/src/copyray.js

@@ -0,0 +1,111 @@
+import Specimen from './specimen';
+import CopyTunerBar from './copytuner_bar';
+
+const findBlurbs = () => {
+  const filterNone = () => NodeFilter.FILTER_ACCEPT;
+
+  const iterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_COMMENT,
+    filterNone,
+    false,
+  );
+
+  const comments = [];
+  let curNode;
+  // eslint-disable-next-line no-cond-assign
+  while ((curNode = iterator.nextNode())) {
+    comments.push(curNode);
+  }
+
+  return comments.filter(comment => comment.nodeValue.startsWith('COPYRAY')).map((comment) => {
+    const [, key] = comment.nodeValue.match(/^COPYRAY (\S*)$/);
+    const element = comment.parentNode;
+    return { key, element };
+  });
+};
+
+export default class Copyray {
+  constructor(baseUrl, data) {
+    this.baseUrl = baseUrl;
+    this.data = data;
+    this.isShowing = false;
+    this.specimens = [];
+    this.overlay = this.makeOverlay();
+    this.toggleButton = this.makeToggleButton();
+    this.boundOpen = this.open.bind(this);
+
+    this.copyTunerBar = new CopyTunerBar(
+      document.getElementById('copy-tuner-bar'),
+      this.data,
+      this.boundOpen,
+    );
+  }
+
+  show() {
+    this.reset();
+
+    document.body.appendChild(this.overlay);
+    this.makeSpecimens();
+
+    this.specimens.forEach((specimen) => {
+      specimen.show();
+    });
+
+    this.copyTunerBar.show();
+    this.isShowing = true;
+  }
+
+  hide() {
+    this.overlay.remove();
+    this.reset();
+    this.copyTunerBar.hide();
+    this.isShowing = false;
+  }
+
+  toggle() {
+    if (this.isShowing) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+
+  open(key) {
+    const url = `${this.baseUrl}/blurbs/${key}/edit`;
+    window.open(url, null, 'width=700, height=600');
+  }
+
+  makeSpecimens() {
+    findBlurbs().forEach(({ element, key }) => {
+      this.specimens.push(new Specimen(element, key, this.boundOpen));
+    });
+  }
+
+  makeToggleButton() {
+    const element = document.createElement('a');
+
+    element.addEventListener('click', () => {
+      this.show();
+    });
+
+    element.classList.add('copyray-toggle-button');
+    element.textContent = 'Open CopyTuner';
+    document.body.appendChild(element);
+
+    return element;
+  }
+
+  makeOverlay() {
+    const div = document.createElement('div');
+    div.setAttribute('id', 'copyray-overlay');
+    div.addEventListener('click', () => this.hide());
+    return div;
+  }
+
+  reset() {
+    this.specimens.forEach((specimen) => {
+      specimen.remove();
+    });
+  }
+}

data/src/copytuner_bar.js

@@ -0,0 +1,96 @@
+import debounce from 'lodash.debounce';
+
+const HIDDEN_CLASS = 'copy-tuner-hidden';
+
+export default class CopytunerBar {
+  constructor(element, data, callback) {
+    this.element = element;
+    this.data = data;
+    this.callback = callback;
+    this.searchBoxElement = element.querySelector('.js-copy-tuner-bar-search');
+    this.logMenuElement = this.makeLogMenu();
+    this.element.appendChild(this.logMenuElement);
+
+    this.addHandler();
+  }
+
+  addHandler() {
+    const openLogButton = this.element.querySelector('.js-copy-tuner-bar-open-log');
+    openLogButton.addEventListener('click', (event) => {
+      event.preventDefault();
+      this.toggleLogMenu();
+    });
+
+    this.searchBoxElement.addEventListener('input', debounce(this.onKeyup.bind(this), 250));
+  }
+
+  show() {
+    this.element.classList.remove(HIDDEN_CLASS);
+    this.searchBoxElement.focus();
+  }
+
+  hide() {
+    this.element.classList.add(HIDDEN_CLASS);
+  }
+
+  showLogMenu() {
+    this.logMenuElement.classList.remove(HIDDEN_CLASS);
+  }
+
+  toggleLogMenu() {
+    this.logMenuElement.classList.toggle(HIDDEN_CLASS);
+  }
+
+  makeLogMenu() {
+    const div = document.createElement('div');
+    div.setAttribute('id', 'copy-tuner-bar-log-menu');
+    div.classList.add(HIDDEN_CLASS);
+
+    const table = document.createElement('table');
+    const tbody = document.createElement('tbody');
+    tbody.classList.remove('is-not-initialized');
+
+    Object.keys(this.data).sort().forEach((key) => {
+      const value = this.data[key];
+
+      if (value === '') {
+        return;
+      }
+
+      const td1 = document.createElement('td');
+      td1.textContent = key;
+      const td2 = document.createElement('td');
+      td2.textContent = value;
+      const tr = document.createElement('tr');
+      tr.classList.add('copy-tuner-bar-log-menu__row');
+      tr.dataset.key = key;
+
+      tr.addEventListener('click', ({ currentTarget }) => {
+        this.callback(currentTarget.dataset.key);
+      });
+
+      tr.appendChild(td1);
+      tr.appendChild(td2);
+      tbody.appendChild(tr);
+    });
+
+    table.appendChild(tbody);
+    div.appendChild(table);
+
+    return div;
+  }
+
+  onKeyup({ target }) {
+    const keyword = target.value.trim();
+    this.showLogMenu();
+
+    const rows = Array.from(this.logMenuElement.getElementsByTagName('tr'));
+
+    rows.forEach((row) => {
+      const isShow =
+        keyword === '' ||
+        Array.from(row.getElementsByTagName('td')).some(td => td.textContent.includes(keyword));
+      row.classList.toggle(HIDDEN_CLASS, !isShow);
+    });
+  }
+}

data/src/main.js

@@ -0,0 +1,42 @@
+import KeyCode from 'keycode-js';
+import Copyray from './copyray';
+import { isMac } from './util';
+
+const start = () => {
+  const dataElement = document.getElementById('copy-tuner-data');
+  const copyTunerUrl = dataElement.dataset.copyTunerUrl;
+  const data = JSON.parse(
+    document.getElementById('copy-tuner-data').dataset.copyTunerTranslationLog,
+  );
+  const copyray = new Copyray(copyTunerUrl, data);
+
+  document.addEventListener('keydown', (event) => {
+    if (copyray.isShowing && event.keyCode === KeyCode.KEY_ESCAPE) {
+      copyray.hide();
+      return;
+    }
+
+    if (
+      ((isMac && event.metaKey) || (!isMac && event.ctrlKey)) &&
+      event.shiftKey &&
+      event.keyCode === KeyCode.KEY_K
+    ) {
+      copyray.toggle();
+    }
+  });
+
+  if (console) {
+    // eslint-disable-next-line no-console
+    console.log(
+      `Ready to Copyray. Press ${isMac ? 'cmd+shift+k' : 'ctrl+shift+k'} to scan your UI.`,
+    );
+  }
+
+  window.copyray = copyray;
+};
+
+if (document.readyState === 'complete' || document.readyState !== 'loading') {
+  start();
+} else {
+  document.addEventListener('DOMContentLoaded', start);
+}

data/src/specimen.js

@@ -0,0 +1,63 @@
+import { computeBoundingBox } from './util';
+
+const ZINDEX = 2000000000;
+
+export default class Specimen {
+  constructor(element, key, callback) {
+    this.element = element;
+    this.key = key;
+    this.callback = callback;
+  }
+
+  show() {
+    this.box = this.makeBox();
+    if (this.box === null) return;
+
+    this.box.addEventListener('click', () => {
+      this.callback(this.key);
+    });
+
+    document.body.appendChild(this.box);
+  }
+
+  remove() {
+    if (!this.box) {
+      return;
+    }
+    this.box.remove();
+    this.box = null;
+  }
+
+  makeBox() {
+    const box = document.createElement('div');
+    box.classList.add('copyray-specimen');
+    box.classList.add('Specimen');
+
+    const bounds = computeBoundingBox(this.element);
+    if (bounds === null) return null;
+
+    Object.keys(bounds).forEach((key) => {
+      const value = bounds[key];
+      box.style[key] = `${value}px`;
+    });
+    box.style.zIndex = ZINDEX;
+
+    const { position, top, left } = getComputedStyle(this.element);
+    if (position === 'fixed') {
+      this.box.style.position = 'fixed';
+      this.box.style.top = `${top}px`;
+      this.box.style.left = `${left}px`;
+    }
+
+    box.appendChild(this.makeLabel());
+    return box;
+  }
+
+  makeLabel() {
+    const div = document.createElement('div');
+    div.classList.add('copyray-specimen-handle');
+    div.classList.add('Specimen');
+    div.textContent = this.key;
+    return div;
+  }
+}

data/src/util.js

@@ -0,0 +1,32 @@
+const isMac = navigator.platform.toUpperCase().indexOf('MAC') !== -1;
+
+const isVisible = element =>
+  !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
+
+const getOffset = (elment) => {
+  const box = elment.getBoundingClientRect();
+
+  return {
+    top: box.top + (window.pageYOffset - document.documentElement.clientTop),
+    left: box.left + (window.pageXOffset - document.documentElement.clientLeft),
+  };
+};
+
+const computeBoundingBox = (element) => {
+  if (!isVisible(element)) {
+    return null;
+  }
+
+  const boxFrame = getOffset(element);
+  boxFrame.right = boxFrame.left + element.offsetWidth;
+  boxFrame.bottom = boxFrame.top + element.offsetHeight;
+
+  return {
+    left: boxFrame.left,
+    top: boxFrame.top,
+    width: boxFrame.right - boxFrame.left,
+    height: boxFrame.bottom - boxFrame.top,
+  };
+};
+
+export { isMac, isVisible, getOffset, computeBoundingBox };

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: copy_tuner_client
 version: !ruby/object:Gem::Version
-  version: 0.4.1
+  version: 0.4.2
 platform: ruby
 authors:
 - SonicGarden
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-07-13 00:00:00.000000000 Z
+date: 2017-07-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: i18n
@@ -226,6 +226,8 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- ".babelrc"
+- ".eslintrc"
 - ".gitignore"
 - ".rspec"
 - ".ruby-version"
@@ -239,7 +241,6 @@ files:
 - app/assets/javascripts/copyray.js
 - app/assets/stylesheets/copyray.css
 - app/views/_copy_tuner_bar.html.erb
-- coffeelint.json
 - copy_tuner_client.gemspec
 - features/rails.feature
 - features/step_definitions/copycopter_server_steps.rb
@@ -270,6 +271,7 @@ files:
 - lib/tasks/copy_tuner_client_tasks.rake
 - package-lock.json
 - package.json
+- rollup.config.js
 - spec/copy_tuner_client/cache_spec.rb
 - spec/copy_tuner_client/client_spec.rb
 - spec/copy_tuner_client/configuration_spec.rb
@@ -291,7 +293,11 @@ files:
 - spec/support/fake_unicorn.rb
 - spec/support/middleware_stack.rb
 - spec/support/writing_cache.rb
-- src/copyray.coffee
+- src/copyray.js
+- src/copytuner_bar.js
+- src/main.js
+- src/specimen.js
+- src/util.js
 - ui/views/copytuner/index.html.erb
 - ui/views/layouts/copytuner_default.html.erb
 homepage: https://github.com/SonicGarden/copy-tuner-ruby-client