Hide extra text in descriptions and allow expanding

Previously every description was shown fully and it caused troubles
in case of large descriptions.

For now every description is covered in div tag. js-handler provides
code to create and control links to expand and compress these fields.

Change-Id: I3bb64382b48d1435dea20bccea96836d3d2015da
Closes-Bug: #1465315

muranodashboard/local/_50_murano.py

@@ -20,4 +20,5 @@ ADD_JS_FILES = [
     'muranodashboard/js/murano.service.js',
     'muranodashboard/js/upload_form.js',
     'muranodashboard/js/import_bundle_form.js',
+    'muranodashboard/js/more-less.js',
 ]

muranodashboard/static/muranodashboard/css/catalog.css

@@ -527,3 +527,10 @@ h3 .wizard_title {
   color: #d93c27;
   font-weight: bold;
 }
+
+.more_content_dynamicui span {
+    display: none;
+}
+.more_link_dynamicui {
+    display: block;
+}

muranodashboard/static/muranodashboard/js/more-less.js

@@ -0,0 +1,42 @@
+$(function() {
+  "use strict";
+
+  horizon.modals.addModalInitFunction(muranoMoreLess);
+
+  function muranoMoreLess(modal) {
+    var showChar = 150;
+    var ellipsestext = "...";
+    var moretext = gettext("Show more");
+    var lesstext = gettext("Show less");
+
+    $(modal).find('.more_dynamicui_description').each(function() {
+      var content = $(this).html();
+
+      if (content.length > showChar) {
+
+        var c = content.substr(0, showChar);
+        var h = content.substr(showChar, content.length - showChar);
+
+        var html = c + '<span class="more_ellipses_dynamicui">' + ellipsestext +
+          '&nbsp;</span><span class="more_content_dynamicui"><span>' + h +
+          '</span>&nbsp;&nbsp;<a href="javascript:;" class="more_link_dynamicui">' + moretext +
+          '</a></span>';
+
+        $(this).html(html);
+      }
+    });
+
+    $(modal).find(".more_link_dynamicui").click(function() {
+      if ($(this).hasClass("less_dynamicui")) {
+        $(this).removeClass("less_dynamicui");
+        $(this).html(moretext);
+      } else {
+        $(this).addClass("less_dynamicui");
+        $(this).html(lesstext);
+      }
+      $(this).parent().prev().toggle();
+      $(this).prev().toggle();
+      return false;
+    });
+  }
+});

muranodashboard/templates/services/_wizard_create.html

@@ -53,7 +53,9 @@
               {{ title }}:
             </strong>
         {% endif %}
-        {{ description|linebreaksbr }}
+        <div class="more_dynamicui_description">
+          {{ description|linebreaksbr }}
+        </div>
         </p>
     {% endfor %}
 </div>
@@ -118,12 +120,12 @@
     {% else %}
         {% trans "Create" as next %}
     {% endif %}
-	{% if wizard.steps.index > 0 %}
+    {% if wizard.steps.index > 0 %}
         <input type="submit" class="btn btn-primary pull-right" value="{{ next }}"/>
         <button name="wizard_goto_step" type="submit" class="btn btn-small wizard_cancel"
                 id="{{ prefix }}_btn">{% trans "Back" %}</button>
     {% else %}
         <button name="wizard_goto_step" type="submit" class="btn btn-small">
             {{ next }}</button>
-	{% endif %}
+    {% endif %}
 {% endblock %}