Elfinder: Question: How to resize interface (window) to browser page size

Created on 18 Jan 2017 · 4Comments · Source: Studio-42/elFinder

I was trying several advices, however without success.
How to resize the elFinder interface to fit the page width and height.

Please guide me to the file which needs to be edited and what needs to be added to have the elFinder window fit the page width and height - automatically
( Full Screen like, without browser go to Full screen.) Thanks.

howto

Source

DaeMonSx

Most helpful comment

@DaeMonSx For example.

elfinder.html change main.default.js to main.js and add styles to body, elFinder node

<html>
    <head>
        <meta charset="utf-8">
        <title>elFinder 2.1.x source version with PHP connector</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2" />

        <!-- Require JS (REQUIRED) -->
        <!-- Rename "main.default.js" to "main.js" and edit it if you need configure elFInder options or any things -->
        <script data-main="./main.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>

    </head>
    <body style="margin:0; padding:0;">

        <!-- Element where elFinder will be created (REQUIRED) -->
        <div id="elfinder" style="height:100%; border:none;"></div>

    </body>
</html>

main.js Make new file

"use strict";
/**
 * elFinder client options and main script for RequireJS
 *
 * Rename "main.default.js" to "main.js" and edit it if you need configure elFInder options or any things. And use that in elfinder.html.
 * e.g. `<script data-main="./main.js" src="./require.js"></script>`
 **/
(function(){
    var // jQuery and jQueryUI version
        jqver = '3.1.1',
        uiver = '1.12.1',

        // Detect language (optional)
        lang = (function() {
            var locq = window.location.search,
                fullLang, locm, lang;
            if (locq && (locm = locq.match(/lang=([a-zA-Z_-]+)/))) {
                // detection by url query (?lang=xx)
                fullLang = locm[1];
            } else {
                // detection by browser language
                fullLang = (navigator.browserLanguage || navigator.language || navigator.userLanguage);
            }
            lang = fullLang.substr(0,2);
            if (lang === 'ja') lang = 'jp';
            else if (lang === 'pt') lang = 'pt_BR';
            else if (lang === 'ug') lang = 'ug_CN';
            else if (lang === 'zh') lang = (fullLang.substr(0,5) === 'zh-TW')? 'zh_TW' : 'zh_CN';
            return lang;
        })(),

        // elFinder options (REQUIRED)
        // Documentation for client options:
        // https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
        opts = {
            url : 'php/connector.minimal.php', // connector URL (REQUIRED)
            lang: lang                         // auto detected language (optional)
        },

        // Start elFinder (REQUIRED)
        start = function(elFinder) {
            // load jQueryUI CSS
            elFinder.prototype.loadCss('//cdnjs.cloudflare.com/ajax/libs/jqueryui/'+uiver+'/themes/smoothness/jquery-ui.css');

            $(function() {
                // Optional for Japanese decoder "extras/encoding-japanese.min"
                if (window.Encoding && Encoding.convert) {
                    elFinder.prototype._options.rawStringDecoder = function(s) {
                        return Encoding.convert(s,{to:'UNICODE',type:'string'});
                    };
                }
                // Make elFinder (REQUIRED)
                var node = $('#elfinder').elfinder(opts);
                var elf = node.elfinder('instance');

                // fit to window.height on window.resize
                var resizeTimer = null;
                $(window).resize(function() {
                    resizeTimer && clearTimeout(resizeTimer);
                    if (! node.hasClass('elfinder-fullscreen')) {
                        resizeTimer = setTimeout(function() {
                            var h = parseInt($(window).height());
                            if (h != parseInt(node.height())) {
                                elf.resize('100%', h);
                            }
                        }, 200);
                    }
                });
            });
        },

        // JavaScript loader (REQUIRED)
        load = function() {
            require(
                [
                    'elfinder'
                    , (lang !== 'en')? 'elfinder.lang' : null    // load detected language
                //  , 'extras/quicklook.googledocs'              // optional preview for GoogleApps contents on the GoogleDrive volume
                //  , (lang === 'jp')? 'extras/encoding-japanese.min' : null // optional Japanese decoder for archive preview
                ],
                start,
                function(error) {
                    alert(error.message);
                }
            );
        },

        // is IE8? for determine the jQuery version to use (optional)
        ie8 = (typeof window.addEventListener === 'undefined' && typeof document.getElementsByClassName === 'undefined');

    // config of RequireJS (REQUIRED)
    require.config({
        baseUrl : 'js',
        paths : {
            'jquery'   : '//cdnjs.cloudflare.com/ajax/libs/jquery/'+(ie8? '1.12.4' : jqver)+'/jquery.min',
            'jquery-ui': '//cdnjs.cloudflare.com/ajax/libs/jqueryui/'+uiver+'/jquery-ui.min',
            'elfinder' : 'elfinder.min',
            'elfinder.lang': [
                'i18n/elfinder.'+lang,
                'i18n/elfinder.fallback'
            ]
        },
        waitSeconds : 10 // optional
    });

    // load JavaScripts (REQUIRED)
    load();

})();

nao-pon on 20 Jan 2017

👍2

All 4 comments

