@media-quest/builder 0.0.29 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@media-quest/builder",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "Builder library for Media-quest schemas",
   "main": "dist/public-api.js",
   "types": "dist/public-api.d.js",
@@ -24,6 +24,6 @@
     "dts": true
   },
   "peerDependencies": {
-    "@media-quest/engine": "0.0.29"
+    "@media-quest/engine": "0.0.31"
   }
 }

package/src/Builder-option.ts

@@ -1,64 +1,62 @@
-import { BuilderObject } from "./BuilderObject";
-import type { BuilderOptionTheme } from "./theme/IDefaultTheme";
-import { DefaultTheme } from "./theme/IDefaultTheme";
-import { AudioFile } from "./media-files";
-import { OptionID } from "./primitives/ID";
-
-export interface BuilderOptionDto {
-  readonly id: OptionID;
-  readonly value: number;
-  readonly label: string;
-  readonly labelAudio?: AudioFile;
-}
-
-export class BuilderOption extends BuilderObject<"builder-question-option", BuilderOptionDto> {
-  readonly objectType = "builder-question-option";
-  id: OptionID;
-  value: number;
-  label = "";
-  private _labelAudioFile: AudioFile | false = false;
-  get labelAudioFile() {
-    return this._labelAudioFile;
-  }
-  set labelAudioFile(audioFile: AudioFile | false) {
-    this._labelAudioFile = audioFile;
-  }
-
-  private constructor(dto: BuilderOptionDto) {
-    super(dto);
-    this.id = dto.id;
-    this.value = dto.value;
-    this.label = dto.label;
-    // this.theme = dto.theme;
-  }
-  public static create(value: number, label: string) {
-    const id = OptionID.create();
-    const dto: BuilderOptionDto = {
-      id,
-      value,
-      label,
-    };
-    const instance = new BuilderOption(dto);
-    return instance;
-  }
-
-  public static fromJson(dto: BuilderOptionDto) {
-    const instance = new BuilderOption(dto);
-    return instance;
-  }
-
-  toJson(): BuilderOptionDto {
-    const dto: BuilderOptionDto = {
-      id: this.id,
-      value: this.value,
-      label: this.label,
-    };
-    return dto;
-  }
-
-  clone(): BuilderOptionDto {
-    const dto = this.toJson();
-    const cloneDto: BuilderOptionDto = { ...dto, id: OptionID.create() };
-    return cloneDto;
-  }
-}
+import { BuilderObject } from "./BuilderObject";
+import { AudioFile } from "./media-files";
+import { OptionID } from "./primitives/ID";
+
+export interface BuilderOptionDto {
+  readonly id: OptionID;
+  readonly value: number;
+  readonly label: string;
+  readonly labelAudio?: AudioFile;
+}
+
+export class BuilderOption extends BuilderObject<"builder-question-option", BuilderOptionDto> {
+  readonly objectType = "builder-question-option";
+  id: OptionID;
+  value: number;
+  label = "";
+  private _labelAudioFile: AudioFile | false = false;
+  get labelAudioFile() {
+    return this._labelAudioFile;
+  }
+  set labelAudioFile(audioFile: AudioFile | false) {
+    this._labelAudioFile = audioFile;
+  }
+
+  private constructor(dto: BuilderOptionDto) {
+    super(dto);
+    this.id = dto.id;
+    this.value = dto.value;
+    this.label = dto.label;
+    // this.theme = dto.theme;
+  }
+  public static create(value: number, label: string) {
+    const id = OptionID.create();
+    const dto: BuilderOptionDto = {
+      id,
+      value,
+      label,
+    };
+    const instance = new BuilderOption(dto);
+    return instance;
+  }
+
+  public static fromJson(dto: BuilderOptionDto) {
+    const instance = new BuilderOption(dto);
+    return instance;
+  }
+
+  toJson(): BuilderOptionDto {
+    const dto: BuilderOptionDto = {
+      id: this.id,
+      value: this.value,
+      label: this.label,
+    };
+    return dto;
+  }
+
+  clone(): BuilderOptionDto {
+    const dto = this.toJson();
+    const cloneDto: BuilderOptionDto = { ...dto, id: OptionID.create() };
+    return cloneDto;
+  }
+}

