Merge pull request #3 from perst-one/develop

Develop

.github/workflows/release.yml

@@ -31,7 +31,7 @@ jobs:
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
           file: dist/plugin.zip
-          asset_name: ${{ github.event.repository.name }}
+          asset_name: ${{ github.event.repository.name }}.zip
           tag: ${{ github.ref }}
           overwrite: true
 

package.json

@@ -24,5 +24,7 @@
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12"
   },
-  "dependencies": {}
+  "dependencies": {
+    "clipboard": "^2.0.6"
+  }
 }

plugin/css/common.css

@@ -0,0 +1,18 @@
+.po-clip-target:hover {
+  cursor: copy;
+}
+
+.po-clip-target.copied {
+  cursor: inherit;
+  animation: copied 1s;
+}
+
+@keyframes copied {
+  0% {
+    background-color: rgba(0, 255, 0, 0.25);
+  }
+
+  100% {
+    background-color: inherit;
+  }
+}

plugin/css/config.css

@@ -4,4 +4,4 @@
 
 .kintoneplugin-input-text {
   width: 20em;
-}
+}

plugin/css/desktop.css

@@ -1,10 +0,0 @@
-.plugin-space-heading {
-  font-size: 1.5rem;
-  margin: 0.8rem;
-}
-.plugin-space-message {
-  display: inline-block;
-  font-size: 1.2em;
-  margin: 0.8rem;
-  margin-top: 0;
-}

plugin/css/mobile.css

@@ -1,10 +0,0 @@
-.plugin-space-heading {
-  font-size: 1.5rem;
-  margin: 0.8rem;
-}
-.plugin-space-message {
-  display: inline-block;
-  font-size: 1.2em;
-  margin: 0.8rem;
-  margin-top: 0;
-}

plugin/html/config.html

@@ -1,16 +1,16 @@
 <section class="settings">
-  <h2 class="settings-heading">Settings for kintone-sample-plugin</h2>
-  <p class="kintoneplugin-desc">This message is displayed on the app page after the app has been updated.</p>
+  <h2 class="settings-heading">設定画面</h2>
+  <p class="kintoneplugin-desc">プラグインの設定画面です</p>
   <form class="js-submit-settings">
     <p class="kintoneplugin-row">
-      <label for="message">
-        Message:
-        <input type="text" class="js-text-message kintoneplugin-input-text">
+      <label for="selector">
+        CSSセレクタ:
+        <input type="text" name="selector" class="js-text-selector kintoneplugin-input-text">
       </label>
     </p>
     <p class="kintoneplugin-row">
-        <button type="button" class="js-cancel-button kintoneplugin-button-dialog-cancel">Cancel</button>
-        <button class="kintoneplugin-button-dialog-ok">Save</button>
+        <button type="button" class="js-cancel-button kintoneplugin-button-dialog-cancel">キャンセル</button>
+        <button class="kintoneplugin-button-dialog-ok">保存</button>
     </p>
   </form>
 </section>

plugin/manifest.json

@@ -3,24 +3,24 @@
   "version": 1,
   "type": "APP",
   "name": {
-    "en": "kintone-plugin-template"
+    "en": "kintone-clipboard-plugin"
   },
   "description": {
-    "en": "kintone-plugin-template"
+    "en": "kintone-clipboard-plugin"
   },
   "icon": "image/icon.png",
   "desktop": {
     "js": ["https://js.cybozu.com/jquery/3.3.1/jquery.min.js", "js/desktop.js"],
-    "css": ["css/51-modern-default.min.css", "css/desktop.css"]
+    "css": ["css/51-modern-default.min.css", "css/common.css", "css/desktop.css"]
   },
   "mobile": {
     "js": ["https://js.cybozu.com/jquery/3.3.1/jquery.min.js", "js/mobile.js"],
-    "css": ["css/mobile.css"]
+    "css": ["css/common.css", "css/mobile.css"]
   },
   "config": {
     "html": "html/config.html",
     "js": ["https://js.cybozu.com/jquery/3.3.1/jquery.min.js", "js/config.js"],
-    "css": ["css/51-modern-default.min.css", "css/config.css"],
-    "required_params": ["message"]
+    "css": ["css/51-modern-default.min.css", "css/common.css", "css/config.css"],
+    "required_params": ["selector"]
   }
 }

