[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)
@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.
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
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.
Issue #2207
[BUG]: Can't drag component if there is some space on top/left with Mode Absolute
Given the following code example... Results in no ability to drag and drop elements to correct position using drag icon on the panel. See F...
Issue #1703
[Question] How to allow special characters in class name or data attribute?
In my HTML code, I have some variable placeholders defined in element's class name or data attributes. For example, consider following code...
Issue #1577
Inline CSS Comments break Code Manager
Apparently this is valid piece of html and css: <div style="color: red; / height 200px; /; font-weight: bold;"> (Hence the commented out he...
Issue #1368
Resize canvas
Is there a way to have a dynamic resizing of the canvas? i.e not using the Device Manager, but having a drag and drop of the width, similar...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.