Skip to content

Commit a217da0

Browse files
streamtwstreamtw
committed
refactor use file function
1 parent d6364c9 commit a217da0

File tree

3 files changed

+112
-79
lines changed

3 files changed

+112
-79
lines changed

‎docs/integration.md‎

Lines changed: 35 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,8 @@ Check `vendor/unisharp/laravel-filemanager/src/views/demo.blade.php`, which alre
8383
```html
8484
<!-- dependencies (Summernote depends on Bootstrap & jQuery) -->
8585
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
86-
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
87-
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
86+
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
87+
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
8888

8989
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.css" rel="stylesheet">
9090
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.js"></script>
@@ -94,44 +94,45 @@ Check `vendor/unisharp/laravel-filemanager/src/views/demo.blade.php`, which alre
9494

9595
<!-- summernote config -->
9696
<script>
97-
$(document).ready(function(){
97+
$(document).ready(function(){
9898
9999
// Define function to open filemanager window
100100
var lfm = function(options, cb) {
101-
var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';
102-
window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
103-
window.SetUrl = cb;
101+
var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';
102+
window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
103+
window.SetUrl = cb;
104104
};
105-
105+
106106
// Define LFM summernote button
107107
var LFMButton = function(context) {
108-
var ui = $.summernote.ui;
109-
var button = ui.button({
110-
contents: '<i class="note-icon-picture"></i> ',
111-
tooltip: 'Insert image with filemanager',
112-
click: function() {
113-
114-
lfm({type: 'image', prefix: '/file-manager'}, function(url, path) {
115-
context.invoke('insertImage', url);
116-
});
117-
118-
}
119-
});
120-
return button.render();
108+
var ui = $.summernote.ui;
109+
var button = ui.button({
110+
contents: '<i class="note-icon-picture"></i> ',
111+
tooltip: 'Insert image with filemanager',
112+
click: function() {
113+
114+
lfm({type: 'image', prefix: '/laravel-filemanager'}, function(lfmItems, path) {
115+
lfmItems.forEach(function (lfmItem) {
116+
context.invoke('insertImage', lfmItem.url);
117+
});
118+
});
119+
120+
}
121+
});
122+
return button.render();
121123
};
122-
124+
123125
// Initialize summernote with LFM button in the popover button group
124126
// Please note that you can add this button to any other button group you'd like
125127
$('#summernote-editor').summernote({
126-
toolbar: [
127-
['popovers', ['lfm']],
128-
],
129-
buttons: {
130-
lfm: LFMButton
131-
}
128+
toolbar: [
129+
['popovers', ['lfm']],
130+
],
131+
buttons: {
132+
lfm: LFMButton
133+
}
132134
})
133-
134-
});
135+
});
135136
</script>
136137
```
137138

@@ -151,7 +152,7 @@ If you are going to use filemanager independently, meaning set the value of an i
151152
<input id="thumbnail" class="form-control" type="text" name="filepath">
152153
</div>
153154
<img id="holder" style="margin-top:15px;max-height:100px;">
154-
```
155+
```
155156
1. Import lfm.js(run `php artisan vendor:publish` if you need).
156157

157158
```html
@@ -174,18 +175,18 @@ If you are going to use filemanager independently, meaning set the value of an i
174175
var domain = "{{ url() }}";
175176
$('#lfm').filemanager('image', {prefix: domain});
176177
```
177-
178+
178179
## JavaScript integration
179180
In case you are developing javascript application and you want dynamically to trigger filemanager popup, you can create function like this. It doesn't rely on jQuery.
180181

181182

182183
```javascript
183184
var lfm = function(options, cb) {
184185

185-
var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';
186+
var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';
186187

187-
window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
188-
window.SetUrl = cb;
188+
window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
189+
window.SetUrl = cb;
189190
}
190191
```
191192

‎public/js/script.js‎

