Started work on channel descriptions and thumby updates.

www/js/channelSettings.js

@@ -19,6 +19,7 @@ class channelSettingsPage{
         //Get channel name off of the URL
         this.channel = window.location.pathname.slice(3).replace('/settings','');
         //Instantiate UX handling objects, making sure to pass the channel name.
+        this.chanInfo = new chanInfo(this.channel);
         this.rankList = new rankList(this.channel);
         this.banList = new banList(this.channel);
         this.permList = new permList(this.channel);
@@ -29,6 +30,81 @@ class channelSettingsPage{
     }
 }
 
+class chanInfo{
+    constructor(channel){
+        //Define channel
+        this.channel = channel;
+        //Define UX elements
+        this.thumbnail = document.querySelector("#channel-info-thumbnail");
+        this.thumbnailInput = document.querySelector("#channel-info-thumbnail-prompt");
+        this.description = document.querySelector("#channel-info-description");
+        //Create description prompt
+        this.descriptionInput = document.createElement("textarea");
+        this.descriptionInput.id = "channel-info-description-prompt";
+
+        //Setup Input Event Handlers
+        this.setupInput();
+    }
+
+    setupInput(){
+        this.thumbnail.addEventListener('click', ()=>{this.toggleThumbnailPrompt(true)});
+        this.thumbnailInput.addEventListener('keydown', this.submitThumbnail.bind(this));
+
+        this.description.addEventListener('click', ()=>{this.toggleDescriptionPrompt(true)})
+        this.descriptionInput.addEventListener('keydown', this.submitDescription.bind(this));
+    }
+
+    toggleThumbnailPrompt(enabled){
+        this.thumbnailInput.style.display = enabled ? "" : "none";
+
+        if(enabled){
+            this.thumbnail.classList.remove('interactive');
+        }else{
+            this.thumbnail.classList.add('interactive');
+        }
+    }
+
+    submitThumbnail(event){
+        //If we hit didnt hit enter or escape
+        if(!(event.key == "Enter" || event.key == "Escape") && event.key != null){
+            //bail!
+            return;
+        }
+
+        //Toggle prompt
+        this.toggleThumbnailPrompt(false);
+
+        //Only returns after this point
+        if(event.key != "Enter" && event.key != null){
+            return;
+        }
+    }
+
+    toggleDescriptionPrompt(enabled){
+        if(enabled){
+            this.description.replaceWith(this.descriptionInput);
+        }else{
+            this.descriptionInput.replaceWith(this.description);
+        }
+    }
+
+    submitDescription(event){
+        //If we hit didnt hit enter (without shift) or escape
+        if(!((event.key == "Enter" && !event.shiftKey) || event.key == "Escape") && event.key != null){
+            //bail!
+            return;
+        }
+
+        //Toggle prompt
+        this.toggleDescriptionPrompt(false);
+
+        //Only returns after this point
+        if(event.key != "Enter" && !event.shiftKey && event.key != null){
+            return;
+        }
+    }
+}
+
 class rankList{
     constructor(channel){
         this.channel = channel
@@ -52,7 +128,7 @@ class rankList{
     }
 
     async submitNewRank(event){
-        if(event.key != "Enter" && event.key != null){
+        if((event.key != "Enter" ) && event.key != null){
             //Bail out if we didn't hit enter
             return;
         }