From a31cc6c7592ab3136606568546f62ba9fcf7d76e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= <kasper@kasperrt.no>
Date: Tue, 31 Oct 2017 13:34:12 +0100
Subject: [PATCH 1/2] Added colorpicker polyfill

---
 server/public/assets/css/style.css               | 9 +++++++++
 server/public/assets/js/listeners.js             | 9 +++++++++
 server/public/layouts/main.handlebars            | 2 ++
 server/public/partials/channel/header.handlebars | 2 +-
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css
index c8a7a5ca..0f75f1bc 100755
--- a/server/public/assets/css/style.css
+++ b/server/public/assets/css/style.css
@@ -1927,6 +1927,15 @@ nav ul li:hover, nav ul li.active {
   border-top-left-radius: 4px;
 }
 
+.sp-replacer {
+  border: none;
+  background: none;
+}
+
+#embed.modal.open {
+  overflow-y: visible;
+}
+
 #top-button, #bottom-button{
   color: white;
   position: absolute;
diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js
index baa8c54f..3cf45956 100755
--- a/server/public/assets/js/listeners.js
+++ b/server/public/assets/js/listeners.js
@@ -386,6 +386,15 @@ function init(){
             position: "top",
             tooltip: "Cast Zoff to TV"
         });
+
+        $("#color_embed").spectrum({
+            color: "#808080",
+            change: function(c) {
+                color = c.toHexString().substring(1); // #ff0000
+                $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color));
+            },
+            appendTo: "#embed",
+        });
     }
 
     $("#results" ).hover( function() { $("div.result").removeClass("hoverResults"); i = 0; }, function(){ });
diff --git a/server/public/layouts/main.handlebars b/server/public/layouts/main.handlebars
index 0745e632..3c074486 100644
--- a/server/public/layouts/main.handlebars
+++ b/server/public/layouts/main.handlebars
@@ -27,6 +27,7 @@
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
         <link type="text/css" rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
+        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
         <link rel="stylesheet" type="text/css" href="/assets/css/style.css" title="Default" />
         <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
@@ -46,6 +47,7 @@
         <script type="text/javascript" src="/assets/dist/lib/jquery-ui.min.js"></script>
         <script type="text/javascript" src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js"></script>
         <script type="text/javascript" src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.0.1/color-thief.min.js"></script>
diff --git a/server/public/partials/channel/header.handlebars b/server/public/partials/channel/header.handlebars
index 0aea7cf1..b1e21cce 100644
--- a/server/public/partials/channel/header.handlebars
+++ b/server/public/partials/channel/header.handlebars
@@ -131,7 +131,7 @@
                 <label for="height_embed" class="padding_left_6 embed-label">Height</label>
                 <input type="number" value="300" id="height_embed" class="settings_embed" min="1" />
                 <label for="color_embed" class="padding_left_6 embed-label">Color</label>
-                <input type="color" id="color_embed" class="settings_embed" value="#808080" />
+                <input type="text" id="color_embed" class="settings_embed" value="#808080" />
             </p>
             <textarea id="embed-area"></textarea>
         </div>

From c501b162e8afb5b0387e87b6ec409a03b11c4a98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= <kasper@kasperrt.no>
Date: Tue, 31 Oct 2017 13:55:22 +0100
Subject: [PATCH 2/2] Styled polyfill window for colorpicker to match rest of
 site

---
 server/public/assets/css/style.css   | 21 +++++++++++++++++++++
 server/public/assets/js/listeners.js | 13 +++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css
index 0f75f1bc..976754f3 100755
--- a/server/public/assets/css/style.css
+++ b/server/public/assets/css/style.css
@@ -1927,6 +1927,27 @@ nav ul li:hover, nav ul li.active {
   border-top-left-radius: 4px;
 }
 
+.polyfill-color {
+  border: none;
+  background: white;
+  border-radius: 2px;
+  padding: 12px 12px 0px 12px;
+}
+
+.sp-picker-container {
+  width: auto;
+}
+
+.sp-container button, .sp-container button:hover, .sp-container button:active {
+  background: none;
+  border: none;
+  border-radius: 0;
+  color: black;
+  font-size: inherit;
+  line-height: inherit;
+  box-shadow: none;
+}
+
 .sp-replacer {
   border: none;
   background: none;
diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js
index 3cf45956..3410d490 100755
--- a/server/public/assets/js/listeners.js
+++ b/server/public/assets/js/listeners.js
@@ -394,9 +394,22 @@ function init(){
                 $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color));
             },
             appendTo: "#embed",
+            containerClassName: 'polyfill-color z-depth-4',
+            show: function(color) {
+            },
         });
+
+        $(".sp-choose").addClass("hide");
+        $(".sp-cancel").addClass("btn-flat waves-effect waves-red");
+        $(".sp-cancel").removeClass("sp-cancel");
+        $(".sp-button-container").append("<a href='#' class='btn-flat waves-effect waves-green sp-choose-link'>CHOOSE</a>");
     }
 
+    $(".sp-choose-link").on("click", function(e) {
+        e.preventDefault();
+        $(".sp-choose").trigger("click");
+    });
+
     $("#results" ).hover( function() { $("div.result").removeClass("hoverResults"); i = 0; }, function(){ });
     $("#search").focus();
     $("#embed-button").css("display", "inline-block");