chore(release): 3.2.1 [CI SKIP]

CHANGELOG.md

@@ -1,3 +1,24 @@
+## [3.2.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.2.0...v3.2.1) (2022-09-24)
+
+
+### Bug Fixes
+
+* **modal:** update showModal types ([#27](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/27)) ([6996e54](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/6996e5424f33467ef5bb93f47614058c127cb3ee))
+
+# [3.2.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.1.4...v3.2.0) (2022-09-20)
+
+
+### Features
+
+* **FooterLegend:** add GamepadEvent ([130dfa2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/130dfa24c51c3a670cca9ebc38e4891618532bef))
+
+## [3.1.4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.1.3...v3.1.4) (2022-09-19)
+
+
+### Bug Fixes
+
+* **License:** update license in package.json ([064c161](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/064c161b6736bb5574f28cb986c5899620fd69fe))
+
 ## [3.1.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.1.2...v3.1.3) (2022-09-18)
 
 

LICENSE

@@ -1,4 +1,4 @@
-                  GNU LESSER GENERAL PUBLIC LICENSE
+                  GNU LESSER GENERAL PUBLIC LICENSE (DECKY-FRONTEND-LIB v1)
                        Version 2.1, February 1999
 
  Copyright (C) 1991, 1999 Free Software Foundation, Inc.
@@ -457,6 +457,24 @@ DAMAGES.
 
                      END OF TERMS AND CONDITIONS
 
+EXCEPTION NOTICE
+
+1. The exception is that you may use, copy, link, modify and distribute
+under your own terms, binary object code versions of works based on the
+Library.
+
+2. If you copy code from files distributed under the terms of the GNU
+General Public Licence or the GNU Library General Public Licence into a
+copy of this library, as this licence permits, the exception does not apply
+to the code that you add in this way.  To avoid misleading anyone as to the
+status of such modified files, you must delete this exception notice from
+such code and/or adjust the licensing conditions notice accordingly.
+
+3. If you write modifications of your own for this library, it is your
+choice whether to permit this exception to apply to your modifications.  If
+you do not wish that, you must delete the exception notice from such code
+and/or adjust the licensing conditions notice accordingly.
+
            How to Apply These Terms to Your New Libraries
 
   If you develop a new library, and you want it to be of the greatest

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "decky-frontend-lib",
-  "version": "3.1.3",
+  "version": "3.2.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "decky-frontend-lib",
-      "version": "3.1.3",
+      "version": "3.2.1",
       "license": "GPL-2.0-or-later",
       "dependencies": {
         "minimist": "^1.2.6"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "decky-frontend-lib",
-  "version": "3.1.3",
+  "version": "3.2.1",
   "description": "A library for building decky plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -30,7 +30,7 @@
     "components"
   ],
   "author": "Jonas Dellinger <jonas@dellinger.dev>",
-  "license": "GPL-2.0-or-later",
+  "license": "LGPL-2.1-with-decky-exceptions",
   "bugs": {
     "url": "https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues"
   },

src/custom-components/ColorPickerModal.tsx

@@ -0,0 +1,163 @@
+import { gamepadSliderClasses, ConfirmModal, SliderField } from "../deck-components";
+import { useState, FC, CSSProperties } from "react";
+
+interface ColorPickerModalProps {
+  closeModal: () => void;
+  onConfirm?(HSLString: string): any;
+  title?: string;
+  defaultH?: number;
+  defaultS?: number;
+  defaultL?: number;
+  defaultA?: number;
+}
+
+export const ColorPickerModal: FC<ColorPickerModalProps> = ({
+  closeModal,
+  onConfirm = () => {},
+  title = "Color Picker",
+  defaultH = 0,
+  defaultS = 100,
+  defaultL = 50,
+  defaultA = 1,
+}) => {
+  const [H, setH] = useState<number>(defaultH);
+  const [S, setS] = useState<number>(defaultS);
+  const [L, setL] = useState<number>(defaultL);
+  const [A, setA] = useState<number>(defaultA);
+
+  const colorPickerCSSVars = {
+    "--decky-color-picker-hvalue": `${H}`,
+    "--decky-color-picker-svalue": `${S}%`,
+    "--decky-color-picker-lvalue": `${L}%`,
+    "--decky-color-picker-avalue": `${A}`,
+  } as CSSProperties;
+
+  return (
+      <ConfirmModal
+        bAllowFullSize
+        onCancel={closeModal}
+        onOK={() => {
+          onConfirm(`hsla(${H}, ${S}%, ${L}%, ${A})`);
+          closeModal();
+        }}
+      >
+        <style>
+        {`
+        /* This removes the cyan track color that is behind the slider head */
+        .ColorPicker_Container .${gamepadSliderClasses.SliderTrack} {
+          --left-track-color: #0000;
+          /* This is for compatibility with the "Colored Toggles" CSSLoader Theme*/
+          --colored-toggles-main-color: #0000;
+        }
+
+        .ColorPicker_HSlider .${gamepadSliderClasses.SliderTrack} {
+          background: linear-gradient(
+            270deg,
+            hsla(360, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(270, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(180, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(90, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(0, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue))
+          );
+        }
+
+        .ColorPicker_SSlider .${gamepadSliderClasses.SliderTrack} {
+          background: linear-gradient(
+            90deg,
+            hsla(var(--decky-color-picker-hvalue), 0%, var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(var(--decky-color-picker-hvalue), 100%, var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue))
+          );
+        }
+
+        .ColorPicker_LSlider .${gamepadSliderClasses.SliderTrack} {
+          background: linear-gradient(
+            90deg,
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), 0%, var(--decky-color-picker-avalue)),
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), 50%, var(--decky-color-picker-avalue)),
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), 100%, var(--decky-color-picker-avalue))
+          );
+        }
+
+        .ColorPicker_ASlider .${gamepadSliderClasses.SliderTrack} {
+          background: linear-gradient(
+            90deg,
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), 0),
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), 1)
+          );
+        }
+        `}
+      </style>
+        <div
+          className="ColorPicker_ColorDisplayContainer"
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "1em",
+            // theres a large header by default on the modal, so this just pushes it up into that unused space
+            marginTop: "-2.5em",
+          }}
+        >
+          <div>
+            <span style={{ fontSize: "1.5em" }}>
+              <b>{title}</b>
+            </span>
+          </div>
+          <div
+            style={{
+              backgroundColor: `hsla(${H}, ${S}%, ${L}%, ${A})`,
+              width: "40px",
+              height: "40px",
+            }}
+          ></div>
+        </div>
+        <div className="ColorPicker_Container" style={colorPickerCSSVars}>
+          <div className="ColorPicker_HSlider">
+            <SliderField
+              showValue
+              editableValue
+              label="Hue"
+              value={H}
+              min={0}
+              max={360}
+              onChange={setH}
+            />
+          </div>
+          <div className="ColorPicker_SSlider">
+            <SliderField
+              showValue
+              editableValue
+              label="Saturation"
+              value={S}
+              min={0}
+              max={100}
+              onChange={setS}
+            />
+          </div>
+          <div className="ColorPicker_LSlider">
+            <SliderField
+              showValue
+              editableValue
+              label="Lightness"
+              value={L}
+              min={0}
+              max={100}
+              onChange={setL}
+            />
+          </div>
+          <div className="ColorPicker_ASlider">
+            <SliderField
+              showValue
+              editableValue
+              label="Alpha"
+              value={A}
+              step={0.1}
+              min={0}
+              max={1}
+              onChange={setA}
+            />
+          </div>
+        </div>
+      </ConfirmModal>
+  );
+};

