#bold-italic-se-button bold and italic div change to se-button

dist/editor/embedapi.js

@@ -102,7 +102,7 @@ function getMessageListener (t) {
 * - Have an iframe somewhere pointing to a version of svg-edit > r1000.
 * @example
 // Initialize the magic with:
-svgCanvas = new EmbeddedSVGEdit(window.frames.svgedit);
+const svgCanvas = new EmbeddedSVGEdit(window.frames.svgedit);
 
 // Pass functions in this format:
 svgCanvas.setSvgString('string');
@@ -130,7 +130,7 @@ svgCanvas.setSvgString('string')(function (data, error) {
 
 // The only other difference is when handling returns:
 // the callback notation is used instead.
-blah = new EmbeddedSVGEdit(window.frames.svgedit);
+const blah = new EmbeddedSVGEdit(window.frames.svgedit);
 blah.clearSelection('woot', 'blah', 1337, [1, 2, 3, 4, 5, 'moo'], -42, {
      a: 'tree', b: 6, c: 9
 })(function () { console.log('GET DATA', args); });

dist/editor/index.html

@@ -309,8 +309,8 @@
         </div>
         <div id="text_panel">
           <div class="toolset">
-            <div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
+            <se-button id="tool_bold" title="Bold Text [B]" src="./images/bold.png"></se-button>
-            <div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
+            <se-button id="tool_italic" title="Italic Text [I]" src="./images/italic.png"></se-button>
           </div>
           <div class="toolset" id="tool_font_family">
             <label>
@@ -400,7 +400,7 @@
           <se-button id="tool_fhellipse" title="Free-Hand Rectangle" src="./images/fh_ellipse.svg"></se-button>                 
         </se-flyingbutton>
         <se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button>
-        <se-explorerbutton id="tool_shapelib_show" title="Shape library" lib="./extensions/ext-shapes/shapelib/"></se-explorerbutton>
+        <se-explorerbutton id="tool_shapelib_show" title="Shape library" lib="./extensions/ext-shapes/shapelib/" src="./images/shapelib.svg"></se-explorerbutton>
         <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_zoom" title="Zoom Tool" src="./images/zoom.svg" shortcut="Z"></se-button>

dist/editor/spinbtn/jQuery.SpinButton.js

@@ -53,7 +53,7 @@
  * @module jQuerySpinButton
  * @example
   // Create group of settings to initialise spinbutton(s). (Optional)
-  myOptions = {
+  const myOptions = {
      min: 0, // Set lower limit.
      max: 100, // Set upper limit.
      step: 1, // Set increment size.

dist/editor/svgedit.css

@@ -720,32 +720,11 @@ span.zoom_tool {
   padding-right: 5px;
 }
 
-#tool_bold, #tool_italic {
-  font: bold 2.1em/1.1em serif;
-  text-align: center;
-  padding-left: 2px;
-  position: relative;
-}
-
 #text {
   position: absolute;
   left: -9999px;
 }
 
-#tool_bold span, #tool_italic span {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0; left: 0;
-  background: #000;
-  opacity: 0;
-}
-
-#tool_italic {
-  font-weight: normal;
-  font-style: italic;
-}
-
 #url_notice {
   padding-top: 4px;
   display: none;

dist/editor/system/embedapi.js

@@ -102,7 +102,7 @@ function getMessageListener (t) {
 * - Have an iframe somewhere pointing to a version of svg-edit > r1000.
 * @example
 // Initialize the magic with:
-svgCanvas = new EmbeddedSVGEdit(window.frames.svgedit);
+const svgCanvas = new EmbeddedSVGEdit(window.frames.svgedit);
 
 // Pass functions in this format:
 svgCanvas.setSvgString('string');
@@ -130,7 +130,7 @@ svgCanvas.setSvgString('string')(function (data, error) {
 
 // The only other difference is when handling returns:
 // the callback notation is used instead.
-blah = new EmbeddedSVGEdit(window.frames.svgedit);
+const blah = new EmbeddedSVGEdit(window.frames.svgedit);
 blah.clearSelection('woot', 'blah', 1337, [1, 2, 3, 4, 5, 'moo'], -42, {
      a: 'tree', b: 6, c: 9
 })(function () { console.log('GET DATA', args); });

dist/editor/system/index.html

@@ -316,8 +316,8 @@
         </div>
         <div id="text_panel">
           <div class="toolset">
-            <div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
+            <se-button id="tool_bold" title="Bold Text [B]" src="./images/bold.png"></se-button>
-            <div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
+            <se-button id="tool_italic" title="Italic Text [I]" src="./images/italic.png"></se-button>
           </div>
           <div class="toolset" id="tool_font_family">
             <label>
@@ -407,7 +407,7 @@
           <se-button id="tool_fhellipse" title="Free-Hand Rectangle" src="./images/fh_ellipse.svg"></se-button>                 
         </se-flyingbutton>
         <se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button>
-        <se-explorerbutton id="tool_shapelib_show" title="Shape library" lib="./extensions/ext-shapes/shapelib/"></se-explorerbutton>
+        <se-explorerbutton id="tool_shapelib_show" title="Shape library" lib="./extensions/ext-shapes/shapelib/" src="./images/shapelib.svg"></se-explorerbutton>
         <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_zoom" title="Zoom Tool" src="./images/zoom.svg" shortcut="Z"></se-button>

dist/editor/system/spinbtn/jQuery.SpinButton.js

@@ -53,7 +53,7 @@
  * @module jQuerySpinButton
  * @example
   // Create group of settings to initialise spinbutton(s). (Optional)
-  myOptions = {
+  const myOptions = {
      min: 0, // Set lower limit.
      max: 100, // Set upper limit.
      step: 1, // Set increment size.

dist/editor/system/svgedit.css

@@ -720,32 +720,11 @@ span.zoom_tool {
   padding-right: 5px;
 }
 
-#tool_bold, #tool_italic {
-  font: bold 2.1em/1.1em serif;
-  text-align: center;
-  padding-left: 2px;
-  position: relative;
-}
-
 #text {
   position: absolute;
   left: -9999px;
 }
 
-#tool_bold span, #tool_italic span {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0; left: 0;
-  background: #000;
-  opacity: 0;
-}
-
-#tool_italic {
-  font-weight: normal;
-  font-style: italic;
-}
-
 #url_notice {
   padding-top: 4px;
   display: none;

dist/editor/xdomain-index.html

@@ -309,8 +309,8 @@
         </div>
         <div id="text_panel">
           <div class="toolset">
-            <div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
+            <se-button id="tool_bold" title="Bold Text [B]" src="./images/bold.png"></se-button>
-            <div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
+            <se-button id="tool_italic" title="Italic Text [I]" src="./images/italic.png"></se-button>
           </div>
           <div class="toolset" id="tool_font_family">
             <label>
@@ -400,7 +400,7 @@
           <se-button id="tool_fhellipse" title="Free-Hand Rectangle" src="./images/fh_ellipse.svg"></se-button>                 
         </se-flyingbutton>
         <se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button>
-        <se-explorerbutton id="tool_shapelib_show" title="Shape library" lib="./extensions/ext-shapes/shapelib/"></se-explorerbutton>
+        <se-explorerbutton id="tool_shapelib_show" title="Shape library" lib="./extensions/ext-shapes/shapelib/" src="./images/shapelib.svg"></se-explorerbutton>
         <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_zoom" title="Zoom Tool" src="./images/zoom.svg" shortcut="Z"></se-button>

src/editor/index.html

@@ -309,8 +309,8 @@
         </div>
         <div id="text_panel">
           <div class="toolset">
-            <div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
+            <se-button id="tool_bold" title="Bold Text [B]" src="./images/bold.png"></se-button>
-            <div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
+            <se-button id="tool_italic" title="Italic Text [I]" src="./images/italic.png"></se-button>
           </div>
           <div class="toolset" id="tool_font_family">
             <label>

src/editor/svgedit.css

@@ -720,32 +720,11 @@ span.zoom_tool {
   padding-right: 5px;
 }
 
-#tool_bold, #tool_italic {
-  font: bold 2.1em/1.1em serif;
-  text-align: center;
-  padding-left: 2px;
-  position: relative;
-}
-
 #text {
   position: absolute;
   left: -9999px;
 }
 
