Skip to content

Commit 3449dcc

Browse files
handcodehandcode
authored
Merge pull request #21 from dmstr/dev/input-widget
FileManagerInputWidget - fix/enhance item search from fileflyModule API
2 parents 075a95f + 9bd8801 commit 3449dcc

File tree

1 file changed

+127
-26
lines changed

1 file changed

+127
-26
lines changed

‎src/widgets/FileManagerInputWidget.php

Lines changed: 127 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,61 @@ class FileManagerInputWidget extends InputWidget
3232
*/
3333
public $handlerUrl;
3434

35+
/**
36+
* Limit the number of results
37+
* if not set, the limit is the one from api::search which is normally way to high
38+
* to be bc, we do NOT set a default here.
39+
*
40+
* @var
41+
*/
42+
public $limit;
43+
44+
/**
45+
* min input that must be typed before we search result from api
46+
* if set to 0, the search will be triggered without typing.
47+
* so this should not be done without limit and/or basePath defined!
48+
*
49+
* handle with care!
50+
*
51+
* @var int
52+
*/
53+
public $minInputLength = 3;
54+
55+
/**
56+
* optional basePath that can be used to "limit" the search within a
57+
* subDir of the file-System
58+
*
59+
* @var string
60+
*/
61+
public $basePath;
62+
63+
/**
64+
* if true thumbnail img tag will be added IF item has thumbnail property
65+
* see: JS formatFiles()
66+
*
67+
* @var bool
68+
*/
69+
public $enableThumbnails = false;
70+
3571
/**
3672
* @var array
3773
*/
3874
public $select2Options = [];
3975

