Merge branch 'F8270moreButtonForColumnsWithLongText' into 'master'

F8270 more button for columns with long text AND add QBAR to for qfq | escape

See merge request !144

extension/Documentation/Manual.rst

@@ -5573,9 +5573,9 @@ Special column names
 +------------------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
 | _XLSn                  |Used for Excel export. Prepend 'n=' and append a `newline` character around the string. See `excel-export`_.                                                                                 |
 +------------------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
-| _+html-tag attributes  |The content will be wrapped with '<html-tag attributes>'. Example: SELECT 'example' AS '_+a href="http://example.com"' creates '<a href="http://example.com">example</a>'                    |
+| _+<html-tag attributes>|The content will be wrapped with '<html-tag attributes>'. Example: SELECT 'example' AS '_+a href="http://example.com"' creates '<a href="http://example.com">example</a>'                    |
 +------------------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
-| _=varname              |The content will be saved in store 'user' under 'varname'. Retrieve it later via {{varname:U}}. See `STORE_USER`_, `store_user_examples`_                                                    |
+| _=<varname>            |The content will be saved in store 'user' under 'varname'. Retrieve it later via {{varname:U}}. Example: 'SELECT "Hello world" AS _=text'. See `STORE_USER`_, `store_user_examples`_         |
 +------------------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
 |_<nonReservedName>      |Suppress output. Column names with leading underscore are used to select data from the database and make it available in other parts of the report without generating any output.            |
 +------------------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
@@ -5588,6 +5588,7 @@ Column: _link
 * Most URLs will be rendered via class link.
 * Column names like `_pagee`, `_mailto`, ... are wrapper to class link.
 * The parameters for link contains a prefix to make them position-independent.
+* Parameter have to be separated with '|'. If '|' is part of the value, it needs to be escaped '\\|'. This can be done via QFQ SQL function `QBAR()` - see `qbar-qscape-qfq-delimiter`_.
 
 +---+---+--------------+-----------------------------------+---------------------------+----------------------------------------------------------------------------------------------------------------------------------------+
 |URL|IMG|Meaning       |Qualifier                          |Example                    |Description                                                                                                                             |
@@ -5662,6 +5663,8 @@ Column: _link
 |   |   |Delete record | x[:a|r|c]                         |x, x:r, x:c                |a: ajax (only QFQ internal used), r: report (default), c: close (current page, open last page)                                          |
 +---+---+--------------+-----------------------------------+---------------------------+----------------------------------------------------------------------------------------------------------------------------------------+
 
+
+
 .. _render-mode:
 
 Render mode
@@ -6472,6 +6475,43 @@ Example::
                     CONCAT('y|F:', p.pathFileName,'|t:File (link)|o:', p.pathFileName) AS _link
                 FROM Person AS p  
 
