Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Detach navigator from sidebar #9933

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions browser/Makefile.am
Original file line number Diff line number Diff line change
Expand Up @@ -398,6 +398,7 @@ COOL_JS_LST =\
src/control/Control.NotebookbarBuilder.js \
src/control/Control.Layers.js \
src/control/Control.Sidebar.ts \
src/control/Control.NavigatorPanel.ts \
src/control/AutoCompletePopup.ts \
src/control/Control.Mention.ts \
src/control/Control.FormulaUsagePopup.ts \
Expand Down Expand Up @@ -840,6 +841,7 @@ pot:
src/control/Control.ServerAuditDialog.ts \
src/control/Control.SheetsBar.js \
src/control/Control.Sidebar.ts \
src/control/Control.NavigatorPanel.ts \
src/control/Control.StatusBar.js \
src/control/Control.Tabs.js \
src/control/Control.Toolbar.js \
Expand Down
4 changes: 4 additions & 0 deletions browser/html/cool.html.m4
Original file line number Diff line number Diff line change
Expand Up @@ -147,10 +147,14 @@ m4_ifelse(MOBILEAPP,[true],
<input id="selectbackground" aria-labelledby="menu-selectbackground" type="file" accept="image/*">

<div id="main-document-content">
<!-- todo: combine presentation controls and navigator panel into one div -->
<div id="presentation-controls-wrapper" class="readonly">
<div id="slide-sorter"></div>
<div id="presentation-toolbar"></div>
</div>
<div id="navigator-dock-wrapper">
<div id="navigator-panel"></div>
</div>
<div id="document-container" class="readonly" dir="ltr">
<div id="map"></div>
</div>
Expand Down
186 changes: 186 additions & 0 deletions browser/src/control/Control.NavigatorPanel.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
/* -*- js-indent-level: 8 -*- */
/*
* Copyright the Collabora Online contributors.
*
* SPDX-License-Identifier: MPL-2.0
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
/*
* JSDialog.NavigatorPanel
*/

/* global app */
class NavigatorPanel {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we now create base class: SidebarBase which will be parent of Sidebar and Navigator.
We can then share almost all of the onAdd, onRemove, isVisible, onJSUpdate, onJSAction.
We only need to define strings which are different:

this.commandId = 'navigator' / 'sidebar';
this.containerWrapperId = 'navigator-dock-wrapper' / 'siebar-dock-wrapper';
this.panelId = 'navigator-panel' / 'sidebar-panel';

why do not concatenate even more: TYPE + '-dock-wrapper' ? because it's then easier to git grep if id is fully present in the code and css to find related code :)

map: any;
container: HTMLDivElement;
builder: any;

constructor(map: any) {
this.onAdd(map);
}

onAdd(map: ReturnType<typeof L.map>) {
this.map = map;

app.events.on('resize', this.onResize.bind(this));

this.builder = new L.control.jsDialogBuilder({
mobileWizard: this,
map: map,
cssClass: 'jsdialog sidebar', // keep sidebar styling for now, change later
});
this.container = L.DomUtil.create(
'div',
'navigator-container',
$('#navigator-panel').get(0),
);

this.map.on('navigator', this.onNavigator, this);
this.map.on('jsdialogupdate', this.onJSUpdate, this);
this.map.on('jsdialogaction', this.onJSAction, this);
}

onRemove() {
this.map.off('navigator');
this.map.off('jsdialogupdate', this.onJSUpdate, this);
this.map.off('jsdialogaction', this.onJSAction, this);
}

isVisible(): boolean {
return $('#navigator-dock-wrapper').is(':visible');
}

onJSUpdate(e: FireEvent) {
var data = e.data;

if (data.jsontype !== 'navigator') return;

if (!this.container) return;

if (!this.builder) return;

// reduce unwanted warnings in console
if (data.control.id === 'addonimage') {
window.app.console.log('Ignored update for control: ' + data.control.id);
return;
}

this.builder.updateWidget(this.container, data.control);
}

onJSAction(e: FireEvent) {
var data = e.data;

if (data.jsontype !== 'navigator') return;

if (!this.builder) return;

if (!this.container) return;

var innerData = data.data;
if (!innerData) return;

var controlId = innerData.control_id;

// Panels share the same name for main containers, do not execute actions for them
// if panel has to be shown or hidden, full update will appear
if (
controlId === 'contents' ||
controlId === 'Panel' ||
controlId === 'titlebar' ||
controlId === 'addonimage'
) {
window.app.console.log(
'Ignored action: ' +
innerData.action_type +
' for control: ' +
controlId,
);
return;
}

this.builder.executeAction(this.container, innerData);
}

onResize() {
var wrapper = document.getElementById('navigator-dock-wrapper');
wrapper.style.maxHeight =
document.getElementById('document-container').getBoundingClientRect()
.height + 'px';
}

closeNavigator() {
$('#navigator-dock-wrapper').hide();
this.map._onResize();

if (!this.map.editorHasFocus()) {
this.map.fire('editorgotfocus');
this.map.focus();
}

//this.map.uiManager.setDocTypePref('ShowSidebar', false);
}

onNavigator(data: FireEvent) {
var navigatorData = data.data;
this.builder.setWindowId(navigatorData.id);
$(this.container).empty();

if (
navigatorData.action === 'close' || // todo: i dont know if we ever actually get this call
window.app.file.disableSidebar ||
this.map.isReadOnlyMode()
) {
this.closeNavigator();
} else if (navigatorData.children) {
// for (var i = navigatorData.children.length - 1; i >= 0; i--) {
// if (
// navigatorData.children[i].type !== 'deck' ||
// navigatorData.children[i].visible === false
// )
// navigatorData.children.splice(i, 1);
// }

if (navigatorData.children.length) {
this.onResize();

// if (
// navigatorData.children &&
// navigatorData.children[0] &&
// navigatorData.children[0].id
// ) {
// this.unsetSelectedSidebar();
// var currentDeck = sidebarData.children[0].id;
// this.map.uiManager.setDocTypePref(currentDeck, true);
// if (this.targetDeckCommand) {
// var stateHandler = this.map['stateChangeHandler'];
// var isCurrent = stateHandler
// ? stateHandler.getItemValue(this.targetDeckCommand)
// : false;
// // just to be sure chack with other method
// if (isCurrent === 'false' || !isCurrent)
// isCurrent =
// this.targetDeckCommand === this.commandForDeck(currentDeck);
// if (this.targetDeckCommand && (isCurrent === 'false' || !isCurrent))
// this.changeDeck(this.targetDeckCommand);
// } else {
// this.changeDeck(this.targetDeckCommand);
// }
}

this.builder.build(this.container, [navigatorData]);
if (!this.isVisible()) $('#sidebar-dock-wrapper').show(200);

//this.map.uiManager.setDocTypePref('ShowSidebar', true);
} else {
this.closeNavigator();
}
}
}

JSDialog.NavigatorPanel = function (map: any) {
return new NavigatorPanel(map);
};
2 changes: 2 additions & 0 deletions browser/src/control/Control.UIManager.js
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,8 @@ L.Control.UIManager = L.Control.extend({

this.map.sidebar = JSDialog.Sidebar(this.map, {animSpeed: 200});

this.map.navigator = JSDialog.NavigatorPanel(this.map);

this.map.mention = L.control.mention(this.map);
this.map.formulaautocomplete = L.control.formulaautocomplete(this.map);
this.map.formulausage = L.control.formulausage(this.map);
Expand Down