|
function customizeOptions(editor) { |
|
const panelManager = editor.Panels; |
|
const command = editor.Commands |
|
|
|
|
|
command.add('custom-clear-canvas', { |
|
run: function(editor, sender) { |
|
|
|
editor.DomComponents.clear(); |
|
|
|
editor.CssComposer.clear(); |
|
|
|
editor.UndoManager.clear(); |
|
|
|
|
|
let msg = ` |
|
<div class="uk-text-left uk-text-truncate uk-animation-slide-top-small"> |
|
<div class="uk-flex uk-flex-middle"> |
|
<span class="uk-margin-remove uk-text-small"> |
|
<span uk-icon="icon: check; ratio: 0.95;"></span> |
|
<span>You've cleared your canvas.</span> |
|
</span> |
|
</div> |
|
</div> |
|
`; |
|
|
|
|
|
UIkit.notification({ |
|
message: msg, |
|
status: 'primary', |
|
pos: 'bottom-right', |
|
group: 'message', |
|
timeout: 3000 |
|
}); |
|
} |
|
}); |
|
|
|
|
|
panelManager.getButton('options', 'sw-visibility').set({ |
|
id: "sw-visibility", |
|
className: 'gjs-pn-btn', |
|
command: "sw-visibility", |
|
active: true, |
|
label: `<span uk-icon="thumbnails" uk-tooltip="title: Guide Lines; pos: bottom"></span>` |
|
}); |
|
panelManager.getButton('options', 'preview').set({ |
|
id: "preview", |
|
className: 'gjs-pn-btn', |
|
command: "preview", |
|
active: false, |
|
label: `<span uk-icon="push" uk-tooltip="title: Preview; pos: bottom"></span>` |
|
}); |
|
panelManager.getButton('options', 'fullscreen').set({ |
|
id: "fullscreen", |
|
className: 'gjs-pn-btn', |
|
command: "fullscreen", |
|
active: false, |
|
label: `<span uk-icon="expand" uk-tooltip="title: Set Fullscreen; pos: bottom"></span>` |
|
}); |
|
panelManager.getButton('options', 'export-template').set({ |
|
id: "export-template", |
|
className: 'gjs-pn-btn', |
|
command: "export-template", |
|
active: false, |
|
label: `<span uk-icon="code" uk-tooltip="title: Show Code; pos: bottom"></span>` |
|
}); |
|
|
|
|
|
panelManager.addButton('options', [{ |
|
id: 'clear-canvas', |
|
className: 'gjs-pn-btn', |
|
command: 'custom-clear-canvas', |
|
active: false, |
|
label: `<span uk-icon="trash" uk-tooltip="title: Clear Canvas; pos: bottom"></span>` |
|
}, ]); |
|
|
|
} |