use bootstrap-colorpicker css from yarn

package.json

@@ -72,6 +72,7 @@
   },
   "dependencies": {
     "bootstrap": "^3.3.7",
+    "bootstrap-colorpicker": "^2.3.6",
     "bootstrap-switch": "^3.3.2",
     "core-js": "^2.4.1",
     "crypto-js": "^3.1.8",

src/css/index.js

@@ -1,4 +1,4 @@
-import './lib/bootstrap-colorpicker.css';
+import 'bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css';
 import 'google-code-prettify/src/prettify.css';
 import 'bootstrap/less/bootstrap.less';
 import 'bootstrap-switch/src/less/bootstrap3/build.less';

src/js/index.js

@@ -5,4 +5,5 @@ import 'bootstrap/js/collapse';
 import 'bootstrap/js/modal';
 import 'bootstrap/js/tooltip';
 import 'bootstrap/js/popover';
+import 'bootstrap-colorpicker';
 import './views/html/main.js';

src/js/operations/HTML.js

@@ -226,26 +226,14 @@ const HTML = {
       cmyk = `cmyk(${c}, ${m}, ${y}, ${k})`;
 
         // Generate output
-    return `${"<div id='colorpicker' style='display: inline-block'></div>" +
+    return `${"<div data-cyber-chef-func='colorpicker' data-rgba='" + rgba + "' id='colorpicker' style='display: inline-block'></div>" +
             'Hex:  '}${hex}\n` +
             `RGB:  ${rgb}\n` +
             `RGBA: ${rgba}\n` +
             `HSL:  ${hsl}\n` +
             `HSLA: ${hsla}\n` +
             `CMYK: ${cmyk
-            }<script>\
+            }`;
-                $('#colorpicker').colorpicker({\
-                    format: 'rgba',\
-                    color: '${rgba}',\
-                    container: true,\
-                    inline: true,\
-                }).on('changeColor', function(e) {\
-                    var color = e.color.toRGB();\
-                    document.getElementById('input-text').value = 'rgba(' +\
-                        color.r + ', ' + color.g + ', ' + color.b + ', ' + color.a + ')';\
-                    window.app.auto_bake();\
-                });\
-            </script>`;
   },
 
 
@@ -858,3 +846,5 @@ const HTML = {
   },
 
 };
+
+export default HTML;

src/js/views/html/OutputWaiter.js

@@ -1,5 +1,22 @@
+import $ from 'jquery';
 import Utils from '../../core/Utils';
 
+const inlineFuncs = {
+  colorpicker({ rgba }) {
+    $('#colorpicker').colorpicker({
+        format: 'rgba',
+        color: rgba,
+        container: true,
+        inline: true,
+    }).on('changeColor', function(e) {
+        const { r, g, b, a} = e.color.toRGB();
+        const css = `rgba(${r}, ${g}, ${b}, ${a})`;
+        document.getElementById('input-text').value = css;
+        window.app.auto_bake();
+    });
+  }
+}
+
 /**
  * Waiter to handle events related to the output.
  *
@@ -50,10 +67,13 @@ OutputWaiter.prototype.set = function (data_str, type, duration) {
     output_html.innerHTML = data_str;
 
         // Execute script sections
-    const script_elements = output_html.querySelectorAll('script');
+    const script_elements = output_html.querySelectorAll('[data-cyber-chef-func]');
     for (let i = 0; i < script_elements.length; i++) {
+      const el = script_elements[i];
+      const data = el.dataset;
+      const func = inlineFuncs[data.cyberChefFunc];
       try {
-        eval(script_elements[i].innerHTML); // jshint ignore:line
+        func(data);
       } catch (err) {
         console.error(err);
       }

webpack-babel.js

@@ -34,6 +34,7 @@ function css(target) {
     return extractCSS.extract({
       fallbackLoader: 'style-loader',
       loader: `${cssOptions}${loader}`,
+      publicPath: '../',
     });
   }
 

yarn.lock

@@ -747,6 +747,12 @@ boom@2.x.x:
   dependencies:
     hoek "2.x.x"
 
+bootstrap-colorpicker@^2.3.6:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/bootstrap-colorpicker/-/bootstrap-colorpicker-2.3.6.tgz#816095c35dd7919dcb4de3f0c807f13b121e8f17"
+  dependencies:
+    jquery ">=1.10"
+
 bootstrap-switch@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/bootstrap-switch/-/bootstrap-switch-3.3.2.tgz#79ddb49fadc308fb731e257f95957af48996eea7"
@@ -2893,7 +2899,7 @@ jodid25519@^1.0.0:
   dependencies:
     jsbn "~0.1.0"
 
-jquery@>=1.9.0, jquery@^3.1.1:
+jquery@>=1.10, jquery@>=1.9.0, jquery@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.1.1.tgz#347c1c21c7e004115e0a4da32cece041fad3c8a3"