|
1
|
|
|
<?php declare(strict_types=1); |
|
2
|
|
|
|
|
3
|
|
|
namespace Formularium\Frontend\HTML\Renderable; |
|
4
|
|
|
|
|
5
|
|
|
use Formularium\Datatype; |
|
6
|
|
|
use Formularium\Datatype\Datatype_file; |
|
7
|
|
|
use Formularium\Field; |
|
8
|
|
|
use Formularium\Frontend\HTML\Framework; |
|
9
|
|
|
use Formularium\Frontend\HTML\Renderable; |
|
10
|
|
|
use Formularium\HTMLElement; |
|
11
|
|
|
|
|
12
|
|
|
class Renderable_file extends Renderable |
|
13
|
|
|
{ |
|
14
|
|
|
/** |
|
15
|
|
|
* Key for extension. Value can be array or string. |
|
16
|
|
|
*/ |
|
17
|
|
|
const ACCEPT = 'accept'; |
|
18
|
|
|
const ACCEPT_AUDIO = 'audio/*'; |
|
19
|
|
|
const ACCEPT_IMAGE = 'image/*'; |
|
20
|
|
|
const ACCEPT_VIDEO = 'video/*'; |
|
21
|
|
|
|
|
22
|
|
|
use \Formularium\Frontend\HTML\RenderableViewableTrait; |
|
23
|
|
|
|
|
24
|
|
|
public function editable($value, Field $field, HTMLElement $previous): HTMLElement |
|
25
|
|
|
{ |
|
26
|
|
|
$extensions = $field->getExtensions(); |
|
27
|
|
|
$validators = $field->getValidators(); |
|
28
|
|
|
|
|
29
|
|
|
/* |
|
30
|
|
|
<fieldset class="loh_fieldset loh_filedata_picker" |
|
31
|
|
|
data-acceptedExtensions="<?php echo htmlspecialchars(@$fields['acceptedExtensions']);?>" |
|
32
|
|
|
data-basetype="filedata" data-attribute="filedata" |
|
33
|
|
|
<?php echo $multipleField; ?> |
|
34
|
|
|
> |
|
35
|
|
|
<input type="hidden" |
|
36
|
|
|
id="loh:filedata_attribute[<?php echo $id; ?>][value]" |
|
37
|
|
|
name="loh:filedata_attribute[<?php echo $id; ?>][value]" |
|
38
|
|
|
value="<?php echo $fields->getItemMeta('filedata', DataTypeParameter::FILEDATA_ATTRIBUTE);?>" |
|
39
|
|
|
/> |
|
40
|
|
|
<?php |
|
41
|
|
|
if ($fields->getItemMeta('filedata', DataTypeParameter::SHOW_LEGEND)) { ?> |
|
42
|
|
|
<legend class="loh_legend |
|
43
|
|
|
<?php |
|
44
|
|
|
if ($fields->getItemMeta('filedata', DataTypeParameter::COLLAPSED) === true) { |
|
45
|
|
|
echo 'collapsed'; |
|
46
|
|
|
} |
|
47
|
|
|
?>"> |
|
48
|
|
|
<?php echo _('File');?></legend> |
|
49
|
|
|
<?php |
|
50
|
|
|
} |
|
51
|
|
|
|
|
52
|
|
|
// let's show what we're editing |
|
53
|
|
|
$this->getSmallHTML(new HtmlThingData(PageData::THUMBNAIL_SCALED)); |
|
54
|
|
|
|
|
55
|
|
|
?> |
|
56
|
|
|
<section class="loh_section loh_filedata_picker_section" > |
|
57
|
|
|
<?php |
|
58
|
|
|
if ($fields->getItemMeta('filedata', DataTypeParameter::COMMENT)) { |
|
59
|
|
|
echo '<span class="loh_explanation">' . |
|
60
|
|
|
htmlspecialchars($fields->getItemMeta('filedata', DataTypeParameter::COMMENT)) . |
|
61
|
|
|
'</span> '; |
|
62
|
|
|
} |
|
63
|
|
|
?> |
|
64
|
|
|
<div class="loh_form_item loh_form_item_header"> |
|
65
|
|
|
<label class="loh_formlabel"><span class="loh_fieldlabel"><?php echo $label;?></span></label> |
|
66
|
|
|
|
|
67
|
|
|
<?php |
|
68
|
|
|
$dataRulesRequiredFiledata = |
|
69
|
|
|
($fields->getItemMeta('filedata', DataTypeParameter::REQUIRED) === true) |
|
70
|
|
|
? 'data-rules-required-filedata="true"' |
|
71
|
|
|
: ''; |
|
72
|
|
|
?> |
|
73
|
|
|
<ul class="loh_data_set loh_hide_picked"> |
|
74
|
|
|
<li class="from-computer"> |
|
75
|
|
|
<input id="from-computer-input-<?php echo $id;?>" type="radio" value="<?php echo FILEDATA_ORIGIN_UPLOAD;?>" |
|
76
|
|
|
class="loh_filedata_origin_button loh_filedata_origin_upload" |
|
77
|
|
|
name="loh:filedata_origin[<?php echo $id;?>][value]" |
|
78
|
|
|
<?php echo $dataRulesRequiredFiledata ?> checked /> |
|
79
|
|
|
<label for="from-computer-input-<?php echo $id;?>"><?php echo _('From your device');?></label> |
|
80
|
|
|
</li> |
|
81
|
|
|
<li class="from-site"> |
|
82
|
|
|
<input id="from-site-input-<?php echo $id;?>" type="radio" value="<?php echo FILEDATA_ORIGIN_URL;?>" |
|
83
|
|
|
class="loh_filedata_origin_button loh_filedata_origin_url" |
|
84
|
|
|
name="loh:filedata_origin[<?php echo $id;?>][value]" |
|
85
|
|
|
<?php echo $dataRulesRequiredFiledata ?> /> |
|
86
|
|
|
<label for="from-site-input-<?php echo $id;?>"><?php echo _('From a site');?></label> |
|
87
|
|
|
</li> |
|
88
|
|
|
<?php |
|
89
|
|
|
if ($fields->getItemMeta('filedata', static::SHOW_CAMERA) ?? true) { |
|
90
|
|
|
?> |
|
91
|
|
|
<li class="from-camera hasCamera" style="display: none;"> |
|
92
|
|
|
<input id="from-camera-input-<?php echo $id;?>" type="radio" value="<?php echo FILEDATA_ORIGIN_BASE64;?>" |
|
93
|
|
|
class="loh_filedata_origin_button loh_filedata_origin_base64" |
|
94
|
|
|
name="loh:filedata_origin[<?php echo $id;?>][value]" |
|
95
|
|
|
<?php echo $dataRulesRequiredFiledata ?> /> |
|
96
|
|
|
<label for="from-camera-input-<?php echo $id;?>"><?php echo _('From camera');?></label> |
|
97
|
|
|
</li> |
|
98
|
|
|
<?php |
|
99
|
|
|
} |
|
100
|
|
|
?> |
|
101
|
|
|
</ul> |
|
102
|
|
|
</div>*/ |
|
103
|
|
|
|
|
104
|
|
|
$input = HTMLElement::factory( |
|
105
|
|
|
'input', |
|
106
|
|
|
[ |
|
107
|
|
|
'id' => $field->getName() . Framework::counter(), |
|
108
|
|
|
'class' => 'formularium-file-upload-button', |
|
109
|
|
|
'type' => 'file', |
|
110
|
|
|
'data-attribute' => $field->getName(), |
|
111
|
|
|
'data-datatype' => $field->getDatatype()->getName(), |
|
112
|
|
|
'data-basetype' => $field->getDatatype()->getBasetype(), |
|
113
|
|
|
'title' => $field->getExtension(static::LABEL, ''), |
|
114
|
|
|
'data-max-size' => $validators[Datatype_file::MAX_SIZE] ?? '', |
|
115
|
|
|
'capture' => 'environment' |
|
116
|
|
|
] |
|
117
|
|
|
); |
|
118
|
|
|
|
|
119
|
|
|
$accept = ''; |
|
120
|
|
|
if ($extensions[self::ACCEPT] ?? false) { |
|
121
|
|
|
if (is_array($extensions[self::ACCEPT])) { |
|
122
|
|
|
$accept = join(',', $extensions[self::ACCEPT]); |
|
123
|
|
|
} else { |
|
124
|
|
|
$accept = $extensions[self::ACCEPT]; |
|
125
|
|
|
} |
|
126
|
|
|
$input->setAttribute('accept', htmlspecialchars($accept)); |
|
127
|
|
|
} |
|
128
|
|
|
if ($validators[Datatype::REQUIRED] ?? false) { |
|
129
|
|
|
$input->setAttribute('required', 'required'); |
|
130
|
|
|
} |
|
131
|
|
|
if ($validators[Datatype_file::MAX_SIZE] ?? false) { |
|
132
|
|
|
$input->setAttribute('data-max-size', $validators[Datatype_file::MAX_SIZE]); |
|
133
|
|
|
} |
|
134
|
|
|
foreach ([static::DISABLED, static::READONLY] as $v) { |
|
135
|
|
|
if ($field->getExtension($v, false)) { |
|
136
|
|
|
$input->setAttribute($v, $v); |
|
137
|
|
|
} |
|
138
|
|
|
} |
|
139
|
|
|
|
|
140
|
|
|
$content = HTMLElement::factory( |
|
141
|
|
|
'div', |
|
142
|
|
|
['class' => 'formularium-file-origin-upload'], |
|
143
|
|
|
[ |
|
144
|
|
|
$input, |
|
145
|
|
|
HTMLElement::factory( |
|
146
|
|
|
'canvas', |
|
147
|
|
|
[ |
|
148
|
|
|
'class' => 'formularium-file-preview', |
|
149
|
|
|
'style' => "display: none; clear: both;" |
|
150
|
|
|
] |
|
151
|
|
|
), |
|
152
|
|
|
HTMLElement::factory( |
|
153
|
|
|
'input', |
|
154
|
|
|
['class' => 'formularium-button formularium-file-reset', 'style' => "display: none;", 'value' => 'Clear file'] |
|
155
|
|
|
) |
|
156
|
|
|
] |
|
157
|
|
|
); |
|
158
|
|
|
if (array_key_exists(Renderable::LABEL, $extensions)) { |
|
159
|
|
|
$content->prependContent(new HTMLElement('label', ['for' => $input->getAttribute('id'), 'class' => 'formularium-label'], $extensions[Renderable::LABEL])); |
|
160
|
|
|
} |
|
161
|
|
|
if (array_key_exists(Renderable::COMMENT, $extensions)) { |
|
162
|
|
|
$content->appendContent(new HTMLElement('div', ['class' => 'formularium-comment'], $extensions[Renderable::COMMENT])); |
|
163
|
|
|
} |
|
164
|
|
|
|
|
165
|
|
|
/* |
|
166
|
|
|
<div class="loh_form_item loh_origin_upload"> |
|
167
|
|
|
<span class="loh_fieldlabel"><?php echo _('File');?></span> |
|
168
|
|
|
<div class="loh_hide_picked"> |
|
169
|
|
|
<span class="loh_explanation"> |
|
170
|
|
|
<?php echo _('Click the button to pick. You can also drag and drop a file into the grey area.');?> |
|
171
|
|
|
</span> |
|
172
|
|
|
<label class="loh_upload_file_label" for="loh:filedata_medium[<?php echo $id; ?>][value]"> |
|
173
|
|
|
<?php echo _('Click to pick a file or drag one here.');?> |
|
174
|
|
|
<input type="file" class="loh_upload_file_button" |
|
175
|
|
|
id="loh:filedata_medium[<?php echo $id; ?>][value]" |
|
176
|
|
|
name="loh:filedata_medium[<?php echo $id; ?>][value]" |
|
177
|
|
|
size="30" <?php echo ($acceptTag ? 'accept="' . htmlspecialchars($acceptTag) . '"' : '');?> |
|
178
|
|
|
data-maxfilesize="<?php echo CONF('MAX_FILE_SIZE');?>" |
|
179
|
|
|
capture="camera"/> |
|
180
|
|
|
</label> |
|
181
|
|
|
</div> |
|
182
|
|
|
<canvas class="loh_upload_preview" width="320" height="240" |
|
183
|
|
|
style="display: none; clear: both;"></canvas> |
|
184
|
|
|
<div class="loh_upload_filename clearfix"></div> |
|
185
|
|
|
<input type="button" class="loh_filedata_medium_reset" style="display: none;" value="<?php echo _('Clear file');?>"/> |
|
186
|
|
|
</div> |
|
187
|
|
|
*/ |
|
188
|
|
|
|
|
189
|
|
|
$container = new HTMLElement(Framework::getEditableContainerTag(), [], $content); |
|
190
|
|
|
|
|
191
|
|
|
return $container; |
|
192
|
|
|
} |
|
193
|
|
|
} |
|
194
|
|
|
|