Improve selection of chat messages

file/js/be.bastelstu.Chat.litcoffee

@@ -51,6 +51,7 @@ exposed by a function if necessary.
 		remainingFailures = 3
 		
 		overlaySmileyList = null
+		markedMessages = {}
 		
 		events =
 			newMessage: $.Callbacks()
@@ -357,11 +358,39 @@ Close private channels
 			
 Visibly mark the message once the associated checkbox is checked.
 
-			$(document).on 'click', '.timsChatMessage :checkbox', (event) ->
+			$(document).on 'click', '.timsChatMessage .timsChatMessageMarker', (event) ->
-				if $(@).is ':checked'
+				elem = $(event.target)
-					$(@).parents('.timsChatMessage').addClass 'jsMarked'
+				parent = elem.parent()
+				messageID = elem.attr('value')
+				
+				if elem.is ':checked'
+					markedMessages[messageID] = messageID
+					checked = true
+					
+					parent.addClass 'checked'
+					parent.siblings().each (key, value) ->
+						checked = $(value).find('.timsChatMessageMarker').is ':checked'
+						
+						checked
+						
+					if checked
+						elem.parents('.timsChatMessage').addClass 'checked'
+						elem.parents('.timsChatTextContainer').siblings('.timsChatMessageBlockMarker').prop 'checked', true
 				else
-					$(@).parents('.timsChatMessage').removeClass 'jsMarked'
+					delete markedMessages[messageID]
+					
+					parent.removeClass 'checked'
+					elem.parents('.timsChatMessage').removeClass 'checked'
+					elem.parents('.timsChatTextContainer').siblings('.timsChatMessageBlockMarker').prop 'checked', false
+					
+			$(document).on 'click', '.timsChatMessageBlockMarker', (event) ->
+				$(event.target).siblings('.timsChatTextContainer').children('li').each (key, value) ->
+					elem = $(value).find '.timsChatMessageMarker'
+					
+					if $(event.target).is ':checked'
+						do elem.click unless elem.is ':checked'
+					else
+						do elem.click if elem.is ':checked'
 
 Scroll down when autoscroll is being activated.
 
@@ -575,7 +604,7 @@ Insert the given messages into the chat stream.
 				events.newMessage.fire message
 				
 				createNewMessage = yes
-				if  $('.timsChatMessage:last-child .timsChatText').is('ul') and lastMessage isnt null and lastMessage.type in [ v.config.messageTypes.NORMAL, v.config.messageTypes.WHISPER ]
+				if  $('.timsChatMessage:last-child .timsChatTextContainer').is('ul') and lastMessage isnt null and lastMessage.type in [ v.config.messageTypes.NORMAL, v.config.messageTypes.WHISPER ]
 					if lastMessage.type is message.type and lastMessage.sender is message.sender and lastMessage.receiver is message.receiver and lastMessage.isInPrivateChannel is message.isInPrivateChannel
 						createNewMessage = no
 				
@@ -611,7 +640,7 @@ Insert the given messages into the chat stream.
 					else
 						messageContainerID = 0
 
-					$("#timsChatMessageContainer#{messageContainerID} .timsChatMessage:last-child .timsChatText").append $(output).find('.timsChatText li:last-child')
+					$("#timsChatMessageContainer#{messageContainerID} .timsChatMessage:last-child .timsChatTextContainer").append $(output).find('.timsChatTextContainer li:last-child')
 				
 				lastMessage = message
 			
@@ -1185,6 +1214,11 @@ And finally export the public methods and variables.
 		Chat =
 			init: init
 			getMessages: getMessages
+
+Return a copy of the object containing the IDs of the marked messages
+
+			getMarkedMessages: -> JSON.parse JSON.stringify markedMessages
+			
 			refreshRoomList: refreshRoomList
 			insertText: insertText
 			freeTheFish: freeTheFish

file/style/be.bastelstu.chat.less

@@ -151,10 +151,6 @@
 			overflow-x: hidden;
 			resize: vertical;
 			