src/config.js

@@ -3,18 +3,17 @@ jQuery.noConflict();
 (function($, PLUGIN_ID) {
   const $form = $('.js-submit-settings');
   const $cancelButton = $('.js-cancel-button');
-  const $message = $('.js-text-message');
+  const $selector = $('.js-text-selector');
   const config = kintone.plugin.app.getConfig(PLUGIN_ID);
 
-  if (config.message) {
-    $message.val(config.message);
+  if (config.selector) {
+    $selector.val(config.selector);
   }
   $form.on('submit', function(e) {
     e.preventDefault();
     kintone.plugin.app.setConfig({
-      message: $message.val(),
+      selector: $selector.val(),
     }, function() {
-      alert('The plug-in settings have been saved. Please update the app!');
       window.location.href = '../../flow?app=' + kintone.app.getId();
     });
   });

src/desktop.js

@@ -1,21 +1,30 @@
+const ClipboardJS = require('clipboard');
+
 jQuery.noConflict();
 
 (function($, PLUGIN_ID) {
-  kintone.events.on('app.record.index.show', function() {
-    const config = kintone.plugin.app.getConfig(PLUGIN_ID);
+  const main = () => {
+    setTimeout(() => {
+      const className = 'po-clip-target';
+      const {selector} = kintone.plugin.app.getConfig(PLUGIN_ID);
 
-    const spaceElement = kintone.app.getHeaderSpaceElement();
-    const fragment = document.createDocumentFragment();
-    const headingEl = document.createElement('h3');
-    const messageEl = document.createElement('p');
+      for (const element of document.querySelectorAll(selector)) {
+        if (!element.classList.contains(className)) {
+          element.classList.add(className);
+          element.addEventListener('click', () => element.classList.add('copied'));
+          element.addEventListener('animationend', () => element.classList.remove('copied'));
 
-    messageEl.classList.add('plugin-space-message');
-    messageEl.textContent = config.message;
-    headingEl.classList.add('plugin-space-heading');
-    headingEl.textContent = 'Hello kintone plugin desktop!';
+          new ClipboardJS(element, {
+            text: (trigger) => trigger.innerText,
+          });
+        }
+      }
+    }, 0);
+  };
 
-    fragment.appendChild(headingEl);
-    fragment.appendChild(messageEl);
-    spaceElement.appendChild(fragment);
-  });
+  kintone.events.on('app.record.index.show', main);
+  kintone.events.on('app.record.index.edit.submit.success', main);
+  kintone.events.on('app.record.detail.show', main);
+  kintone.events.on('app.record.create.show', main);
+  kintone.events.on('app.record.edit.show', main);
 })(jQuery, kintone.$PLUGIN_ID);

src/mobile.js

@@ -1,21 +1,5 @@
 jQuery.noConflict();
 
-(function($, PLUGIN_ID) {
-  kintone.events.on('mobile.app.record.index.show', function() {
-    const config = kintone.plugin.app.getConfig(PLUGIN_ID);
+(function(_$, _PLUGIN_ID) {
 
-    const spaceElement = kintone.mobile.app.getHeaderSpaceElement();
-    const fragment = document.createDocumentFragment();
-    const headingEl = document.createElement('h3');
-    const messageEl = document.createElement('p');
-
-    messageEl.classList.add('plugin-space-message');
-    messageEl.textContent = config.message;
-    headingEl.classList.add('plugin-space-heading');
-    headingEl.textContent = 'Hello kintone plugin mobile!';
-
-    fragment.appendChild(headingEl);
-    fragment.appendChild(messageEl);
-    spaceElement.appendChild(fragment);
-  });
 })(jQuery, kintone.$PLUGIN_ID);