package/src/Builder-schema.ts

@@ -46,6 +46,8 @@ export interface BuilderSchemaDto {
 
 export class BuilderSchema {
   readonly prefix: SchemaPrefix;
+  public readonly compiler = new DefaultThemeCompiler();
+
   baseHeight = 1300;
   baseWidth = 1024;
   backgroundColor = "#000000";
@@ -287,10 +289,10 @@ export class BuilderSchema {
       }
     });
     const moduleDto = builderSchema.toJson();
-    const imp = new DefaultThemeCompiler();
+    // const imp = new DefaultThemeCompiler();
 
     const codebook = CodeBook.fromSchema(moduleDto);
-    const schema = imp.compile(moduleDto);
+    const schema = this.compiler.compile(moduleDto);
     const schemaConfig = SchemaConfig.fromSchema(moduleDto);
     const output: CompilerOutput = { codebook, schema, schemaConfig };
     return output;

package/src/code-book/codebook.ts

@@ -26,8 +26,16 @@ const fromPage = (
   });
 
   const varId = modulePrefix + "_" + page.prefix;
+  const pageIncludedInSumScoresArray = page.includedInSumScores ?? [];
 
-  const includedInSumScores = page.includedInSumScores.filter((a) => true);
+  const includedInSumScores: SumScoreVariableDto[] = [];
+  pageIncludedInSumScoresArray.forEach((p) => {
+    sumScoreVariables.forEach((ssv) => {
+      if (p.sumScoreVariableId === ssv.id) {
+        includedInSumScores.push(ssv);
+      }
+    });
+  });
 
   const variable: CodeBookQuestionVariable = {
     kind: "codebook-question-variable",
@@ -38,7 +46,7 @@ const fromPage = (
     modulePrefix,
     pagePosition,
     varId,
-    includedInSumScores: [],
+    includedInSumScores,
   };
 
   variables.push(variable);

package/src/public-api.ts

@@ -26,3 +26,4 @@ export * from "./sum-score/sum-score";
 export { SumScoreVariableDto, SumScoreVariable } from "./sum-score/sum-score-variable";
 export { SumScoreAnswer } from "./sum-score/sum-score-answer";
 export { TagCollection } from "./tag/Tag-Collection";
+export * from "./theme/Default-theme";

package/src/theme/Default-theme.ts

@@ -0,0 +1,173 @@
+import { DCss, DStyle, PStyle } from "@media-quest/engine";
+import { IconUrls } from "./icon-urls";
+import { BuilderOptionTheme, IDefaultTheme } from "./IDefault-theme";
+import { CssTheme } from "./css-theme";
+
+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_BORDER_WIDTH = 3;
+  const BTN_BORDER_RADIUS = 10;
+  const BTN_BORDER_STYLE: DStyle["borderStyle"] = "solid";
+  const FONT_WEIGHT: DStyle["fontWeight"] = 600;
+  const FONT_SIZE: DCss.Px["value"] = 50;
+  const BTN_PADDING_LEFT = 40;
+  const BTN_PADDING_TOP = 40;
+
+  const buttonBaseCss = (): CssTheme => ({
+    css: {
+      fontWeight: FONT_WEIGHT,
+      fontSize: { _unit: "px", value: FONT_SIZE },
+      letterSpacing: { _unit: "px", value: 2 },
+      paddingLeft: { _unit: "px", value: BTN_PADDING_LEFT },
+      paddingTop: { _unit: "px", value: BTN_PADDING_TOP },
+      paddingBottom: { _unit: "px", value: BTN_PADDING_TOP },
+      paddingRight: { _unit: "px", value: BTN_PADDING_LEFT },
+      borderRadius: { _unit: "px", value: BTN_BORDER_RADIUS },
+      borderWidth: { _unit: "px", value: BTN_BORDER_WIDTH },
+      borderStyle: BTN_BORDER_STYLE,
+      // boxShadow: "3px 3px gray",
+      position: "relative",
+      display: "block",
+    },
+    cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
+    cssEnabled: { opacity: 1, cursor: "pointer" },
+  });
+
+  export const blueButton = (): BuilderOptionTheme => {
+    const base = buttonBaseCss();
+    const { css, cssEnabled, cssDisabled } = base;
+    const optionTheme: BuilderOptionTheme = {
+      name: "blue-button-theme",
+      normal: {
+        btn: {
+          css: {
+            ...css,
+            backgroundColor: BLUE,
+            borderColor: BLUE,
+            textColor: WHITE,
+          },
+          cssDisabled,
+          cssEnabled,
+        },
+        divider: {},
+        text1: {},
+        text2: {},
+      },
+
+      dontKnow: {
+        btn: {
+          css: {
+            ...css,
+            backgroundColor: WHITE,
+            borderColor: LIGHT_BLUE,
+            textColor: BLUE,
+          },
+          cssDisabled,
+          cssEnabled,
+        },
+        text1: {},
+        text2: {},
+        divider: {},
+      },
+    };
+
+    return optionTheme;
+  };
+}
+
+const textHighTop = 25;
+const textLowTop = 55;
+const audioHighTop = 20;
+const audioLowTop = 55;
+
+const textBase: PStyle = {
+  width: 80,
+  top: textHighTop,
+  left: 10,
+  textAlign: "center",
+  textColor: "black",
+  fontSize: { _unit: "px", value: 40 },
+};
+const textHigh: PStyle = { ...textBase, top: textHighTop };
+const textLow: PStyle = { ...textHigh, top: textLowTop };
+
+const audioBase: PStyle = {
+  height: 6,
+  width: 6,
+  left: 4,
+  top: audioHighTop,
+  cursor: "pointer",
+  opacity: 0.8,
+  visibility: "visible",
+};
+const audioHigh: PStyle = { ...audioBase, top: audioHighTop };
+const audioLow: PStyle = { ...audioBase, top: audioLowTop };
+
+export const DefaultTheme: IDefaultTheme = {
+  name: "default-theme",
+  schemaBackgroundColor: "white",
+  dimensions: { baseHeight: 1300, baseWidth: 1024 },
+  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: { height: 41, top: 3, x: 0 } },
+  },
+  image: { style: { h: 50, w: 100, x: 0 } },
+  mainText: {
+    base: {
+      text: { ...textBase },
+      audio: {
+        iconUrl: IconUrls.volumeUpSvg,
+        css: { ...audioBase },
+        cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
+        cssEnabled: { opacity: 0.8, cursor: "pointer" },
+      },
+    },
+    notMediaHasAudio: {
+      text: { ...textHigh },
+      audio: { ...audioHigh },
+    },
+    hasMediaNotAudio: {
+      text: { ...textHigh },
+    },
+    notMediaNotAudio: { text: { ...textHigh } },
+    hasMediaHasAudio: { text: { ...textLow }, audio: { ...audioLow } },
+  },
+
+  buttonBar: {
+    vibrateMs: false,
+    container: {
+      base: {
+        display: "flex",
+        justifyContent: "space-evenly",
+        position: "absolute",
+        width: 100,
+        height: 15,
+        bottom: 0,
+        left: 0, // h: 10,
+        alignItems: "center",
+        backgroundColor: "yellow",
+      },
+      whenSingle: { justifyContent: "space-evenly" },
+      whenMany: { justifyContent: "space-evenly" },
+    },
+    nextButtonTheme: BuilderOptionTheme.blueButton(),
+    responseButtons: BuilderOptionTheme.blueButton(),
+  },
+};

