Add editors for CSS and JS

www/assets/css/ytsync.css

@@ -202,10 +202,14 @@ html, body {
     text-align: center;
 }
 
-#motdtext {
+#motdtext, #csstext, #jstext {
     width: 100%;
 }
 
+#csstext, #jstext {
+    font-family: Monospace;
+}
+
 #queue_next, #queue_end, #library_search, #youtube_search {
     width: 50%;
 }

www/assets/js/callbacks.js

@@ -227,6 +227,29 @@ Callbacks = {
         rebuildPlaylist();
     },
 
+    channelCSSJS: function(data) {
+        console.log("recv cssjs", data);
+        $("#chancss").remove();
+        $("#chanjs").remove();
+
+        $("#csstext").val(data.css);
+        $("#jstext").val(data.js);
+
+        if(data.css) {
+            $("<style/>").attr("type", "text/css")
+                .attr("id", "chancss")
+                .text(data.css)
+                .appendTo($("head"));
+        }
+
+        if(data.js) {
+            $("<script/>").attr("type", "text/javascript")
+                .attr("id", "chanjs")
+                .text(data.js)
+                .appendTo($("body"));
+        }
+    },
+
     banlist: function(data) {
         var entries = data.entries;
         var tbl = $("#banlist table");

www/assets/js/client.js

@@ -413,6 +413,36 @@ $("#show_motdeditor").click(function() {
     $("#motdeditor").show();
 });
 
+$("#show_csseditor").click(function() {
+    $("#modnav li").each(function() {
+        $(this).removeClass("active");
+    });
+    $(".modonly").hide();
+    $("#show_csseditor").parent().addClass("active");
+    $("#csseditor").show();
+});
+
+$("#updatecss").click(function() {
+    socket.emit("setChannelCSS", {
+        css: $("#csstext").val()
+    });
+});
+
+$("#show_jseditor").click(function() {
+    $("#modnav li").each(function() {
+        $(this).removeClass("active");
+    });
+    $(".modonly").hide();
+    $("#show_jseditor").parent().addClass("active");
+    $("#jseditor").show();
+});
+
+$("#updatejs").click(function() {
+    socket.emit("setChannelJS", {
+        js: $("#jstext").val()
+    });
+});
+
 $("#show_filtereditor").click(function() {
     if(RANK >= Rank.Owner) {
         $("#modnav li").each(function() {

www/assets/js/functions.js

@@ -654,6 +654,14 @@ function handleRankChange() {
         $("#clearplaylist").css("display", "none");
         $("#shuffleplaylist").css("display", "none");
     }
+    if(RANK >= Rank.Owner) {
+        $("#show_jseditor").parent().css("display", "");
+        $("#show_csseditor").parent().css("display", "");
+    }
+    else {
+        $("#show_jseditor").parent().css("display", "none");
+        $("#show_csseditor").parent().css("display", "none");
+    }
     if(RANK >= 10) {
         $("#drop_channel").parent().css("display", "");
     }

www/assets/js/media.js

@@ -54,7 +54,6 @@ Media.prototype.nullPlayer = function() {
 
 Media.prototype.initYouTube = function() {
     this.removeOld();
-    console.log("init YouTube");
     this.player = new YT.Player("ytapiplayer", {
         height: VHEIGHT,
         width: VWIDTH,

www/channel.html

@@ -134,6 +134,12 @@
                     <li>
                         <a href="javascript:void(0)" id="show_motdeditor">MOTD</a>
                     </li>
+                    <li style="display: none">
+                        <a href="javascript:void(0)" id="show_csseditor">CSS Editor</a>
+                    </li>
+                    <li style="display: none">
+                        <a href="javascript:void(0)" id="show_jseditor">JS Editor</a>
+                    </li>
                     <li>
                         <a href="javascript:void(0)" id="show_filtereditor">Chat Filters</a>
                     </li>
@@ -242,6 +248,20 @@
                 <button class="btn btn-primary" id="updatemotd">Update</button>
             </div>
         </div>
+        <div class="row modonly" id="csseditor" style="display: none;">
+            <div class="span12">
+                <p>Max 20KB.  If you need more CSS, host the file somewhere and use the External CSS channel option</p>
+                <textarea rows="10" id="csstext"></textarea>
+                <button class="btn btn-primary" id="updatecss">Update</button>
+            </div>
+        </div>
+        <div class="row modonly" id="jseditor" style="display: none;">
+            <div class="span12">
+                <p>Max 20KB.  If you need more JS, host the file somewhere and use the External JS channel option</p>
+                <textarea rows="10" id="jstext"></textarea>
+                <button class="btn btn-primary" id="updatejs">Update</button>
+            </div>
+        </div>
         <div class="row modonly" id="filtereditor" style="display: none;">
             <div class="span12">
                 <p><strong>Note:</strong> if you just want simple word replacement, like emoticons, put the word in the Regex field, use <code>ig</code> for the flags, and put the replacement in the Replacement field.</p>