src/custom-components/index.ts

@@ -1 +1,2 @@
 export * from './SuspensefulImage';
+export * from './ColorPickerModal';

src/deck-components/Button.tsx

@@ -1,8 +1,9 @@
 import { CSSProperties, FC, RefAttributes } from 'react';
 
 import { CommonUIModule } from '../webpack';
+import { FooterLegendProps } from './FooterLegend';
 
-export interface DialogButtonProps extends RefAttributes<HTMLDivElement> {
+export interface DialogButtonProps extends RefAttributes<HTMLDivElement>, FooterLegendProps {
   label?: string;
   style?: CSSProperties;
   className?: string;

src/deck-components/FooterLegend.ts

@@ -1,3 +1,51 @@
+export enum GamepadButton {
+    INVALID,
+    OK,
+    CANCEL,
+    SECONDARY,
+    OPTIONS,
+    BUMPER_LEFT,
+    BUMPER_RIGHT,
+    TRIGGER_LEFT,
+    TRIGGER_RIGHT,
+    DIR_UP,
+    DIR_DOWN,
+    DIR_LEFT,
+    DIR_RIGHT,
+    SELECT,
+    START,
+    LSTICK_CLICK,
+    RSTICK_CLICK,
+    LSTICK_TOUCH,
+    RSTICK_TOUCH,
+    LPAD_TOUCH,
+    LPAD_CLICK,
+    RPAD_TOUCH,
+    RPAD_CLICK,
+    REAR_LEFT_UPPER,
+    REAR_LEFT_LOWER,
+    REAR_RIGHT_UPPER,
+    REAR_RIGHT_LOWER,
+    STEAM_GUIDE,
+    STEAM_QUICK_MENU
+}
+
+export enum NavEntryPositionPreferences {
+    FIRST,
+    LAST,
+    MAINTAIN_X,
+    MAINTAIN_Y,
+    PREFERRED_CHILD
+}
+
+export interface GamepadEventDetail {
+    button: number;
+    is_repeat?: boolean;
+    source: number;
+}
+
+export type GamepadEvent = CustomEvent<GamepadEventDetail>
+
 export interface FooterLegendProps {
     actionDescriptionMap?: unknown;
     onOKActionDescription?: string;
@@ -5,14 +53,14 @@ export interface FooterLegendProps {
     onSecondaryActionDescription?: string;
     onOptionsActionDescription?: string;
     onMenuActionDescription?: string;
-    onButtonDown?: () => void;
-    onButtonUp?: () => void;
-    onOKButton?: () => void;
-    onCancelButton?: () => void;
-    onSecondaryButton?: () => void;
-    onOptionsButton?: () => void;
-    onGamepadDirection?: () => void;
-    onGamepadFocus?: () => void;
-    onGamepadBlur?: () => void;
-    onMenuButton?: () => void;
+    onButtonDown?: (evt: GamepadEvent) => void;
+    onButtonUp?: (evt: GamepadEvent) => void;
+    onOKButton?: (evt: GamepadEvent) => void;
+    onCancelButton?: (evt: GamepadEvent) => void;
+    onSecondaryButton?: (evt: GamepadEvent) => void;
+    onOptionsButton?: (evt: GamepadEvent) => void;
+    onGamepadDirection?: (evt: GamepadEvent) => void;
+    onGamepadFocus?: (evt: GamepadEvent) => void;
+    onGamepadBlur?: (evt: GamepadEvent) => void;
+    onMenuButton?: (evt: GamepadEvent) => void;
 }

src/deck-components/Modal.tsx

@@ -1,9 +1,33 @@
 import { FC, ReactNode } from 'react';
-
 import { findModuleChild } from '../webpack';
 
-// TODO: there is another argument, figure out what it does
-export const showModal: (children: ReactNode, parent?: EventTarget) => void = findModuleChild((m) => {
+// All of the popout options + strTitle are related. Proper usage is not yet known...
+export interface ShowModalProps {
+  browserContext?: unknown; // This is another Deck Object that is yet to be found
+  bForcePopOut?: boolean;
+  bHideActionIcons?: boolean;
+  bHideMainWindowForPopouts?: boolean;
+  bNeverPopOut?: boolean;
+  fnOnClose?: () => void; // Seems to be the same as "closeModal" callback, but only when the modal is a popout. Will no longer work after "Update" invocation!
+  popupHeight?: number;
+  popupWidth?: number;
+  promiseRenderComplete?: Promise<void>; // Invoked once the render is complete. Currently, it seems to be used as image loading success/error callback...
+  strTitle?: string;
+}
+
+export interface ShowModalResult {
+  // This method will not invoke any of the variations of "closeModal" callbacks!
+  Close: () => void;
+
+  // This method will replace the modal element completely and will not update the callback chains,
+  // meaning that "closeModal" and etc. will not automatically close the modal anymore (also "fnOnClose" 
+  // will not be even called upon close anymore)! You have to manually call the "Close" method when, for example, 
+  // the "closeModal" is invoked in the newly updated modal: 
+  //   <ModalRoot closeModal={() => { console.log("ABOUT TO CLOSE"); showModalRes.Close(); }} />
+  Update: (modal: ReactNode) => void;
+}
+
+export const showModal: (modal: ReactNode, parent?: EventTarget, props?: ShowModalProps) => Promise<ShowModalResult> = findModuleChild((m) => {
   if (typeof m !== 'object') return undefined;
   for (let prop in m) {
     if (typeof m[prop] === 'function' && m[prop].toString().includes('bHideMainWindowForPopouts:!0')) {
@@ -46,4 +70,4 @@ export const ModalRoot = findModuleChild((m) => {
       return m[prop];
     }
   }
-}) as FC<ModalRootProps>;
+}) as FC<ModalRootProps>;

src/deck-components/static-classes.ts

@@ -307,9 +307,58 @@ type PlaySectionClasses = Record<
   string
 >;
 
+type GamepadSliderClasses = Record<
+  | "error-shake-duration"
+  | "SliderControlPanelGroup"
+  | "SliderControlAndNotches"
+  | "WithDefaultValue"
+  | "SliderControl"
+  | "Disabled"
+  | "SliderTrack"
+  | "SliderHasNotches"
+  | "SliderTrackDark"
+  | "SliderHandleContainer"
+  | "VerticalLineSliderHandleContainer"
+  | "ParenSliderHandleContainer"
+  | "SliderHandle"
+  | "SliderHandleFocusPop"
+  | "VerticalLineSliderHandle"
+  | "ParenSliderHandle"
+  | "Left"
+  | "SliderControlWithIcon"
+  | "Icon"
+  | "SliderNotchContainer"
+  | "SliderNotch"
+  | "AlignToEnds"
+  | "SliderNotchLabel"
+  | "AlignToLeft"
+  | "AlignToRight"
+  | "SliderNotchTick"
+  | "TickActive"
+  | "LabelText"
+  | "DescriptionValue"
+  | "EditableValue"
+  | "FakeEditableValue"
+  | "RedBorder"
+  | "EditableValueSuffix"
+  | "ErrorShake"
+  | "error-shake"
+  | "CompoundSlider"
+  | "CompoundSliderSubSlider"
+  | "Right"
+  | "CompoundSliderSubSliderLabelContainer"
+  | "CompoundSliderSubSliderLabelPositioner"
+  | "CompoundSliderSubSliderLabel"
+  | "CompoundSliderSubSliderLabelInternal"
+  | "DefaultValueTickContainer"
+  | "DefaultValueTick",
+  string
+>;
+
 export const staticClasses: StaticClasses = findModule((mod) => typeof mod === 'object' && mod.TransitionMenuDelay);
 export const scrollClasses: ScrollClasses = findModule((mod) => typeof mod === 'object' && mod.ScrollPanel && mod.ScrollY);
 export const gamepadDialogClasses: GamepadDialogClasses = findModule((mod) => typeof mod === 'object' && mod.WithFirstRow);
 export const quickAccessControlsClasses: QuickAccessControlsClasses = findModule((mod) => typeof mod === 'object' && mod.PanelSectionRow);
 export const updaterFieldClasses: UpdaterFieldClasses = findModule((mod) => typeof mod === 'object' && mod.PatchNotes && mod.PostedTime);
 export const playSectionClasses: PlaySectionClasses = findModule((mod) => typeof mod === 'object' && mod.MenuButton && mod.MenuActive);
+export const gamepadSliderClasses: GamepadSliderClasses = findModule((mod) => typeof mod === 'object' && mod.SliderTrack && mod.SliderHasNotches);