Skip to content
Snippets Groups Projects
Commit 69013a0c authored by Hahn Axel (hahn)'s avatar Hahn Axel (hahn)
Browse files

Merge branch 'update_renderer_class' into 'main' 

Update renderer class

See merge request !18
parents 9d9421f0 56b2eb23
No related branches found
No related tags found
1 merge request!18Update renderer class
Expand all Show whitespace changes
Inline Side-by-side
docs/50_Forms/Input.md
+ 61
− 5
View file @ 69013a0c
......@@ -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
+ 32
− 3
View file @ 69013a0c
......@@ -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
+ 4
− 3
View file @ 69013a0c
......@@ -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
+ 98
− 73
View file @ 69013a0c
......@@ -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
......
public_html/classes/render-adminlte.class.php
+ 951
− 769
View file @ 69013a0c
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment