Issue #1526Opened October 18, 2018by gasserol2 reactions

[QUESTION] how to make fullscreen command

Question

Hi, unfortunately I do not find documentation and can't manage to get it understand from code: I know there is a built-in command 'fullscreen', but with my configuration (from tutorial) it does load only canvas in fullscreen, no panels. Here is my html code:

<div class="ogaeditor">
                <div class="panel__top">
                    <div class="panel__basic-actions"></div>
                    <div class="panel__devices"></div>
                    <div class="panel__switcher"></div>
                </div>
                <div class="editor-row">
                    <div class="editor-canvas">
                        <div id="gjs">
                            <h1>Hello World Component!</h1>
                        </div>
                    </div>
                    <div class="panel__right">
                        <div class="layers-container"></div>
                        <div class="styles-container"></div>
                        <div class="traits-container"></div>
                        <div id="blocks" class="blocks-container"></div>
                    </div>
                </div>
            </div>

and here my panel code:

editor.Panels.addPanel({
    id: 'basic-actions',
    el: '.panel__basic-actions',
    buttons: [
        ...
        {
            id: 'show-full',
            className: 'btn-show-full',
            label: '<i class="fas fa-expand-arrows-alt">',
            //context: 'show-full',
            //id: ful,
            //command: 'set-fullscreen',
            command: 'fullscreen', // Built-in command

        },
        {
            id: 'show-undo',
            className: 'btn-show-undo',
            label: '<i class="fas fa-undo">',
            context: 'show-undo',

            command(editor) {
                const um = editor.UndoManager;
                um.undo();
            },
        },
        {
            id: 'show-redo',
            className: 'btn-show-redo',
            label: '<i class="fas fa-redo">',
            context: 'show-redo',

            command(editor) {
                const um = editor.UndoManager;
                um.redo();
            },
        },
    ],
});

Can somebody put me on the right way? Many thanks for your precious help and best regards!

Answers (3)

electrotypeJanuary 1, 20202 reactions

@nativeer I had the same problem. My workaround is to call stopCommand before runCommand:

editor.stopCommand('fullscreen');
editor.runCommand('fullscreen', {  target: '#something' });

Seems to work for me.

artfOctober 19, 20180 reactions

Good point, the default Fullscreen command enables the fullscreen on the container (#gjs) but with external panels this obviosly doesn't work, and this is why you see only the canvas. I'd really appreciate a PR for a new option which would allow me to do something like this:

// from
command: 'fullscreen',
// to
command: editor => editor.runCommand('fullscreen', { target: '.ogaeditor' }),
// The target might be a selector string or any HTMLElement
gabjdevMay 4, 20190 reactions

Hi @artf , Above code worked for full screen, but after I exit full screen manually, it doesn't work anymore. Could you post code to exit full screen with same button?

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.