@media-quest/builder 0.0.1 → 0.0.3

package/src/rulebuilder/jump-to-action-manager.ts

@@ -0,0 +1,33 @@
+import type { RuleInput } from "./RuleInput";
+import { JumpToPageSelectItem } from "./SingleSelectItem";
+
+export class JumpToActionManager {
+    readonly options: ReadonlyArray<JumpToPageSelectItem>;
+    private _selected: JumpToPageSelectItem | false;
+    constructor(
+        private readonly validOptions: RuleInput["_jumpActions"],
+        private readonly initialSelection: string | false | undefined
+    ) {
+        this.options = validOptions.map(JumpToPageSelectItem.create);
+        this._selected = this.findSelected(initialSelection);
+    }
+    get selected(): JumpToPageSelectItem | false {
+        return this._selected;
+    }
+    set selected(selected: JumpToPageSelectItem | false) {
+        this._selected = this.findSelected(selected);
+    }
+    getSelectedPageId(): string | false {
+        return this._selected ? this._selected.data.pageId : false;
+    }
+    private findSelected(value: unknown): JumpToPageSelectItem | false {
+        if (!value) return false;
+        if (value instanceof JumpToPageSelectItem) {
+            return this.options.find((v) => v === value) || false;
+        }
+        if (typeof value === "string") {
+            return this.options.find((v) => v.data.pageId === value) || false;
+        }
+        return false;
+    }
+}

package/src/rulebuilder/multi-select-item.ts

@@ -0,0 +1,70 @@
+import { ExcludeByPageAction, ExcludeByTagAction } from "./RuleAction";
+
+export abstract class MultiSelectItem<T> {
+    private readonly _isSelectedInitially: boolean;
+    private readonly _selectLabel;
+    private readonly _toolTip;
+    private readonly _searchString;
+    public isSelected: boolean;
+    get selectLabel(): string {
+        return this._selectLabel;
+    }
+    get tooltip() {
+        return this._toolTip;
+    }
+
+    get searchString() {
+        return this._searchString;
+    }
+    protected constructor(readonly data: T, isSelected: boolean) {
+        this._isSelectedInitially = isSelected;
+        this.isSelected = isSelected;
+        this._searchString = this.getSearchString();
+        this._toolTip = this.getTooltip();
+        this._selectLabel = this.getSelectLabel();
+    }
+    protected abstract getSelectLabel(): string;
+    protected abstract getTooltip(): string;
+    protected abstract getSearchString(): string;
+}
+
+export class ExcludeByTagSelectItem extends MultiSelectItem<ExcludeByTagAction> {
+    public static readonly create = (tagData: ExcludeByTagAction, isSelected: boolean) => {
+        return new ExcludeByTagSelectItem(tagData, isSelected);
+    };
+    protected constructor(data: ExcludeByTagAction, isSelected: boolean) {
+        super(data, isSelected);
+    }
+    protected getSearchString(): string {
+        return this.data.tag;
+    }
+
+    protected getSelectLabel(): string {
+        return this.data.tag + " (" + this.data.pageCount + ")";
+    }
+
+    protected getTooltip(): string {
+        return this.data.tag + "  (used in " + this.data.pageCount + " pages)";
+    }
+}
+
+export class ExcludeByPageIdSelectItem extends MultiSelectItem<ExcludeByPageAction> {
+    public static create = (ruleActionPage: ExcludeByPageAction, isSelected: boolean) => {
+        return new ExcludeByPageIdSelectItem(ruleActionPage, isSelected);
+    };
+
+    protected constructor(data: ExcludeByPageAction, isSelected: boolean) {
+        super(data, isSelected);
+    }
+    protected getSearchString(): string {
+        return this.data.pageId + this.data.mainText;
+    }
+
+    protected getSelectLabel(): string {
+        return this.data.pageId + " (" + this.data.pageNumber + ")";
+    }
+
+    protected getTooltip(): string {
+        return this.data.mainText;
+    }
+}

package/src/rulebuilder/page-action-manager.ts

@@ -0,0 +1,20 @@
+import type { RuleInput } from "./RuleInput";
+import { ExcludeByPageIdSelectItem } from "./multi-select-item";
+
+export class PageActionManager {
+    private readonly _initialSelection: Set<string>;
+    readonly selectItems: ReadonlyArray<ExcludeByPageIdSelectItem>;
+
+    constructor(readonly validOptions: RuleInput["_pageIdActions"], readonly initialSelection: ReadonlyArray<string>) {
+        this._initialSelection = new Set([...initialSelection]);
+        this.selectItems = validOptions.map((opt) => {
+            const isSelected = this._initialSelection.has(opt.pageId);
+            return ExcludeByPageIdSelectItem.create(opt, isSelected);
+        });
+    }
+
+    getCurrentSelection(): ReadonlyArray<string> {
+        const selected = this.selectItems.filter((item) => item.isSelected).map((itm) => itm.data.pageId);
+        return selected;
+    }
+}

