Merge branch 'update_renderer_class' into 'main'

Update renderer class

See merge request !18

docs/50_Forms/Input.md

@@ -31,21 +31,22 @@ Content:
 
 Key      | Description
 ---      | ---
+hint     | optional: Hint text above form field
 label    | label in front of the input element
 name     | name attribute for sending form data
 value    | value of the input field/ visible text; for checkbox and radio: the data to send when sending a form
 
-### Example
+### Examples
 
 #### Simple text input field
 
 ```php
-$renderAdminLTE->getFormInput(array (
+$renderAdminLTE->getFormInput([
   'label' => 'Enter firstname',
   'type' => 'text',
   'name' => 'firstname',
   'value' => '',
-));
+]);
 ```
 
 You get a label, an input field wrapped in a ``<div class="form-group row">``.
@@ -72,8 +73,6 @@ With using append and prepend keys you can create gray boxes on left and right.
 For these input types you can use multiple elements.
 You must wrap a bunch of input elements into ``<div class="form-group row">`` "manually".
 
-
-
 ```php
 echo '<div class="form-group">'
   . $renderAdminLTE->getFormInput([
@@ -91,3 +90,60 @@ echo '<div class="form-group">'
   .'</div>'
   ;
 ```
+
+#### Simple range slider
+
+A simple slider:
+
+```php
+$renderAdminLTE->getFormInput([
+  'tag' => 'input', 
+  'type' => 'range', // <-----------
+  'min' => 0, 
+  'max' => 3, 
+  'step' => 1, 
+  'label' => 'Select 0..6',
+]);
+```
+
+#### Range with labels
+
+To add labels you need a datalist for the values and the labels to show, eg
+
+```html
+<datalist id="datalist-range">
+  <option value="0" label="no risc"></option>
+  <option value="1" label="1"></option>
+  <option value="2" label="2"></option>
+  <option value="3" label="medium"></option>
+  <option value="4" label="4"></option>
+  <option value="5" label="5"></option>
+  <option value="6" label="critical"></option>
+</datalist>
+```
+
+The id you ned to reference in the key "datalist":
+
+```php
+$renderAdminLTE->getFormInput([
+  'tag' => 'input', 
+  'type' => 'range', 
+  'min' => 0, 
+  'max' => 6, 
+  'step' => 1, 
+  'label' => 'Select 0..6',
+  'datalist' => 'datalist-range', // <-----------
+]);
+```
+
+For the datalist you need to extend your css:
+
+```css
+datalist {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  writing-mode: vertical-lr;
+  width: 100%;
+}
+```

docs/50_Forms/Select.md

@@ -26,6 +26,7 @@ Styling for select tag:
 
 Key      | Description
 ---      | ---
+bootstrap-select | optional: use bootstrap-select pugin with live search (you need to load the plugin in your page - see example below)
 class    | optional: additional css classes
 size     | optional: visible option lines
 
@@ -33,6 +34,7 @@ Content:
 
 Key      | Description
 ---      | ---
+hint     | optional: Hint text above form field
 name     | name attribute for sending form data
 value    | value of the input field/ visible text; for checkbox and radio: the data to send when sending a form
 
@@ -41,8 +43,7 @@ value    | value of the input field/ visible text; for checkbox and radio: the d
 #### Simple select box
 
 ```php
-$renderAdminLTE->getFormSelect(array
-(
+$renderAdminLTE->getFormSelect([
     'label' => 'Select contact',
     'name' => 'contact',
     'tag' => 'select',
@@ -53,7 +54,7 @@ $renderAdminLTE->getFormSelect(array
             ['value' => '2', 'label' => 'Dick', 'selected' => 1 ],
             ['value' => '3', 'label' => 'Harry'],
     ],
-));
+]);
 ```
 
 You get a label, an select box wrapped in a ``<div class="form-group row">``.