Lines changed: 55 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -486,6 +486,8 @@ function getUrlParam(paramName) {
486486

487487
function use(items) {
488488
function useTinymce3(url) {
489+
if (!usingTinymce3()) { return; }
490+
489491
var win = tinyMCEPopup.getWindowArg("window");
490492
win.document.getElementById(tinyMCEPopup.getWindowArg("input")).value = url;
491493
if (typeof(win.ImageDialog) != "undefined") {
@@ -502,8 +504,10 @@ function use(items) {
502504
tinyMCEPopup.close();
503505
}
504506

505-
function useTinymce4AndColorbox(url, field_name) {
506-
parent.document.getElementById(field_name).value = url;
507+
function useTinymce4AndColorbox(url) {
508+
if (!usingTinymce4AndColorbox()) { return; }
509+
510+
parent.document.getElementById(getUrlParam('field_name')).value = url;
507511

508512
if(typeof parent.tinyMCE !== "undefined") {
509513
parent.tinyMCE.activeEditor.windowManager.close();
@@ -514,6 +518,8 @@ function use(items) {
514518
}
515519

516520
function useCkeditor3(url) {
521+
if (!usingCkeditor3()) { return; }
522+
517523
if (window.opener) {
518524
// Popup
519525
window.opener.CKEDITOR.tools.callFunction(getUrlParam('CKEditorFuncNum'), url);
@@ -525,48 +531,72 @@ function use(items) {
525531
}
526532

527533
function useFckeditor2(url) {
534+
if (!usingFckeditor2()) { return; }
535+
528536
var p = url;
529537
var w = data['Properties']['Width'];
530538
var h = data['Properties']['Height'];
531539
window.opener.SetUrl(p,w,h);
532540
}
533541

534542
var url = items[0].url;
535-
var field_name = getUrlParam('field_name');
536543
var callback = getUrlParam('callback');
537-
var is_ckeditor = getUrlParam('CKEditor');
538-
var is_fcke = typeof data != 'undefined' && data['Properties']['Width'] != '';
539-
540-
if (window.opener || window.tinyMCEPopup || field_name || callback || getUrlParam('CKEditorCleanUpFuncNum') || is_ckeditor) {
541-
if (window.tinyMCEPopup) { // use TinyMCE > 3.0 integration method
542-
useTinymce3(url);
543-
} else if (field_name) { // tinymce 4 and colorbox
544-
useTinymce4AndColorbox(url, field_name);
545-
} else if (callback && (window[callback] || parent[callback])) {
546-
if (window[callback]) {
547-
window[callback](getSelectedItems());
548-
} else if (parent[callback]) {
549-
parent[callback](getSelecteditems());
550-
}
551-
} else if(is_ckeditor) { // use CKEditor 3.0 + integration method
552-
useCkeditor3(url);
553-
} else if (is_fcke) { // use FCKEditor 2.0 integration method
554-
useFckeditor2(url);
555-
} else { // standalone button or other situations
556-
window.opener.SetUrl(getSelectedItems());
557-
}
544+
var useFileSucceeded = true;
545+
546+
if (usingWysiwygEditor()) {
547+
useTinymce3(url);
558548

549+
useTinymce4AndColorbox(url);
550+
551+
useCkeditor3(url);
552+
553+
useFckeditor2(url);
554+
} else if (callback && window[callback]) {
555+
window[callback](getSelectedItems());
556+
} else if (callback && parent[callback]) {
557+
parent[callback](getSelecteditems());
558+
} else if (window.opener) { // standalone button or other situations
559+
window.opener.SetUrl(getSelectedItems());
560+
} else {
561+
useFileSucceeded = false;
562+
}
563+
564+
if (useFileSucceeded) {
559565
if (window.opener) {
560566
window.close();
561567
}
562568
} else {
569+
console.log('window.opener not found');
563570
// No editor found, open/download file using browser's default method
564571
window.open(url);
565-
// notify('window.opener not found');
566572
}
567573
}
568574
//end useFile
569575

576+
// ==================================
577+
// == WYSIWYG Editors Check ==
578+
// ==================================
579+
580+
function usingTinymce3() {
581+
return !!window.tinyMCEPopup;
582+
}
583+
584+
function usingTinymce4AndColorbox() {
585+
return !!getUrlParam('field_name');
586+
}
587+
588+
function usingCkeditor3() {
589+
return !!getUrlParam('CKEditor') || !!getUrlParam('CKEditorCleanUpFuncNum');
590+
}
591+
592+
function usingFckeditor2() {
593+
return window.opener && typeof data != 'undefined' && data['Properties']['Width'] != '';
594+
}
595+
596+
function usingWysiwygEditor() {
597+
return usingTinymce3() || usingTinymce4AndColorbox() || usingCkeditor3() || usingFckeditor2();
598+
}
599+
570600
// ==================================
571601
// == Others ==
572602
// ==================================

‎src/views/demo.blade.php‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -134,37 +134,39 @@
134134
135135
// Define function to open filemanager window
136136
var lfm = function(options, cb) {
137-
var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';
138-
window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
139-
window.SetUrl = cb;
137+
var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';
138+
window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
139+
window.SetUrl = cb;
140140
};
141141
142142
// Define LFM summernote button
143143
var LFMButton = function(context) {
144-
var ui = $.summernote.ui;
145-
var button = ui.button({
146-
contents: '<i class="note-icon-picture"></i> ',
147-
tooltip: 'Insert image with filemanager',
148-
click: function() {
144+
var ui = $.summernote.ui;
145+
var button = ui.button({
146+
contents: '<i class="note-icon-picture"></i> ',
147+
tooltip: 'Insert image with filemanager',
148+
click: function() {
149149
150-
lfm({type: 'image', prefix: '/laravel-filemanager'}, function(url, path) {
151-
context.invoke('insertImage', url);
152-
});
150+
lfm({type: 'image', prefix: '/laravel-filemanager'}, function(lfmItems, path) {
151+
lfmItems.forEach(function (lfmItem) {
152+
context.invoke('insertImage', lfmItem.url);
153+
});
154+
});
153155
154-
}
155-
});
156-
return button.render();
156+
}
157+
});
158+
return button.render();
157159
};
158160
159161
// Initialize summernote with LFM button in the popover button group
160162
// Please note that you can add this button to any other button group you'd like
161163
$('#summernote-editor').summernote({
162-
toolbar: [
163-
['popovers', ['lfm']],
164-
],
165-
buttons: {
166-
lfm: LFMButton
167-
}
164+
toolbar: [
165+
['popovers', ['lfm']],
166+
],
167+
buttons: {
168+
lfm: LFMButton
169+
}
168170
})
169171
});
170172
</script>

0 commit comments

Comments
 (0)