VLKC#89941 Optie voor uitklapbaar opmerkingenveld leverancierssysteem?

svn path=/Website/trunk/; revision=70986

APPL/Localscripts/iface.js

@@ -1466,6 +1466,23 @@ function addHinterEventlistener(modal) {
     });
 }
 
+function toggleTextarea(event)
+{
+    var $textarea_text = $(this).prev(".textarea-text");
+    $textarea_text.one("transitionend", function() { FcltMgr.resized(); });
+
+    if ($textarea_text.hasClass("textarea-autocollapse") || $textarea_text.hasClass("textarea-collapsed"))
+    {
+        $textarea_text.removeClass("textarea-autocollapse textarea-collapsed");
+        $(this).html(L("lcl_rs_truncate"));
+    }
+    else
+    {
+        $textarea_text.addClass("textarea-collapsed");
+        $(this).html(L("lcl_rs_truncated"));
+    }
+}
+
 $(function ()
 {
     /* De lege blokken hiden; */
@@ -1557,6 +1574,8 @@ $(function ()
         allowInputExpression(this);
     });
 
+    $(".textarea-toggler").on("click", toggleTextarea);
+
     $(".text-styles > .default-clickable-icon").on("click", iface.bb_code);
     $("textarea.bb_enabled:not([readonly])").on("keydown", iface.onKeydown_bb_code);
 

APPL/MLD/mld_show_opdr.asp

@@ -589,7 +589,7 @@ for (i in faq_info.fixed_faq)
         // Opmerking bij uitvoerende. Alleen zichtbaar voor de opdrachtgever, niet de uitvoerende zelf!
         if (user.has("WEB_ORDBOF"))
         {
-          ROTEXTAREATR("fld", L("lcl_prs_companies_opmerking"), mld_opdr.uitv_opmerking, { html: "rows='3'", suppressEmpty: true });
+          ROTEXTAREATR("fldtxt", L("lcl_prs_companies_opmerking"), mld_opdr.uitv_opmerking, { html: "rows='3'", suppressEmpty: true, collapsible: true });
         }
 
         // Contactpersoon uitvoerende
@@ -632,7 +632,7 @@ for (i in faq_info.fixed_faq)
         }
         ROFIELDTR("opdrsubstatus badge bg-danger text-light", L("lcl_mld_actiecode"), txt, { suppressEmpty: true });
 
-        ROTEXTAREATR("fldtxt", L("lcl_mld_opdr_description"), mld_opdr.opdr_omschr, {suppressEmpty: true, mldlink: true, cntlink: true});
+        ROTEXTAREATR("fldtxt", L("lcl_mld_opdr_description"), mld_opdr.opdr_omschr, {suppressEmpty: true, mldlink: true, cntlink: true, collapsible: true});
 
         BLOCK_END();
 

APPL/Shared/default.css

@@ -8135,11 +8135,19 @@ label[data-toggle-type] + input[type=checkbox] {
 
 /* Hier zit de notitie-tekst in */
 .note-text {
+    --line-height: 1.4em;
+}
+.textarea-text {
+    --line-height: 1.5em;
+}
+.note-text,
+.textarea-text {
     overflow: hidden;
-    max-height: 175em; /* = 125 regels x1.4em */
+    max-height: calc(125 * var(--line-height)); /* = 125 regels x1.4em */
     transition: max-height 150ms cubic-bezier(1, 0, 0, 0);
 }
-.note-text table {
+.note-text table,
+.textarea-text table  {
     table-layout: fixed;
     width: 100%;
 }
@@ -8155,18 +8163,22 @@ label[data-toggle-type] + input[type=checkbox] {
     margin-bottom: .5em;
 }
 .note-text.note-autocollapse,
-.note-text.note-collapsed {
+.note-text.note-collapsed,
+.textarea-text.textarea-autocollapse,
+.textarea-text.textarea-collapsed {
     transition: max-height 150ms cubic-bezier(0, 1, 0, 1);
 }
 
 /* Autocollapse is verder ingeklapt dan collapsed */
-.note-text.note-autocollapse {
-    max-height: 2.8em; /* 2 regels x1.4em */
+.note-text.note-autocollapse,
+.textarea-text.textarea-autocollapse  {
+    max-height: calc(2* var(--line-height)); /* 2 regels x1.4em */
 }
 
 /* Na 'minder' toggle */
-.note-text.note-collapsed {
-    max-height: 7em; /* 5 regels x1.4em */
+.note-text.note-collapsed,
+.textarea-text.textarea-collapsed {
+    max-height: calc(5 * var(--line-height)); /* 5 regels x1.4em */
 }
 
 .note-text > .bold {
@@ -8178,7 +8190,8 @@ label[data-toggle-type] + input[type=checkbox] {
     ============== */
 
 /* De ...meer/...minder toggle */
-.note-toggler {
+.note-toggler,
+.textarea-toggler {
     float: right;
     padding-left: 2em;
     cursor: pointer;

APPL/Shared/iface.inc

@@ -1011,21 +1011,28 @@ function ROTEXTAREATR(pclass, plabel, pvalue, params)
     <%
   }
 
-%>
-    <tr <%=params.trclass?"class='"+params.trclass+"'":""%>>
-<%  if (plabel) {%>
-      <td class="label"><label><%=plabel? plabel : ""%></label></td>
-<%  }
+  var params_html = (params.html? " " + params.html + " " : "");
+  var params_id = (params.id ? ' id=\"' + params.id + '\"' : '');
+  var params_safe = (params.ishtmlsafe ? pvalue : safe.fclthtml(pvalue, params));
+  var isCollapsible = (params.collapsible ? params.collapsible : false);
+  var minimized = (params_safe.length > S("rs_maxchar") * 2);
+  var toggler = "";
+  if (isCollapsible && minimized) 
+  {
+    pclass += " textarea-text textarea-autocollapse"; // Begin met maximaal 2 regels te tonen.
+    toggler += "<div class='textarea-toggler'>" + L("lcl_rs_truncated") + "</div>";
+  }
 
-    var params_html = (params.html? " " + params.html + " " : "");
-    var params_id = (params.id ? ' id=\"' + params.id + '\"' : '');
-    var params_safe = (params.ishtmlsafe ? pvalue : safe.fclthtml(pvalue, params));
-%>
-      <td <%=(params.tdhtml_ta? " " + params.tdhtml_ta : "")%>>
-        <div class="readonly fclthtml <%=pclass%>"<%=params_html%><%=params_id%>><%=params_safe%></div>
-      </td>
-    </tr>
-<%
+  var html = "<tr" + (params.trclass ? " class='" + params.trclass + "'" : "") + ">"
+           +   (plabel ? "<td class='label'><label>" + plabel + "</label></td>" : "")
+           + "  <td" + (params.tdhtml_ta? " " + params.tdhtml_ta : "") + ">"
+           + "    <div class='readonly fclthtml " + pclass + "' " + params_html + params_id + ">"
+           +        params_safe
+           + "    </div>"
+           +      toggler
+           + "  </td>"
+           + "</tr>";
+  Response.Write(html);
 }
 
 function RWFIELD(pname, pclass, plabel, pvalue, params)