@@ -73,3 +74,31 @@ You get a label, an select box wrapped in a ``<div class="form-group row">``.
     </div>
 </div>
 ```
+
+#### Select box with search field
+
+We added support for the plugin **bootstrap-select**.
+Get its files from the website and put it into a vendor directory.
+
+Website: <https://developer.snapappointments.com/bootstrap-select/>
+
+In your html header section add its css and javascript:
+
+```html
+    <!-- bootstrap-select -->
+    <link rel="stylesheet" href="../vendor/bootstrap-select/1.13.18/css/bootstrap-select.min.css">
+    <script src="../vendor/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
+```
+
+In your select box add ``'bootstrap-select' => 1,`` :
+
+```php
+$renderAdminLTE->getFormSelect([
+    'label' => 'Select contact',
+    'name' => 'contact',
+    'tag' => 'select',
+    'size' => 1,
+    'bootstrap-select' => 1, // <---------- 
+    'options' => [ ... ],
+]);
+```

docs/50_Forms/Textarea.md

@@ -29,6 +29,7 @@ Content:
 
 Key      | Description
 ---      | ---
+hint     | optional: Hint text above form field
 label    | label in front of the Textarea element
 name     | name attribute for sending form data
 value    | value of the textarea; visible text
@@ -40,11 +41,11 @@ value    | value of the textarea; visible text
 You get a label and a textare wrapped in a ``<div class="form-group row">``.
 
 ```php
