#89 extension modification (#91)

* #89 
extension modification cahnges
console log removed
extension changes
extension modification

src/editor/MainMenu.js

@@ -308,7 +308,6 @@ class MainMenu {
         <se-menu-item id="tool_save" label="Save Image" shortcut="S" src="./images/saveImg.svg"></se-menu-item>
         <se-menu-item id="tool_import" label="Import Image" src="./images/importImg.svg"></se-menu-item>
         <se-menu-item id="tool_export" label="Export" src="./images/export.svg"></se-menu-item>
-        <se-menu-item id="tool_imagelib" label="Image library" src="./images/library.svg"></se-menu-item>
         <se-menu-item id="tool_docprops" label="Document Properties" shortcut="D" src="./images/docprop.svg">
         </se-menu-item>
         <se-menu-item id="tool_editor_prefs" label="Editor Preferences" src="./images/editPref.svg"></se-menu-item>

src/editor/extensions/ext-eyedropper/ext-eyedropper.js

@@ -43,7 +43,7 @@ export default {
      * @param {module:svgcanvas.SvgCanvas#event:ext_selectedChanged|module:svgcanvas.SvgCanvas#event:ext_elementChanged} opts
      * @returns {void}
      */
-    function getStyle (opts) {
+    const getStyle = (opts) => {
       // if we are in eyedropper mode, we don't want to disable the eye-dropper tool
       const mode = svgCanvas.getMode();
       if (mode === 'eyedropper') { return; }
@@ -72,16 +72,19 @@ export default {
       }
     }
 
-    const events = {
-      id: 'tool_eyedropper',
-      click () {
-        svgCanvas.setMode('eyedropper');
-      }
-    };
-
     return {
       name: strings.name,
-      events,
+      callback() {
+        // Add the button and its handler(s)
+        const buttonTemplate = document.createElement("template");
+        buttonTemplate.innerHTML = `
+        <se-button id="tool_eyedropper" title="Eye Dropper Tool" src="./images/eye_dropper.svg" shortcut="I"></se-button>
+        `
+        $id('tools_left').append(buttonTemplate.content.cloneNode(true));
+        $id('tool_eyedropper').addEventListener("click", () => {
+          svgCanvas.setMode('eyedropper');
+        });
+      },
       // if we have selected an element, grab its paint and enable the eye dropper button
       selectedChanged: getStyle,
       elementChanged: getStyle,

src/editor/extensions/ext-imagelib/ext-imagelib.js

@@ -42,7 +42,7 @@ export default {
     *
     * @returns {void}
     */
-    function closeBrowser () {
+    const closeBrowser = () => {
       $id("imgbrowse_holder").style.display = 'none';
       document.activeElement.blur(); // make sure focus is the body to correct issue #417
     }
@@ -51,7 +51,7 @@ export default {
     * @param {string} url
     * @returns {void}
     */
-    function importImage (url) {
+    const importImage = (url) => {
       const newImage = svgCanvas.addSVGElementFromJson({
         element: 'image',
         attr: {
@@ -327,11 +327,11 @@ export default {
     // Receive `postMessage` data
     window.addEventListener('message', onMessage, true);
 
-    function insertAfter(referenceNode, newNode) {
+    const insertAfter = (referenceNode, newNode) => {
       referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
     }
 
-    function toggleMultiLoop() {
+    const toggleMultiLoop = () => {
       $.each(multiArr, function (i) {
         const type = this[0];
         const data = this[1];
@@ -352,7 +352,7 @@ export default {
     * @param {boolean} show
     * @returns {void}
     */
-    function toggleMulti (show) {
+    const toggleMulti = (show) => {
       $id('lib_framewrap').style.right = (show ? 200 : 10);
       $id('imglib_opts').style.right = (show ? 200 : 10);
       if (!preview) {
@@ -380,7 +380,7 @@ export default {
     *
     * @returns {void}
     */
-    function showBrowser () {
+    const showBrowser = () => {
       let browser = $id('imgbrowse');
       if (!browser) {
         const div = document.createElement('div');
@@ -495,17 +495,19 @@ export default {
       }
     }
 
-    const events = {
-      id: 'tool_imagelib',
-      click () {
-        showBrowser();
-      }
-    };
-
     return {
       svgicons: 'ext-imagelib.xml',
-      events,
       callback() {
+        // Add the button and its handler(s)
+        const buttonTemplate = document.createElement("template");
+        buttonTemplate.innerHTML = `
+        <se-menu-item id="tool_imagelib" label="Image library" src="./images/library.svg"></se-menu-item>
+        `;
+        insertAfter($id('tool_export'), buttonTemplate.content.cloneNode(true));
+        $id('tool_imagelib').addEventListener("click", () => {
+          showBrowser();
+        });
+
         const style = document.createElement('style');
         style.textContent = '#imgbrowse_holder {' +
           'position: absolute;' +

src/editor/extensions/ext-panning/ext-panning.js

@@ -24,24 +24,40 @@ const loadExtensionTranslation = async function (lang) {
 
 export default {
   name: 'panning',
-  async init ({importLocale}) {
+  async init({
+    importLocale
+  }) {
     const svgEditor = this;
     const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
-    const {svgCanvas} = svgEditor;
+    const {
-    const events = {
+      svgCanvas
-      id: 'ext-panning',
+    } = svgEditor;
-      click () {
+    const {
-        svgCanvas.setMode('ext-panning');
+      $id
+    } = svgCanvas;
+    const insertAfter = (referenceNode, newNode) => {
+      referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
     }
-    };
     return {
       newUI: true,
       name: strings.name,
-      events,
+      callback() {
+        // Add the button and its handler(s)
+        const buttonTemplate = document.createElement("template");
+        buttonTemplate.innerHTML = `
+        <se-button id="ext-panning" title="Panning" src="./images/panning.svg"></se-button>
+        `;
+        insertAfter($id('tool_zoom'), buttonTemplate.content.cloneNode(true));
+        $id('ext-panning').addEventListener("click", () => {
+          svgCanvas.setMode('ext-panning');
+        });
+      },
       mouseDown() {
         if (svgCanvas.getMode() === 'ext-panning') {
           svgEditor.setPanning(true);
-          return {started: true};
+          return {
+            started: true
+          };
         }
         return undefined;
       },

src/editor/panels/LeftPanel.js

@@ -200,7 +200,6 @@ class LeftPanel {
     <div id="tools_left">
      <se-button id="tool_select" title="Select Tool" src="./images/select.svg"></se-button>
      <se-button id="tool_zoom" title="Zoom Tool" src="./images/zoom.svg" shortcut="Z"></se-button>
-     <se-button id="ext-panning" title="Panning" src="./images/panning.svg"></se-button>
      <se-button id="tool_fhpath" title="Pencil Tool" src="./images/pencil.svg" shortcut="Q"></se-button>
      <se-button id="tool_line" title="Line Tool" src="./images/pen.svg" shortcut="L"></se-button>
      <se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button>
@@ -216,7 +215,6 @@ class LeftPanel {
      </se-flyingbutton>
      <se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button>
      <se-button id="tool_image" title="Image Tool" src="./images/image.svg"></se-button>
-     <se-button id="tool_eyedropper" title="Eye Dropper Tool" src="./images/eye_dropper.svg" shortcut="I"></se-button>
     </div> <!-- tools_left -->
      `;
     this.editor.$svgEditor.append(template.content.cloneNode(true));