package/src/theme/IDefault-theme.ts

@@ -0,0 +1,125 @@
+import { DStyle } from "@media-quest/engine";
+import type { CssTheme } from "./css-theme";
+
+type PStyle = Partial<DStyle>;
+export interface IDefaultTheme {
+  name: string;
+  schemaBackgroundColor: string;
+  dimensions: {
+    baseHeight: number;
+    baseWidth: number;
+  };
+
+  pageBackGroundImage?: { url: string; style: PStyle };
+
+  pageBackGround?: { style: PStyle };
+
+  backGroundArea1?: { style: PStyle };
+
+  backGroundArea2?: { style: PStyle };
+
+  backGroundArea3?: { style: PStyle };
+
+  progressBar?: {
+    width: number;
+    height: number;
+    bottom: number;
+    left: number;
+    backgroundStyles: PStyle;
+    progressStyles: PStyle;
+    text?: {
+      style: PStyle;
+      textType: "percent" | "page-progress";
+    };
+  };
+
+  image: { style: PStyle };
+  videoPlayer: {
+    playButton: {
+      iconUrl: string;
+      css: PStyle;
+      cssDisabled: PStyle;
+      cssEnabled: PStyle;
+      text?: { text: string; css: PStyle };
+    };
+
+    buttonBar?: PStyle;
+
+    pauseButton: {
+      iconUrl: string;
+      css: PStyle;
+      cssDisabled: PStyle;
+      cssEnabled: PStyle;
+      text?: { text: string; css: PStyle };
+    };
+
+    replayButton?: {
+      iconUrl: string;
+      css: PStyle;
+      cssDisabled: PStyle;
+      cssEnabled: PStyle;
+      text?: { text: string; css: PStyle };
+    };
+
+    muteButton?: {
+      iconUrl: string;
+      css: PStyle;
+      text?: { text: string; css: PStyle };
+    };
+
+    unMuteButton?: {
+      iconUrl: string;
+      css: PStyle;
+      text?: { text: string; css: PStyle };
+    };
+
+    videoElement: {
+      css: PStyle;
+    };
+  };
+  mainText: {
+    base: {
+      text: PStyle;
+      audio: { css: PStyle; cssDisabled: PStyle; cssEnabled: PStyle; iconUrl: string };
+    };
+
+    notMediaNotAudio: {
+      text: PStyle;
+    };
+
+    hasMediaNotAudio: {
+      text: PStyle;
+    };
+
+    hasMediaHasAudio: {
+      text: PStyle;
+      audio: PStyle;
+    };
+
+    notMediaHasAudio: {
+      text: PStyle;
+      audio: PStyle;
+    };
+  };
+
+  buttonBar: {
+    vibrateMs: number | false;
+    container: { base: PStyle; whenSingle: PStyle; whenMany: PStyle };
+    responseButtons: BuilderOptionTheme;
+    nextButtonTheme: BuilderOptionTheme;
+  };
+  // buttonThemes?: Array<BuilderOptionTheme>;
+}
+
+interface ButtonTheme {
+  btn: CssTheme;
+  divider: PStyle;
+  text1: PStyle;
+  text2: PStyle;
+}
+
+export interface BuilderOptionTheme {
+  name: string;
+  normal: ButtonTheme;
+  dontKnow: ButtonTheme;
+}