package/src/rulebuilder/tag-action-manager.spec.ts

@@ -0,0 +1,44 @@
+import type { ExcludeByTagAction } from "./RuleAction";
+import { TagActionManager } from "./tag-action-manager";
+
+const opt = (tag: string): ExcludeByTagAction => {
+    return { kind: "exclude-by-tag", tag, pageCount: 2, description: "" };
+};
+
+const t1 = opt("tag1");
+const t2 = opt("tag2");
+const t3 = opt("tag3");
+const t4 = opt("tag4");
+const t5 = opt("tag5");
+const t6 = opt("tag6");
+const allOptions = [t1, t2, t3, t4, t5, t6];
+describe("Builder Rule Tag ", () => {
+    test("Can initialize ExcludeByTagCollection, and filter invalid tags.", () => {
+        const collection = new TagActionManager(allOptions, [t1.tag, "__invalid__tag"]);
+
+        expect(collection).toBeInstanceOf(TagActionManager);
+        const initialTags = collection.getCurrentSelection();
+        const initialTag0 = initialTags[0];
+        expect(initialTag0).toBe(t1.tag);
+        expect(collection.getCurrentSelection().length).toBe(1);
+    });
+
+    test("Will remove duplicate selections.", () => {
+        const initialSelection = [t1.tag, t1.tag, t6.tag];
+        const collection = new TagActionManager(allOptions, initialSelection);
+
+        const initialTags = collection.getCurrentSelection();
+        expect(initialTags[0]).toBe(t1.tag);
+        expect(collection.getCurrentSelection().length).toBe(2);
+    });
+    test("Can update selection.", () => {
+        const initialSelection = [t1.tag, t6.tag];
+        const collection = new TagActionManager(allOptions, initialSelection);
+
+        const initialTags = collection.getCurrentSelection();
+        expect(initialTags[0]).toBe(t1.tag);
+        expect(collection.getCurrentSelection().length).toBe(2);
+        // collection.setTags([t1.tag, t2.tag, t3.tag]);
+        // expect(collection.getTags().length).toBe(3);
+    });
+});

package/src/rulebuilder/tag-action-manager.ts

@@ -0,0 +1,18 @@
+import type { RuleInput } from "./RuleInput";
+import { ExcludeByTagSelectItem } from "./multi-select-item";
+
+export class TagActionManager {
+    private readonly _initialSelection: Set<string>;
+    readonly selectItems: ReadonlyArray<ExcludeByTagSelectItem>;
+    constructor(readonly validOptions: RuleInput["_tagActions"], readonly initialSelection: ReadonlyArray<string>) {
+        this._initialSelection = new Set([...initialSelection]);
+        this.selectItems = validOptions.map((opt) => {
+            const isSelected = this._initialSelection.has(opt.tag);
+            return ExcludeByTagSelectItem.create(opt, isSelected);
+        });
+    }
+    getCurrentSelection(): ReadonlyArray<string> {
+        const selected = this.selectItems.filter((item) => item.isSelected).map((itm) => itm.data.tag);
+        return selected;
+    }
+}

package/src/theme/AbstractThemeCompiler.ts

@@ -0,0 +1,7 @@
+import type { BuilderSchemaDto } from "../Builder-schema";
+import { SchemaDto } from "@media-quest/engine";
+
+export abstract class AbstractThemeCompiler<ThemeSchema> {
+  protected constructor(protected readonly theme: ThemeSchema) {}
+  abstract compile(schema: BuilderSchemaDto): SchemaDto;
+}

package/src/theme/IDefaultTheme.ts

