1
|
|
|
<?php |
2
|
|
|
/** |
3
|
|
|
* User: delboy1978uk |
4
|
|
|
* Date: 04/12/2016 |
5
|
|
|
* Time: 22:33 |
6
|
|
|
*/ |
7
|
|
|
|
8
|
|
|
namespace Del\Form\Renderer\Field; |
9
|
|
|
|
10
|
|
|
use Del\Form\Field\FieldInterface; |
11
|
|
|
use Del\Form\Field\FileUpload; |
12
|
|
|
use DOMElement; |
13
|
|
|
use DOMNode; |
14
|
|
|
use DOMText; |
15
|
|
|
use InvalidArgumentException; |
16
|
|
|
|
17
|
|
|
class FileUploadRender extends AbstractFieldRender implements FieldRendererInterface |
18
|
|
|
{ |
19
|
|
|
|
20
|
|
|
/** |
21
|
|
|
* @param FieldInterface $field |
22
|
|
|
* @param DOMElement $element |
23
|
|
|
* @return DOMNode |
24
|
|
|
*/ |
25
|
2 |
|
public function renderBlock(FieldInterface $field, DOMElement $element) |
26
|
|
|
{ |
27
|
|
|
// Make sure the FieldInterface is actually a Radio |
28
|
2 |
|
if (!$field instanceof FileUpload) { |
29
|
1 |
|
throw new InvalidArgumentException('Must be a Del\Form\Field\FileUpload'); |
30
|
|
|
} |
31
|
|
|
|
32
|
1 |
|
$div = $this->getDom()->createElement('div'); |
33
|
1 |
|
$script = $this->getDom()->createElement('script'); |
34
|
1 |
|
$style = $this->getDom()->createElement('style'); |
35
|
1 |
|
$style->setAttribute('type', 'text/css'); |
36
|
1 |
|
$style->appendChild(new DOMText($this->getStyle())); |
37
|
1 |
|
$input = $this->getDom()->createElement('input'); |
38
|
1 |
|
$span = $this->getDom()->createElement('span'); |
39
|
1 |
|
$innerSpan = $this->getDom()->createElement('span'); |
40
|
1 |
|
$text = new DOMText($field->getLabel()); |
41
|
|
|
|
42
|
1 |
|
$innerSpan->setAttribute('class', 'btn btn-primary btn-file'); |
43
|
1 |
|
$innerSpan->appendChild($text); |
44
|
1 |
|
$innerSpan->appendChild($element); |
45
|
|
|
|
46
|
1 |
|
$span->setAttribute('class', 'input-group-btn'); |
47
|
1 |
|
$span->appendChild($innerSpan); |
48
|
|
|
|
49
|
1 |
|
$input->setAttribute('type', 'text'); |
50
|
1 |
|
$input->setAttribute('class', 'form-control'); |
51
|
1 |
|
$input->setAttribute('readonly', 'readonly'); |
52
|
|
|
|
53
|
1 |
|
$script->setAttribute('type', 'text/javascript'); |
54
|
1 |
|
$code = new DOMText($this->getJavascript()); |
55
|
1 |
|
$script->appendChild($code); |
56
|
|
|
|
57
|
1 |
|
$div->setAttribute('class', 'input-group'); |
58
|
1 |
|
$div->appendChild($span); |
59
|
1 |
|
$div->appendChild($input); |
60
|
1 |
|
$div->appendChild($style); |
61
|
1 |
|
$div->appendChild($script); |
62
|
|
|
|
63
|
1 |
|
return $div; |
64
|
|
|
} |
65
|
|
|
|
66
|
|
|
/** |
67
|
|
|
* @return string |
68
|
|
|
*/ |
69
|
1 |
|
private function getJavascript() |
70
|
|
|
{ |
71
|
|
|
return <<<END |
72
|
|
|
$(document).on('change', '.btn-file :file', function() { |
73
|
|
|
var input = $(this), |
74
|
|
|
numFiles = input.get(0).files ? input.get(0).files.length : 1, |
75
|
|
|
label = input.val().replace(/\\\\/g, '/').replace(/.*\//, ''); |
76
|
|
|
input.trigger('fileselect', [numFiles, label]); |
77
|
|
|
}); |
78
|
|
|
|
79
|
|
|
$(document).ready( function() { |
80
|
|
|
$('.btn-file :file').on('fileselect', function(event, numFiles, label) { |
81
|
|
|
|
82
|
|
|
var input = $(this).parents('.input-group').find(':text'), |
83
|
|
|
log = numFiles > 1 ? numFiles + ' files selected' : label; |
84
|
|
|
|
85
|
|
|
if( input.length ) { |
86
|
|
|
input.val(log); |
87
|
|
|
} else { |
88
|
|
|
if( log ) alert(log); |
89
|
|
|
} |
90
|
|
|
|
91
|
|
|
}); |
92
|
1 |
|
}); |
93
|
|
|
END; |
94
|
|
|
|
95
|
|
|
} |
96
|
|
|
|
97
|
1 |
|
private function getStyle() |
98
|
|
|
{ |
99
|
|
|
return <<<END |
100
|
|
|
.btn-file { |
101
|
|
|
position: relative; |
102
|
|
|
overflow: hidden; |
103
|
|
|
} |
104
|
|
|
.btn-file input[type=file] { |
105
|
|
|
position: absolute; |
106
|
|
|
top: 0; |
107
|
|
|
right: 0; |
108
|
|
|
min-width: 100%; |
109
|
|
|
min-height: 100%; |
110
|
|
|
font-size: 100px; |
111
|
|
|
text-align: right; |
112
|
|
|
filter: alpha(opacity=0); |
113
|
|
|
opacity: 0; |
114
|
|
|
outline: none; |
115
|
|
|
background: white; |
116
|
|
|
cursor: inherit; |
117
|
|
|
display: block; |
118
|
|
|
} |
119
|
|
|
input[readonly] { |
120
|
|
|
background-color: white !important; |
121
|
|
|
cursor: text !important; |
122
|
1 |
|
} |
123
|
|
|
END; |
124
|
|
|
|
125
|
|
|
} |
126
|
|
|
} |