@DaeMonSx do you want like this?
http://output.jsbin.com/gowemuq#elf_l1_Lw

I've found here: #1728

FelipeGrijo on 18 Jan 2017

yes,
However this doesn't seem to be working in my case.
The 2.1.20 index.html looks like below, and doesn't do anything if i will add the code from nao-pon comment.

index-html.txt

DaeMonSx on 18 Jan 2017

@DaeMonSx For example.

elfinder.html change main.default.js to main.js and add styles to body, elFinder node

<html>
    <head>
        <meta charset="utf-8">
        <title>elFinder 2.1.x source version with PHP connector</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2" />

        <!-- Require JS (REQUIRED) -->
        <!-- Rename "main.default.js" to "main.js" and edit it if you need configure elFInder options or any things -->
        <script data-main="./main.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>

    </head>
    <body style="margin:0; padding:0;">

        <!-- Element where elFinder will be created (REQUIRED) -->
        <div id="elfinder" style="height:100%; border:none;"></div>

    </body>
</html>

main.js Make new file

"use strict";
/**
 * elFinder client options and main script for RequireJS
 *
 * Rename "main.default.js" to "main.js" and edit it if you need configure elFInder options or any things. And use that in elfinder.html.
 * e.g. `<script data-main="./main.js" src="./require.js"></script>`
 **/
(function(){
    var // jQuery and jQueryUI version
        jqver = '3.1.1',
        uiver = '1.12.1',

        // Detect language (optional)
        lang = (function() {
            var locq = window.location.search,
                fullLang, locm, lang;
            if (locq && (locm = locq.match(/lang=([a-zA-Z_-]+)/))) {
                // detection by url query (?lang=xx)
                fullLang = locm[1];
            } else {
                // detection by browser language
                fullLang = (navigator.browserLanguage || navigator.language || navigator.userLanguage);
            }
            lang = fullLang.substr(0,2);
            if (lang === 'ja') lang = 'jp';
            else if (lang === 'pt') lang = 'pt_BR';
            else if (lang === 'ug') lang = 'ug_CN';
            else if (lang === 'zh') lang = (fullLang.substr(0,5) === 'zh-TW')? 'zh_TW' : 'zh_CN';
            return lang;
        })(),

        // elFinder options (REQUIRED)
        // Documentation for client options:
        // https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
        opts = {
            url : 'php/connector.minimal.php', // connector URL (REQUIRED)
            lang: lang                         // auto detected language (optional)
        },

        // Start elFinder (REQUIRED)
        start = function(elFinder) {
            // load jQueryUI CSS
            elFinder.prototype.loadCss('//cdnjs.cloudflare.com/ajax/libs/jqueryui/'+uiver+'/themes/smoothness/jquery-ui.css');

            $(function() {
                // Optional for Japanese decoder "extras/encoding-japanese.min"
                if (window.Encoding && Encoding.convert) {
                    elFinder.prototype._options.rawStringDecoder = function(s) {
                        return Encoding.convert(s,{to:'UNICODE',type:'string'});
                    };
                }
                // Make elFinder (REQUIRED)
                var node = $('#elfinder').elfinder(opts);
                var elf = node.elfinder('instance');

                // fit to window.height on window.resize
                var resizeTimer = null;
                $(window).resize(function() {
                    resizeTimer && clearTimeout(resizeTimer);
                    if (! node.hasClass('elfinder-fullscreen')) {
                        resizeTimer = setTimeout(function() {
                            var h = parseInt($(window).height());
                            if (h != parseInt(node.height())) {
                                elf.resize('100%', h);
                            }
                        }, 200);
                    }
                });
            });
        },

        // JavaScript loader (REQUIRED)
        load = function() {
            require(
                [
                    'elfinder'
                    , (lang !== 'en')? 'elfinder.lang' : null    // load detected language
                //  , 'extras/quicklook.googledocs'              // optional preview for GoogleApps contents on the GoogleDrive volume
                //  , (lang === 'jp')? 'extras/encoding-japanese.min' : null // optional Japanese decoder for archive preview
                ],
                start,
                function(error) {
                    alert(error.message);
                }
            );
        },

        // is IE8? for determine the jQuery version to use (optional)
        ie8 = (typeof window.addEventListener === 'undefined' && typeof document.getElementsByClassName === 'undefined');

    // config of RequireJS (REQUIRED)
    require.config({
        baseUrl : 'js',
        paths : {
            'jquery'   : '//cdnjs.cloudflare.com/ajax/libs/jquery/'+(ie8? '1.12.4' : jqver)+'/jquery.min',
            'jquery-ui': '//cdnjs.cloudflare.com/ajax/libs/jqueryui/'+uiver+'/jquery-ui.min',
            'elfinder' : 'elfinder.min',
            'elfinder.lang': [
                'i18n/elfinder.'+lang,
                'i18n/elfinder.fallback'
            ]
        },
        waitSeconds : 10 // optional
    });

    // load JavaScripts (REQUIRED)
    load();

})();

nao-pon on 20 Jan 2017

👍2

nao-pon Thanks, seems to be okay :)

DaeMonSx on 26 Jan 2017

👍1

Was this page helpful?

0 / 5 - 0 ratings