+
+.. _special-sql-functions:
+
+Special SQL Functions
+---------------------
+
+.. _qbar-qscape-qfq-delimiter:
+
+QBAR: Escape QFQ Delimiter
+^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+The SQL function QBAR(text) replaces "|" with "\\|" in `text` to prevent conflicts with the QFQ special column notation.
+In general this function should be used when there is a chance that unplanned '|'-characters occur.
+
+Example::
+
+    10.sql = SELECT CONCAT('p:notes|t:Information: ', QBAR(Note.title), '|b') AS _link FROM Note  
+
+In case 'Note.title' contains a '|' (like 'fruit | numbers'), it will confuse the '... AS _link' class. Therefore it's
+necessary to 'escape' (adding a '\' in front of the problematic character) the bar which is done by using `QBAR()`.
+
+.. _qmore-truncate-long-text:
+
+QMORE: Truncate Long Text - more/less
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+The SQL function QMORE(text, n) truncates `text` if it is longer than `n` characters and adds a "more.." button. If the "more..."
+button is clicked, the whole text is displayed. The stored procedure QMORE() will inject some HTML/CSS code.
+
+Example::
+
+    10.sql = SELECT QMORE("This is a text which is longer than 10 characters", 10)
+
+Output:
+
+This is a `more..`
+
 .. _download:
 
 Download
@@ -7512,9 +7552,9 @@ last used (STORE_USER) or (first time call during browser session) takes the def
     # Semester switch
     10 {
       sql = SELECT '{{semId:SUY}}' AS '_=semId',
-                   CONCAT('p:{{pageAlias:T}}&semId=', sp.id, '|t:', sp.name, '|s|b|G:glyphicon-chevron-left') AS _link,
+                   CONCAT('p:{{pageAlias:T}}&semId=', sp.id, '|t:', QBAR(sp.name), '|s|b|G:glyphicon-chevron-left') AS _link,
                            ' <button class="btn disabled ',   IF({{semId:Y0}}=sc.id, 'btn-success', 'btn-default'), '">',sc.name, '</button> ',
-                           CONCAT('p:{{pageAlias:T}}&semId=', sn.id, '|t:', sn.name, '|s|b|G:glyphicon-chevron-right|R') AS _link
+                           CONCAT('p:{{pageAlias:T}}&semId=', sn.id, '|t:', QBAR(sn.name), '|s|b|G:glyphicon-chevron-right|R') AS _link
                        FROM semester AS sc
                        LEFT JOIN semester AS sp ON sp.id=sc.id-1
                        LEFT JOIN semester AS sn ON sc.id+1=sn.id AND sn.show_semester_from<=CURDATE()

extension/Source/core/database/DatabaseUpdate.php

@@ -125,6 +125,7 @@ class DatabaseUpdate {
         if ($dbUpdate === SYSTEM_DB_UPDATE_ALWAYS || ($dbUpdate === SYSTEM_DB_UPDATE_AUTO && $new != $old)) {
             $this->dbUpdateStatements($old, $new);
             $this->db->playSqlFile(__DIR__ . '/../../sql/formEditor.sql');
+            $this->db->playSqlFile(__DIR__ . '/../../sql/functions.sql');
 
             $qfqLog = $this->db->getQfqLogFile();
             Logger::logMessage(date('Y.m.d H:i:s ') . ": Updated from QFQ version '$old' to '$new'", $qfqLog);

extension/Source/sql/functions.sql

+###
+#
+# QMORE(input, maxlen)
+# inserts a span into `input` after `maxlen` number of characters and returns it.
+#
+DROP FUNCTION IF EXISTS QMORE;
+DELIMITER //
+CREATE FUNCTION QMORE ( input TEXT, maxlen INT )
+RETURNS TEXT DETERMINISTIC
+BEGIN
+DECLARE output TEXT;
+IF maxlen < 1 THEN
+SET maxlen = 1;
+END IF;
+IF CHAR_LENGTH(input) > maxlen THEN
+SET output = CONCAT(INSERT(input, maxlen, 0, '<span class="qfq-more-text">'), '</span>');
+ELSE
+SET output = input;
+END IF;
+RETURN output;
+END; //
+DELIMITER ;
+
+
+###
+#
+# QBAR(input)
+# replaces '|' in `input` with '\|'
+#
+DROP FUNCTION IF EXISTS QBAR;
+DELIMITER //
+CREATE FUNCTION QBAR ( input TEXT )
+RETURNS TEXT DETERMINISTIC
+BEGIN
+DECLARE output TEXT;
+SET output = REPLACE(input, '|', '\\|');
+RETURN output;
+END; //
+DELIMITER ;
\ No newline at end of file

javascript/src/Utils.js

@@ -17,4 +17,23 @@ var QfqNS = QfqNS || {};
         return idSelector.replace(/(:|\.)/, "\\$1");
     };
 
-})(QfqNS);
\ No newline at end of file
+})(QfqNS);
+
+
+// Hide long text and append "more.." button
+$(document).ready(function () {
+    var more = 'more..';
+    var less = 'less..';
+    var moreButtonHtml = '<button class="btn btn-link" style="outline-width: 0px;">' + more + '</button>';
+    var moreButton = $(moreButtonHtml).insertAfter('span.qfq-more-text');
+    moreButton.click(function () {
+        var moreText = $(this).siblings('span.qfq-more-text');
+        if ($(this).text() === more) {
+            $(this).text(less);
+            moreText.show();
+        } else {
+            $(this).text(more);
+            moreText.hide();
+        }
+    });
+});
\ No newline at end of file

less/qfq-bs.css.less

@@ -709,6 +709,10 @@ select.qfq-locked:invalid {
   border: 1px dashed #25adf1;
 }
 
+span.qfq-more-text {
+  display: none
+}
+
 // Droplets
 
 .qfq-droplet-container {

mockup/moreText.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <link rel="stylesheet" href="../extension/Resources/Public/Css/bootstrap.min.css">
+    <link rel="stylesheet" href="../extension/Resources/Public/Css/bootstrap-theme.min.css">
+
+    <link rel="stylesheet" href="../extension/Resources/Public/Css/qfq-bs.css">
+    <title>Input Mode Switcher</title>
+
+</head>
+<body style="background-color: #f5f5f5;">
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-md-2"></div>
+        <div class="col-md-8">
+
+            <br><br><br><br><br>
+
+            Ein Frosch der voller Ueberraschungen war. Ein<span class="qfq-more-text"> Frosch der voller Ueberraschungen war. Ein Frosch der voller Ueberraschungen war. Ein Frosch der voller Ueberraschungen war.</span></td>
+
+        </div>
+    </div>
+
+</div>
+<p><br></p>
+<script src="../js/jquery.min.js"></script>
+<script src="../js/bootstrap.min.js"></script>
+<script src="../js/validator.min.js"></script>
+<script src="../js/EventEmitter.min.js"></script>
+<script src="../js/qfq.debug.js"></script>
+</body>
+</html>
\ No newline at end of file