Merge pull request #57 from editor-js/update-tunes

Replace block tunes HTML with config and update icons

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/simple-image",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "keywords": [
     "codex editor",
     "tool",
@@ -29,5 +29,8 @@
     "style-loader": "^0.21.0",
     "webpack": "^4.29.5",
     "webpack-cli": "^3.2.3"
+  },
+  "dependencies": {
+    "@codexteam/icons": "^0.0.6"
   }
 }

src/index.js

@@ -1,7 +1,9 @@
 /**
  * Build styles
  */
-require('./index.css').toString();
+import './index.css';
+
+import { IconAddBorder, IconStretch, IconAddBackground } from '@codexteam/icons';
 
 /**
  * SimpleImage Tool for the Editor.js
@@ -15,7 +17,7 @@ require('./index.css').toString();
  * @property {boolean} withBackground - should image be rendered with background
  * @property {boolean} stretched - should image be stretched to full width of container
  */
-class SimpleImage {
+export default class SimpleImage {
   /**
    * Render plugin`s main Element and fill it with saved data
    *
@@ -49,8 +51,6 @@ class SimpleImage {
       baseClass: this.api.styles.block,
       loading: this.api.styles.loader,
       input: this.api.styles.input,
-      settingsButton: this.api.styles.settingsButton,
-      settingsButtonActive: this.api.styles.settingsButtonActive,
 
       /**
        * Tool's classes
@@ -82,20 +82,23 @@ class SimpleImage {
     };
 
     /**
-     * Available Image settings
+     * Available Image tunes
      */
-    this.settings = [
+    this.tunes = [
       {
         name: 'withBorder',
-        icon: `<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15.8 10.592v2.043h2.35v2.138H15.8v2.232h-2.25v-2.232h-2.4v-2.138h2.4v-2.28h2.25v.237h1.15-1.15zM1.9 8.455v-3.42c0-1.154.985-2.09 2.2-2.09h4.2v2.137H4.15v3.373H1.9zm0 2.137h2.25v3.325H8.3v2.138H4.1c-1.215 0-2.2-.936-2.2-2.09v-3.373zm15.05-2.137H14.7V5.082h-4.15V2.945h4.2c1.215 0 2.2.936 2.2 2.09v3.42z"/></svg>`,
+        label: 'Add Border',
+        icon: IconAddBorder,
       },
       {
         name: 'stretched',
-        icon: `<svg width="17" height="10" viewBox="0 0 17 10" xmlns="http://www.w3.org/2000/svg"><path d="M13.568 5.925H4.056l1.703 1.703a1.125 1.125 0 0 1-1.59 1.591L.962 6.014A1.069 1.069 0 0 1 .588 4.26L4.38.469a1.069 1.069 0 0 1 1.512 1.511L4.084 3.787h9.606l-1.85-1.85a1.069 1.069 0 1 1 1.512-1.51l3.792 3.791a1.069 1.069 0 0 1-.475 1.788L13.514 9.16a1.125 1.125 0 0 1-1.59-1.591l1.644-1.644z"/></svg>`,
+        label: 'Stretch Image',
+        icon: IconStretch,
       },
       {
         name: 'withBackground',
-        icon: `<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.043 8.265l3.183-3.183h-2.924L4.75 10.636v2.923l4.15-4.15v2.351l-2.158 2.159H8.9v2.137H4.7c-1.215 0-2.2-.936-2.2-2.09v-8.93c0-1.154.985-2.09 2.2-2.09h10.663l.033-.033.034.034c1.178.04 2.12.96 2.12 2.089v3.23H15.3V5.359l-2.906 2.906h-2.35zM7.951 5.082H4.75v3.201l3.201-3.2zm5.099 7.078v3.04h4.15v-3.04h-4.15zm-1.1-2.137h6.35c.635 0 1.15.489 1.15 1.092v5.13c0 .603-.515 1.092-1.15 1.092h-6.35c-.635 0-1.15-.489-1.15-1.092v-5.13c0-.603.515-1.092 1.15-1.092z"/></svg>`,
+        label: 'Add Background',
+        icon: IconAddBackground,
       },
     ];
   }
@@ -296,30 +299,18 @@ class SimpleImage {
   }
 
   /**
-   * Makes buttons with tunes: add background, add border, stretch image
+   * Returns image tunes config
    *
-   * @returns {HTMLDivElement}
+   * @returns {Array}
    */
   renderSettings() {
-    const wrapper = document.createElement('div');
-
-    this.settings.forEach(tune => {
-      const el = document.createElement('div');
-
-      el.classList.add(this.CSS.settingsButton);
-      el.innerHTML = tune.icon;
-
-      el.addEventListener('click', () => {
-        this._toggleTune(tune.name);
-        el.classList.toggle(this.CSS.settingsButtonActive);
-      });
-
-      el.classList.toggle(this.CSS.settingsButtonActive, this.data[tune.name]);
-
-      wrapper.appendChild(el);
-    });
-
-    return wrapper;
+    return this.tunes.map(tune => ({
+      ...tune,
+      label: this.api.i18n.t(tune.label),
+      toggle: true,
+      onActivate: () => this._toggleTune(tune.name),
+      isActive: !!this.data[tune.name],
+    }))
   };
 
   /**
@@ -363,7 +354,7 @@ class SimpleImage {
    * @private
    */
   _acceptTuneView() {
-    this.settings.forEach(tune => {
+    this.tunes.forEach(tune => {
       this.nodes.imageHolder.classList.toggle(this.CSS.imageHolder + '--' + tune.name.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`), !!this.data[tune.name]);
 
       if (tune.name === 'stretched') {
@@ -372,5 +363,3 @@ class SimpleImage {
     });
   }
 }
-
-module.exports = SimpleImage;

webpack.config.js

@@ -28,6 +28,7 @@ module.exports = {
     publicPath: '/',
     filename: 'bundle.js',
     library: 'SimpleImage',
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    libraryExport: 'default',
   }
 };