From a8d8f346d46d21ce63e30ae83fb618032fd99b40 Mon Sep 17 00:00:00 2001
From: calzoneman <calzoneman@gmail.com>
Date: Wed, 15 May 2013 11:34:27 -0400
Subject: [PATCH] Add editors for CSS and JS

---
 channel.js                 | 43 +++++++++++++++++++++++++++++++++++++-
 package.json               |  2 +-
 rank.js                    |  2 ++
 server.js                  |  2 +-
 user.js                    | 12 +++++++++++
 www/assets/css/ytsync.css  |  6 +++++-
 www/assets/js/callbacks.js | 23 ++++++++++++++++++++
 www/assets/js/client.js    | 30 ++++++++++++++++++++++++++
 www/assets/js/functions.js |  8 +++++++
 www/assets/js/media.js     |  1 -
 www/channel.html           | 20 ++++++++++++++++++
 11 files changed, 144 insertions(+), 5 deletions(-)

diff --git a/channel.js b/channel.js
index b81f8367..4221ce2b 100644
--- a/channel.js
+++ b/channel.js
@@ -75,6 +75,9 @@ var Channel = function(name) {
         time: "00:00"
     };
 
+    this.css = "";
+    this.js = "";
+
     Database.loadChannel(this);
     if(this.registered) {
         this.loadDump();
@@ -152,6 +155,9 @@ Channel.prototype.loadDump = function() {
             for(var i = 0; i < this.chatbuffer.length; i++) {
                 this.sendAll("chatMsg", this.chatbuffer[i]);
             }
+            this.css = data.css || "";
+            this.js = data.js || "";
+            this.sendAll("channelCSSJS", {css: this.css, js: this.js});
             setTimeout(function() { incrementalDump(this); }, 300000);
         }
         catch(e) {
@@ -175,7 +181,9 @@ Channel.prototype.saveDump = function() {
         motd: this.motd,
         logins: this.logins,
         openqueue: this.openqueue,
-        chatbuffer: this.chatbuffer
+        chatbuffer: this.chatbuffer,
+        css: this.css,
+        js: this.js
     };
     var text = JSON.stringify(dump);
     fs.writeFileSync("chandump/" + this.name, text);
@@ -378,6 +386,7 @@ Channel.prototype.userJoin = function(user) {
     user.socket.emit("queueLock", {locked: !this.openqueue});
     this.sendUserlist(user);
     this.sendRecentChat(user);
+    user.socket.emit("channelCSSJS", {css: this.css, js: this.js});
     if(this.poll) {
         user.socket.emit("newPoll", this.poll.packUpdate());
     }
@@ -1225,6 +1234,38 @@ Channel.prototype.tryUpdateOptions = function(user, data) {
     this.broadcastOpts();
 }
 
+Channel.prototype.trySetCSS = function(user, data) {
+    if(!Rank.hasPermission(user, "setcss")) {
+        return;
+    }
+
+    var css = data.css || "";
+    if(css.length > 20000) {
+        css = css.substring(0, 20000);
+    }
+    this.css = css;
+    this.sendAll("channelCSSJS", {
+        css: this.css,
+        js: this.js
+    });
+}
+
+Channel.prototype.trySetJS = function(user, data) {
+    if(!Rank.hasPermission(user, "setjs")) {
+        return;
+    }
+
+    var js = data.js || "";
+    if(js.length > 20000) {
+        js = js.substring(0, 20000);
+    }
+    this.js = js;
+    this.sendAll("channelCSSJS", {
+        css: this.css,
+        js: this.js
+    });
+}
+
 Channel.prototype.updateMotd = function(motd) {
     var html = motd.replace(/\n/g, "<br>");
     //html = this.filterMessage(html);
diff --git a/package.json b/package.json
index c5b7469a..63ded37d 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
     "author": "Calvin Montgomery",
     "name": "CyTube",
     "description": "Online media synchronizer and chat",
-    "version": "1.7.4",
+    "version": "1.7.5",
     "repository": {
         "url": "http://github.com/calzoneman/sync"
     },
diff --git a/rank.js b/rank.js
index f757953b..62ecfd3d 100644
--- a/rank.js
+++ b/rank.js
@@ -21,6 +21,8 @@ var permissions = {
     registerChannel : exports.Owner,
     acl             : exports.Owner,
     chatFilter      : exports.Owner,
+    setcss          : exports.Owner,
+    setjs           : exports.Owner,
     queue           : exports.Moderator,
     assignLeader    : exports.Moderator,
     kick            : exports.Moderator,
diff --git a/server.js b/server.js
index e8b4697b..22fd1863 100644
--- a/server.js
+++ b/server.js
@@ -9,7 +9,7 @@ The above copyright notice and this permission notice shall be included in all c
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 
-const VERSION = "1.7.4";
+const VERSION = "1.7.5";
 
 var fs = require("fs");
 var Logger = require("./logger.js");
diff --git a/user.js b/user.js
index 571f8f13..16b586a8 100644
--- a/user.js
+++ b/user.js
@@ -323,6 +323,18 @@ User.prototype.initCallbacks = function() {
         }
     }.bind(this));
 
+    this.socket.on("setChannelCSS", function(data) {
+        if(this.channel != null) {
+            this.channel.trySetCSS(this, data);
+        }
+    }.bind(this));
+
+    this.socket.on("setChannelJS", function(data) {
+        if(this.channel != null) {
+            this.channel.trySetJS(this, data);
+        }
+    }.bind(this));
+
     this.socket.on("chatFilter", function(data) {
         if(this.channel != null) {
             this.channel.tryChangeFilter(this, data);
diff --git a/www/assets/css/ytsync.css b/www/assets/css/ytsync.css
index a60edcf9..7e6bfaa7 100644
--- a/www/assets/css/ytsync.css
+++ b/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%;
 }
diff --git a/www/assets/js/callbacks.js b/www/assets/js/callbacks.js
index 0166be55..9dbc1aa3 100644
--- a/www/assets/js/callbacks.js
+++ b/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");
diff --git a/www/assets/js/client.js b/www/assets/js/client.js
index 986946f4..0c6ad10b 100644
--- a/www/assets/js/client.js
+++ b/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() {
diff --git a/www/assets/js/functions.js b/www/assets/js/functions.js
index af3fee22..d1e22fbd 100644
--- a/www/assets/js/functions.js
+++ b/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", "");
     }
diff --git a/www/assets/js/media.js b/www/assets/js/media.js
index b9981dcb..c8a7f79e 100644
--- a/www/assets/js/media.js
+++ b/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,
diff --git a/www/channel.html b/www/channel.html
index 6a12f782..55435609 100644
--- a/www/channel.html
+++ b/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>