package/src/theme/ThemeCompiler.ts

@@ -0,0 +1,10 @@
+import type { BuilderSchemaDto } from "../Builder-schema";
+import { SchemaDto } from "@media-quest/engine";
+
+export interface ThemeCompiler<ThemeSchema> {
+  currentTheme: ThemeSchema;
+  allThemes: ThemeSchema[];
+  setTheme(theme: ThemeSchema): void;
+  // protected constructor(protected readonly theme: ThemeSchema) {}
+  compile(schema: BuilderSchemaDto): SchemaDto;
+}

package/src/theme/default-theme-compiler.spec.ts

@@ -0,0 +1,31 @@
+import { DefaultThemeCompiler } from "./default-theme-compiler";
+import { BuilderSchema } from "../Builder-schema";
+import { SchemaID } from "../primitives/ID";
+import { SchemaPrefix } from "../primitives/schema-prefix";
+import { Theme2 } from "./theme2";
+
+let builder = BuilderSchema.create(
+  SchemaID.create(),
+  "test-schema",
+  SchemaPrefix.fromValueOrThrow("prefix").value,
+);
+
+beforeEach(() => {
+  builder = BuilderSchema.create(
+    SchemaID.create(),
+    "test-schema",
+    SchemaPrefix.fromValueOrThrow("prefix").value,
+  );
+});
+describe("Default Theme compiler works", () => {
+  test("Dimensions from theme is used.", () => {
+    const compiler = new DefaultThemeCompiler();
+    compiler.setTheme(Theme2);
+    builder.baseHeight = 100;
+    builder.baseWidth = 100;
+
+    const compiledSchema = compiler.compile(builder.toJson());
+    expect(compiledSchema.baseHeight).toBe(Theme2.dimensions.baseHeight);
+    expect(compiledSchema.baseWidth).toBe(Theme2.dimensions.baseWidth);
+  });
+});