Merge pull request #559 in FS/freeswitch from…

Merge pull request #559 in FS/freeswitch from ~JAONZE/freeswitch:bugfix/FS-8030-render-links-and-images-in-chat-window to master

* commit '5820ffd4':
  FS-8030 [verto_communicator] changed chat image display behavior (break line before rendering).
  FS-8030 [verto_communicator] added ngSanitize as a dependency, vertoFilters module and picturify filter.

html5/verto/verto_communicator/bower.json

@@ -28,6 +28,7 @@
     "bootstrap": "~3.3.4",
     "angular-toastr": "~1.4.1",
     "angular": "~1.3.15",
+    "angular-sanitize": "~1.3.15",
     "angular-route": "~1.3.15",
     "angular-prompt": "~1.1.1",
     "angular-animate": "~1.3.15",

html5/verto/verto_communicator/src/css/verto.css

@@ -925,6 +925,10 @@ body .modal-body .btn-group .btn.active {
   color: #FFF;
 }
 
+.chat-img {
+  display: block;
+}
+
 .chat-members .chat-member-item {
   padding: 8px 16px;
   height: 56px;

html5/verto/verto_communicator/src/index.html

@@ -66,6 +66,7 @@
     <script src="bower_components/angular-gravatar/build/angular-gravatar.js"></script>
     <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
     <script src="bower_components/angular-toastr/dist/angular-toastr.tpls.js"></script>
+    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
     <script src="bower_components/angular-route/angular-route.js"></script>
     <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
     <script src="bower_components/angular-prompt/dist/angular-prompt.js"></script>
@@ -119,6 +120,9 @@
     <script type="text/javascript" src="src/vertoDirectives/directives/userStatus.js"></script>
     <script type="text/javascript" src="src/vertoDirectives/directives/videoTag.js"></script>
 
+    <script type="text/javascript" src="src/vertoFilters/vertoFilters.module.js"></script>
+    <script type="text/javascript" src="src/vertoFilters/filters/picturify.js"></script>
+
     <script type="text/javascript" src="src/vertoService/vertoService.module.js"></script>
     <script type="text/javascript" src="src/vertoService/services/vertoService.js"></script>
     <script type="text/javascript" src="src/vertoService/services/configService.js"></script>
@@ -133,4 +137,3 @@
 
   </body>
 </html>
-

html5/verto/verto_communicator/src/partials/chat.html

@@ -116,7 +116,7 @@
       </div>
       <div class="chat-message" ng-repeat="message in messages" title="Sent at {{ message.created_at|date }}.">
         <div class="chat-message-metadata">{{ message.from }}:</div>
-        <p class="chat-message-body">{{ message.body }}</p>
+        <p class="chat-message-body" ng-bind-html="message.body | linky:'_blank' | picturify:150:3 "></p>
       </div>
       <div id="chat-message-bottom"></div>
     </div>

html5/verto/verto_communicator/src/vertoApp/vertoApp.module.js

@@ -6,8 +6,10 @@
     'ngRoute',
     'vertoControllers',
     'vertoDirectives',
+    'vertoFilters',
     'ngStorage',
     'ngAnimate',
+    'ngSanitize',
     'toastr',
     'FBAngular',
     'cgPrompt',

html5/verto/verto_communicator/src/vertoFilters/filters/picturify.js

+(function () {
+  'use strict';
+
+  angular
+  .module('vertoFilters')
+  .filter('picturify', function() {
+    var regex = /<a (|target="\s*\S*" )href="(\s*\S*.(png|jpg|svg|gif|webp|bmp))">\s*\S*<\/a>/i;
+    var regex64 = /data:image\/(\s*\S*);base64,((?:[A-Za-z0-9+\/]{4})*(?:[A-Za-z0-9+\/]{2}==|[A-Za-z0-9+\/]{3}=))/g;
+
+    return function (text, width, n) {
+      var i = 0;
+      width = width || 150; //default width
+      if(regex64.test(text)) {
+        text = text.replace(regex64, '<a href="$1" target="_blank"><img class="chat-img" width="'+ width +'" src="data:image/png;base64,$2"/></a>')
+      }
+
+      do {
+        text = text.replace(regex, '<a $1href="$2"><img class="chat-img" width="'+ width +'" src="$2"/></a>');
+      } while((!n || (n && i++ < n)) && regex.test(text));
+
+      return text;
+    }
+
+  });
+
+})();

html5/verto/verto_communicator/src/vertoFilters/vertoFilters.module.js

+(function() {
+  'use strict';
+  var vertoFilters = angular.module('vertoFilters', []);
+})();