-#tool_bold span, #tool_italic span {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0; left: 0;
-  background: #000;
-  opacity: 0;
-}
-
-#tool_italic {
-  font-weight: normal;
-  font-style: italic;
-}
-
 #url_notice {
   padding-top: 4px;
   display: none;

src/editor/svgedit.js

@@ -2056,17 +2056,9 @@ editor.init = () => {
 
         if (tagName === 'text') {
           $('#text_panel').css('display', 'inline');
-          $('#tool_font_size').css('display', 'inline');
+          $('#tool_font_size').css('display', 'inline');          
-          if (svgCanvas.getItalic()) {
+          $id('tool_italic').pressed = (svgCanvas.getItalic()) ? true : false;
-            $('#tool_italic').addClass('push_button_pressed').removeClass('tool_button');
+          $id('tool_bold').pressed = (svgCanvas.getBold()) ? true : false;
-          } else {
-            $('#tool_italic').removeClass('push_button_pressed').addClass('tool_button');
-          }
-          if (svgCanvas.getBold()) {
-            $('#tool_bold').addClass('push_button_pressed').removeClass('tool_button');
-          } else {
-            $('#tool_bold').removeClass('push_button_pressed').addClass('tool_button');
-          }
           $('#font_family').val(elem.getAttribute('font-family'));
           $('#font_size').val(elem.getAttribute('font-size'));
           $('#text').val(elem.textContent);
@@ -4905,6 +4897,9 @@ editor.init = () => {
     $id('layer_down').addEventListener('click', () => moveLayer(1));
     $id('layer_rename').addEventListener('click', layerRename);
 
+    $id('tool_bold').addEventListener('click', clickBold);
+    $id('tool_italic').addEventListener('click', clickItalic);
+
     const toolButtons = [
       {sel: '#tool_clear', fn: clickClear, evt: 'mouseup', key: ['N', true]},
       {sel: '#tool_save', fn () {
@@ -4945,8 +4940,6 @@ editor.init = () => {
       {sel: '#tool_add_subpath', fn: addSubPath, evt: 'click'},
       {sel: '#tool_ungroup', fn: clickGroup, evt: 'click'},
       {sel: '#tool_unlink_use', fn: clickGroup, evt: 'click'},
-      {sel: '#tool_bold', fn: clickBold, evt: 'mousedown'},
-      {sel: '#tool_italic', fn: clickItalic, evt: 'mousedown'},
       {sel: '#sidepanel_handle', fn: toggleSidePanel, key: ['X']},
       {sel: '#copy_save_done', fn: cancelOverlays, evt: 'click'},