web/chatview.html - jami-client-gnome - Gitiles

 <html>


 <!-- Empty head might be needed for setSenderImage -->
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta charset=“utf-8”>
 </head>

 <body>
     <div id="messages">
     </div>
 </body>

 <!--
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://soapbox.github.io/linkifyjs/js/linkify/linkify.min.js"></script>
 <script src="https://soapbox.github.io/linkifyjs/js/linkify/linkify-string.min.js"></script>
 <script src="https://soapbox.github.io/linkifyjs/js/linkify/linkify-jquery.min.js"></script>
 <script src="https://soapbox.github.io/linkifyjs/js/linkify/linkify-html.min.js"></script>
 -->

 <script>
 var ring = {}; // ring namespace

 ring.chatview = (function(){
     var dev = {}; // ring.chatview.dev namespace

     /**
      * Clears all messages
      */
     function clearMessages()
     {
         $( "#messages" ).empty();
     }

     /**
      * Converts text to HTML
      */
     function escapeHtml(html)
     {
         var text = document.createTextNode(html);
         var div = document.createElement('div');
         div.appendChild(text);
         return div.innerHTML;
     }

     /**
      * Returns HTML message from the message text.
      * Cleaned and linkified.
      */
     function getMessageHtml(message_text)
     {
         escaped_message = escapeHtml(message_text);
         linkified_message = linkifyHtml(escaped_message, {});
         return linkified_message;
     }

     /**
      * Returns the message status, formatted for display
      */
     function getMessageDeliveryStatusText(message_delivery_status)
     {
         var formatted_delivery_status = message_delivery_status;

         switch(message_delivery_status)
         {
             case "unknown":
                 formatted_delivery_status = "";
                 break;
             case "sending":
                 formatted_delivery_status = "Sending<svg overflow='visible' viewBox='0 -2 16 14' height='16px' width='16px'><circle class='status_circle anim-first' cx='4' cy='12' r='1'/><circle class='status_circle anim-second' cx='8' cy='12' r='1'/><circle class='status_circle anim-third' cx='12' cy='12' r='1'/></svg>"
                 break;
             case "read":
                 break;
             case "failure":
                 formatted_delivery_status = "Failure <svg overflow='visible' viewBox='0 -2 16 14' height='16px' width='16px'><path class='status-x x-first' stroke='#AA0000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' fill='none' d='M4,4 L12,12'/><path class='status-x x-second' stroke='#AA0000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' fill='none' d='M12,4 L4,12'/></svg>"
                 break;
             case "sent":
                 formatted_delivery_status = "Sent <svg overflow='visible' viewBox='0 -2 16 14' height='16px' width='16px'><path class='status-check' stroke='#008000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' fill='none' d='M2,8 L6,12 L14,4'/></svg>";
                 break;
             default:
                 console.log("getMessageDeliveryStatusText: unknown delivery status: " + message_delivery_status);
                 break;
         }

         return formatted_delivery_status;
     }

     /**
      * Returns the message date, formatted for display
      */
     function getMessageTimestampText(message_timestamp)
     {
         return new Date(1000 * message_timestamp).toLocaleString();
     }

    /**
     * Adds a message to the buffer, or update it if new_message is
     * TRUE
     */
     function addOrUpdateMessage(message_object, new_message)
     {
         // Properties of the message object
         message_id = message_object["id"];
         message_text = message_object["text"];
         message_sender = message_object["sender"];
         message_sender_contact_method = message_object["sender_contact_method"];
         message_timestamp = message_object["timestamp"];
         message_direction = message_object["direction"];
         message_delivery_status = message_object["delivery_status"];

         if (new_message)
         {
             message_div_classes = [
                 "message",
                 "message_" + message_direction
             ];

             $message_div = $(
                 "<div>",
                 {
                     id: "message_" + message_id,
                     class: message_div_classes.join(" "),
                 }
             );

             $message_wrapper = $("<div>", { class: "message_wrapper"});

             $message_text = $("<span>", { class: "message_text" });
             $message_sender = $("<span>", { class: "message_sender" });
             $message_delivery_status = $("<span>", { class: "message_delivery_status" });
             $message_timestamp = $("<span>", { class: "message_timestamp" });

             $message_wrapper.append($message_text);
             $message_wrapper.append($message_sender);


             // Sender image
             $message_sender_span = $("<span>", { class: "message_sender_image" });
             $message_sender_image = $("<span>", { class: "sender_image sender_image_" + message_sender_contact_method });


             $message_div.append($message_sender_image);
             $message_div.append($message_wrapper);
             $message_div.append($message_delivery_status);

             $("#messages").append($message_div);
         }
         else
         {
             message_selector = "#message_" + message_id;
             $message_text = $(message_selector + " .message_text");
             $message_sender_image = $(message_selector + " .message_sender_image");
             $message_sender = $(message_selector + " .message_sender");
             $message_delivery_status = $(message_selector + " .message_delivery_status");
             $message_timestamp = $(message_selector + " .message_timestamp");
         }

         // Set the variables
         $message_text.html(getMessageHtml(message_text));
         $message_sender.text(message_sender + ": ");
         $message_delivery_status.html(getMessageDeliveryStatusText(message_delivery_status));
         $message_timestamp.text(getMessageTimestampText(message_timestamp));
         $message_div.find($message_wrapper).append($message_timestamp);

     }


     /**
      * Add a message to the buffer
      */
     function addMessage(message_object)
     {
         addOrUpdateMessage(message_object, true);

         // Scroll to bottom
         window.scrollTo(0, document.body.scrollHeight);
     }

     /**
      * Updated a message that was previously added with addMessage
      */
     function updateMessage(message_object)
     {
         addOrUpdateMessage(message_object, false);
     }

     /**
      * Sets the image for a given sender
      * set_sender_image object should contain the following keys:
      * - sender: the name of the sender
      * - sender_image: base64 png encoding of the sender image
      */
     function setSenderImage(set_sender_image_object)
     {
         sender_contact_method = set_sender_image_object['sender_contact_method'];
         sender_image = set_sender_image_object['sender_image'];

         sender_image_id = "sender_image_" + sender_contact_method;

         // Remove the currently set sender image
         $("#" + sender_image_id).remove();

         // Create a new style element
         var style = document.createElement('style');
         style.type = 'text/css';
         style.id = sender_image_id
         style.innerHTML = '.' + sender_image_id + " { \n content: url(data:image/png;base64," + sender_image + "); \n height: 35px; \n width: 35px; \n }";
         document.getElementsByTagName('head')[0].appendChild(style);
     }

     function clearSenderImages()
     {
         document.getElementsByTagName('head')[0].innerHTML = "";
     }

     return {
         addMessage: addMessage,
         updateMessage: updateMessage,
         setSenderImage: setSenderImage,
         dev: dev,
         clearMessages: clearMessages,
         clearSenderImages: clearSenderImages,
     }

 })();

 /* DEV functions */
 ring.chatview.dev = (function(){


     /**
      * Fills the backlog with bogus messages
      */
     function fillMessages()
     {
         ring.chatview.clearMessages();

         profile_picture = "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";

         // Set the profile pictures
         ring.chatview.setSenderImage(
             {
                 "sender": "Me",
                 "sender_image": profile_picture,
             }
         );

         ring.chatview.setSenderImage(
             {
                 "sender": "Other Guy",
                 "sender_image": profile_picture,
             }
         )


         // Create messages
         ring.chatview.addMessage(
             {
                 "id": 0,
                 "text": "Hello! This message's status will be updated to sent.",
                 "sender": "Me",
                 "timestamp": 1475275399,
                 "direction": "out",
                 "delivery_status": "sending",
             }
         );

         ring.chatview.updateMessage(
             {
                 "id": 0,
                 "text": "Hello! This message's status will be updated to sent.",
                 "sender": "Me",
                 "timestamp": 1475275399,
                 "direction": "out",
                 "delivery_status": "sending",
             }
         );

         ring.chatview.addMessage(
             {
                 "id": 1,
                 "text": "Hey! This message's status is 'Unknown', we shouldn't display that to the user.",
                 "sender": "Other Guy",
                 "timestamp": 1475275399,
                 "direction": "in",
                 "delivery_status": "unknown",
             }
         );

         ring.chatview.addMessage(
             {
                 "id": 1,
                 "text": "This is the second message in a row from me. Don't bother displaying my profile picture twice.",
                 "sender": "Other Guy",
                 "timestamp": 1475275399,
                 "direction": "in",
                 "delivery_status": "unknown",
             }
         );

         ring.chatview.addMessage(
             {
                 "id": 0,
                 "text": "Now its my turn to speak!",
                 "sender": "Me",
                 "timestamp": 1475275399,
                 "direction": "out",
                 "delivery_status": "sent",
             }
         );

          ring.chatview.addMessage(
              {
                "id": 5,
                "text": "Hello! This message's status will be updated to sent.",
                "sender": "Me",
                "timestamp": 1475275399,
                "direction": "out",
                "delivery_status": "sending",
              }
              );


          ring.chatview.updateMessage(
              {
                "id": 5,
                "text": "Hello! This message's status will be updated to sent.",
                "sender": "Me",
                "timestamp": 1475275399,
                "direction": "out",
                "delivery_status": "failure",
              }
              );

     }

     return {
         fillMessages: fillMessages,
     }

 })();

 </script>

 </html>
	<html>


	<!-- Empty head might be needed for setSenderImage -->
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta charset=“utf-8”>
	</head>

	<body>
	<div id="messages">
	</div>
	</body>

	<!--
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://soapbox.github.io/linkifyjs/js/linkify/linkify.min.js"></script>
	<script src="https://soapbox.github.io/linkifyjs/js/linkify/linkify-string.min.js"></script>
	<script src="https://soapbox.github.io/linkifyjs/js/linkify/linkify-jquery.min.js"></script>
	<script src="https://soapbox.github.io/linkifyjs/js/linkify/linkify-html.min.js"></script>
	-->

	<script>
	var ring = {}; // ring namespace

	ring.chatview = (function(){
	var dev = {}; // ring.chatview.dev namespace

	/**
	* Clears all messages
	*/
	function clearMessages()
	{
	$( "#messages" ).empty();
	}

	/**
	* Converts text to HTML
	*/
	function escapeHtml(html)
	{
	var text = document.createTextNode(html);
	var div = document.createElement('div');
	div.appendChild(text);
	return div.innerHTML;
	}

	/**
	* Returns HTML message from the message text.
	* Cleaned and linkified.
	*/
	function getMessageHtml(message_text)
	{
	escaped_message = escapeHtml(message_text);
	linkified_message = linkifyHtml(escaped_message, {});
	return linkified_message;
	}

	/**
	* Returns the message status, formatted for display
	*/
	function getMessageDeliveryStatusText(message_delivery_status)
	{
	var formatted_delivery_status = message_delivery_status;

	switch(message_delivery_status)
	{
	case "unknown":
	formatted_delivery_status = "";
	break;
	case "sending":
	formatted_delivery_status = "Sending<svg overflow='visible' viewBox='0 -2 16 14' height='16px' width='16px'><circle class='status_circle anim-first' cx='4' cy='12' r='1'/><circle class='status_circle anim-second' cx='8' cy='12' r='1'/><circle class='status_circle anim-third' cx='12' cy='12' r='1'/></svg>"
	break;
	case "read":
	break;
	case "failure":
	formatted_delivery_status = "Failure <svg overflow='visible' viewBox='0 -2 16 14' height='16px' width='16px'><path class='status-x x-first' stroke='#AA0000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' fill='none' d='M4,4 L12,12'/><path class='status-x x-second' stroke='#AA0000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' fill='none' d='M12,4 L4,12'/></svg>"
	break;
	case "sent":
	formatted_delivery_status = "Sent <svg overflow='visible' viewBox='0 -2 16 14' height='16px' width='16px'><path class='status-check' stroke='#008000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' fill='none' d='M2,8 L6,12 L14,4'/></svg>";
	break;
	default:
	console.log("getMessageDeliveryStatusText: unknown delivery status: " + message_delivery_status);
	break;
	}

	return formatted_delivery_status;
	}

	/**
	* Returns the message date, formatted for display
	*/
	function getMessageTimestampText(message_timestamp)
	{
	return new Date(1000 * message_timestamp).toLocaleString();
	}

	/**
	* Adds a message to the buffer, or update it if new_message is
	* TRUE
	*/
	function addOrUpdateMessage(message_object, new_message)
	{
	// Properties of the message object
	message_id = message_object["id"];
	message_text = message_object["text"];
	message_sender = message_object["sender"];
	message_sender_contact_method = message_object["sender_contact_method"];
	message_timestamp = message_object["timestamp"];
	message_direction = message_object["direction"];
	message_delivery_status = message_object["delivery_status"];

	if (new_message)
	{
	message_div_classes = [
	"message",
	"message_" + message_direction
	];

	$message_div = $(
	"<div>",
	{
	id: "message_" + message_id,
	class: message_div_classes.join(" "),
	}
	);

	$message_wrapper = $("<div>", { class: "message_wrapper"});

	$message_text = $("<span>", { class: "message_text" });
	$message_sender = $("<span>", { class: "message_sender" });
	$message_delivery_status = $("<span>", { class: "message_delivery_status" });
	$message_timestamp = $("<span>", { class: "message_timestamp" });

	$message_wrapper.append($message_text);
	$message_wrapper.append($message_sender);


	// Sender image
	$message_sender_span = $("<span>", { class: "message_sender_image" });
	$message_sender_image = $("<span>", { class: "sender_image sender_image_" + message_sender_contact_method });


	$message_div.append($message_sender_image);
	$message_div.append($message_wrapper);
	$message_div.append($message_delivery_status);

	$("#messages").append($message_div);
	}
	else
	{
	message_selector = "#message_" + message_id;
	$message_text = $(message_selector + " .message_text");
	$message_sender_image = $(message_selector + " .message_sender_image");
	$message_sender = $(message_selector + " .message_sender");
	$message_delivery_status = $(message_selector + " .message_delivery_status");
	$message_timestamp = $(message_selector + " .message_timestamp");
	}

	// Set the variables
	$message_text.html(getMessageHtml(message_text));
	$message_sender.text(message_sender + ": ");
	$message_delivery_status.html(getMessageDeliveryStatusText(message_delivery_status));
	$message_timestamp.text(getMessageTimestampText(message_timestamp));
	$message_div.find($message_wrapper).append($message_timestamp);

	}


	/**
	* Add a message to the buffer
	*/
	function addMessage(message_object)
	{
	addOrUpdateMessage(message_object, true);

	// Scroll to bottom
	window.scrollTo(0, document.body.scrollHeight);
	}

	/**
	* Updated a message that was previously added with addMessage
	*/
	function updateMessage(message_object)
	{
	addOrUpdateMessage(message_object, false);
	}

	/**
	* Sets the image for a given sender
	* set_sender_image object should contain the following keys:
	* - sender: the name of the sender
	* - sender_image: base64 png encoding of the sender image
	*/
	function setSenderImage(set_sender_image_object)
	{
	sender_contact_method = set_sender_image_object['sender_contact_method'];
	sender_image = set_sender_image_object['sender_image'];

	sender_image_id = "sender_image_" + sender_contact_method;

	// Remove the currently set sender image
	$("#" + sender_image_id).remove();

	// Create a new style element
	var style = document.createElement('style');
	style.type = 'text/css';
	style.id = sender_image_id
	style.innerHTML = '.' + sender_image_id + " { \n content: url(data:image/png;base64," + sender_image + "); \n height: 35px; \n width: 35px; \n }";
	document.getElementsByTagName('head')[0].appendChild(style);
	}

	function clearSenderImages()
	{
	document.getElementsByTagName('head')[0].innerHTML = "";
	}

	return {
	addMessage: addMessage,
	updateMessage: updateMessage,
	setSenderImage: setSenderImage,
	dev: dev,
	clearMessages: clearMessages,
	clearSenderImages: clearSenderImages,
	}

	})();

	/* DEV functions */
	ring.chatview.dev = (function(){



	/**
	* Fills the backlog with bogus messages
	*/
	function fillMessages()
	{
	ring.chatview.clearMessages();

	profile_picture = "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";

	// Set the profile pictures
	ring.chatview.setSenderImage(
	{
	"sender": "Me",
	"sender_image": profile_picture,
	}
	);

	ring.chatview.setSenderImage(
	{
	"sender": "Other Guy",
	"sender_image": profile_picture,
	}
	)


	// Create messages
	ring.chatview.addMessage(
	{
	"id": 0,
	"text": "Hello! This message's status will be updated to sent.",
	"sender": "Me",
	"timestamp": 1475275399,
	"direction": "out",
	"delivery_status": "sending",
	}
	);

	ring.chatview.updateMessage(
	{
	"id": 0,
	"text": "Hello! This message's status will be updated to sent.",
	"sender": "Me",
	"timestamp": 1475275399,
	"direction": "out",
	"delivery_status": "sending",
	}
	);

	ring.chatview.addMessage(
	{
	"id": 1,
	"text": "Hey! This message's status is 'Unknown', we shouldn't display that to the user.",
	"sender": "Other Guy",
	"timestamp": 1475275399,
	"direction": "in",
	"delivery_status": "unknown",
	}
	);

	ring.chatview.addMessage(
	{
	"id": 1,
	"text": "This is the second message in a row from me. Don't bother displaying my profile picture twice.",
	"sender": "Other Guy",
	"timestamp": 1475275399,
	"direction": "in",
	"delivery_status": "unknown",
	}
	);

	ring.chatview.addMessage(
	{
	"id": 0,
	"text": "Now its my turn to speak!",
	"sender": "Me",
	"timestamp": 1475275399,
	"direction": "out",
	"delivery_status": "sent",
	}
	);

	ring.chatview.addMessage(
	{
	"id": 5,
	"text": "Hello! This message's status will be updated to sent.",
	"sender": "Me",
	"timestamp": 1475275399,
	"direction": "out",
	"delivery_status": "sending",
	}
	);


	ring.chatview.updateMessage(
	{
	"id": 5,
	"text": "Hello! This message's status will be updated to sent.",
	"sender": "Me",
	"timestamp": 1475275399,
	"direction": "out",
	"delivery_status": "failure",
	}
	);

	}

	return {
	fillMessages: fillMessages,
	}

	})();

	</script>

	</html>