Răsfoiți Sursa

HUE-8168 [editor] Add multi line ellipsis (show more/less) on record preview modal

Enrico Berti 7 ani în urmă
părinte
comite
426806f775

+ 18 - 1
desktop/core/src/desktop/static/desktop/js/hue.utils.js

@@ -754,7 +754,7 @@ Number.prototype.toHHMMSS = function (skipZeroSeconds) {
     val = val.substr(0, val.length - 1);
   }
   return val;
-}
+};
 
 String.prototype.hashCode = function() {
   var hash = 0, i, chr, len;
@@ -767,6 +767,23 @@ String.prototype.hashCode = function() {
   return hash;
 };
 
+String.prototype.regexLastIndexOf = function (regex, startpos) {
+  regex = (regex.global) ? regex : new RegExp(regex.source, "g" + (regex.ignoreCase ? "i" : "") + (regex.multiLine ? "m" : ""));
+  if (typeof (startpos) == "undefined") {
+    startpos = this.length;
+  } else if (startpos < 0) {
+    startpos = 0;
+  }
+  var stringToWorkWith = this.substring(0, startpos + 1);
+  var lastIndexOf = -1;
+  var nextStop = 0;
+  while ((result = regex.exec(stringToWorkWith)) != null) {
+    lastIndexOf = result.index;
+    regex.lastIndex = ++nextStop;
+  }
+  return lastIndexOf;
+};
+
 if (!('getParameter' in window.location)) {
   window.location.getParameter = function (name, returnNull) {
     return hueUtils.getSearchParameter(window.location.search, name, returnNull);

+ 3 - 2
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -636,7 +636,7 @@
         textElement.textContent = self.fullText;
         if (self.expanded || self.element.offsetHeight < self.element.scrollHeight || self.element.offsetWidth < self.element.scrollWidth) {
           self.$element.append('&nbsp;');
-          var $expandLink = $('<a href="javscript:void(0);"><i class="fa fa-fw ' + (self.expanded ? 'fa-angle-double-up' : 'fa-angle-double-down') + '"></i></a>').click(function (e) {
+          var $expandLink = $('<a href="javascript:void(0);"><i class="fa fa-fw ' + (self.expanded ? 'fa-angle-double-up' : 'fa-angle-double-down') + '"></i></a>').click(function (e) {
             self.expanded = !self.expanded;
             self.updateOverflowHeight();
             if (self.expanded) {
@@ -661,9 +661,10 @@
       }
 
       self.isOverflowing = false;
+
       while (self.element.offsetHeight < self.element.scrollHeight || self.element.offsetWidth < self.element.scrollWidth) {
         self.isOverflowing = true;
-        var lastSpaceIndex = textElement.textContent.lastIndexOf(' ');
+        var lastSpaceIndex = textElement.textContent.regexLastIndexOf(/\s\S+/);
         if (lastSpaceIndex !== -1) {
           textElement.textContent = textElement.textContent.substring(0, lastSpaceIndex) + '...';
         } else {

+ 0 - 1
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -656,4 +656,3 @@ ul.errorlist {
     font-size : 15px
   }
 }
-

+ 18 - 1
desktop/core/src/desktop/templates/common_header_footer_components.mako

@@ -327,11 +327,14 @@ from metadata.conf import has_optimizer, OPTIMIZER
       hueAnalytics.convert('hue', 'pageReloaded' + window.location.pathname);
     }
 
+    var multiLineHandlers = [];
+
     huePubSub.subscribe('table.row.dblclick', function (data) {
       var $el = $(data.table);
       var $t = $('#rowDetailsModal').find('table');
       $t.html('');
       var html = '';
+      multiLineHandlers = [];
       $el.find('thead th').each(function (colIdx, col) {
         if (colIdx > 0) {
           var value = '';
@@ -342,10 +345,18 @@ from metadata.conf import has_optimizer, OPTIMIZER
             value = $el.data('data')[data.idx][colIdx];
           }
           var link = typeof value == 'string' && value.match(/^https?:\/\//i) ? '<a href="' + escapeOutput(value) + '" target="_blank">' + value + ' <i class="fa fa-external-link"></i></a>' : value;
-          html += '<tr><th width="10%" title="' + $(col).attr("title") + '">' + hueUtils.deXSS($(col).text()) + '</th><td style="word-break: break-all">' + hueUtils.deXSS(link) + '</td></tr>';
+          html += '<tr><th width="10%" title="' + $(col).attr("title") + '">' + hueUtils.deXSS($(col).text()) + '</th><td class="multi-line-ellipsis" style="word-break: break-all"><div style="position: relative">' + hueUtils.deXSS(link) + '</div></td></tr>';
         }
       });
       $t.html(html);
+      $t.find('.multi-line-ellipsis div').each(function(cnt, el){
+        multiLineHandlers.push(new MultiLineEllipsisHandler({
+          element: el,
+          text: el.textContent,
+          overflowHeight: 48,
+          expandable: true
+        }));
+      });
       $('#rowDetailsModal').modal('show');
     });
 
@@ -355,6 +366,12 @@ from metadata.conf import has_optimizer, OPTIMIZER
       $('#rowDetailsModal .modal-body').scrollLeft(0);
     });
 
+    $('#rowDetailsModal').on('hidden', function () {
+      multiLineHandlers.forEach(function (multiLineEllipsisHandler) {
+        multiLineEllipsisHandler.dispose();
+      });
+    });
+
     if ($.fn.editableform) {
       $.fn.editableform.buttons =
           '<button type="submit" class="btn btn-primary editable-submit disable-feedback">' +