-			.timsChatMarkContainer {
-				display: none;
-			}
-			
 			> ul {
 				> .timsChatMessage {
 					clear: both;
@@ -213,8 +209,8 @@
 								border-width: 1px;
 								border-color: @wcfContainerBorderColor;
 								
-								> .timsChatText {
+								> .timsChatTextContainer {
-									> li {
+									> li.timsChatText {
 										border-style: solid;
 										border-width: 0 0 1px 0;
 										border-color:  @wcfContainerBorderColor;
@@ -300,41 +296,86 @@
 				}
 			}
 			
+			.timsChatMessageMarker, .timsChatMessageBlockMarker {
+				display: none;
+			}
+			
 			&.markEnabled {
-				> ul {
+				.timsChatText {
-					> .timsChatMessage {
+					ul + .timsChatMessageMarker {
-						&.jsMarked {
+						top: 0;
-							> .timsChatInnerMessageContainer {
+					}
-								.timsChatInnerMessage {
+				}
+				
+				.timsChatMessage {
+					&.checked {
+						> .timsChatInnerMessageContainer {
+							&.bubble {
+								> .timsChatInnerMessage {
 									background-color: @wcfSelectedBackgroundColor;
 									color: @wcfSelectedColor;
+									
+									&:after {
+										border-color: transparent @wcfSelectedBackgroundColor;
+									}
 								}
 								
-								&.bubble {
+								&.right {
-									.timsChatInnerMessage {
+									> .timsChatInnerMessage {
 										&:after {
 											border-color: transparent @wcfSelectedBackgroundColor;
 										}
 									}
+								}
+							}
 							
-									&.right {
+							&:not(.bubble) {
-										.timsChatInnerMessage {
+								.timsChatInnerMessage {
-											&:after {
+									background-color: @wcfSelectedBackgroundColor;
-												border-color: transparent @wcfSelectedBackgroundColor;
+									color: @wcfSelectedColor;
-											}
+								}
-										}
+							}
+						}
+					}
+					
+					&:not(.checked) {
+						> .timsChatInnerMessageContainer {
+							&.bubble {
+								.timsChatText {
+									&.checked {
+										background-color: @wcfSelectedBackgroundColor;
+										color: @wcfSelectedColor;
 									}
 								}
 							}
 						}
+					}
 					
-						> .timsChatInnerMessageContainer {
+					> .timsChatInnerMessageContainer {
-							.timsChatMarkContainer {
+							.timsChatMessageMarker {
 								display: inline-block;
-								position: absolute;
+							}
-								right: -@wcfGapLarge;
+							
+							.timsChatMessageBlockMarker {
 								top: 0;
 							}
+							
+							.timsChatMessageMarker, .timsChatMessageBlockMarker {
+								position: absolute;
+								right: -@wcfGapLarge ;
+							}
+							
+						&.bubble {
+							.timsChatMessageMarker, .timsChatMessageBlockMarker {
+								right: -@wcfGapLarge - 1;
+							}
+							
+							&.right {
+								.timsChatMessageMarker, .timsChatMessageBlockMarker {
+									// maybe find a better way, will do it for now
+									right: -@wcfGapLarge - @wcfGapMedium - 32 - 1;
+								}
+							}
 						}
 					}
 				}

language/de.xml

@@ -161,6 +161,7 @@ Probieren Sie, den Chat neu zu laden<!-- , bei Risiken und Nebenwirkungen fragen
 		<item name="chat.global.smilies"><![CDATA[Smileys]]></item>
 		<item name="chat.global.clear"><![CDATA[Chat leeren]]></item>
 		<item name="chat.global.mark"><![CDATA[Markieren]]></item>
+		<item name="chat.global.markAll"><![CDATA[Alle Einzelnachrichten markieren]]></item>
 		<item name="chat.global.fullscreen"><![CDATA[Vollbild]]></item>
 		<item name="chat.global.forceRefresh"><![CDATA[Räume neu laden]]></item>
 		

template/message.tpl

@@ -37,20 +37,25 @@
 			
 			{if $message.type == $messageTypes.NORMAL || $message.type == $messageTypes.WHISPER || $message.type == $messageTypes.ATTACHMENT}
 				{if $message.type == $messageTypes.ATTACHMENT}<span>{lang}chat.message.{$messageTypes.ATTACHMENT}{/lang}</span>{/if}
-				<ul class="timsChatText">
+				<ul class="timsChatTextContainer">
-					<li>
+					<li class="timsChatText" data-message-id="{@$message.messageID}">
 						{if $message.isFollowUp} <time>{@$message.formattedTime}</time>{/if}
 						{@$message.formattedMessage}
+						
+						<input type="checkbox" class="timsChatMessageMarker jsTooltip" value="{@$message.messageID}" title="{lang}chat.global.mark{/lang}"/>
 					</li>
 				</ul>
-			{elseif $message.type == $messageTypes.INFORMATION}
+				
-				<div class="timsChatText">{@$message.formattedMessage}</div>
+				<input type="checkbox" class="timsChatMessageBlockMarker jsTooltip" value="{@$message.messageID}" title="{lang}chat.global.markAll{/lang}" />
 			{else}
-				<span class="timsChatText">{@$message.formattedMessage}</span>
+				<span class="timsChatTextContainer">
+					<span class="timsChatText" data-message-id="{@$message.messageID}">
+						{@$message.formattedMessage}
+						
+						<input type="checkbox" class="timsChatMessageMarker jsTooltip" value="{@$message.messageID}" title="{lang}chat.global.mark{/lang}"/>
+					</span>
+				</span>
 			{/if}
 		</div>
-		<span class="timsChatMarkContainer">
-			<input type="checkbox" value="{@$message.messageID}" />
-		</span>
 	</div>
 {/literal}