Fixing up spoilers - they now use the 'pointer' cursor, and hide correctly for links.

2 files changed, 39 insertions, 9 deletions

diff --git a/css/chat.css b/css/chat.css
index 5279cf8..5973b4d 100644
--- a/css/chat.css
+++ b/css/chat.css
@@ -143,7 +143,24 @@
 
 .chatText.spoiler {
 	color:transparent;
+	
+	/* Change cursor to pointer - http://stackoverflow.com/a/2076480/238419 */
+	cursor: pointer;
+	cursor: hand;
+	
+	/* Don't allow selection - http://stackoverflow.com/a/4407335/238419 */
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.chatText.spoiler a {
+	color:transparent;
 }
+
 .chatText.spoiler:before {
 	content: " Click to reveal Spoiler ";
 	color:#7AF;
diff --git a/pages/chat.php b/pages/chat.php
index 0bc1cb5..0c88990 100644
--- a/pages/chat.php
+++ b/pages/chat.php
@@ -161,7 +161,7 @@ function addChatMessage(displayName, message, postDate, isSelf, isServer, wallCo
 	var isAtBottom = (chatContainer.length == 1 && chatContainer.scrollTop() >= chatContainer[0].scrollHeight - chatContainer.outerHeight() - 1);	

 

 	chatContainer.append('<div class="chatMessage'+strClass+'" id="C_' + chatID + '">' + p + '</div>');

-

+	

 	if (isAtBottom || firstGetChat) {

 		chatContainer.scrollTop(chatContainer[0].scrollHeight);

 	}

@@ -177,13 +177,13 @@ function chatReplaceAndEncode(chat) {
 	

 	//Surround all URLs with a <a> link

 	var URLexp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;

-	chat = chat.replace(URLexp, "<a href='redirect?to=$1' target='_blank'>$1</a>");

+	chat = chat.replace(URLexp, "<a href='redirect?to=$1' target='_blank' onclick='return doNothingWhenClickingLinks();'>$1</a>");

 	

 	//Replace # in the URL with %23

-	chat = chat.replace(/<a href='redirect\?to=(.*?)(#)(.*?)' target='_blank'>/ig, "<a href='redirect?to=$1%23$3' target='_blank'>");

-	chat = chat.replace(/<a href='redirect\?to=(.*?)(&amp;)(.*?)' target='_blank'>/ig, "<a href='redirect?to=$1%26$3' target='_blank'>");

+	chat = chat.replace(/<a href='redirect\?to=(.*?)(#)(.*?)' target='_blank'/ig, "<a href='redirect?to=$1%23$3' target='_blank'");

+	chat = chat.replace(/<a href='redirect\?to=(.*?)(&amp;)(.*?)' target='_blank'/ig, "<a href='redirect?to=$1%26$3' target='_blank'");

 	//Making the bet that not all browsers do the same:

-	chat = chat.replace(/<a href='redirect\?to=(.*?)(&)(.*?)' target='_blank'>/ig, "<a href='redirect?to=$1%26$3' target='_blank'>");

+	chat = chat.replace(/<a href='redirect\?to=(.*?)(&)(.*?)' target='_blank'/ig, "<a href='redirect?to=$1%26$3' target='_blank'");

 

 	return chat;

 }

@@ -218,10 +218,6 @@ function prepChat(chat) {
 	return chat;

 }

 

-function spoil(obj) {

-	$(obj).removeClass("spoiler");

-}

-

 var chatIsBusy = false;

 function getChat(message) {

 	var dataString = 'getChatFromID='+lastID;

@@ -263,10 +259,21 @@ function sendChat() {
 	return false;  

 }

 

+function spoil(obj) {

+	$(obj).removeClass("spoiler");

+	$(obj).children().removeAttr('onclick');

+}

+

 $(document).ready(function() {

     $('#sendChat').live("submit", function() {

         sendChat()

     });

+	

+	//Prevent clicking on links in spoilers

+	$(document).on('click', '.spoiler > a', function()

+	{

+		addChatMessage("Debug", "Child called");

+	});

 });

 

 function htmlEncode(value){

@@ -277,6 +284,12 @@ function htmlEncode(value){
     }

 }

 

+function doNothingWhenClickingLinks()

+{

+	return false;

+}

+

+

 //Code for checking if the window is currently visible or not

 //Adapted from http://stackoverflow.com/a/1060034/238419

 $(function() {