diff --git a/assets/css/groups.css b/assets/css/groups.css index 583b565..51958bc 100644 --- a/assets/css/groups.css +++ b/assets/css/groups.css @@ -112,6 +112,18 @@ input { flex-direction: row; } +.t42-html-buttons-container { + display: flex; + position: absolute; + right: var(--spacing-4); + top: var(--spacing-4); + background-color: Hsl(var(--g42-bg-01)); +} + +.t42-html-buttons-container ul:first-of-type { + padding-left: var(--spacing-4); +} + .t42-buttons { display: flex; flex-shrink: 0; @@ -384,6 +396,10 @@ input { background-color: var(--t42-tab-bar-background); } +.t42-html-buttons-bar-element { + background-color: var(--t42-html-buttons-bar-background); +} + .t42-tab-bar-button { width: var(--t42-tab-bar-button-size); height: var(--t42-tab-bar-button-size); diff --git a/assets/css/vars.css b/assets/css/vars.css index 05c16ef..f4b53a8 100644 --- a/assets/css/vars.css +++ b/assets/css/vars.css @@ -32,6 +32,8 @@ --t42-frame-caption-separator-size: 0; --t42-frame-caption-background: Hsl(var(--g42-bg-01)); + --t42-html-buttons-bar-background: Hsl(var(--g42-bg-01)); + --t42-tab-bar-height: 32px; --t42-tab-bar-button-size: 26px; --t42-tab-bar-separator-size: 0; diff --git a/src/GroupElementCreationWrapper.tsx b/src/GroupElementCreationWrapper.tsx index 0b45aec..c26487f 100644 --- a/src/GroupElementCreationWrapper.tsx +++ b/src/GroupElementCreationWrapper.tsx @@ -22,28 +22,28 @@ const GroupElementCreationWrapper: React.FC = ({ components }) => { const minimize = { onClick: () => { - webGroupsManager.minimizeGroup(options.targetId); + webGroupsManager.onMinimizeButtonClick(TargetType.Group, options.targetId); }, ...options.minimize } const restore = { onClick: () => { - webGroupsManager.restoreGroup(options.targetId); + webGroupsManager.onRestoreButtonClick(TargetType.Group, options.targetId); }, ...options.restore } const maximize = { onClick: () => { - webGroupsManager.maximizeGroup(options.targetId); + webGroupsManager.onMaximizeButtonClick(TargetType.Group, options.targetId); }, ...options.maximize } const close = { onClick: () => { - webGroupsManager.closeGroup(options.targetId); + webGroupsManager.onCloseButtonClick(TargetType.Group, options.targetId); }, ...options.close } @@ -102,63 +102,63 @@ const GroupElementCreationWrapper: React.FC = ({ components }) => { const feedback = { onClick: () => { - webGroupsManager.feedbackFrame(options.targetId); + webGroupsManager.onFeedbackButtonClick(TargetType.Frame, options.targetId); }, ...options.feedback }; const sticky = { onClick: () => { - webGroupsManager.stickyFrame(options.targetId); + webGroupsManager.onStickyButtonClick(TargetType.Frame, options.targetId); }, ...options.sticky }; const extract = { onClick: () => { - webGroupsManager.extractFrame(options.targetId); + webGroupsManager.onExtractButtonClick(TargetType.Frame, options.targetId); }, ...options.extract }; const lock = { onClick: () => { - webGroupsManager.lockFrame(options.targetId); + webGroupsManager.onLockButtonClick(TargetType.Frame, options.targetId); }, ...options.lock }; const unlock = { onClick: () => { - webGroupsManager.unlockFrame(options.targetId); + webGroupsManager.onUnlockButtonClick(TargetType.Frame, options.targetId); }, ...options.unlock }; const minimize = { onClick: () => { - webGroupsManager.minimizeFrame(options.targetId); + webGroupsManager.onMinimizeButtonClick(TargetType.Frame, options.targetId); }, ...options.minimize } const restore = { onClick: () => { - webGroupsManager.restoreFrame(options.targetId); + webGroupsManager.onRestoreButtonClick(TargetType.Frame, options.targetId); }, ...options.restore } const maximize = { onClick: () => { - webGroupsManager.maximizeFrame(options.targetId); + webGroupsManager.onMaximizeButtonClick(TargetType.Frame, options.targetId); }, ...options.maximize } const close = { onClick: () => { - webGroupsManager.closeFrame(options.targetId); + webGroupsManager.onCloseButtonClick(TargetType.Frame, options.targetId); }, ...options.close } @@ -402,63 +402,63 @@ const GroupElementCreationWrapper: React.FC = ({ components }) => { const feedback = { onClick: () => { - webGroupsManager.feedbackTabBar(options.targetId); + webGroupsManager.onFeedbackButtonClick(TargetType.TabBar, options.targetId); }, ...options.feedback }; const sticky = { onClick: () => { - webGroupsManager.stickyTabBar(options.targetId); + webGroupsManager.onStickyButtonClick(TargetType.TabBar, options.targetId); }, ...options.sticky }; const extract = { onClick: () => { - webGroupsManager.extractTabBar(options.targetId); + webGroupsManager.onExtractButtonClick(TargetType.TabBar, options.targetId); }, ...options.extract }; const lock = { onClick: () => { - webGroupsManager.lockTabBar(options.targetId); + webGroupsManager.onLockButtonClick(TargetType.TabBar, options.targetId); }, ...options.lock } const unlock = { onClick: () => { - webGroupsManager.unlockTabBar(options.targetId); + webGroupsManager.onUnlockButtonClick(TargetType.TabBar, options.targetId); }, ...options.unlock } const minimize = { onClick: () => { - webGroupsManager.minimizeTabBar(options.targetId); + webGroupsManager.onMinimizeButtonClick(TargetType.TabBar, options.targetId); }, ...options.minimize } const restore = { onClick: () => { - webGroupsManager.restoreTabBar(options.targetId); + webGroupsManager.onRestoreButtonClick(TargetType.TabBar, options.targetId); }, ...options.restore } const maximize = { onClick: () => { - webGroupsManager.maximizeTabBar(options.targetId); + webGroupsManager.onMaximizeButtonClick(TargetType.TabBar, options.targetId); }, ...options.maximize } const close = { onClick: () => { - webGroupsManager.closeTabBar(options.targetId); + webGroupsManager.onCloseButtonClick(TargetType.TabBar, options.targetId); }, ...options.close } @@ -505,6 +505,107 @@ const GroupElementCreationWrapper: React.FC = ({ components }) => { }); } + const renderHtmlButtons = () => { + const HtmlButtonsCustomElement = components?.html?.Buttons; + + return Object.values(state.htmlButtons).map((te) => { + if (!HtmlButtonsCustomElement || !te.parentElement) { + return; + } + const { parentElement, ...options } = te; + + const feedback = { + onClick: () => { + webGroupsManager.onFeedbackButtonClick(TargetType.HtmlButtons, options.targetId); + }, + ...options.feedback + }; + + const sticky = { + onClick: () => { + webGroupsManager.onStickyButtonClick(TargetType.HtmlButtons, options.targetId); + }, + ...options.sticky + }; + + const extract = { + onClick: () => { + webGroupsManager.onExtractButtonClick(TargetType.HtmlButtons, options.targetId); + }, + ...options.extract + }; + + const lock = { + onClick: () => { + webGroupsManager.onLockButtonClick(TargetType.HtmlButtons, options.targetId); + }, + ...options.lock + } + + const unlock = { + onClick: () => { + webGroupsManager.onUnlockButtonClick(TargetType.HtmlButtons, options.targetId); + }, + ...options.unlock + } + + const minimize = { + onClick: () => { + webGroupsManager.onMinimizeButtonClick(TargetType.HtmlButtons, options.targetId); + }, + ...options.minimize + } + + const restore = { + onClick: () => { + webGroupsManager.onRestoreButtonClick(TargetType.HtmlButtons, options.targetId); + }, + ...options.restore + } + + const maximize = { + onClick: () => { + webGroupsManager.onMaximizeButtonClick(TargetType.HtmlButtons, options.targetId); + }, + ...options.maximize + } + + const close = { + onClick: () => { + webGroupsManager.onCloseButtonClick(TargetType.HtmlButtons, options.targetId); + }, + ...options.close + } + + let customButtonsProps = new Array(); + if (options.customButtons) { + customButtonsProps = options.customButtons.map((cButton) => { + return { + onClick: () => { + webGroupsManager.clickCustomButton(options.targetId, cButton.buttonId); + }, + visible: true, + imageData: cButton.imageData, + tooltip: cButton.tooltip, + buttonId: cButton.buttonId}}); + } + + return + }); + } + return <> {renderGroupCaptionBar()} {renderGroupOverlay()} @@ -520,6 +621,7 @@ const GroupElementCreationWrapper: React.FC = ({ components }) => { {renderAfterTabsZones()} {renderTabHeaderButtons()} {renderBelowTabs()} + {renderHtmlButtons()} = ({ components }) => { onCreateAfterTabsComponentRequested={components?.tabs?.After ? webGroupsStore.onCreateAfterTabsComponentRequested : undefined} onCreateTabHeaderButtonsRequested={components?.tabs?.Buttons ? webGroupsStore.onCreateTabHeaderButtonsRequested : undefined} onCreateBelowTabsRequested={components?.tabs?.Below ? webGroupsStore.onCreateBelowTabsComponentRequested : undefined} + onCreateHtmlButtonsRequested={components?.html?.Buttons ? webGroupsStore.onCreateHtmlButtonsRequested : undefined} onUpdateGroupCaptionBarRequested={components?.group?.CaptionBar ? webGroupsStore.onUpdateGroupCaptionBarRequested : undefined} onUpdateFrameWindowOverlayRequested={components?.group?.Overlay ? webGroupsStore.onUpdateFrameWindowOverlayRequested : undefined} onUpdateFrameCaptionBarRequested={components?.flat?.CaptionBar ? webGroupsStore.onUpdateFrameCaptionBarRequested : undefined} @@ -558,6 +661,7 @@ const GroupElementCreationWrapper: React.FC = ({ components }) => { onRemoveAfterTabsComponentRequested={webGroupsStore.onRemoveAfterTabsComponentRequested} onRemoveTabHeaderButtonsRequested={webGroupsStore.onRemoveTabHeaderButtonsRequested} onRemoveBelowTabsRequested={webGroupsStore.onRemoveBelowTabsRequested} + onRemoveHtmlButtonsRequested={webGroupsStore.onRemoveHtmlButtonsRequested} onShowCaptionEditorRequested={webGroupsStore.onShowCaptionEditorRequested} onCommitCaptionEditingRequested={webGroupsStore.onCommitCaptionEditingRequested} onHideCaptionEditorRequested={webGroupsStore.onHideCaptionEditorRequested} diff --git a/src/GroupWrapper.tsx b/src/GroupWrapper.tsx index b1e3537..0acfc37 100644 --- a/src/GroupWrapper.tsx +++ b/src/GroupWrapper.tsx @@ -37,7 +37,10 @@ class GroupWrapper extends React.Component { createTabBarButtonsContainerElement: this.props.onCreateTabHeaderButtonsRequested, createBelowTabs: this.props.onCreateBelowTabsRequested, updateBelowTabs: this.props.onUpdateBelowTabsRequested, - + + createHtmlButtonsContainerElement: this.props.onCreateHtmlButtonsRequested, + destroyHtmlButtonsContainerElement: this.props.onRemoveHtmlButtonsRequested, + updateFrame: this.props.onUpdateFrameRequested, updateStandardButton: this.props.onUpdateStandardButtonRequested, updateCustomButtons: this.props.onUpdateCustomButtonsRequested, diff --git a/src/defaultComponents/htmlButtonsBar/buttons.tsx b/src/defaultComponents/htmlButtonsBar/buttons.tsx new file mode 100644 index 0000000..7f595ff --- /dev/null +++ b/src/defaultComponents/htmlButtonsBar/buttons.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import { HtmlButtonsProps } from "../../types/api"; +import CloseButton from "../buttons/CloseButton"; +import ExtractButton from "../buttons/ExtractButton"; +import FeedbackButton from "../buttons/FeedbackButton"; +import LockButton from "../buttons/LockButtons"; +import MaximizeButton from "../buttons/MaximizeButton"; +import MinimizeButton from "../buttons/MinimizeButton"; +import RestoreButton from "../buttons/RestoreButton"; +import StickyButton from "../buttons/StickyButton"; +import UnlockButton from "../buttons/UnlockButton"; +import CustomButton from "../buttons/CustomButton"; + +const HtmlButtons: React.FC = ({ extract, minimize, maximize, restore, close, lock, unlock, feedback, sticky, customButtons }) => { + return
+
    + { + customButtons.map(customButton => { + return customButton.visible && + }) + } +
+
    + {feedback?.visible && } + {sticky?.visible && } + {extract?.visible && } + {lock?.visible && } + {unlock?.visible && } + {minimize?.visible && } + {restore?.visible && } + {maximize?.visible && } + {close?.visible && } +
+
+}; + + +export default HtmlButtons; \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 33da5de..7eae44d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -66,6 +66,7 @@ import { GroupComponentVisibilityState, GroupOverlayProps, GroupProps, + HtmlButtonsProps, MoveAreaProps, TabElementProps, TabHeaderButtonsProps, @@ -81,6 +82,7 @@ import useCommitFlatCaptionEditingRequested from "./defaultComponents/flatCaptio import useEditableCaption from "./defaultComponents/captionEditor/useEditableCaption"; import useCaptionEditor from "./defaultComponents/captionEditor/useCaptionEditor"; import FrameLoadingAnimation from "./defaultComponents/loadingAnimation/FrameLoadingAnimation"; +import HtmlButtons from "./defaultComponents/htmlButtonsBar/buttons"; @@ -112,6 +114,7 @@ export { FlatCaptionEditor, TabHeaderButtons, FrameLoadingAnimation, + HtmlButtons, GroupComponentVisibilityState, useIOConnectWindow, useGroupComponentVisibility, @@ -147,6 +150,7 @@ export { TabCloseButtonProps, TabHeaderButtonsProps, TabCaptionEditorProps, + HtmlButtonsProps, FlatCaptionBarProps, FlatCaptionProps, FrameWindowOverlayProps, diff --git a/src/types/api.ts b/src/types/api.ts index ecc565d..177aad1 100644 --- a/src/types/api.ts +++ b/src/types/api.ts @@ -130,6 +130,9 @@ export interface TabHeaderButtonsProps { selectedWindow: string; } +export interface HtmlButtonsProps extends TabHeaderButtonsProps { +} + export interface GroupProps { components?: { group?: { @@ -153,6 +156,9 @@ export interface GroupProps { After?: React.ComponentType; Buttons?: React.ComponentType; Below?: React.ComponentType; + }; + html?: { + Buttons?: React.ComponentType; } } } diff --git a/src/types/internal.ts b/src/types/internal.ts index f24d94a..7c59f73 100644 --- a/src/types/internal.ts +++ b/src/types/internal.ts @@ -44,7 +44,7 @@ export interface GroupWrapperProps { onCreateAfterTabsComponentRequested?: (options: CreateFrameElementRequestOptions) => void; onUpdateAfterTabsComponentRequested?: (options: CreateFrameElementRequestOptions) => void; - onCreateTabHeaderButtonsRequested?: (options: CreateTabHeaderButtonsOptions) => void; + onCreateTabHeaderButtonsRequested?: (options: CreateButtonsOptions) => void; onCreateBelowTabsRequested?: (options: CreateFrameElementRequestOptions) => void; onUpdateBelowTabsRequested?: (options: CreateFrameElementRequestOptions) => void; @@ -53,6 +53,9 @@ export interface GroupWrapperProps { onUpdateStandardButtonRequested?: (options: UpdateStandardButtonRequestOptions) => void; onUpdateCustomButtonsRequested?: (options: UpdateCustomButtonsRequestOptions) => void; + onCreateHtmlButtonsRequested?: (options: CreateButtonsOptions) => void; + onRemoveHtmlButtonsRequested?: (options: RemoveRequestOptions) => void; + onRemoveFrameCaptionBarRequested?: (options: RemoveRequestOptions) => void; onRemoveFrameWindowOverlayRequested?: (options: RemoveRequestOptions) => void; onRemoveAboveWindowRequested?: (options: RemoveRequestOptions) => void; @@ -112,54 +115,16 @@ export interface UpdateFrameCaptionBarRequestOptions extends BaseElementOptions } -export interface CreateFrameCaptionBarRequestOptions extends CreateFrameElementRequestOptions { +export interface CreateFrameCaptionBarRequestOptions extends CreateButtonsOptions { caption: string; moveAreaId: string; channelSelectorVisible: boolean; selectedChannel: string; selectedChannelColor: string; - feedback: { - tooltip: string; - visible: boolean; - }; - sticky: { - tooltip: string; - visible: boolean; - isPressed: boolean; - }; - extract: { - tooltip: string; - visible: boolean; - }; - lock: { - tooltip: string; - visible: boolean; - }; - unlock: { - tooltip: string; - visible: boolean; - }; - minimize: { - tooltip: string; - visible: boolean; - }; - restore: { - tooltip: string; - visible: boolean; - }; - maximize: { - tooltip: string; - visible: boolean; - }; - close: { - tooltip: string; - visible: boolean; - }; captionEditor: { show: boolean; text?: string; }; - customButtons: UpdateCustomButtonOptions[] } export interface CreateTabRequestOptions extends CreateElementRequestOptions { @@ -192,7 +157,7 @@ export interface UpdateCustomButtonOptions { imageData: string; } -export interface CreateTabHeaderButtonsOptions extends CreateFrameElementRequestOptions { +export interface CreateButtonsOptions extends CreateFrameElementRequestOptions { feedback: { tooltip: string; visible: boolean; @@ -261,7 +226,8 @@ export enum TargetType { Group = "group", Frame = "frame", TabBar = "tabBar", - Tab = "tab" + Tab = "tab", + HtmlButtons = "html" } export enum StandardButtons { @@ -289,8 +255,9 @@ export interface ElementCreationWrapperState { beforeTabsZones: { [targetId: string]: CreateFrameElementRequestOptions }; tabElements: { [targetId: string]: CreateTabRequestOptions }; afterTabsZones: { [targetId: string]: CreateFrameElementRequestOptions }; - tabHeaderButtons: { [targetId: string]: CreateTabHeaderButtonsOptions }; + tabHeaderButtons: { [targetId: string]: CreateButtonsOptions }; belowTabsZones: { [targetId: string]: CreateFrameElementRequestOptions }; + htmlButtons: { [targetId: string]: CreateButtonsOptions }; } export interface ExternalLibraryFactory { diff --git a/src/webGroupsManager.ts b/src/webGroupsManager.ts index 44f750b..5246048 100644 --- a/src/webGroupsManager.ts +++ b/src/webGroupsManager.ts @@ -55,92 +55,40 @@ class WebGroupsManagerDecorator { return window.webGroupsManager.externalLibraryFactory.focusGroup(); } - public closeFrame(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Close); + public onCloseButtonClick(targetType: TargetType, targetId: string): void { + window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Close); } - public restoreFrame(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Restore); + public onRestoreButtonClick(targetType: TargetType, targetId: string): void { + window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Restore); } - public maximizeFrame(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Maximize); + public onMaximizeButtonClick(targetType: TargetType, targetId: string): void { + window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Maximize); } - public minimizeFrame(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Minimize); + public onMinimizeButtonClick(targetType: TargetType, targetId: string): void { + window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Minimize); } - public lockFrame(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Lock); + public onLockButtonClick(targetType: TargetType, targetId: string): void { + window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Lock); } - public unlockFrame(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Unlock); + public onUnlockButtonClick(targetType: TargetType, targetId: string): void { + window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Unlock); } - public feedbackFrame(targetId: string):void{ - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Feedback); + public onFeedbackButtonClick(targetType: TargetType, targetId: string):void{ + window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Feedback); } - public stickyFrame(targetId: string):void{ - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Sticky); + public onStickyButtonClick(targetType: TargetType, targetId: string):void{ + window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Sticky); } - public extractFrame(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Extract); - } - - public closeTabBar(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Close); - } - - public restoreTabBar(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Restore); - } - - public maximizeTabBar(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Maximize); - } - - public minimizeTabBar(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Minimize); - } - - public lockTabBar(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Lock); - } - - public unlockTabBar(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Unlock); - } - - public feedbackTabBar(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Feedback); - } - - public stickyTabBar(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Sticky); - } - - public extractTabBar(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Extract); - } - - public closeGroup(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Group, targetId, StandardButtons.Close); - } - - public restoreGroup(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Group, targetId, StandardButtons.Restore); - } - - public maximizeGroup(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Group, targetId, StandardButtons.Maximize); - } - - public minimizeGroup(targetId: string): void { - window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Group, targetId, StandardButtons.Minimize); + public onExtractButtonClick(targetType: TargetType, targetId: string): void { + window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Extract); } public closeTab(targetId: string): void { diff --git a/src/webGroupsStore.ts b/src/webGroupsStore.ts index afc8376..1861a13 100644 --- a/src/webGroupsStore.ts +++ b/src/webGroupsStore.ts @@ -3,7 +3,7 @@ import { CreateFrameCaptionBarRequestOptions, CreateFrameElementRequestOptions, CreateGroupCaptionBarRequestOptions, - CreateTabHeaderButtonsOptions, + CreateButtonsOptions, CreateTabRequestOptions, ElementCreationWrapperState, RemoveRequestOptions, @@ -35,6 +35,7 @@ class WebGroupsStore { tabHeaderButtons: {}, // dict frameId to crate tab header buttons options belowTabsZones: {}, // dict frameId to create options frameLoadingAnimations: {}, // dict frameId to create options + htmlButtons: {}, // dict frameId to crate html buttons options } public subscribe = (cb: () => void) => { @@ -229,7 +230,7 @@ class WebGroupsStore { }); } - public onCreateTabHeaderButtonsRequested = (options: CreateTabHeaderButtonsOptions) => { + public onCreateTabHeaderButtonsRequested = (options: CreateButtonsOptions) => { if (options === this.state.tabHeaderButtons[options.targetId] || !options) { return; } @@ -259,6 +260,36 @@ class WebGroupsStore { }); } + public onCreateHtmlButtonsRequested = (options: CreateButtonsOptions) => { + if (options === this.state.htmlButtons[options.targetId] || !options) { + return; + } + this.setState(s => { + return { + ...s, + htmlButtons: { + ...s.htmlButtons, + [options.targetId]: options + } + } + }); + } + + public onUpdateHtmlButtonsRequested = (options: CreateButtonsOptions) => { + if (options === this.state.htmlButtons[options.targetId] || !options) { + return; + } + this.setState(s => { + return { + ...s, + htmlButtons: { + ...s.htmlButtons, + [options.targetId]: { ...s.htmlButtons[options.targetId], ...options } + } + } + }); + } + public onUpdateGroupCaptionBarRequested = (options: UpdateGroupCaptionBarRequestOptions) => { if (options === this.state.groupCaptionBar) { return; @@ -362,7 +393,7 @@ class WebGroupsStore { }); } - public onUpdateTabHeaderButtonsRequested = (options: CreateTabHeaderButtonsOptions) => { + public onUpdateTabHeaderButtonsRequested = (options: CreateButtonsOptions) => { if (options === this.state.tabHeaderButtons[options.targetId] || !options) { return; } @@ -426,59 +457,77 @@ class WebGroupsStore { } public onUpdateStandardButton = (options: UpdateStandardButtonRequestOptions) => { - const isCaptionBar = options.targetType === TargetType.Group; //this.state.groupCaptionBar?.targetId === options.targetId; - const isFrame = options.targetType === TargetType.Frame; - const isTabHeaderButtons = options.targetType === TargetType.TabBar; - - if (isCaptionBar) { - const currentState = this.state.groupCaptionBar || { targetId: options.targetId } as CreateGroupCaptionBarRequestOptions; - const newOptions = { - ...currentState, - [options.buttonId]: { - ...options - } - }; - this.onUpdateGroupCaptionBarRequested(newOptions as UpdateGroupCaptionBarRequestOptions); - } else if (isFrame && options.targetType === TargetType.Frame) { - const currentState = this.state.frameCaptionBars[options.targetId] || { targetId: options.targetId } as CreateTabHeaderButtonsOptions; - const newOptions = { - ...currentState, - [options.buttonId]: { - ...options - } - }; - this.onUpdateFrameCaptionBarRequested(newOptions); - } else if (isTabHeaderButtons && options.targetType === TargetType.TabBar) { - const currentState = this.state.tabHeaderButtons[options.targetId] || { targetId: options.targetId } as CreateTabHeaderButtonsOptions; - const newOptions = { - ...currentState, - [options.buttonId]: { - ...options - } - }; - - this.onUpdateTabHeaderButtonsRequested(newOptions); + const targetState = { targetId: options.targetId }; + switch(options.targetType) { + case TargetType.Group: + const currentGroupState = this.state.groupCaptionBar || targetState as CreateGroupCaptionBarRequestOptions; + const newGroupOptions = { + ...currentGroupState, + [options.buttonId]: { + ...options + } + }; + this.onUpdateGroupCaptionBarRequested(newGroupOptions); + break; + case TargetType.Frame: + const currentFrameState = this.state.frameCaptionBars[options.targetId] || targetState as CreateFrameCaptionBarRequestOptions; + const newFrameOptions = { + ...currentFrameState, + [options.buttonId]: { + ...options + } + }; + this.onUpdateFrameCaptionBarRequested(newFrameOptions); + break; + case TargetType.TabBar: + const currentTabButtonsState = this.state.tabHeaderButtons[options.targetId] || targetState as CreateButtonsOptions; + const newTabButtonsOptions = { + ...currentTabButtonsState, + [options.buttonId]: { + ...options + } + }; + this.onUpdateTabHeaderButtonsRequested(newTabButtonsOptions); + break; + case TargetType.HtmlButtons: + const currentHtmlButtonsState = this.state.htmlButtons[options.targetId] || targetState as CreateButtonsOptions; + const newHtmlButtonsOptions = { + ...currentHtmlButtonsState, + [options.buttonId]: { + ...options + } + }; + this.onUpdateHtmlButtonsRequested(newHtmlButtonsOptions); + break; } } public onUpdateCustomButtons = (options: UpdateCustomButtonsRequestOptions) => { - const isFrame = options.targetType === TargetType.Frame; - const isTabHeaderButtons = options.targetType === TargetType.TabBar; - - if (isFrame && options.targetType === TargetType.Frame) { - const currentState = this.state.frameCaptionBars[options.targetId] || { targetId: options.targetId } as CreateTabHeaderButtonsOptions; - const newOptions = { - ...currentState, - ...options - }; - this.onUpdateFrameCaptionBarRequested(newOptions); - } else if (isTabHeaderButtons && options.targetType === TargetType.TabBar) { - const currentState = this.state.tabHeaderButtons.customButtons || { customButtons: options.customButtons } as CreateTabHeaderButtonsOptions; - const newOptions = { - ...currentState, - ...options - }; - this.onUpdateTabHeaderButtonsRequested(newOptions); + switch(options.targetType) { + case TargetType.Frame: + const currentFrameState = this.state.frameCaptionBars[options.targetId] || { targetId: options.targetId } as CreateButtonsOptions; + const newFrameOptions = { + ...currentFrameState, + ...options + }; + this.onUpdateFrameCaptionBarRequested(newFrameOptions); + break; + case TargetType.TabBar: + const currentTabBarState = this.state.tabHeaderButtons.customButtons || { customButtons: options.customButtons } as CreateButtonsOptions; + const newTabBarOptions = { + ...currentTabBarState, + ...options + }; + this.onUpdateTabHeaderButtonsRequested(newTabBarOptions); + break; + case TargetType.HtmlButtons: + const currentHtmlButtonsState = this.state.htmlButtons.customButtons || { customButtons: options.customButtons } as CreateButtonsOptions; + const newHtmlButtonsOptions = { + ...currentHtmlButtonsState, + ...options + }; + this.onUpdateHtmlButtonsRequested(newHtmlButtonsOptions); + break; } } @@ -709,6 +758,25 @@ class WebGroupsStore { }); } + public onRemoveHtmlButtonsRequested = (options: RemoveRequestOptions) => { + if (!this.state.htmlButtons[options.targetId]) { + return; + } + this.setState(s => { + const newHtmlObj = Object.keys(s.htmlButtons).reduce((acc, targetId) => { + if (targetId != options.targetId) { + acc[targetId] = s.htmlButtons[targetId]; + } + return acc; + }, {}); + + return { + ...s, + htmlButtons: newHtmlObj + } + }); + } + public onShowCaptionEditorRequested = (targetType: TargetType, targetId: string, text: string) => { if (targetType === TargetType.Group) { this.onShowGroupCaptionEditorRequested(targetId, text);