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.

Sign up for GitHub

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

Jump to bottom

jsdialog: move more code to typescript #9382

Merged
merged 4 commits into from
Jul 1, 2024
Merged

jsdialog: move more code to typescript #9382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
da386ab
jsdialog: unify types of containers
eszkadev Jun 29, 2024
a3a58b3
jsdialog: move button box to separate file
eszkadev Jun 29, 2024
5c7cd87
jsdialog: leftaligned is not used
eszkadev Jun 29, 2024
417826b
jsdialog: move sidebar containers to separate file
eszkadev Jun 29, 2024
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
4 changes: 4 additions & 0 deletions browser/Makefile.am
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,6 +359,7 @@ COOL_JS_LST =\
src/control/jsdialog/Util.ScrollableBar.ts \
src/control/jsdialog/Util.SnackbarController.ts \
src/control/jsdialog/Util.StateChange.ts \
src/control/jsdialog/Widget.ButtonBox.ts \
src/control/jsdialog/Widget.Calendar.js \
src/control/jsdialog/Widget.ColorPicker.ts \
src/control/jsdialog/Widget.Combobox.js \
Expand All @@ -374,6 +375,7 @@ COOL_JS_LST =\
src/control/jsdialog/Widget.MultilineEdit.js \
src/control/jsdialog/Widget.Progressbar.js \
src/control/jsdialog/Widget.ScrolledWindow.js \
src/control/jsdialog/Widget.SidebarContainers.ts \
src/control/jsdialog/Widget.Timefield.js \
src/control/jsdialog/Widget.TreeView.js \
src/control/Control.JSDialog.js \
Expand Down Expand Up @@ -830,6 +832,7 @@ pot:
src/control/jsdialog/Util.ScrollableBar.ts \
src/control/jsdialog/Util.SnackbarController.ts \
src/control/jsdialog/Util.StateChange.ts \
src/control/jsdialog/Widget.ButtonBox.ts \
src/control/jsdialog/Widget.Calendar.js \
src/control/jsdialog/Widget.ColorPicker.ts \
src/control/jsdialog/Widget.Combobox.js \
Expand All @@ -845,6 +848,7 @@ pot:
src/control/jsdialog/Widget.MultilineEdit.js \
src/control/jsdialog/Widget.Progressbar.js \
src/control/jsdialog/Widget.ScrolledWindow.js \
src/control/jsdialog/Widget.SidebarContainers.ts \
src/control/jsdialog/Widget.Timefield.js \
src/control/jsdialog/Widget.TreeView.js \
src/core/Socket.js \
Expand Down
98 changes: 3 additions & 95 deletions browser/src/control/Control.JSDialogBuilder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,10 +109,10 @@ L.Control.JSDialogBuilder = L.Control.extend({
this._controlHandlers['expander'] = this._expanderHandler;
this._controlHandlers['grid'] = JSDialog.grid;
this._controlHandlers['alignment'] = this._alignmentHandler;
this._controlHandlers['buttonbox'] = this._buttonBox;
this._controlHandlers['buttonbox'] = JSDialog.buttonBox;
this._controlHandlers['frame'] = JSDialog.frame;
this._controlHandlers['deck'] = this._deckHandler;
this._controlHandlers['panel'] = this._panelHandler;
this._controlHandlers['deck'] = JSDialog.deck;
this._controlHandlers['panel'] = JSDialog.panel;
this._controlHandlers['calcfuncpanel'] = this._calcFuncListPanelHandler;
this._controlHandlers['tabcontrol'] = this._tabsControlHandler;
this._controlHandlers['tabpage'] = this._tabPageHandler;
Expand Down Expand Up @@ -561,64 +561,6 @@ L.Control.JSDialogBuilder = L.Control.extend({
return rows + 1;
},

_getGridChild: function(children, row, col) {
for (var index in children) {
if (parseInt(children[index].top) == row
&& parseInt(children[index].left) == col)
return children[index];
}
return null;
},

_buttonBox: function(parentContainer, data, builder) {
var container = L.DomUtil.create('div', builder.options.cssClass + ' ui-button-box '
+ (data.layoutstyle ? data.layoutstyle : ''), parentContainer);
container.id = data.id;

var isButtonBoxLeft = data.leftaligned === 'true';
var leftAlignButtons = [];
var rightAlignButton = [];

for (var i in data.children) {
var child = data.children[i];
if (child.id === 'help' || isButtonBoxLeft === true)
leftAlignButtons.push(child);
else
rightAlignButton.push(child);
}

var left = L.DomUtil.create('div', builder.options.cssClass + ' ui-button-box-left', container);

for (i in leftAlignButtons) {
child = leftAlignButtons[i];
if (builder._controlHandlers[child.type]) {
builder._controlHandlers[child.type](left, child, builder);
builder.postProcess(left, child);
}
}

var right = L.DomUtil.create('div', builder.options.cssClass + ' ui-button-box-right', container);
if (data.layoutstyle && data.layoutstyle === 'end')
L.DomUtil.addClass(container, 'end');

for (i in rightAlignButton) {
child = rightAlignButton[i];
if (builder._controlHandlers[child.type]) {
builder._controlHandlers[child.type](right, child, builder);
builder.postProcess(right, child);
}
}

if (data.vertical === 'true' || data.vertical === true) {
left.style.display = 'grid';
left.style.margin = 'auto';
right.style.display = 'grid';
right.style.margin = 'auto';
}

return false;
},

_explorableEntry: function(parentContainer, data, content, builder, valueNode, iconURL, updateCallback) {
var mainContainer = L.DomUtil.create('div', 'ui-explorable-entry level-' + builder._currentDepth + ' ' + builder.options.cssClass, parentContainer);
if (data && data.id)
Expand Down Expand Up @@ -892,40 +834,6 @@ L.Control.JSDialogBuilder = L.Control.extend({
}
},

_deckHandler: function(parentContainer, data, builder) {
var deck = L.DomUtil.create('div', 'deck ' + builder.options.cssClass, parentContainer);
deck.id = data.id;

for (var i = 0; i < data.children.length; i++) {
builder.build(deck, [data.children[i]]);
}

return false;
},

_panelHandler: function(parentContainer, data, builder) {
// we want to show the contents always, hidden property decides if we collapse the panel
if (data.children && data.children.length)
data.children[0].visible = true;

data.type = 'expander';
data.children = [{text: data.text}].concat(data.children);
data.id = data.id + 'PanelExpander';
builder._expanderHandler(parentContainer, data, builder, function() {});

var expander = $(parentContainer).children('#' + data.id);
if (data.hidden === 'true' || data.hidden === true)
expander.hide();

if (data.command) {
var iconParent = expander.children('.ui-expander').get(0);
var icon = L.DomUtil.create('div', 'ui-expander-icon-right ' + builder.options.cssClass, iconParent);
builder._controlHandlers['toolitem'](icon, {type: 'toolitem', command: data.command, icon: builder._createIconURL('morebutton')}, builder);
}

return false;
},

_calcFuncListPanelHandler: function(parentContainer, data, builder) {
var contentNode = data.children[0];

Expand Down
16 changes: 16 additions & 0 deletions browser/src/control/jsdialog/Definitions.Types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ interface WidgetJSON {
visible?: boolean; // visibility state
children: Array<WidgetJSON>; // child nodes
title?: string;
top?: string; // placement in the grid - row
left?: string; // placement in the grid - column
width?: string; // inside grid - width in number of columns
}

interface DialogResponse {
Expand Down Expand Up @@ -80,6 +83,19 @@ interface ContainerWidgetJSON extends WidgetJSON {
vertical?: boolean; // is horizontal or vertical container
}

interface GridWidgetJSON extends ContainerWidgetJSON {
cols: number; // number of grid columns
rows: number; // numer of grid rows
}

interface PanelWidgetJSON extends WidgetJSON {
hidden: boolean; // is hidden
command: string; // command to trigger options for a panel
text: string; // panel title
}

type ExpanderWidgetJSON = any;

interface TextWidget extends WidgetJSON {
text: string;
}
Expand Down
80 changes: 80 additions & 0 deletions browser/src/control/jsdialog/Widget.ButtonBox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/* -*- 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.ButtonBox - button box widget which groups buttons, setups the layout,
* can be found on the bottom of dialog with standard buttons like: ok, cancel
*/

declare var JSDialog: any;

JSDialog.buttonBox = function (
parentContainer: Element,
data: ContainerWidgetJSON,
builder: any,
) {
var container = L.DomUtil.create(
'div',
builder.options.cssClass +
' ui-button-box ' +
(data.layoutstyle ? data.layoutstyle : ''),
parentContainer,
);
container.id = data.id;

var leftAlignButtons = [];
var rightAlignButton = [];

for (var i in data.children) {
var child = data.children[i];
if (child.id === 'help') leftAlignButtons.push(child);
else rightAlignButton.push(child);
}

var left = L.DomUtil.create(
'div',
builder.options.cssClass + ' ui-button-box-left',
container,
);

for (i in leftAlignButtons) {
child = leftAlignButtons[i];
if (builder._controlHandlers[child.type]) {
builder._controlHandlers[child.type](left, child, builder);
builder.postProcess(left, child);
}
}

var right = L.DomUtil.create(
'div',
builder.options.cssClass + ' ui-button-box-right',
container,
);
if (data.layoutstyle && data.layoutstyle === 'end')
L.DomUtil.addClass(container, 'end');

for (i in rightAlignButton) {
child = rightAlignButton[i];
if (builder._controlHandlers[child.type]) {
builder._controlHandlers[child.type](right, child, builder);
builder.postProcess(right, child);
}
}

if (data.vertical === true) {
left.style.display = 'grid';
left.style.margin = 'auto';
right.style.display = 'grid';
right.style.margin = 'auto';
}

return false;
};
35 changes: 19 additions & 16 deletions browser/src/control/jsdialog/Widget.Containers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,27 @@

declare var JSDialog: any;

interface WidgetData {
id: string;
type: string;
enabled: boolean;
children: Array<WidgetData>;
}

interface GridData extends WidgetData {
cols: number;
rows: number;
function _getGridChild(
children: Array<WidgetJSON>,
row: number,
col: number,
): WidgetJSON {
for (var index in children) {
if (
parseInt(children[index].top) == row &&
parseInt(children[index].left) == col
)
return children[index];
}
return null;
}

JSDialog.container = function (
parentContainer: Element,
data: WidgetData | GridData,
data: ContainerWidgetJSON | GridWidgetJSON,
builder: any,
) {
if ((data as GridData).cols && (data as GridData).rows)
if ((data as GridWidgetJSON).cols && (data as GridWidgetJSON).rows)
return JSDialog.grid(parentContainer, data, builder);

if (parentContainer && !parentContainer.id) parentContainer.id = data.id;
Expand All @@ -42,7 +45,7 @@ JSDialog.container = function (

JSDialog.grid = function (
parentContainer: Element,
data: GridData,
data: GridWidgetJSON,
builder: any,
) {
const rows = builder._getGridRows(data.children);
Expand Down Expand Up @@ -71,7 +74,7 @@ JSDialog.grid = function (
let prevChild = null;

for (let col = 0; col < cols; col++) {
const child = builder._getGridChild(data.children, row, col);
const child = _getGridChild(data.children, row, col);
const isMergedCell =
prevChild &&
prevChild.width &&
Expand Down Expand Up @@ -119,7 +122,7 @@ JSDialog.grid = function (

JSDialog.toolbox = function (
parentContainer: Element,
data: WidgetData,
data: WidgetJSON,
builder: any,
) {
const levelClass =
Expand Down Expand Up @@ -168,7 +171,7 @@ JSDialog.toolbox = function (

JSDialog.spacer = function (
parentContainer: Element,
data: WidgetData,
data: WidgetJSON,
builder: any,
) {
const spacer = L.DomUtil.create(
Expand Down
Loading
Loading