@@ -0,0 +1,178 @@
+import type { CssTheme } from "./css-theme";
+import { DStyle, DCss } from "@media-quest/engine";
+import { IconUrls } from "./icon-urls";
+
+type PStyle = Partial<DStyle>;
+export interface IDefaultTheme {
+  name: string;
+  image: { style: PStyle };
+  videoPlayer: {
+    playButton: {
+      iconUrl: string;
+      css: PStyle;
+      cssDisabled: PStyle;
+      cssEnabled: PStyle;
+    };
+    pauseButton: {
+      iconUrl: string;
+      css: PStyle;
+      cssDisabled: PStyle;
+      cssEnabled: PStyle;
+    };
+    videoElement: {
+      css: PStyle;
+    };
+  };
+  mainText: {
+    noMedia: {
+      text: { css: PStyle; cssDisabled: PStyle; cssEnabled: PStyle };
+      audio: { css: PStyle; cssDisabled: PStyle; cssEnabled: PStyle };
+    };
+    withMedia: {
+      text: { css: PStyle; cssDisabled: PStyle; cssEnabled: PStyle };
+      audio: { css: PStyle; cssDisabled: PStyle; cssEnabled: PStyle };
+    };
+  };
+  // mainTextTheme: BuilderTextTheme;
+  responseButtons: BuilderOptionTheme;
+  nextButtonTheme: BuilderOptionTheme;
+  // mainQuestionText: BuilderTextTheme;
+  dontKnowButtonTheme?: BuilderOptionTheme;
+  buttonThemes?: Array<BuilderOptionTheme>;
+}
+
+export interface BuilderOptionTheme {
+  name: string;
+  div: CssTheme;
+  text1: PStyle;
+  text2?: CssTheme;
+}
+
+namespace BuilderOptionTheme {
+  const GREEN = "#70AD47";
+  const YELLOW = "#FFC000";
+  const ORANGE = "#F4902C";
+  const RED = "#FF0000";
+  const LIGHT_BLUE = "#42719C";
+  const WHITE = "#ffffff";
+  const BLUE = "#2F5597";
+  const BTN_WIDTH = 18.5;
+  const BTN_BORDER_WIDTH = 3;
+  const BTN_BORDER_RADIUS = 10;
+  const BTN_BORDER_STYLE: DStyle["borderStyle"] = "solid";
+  const BTN_HEIGHT = 9.2;
+  const BTN_SHORT_WIDTH = 13.7;
+  const FONT_WEIGHT: DStyle["fontWeight"] = 600;
+  const FONT_SIZE: DCss.Px["value"] = 35;
+
+  export const blueButton = (): BuilderOptionTheme => ({
+    name: "blue-button-theme",
+    div: {
+      css: {
+        backgroundColor: BLUE,
+        borderColor: BLUE,
+        textColor: WHITE,
+        fontSize: { _unit: "px", value: FONT_SIZE },
+        borderWidth: { _unit: "px", value: BTN_BORDER_WIDTH },
+        borderStyle: BTN_BORDER_STYLE,
+        borderRadius: { value: BTN_BORDER_RADIUS, _unit: "px" },
+        padding: { _unit: "px", value: 40 },
+        h: BTN_HEIGHT,
+        w: BTN_WIDTH,
+        x: 10,
+        y: 8,
+        textAlign: "center",
+      },
+      cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
+      cssEnabled: { opacity: 1, cursor: "pointer" },
+    },
+    text1: {
+      y: 50,
+      transform: "translate(0%, 50%)",
+      textColor: WHITE,
+      fontSize: { _unit: "px", value: FONT_SIZE },
+      w: 84,
+      x: 8,
+      fontWeight: FONT_WEIGHT,
+      textAlign: "center",
+    },
+  });
+}
+
+export const DefaultTheme: IDefaultTheme = {
+  name: "default-theme",
+  videoPlayer: {
+    playButton: {
+      iconUrl: IconUrls.playCircleRegular,
+      css: { w: 5, h: 5, y: 48, x: 4 },
+      cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
+      cssEnabled: { opacity: 0.8, cursor: "pointer" },
+    },
+    pauseButton: {
+      iconUrl: IconUrls.pauseSvg,
+      css: { w: 5, h: 5, y: 48, x: 4 },
+      cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
+      cssEnabled: { opacity: 0.8, cursor: "pointer" },
+    },
+    videoElement: { css: { w: 100, h: 45, y: 55, x: 0 } },
+  },
+  image: { style: { h: 50, w: 100, x: 0 } },
+  mainText: {
+    noMedia: {
+      text: {
+        css: {
+          w: 80,
+          y: 27,
+          x: 10,
+          textAlign: "center",
+          textColor: "black",
+          fontSize: { _unit: "px", value: 30 },
+        },
+        cssDisabled: {},
+        cssEnabled: {},
+      },
+      audio: {
+        css: {
+          h: 6,
+          w: 6,
+          x: 4,
+          y: 32,
+          cursor: "pointer",
+          opacity: 0.8,
+          visibility: "visible",
+        },
+        cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
+        cssEnabled: { opacity: 0.8, cursor: "pointer" },
+      },
+    },
+    withMedia: {
+      text: {
+        css: {
+          w: 80,
+          y: 27,
+          x: 10,
+          textAlign: "center",
+          textColor: "black",
+          fontSize: { _unit: "px", value: 30 },
+        },
+        cssDisabled: {},
+        cssEnabled: {},
+      },
+      audio: {
+        css: {
+          h: 6,
+          w: 6,
+          x: 4,
+          y: 32,
+          cursor: "pointer",
+          opacity: 0.8,
+          visibility: "visible",
+        },
+        cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
+        cssEnabled: { opacity: 0.8, cursor: "pointer" },
+      },
+    },
+  },
+  nextButtonTheme: BuilderOptionTheme.blueButton(),
+  responseButtons: BuilderOptionTheme.blueButton(),
+};

package/src/theme/css-theme.ts

@@ -0,0 +1,7 @@
+import { DStyle } from "@media-quest/engine";
+
+export interface CssTheme<S extends Partial<DStyle> = Partial<DStyle>> {
+  css: S;
+  cssEnabled: Partial<DStyle>;
+  cssDisabled: Partial<DStyle>;
+}