API tools faq
paste
Advertisement
salahzar

chat.html

salahzar
Aug 13th, 2018
533
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 21.01 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!--
  3. //  ChatPage.html
  4. //
  5. //  Created by Faye Li on 3 Feb 2017
  6. //  Modified by Don Hopkins (dhopkins@donhopkins.com).
  7. //  Copyright 2017 High Fidelity, Inc.
  8. //
  9. //  Distributed under the Apache License, Version 2.0.
  10. //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
  11. -->
  12. <html>
  13.     <head>
  14.         <title>Chat</title>
  15.         <meta charset="utf-8">
  16.         <meta name="viewport" content="width=device-width, initial-scale=1">
  17.         <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700"" rel="stylesheet">
  18.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  19.  
  20.         <style>
  21.             input[type=button],
  22.             button {
  23.                 font-family: 'Raleway';
  24.                 font-weight: bold;
  25.                 font-size: 20px;
  26.                 vertical-align: top;
  27.                 width: 100%;
  28.                 height: 40px;
  29.                 min-width: 120px;
  30.                 padding: 0px 18px;
  31.                 margin-top: 5px;
  32.                 margin-right: 6px;
  33.                 border-radius: 5px;
  34.                 border: none;
  35.                 color: #fff;
  36.                 background-color: #000;
  37.                 background: linear-gradient(#343434 20%, #000 100%);
  38.                 cursor: pointer;
  39.             }
  40.  
  41.             .commandButton {
  42.                 width: 100px !important;
  43.             }
  44.  
  45.             input[type=text] {
  46.                 font-family: 'Raleway';
  47.                 font-weight: bold;
  48.                 font-size: 20px;
  49.                 vertical-align: top;
  50.                 height: 40px;
  51.                 color: #000;
  52.                 width: 100%;
  53.                 background-color: #fff;
  54.                 background: linear-gradient(#343434 20%, #fff 100%);
  55.             }
  56.  
  57.             input[type=button].red {
  58.                 color: #fff;
  59.                 background-color: #94132e;
  60.                 background: linear-gradient(#d42043 20%, #94132e 100%);
  61.             }
  62.             input[type=button].blue {
  63.                 color: #fff;
  64.                 background-color: #1080b8;
  65.                 background: linear-gradient(#00b4ef 20%, #1080b8 100%);
  66.             }
  67.             input[type=button].white {
  68.                 color: #121212;
  69.                 background-color: #afafaf;
  70.                 background: linear-gradient(#fff 20%, #afafaf 100%);
  71.             }
  72.  
  73.             input[type=button]:enabled:hover {
  74.                 background: linear-gradient(#000, #000);
  75.                 border: none;
  76.             }
  77.             input[type=button].red:enabled:hover {
  78.                 background: linear-gradient(#d42043, #d42043);
  79.                 border: none;
  80.             }
  81.             input[type=button].blue:enabled:hover {
  82.                 background: linear-gradient(#00b4ef, #00b4ef);
  83.                 border: none;
  84.             }
  85.             input[type=button].white:enabled:hover {
  86.                 background: linear-gradient(#fff, #fff);
  87.                 border: none;
  88.             }
  89.  
  90.             input[type=button]:active {
  91.                 background: linear-gradient(#343434, #343434);
  92.             }
  93.             input[type=button].red:active {
  94.                 background: linear-gradient(#94132e, #94132e);
  95.             }
  96.             input[type=button].blue:active {
  97.                 background: linear-gradient(#1080b8, #1080b8);
  98.             }
  99.             input[type=button].white:active {
  100.                 background: linear-gradient(#afafaf, #afafaf);
  101.             }
  102.  
  103.             input[type=button]:disabled {
  104.                 color: #252525;
  105.                 background: linear-gradient(#575757 20%, #252525 100%);
  106.             }
  107.  
  108.             input[type=button][pressed=pressed] {
  109.                 color: #00b4ef;
  110.             }
  111.  
  112.             body {
  113.                 width: 100%;
  114.                 overflow-x: hidden;
  115.                 overflow-y: hidden;
  116.                 margin: 0;
  117.                 font-family: 'Raleway', sans-serif;
  118.                 color: white;
  119.                 background: linear-gradient(#2b2b2b, #0f212e);
  120.             }
  121.  
  122.             .Content {
  123.                 font-size: 20px;
  124.                 width: 100%;
  125.                 height: 100%;
  126.                 display: flex;
  127.                 flex-direction: column;
  128.             }
  129.  
  130.             .TopBar {
  131.                 height: 40px;
  132.                 background: linear-gradient(#2b2b2b, #1e1e1e);
  133.                 font-weight: bold;
  134.                 padding: 10px 10px 10px 10px;
  135.                 display: flex;
  136.                 align-items: center;
  137.                 width: 100%;
  138.                 font-size: 28px;
  139.                 flex-grow: 0;
  140.             }
  141.  
  142.             .ChatLog {
  143.                 padding: 20px;
  144.                 font-size: 20px;
  145.                 flex-grow: 1;
  146.                 color: white;
  147.                 background-color: black;
  148.                 overflow-x: hidden;
  149.                 overflow-y: scroll;
  150.                 word-wrap: break-word;
  151.             }
  152.  
  153.             .ChatLogLine {
  154.                 margin-bottom: 15px;
  155.             }
  156.  
  157.             .ChatLogLineDisplayName {
  158.                 font-weight: bold;
  159.             }
  160.  
  161.             .ChatLogLineMessage {
  162.             }
  163.  
  164.             .LogLogLine {
  165.                 margin-bottom: 15px;
  166.             }
  167.  
  168.             .LogLogLineMessage {
  169.                 font-style: italic;
  170.             }
  171.  
  172.             .ChatInput {
  173.                 display: flex;
  174.                 flex-direction: row;
  175.                 flex-grow: 0;
  176.             }
  177.  
  178.             .ChatInputText {
  179.                 padding: 20px 20px 20px 20px;
  180.                 height: 60px !important;
  181.                 font-size: 20px !important;
  182.                 flex-grow: 1;
  183.                 display: flex;
  184.                 flex-direction: column;
  185.             }
  186.             .responsive {
  187.                 width: 100%;
  188.                 max-width: 420px;
  189.                 height: auto;
  190.             }
  191.  
  192.         </style>
  193.     </head>
  194.     <body>
  195.  
  196.         <div class="Content">
  197.  
  198.             <div class="TopBar">
  199.                 <b>Chat</b>
  200.             </div>
  201.  
  202.             <div class="ChatLog" id="ChatLog"></div>
  203.  
  204.             <div class="ChatInput">
  205.               <input type="text" class="ChatInputText" id="ChatInputText" size="256" maxlength="256" />
  206.             </div>
  207.  
  208.         </div>
  209.  
  210.     </body>
  211.  
  212.     <script>
  213. //linky function
  214.  
  215. (function($) {
  216.  
  217.     "use strict";
  218.  
  219.     $.fn.linky = function(options) {
  220.         return this.each(function() {
  221.             var $el = $(this),
  222.                 linkifiedContent = _linkify($el, options);
  223.  
  224.             $el.html(linkifiedContent);
  225.         });
  226.     };
  227.  
  228.     function _linkify($el, options) {
  229.         var links = {
  230.                 twitter: {
  231.                     baseUrl: "https://twitter.com/",
  232.                     hashtagSearchUrl: "hashtag/"
  233.                 },
  234.                 instagram: {
  235.                     baseUrl: "http://instagram.com/",
  236.                     hashtagSearchUrl: null // Doesn't look like there is one?
  237.                 },
  238.                 github: {
  239.                     baseUrl: "https://github.com/",
  240.                     hashtagSearchUrl: null
  241.                 }
  242.             },
  243.             defaultOptions = {
  244.                 mentions: false,
  245.                 hashtags: false,
  246.                 urls: true,
  247.                 linkTo: "twitter" // Let's default to Twitter
  248.             },
  249.             extendedOptions = $.extend(defaultOptions, options),
  250.             elContent = $el.html(),
  251.             // Regular expression courtesy of Matthew O'Riordan, see: http://goo.gl/3syEKK
  252.             urlRegEx = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;,:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+,~%\/\.\w\-]*)?\??(?:[\-\+=&;,:%@\.\w]*)#?(?:[\.\!\/\\\w]*))?)/g,
  253.             matches;
  254.  
  255.             // Linkifying URLs
  256.             if (extendedOptions.urls) {
  257.                 matches = elContent.match(urlRegEx);
  258.                 if (matches) {
  259.                     elContent = _linkifyUrls(matches, $el);
  260.                 }
  261.             }
  262.  
  263.             // Linkifying mentions
  264.             if (extendedOptions.mentions) {
  265.                 elContent = _linkifyMentions(elContent, links[extendedOptions.linkTo].baseUrl);
  266.             }
  267.  
  268.             // Linkifying hashtags
  269.             if (extendedOptions.hashtags) {
  270.                 elContent = _linkifyHashtags(elContent, links[extendedOptions.linkTo]);
  271.             }
  272.  
  273.         return elContent;
  274.     }
  275.  
  276.     // For any URLs present, unless they are already identified within
  277.     // an `a` element, linkify them.
  278.     function _linkifyUrls(matches, $el) {
  279.         var elContent = $el.html();
  280.  
  281.         $.each(matches, function() {
  282.        
  283.             var ext = this.split('.').pop();
  284.            
  285.             switch(true){
  286.             case ext == "png":
  287.             case ext == "jpg":
  288.             case ext == "gif":
  289.             case ext == "jpeg":
  290.                 elContent = elContent.replace(this, "<img src='" + this + "'class=\"responsive\">");
  291.                 break;
  292.             case ext == "webm":
  293.                 elContent = elContent.replace(this, "<video controls class=\"responsive\"><source src='" + this + "' type='video/" + ext + "'></video>");
  294.                 break;
  295.             case !!this.match(/^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/):
  296.                 var youtubeMatch = this.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);
  297.                 if(youtubeMatch && youtubeMatch[2].length == 11 && this.match(/^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/)){
  298.                     elContent = "<iframe width='420' height='236' src='//www.youtube.com/embed/" + youtubeMatch[2] + "' frameborder='0'></iframe>";
  299.                     break;
  300.                 }
  301.                 // else fall through to default
  302.             default:
  303.                     elContent = elContent.replace(this, "<a href='" + this + "' target='_blank'>" + this + "</a>");
  304.                 break;
  305.             }
  306.  
  307.         });
  308.         return elContent;
  309.     }
  310.  
  311.     // Find any mentions (e.g. @andrs) and turn them into links that
  312.     // refer to the appropriate social profile (e.g. twitter or instagram).
  313.     function _linkifyMentions(text, baseUrl) {
  314.         return text.replace(/(^|\s|\(|>)@(\w+)/g, "$1<a href='" + baseUrl + "$2' target='_blank'>@$2</a>");
  315.     }
  316.  
  317.     // Find any hashtags (e.g. #linkyrocks) and turn them into links that refer
  318.     // to the appropriate social profile.
  319.     function _linkifyHashtags(text, links) {
  320.         // If there is no search URL for a hashtag, there isn't much we can do
  321.         if (links.hashtagSearchUrl === null) return text;
  322.         return text.replace(/(^|\s|\(|>)#((\w|[\u00A1-\uFFFF])+)/g, "$1<a href='" + links.baseUrl + links.hashtagSearchUrl + "$2' target='_blank'>#$2</a>");
  323.     }
  324.  
  325. }(jQuery));
  326.  
  327.         //console.log("ChatPage: loading script...");
  328.  
  329.         var messageData = {}; // The data that is sent along with the message.
  330.         var typing = false; // True while the user is typing.
  331.         var typingTimerDuration = 1; // How long to wait before ending typing, in seconds.
  332.         var typingTimer = null; // The timer to end typing.
  333.         var $ChatLog; // The scrolling chat log.
  334.         var $ChatInputText; // The text field for entering text.
  335.  
  336.         // Recreate the lines in chatLog as the DOM in $ChatLog.
  337.         function updateChatLog() {
  338.             $ChatLog.html('');
  339.             for (var i = 0, n = chatLog.length; i < n; i++) {
  340.                var a = chatLog[i];
  341.                var avatarID = a[0];
  342.                var displayName = a[1];
  343.                var message = a[2];
  344.                var data = a[3];
  345.                //console.log("updateChatLog", i, a, displayName, message);
  346.                if (avatarID) {
  347.                    receiveChatMessage(avatarID, displayName, message, data);
  348.                } else {
  349.                    logMessage(message);
  350.                }
  351.            }
  352.        }
  353.  
  354.        // Call this no every keystroke.
  355.        function type() {
  356.            beginTyping();
  357.            handleType();
  358.        }
  359.  
  360.        // Reset the typing timer, and notify if we're starting.
  361.        function beginTyping() {
  362.            if (typingTimer) {
  363.                clearTimeout(typingTimer);
  364.            }
  366.            typingTimer = setTimeout(function() {
  367.                typing = false;
  368.                handleEndTyping();
  369.            }, typingTimerDuration * 1000);
  371.            if (typing) {
  372.                return;
  373.            }
  375.            typing = true;
  376.            handleBeginTyping();
  377.        }
  379.        // Clear the typing timer and notify if we're finished.
  380.        function endTyping() {
  381.            if (typingTimer) {
  382.                clearTimeout(typingTimer);
  383.                typingTimer = null;
  384.            }
  385.  
  386.            if (!typing) {
  387.                return;
  388.            }
  389.  
  390.            typing = false;
  391.            handleEndTyping();
  392.        }
  393.  
  394.        // Notify the interface script on every keystroke.
  395.        function handleType() {
  396.            EventBridge.emitWebEvent(
  397.                JSON.stringify({
  398.                    type: "Type"
  399.                }));
  400.        }
  401.  
  402.        // Notify the interface script when we begin typing.
  403.        function handleBeginTyping() {
  404.            EventBridge.emitWebEvent(
  405.                JSON.stringify({
  406.                    type: "BeginTyping"
  407.                }));
  408.        }
  409.  
  410.        // Notify the interface script when we end typing.
  411.        function handleEndTyping() {
  412.            EventBridge.emitWebEvent(
  413.                JSON.stringify({
  414.                    type: "EndTyping"
  415.                }));
  416.        }
  417.  
  418.        // Append a chat message to $ChatLog.
  419.        function receiveChatMessage(avatarID, displayName, message, data) {
  420.            var $logLine =
  421.                $('<div/>')
  422.                     .addClass('ChatLogLine')
  423.                     .data('chat-avatarID', avatarID)
  424.                     .data('chat-displayName', displayName)
  425.                     .data('chat-message', message)
  426.                     .data('chat-data', data)
  427.                     .appendTo($ChatLog);
  428.            
  429.             var $logLineDisplayName =
  430.                 $('<span/>')
  431.                     .addClass('ChatLogLineDisplayName')
  432.                     .text(displayName + ': ')
  433.                     .on('mouseenter', function(event) {
  434.                         identifyAvatar(avatarID);
  435.                         //event.cancelBubble();
  436.                         $logLineDisplayName.css({
  437.                             color: '#00ff00',
  438.                             'text-decoration': 'underline'
  439.                         });
  440.                     })
  441.                     .on('mouseleave', function(event) {
  442.                         unidentifyAvatar(avatarID);
  443.                         //event.cancelBubble();
  444.                         $logLineDisplayName.css({
  445.                             color: 'white',
  446.                             'text-decoration': 'none'
  447.                         });
  448.                     })
  449.                     .click(function(event) {
  450.                         faceAvatar(avatarID, displayName);
  451.                         //event.cancelBubble();
  452.                     })
  453.                     .appendTo($logLine);
  454.             var $logLineMessage =
  455.                 $('<span/>')
  456.                     .addClass('ChatLogLineMessage')
  457.                     .text(message).linky()
  458.                     .appendTo($logLine);
  459.         }
  460.  
  461.         // Append a log message to $ChatLog.
  462.         function logMessage(message) {
  463.             var $logLine =
  464.                 $('<div/>')
  465.                     .addClass('LogLogLine')
  466.                     .data('chat-message', message)
  467.                     .appendTo($ChatLog);
  468.             var $logLineMessage =
  469.                 $('<span/>')
  470.                     .addClass('LogLogLineMessage')
  471.                     .text(message)
  472.                     .appendTo($logLine);
  473.         }
  474.  
  475.         // Scroll $ChatLog so the last line is visible.
  476.         function scrollChatLog() {
  477.             var $logLine = $ChatLog.children().last();
  478.             if (!$logLine || !$logLine.length) {
  479.                 return;
  480.             }
  481.             var chatLogHeight = $ChatLog.outerHeight(true);
  482.             var logLineTop = ($logLine.offset().top - $ChatLog.offset().top);
  483.             var logLineBottom = logLineTop + $logLine.outerHeight(true);
  484.             var scrollUp = logLineBottom - chatLogHeight;
  485.             if (scrollUp > 0) {
  486.                 $ChatLog.scrollTop($ChatLog.scrollTop() + scrollUp);
  487.             }
  488.         }
  489.  
  490.         // Tell the interface script we have initialized.
  491.         function emitReadyEvent() {
  492.             EventBridge.emitWebEvent(
  493.                 JSON.stringify({
  494.                     type: "Ready"
  495.                 }));
  496.         }
  497.  
  498.         // The user entered an empty chat message.
  499.         function emptyChatMessage() {
  500.             EventBridge.emitWebEvent(
  501.                 JSON.stringify({
  502.                     type: "EmptyChatMessage",
  503.                     data: null
  504.                 }));
  505.         }
  506.  
  507.         // The user entered a non-empty chat message.
  508.         function handleChatMessage(message, data) {
  509.             //console.log("handleChatMessage", message);
  510.             EventBridge.emitWebEvent(
  511.                 JSON.stringify({
  512.                     type: "HandleChatMessage",
  513.                     message: message,
  514.                     data: data
  515.                 }));
  516.         }
  517.  
  518.         // Clear the chat log, of course.
  519.         function clearChatLog() {
  520.             EventBridge.emitWebEvent(
  521.                 JSON.stringify({
  522.                     type: "ClearChatLog"
  523.                 }));
  524.         }
  525.  
  526.         // Identify an avatar.
  527.         function identifyAvatar(avatarID) {
  528.             EventBridge.emitWebEvent(
  529.                 JSON.stringify({
  530.                     type: "IdentifyAvatar",
  531.                     avatarID: avatarID
  532.                 }));
  533.         }
  534.  
  535.         // Stop identifying an avatar.
  536.         function unidentifyAvatar(avatarID) {
  537.             EventBridge.emitWebEvent(
  538.                 JSON.stringify({
  539.                     type: "UnidentifyAvatar",
  540.                     avatarID: avatarID
  541.                 }));
  542.         }
  543.  
  544.         // Face an avatar.
  545.         function faceAvatar(avatarID, displayName) {
  546.             EventBridge.emitWebEvent(
  547.                 JSON.stringify({
  548.                     type: "FaceAvatar",
  549.                     avatarID: avatarID,
  550.                     displayName: displayName
  551.                 }));
  552.         }
  553.  
  554.         // Let's get this show on the road!
  555.         function main() {
  556.  
  557.             //console.log("ChatPage: main");
  558.  
  559.             $ChatLog = $('#ChatLog');
  560.             $ChatInputText = $('#ChatInputText');
  561.  
  562.             // Whenever the chat log resizes, or the input text gets or loses focus,
  563.             // scroll the chat log to the last line.
  564.             $ChatLog.on('resize', function(event) {
  565.                 //console.log("ChatLog resize", $ChatLog, event);
  566.                 scrollChatLog();
  567.             });
  568.             $ChatInputText.on('focus blur', function(event) {
  569.                 //console.log("ChatInputText focus blur", $ChatInputText, event);
  570.                 scrollChatLog();
  571.             });
  572.  
  573.             // Track when the user is typing, and handle the message when the user hits return.
  574.             $ChatInputText.on('keydown', function(event) {
  575.                 type();
  576.                 if (event.keyCode == 13) {
  577.                     var message = $ChatInputText.val().substr(0, 256);
  578.                     $ChatInputText.val('');
  579.                     if (message == '') {
  580.                         emptyChatMessage();
  581.                     } else {
  582.                         handleChatMessage(message, messageData);
  583.                     }
  584.                     endTyping();
  585.                 }
  586.             });
  587.  
  588.             // Start out with the input text in focus.
  589.             $ChatInputText.focus();
  590.  
  591.             // Hook up a handler for events that come from hifi.
  592.             EventBridge.scriptEventReceived.connect(function (message) {
  593.  
  594.                 //console.log("ChatPage: main: scriptEventReceived", message);
  595.  
  596.                 var messageData = JSON.parse(message);
  597.                 var messageType = messageData['type'];
  598.  
  599.                 switch (messageType) {
  600.  
  601.                     case "Update":
  602.                         chatLog = messageData['chatLog'];
  603.                         updateChatLog();
  604.                         scrollChatLog();
  605.                         break;
  606.  
  607.                     case "ReceiveChatMessage":
  608.                         receiveChatMessage(messageData['avatarID'], messageData['displayName'], messageData['message'], message['data']);
  609.                         scrollChatLog();
  610.                         break;
  611.  
  612.                     case "LogMessage":
  613.                         logMessage(messageData['message']);
  614.                         scrollChatLog();
  615.                         break;
  616.  
  617.                     default:
  618.                         console.log("WEB: received unexpected script event message: " + message);
  619.                         break;
  620.  
  621.                 }
  622.             });
  623.  
  624.             emitReadyEvent();
  625.         }
  626.  
  627.         // Start up once the document is loaded.
  628.         $(document).ready(main);
  629.  
  630.     </script>
  631.  
  632. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!