-$renderAdminLTE->getFormTextarea(array (
+$renderAdminLTE->getFormTextarea([
   'label' => 'Enter text',
   'name' => 'textdata',
   'value' => 'Here is some text...',
-));
+]);
 ```
 
 #### Html editor
@@ -72,7 +73,7 @@ By adding ``'type' => 'html'`` an html editor will be rendered by adding a class
 
 ```php
 $renderAdminLTE->getFormTextarea(array (
-  'type' => 'html',
+  'type' => 'html', // <---------- 
   'label' => 'Enter text',
   'name' => 'textdata',
   'value' => 'Here is some text...',

public_html/classes/htmlelements.class.php

@@ -15,18 +15,30 @@
  *    - icon  - will be added as <i class="[icon value]"></i> to the label
  * 
  * @author Axel
+ * 
+ * 2024-07-04  <axel.hahn@unibe.ch>  added type declarations; update php docs
  */
-class htmlelements {
+class htmlelements
+{
 
     /**
      * set of auto generated icon prefixes
-     * @var type 
+     * @var array
      */
     var $_aIcons = array(
         // 'fa-'=>'fa ',
     );
 
+    /**
+     * label of an html tag (pseudo attribute)
+     * @var string
+     */
     var $_sLabel = '';
+
+    /**
+     * hash of attributes and values of an html tag
+     * @var array
+     */
     var $_aAttributes = array();
 
 
@@ -34,7 +46,8 @@ class htmlelements {
     // CONSTRUCTOR
     // ----------------------------------------------------------------------
 
-    public function __construct() {
+    public function __construct()
+    {
         return true;
     }
 
@@ -49,7 +62,8 @@ class htmlelements {
      * generate html attibutes with all internal attributes key -> values
      * @return string
      */
-    protected function _addAttributes() {
+    protected function _addAttributes(): string
+    {
         $sReturn = '';
         foreach ($this->_aAttributes as $sAttr => $sValue) {
             if (is_array($sValue)) {
@@ -71,7 +85,8 @@ class htmlelements {
      * @param array $aAttributes
      * @return boolean
      */
-    protected function _setAttributes($aAttributes){
+    protected function _setAttributes(array $aAttributes): bool
+    {
         $this->_sLabel = '';
         if (isset($aAttributes['icon']) && $aAttributes['icon']) {
             $this->_sLabel .= $this->getIcon($aAttributes['icon']);
@@ -100,7 +115,8 @@ class htmlelements {
      * @param boolean  $bCloseTag     optional: set false if tag has no closing tag (= ending with "/>")
      * @return type
      */
-    public function getTag($sTag, $aAttributes, $bCloseTag=true){
+    public function getTag(string $sTag, array $aAttributes, bool $bCloseTag = true): string
+    {
         $sTpl = $bCloseTag ? "<$sTag%s>%s</$sTag>" : "<$sTag %s/>%s";
         $this->_setAttributes($aAttributes);
         return sprintf($sTpl, $this->_addAttributes(), $this->_sLabel);
@@ -114,13 +130,15 @@ class htmlelements {
     // ----------------------------------------------------------------------
 
     /**
-     * helper detect prefix of a string add prefix of a framework
+     * get html code for an icon
+     * includes a helper detect prefix of a string add prefix of a framework
      * i.e. value "fa-close" detects font awesome and adds "fa " as prefix
      * 
-     * @param string $sIconclass
-     * @return boolean
+     * @param string $sIconclass  name of the icon
+     * @return string
      */
-    public function getIcon($sIconclass=false){
+    public function getIcon(string $sIconclass = ''): string
+    {
         if (!$sIconclass) {
             return '';
         }
@@ -131,8 +149,6 @@ class htmlelements {
                 continue;
             }
         }
-        // do not use this .. it overrides internal attribute vars
-        // return $this->getTag('i', array('class'=>$sPrefix.$sIconclass));
         return '<i class="' . $sPrefix . $sIconclass . '"></i> ';
     }
 
@@ -150,7 +166,8 @@ class htmlelements {
      * @param array $aAttributes  attributes of the select tag
      * @return string
      */
-    public function getFormInput($aAttributes){
+    public function getFormInput($aAttributes)
+    {
         $sTpl = '<input %s/>';
         $this->_setAttributes($aAttributes);
         return sprintf($sTpl, $this->_addAttributes());
@@ -161,7 +178,8 @@ class htmlelements {
      * @param array $aAttributes  attributes of the option tag
      * @return string
      */
-    public function getFormOption($aAttributes){
+    public function getFormOption(array $aAttributes): string
+    {
         $sTpl = '<option %s>%s</option>';
         $this->_setAttributes($aAttributes);
         return sprintf($sTpl, $this->_addAttributes(), $this->_sLabel);
@@ -173,7 +191,8 @@ class htmlelements {
      * @param array $aOptions     array for all option fields
      * @return string
      */
-    public function getFormSelect($aAttributes, $aOptions=array()){
+    public function getFormSelect(array $aAttributes, array $aOptions = array())
+    {
         // $sTpl = '<select %s>%s</select>';
 
         if (!count($aOptions)) {
@@ -186,14 +205,19 @@ class htmlelements {
         }
         $aAttributes['label'] = $sOptions;
         return $this->getTag('select', $aAttributes);
-        /*
-        $this->_setAttributes($aAttributes);
-        return sprintf($sTpl, $this->_addAttributes(), $sOptions);
-         * 
-         */
     }
 
-    public function getTable($aHead, $aBody, $aTableAttributes=array()){
+
+    /**
+     * Generates an HTML table based on the provided header and body arrays.
+     *
+     * @param array $aHead An array of strings representing the table headers.
+     * @param array $aBody A 2-dimensional array of strings representing the table body rows and cells.
+     * @param array $aTableAttributes An optional array of attributes to be applied to the table element.
+     * @return string The HTML code for the generated table.
+     */
+    public function getTable(array $aHead, array $aBody, array $aTableAttributes = []): string
+    {
         $sReturn = '';
         $sTdata = '';
         $sThead = '';
@@ -213,7 +237,8 @@ class htmlelements {
             $sTdata .= '</tr>';
         }
         $this->_setAttributes($aTableAttributes);
-        return sprintf($sTpl, 
+        return sprintf(
+            $sTpl,
             $this->_addAttributes(),
             $sThead,
             $sTdata