76+
/**
77+
* internal var for the random func name required to init searchData
78+
* for every input instance
79+
*
80+
* @var
81+
*/
82+
protected $jsGetSearchDataFuncName;
83+
4084
public function init()
4185
{
4286
parent::init();
4387

4488
if (empty($this->handlerUrl)) {
45-
throw new Exception('Missing handlerUrl confiugration');
89+
throw new Exception('Missing handlerUrl configuration');
4690
}
4791

4892
if ($this->hasModel()) {
@@ -60,9 +104,15 @@ public function init()
60104

61105
$this->select2Options['addon'] = $this->generateAddonButtons();
62106

107+
// do NOT use more_entropy here, as this will result in a string that can NOT be used as JS func name!
108+
$this->jsGetSearchDataFuncName = uniqid('searchData', false);
109+
110+
// should format func with enabled thumbnail be used?
111+
$formatFilesCallback = $this->enableThumbnails ? 'formatFilesWithThumb' : 'formatFiles';
112+
63113
$this->select2Options['pluginOptions'] = [
64114
'allowClear' => true,
65-
'minimumInputLength' => 3,
115+
'minimumInputLength' => $this->minInputLength,
66116
'language' => [
67117
'errorLoading' => \Yii::t('afm', 'Waiting for results ...'),
68118
],
@@ -71,11 +121,11 @@ public function init()
71121
'url' => $this->to('search', null),
72122
'dataType' => 'json',
73123
'delay' => 220,
74-
'data' => new JsExpression('searchData'),
124+
'data' => new JsExpression($this->jsGetSearchDataFuncName),
75125
'processResults' => new JsExpression('resultJs'),
76126
],
77127
'escapeMarkup' => new JsExpression('escapeMarkup'),
78-
'templateResult' => new JsExpression('formatFiles'),
128+
'templateResult' => new JsExpression($formatFilesCallback),
79129
'templateSelection' => new JsExpression('formatFileSelection'),
80130
'width' => '100%'
81131
];
@@ -127,7 +177,7 @@ protected function registerClientScript()
127177
url: "{$searchUrl}",
128178
dataType:"json",
129179
delay:220,
130-
data: {q: selectedPath},
180+
data: {$this->jsGetSearchDataFuncName} ({term: selectedPath}),
131181
success: function(result){
132182
if (result.length == 1) {
133183
onSelect(result[0], '{$inputId}');
@@ -138,14 +188,56 @@ protected function registerClientScript()
138188
});
139189
JS;
140190

141-
$this->view->registerJs($initJs, View::POS_READY);
191+
$this->view->registerJs($initJs, View::POS_HEAD);
142192

143193
// format result markup and register addon button scripts and events
194+
// we need a separate searchData func for EVERY instance to be able to inject search params
195+
// (basePath, limit) on instance basis
144196
$inputJs = <<<JS
145-
var searchData = function(params) {
146-
return {q:params.term};
197+
198+
var {$this->jsGetSearchDataFuncName} = function (params) {
199+
var qData = {
200+
q:''
201+
};
202+
var basePath = '{$this->basePath}';
203+
var limit = '{$this->limit}';
204+
if (basePath != '') {
205+
qData.basePath = basePath;
206+
}
207+
if (limit != '') {
208+
qData.limit = limit;
209+
}
210+
if (params.term) {
211+
qData.q = params.term;
212+
}
213+
return qData;
214+
};
215+
216+
217+
var hasImageExtension = function(path) {
218+
if (typeof path !== 'string') {
219+
return false
220+
}
221+
222+
var imageExtensions = ['jpg', 'jpeg', 'gif', 'svg', 'png', 'bmp', 'tif']
223+
224+
if (window.FILEFLYCONFIG && window.FILEFLYCONFIG['imageExtensions']) {
225+
imageExtensions = window.FILEFLYCONFIG['imageExtensions']
226+
}
227+
228+
imageExtensions = imageExtensions.map(extension => {
229+
return extension.toLowerCase()
230+
})
231+
232+
var extension = path.split('.').pop().toLowerCase()
233+
234+
return (imageExtensions.indexOf(extension) !== -1)
235+
};
236+
// just a wrapper to call formatFiles() with useThumb = true property
237+
var formatFilesWithThumb = function (file) {
238+
return formatFiles(file, true);
147239
};
148-
var formatFiles = function (file) {
240+
var formatFiles = function (file, useThumb = false) {
149241
150242
// show loading / placeholder
151243
if (file.loading) {
@@ -155,24 +247,33 @@ protected function registerClientScript()
155247
// mime types
156248
var preview = '';
157249
var text = file.path;
158-
if (file.mime.indexOf("image") > -1) {
159-
preview = '<img src="{$previewUrl}' + file.id + '" style="width:38px" />';
160-
} else if (file.mime.indexOf("directory") > -1) {
161-
preview = '<span style="width:40px"><i class="fa fa-folder-open fa-3x"></i></span>';
162-
} else if (file.mime.indexOf("pdf") > -1) {
163-
preview = '<span style="width:40px"><i class="fa fa-file-pdf-o fa-3x"></i></span>';
164-
} else if (file.mime.indexOf("zip") > -1) {
165-
preview = '<span style="width:40px"><i class="fa fa-file-zip-o fa-3x"></i></span>';
166-
} else if (file.mime.indexOf("doc") > -1) {
167-
preview = '<span style="width:40px"><i class="fa fa-file-word-o fa-3x"></i></span>';
168-
} else if (file.mime.indexOf("xls") > -1) {
169-
preview = '<span style="width:40px"><i class="fa fa-file-excel-o fa-3x"></i></span>';
170-
} else if (file.mime.indexOf("ppt") > -1) {
171-
preview = '<span style="width:40px"><i class="fa fa-file-powerpoint-o fa-3x"></i></span>';
172-
} else {
173-
preview = '<span style="width:40px"><i class="fa fa-file-o fa-3x"></i></span>';
250+
preview = '<span style="width:40px"><i class="fa fa-file-o fa-3x"></i></span>';
251+
252+
if (file.mime != '') {
253+
if (file.mime.indexOf("image") > -1) {
254+
preview = '<span style="width:40px"><i class="fa fa-picture-o fa-3x"></i></span>';
255+
} else if (file.mime.indexOf("directory") > -1) {
256+
preview = '<span style="width:40px"><i class="fa fa-folder-open fa-3x"></i></span>';
257+
} else if (file.mime.indexOf("pdf") > -1) {
258+
preview = '<span style="width:40px"><i class="fa fa-file-pdf-o fa-3x"></i></span>';
259+
} else if (file.mime.indexOf("zip") > -1) {
260+
preview = '<span style="width:40px"><i class="fa fa-file-zip-o fa-3x"></i></span>';
261+
} else if (file.mime.indexOf("doc") > -1) {
262+
preview = '<span style="width:40px"><i class="fa fa-file-word-o fa-3x"></i></span>';
263+
} else if (file.mime.indexOf("xls") > -1) {
264+
preview = '<span style="width:40px"><i class="fa fa-file-excel-o fa-3x"></i></span>';
265+
} else if (file.mime.indexOf("ppt") > -1) {
266+
preview = '<span style="width:40px"><i class="fa fa-file-powerpoint-o fa-3x"></i></span>';
267+
}
268+
} else if (hasImageExtension(file.path)) {
269+
preview = '<span style="width:40px"><i class="fa fa-picture-o fa-3x"></i></span>';
270+
// don't do it, this will load way too much data....
271+
// preview = '<img src="{$previewUrl}' + file.id + '" style="width:38px" />';
174272
}
175-
273+
if (useThumb == true && file.thumbnail && file.thumbnail != '') {
274+
preview = '<img src="' + file.thumbnail + '" style="width:38px" />';
275+
}
276+
176277
// one result line markup
177278
var markup =
178279
'<div class="row" style="min-height:38px">' +

0 commit comments

Comments
 (0)