Last active
May 10, 2023 08:25
-
-
Save arturmamedov/b448cdb01e5c6aec2aec1fea33bf953b to your computer and use it in GitHub Desktop.
elFinder standalonepopup in a new browser window (not modal, colorbox etc.)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- main.html (html input and js for open new window with elFinder for select file) --> | |
| <input type="text" class="form-control" value="" id="idOfInput" onfocus="return openElFinder(event, 'idOfInput');"/> | |
| <script> | |
| $( document ).ready(function() { | |
| window.input_id = ''; | |
| window.openElFinder = function (event, input_id) { | |
| event.preventDefault(); | |
| window.single = true; | |
| window.old = false; | |
| window.input_id = input_id; | |
| window.open('/elfinder/popup?input_id='+input_id, '_blank', 'menubar=no,status=no,toolbar=no,scrollbars=yes,height=500,width=1000'); | |
| return false; | |
| }; | |
| // function to update the file selected by elfinder | |
| window.processSelectedFile = function (filePath, requestingField) { | |
| $('#' + requestingField).val(filePath).trigger('change'); | |
| } | |
| }); | |
| </script> | |
| <!-- standalonepopup.html (on url /elfinder/popup?input_id=...) --> | |
| <!DOCTYPE html> | |
| <html lang="it"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>elFinder</title> | |
| <!-- jQuery and jQuery UI (REQUIRED) --> | |
| <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css"> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> | |
| <!-- elFinder CSS (REQUIRED) --> | |
| <link rel="stylesheet" type="text/css" href="/elfinder/css/elfinder.min.css"> | |
| <link rel="stylesheet" type="text/css" href="/elfinder/css/theme.css"> | |
| <!-- elFinder JS (REQUIRED) --> | |
| <script src="/elfinder/js/elfinder.min.js"></script> | |
| <!-- elFinder translation (OPTIONAL) --> | |
| <script src="/elfinder/js/i18n/elfinder.it.js"></script> | |
| <!-- Include jQuery, jQuery UI, elFinder (REQUIRED) --> | |
| <script type="text/javascript"> | |
| $().ready(function () { | |
| var elf = $('#elfinder').elfinder({ | |
| // set your elFinder options here | |
| lang: 'it', // locale | |
| url: '/elfinder....connector.php', // connector URL | |
| soundPath: '/elfinder/sounds', | |
| dialog: {width: 900, modal: true, title: 'Select a file'}, | |
| resizable: false, | |
| commandsOptions: { | |
| getfile: { | |
| oncomplete: 'destroy' | |
| } | |
| }, | |
| getFileCallback: function (file, elf) { | |
| // the magic is here, use function from "main.html" for update input value | |
| window.parent.opener.processSelectedFile(file.path, '{{ $input_id }}'); | |
| window.close(); | |
| }, | |
| // toolbar configuration | |
| uiOptions : { | |
| // toolbar configuration | |
| toolbar : [ | |
| ['home', 'back', 'forward', 'up', 'reload'], | |
| ['mkdir', 'mkfile', 'upload'], | |
| ['open', 'download', 'getfile'], | |
| ['undo', 'redo'], | |
| ['copy', 'cut', 'paste', 'rm', 'empty'], | |
| ['duplicate', 'rename', 'edit', 'resize', 'chmod'], | |
| ['selectall', 'selectnone', 'selectinvert'], | |
| ['quicklook', 'info'], | |
| ['extract', 'archive'], | |
| // ['search'], | |
| ['view', 'sort'], | |
| ['help'], //'preference', | |
| ['fullscreen'] | |
| ], | |
| // toolbar extra options | |
| toolbarExtra : { | |
| // also displays the text label on the button (true / false) | |
| displayTextLabel: false, | |
| // Exclude `displayTextLabel` setting UA type | |
| labelExcludeUA: ['Mobile'], | |
| // auto hide on initial open | |
| autoHideUA: ['Mobile'], | |
| // Initial setting value of hide button in toolbar setting | |
| defaultHides: [], | |
| // show Preference button ('none', 'auto', 'always') | |
| // If you do not include 'preference' in the context menu you should specify 'auto' or 'always' | |
| showPreferenceButton: 'none' | |
| }, | |
| }, | |
| height : '100%', | |
| }).elfinder('instance'); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <!-- Element where elFinder will be created (REQUIRED) --> | |
| <div id="elfinder"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The trick is to prototype/add functions to window object and after use it from the new opened popup window in the elFinder fallback after selection
getFileCallback