bpmn-io · pinussilvestrus · Oct 5, 2020 · Oct 5, 2020
diff --git a/lib/factory/AutoSuggestTextBoxFactory.js b/lib/factory/AutoSuggestTextBoxFactory.js
@@ -24,15 +24,15 @@ var SUGGESTION_LIST_BOX_THRESHOLD = 15;
 var noop = function() {};
 
 
-var autoSuggestTextBox = function(options, defaultParameters) {
+var autoSuggestTextBox = function(translate, options, defaultParameters) {
 
   var resource = defaultParameters,
       label = options.label || resource.id,
       canBeShown = !!options.show && typeof options.show === 'function',
       description = options.description;
 
   resource.html =
-    '<label ' +
+    domify('<label ' +
       'for="camunda-' + escapeHTML(resource.id) + '" ' +
       (canBeShown ? 'data-show="isShown"' : '') +
       '>' + label + '</label>' +
@@ -47,8 +47,11 @@ var autoSuggestTextBox = function(options, defaultParameters) {
         'data-blur="handleFocusLeave"' +
       '></div>' +
       '<div class="bpp-autosuggest-list"></div>' +
-      (description ? entryFieldDescription(description) : '') +
-    '</div>';
+    '</div>');
+
+  if (description) {
+    domQuery('.bpp-field-wrapper', resource.html).appendChild(entryFieldDescription(translate, description));
+  }
 
   if (canBeShown) {
     resource.isShown = function() {

diff --git a/lib/factory/CheckboxEntryFactory.js b/lib/factory/CheckboxEntryFactory.js
@@ -1,13 +1,15 @@
 'use strict';
 
+var domify = require('min-dom').domify;
+
 var getBusinessObject = require('bpmn-js/lib/util/ModelUtil').getBusinessObject,
     cmdHelper = require('../helper/CmdHelper'),
     escapeHTML = require('../Utils').escapeHTML;
 
 var entryFieldDescription = require('./EntryFieldDescription');
 
 
-var checkbox = function(options, defaultParameters) {
+var checkbox = function(translate, options, defaultParameters) {
   var resource = defaultParameters,
       id = resource.id,
       label = options.label || id,
@@ -16,7 +18,7 @@ var checkbox = function(options, defaultParameters) {
       description = options.description;
 
   resource.html =
-    '<input id="camunda-' + escapeHTML(id) + '" ' +
+    domify('<input id="camunda-' + escapeHTML(id) + '" ' +
          'type="checkbox" ' +
          'name="' + escapeHTML(options.modelProperty) + '" ' +
          (canBeDisabled ? 'data-disable="isDisabled"' : '') +
@@ -25,11 +27,11 @@ var checkbox = function(options, defaultParameters) {
     '<label for="camunda-' + escapeHTML(id) + '" ' +
          (canBeDisabled ? 'data-disable="isDisabled"' : '') +
          (canBeHidden ? 'data-show="isHidden"' : '') +
-         '>' + escapeHTML(label) + '</label>';
+         '>' + escapeHTML(label) + '</label>');
 
   // add description below checkbox entry field
   if (description) {
-    resource.html += entryFieldDescription(description, { show: canBeHidden && 'isHidden' });
+    resource.html.appendChild(entryFieldDescription(translate, description, { show: canBeHidden && 'isHidden' }));
   }
 
   resource.get = function(element) {

diff --git a/lib/factory/ComboEntryFactory.js b/lib/factory/ComboEntryFactory.js
@@ -3,7 +3,8 @@
 var assign = require('lodash/assign'),
     find = require('lodash/find');
 
-var domQuery = require('min-dom').query;
+var domify = require('min-dom').domify,
+    domQuery = require('min-dom').query;
 
 var escapeHTML = require('../Utils').escapeHTML;
 
@@ -28,7 +29,7 @@ var selectEntryFactory = require('./SelectEntryFactory'),
  *
  * @return {Object}
  */
-var comboBox = function(options) {
+var comboBox = function(translate, options) {
 
   var selectOptions = options.selectOptions,
       modelProperty = options.modelProperty,
@@ -97,19 +98,25 @@ var comboBox = function(options) {
 
   comboOptions.selectOptions.push({ name: customName, value: customValue });
 
-  var comboBoxEntry = assign({}, selectEntryFactory(comboOptions, comboOptions));
+  var comboBoxEntry = assign({}, selectEntryFactory(translate, comboOptions, comboOptions));
 
-  comboBoxEntry.html += '<div class="bpp-field-wrapper bpp-combo-input" ' +
+  var fragment = document.createDocumentFragment();
+
+  fragment.appendChild(comboBoxEntry.html);
+
+  comboBoxEntry.html = fragment;
+
+  comboBoxEntry.html.appendChild(domify('<div class="bpp-field-wrapper bpp-combo-input" ' +
     'data-show="showCustomInput"' +
     '>' +
     '<input id="camunda-' + escapeHTML(options.id) + '-input" type="text" name="custom-' +
       escapeHTML(modelProperty) + '" ' +
     ' />' +
-  '</div>';
+  '</div>'));
 
   // add description below combo box entry field
   if (description) {
-    comboBoxEntry.html += entryFieldDescription(description, { show: 'showCustomInput' });
+    comboBoxEntry.html.appendChild(entryFieldDescription(translate, description, { show: 'showCustomInput' }));
   }
 
   return comboBoxEntry;

diff --git a/lib/factory/EntryFactory.js b/lib/factory/EntryFactory.js
@@ -107,12 +107,12 @@ function EntryFactory() {
  * @param options
  * @returns the propertyPanel entry resource object
  */
-EntryFactory.textField = function(options) {
-  return textInputField(options, setDefaultParameters(options));
+EntryFactory.textField = function(translate, options) {
+  return textInputField(translate, options, setDefaultParameters(options));
 };
 
-EntryFactory.validationAwareTextField = function(options) {
-  return validationAwareTextInputField(options, setDefaultParameters(options));
+EntryFactory.validationAwareTextField = function(translate, options) {
+  return validationAwareTextInputField(translate, options, setDefaultParameters(options));
 };
 
 /**
@@ -135,44 +135,44 @@ EntryFactory.validationAwareTextField = function(options) {
  * @param options
  * @returns the propertyPanel entry resource object
  */
-EntryFactory.checkbox = function(options) {
-  return checkboxField(options, setDefaultParameters(options));
+EntryFactory.checkbox = function(translate, options) {
+  return checkboxField(translate, options, setDefaultParameters(options));
 };
 
-EntryFactory.textBox = function(options) {
-  return textBoxField(options, setDefaultParameters(options));
+EntryFactory.textBox = function(translate, options) {
+  return textBoxField(translate, options, setDefaultParameters(options));
 };
 
-EntryFactory.selectBox = function(options) {
-  return selectBoxField(options, setDefaultParameters(options));
+EntryFactory.selectBox = function(translate, options) {
+  return selectBoxField(translate, options, setDefaultParameters(options));
 };
 
-EntryFactory.comboBox = function(options) {
-  return comboBoxField(options);
+EntryFactory.comboBox = function(translate, options) {
+  return comboBoxField(translate, options);
 };
 
-EntryFactory.table = function(options) {
-  return tableField(options);
+EntryFactory.table = function(translate, options) {
+  return tableField(translate, options);
 };
 
 EntryFactory.label = function(options) {
   return labelEntry(options);
 };
 
-EntryFactory.link = function(options) {
-  return link(options);
+EntryFactory.link = function(translate, options) {
+  return link(translate, options);
 };
 
-EntryFactory.autoSuggest = function(options) {
-  return autoSuggestTextBoxField(options, setDefaultParameters(options));
+EntryFactory.autoSuggest = function(translate, options) {
+  return autoSuggestTextBoxField(translate, options, setDefaultParameters(options));
 };
 
 EntryFactory.collapsible = function(options) {
   return collapsible(options);
 };
 
-EntryFactory.toggleSwitch = function(options) {
-  return toggleSwitch(options, setDefaultParameters(options));
+EntryFactory.toggleSwitch = function(translate, options) {
+  return toggleSwitch(translate, options, setDefaultParameters(options));
 };
 
 module.exports = EntryFactory;
diff --git a/lib/factory/EntryFieldDescription.js b/lib/factory/EntryFieldDescription.js
@@ -1,7 +1,13 @@
 'use strict';
 
+var domify = require('min-dom').domify,
+    domClasses = require('min-dom').classes,
+    domEvent = require('min-dom').event;
+
 var escapeHTML = require('../Utils').escapeHTML;
 
+var MAX_DESCRIPTION_LENGTH = 200;
+
 /**
  * Create a linkified and HTML escaped entry field description.
  *
@@ -12,7 +18,7 @@ var escapeHTML = require('../Utils').escapeHTML;
  * @param {object} [options]
  * @param {string} [options.show] - name of callback to determine whether description is shown
  */
-module.exports = function entryFieldDescription(description, options) {
+module.exports = function entryFieldDescription(translate, description, options) {
   var show = options && options.show;
 
   // we tokenize the description to extract text, HTML and markdown links
@@ -48,10 +54,59 @@ module.exports = function entryFieldDescription(description, options) {
     escaped.push(escapeText(description.substring(index)));
   }
 
-  return (
-    '<div class="bpp-field-description"' + (show ? 'data-show="' + show + '">' : '>') +
-      escaped.join('') +
-    '</div>');
+  description = escaped.join('');
+
+  var html = domify(
+    '<div class="bpp-field-description description description--expanded"' +
+    (show ? 'data-show="' + show + '">' : '>') +
+    '</div>'
+  );
+
+  var descriptionText = domify('<span class="description__text">' + description + '</span>');
+
+  html.appendChild(descriptionText);
+
+  function toggleExpanded(expanded) {
+    if (expanded) {
+      domClasses(html).add('description--expanded');
+
+      descriptionText.textContent = description + ' ';
+
+      expand.textContent = translate('Less');
+    } else {
+      domClasses(html).remove('description--expanded');
+
+      descriptionText.textContent = descriptionShortened + ' ... ';
+
+      expand.textContent = translate('More');
+    }
+  }
+
+  var descriptionShortened,
+      expand,
+      expanded = false;
+
+  if (description.length > MAX_DESCRIPTION_LENGTH) {
+    descriptionShortened = description.slice(0, MAX_DESCRIPTION_LENGTH);
+
+    expand = domify(
+      '<span class="bpp-entry-link description__expand">' +
+        translate('More') +
+      '</span>'
+    );
+
+    domEvent.bind(expand, 'click', function() {
+      expanded = !expanded;
+
+      toggleExpanded(expanded);
+    });
+
+    html.appendChild(expand);
+
+    toggleExpanded(expanded);
+  }
+
+  return html;
 };
 
 function escapeText(text) {
@@ -76,4 +131,4 @@ function escapeText(text) {
   }
 
   return escaped.join('');
-}
+}
diff --git a/lib/factory/LinkEntryFactory.js b/lib/factory/LinkEntryFactory.js
@@ -1,5 +1,7 @@
 'use strict';
 
+var domify = require('min-dom').domify;
+
 var escapeHTML = require('../Utils').escapeHTML;
 
 var entryFieldDescription = require('./EntryFieldDescription');
@@ -33,7 +35,7 @@ var bind = require('lodash/bind');
  *
  * @return {Entry} the newly created entry
  */
-function link(options) {
+function link(translate, options) {
 
   var id = options.id,
       buttonLabel = options.buttonLabel || id,
@@ -52,25 +54,25 @@ function link(options) {
 
   var resource = {
     id: id,
-    html: ''
+    html: document.createDocumentFragment()
   };
 
   if (label) {
-    resource.html = '<label for="camunda-' + escapeHTML(id) + '" ' +
+    resource.html.appendChild(domify('<label for="camunda-' + escapeHTML(id) + '" ' +
       (showLink ? 'data-show="showLink" ' : '') +
-      '>'+ escapeHTML(label) +'</label>';
+      '>'+ escapeHTML(label) +'</label>'));
   }
 
-  resource.html = resource.html +
-    '<div class="bpp-field-wrapper">' +
+  resource.html.appendChild(domify('<div class="bpp-field-wrapper">' +
     '<a data-action="handleClick" ' +
     (showLink ? 'data-show="showLink" ' : '') +
     'class="bpp-entry-link' + (options.cssClasses ? ' ' + escapeHTML(options.cssClasses) : '') +
-    '">' + escapeHTML(buttonLabel) + '</a></div>';
+    '">' + escapeHTML(buttonLabel) + '</a></div>'));
+
 
   // add description below link entry field
   if (description) {
-    resource.html += entryFieldDescription(description, { show: 'showLink' });
+    resource.html.appendChild(entryFieldDescription(translate, description, { show: 'showLink' }));
   }
 
   resource.handleClick = bind(handleClick, resource);