-
Notifications
You must be signed in to change notification settings - Fork 0
/
php2html.lib.php
6293 lines (5745 loc) · 300 KB
/
php2html.lib.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<? $DocFileLib='../php2html.lib.php'; $DocVer='1.4.2'; $DocRev='2024-08-10'; $DocIni='evs'; $ModNo=0; ## File informative only
{ ## Group ******************** System HEAD: **************************
# PHP to HTML generator - "Clever-Html-Engine" for front-end design, with lots of advanced features.
#
# If you program html code in php, you can use this library's routines to generate fast structured html code with many special functions.
#
# HTML elements INPUT / CHECKBOX / RADIO-GROUP / TABLE and others, generated from PHP-functions.
# Combined with: Label, ToolTip, Placeholder, dimensions and others.
# Multi language translate system.
# Incorporated open source: Font-awesome icons.
# Incorporated open source: HTML-editor system. TinyMCE.
# Extended table functions (sort, filter, and much more) with jquery.tablesorter (Mottie Tablesorter-library).
#
# Based on HTML5, CSS3, PHP7+ / PHP8+
# Source must be UTF-8, no tabs, indent: 4 chars
/* _____ _ _ __ _
* | ___|\ \ / / / _| |
* | |__ \ \ / / ___ ___ ___ | |_| |_
* | __) \ \/ / |___|( __)/ _ \| _| __)
* | |____ \ / \__ \ (_) ) | | |_
* |______| \/ (___)\___/|_| \__)
*
*/ $©= 'Open source - 𝘓𝘐𝘊𝘌𝘕𝘚𝘌 & 𝘊𝘰𝘱𝘺𝘳𝘪𝘨𝘩𝘵 © 2019-2024 EV-soft *** See the file: LICENSE'; /*
Created: 2020-02-29 evs - EV-soft
Latest revision: see file 1. line: $DocRev
R𝖾𝗏𝗂𝗌𝗂𝗈𝗇𝗌 𝗅𝗈𝗀:
2020-00-00 - evs Initial
*/
} ## Group ******************** /System HEAD **************************
##### WARNING: If you edit this file, you have to do the same edit, after an update !
##### Put your modifications in custom files like: project.init.php, customLib.inc.php (search : include, require_once - in this file)
{ ## Group ******************** System init: **************************
### System init:
// session_unset();
session_start();
# CONSTANTS:
define('DEBUG',false); # Set to true to activate system debugging
define('ThousandsSep',' '); # Used in number output
define('DecimalSep',','); # Used in number output
$isOnline = fsockopen("cdnjs.cloudflare.com", 80, $errno, $errstr, 30);
if ($isOnline) { $autoCDN= '2'; fclose($isOnline); }
else $autoCDN= '1'; // $autoCDN can be used to auto switch between - 1:Local-source 2:WEB-source-CDN
// LibName: ix: LocalPath: CDN-path: // File:
if ((isset($needJquery)) and ($needJquery>'0')) {
$LIB_JQUERY= [$needJquery, '_assets/jquery/latest/', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/']; // jquery.min.js
$LIB_JQUERYUI= [$needJquery, '_assets/jquery-ui/latest/', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.3/']; // jquery-ui.min.js
}
if ((isset($needTablesorter)) and ($needTablesorter>0)) {
$LIB_TABLESORTER= [$needTablesorter, '_assets/tablesorter/latest/', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/'];
}
if ((isset($needPolyfill)) and ($needPolyfill>0)) {
$LIB_POLYFILL= [$needPolyfill, '_assets/dialog-polyfill/latest/', 'https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/'];
}
if ((isset($needFontawesome)) and ($needFontawesome>0)) {
$LIB_FONTAWESOME= [$needFontawesome, '_assets/font-awesome/latest/', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/'];
}
if ((isset($needTinymce)) and ($needTinymce>0)) {
$LIB_TINYMCE= [$needTinymce, '_assets/tinymce/latest/', 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.0/'];
}
## Here you can find all and the latest version: https://cdnjs.com/libraries/
// part1= $_SERVER['HTTP_REFERER'] ?? '';
// part2= end(array_reverse(explode('/',trim($_SERVER['SCRIPT_NAME'],'/',))));
// gbl_ProgBase= substr($part1,strpos($part1,strlen($part2)),strpos($part1,$part2)+strlen($part2)+1);
// gbl_ProgBase= $part2.'/';
$gbl_ProgBase= ''; // echo $gbl_ProgBase;
# GLOBALS
#Defaults:
{
$gbl_TblIx= -1; # Index for table-id to separate multible tables in one page
$gbl_ProgTitl= 'php2html';
$gbl_progVers= 'Develop'.' ';
$gbl_progDesti= 'This program is about using library PHP2HTML';
$gbl_copyright='EV-soft';
$gbl_designer= 'EV-soft';
$gbl_menuLogo= $gbl_ProgBase.'_accessories/21997911.png';
$gbl_blueColor= 'lightblue';
$gbl_BodyBcgrd= 'Tan';
$gbl_iconColor= 'DarkGreen'; # Card-header icon
$gbl_TitleColr= 'DarkGreen'; # Caption text-color in card-head
$gbl_CardsBgrd= 'white;'; # Cards hideble background
$gbl_GridOn= true; # Use grid to place objects in rows / colums
$gbl_progZoom = 'small'; # Global tag "font-scale"
$gbl_labelAlgn= 'R'; # L/C/R - Align label for htm_Input() and htm_Inbox()
$gbl_ButtnBgrd= '#44BB44'; /* LightGreen */ $gbl_ButtnText= '#FFFFFF';
$gbl_BtLnkBgrd= 'yellow'; /* '#FCFCCC'; */ $gbl_BtLnkText= '#000000';
$gbl_TextLight= 'white'; $gbl_TextDark= 'black';
$gbl_BtDelBgrd= 'Crimson '; $gbl_BtDelText= $gbl_TextLight; # Delete: RED
$gbl_BtSavBgrd= '#0064b4'; $gbl_BtSavText= $gbl_TextLight; # Save/Submit: BLUE
$gbl_BtNavBgrd= '#269B26'; $gbl_BtNavText= $gbl_TextLight; # Navigate: GREEN
$gbl_BtGooBgrd= '#66CDAA'; $gbl_BtGooText= $gbl_TextDark; # Continue: MARINE
$gbl_BtNewBgrd= 'Orange'; $gbl_BtNewText= $gbl_TextDark; # CreateNew: ORANGE
$gbl_dimmed= ' opacity:0.8;';
}
if (is_readable($custFile= '../project.init.php')) include($custFile); # Change global Defaults
/* else echo '<br> '.__LINE__.' '.$custFile.' not found <br>'; */
$jsScripts= ''; # Empty buffer
if (is_null($rowHtml ?? '')) $rowHtml= '';
# PATHS:
# $gbl_ProgRoot is set in *.page.php files.
if (!is_null($GLOBALS["gbl_ProgRoot"]))
$gbl_ProgRoot= $GLOBALS["gbl_ProgRoot"];
else $gbl_ProgRoot= './../'; # $gbl_ProgRoot= "./../"; // "../"; Relative in 1. subniveau #-$gbl_ProgRoot= "./../../"; // Relative in 2. subniveau
$_assets= $gbl_ProgRoot.'_assets/';
$_base= '';
# MENU-folders:
if (!isset($folder1)) {
$folder1= $gbl_ProgRoot.'';
$folder2= $gbl_ProgRoot.'./';
$folder3= '';
$folder4= '';
$folder5= '';
}
if (!isset($_SESSION['proglang'])) $_SESSION['proglang']= '';
$App_Conf['language'] = $_SESSION['proglang'];
$englishOnly= false; # Deactivate the language translate system
$gbl_novice= false; # Activate extended help
$headEndScript= ''; # Scripts to run at end of page-HEAD
$bodyEndScript= ''; # Scripts to run at end of page-HEAD
## System required:
// require_once ($gbl_ProgRoot.'translate.inc.php');
// require_once ($gbl_ProgRoot.'filedata.inc.php');
// Now called on demand in *.page.php files !
# CONFIGURATION:
// if (empty($App_Conf)) $App_Conf= parse_ini_file() read from file
if (empty($App_Conf['language'])) $App_Conf['language'] = 'en : English'; // default language
//else $App_Conf['language'] = sessionStorage.getItem("proglang");
if (empty($App_Conf['test'])) $App_Conf['test'] = 'TESTER';
// $lang = 'en';
// $lang = substr($App_Conf['language'],0,2);
/*
if (false) { # Save/Get configuration to/from file:
FileWrite_arr($filepath='app_Conf.ini',$arrName='$App_Confxx',$list=$App_Conf);
$App_Confxx= FileRead_arr($filepath='app_Conf.ini'); // parse_str(file_get_contents('app_Conf.ini'), $App_Confxx);
echo "<pre>".'$App_Confxx:<br>'; print_r($App_Confxx); echo "</pre><hr>";
echo $App_Confxx['language'];
echo $App_Confxx['test'];
}
*/
} ## Group ******************** /System init **************************
{ ## Group ******************** SYS-FUNCTIONS: **************************
### NORMALY DON`T EDIT IN THE FOLLOWING CODE
# You can add special custom code in the file: $custFile= '../customLib.inc.php'
# else place it in the top of your .page.-file where it are needed
# DEBUGGING and erly declaring:
function arrPrint($arr,$name='',$rtrn=false) ## Output actual value of any variabeltype
{ if ($name>'') $name.=': ';
$result= "<br><textarea>".$name. print_r($arr). "</textarea><hr>\n"; // </pre>
if (!$rtrn) echo $result;
else return $result;
}
function arrPretty($arrVar,$titl='',$attr='rows="20" cols="135"',$wdth='100%',$rtrn=false) ## Pretty output of any variable
{ $result= "<meta charset='UTF-8'>
<div style='background: lightcyan; width:".$wdth.";'>".$titl."</div>
<textarea ".$attr." wrap = 'off' style='padding: 10px; width: ".$wdth."; display: block;'>".
print_r($arrVar,true).
"</textarea><hr>\n"; // </pre>
if (!$rtrn) echo $result; else return $result;
}
function run_Script($cmdStr='') {
echo "\n<script>\n".$cmdStr."\n</script>\n";
}
function set_Style($att='',$string='') {
echo "\n<style ".$att.'>'.$string." </style>\n";
}
//echo '<style type="text/css"> <!-- @font-face { font-family: barcode; src: url('.$gbl_ProgRoot.'_accessories/barcode.ttf); } --> </style>';
} ## Group ******************** /SYS-FUNCTIONS **************************
{ ## Group ******************** FUNCTIONS: **************************
### FUNCTIONS:
## PHP7: ordered arguments - PHP8: only needed named arguments (unordered)
## ver 1.1.0 # PHP8: type:'', name:'', valu:'', labl:'', hint:'', plho:'@Enter...', wdth:'', algn:'left', unit:'', disa:false, rows:'2', step:'', attr:'', list:[], llgn:'R', bord:'', rtrn:true,$form='',$ftop='');
# PHP7: $type='',$name='',$valu='',$labl='',$hint='',$plho='@Enter...',$wdth='',$algn='left',$unit='',$disa=false,$rows='2',$step='',$attr='',$list=[],$llgn='R',$bord='',$rtrn=false,$form='',$ftop='');
## ver 1.2.0 # PHP7: $labl='',$plho= '@Enter...',$icon='',$hint='',$type= 'text',$name= '',$valu= '',$form= '',$wdth= '100%',$algn= 'left',$attr= '',$rtrn= false,$unit= '',$disa= false,$rows= '2',$step= '',$list= [],$llgn= 'R',$bord= '',$ftop= ''
# An advanced object rel. in-output of data
function htm_Input(# labl:'', plho:'@Enter...', icon:'', hint:'', vrnt: 'text', name:'', valu:'', form:'', wdth:'100%', algn:'left', attr:'', rtrn:false, unit:'', disa:false, rows:'2', step:'', list:[], llgn:'R',bord:'', ftop:'')
# Generel order:
$labl= '', # string: Translated label above the input field
$plho= '@Enter...', # string: Translated placeholder shown when field is empty. Default: Enter...
$icon= '', # string: The icon left of the label (label prefix)
$hint= '', # string: Translated description for the field
$vrnt= 'text', # string: Input Variant - text, date, ... Look at source !
$name= '', # string: Set the fields name (and id)
$valu= '', # string: The current content in input field
$form= '', # string: With Local form given, click on showed OK-butt to submit
$wdth= '100%', # string: Width of the field-container
$algn= 'left', # string: The alignment of input content Default: left
$attr= '', # string: Give more (special / non system) input attrib to the input (height priority)
$rtrn= false, # bool: Act as procedure: Echo result, or as function: Return string
# htm_Input() only:
$unit= '', # string: A unit added to the content eg. currency or % If in front: '<' it is added as a prefix, else a suffix
$disa= false, # bool: Disable the field. Default: field is active
$rows= '2', # string: Number of rows in multiline input (eg. area/html) Default: 2 (Radio/Check-list: 1 to output horisontal)
$step= '', # string: the value of stepup/stepdown for numbers
$list= [], # array: Data for subitems in "multi-list" (eg. options, checkbox, radiolist) {opti:value,label,hint,attr}
$llgn= 'R', # string: Label align Default: Right
$bord= '', # string: BoxBorder color to mark required/optional field. Default= 'border: 1px solid var(--grayColor);'
$ftop= '', # string: Ajust field vertical position
$lpos= '' # string: style rel. Label offset (chck)
) {
global $gbl_GridOn, $gbl_iconColor, $gbl_labelAlgn;
if (($llgn == '') and ($gbl_labelAlgn >'')) $llgn= $gbl_labelAlgn;
($form=='' ? $result= '' : $result= '<form name= "'.$form.'" style="display:inline;">');
if ($form>'') $subm= '<input type="submit" value="OK" style="padding:0 0 0 2px; border-radius: 3px; width:22px; position: relative; color:blue;" title="Submit" />';
if ($wdth>'') $wdth= ' width: '.$wdth.'; '; else $wdth='';
if ($ftop>'') $ftop= ' top: '.$ftop.'; '; else $ftop='';
// if ($hint=='') $hint= '@There is no explanation !';
$hint= lang($hint);
$labl= lang($labl);
if ($icon>'') $icon= '<ic class="'.$icon.'" style="color: '.$gbl_iconColor.'; margin: 0 5px;"></ic> '; else $icon= '';
($plho=='' ? $plh='' : $plh=' placeholder="'.lang($plho).'" '); // .'<span style="font-weight:300;">'.lang($plho).'</span>" ');
if (substr($unit,0,1)=='<') { $pref= substr($unit,1); $suff= '';} else { $suff= $unit; $pref= ''; }
if (strpos(' '.$attr,'required')>0) $bord.= 'border: 1px solid orange;';
if (/* ($vrnt=='date') and */ ($valu=='')) $dataStyle= 'font-weight: 200; color:var(--grenColr1);'; else $dataStyle='font-weight: 600; ';
# htm_Input: FIELD:
if ($vrnt!='hidd')
$result.= '<div class="inpField" id="inpBox" style="margin: auto; padding: 0 2px 6px; '.$wdth.' '.$ftop.' display: inline-block; vertical-align: top;"> ';
# htm_Input: INPUT:
($name=='') ? $inpIdNm= ' id="missing" name="missing" '
: $inpIdNm= ' id="id_'.$name.'" name="'.$name.'" ';
$inpStyle= ' class="boxStyle" style="text-align: '.$algn.'; font-size: 14px; '. $dataStyle. $bord; //boxStyle - border: 1px solid var(--grayColor);
$eventInvalid= ' oninvalid="this.setCustomValidity(\''.lang('@Wrong or missing data in ').$labl.' ! \')" oninput="setCustomValidity(\'\')" ';
$pattern= '';
if ($disa==true) $aktiv=' disabled '; else $aktiv= '';
$top= '';
$just= '';
switch ($vrnt) { ## VARIANTS:
case 'intg' : $result.= '<input type= "number" '.$inpIdNm. $inpStyle. ' step:'. $step. '" value="'.$valu.'" '. $aktiv. $plh. $attr.' />'; break;
case 'text' : $result.= '<input type= "text" '. $inpIdNm. $inpStyle. '" value="'. $valu.'" '. $eventInvalid. $aktiv. $plh. $attr.' />'; break;
case 'dec0' : # Used for quantity - outputs unit as prefix or suffix
case 'dec1' : # Used for Amount - // SPACE as thousands separator
case 'dec2' : $result.= '<input type= "text" '. $inpIdNm. ' value="'.$pref. number_format((float)$valu,(int)substr($vrnt,3,1),DecimalSep,ThousandsSep).$suff. '" '.
$inpStyle. '"'. $eventInvalid. $aktiv. $plh. $attr. $pattern=' pattern="^[$\-\s]*[\d,]*?([.]\d{0,2})?\s$" />'; break;
case 'num0' :
case 'num1' : // thousands separator ,|. is not allowed in number ! - https://codepen.io/nfisher/pen/YYJoYE/ - SPACE will be removed
case 'num2' : /* lang="en" to allow "."-char as decimal separator, and national ","-char */
case 'num3' : $result.= '<input type="text" '. $inpIdNm. ' lang="en" step="'.$step.
'" value="'.$pref.number_format((float)$valu,(int)substr($vrnt,3,1),DecimalSep,ThousandsSep).$suff.'" '. // FIXIT: Wrong output
//'" value="'.$valu.'" '.
$eventInvalid. $aktiv. $plh. $attr.
$inpStyle. '" '.$pattern=' pattern="(\d{3})([\.])(\d{2})"'. ' />'; break; // No unit but with browser type check !
## Number values accepted by input-validation, has to be cleaned
## for SPACE '%' and currency symbols (prefix/suffix), before saved in DB !
## Also check the decimal separator.
case 'barc' : $result.= '<input type= "text" '. $inpIdNm. ' value="'.$valu.'" '. $eventInvalid. $aktiv. $plh. $attr. 'title="'.$valu.'"'.
$inpStyle. ' font-family:barcode; font-size:19px; font-weight:normal; '. '" />'; break;
/* case 'qrcd' : $result.= '<input type= "text" '. $inpIdNm. ' value="'.$valu.'" '. $eventInvalid. $aktiv. $plh. $attr. // 2D QR code
$inpStyle. ' font-family:barcode; font-size:19px; font-weight:normal; '. '" />'; break; */
case 'mail' : $result.= '<input type= "email"'. $inpIdNm. ' value="'.$valu.'" '. $eventInvalid. $aktiv. $plh. $attr.
$inpStyle. '" '.$pattern='pattern="^[a-zA-Z0-9.!#$%&]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$"'. ' />'; break; // (?i)\b[A-Z0-9._%+-] +@(?:[A-Z0-9-]+ \.)+[A-Z]{2,6}\b
case 'link' : $result.= '<input type= "url" '. $inpIdNm. ' value="'.$valu.'" '. $eventInvalid. $aktiv. $plh. $attr.
//'pattern="^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?"'.
$inpStyle. '" '.$pattern='https?:/.+'. ' />'; break;
case 'sear' : $result.= '<input type="search" '.$inpIdNm. ' value="'.$valu.'" '. $eventInvalid. $aktiv. $plh. $attr.
$inpStyle. '" />'; break;
case 'file' : $result.= '<input type= "file" '. $inpIdNm. ' value="'.$valu.'" '. $eventInvalid. $aktiv. $plh. $attr.
$inpStyle.$dataStyle. '" />'; break;
case 'imag' : $result.= '<input type= "image" '.$inpIdNm. ' value="'.$valu.'" '. $eventInvalid. $aktiv. $plh. $attr.
$inpStyle. ' height: 18px;" />'; break;
case 'date' : $result.= '<input type= "date" '. $inpIdNm. $inpStyle. ' display:inline-block;'.' min-width: 105px; '. // if empty: color: green;
' margin: 5px 5px 0; padding: 8px 2px 2px 2px;" value="'.$valu. '" placeholder = "yyyy-mm-dd" '. $aktiv. $attr. ' />'; break;
case 'time' : $result.= '<input type= "time" '. $inpIdNm. ' value="'.$valu.'" '. $eventInvalid. $aktiv. $plh. $attr.
$inpStyle. '" />'; break;
case 'week' : $result.= '<input type= "week" '. $inpIdNm. $inpStyle. ' display:inline-block;'.'" value="'. $valu. '" placeholder ="?" '. $aktiv. $attr.' />'; break;
case 'mont' : $result.= '<input type= "month" '.$inpIdNm. $inpStyle. ' display:inline-block;'.'" value="'. $valu. '" placeholder ="?" '. $aktiv. $attr.' />'; break;
case 'rang' : $result.= '<span class="fieldContent boxStyle range-wrap" style="height: 32px; ">'.
'<input class="range" type= "range" '.$inpIdNm. ' value="'.$valu.'" '. $aktiv. $attr. /* 'onclick="setBubble('.$name.',\'bubbleDiv\') " ' . */
'oninput="this.nextElementSibling.value = this.value" style= "text-align: '.$algn.'; font-size: 12px; margin: 0; padding-top: 5px; box-shadow: none;" />
<output style="top: -18px; left: 45%; position: relative; font-size: 10px">'.$valu.'</output>'.
'<div class="bubble" id="bubbleDiv" name="bubbleDiv"
style="font-size: 10px; position: relative; width: 100%; text-align: center; opacity: 80%; top: -37px; "> '. // ' min="0" max="50"'
'<span style="width: 10%; float:left;">'.str_replace('"','',substr($attr,1,7)).'</span> '.
// '<span style="width: 33.33%;"> './* $valu. */'</span> '.
'<span style="width: 20%; float:right;">'.str_replace('"','',substr($attr,-9)).'</span>'.
'</div>'.
'</span>'; break; // (FIXIT:) setBubble - Output min-val-max
case 'butt' : $result.= '<span class="fieldContent boxStyle" style="min-height: 28px;">'.
'<input type= "button" '. $inpIdNm. ' value="'.$valu.'" '. $aktiv. $attr.
$inpStyle. ' margin: 0; padding: 2px; border-radius: 4px; background-color: lightgray;" /> </span>'; break; // No functionality !
case 'subm' : $result= // '<span class="fieldContent boxStyle" style="min-height: 28px;">'.
'<input type= "submit" '. $inpIdNm. ' value="'.$valu.'" '. $aktiv. $attr.
$inpStyle. ' margin: 0; padding: 2px; border-radius: 4px; background-color: lightgray;" '.'/> '/* .'</span>' */; break;
case 'colr' : $result.= ## COLOR:
'<span class="fieldContent boxStyle" style="height: 28px;">'.
'<input type= "color" '. $inpIdNm. ' value="'.$valu.'" '. $aktiv. $attr.
$inpStyle. ' margin: 0; padding: 0; width: 100%;border-radius: 4px;" /> </span>'; break;
case 'phon' : $result.= ## PHONE:
'<input type= "tel" '. $inpIdNm. ' value="'.$valu.'" '. $eventInvalid. $aktiv. $plh. $attr. $inpStyle. '" />'; break;
case 'pass' : $result.= ## PASSWORD:
'<span class="fieldContent boxStyle" style="'.$bord.' text-align: left; '.($rows!='0' ? 'height: 36px; ':'').'padding-right: 20px;">'.
'<div style="white-space: nowrap;">'.
'<input type= "password" '. $inpIdNm. /* $inpStyle. */' style="font-weight: 600; height: 8px; width: 75%; margin-top: -1px;
box-shadow: none;" value="'. $valu.'" '.$eventInvalid. $aktiv. $plh. $attr.' onkeyup="pw_strength(id_'.$name.')"
/>'.
# labl:'', icon:'', hint:'', type:'submit', name:'', link:'', evnt:'', wdth:'', font:'32px', fclr:'gray' bclr:'white', akey:'', rtrn:false)
htm_IconButt($btnlabl='', $btnicon='far fa-eye fa-fw colrgreen',$btnhint= lang('@Show/Hide password'),
$btntype='button', $btnname='tgl_'.$name, $btnlink='',
$btnevnt='onmousedown=\'togglePassword(id_'.$name.','.'tgl_'.$name.')\'', $wdth='', $btnfont='14px;',
$btnfclr='green', $btnbclr='white; padding-right:3px; padding-bottom:1px; margin-top:1px; width:28px;',
$btnakey='', $btnrtrn=true ).
'</div>';
$str= ' <span id="mtPoint'.$name.'"> 0</span>'. '/10';
if ($rows!='0')
$result.= '<meter id= "pwPoint_'.'id_'.$name.'" style="position:relative; height:12px; width:100%; top: -4px;" '.
'min="0" low="6" optimum="7" high="9" max="10" '.
'title="'.lang('@Password strength: 0..10 (This fails !)').'">'. // $str.'"'. // ' <span id=\"mtPoint\"'.$name.'> 0</span>'. '/10"'.
'</meter>';
$result.= '</span>'; break;
case 'area' : $result.= ## TEXTAREA:
'<span class="fieldContent boxStyle" '. $inpIdNm. ' style="'.$bord.' padding: 10px 4px 0;"> <textarea rows="'.$rows.'" id="'.$name.'" name="'.$name.
'" style="width:99%; font-size: 1em; border: 1px solid Gainsboro; border-radius: 4px; '.$dataStyle.' '.'" '.
$eventInvalid. $aktiv. $plh.$attr.' >'.$valu.'</textarea>'; $just= 'top: -4px; position: relative;'; break;
case 'html' : $result.= ## HTML-TEXT:
'<span class="fieldContent boxStyle" style="'.$bord.' padding: 10px 4px 4px;"> <small><div contenteditable="true" rows="'.$rows.'" id="id_'.$name.'" name="'.$name.
'" style="background-color: white; min-height: '.($rows>'1' ? '34px;' : '5px;').' border: 1px solid Gainsboro; padding: 2px; " '. // Like area, but with html-content
$eventInvalid. $aktiv. $plh.' data-placeholder="'.lang($plho).'" '. $attr.' >'. $valu.'</div></small>';
// if ($disa) $result.= '<script>document.getElementById("'.$name.'").contentEditable = "false"; </script>';
$just= 'top: -4px; position: relative;'; break;
case 'chck' : $result.= ## CHECKBOX:
'<span class="fieldContent boxStyle '.(count($list)== 1 ? 'fieldSingle' : '').'" style="'.$bord.' ">';
foreach ($list as $rec) { // $list= [['name','@Label','@ToolTip'], ['0:name',1:'@Label',2:'@ToolTip',3:state:'checked/selected',4:otherAttr (id="idxx")], ['@Label','@ToolTip'],...]
array_push($rec, '', ''); # Prevent error on $rec[3] / $rec[4]
$result.= '<span style="display: inline-block">';
## https://stackoverflow.com/questions/11424037/do-checkbox-inputs-only-post-data-if-theyre-checked (dublicated id because of this !)
$result.= '<input type= "hidden" id="'.$rec[0].'" name="'.$rec[0].'" value="unchecked" /><label for="'.$rec[0].'"></label>'; # Hidden field because Unchecked boxes is not included in $_POST !
$result.= '<input type= "checkbox" id="'.$rec[0].'" name="'.$rec[0].'" value="checked" '.$aktiv. $rec[3].' '. $rec[4]. ' '.$valu.' style="width: 20px; box-shadow: none; scale:1.3;"/>'.
'<label for="id_'.$rec[0].'" style="position: relative; width: min-content;'.$lpos.'">'.Lbl_Tip($rec[1],$rec[2],'','12px; box-shadow: none; '.$attr).'</label>';
// '<label for="'.$rec[0].'" ">'.Lbl_Tip($rec[1],$rec[2],'','12px; box-shadow: none; '.$attr).'</label>';
$result.= '</span>';
// if ($rows=='1') $result.= ' '; else $result.= '<br>';
} $result.= ''.($subm ?? '').'</span>'; break;
case 'rado' : $result.= ## RADIO:
'<span class="fieldContent boxStyle" style="'.$bord.'"><small>';
foreach ($list as $rec) { // $list= [[0:'value',1:'Label',2:'@ToolTip',3:state:'checked/selected'], ['Label','@ToolTip'],...]
if ($valu==$rec[0]) $chk= ' checked '; else $chk= ' ';
$result.= '<input type= "radio" id="id_'.$rec[0].'" name="'.$name.'" value="'.$rec[0].'" '.
$chk.($rec[3] ?? '').$aktiv. ' '.$attr.' style="width: 20px; box-shadow: none;">'.
'<label for="id_'.$rec[0].'" style="position: relative; top: -2px;">'. Lbl_Tip($rec[1],$rec[2],'','12px; box-shadow: none; ').'</label>';
if ($rows=='1') $result.= ' '; else $result.= '<br>';
} $result.= '</small>'.($subm ?? '').'</span>'; break;
case 'opti' : $result.= ## OPTION:
'<span class="fieldContent boxStyle" style="'.$bord.' background-color; white; text-align: center; padding: 10px 4px 4px;"><small>';
$result.= '<select class="styled-select" id="id_'.$name.'" name="'.$name.'" '.($events ?? '') .' '.$eventInvalid.'style="width: 98%; border-color: Gainsboro; '.($valu>'' ? 'font-weight: 600;':'color:var(--grenColr1)').($colr ?? '').'" '.$attr.' '.$aktiv.'> '; dvl_pretty();
$result.= '<option label="'.lang($plho).'" value="'.$valu.'">'.lang('@Select!').'</option> '; # title="'.$hint.'" selected="'.$valu.'"
foreach ($list as $rec) { # $list= [[0:value, 1:name, 2:@ToolTip, 3:state:'checked/selected', [...]]
$result.= '<option '. /* .'label="'.lang($rec[x]).'" '. */ 'title="'.lang($rec[2] ?? '').'" value="'.$rec[0].'" '.$state=$rec[3] ?? ''.$attr=$rec[4] ?? ''; // Firefox does not support Label !
if ($rec[0]==$valu) $result.= ' selected ';
$result.= '>'.$lbl=lang($rec[1]).'</option> ';
} $result.= '</select></small>'.($subm ?? '').'</span>'; break;
// case 'show' : $result.= '<input type= "text" id="id_'.$name.'" name="'.$name.'" value="'.$valu.'" disabled />'; break;
case 'hidd' : $result.= ## INVISIBLY:
'<input type= "hidden" id="id_'.$name.'" name="'.$name.'" value="'.$valu.'" />'; break;
default : $result.= ## UNSPECIFYED:
' htm_Input(): Illegal vrnt ! ';
dvl_pretty();
}
# htm_Input: LABEL & HINT:
switch (strtoupper($llgn)) {
case 'L': $lblalign = 'margin-right: auto;'; break; // Align label Left
case 'C': $lblalign = 'margin: auto;'; break; // Align label Center
case 'R': $lblalign = 'margin-left: auto;'; break; // Align label Right
default: $lblalign = 'margin-left: auto;';
}
if ($vrnt!='hidd')
$result.= ' <abbr class= "hint">'.
($labl>'' ?
'<label for="id_'.$name.'" style="font-size: 12px; '.$top. ' vertical-align:top; ">
<div style="white-space: nowrap; '.$lblalign.$just.'">'.$icon.$labl.'</div>
</label>' : '').($hint>'' ?
'<data-hint style="top: 45px; left: 2px;">'. $hint.
($unit>'' ? (' <br>'.lang('@Unit: ').ltrim($unit,'<')) : '').
($pattern>"" ? ('<br><div style="color:green">'. $pattern. '</div>') : '').
'</data-hint>
</abbr>' : '');
if ($vrnt!='hidd')
$result.= '</div>'; # :FIELD inpField
if ($form>'') $result.= '</form>';
if (!$rtrn) echo $result; else return $result;
} # :htm_Input()
# A ontainer with: Border, Label, Hint, (Placeholder)
function htm_Inbox(# labl:'', plho:'@Enter...', icon:'', hint:'', vrnt: 'noUse', name:'noUse', valu:'', form:'noUse', wdth:'200px;', algn:'left',attr:'', rtrn:false, unit:'noUse', disa:false, rows:'noUse', step:'noUse', list:['noUse'], llgn:'R', bord:'1px solid var(--grayColor);', ftop:'')
# Inbox: container with: Border, Label, Hint, (Placeholder)
# Design and parameters same as htm_Input()
$labl= '', # string: Translated label above the input field
$plho= '@Enter...', # string: The placeholder shown with blank value
$icon= '', # string: The icon left of the label
$hint= '', # string: The Translated description for the field
$vrnt= 'noUse', # string: Variant
$name= 'Body_div', # String: Set the Editable name (and id)
$valu= '', # string: The HTML content of the box-body
$form= 'noUse', #
$wdth= '200px', # string: The outher Width of the field-container
$algn= 'left', # string: The alignment of input content Default: left
$attr= '', # string: Give more (special / non system) attrib to the field
$rtrn= false, # bool: Act as procedure: Echo result, or as function: Return string
$unit= 'noUse', #
$disa= false, # bool: Disable the field as editeble. Default: field is not editeble
$rows= 'noUse', #
$step= 'noUse', #
$list= ['noUse'], #
$llgn= 'R', # string: Label align Default: Right
$bord= '1px solid var(--grayColor);', # string: BoxBorder color to mark required/optional field. Default= 'border: 1px solid var(--grayColor);'
$ftop= '' # string: Ajust field vertical position
) {
global $gbl_iconColor, $gbl_labelAlgn;
if ($llgn == '') $llgn= $gbl_labelAlgn;
if ($disa==true) $disa='contenteditable="true"'; else $disa='';
if ($icon>'') $icon= '<ic class="'.$icon.'" style="color: '.$gbl_iconColor.'; margin: 0 5px;"></ic> '; else $icon= '';
$ftop= ($ftop>'') ? ' top: '.$ftop.'; ' : '';
switch (strtoupper($llgn)) {
case 'L': $lblalign = 'margin-right: auto;'; break; // Align label Left
case 'C': $lblalign = 'margin: auto;'; break; // Align label Center
case 'R': $lblalign = 'margin-left: auto;'; break; // Align label Right
default: $lblalign = 'margin-left: auto;';
}
$result=
'<div class="boxStyle" id="id_Inbox_div_'.$name.'" style=" '. /* The outher div with border: */
'box-shadow: 3px 4px 2px var(--shadColor);
border-radius: 5px;
border: '.$bord.'
'.$ftop.'
width: '.$wdth.';
padding: 10px 5px 2px 5px;
margin: 5px 2px 2px;
background-color: transparent;
display: inline-block;
vertical-align: top;
text-align: '.$algn.';
">
<abbr class= "hint" >'. /* The Tooltip-container shown on mouse over */
'<label for="id_Inbox_div_'.$name.'" style="font-size: 12px; height: 0; display: block; '.$lblalign.'; ">'. /* The Label above the field content */
'<div style="white-space: nowrap; position: relative; background-color: var(--lablBgrnd); '.
'border: 1px solid var(--FieldBord);
top: -19px;
border-radius: 9px;
width: min-content;
padding: 0 5px;
'.$lblalign.'
">'.
$icon.lang($labl).
'</div>
</label>
<div id= "label_div"; style="position: relative; ">'.
'<data-hint style="left: -5px;">'.lang($hint). /* The text for the Tooltip */
'</data-hint>
</div>
</abbr>
<div id="'.$name.'" '.$disa.' data-ph="'.$plho.'"'. /* The inner div-field content */
'style="
font-size: smaller;
[contenteditable=true]:empty:not(:focus):before { content:attr(data-ph) };'. // Not working !
$attr.' ">'.
$valu.
'</div>
</div>';
if (!$rtrn) echo $result; else return $result;
} # htm_Inbox
# General output for pt. Progress etc.
function htm_Output(# labl:'', icon:'', hint:'', vrnt:'pgrs', name:'', form:'', valu:'', vmax:''
$labl='', # string: The caption text
$icon='', # string: comming new (label prefix)
$hint='', # string: The hint/tooltip
$vrnt= 'pgrs', # string: Variant
$name= '', # String: Set the name/id
$form= '', # String: Form name
$valu= '', # string: The actual value / list of other elements' ids
$vmax= '', # string: The Max value
$attr= '', # string: Give more (special / non system) attrib to the field
$bclr= 'white', # string: span background-color
$rtrn= false, # bool: Act as procedure: Echo result, or as function: Return string
) { global $gbl_iconColor;
if ($icon>'') $icon= '<ic class="'.$icon.'" style="color: '.$gbl_iconColor.'; margin: 0 5px;"></ic> '; else $icon= '';
if ($bclr>'') $bclr= ' background: '.$bclr.';'; else $bclr= '';
$result= '<span id="id_'.$name.'" style= "padding: 2px 5px; position: relative;'.$bclr.'; ">';
if ($hint>'') $result.= ' <abbr class= "hint">';
switch ($vrnt) { // Variants:
case 'outp' : $result.= '<label for="id_'.$name.'">'.$icon.lang($labl).'</label>'. # Output element with label and hint
'<output name="'.$name.'outp" for="'.$valu.'" form="'.$form.'">
</output>'; break;
/* case 'outp' : echo '
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">
+<input type="number" id="b" value="25">
=<output name="x" for="a b"></output>
</form>';
break;'
*/
case 'pgrs' : if ($valu<0) $value=''; else $value=' value="'.$valu.'"';
$result.= '<label for="id_'.$name.'">'.$icon.lang($labl).'</label>'. # Output Progress indicator
'<progress id="'.$name.'pqrs" '.$value.' max="'.$vmax.'" >
</progress>'; break;
default : $result.= ' htm_Output(): Illegal vrnt ! ';
}
if ($hint>'') $result.=
'<data-hint style="top: 45px; left: 2px;">'. lang($hint). '</data-hint>
</abbr>';
$result.= '</span>';
if (!$rtrn) echo $result; else return $result;
/*
<style>
progress{ /* custom style for overall progress bar * /
-webkit-appearance: none; /*reset to default appearance* /
-moz-appearance: none;
appearance: none;
width: 200px;
height: 20px;
border-radius: 20px;
border: 1px solid #434343;
}
progress::-webkit-progress-bar { /* style for background track* /
background: rgb(221, 221, 221);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
border-radius: 20px;
}
progress::-webkit-progress-value { /*style for progress track* /
background-image: linear-gradient(120deg,#ffd173 0,#18cc00 55%);
border-radius: 20px;
}
</style>
*/
}
# A caption with icon, label and hint
function htm_Caption(# labl:'',icon:'',hint:'',algn:'',styl:'color:#550000; font-weight:600; font-size: 13px;',rtrn:false)
$labl='', # string: The caption text
$icon='', # string: label prefix
$hint='', # string: The hint/tooltip
$algn='', # string: Caption Alignment
$styl= # string: Default Caption text style
'color:#550000; font-weight:600; font-size: 13px;',
$rtrn=false
) {
if ($icon>'') $icon= '<ic class="'.$icon.'" style="color: '.$gbl_iconColor.'; margin: 0 5px;"></ic> '; else $icon= '';
if ($algn>'') $algn= ' text-align: '.$algn.';';
$result= '<abbr class= "hint">
<data-colrlabl style="'.$styl.$algn.'">'.$icon.' '.lang($labl).'</data-colrlabl>';
if ($hint>'') $result.= '<data-hint> '.lang($hint).' </data-hint>';
$result.= '</abbr>';
if (!$rtrn) echo $result; else return $result;
}
# Text formatted in a div
function htm_TextDiv(# body:'', algn:'left', marg:'8px', styl:'box-shadow: 3px 3px 6px 0px #ccc; padding: 5px; border: solid 1px lightgray; ',attr:'background-color: white;', rtrn:false )
$body, # string: Html-text inside div
$algn='left', # string: div-text alignment
$marg='8px', # string: div margin
$styl= # string: Other style
'box-shadow: 3px 3px 6px 0px #ccc; padding: 5px; border: solid 1px lightgray; white-space: nowrap; ',
$attr= # string: Other style
'background-color: white; ',
$rtrn=false
) {
$result= '<div style="margin: '.$marg.'; overflow-x: auto; text-align: '.$algn.'; '.$styl.$attr.'">'. lang($body). '</div>';
if (!$rtrn) echo $result; else return $result;
}
# Text displayed in a fixed-width font, and preserves both spaces and line breaks
function htm_TextPre(# body, algn:'left', marg:'8px', attr:'', font:'', code:false, rtrn:false) ## Preformatted HTML text
$body, # string: Html-text inside pre
$algn='left', # string: pre-text alignment
$marg='8px', # string: Default pre margin
$attr='', # string: Other style
$font='', # string: pre-text font
$code=false, # bool: convert: <b>bold</b>
$rtrn=false
) {
if ($code) $body= htmlspecialchars($body); // convert: <b>bold</b>
if ($font>0) $font= ' font-family: '.$font.'; ';
$result= '<pre style="margin: '.$marg.'; text-align: '.$algn.'; '.$font.' white-space: pre-wrap; '.$attr.'">'. $body. '</pre>';
if (!$rtrn) echo $result; else return $result;
}
/* function htm_CodeDiv($code,$rtrn=false) { // htm_CodeDiv(highlight_words(highlight_string('<? '.$strCode,true)));
$result= '<p style="text-align: left; padding:4px; white-space: nowrap; overflow-x: auto; line-height: 1; background-color:#121212;">'; // #121212
$result.= $code; //str_replace(['$','"'],['\$','\"'],$code);
$result.= '</p>';
if ($rtrn==false) echo $result;
else return $result;
};
*/
/*
<dt> a term in a description list
<dd> Describes the term in a description list
*/
# Starting various types ef text list
function htm_List_(# capt:'', vrnt:'ul', type:'circle', $strt:'0', styl:'text-align:left;', rtrn:false)
$capt='', # string: Html-text
$vrnt='ul', # string: Variants: <ul> an unordered list / <ol> an ordered list / <li> a list item / <dl> a description list
$type='disc', # string: List-style marker type (Ref: https://www.w3schools.com/cssref/playdemo.php?filename=playcss_list-style-type)
$strt='0', # string: Index start for ordered list
$styl='text-align:left;', # string: Other style rel. body
$rtrn=false # bool: Function Return or echo result
) { $mark=' style="list-style-type: '.$type.'; "';
$result= '<span style="'.$styl.'">';
switch ($vrnt= strtolower($vrnt)) {
case 'ul' : $result.='<ul '.$mark.'>'; break; # Unordered list
case 'ol' : $result.='<ol '.$mark.' start="'.$strt.'">'; break; # Ordered list
case 'li' : $result.='<li '.$mark.'>'; break; # List item
case 'dl' : $result.='<dl '.$mark.'>'; break; # Description list
default : $result.='<'.$vrnt.' '.$mark.'>'; # Custom variant
}
$result.= lang($capt);
$GLOBALS['ListVrnt']= $vrnt;
$GLOBALS['ListMark']= $mark;
if ($rtrn==false) echo $result; else return $result;
}
# A single item in a text list
function htm_List_item(# labl:'', body:'', rtrn:false)
$labl='', # string: Html-text - term/name in a description list
$body='', # string: Variants: <dt> term/name in a description list. / <dl> an description list
$rtrn=false # bool: Function Return or echo result
) {
switch ($flag= $GLOBALS['ListVrnt']) {
case 'dl' : $result= '<dt>'.lang($labl).'</dt>'.
'<dd>'.lang($body).'</dd>'; break; # Description list
case 'ol' : $result= '<li>'.lang($body).'</li>'; break; #
default : $result= '<'.$flag.$GLOBALS['ListMark'].'>'.lang($body).'</'.$flag.'>';
}
if ($rtrn==false) echo $result; else return $result;
}
# Ending a text list
function htm_List_end(# rtrn:false)
$rtrn=false # bool: Function Return or echo result
) { $result= '</'.$GLOBALS['ListVrnt'].'>'. '</span>';
if ($rtrn==false) echo $result; else return $result;
}
## Hightlight - Custom word-list and custom style:
function highlight_words($text, $wrds='', $styl='',$patt='~\w{4,10}~') {
if ($wrds=='')
$wrds='labl capt body foot plho icon hint desc type name valu vmax vmin form subm acti clas wdth heig algn marg styl attr mode font colr fclr bclr llgn link targ akey kind echo unit disa rows step bord plac rept rtrn titl info inis imag pbrd simu clck stck cntx text html srce butt mess tplc tsty head evnt note rept shrt frst last from to__ elem pref suff filt data crea modi expo just sort filt vrnt capt pref body suff idix note data filt sort crea modi vhgh styl from list enbl dflt strt expo show poup help ftop code synt repl tout
';
else $wrds.= $wrds;
$wrds= str_replace(' ',': ',$wrds); # Add : to all words
if ($styl=='') $styl='color:'.'cyan; './* '#550000 #a16802; '. */ 'font-style:italic;';
preg_match_all($patt, $wrds, $matches);
if(!$matches) return $text;
$styl= 'style="'.$styl.'" ';
$replacement = '~\\b(' . implode('|', $matches[0]). ')\\b~';
return preg_replace($replacement, '<span '.$styl.'>$0</span>', $text);
}
## Remove the needed triggering <? prefix
function highlight_str($code,$rtrn=true) {
$source= highlight_string('<?'.$code,$rtrn); # print_r(htmlentities($source));
$result= str_replace('<?','',substr($source,0,80)).substr($source,80); # print_r(htmlentities($result));
$result= str_replace('<code style="color: orange;">','',substr($result,0,80)).substr($result,80);
$result= str_replace('</code>','',$result); ## Added in highlight_string() !
if ($rtrn==false) echo $result; else return $result;
}
# A span containing syntax formattet php-code
function htm_CodeBox(# code:'', synt:true, repl:false, rtrn:false)
$code='', # string: php-code with syntax display
$synt=true, # bool: Activate syntax output
$repl=false, # bool: Do output formattet string
$rtrn=false # bool: Function Return or echo result
){
if ($repl==true) $code= sprintf(''.''.$code); // sprintf($format, $num, $location);
$result= '<span style="text-align: left; white-space: nowrap; overflow-x: auto; line-height: 1;">
<pre style= "background-color: #121212; text-align: left; padding:6px; overflow-x: auto; ">'.
(($synt==true) ? highlight_words(highlight_str($code)) : $code ).
'</pre></span>';
if ($rtrn==false) echo $result; else return $result;
};
# Vertical orientated text
function htm_TextVer(# body, algn:'left', marg:'8px', attr:'', font:'', code:false) ## Vertical text
$body, # string: Html-text inside div
$algn='left', # string: text alignment
$marg='8px', # string: Default margin
$attr='', # string: Other style
$font='', # string: text font
$code=false # bool: convert: <b>bold</b>
) {
if ($code) $body= htmlspecialchars($body); // convert: <b>bold</b>
if ($font>'') $font= ' font-family: '.$font.'; ';
echo '<div style="margin: '.$marg.'; text-align: '.$algn.'; '.$font.'
position: relative;
transform-origin: top left; transform: rotate(-90deg) translate(-30%, 49.5%);
margin: auto; line-height: 1.44; '.$attr.'">'. $body. '</div>';
}
# A very small text line
function htm_MiniNote(# note:'') # Very small text-line
$note= ''
)
{ echo '<br><small><small>'.lang($note).'</small></small>';
}
# A text with a caption on colored line
function htm_TextTip(# capt:'TIP', body:'', wdth:'', algn:'center', colr:'')
$capt='TIP', # string: The output caption
$body='', # string: The output text
$wdth='', # string: The div width
$algn='center', # string: The div alignment
$colr='' # string: the background-color
)
{ if ($wdth>'') $wdth= ' width:'.$wdth.'; ';
if ($algn=='center') $algn= ' margin: auto; ';
else if ($algn>'') $algn= ' text-align:'.$algn.'; ';
echo '<div style="'.$wdth. $algn.'; border:1px solid gray; ">'.
'<div style="background-color: '.$colr.'; color: '.invertColor($colr,true).';">'.$capt. '</div>'.
'<div style="padding: 8px; ">'.$body.'</div>'.
'</div>';
}
# A div containing a text with a hidden hint
function htm_TextHint(# text:'', hint:'', styl:'', attr:'', rtrn:false) {
$text='Visibly Text', # string: Visibly Text
$hint='Hidden description', # string: Hidden description
$styl='background-color: white; ', # string: Outher style (div-container)
$attr= # string: Inner style (span-popup)
'box-shadow: 3px 3px 6px 0px #ccc; padding: 5px; border: solid 1px lightgray; white-space: nowrap; ',
$rtrn=false # bool: Function Return or echo result
){ # onmouseover: show popup description window:
$result= '
<div class="tiptext" style="width: max-content; '.$styl.'">'.$text.'
<span class="description abbr hint"
style="display:none; position:relative; top:30px; left: -50px; border:1px solid gray; width:200px; background-color: var(--HintsBgrd); '.$attr.'">
'.lang($hint).'
</span>
</div>
<script>
$(".tiptext").mouseover(function() { $(this).children(".description").show();
}).mouseout (function() { $(this).children(".description").hide();});
</script>';
if (!$rtrn) echo $result; else return $result;
}
# A image with caption, label and a hint
function htm_Figure(# capt:'',type:'',imag:'',styl:'',labl:'',hint:'',rtrn:false) {
$capt= '', # string: The header text
$type= 'h1', # string: Header type (h1..h6)
$imag, # string: Path to the image
$info= '', # string: alternative text
$styl= '', # string: Styles for the image
$labl= '', # string: The figure caption/label
$hint= '', # string: Hidden description
$rtrn= false # bool: Function Return or echo result
)
{ $result= '<'.$type.'>'.lang($capt).'</'.$type.'>
<figure>
<img src="'.$imag.'" alt="'.$info.'" style="'.$styl.'">
<figcaption>'.lang($labl).'</figcaption>
</figure>';
if ($hint>'') $result=
'<abbr class= "hint" style="position: relative;">'.
$result.
'<data-hint style="left: auto;">'.lang($hint).'</data-hint>'.
'</abbr>';
if (!$rtrn) echo $result; else return $result;
}
# A summery list with collapsible details
function htm_Details(# capt:'',type:'',body:'',styl:'',labl:'',hint:'',mode:'',rtrn:false) { # Collapsibly text
$capt= '', # string: The header text
$type= 'h1', # string: Header type (h1..h6)
$labl= '', # string: The details summary
$body, # string: The details text
$styl= '', # string: Styles for capt & body & labl
$hint= '', # string: Hidden description
$mode= '', # string: Initial mode: 'open'/''
$rtrn= false # bool: Function Return or echo result
)
{ if ($capt>'')
$result= '<'.$type.' style="'.$styl.'">'.(($capt>'') ? lang($capt) :'').'</'.$type.'>';
else $result= '';
$result.= '
<details '.$mode.' style="'.$styl.'">
<summary>'.
lang($labl).'
</summary>
<div style="margin-left:14px;">'.lang($body).'</div>
</details>';
if ($hint>'') $result=
'<abbr class= "hint" style="position: relative;">'.
$result.
'<data-hint style="left: auto;">'.lang($hint).'</data-hint>'.
'</abbr>';
if (!$rtrn) echo $result; else return $result;
}
# experimental: Change colors
function invertColor($colr,$bw) ## Untested !
{ // Get max contrastcolor black or white # Not tested
# run_Script("function getHexColor(colorStr) { // https://stackoverflow.com/questions/1573053/javascript-function-to-convert-color-names-to-hex-codes
# var a = document.createElement('div'); // Create html element
# a.style.color = colorStr; // Set the color
# var colors = window.getComputedStyle( document.body.appendChild(a) ).color.match(/\d+/g).map(function(a){ return parseInt(a,10); });
# // Get the rgb-code form the element which is just appended to the body (so it is rendered), filter numbers and convert each number to an integer.
# document.body.removeChild(a); // Remove the html element we just created
# return (colors.length >= 3) ? '#' + (((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substr(1)) : false;
# // Return the HEX code using zyklus code
# } // getHexColor('teal') // returns #008080, browser calculated
# ");
run_Script("function getHexColor(colorStr) { /* Browser calculated ColrName2Hex */
var a = document.createElement('div');
a.style.color = colorStr;
var colors = window.getComputedStyle( document.body.appendChild(a) ).color.match(/\d+/g).map(function(a){ return parseInt(a,10); });
document.body.removeChild(a);
return (colors.length >= 3) ? '#' + (((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substr(1)) : false;
}");
// $hex= run_Script("getHexColor($colr);");
// echo $hex;
// return run_Script("invertColor($hex, true)");
}
// echo 'XX:'.invertColor('LightPink',true).'YY';
# Add strings to a buffer
function spool($data,$echo=false) { global $spool;
if ($echo==true) echo $data;
$spool.= $data;
}
/*
Layout of htm_Table:
|-------------------------------------------------------------------------------------------------------|
| |
| TABLE-Caption |
| ($capt) |
|-------------------------------------------------------------------------------------------------------|
| | TABLE-HEAD | |
| |-----------------------------------------------------------------------------------| |
| | | |
| R | | R |
| O | | O |
| W | | W |
| P | | S |
| R | ROWBody = | U |
| E | TABLE-BODY | F |
| F | ($data) | F |
| I | | I |
| X | | X |
| ($pref) | | ($suff) |
| |-----------------------------------------------------------------------------------| |
| | | |
| | TABLE-FOOT | |
|-------------------------------------------------------------------------------------------------------|
| Table-Notes |
| ($note) |
|-------------------------------------------------------------------------------------------------------|
*/
# Output data in a advanced table
function htm_Table(# capt:[], pref:[], body:[],suff:[], note:'', data:[], filt:true, sort:true, crea:true, modi:true, vhgh:'400px', styl:'', from:__FILE__,list:[],expo:'',rtrn:false)
$capt= [ # ['0:Label', '1:Width', '2:Type', '3:OutFormat', '4:horJust', '5:Tip', '6:placeholder', '7:Content';], ...
],
$pref= [ # ['0:ColLabl', '1:ColWidth', '2:ContType', '3:OutFormat', '4:[horJust_etc]', '5:ColTip', '6:Html'], ...
], // if (($modi) or ($body[0][2]!='indx')) is 2% ColWidth can be used to => row-select-button
$body= [ # ['0:ColLabl', '1:ColWidth', '2:ContType', '3:OutFormat', '4:[horJust_etc]', '5:fldKey', '6:ColTip','7:placeholder','8:default','9:[selectList]'], ...
# [ labl, wdth, type, frmt, feld[], fkey, hint, plho, dflt, list ] # Future Fieldnames
], # Field 4: $FieldProporties - is composed of: [horJust, FieldBgColor, FieldStyle, TdColor, sort, filt, SelectON, Unit?
# just, bclr, styl, colr, sort, filt, slct, unit
$suff= [ # ['0:ColLabl', '1:ColWidth', '2:ContType', '3:OutFormat', '4:[horJust_etc]', '5:ColTip', '6:value! '], ...
],
# $capt= array: HTML to be shown above the table
# $pref= array: Leding columns left to the table data
# $body= array: Rows with table data
# $suff= array: Ending columns right to the table data
$note= '', # string: HTML-string - note to be shown below the table
&$data, # array: [{"name_0":value_0, "name_1":value_1, "name_2":value_2, "name_3":value_3, "name_4":value_4, "name_5":value_5, "name_6":value_6, "name_7":value_7, "name_8":value_8, "name_9":value_9},{...},{...}]
$filt= true, # bool: Ability to hide records that do not match filter // Does not work with hidd fields!
$sort= true, # bool: Ability to sort records by column content
$crea= true, # bool: Ability to create a records - string: Labeltext on createButton
$modi= true, # bool: Ability to select and change data in a row
$vhgh= '400px', # string: The height of the visible part of the table's data
$styl= '', # string: Style for the span that holds the table;
$from= __FILE__, # string: = __FILE__ / __FUNCTION__ (debugging: locate error)
$list= ['',''], # array: LookupLists for options // Test [DataKolonneNr, > grænseværdi] Undlad spec. FieldColor
$expo= '', # string: Export values in table data fields to CSV-file
$rtrn= false # bool: Function Return or echo result
// ,$dropFirst=false # remove first field (dbIndex id) from TblData-rows
)
# Field 4: $FieldProporties - is composed of: [0:horJust, 1:FieldBgColor, 2:FieldStyle, 3:TdColor, 4:SorterON, FilterON, SelectON, Flst]
# 0:horJust - Arguments to .td: style="text-align:
# 1:FieldBgColor - Arguments to .td: background-color:
# 2:FieldStyle - complete expression, e.g.: 'font-style:italic; '
# 3:TdColor - like 1: but used for "row marking"
# 4: 5: 6: ...
# Only impact on Body areas.
# ! FIXIT: Fixed/Sticky header only works on 1st table when there are several tables in the same window!
# ! Zebra streaks (Update Issue!) Failure, as well as filter problems when hidden columns are also present.
# ! FIXIT: Change value in INPUT dont only works i 1. table on page.
# ! FIXIT: Fieldnames are not used on reading records from $TblData, only the order are used !
{ global $gbl_blueColor, $gbl_LineBrun, $gbl_RollTabl, $gbl_HeaderFont, $gbl_IconStyle, $gbl_CardIx, $gbl_TblIx, $gbl_rowCount, $gbl_novice, $rowHtml, $ordrTotal, $spool;
$spool= '';
$creaInpBg= 'LightYellow';
$gbl_BodyBcgrd= 'yellow';
//$selectable= (($ModifyRec) and ($body[0][2]=='indx'));
$selectable= false;
//if (!$TblData) {msg_Info ('No data', 'The data table is empty!'); $TblData=[]; }; // exit;
$arrFldkey= [];
foreach ($body as $row) $arrFldkeys[]= $row[5];
$fldNames= $arrFldkeys ?? []; # FieldNames in array created on submit. Also used to sort data fields
if (DEBUG) dvl_pretty('Start-htm_Table: '.$from);
if (!$selectable) $RowSelect= '';
else { $RowSelect= '<span class="tooltip"><span style="font-size:115%;">⇨</span>'.
'<span class="LblTip_text" style="bottom: -12px; left: 65px">'.lang('@Selectable: ').str_nl(1).
lang('@This row can be selected by clicking Id/Number in the first field of the row.').'</span></span>';
}
if ($filt) { $filtInit= ' filter-true '; } else $filtInit= ' filter-false '; // filter-select
if ($sort) { $sortInit= ' sorter-inputs '; } else $sortInit= ' sorter-false '; // General for all columns
if (($filt===true) and ($note===''))
$note= '<small><small>'.lang('@Table-Filtering/Searching: Hold mouse over the colored row below the column headers.').'</small></small>'; # HTML-string
if (is_string($crea)) { $ButtLabl= $crea; $crea= true; } else $ButtLabl= '@Create new row';
$gbl_TblIx++; // 0..7 on a page
$tix= 'T'.$gbl_TblIx; // Tabel index for flere tabeller i samme vindue
if (!function_exists('RowKlick')) {
run_Script( 'function rowLookup(CalledFrom,valu,RowIx,ColIx) { window.alert("'.lang('@You pressed ').'" + valu + '.
'"\nNothing is happening yet...\nRelates to: "+ CalledFrom +" Row: "+ RowIx );'.
' }');