Merge pull request #14120 from ncounter/collapsible-text

BugFix: collapsible text for request beta

src/api/app/assets/javascripts/webui/application.js

@@ -44,7 +44,7 @@
 //= require webui/staging_workflow.js
 //= require webui/project.js
 //= require webui/project_monitor.js
-//= require webui/collapsible_text
+//= require webui/collapsible_text.js
 //= require webui/patchinfo.js
 //= require webui/image_templates.js
 //= require webui/kiwi_editor.js

src/api/app/assets/javascripts/webui/collapsible_text.js

@@ -1,20 +1,25 @@
-$(document).ready(function() {
-  setCollapsible();
-});
+function setCollapsible() { // jshint ignore:line
+  $('.obs-collapsible-textbox').each(function() {
+    var container = $(this);
+    var textBox = container.find('.obs-collapsible-text');
+    var showButton = container.find('.show-content');
 
-function setCollapsible() {
-  $('.obs-collapsible-textbox').on('click', function() {
-    var selectedText = document.getSelection().toString();
-    if(!selectedText) {
-      $(this).find('.obs-collapsible-text').toggleClass('expanded');
-      $(this).find('.show-content').toggleClass('more less');
+    // Add the event if it wasn't already added
+    if (container.hasClass('vanilla-textbox-to-collapse')) {
+      container.on('click', function() {
+        if(!document.getSelection().toString()) {
+          textBox.toggleClass('expanded');
+          showButton.toggleClass('more less');
+        }
+      });
+      // Make sure to not add the event twice by removing the target class
+      container.removeClass('vanilla-textbox-to-collapse');
     }
-  });
 
-  $('.obs-collapsible-text').each(function(_index, element){
-    if (element.scrollHeight > element.offsetHeight) {
-      var $link = $('<a href="javascript:void(0)" class="show-content more"><i class="fa"></i></a>');
-      $(element).after($link);
+    // Make sure to not add the button twice and only if it makes sense to
+    if (showButton.length === 0 && textBox.prop('scrollHeight') > textBox.prop('offsetHeight')) {
+      showButton = $('<a href="javascript:void(0)" class="show-content more"><i class="fa"></i></a>');
+      textBox.after(showButton);
     }
   });
 }

src/api/app/assets/javascripts/webui/nav_tabs.js

@@ -15,5 +15,11 @@ $(document).ready(function () {
     else {
       document.location.hash = event.target.hash.replace('#', '#' + HASH_PREFIX);
     }
+
+    /*
+     * jshint false positive fires an error saying the `setCollapsible` function is not defined
+     * actually it is, just in another file (`collapsible_text.js`)
+     */
+    setCollapsible(); // jshint ignore:line
   });
 });

src/api/app/views/webui/request/beta_show.html.haml

@@ -170,4 +170,6 @@
       });
     });
 
+  setCollapsible();
+
 -# haml-lint:enable ViewLength

src/api/app/views/webui/shared/_collapsible_text.html.haml

@@ -1,5 +1,8 @@
 -# NOTE: look into app/assets/stylesheets/webui/collapsible-text.scss
 - if text.present?
-  .obs-collapsible-textbox{ class: "#{extra_css_classes if defined?(extra_css_classes)}" }
+  .obs-collapsible-textbox.vanilla-textbox-to-collapse{ class: "#{extra_css_classes if defined?(extra_css_classes)}" }
     .obs-collapsible-text
       = sanitize(simple_format(text), tags: %w[br p])
+
+:javascript
+  setCollapsible();

src/api/app/views/webui/user/_involvement.html.haml

@@ -66,7 +66,7 @@
         - involved_items.each do |involved_item|
           .list-group-item
             .row
-              .col.obs-collapsible-textbox
+              .col.obs-collapsible-textbox.vanilla-textbox-to-collapse
                 .obs-collapsible-text
                   - if involved_item.is_a?(Package)
                     = link_to(involved_item.project, project_show_path(involved_item.project))