From c2e0102c4bc471bed21fbd69dcea6aefab0ef768 Mon Sep 17 00:00:00 2001
From: Omar Shykhkerimov <oshykhkerimov@mirantis.com>
Date: Tue, 15 Mar 2016 20:58:13 +0200
Subject: [PATCH] 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           |  1 +
 .../static/muranodashboard/css/catalog.css    |  7 ++++
 .../static/muranodashboard/js/more-less.js    | 42 +++++++++++++++++++
 .../templates/services/_wizard_create.html    |  8 ++--
 4 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 muranodashboard/static/muranodashboard/js/more-less.js

diff --git a/muranodashboard/local/_50_murano.py b/muranodashboard/local/_50_murano.py
index 80d89e7e9..2724b59ea 100644
--- a/muranodashboard/local/_50_murano.py
+++ b/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',
 ]
diff --git a/muranodashboard/static/muranodashboard/css/catalog.css b/muranodashboard/static/muranodashboard/css/catalog.css
index 7be4606ea..eaa8ffcf6 100644
--- a/muranodashboard/static/muranodashboard/css/catalog.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/muranodashboard/static/muranodashboard/js/more-less.js b/muranodashboard/static/muranodashboard/js/more-less.js
new file mode 100644
index 000000000..5d00b12ee
--- /dev/null
+++ b/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;
+    });
+  }
+});
diff --git a/muranodashboard/templates/services/_wizard_create.html b/muranodashboard/templates/services/_wizard_create.html
index 11c671064..7f29da295 100644
--- a/muranodashboard/templates/services/_wizard_create.html
+++ b/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 %}