@media-quest/builder 0.0.40 → 0.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@media-quest/builder",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "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.40"
+    "@media-quest/engine": "0.0.42"
   }
 }

package/src/Builder-option.ts

@@ -56,8 +56,7 @@ export class BuilderOption extends BuilderObject<"builder-question-option", Buil
   }
 
   public static fromJson(dto: BuilderOptionDto) {
-    const instance = new BuilderOption(dto);
-    return instance;
+    return new BuilderOption(dto);
   }
 
   toJson(): BuilderOptionDto {

package/src/Builder-question.spec.ts

@@ -21,6 +21,7 @@ const question2: BuilderQuestionDto = {
       id: "q3-opt1" as OptionID,
       value: 0,
       label: "Nei",
+      cssOverride: {maxWidth: 100}
     },
     {
       id: "q3-opt2" as OptionID,

package/src/Builder-question.ts

@@ -42,8 +42,7 @@ export class BuilderQuestion extends BuilderObject<"builder-question", BuilderQu
   };
 
   public static fromJson(dto: BuilderQuestionDto): BuilderQuestion {
-    const question = new BuilderQuestion(dto);
-    return question;
+    return new BuilderQuestion(dto);
   }
 
   private constructor(dto: BuilderQuestionDto) {

package/src/page/Builder-page-collection.spec.ts

@@ -44,6 +44,7 @@ const pages: BuilderPageDto[] = [
       id: OptionID.create(),
       label: "Neste",
       value: -1,
+      cssOverride: {}
     },
     defaultQuestion: {
       id: QuestionID.create(),
@@ -55,16 +56,19 @@ const pages: BuilderPageDto[] = [
           id: "opt-nei" as OptionID,
           value: 0,
           label: "Nei",
+          cssOverride: {}
         },
         {
           id: "opt-ja" as OptionID,
           value: 1,
           label: "Ja",
+          cssOverride: {}
         },
         {
           id: "opt-vet-ikke" as OptionID,
           value: 9,
           label: "Vet ikke",
+          cssOverride: {}
         },
       ],
     },
@@ -92,6 +96,7 @@ const pages: BuilderPageDto[] = [
       id: "next-button-id-page2" as OptionID,
       label: "Neste",
       value: -1,
+      cssOverride: {}
     },
     defaultQuestion: {
       id: QuestionID.validateOrCreate("default-question-id"),

package/src/theme/IDefault-theme.ts

@@ -1,7 +1,6 @@
-import { DStyle } from "@media-quest/engine";
+import { PStyle } from "@media-quest/engine";
 import type { CssTheme } from "./css-theme";
 
-type PStyle = Partial<DStyle>;
 export interface IDefaultTheme {
   name: string;
   schemaBackgroundColor: string;

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

@@ -11,7 +11,7 @@ import {
   DDivDto,
   DelayTask,
   DElementDto,
-  DImgDto,
+  DImgDto, DStyle,
   DTextDto,
   PageDto,
   PlayAudioTask,
@@ -633,20 +633,25 @@ export class DefaultThemeCompiler implements ThemeCompiler<IDefaultTheme> {
           }
         : { kind: "next-page" };
 
-    let btnStyles =
+    const _btnStyles =
       value === 9 ? t.buttonBar.responseButtons.dontKnow : t.buttonBar.responseButtons.normal;
+    let css: PStyle = DStyle.clone(_btnStyles.btn.css)
+    const cssEnabled = DStyle.clone(_btnStyles.btn.cssEnabled)
+
     if (t.buttonBar.vibrateMs) {
-      onclickAction.vibrateMs = t.buttonBar.vibrateMs;
+      // TODO DO NOT WORK.
+      // onclickAction.vibrateMs = t.buttonBar.vibrateMs;
     }
 
     if(cssOverride) {
-      btnStyles.btn.css = {...btnStyles.btn.css, ...cssOverride}
+      console.log(cssOverride);
+      css = {...css, ...cssOverride}
     }
 
     const btn: DButtonDto = {
       _tag: "button",
       innerText: label,
-      style: { ...btnStyles.btn.css, ...btnStyles.btn.cssEnabled },
+      style: { ...css, ...cssEnabled },
       onClick: onclickAction,
     };
 

package/src/theme/theme2.ts

@@ -4,6 +4,10 @@ import { CssTheme } from "./css-theme";
 import { PStyle } from "@media-quest/engine";
 import { THEME_2_ICONS } from "./icons";
 
+const deepClone = <T>(obj: T): T => {
+  return JSON.parse(JSON.stringify(obj));
+}
+
 const translate = (pos: { x?: number; y?: number }) => {
   const x = pos.x || 0;
   const y = pos.y || 0;
@@ -85,21 +89,26 @@ const BUTTON_BAR_WIDTH = Q_AREA_WIDTH - 2 * W_M3;
 const MAIN_TEXT_WIDE = Q_AREA_WIDTH - 2 * W_M3;
 const MAIN_TEXT_NARROW = MAIN_TEXT_WIDE - AUDIO_ICON_WIDTH - W_M3;
 
-const btnTextBase: PStyle = {
-  fontSize: { _unit: "px", value: 25 },
-  bottom: VIDEO_CONTROLS_BOTTOM + 1.2,
-  zIndex: LAYER_5,
-  width: VIDEO_CONTROLS_WIDTH / 2,
-  textAlign: "center",
-  visibility: "hidden",
-  margin: { _unit: "px", value: 0 },
+// const btnTextBase: PStyle = {
+
   // backgroundColor: Colors.yellow,
-};
+// };
 
-const muteUnmuteText: PStyle = { ...btnTextBase, right: VIDEO_CONTROLS_RIGHT };
-const playPauseText: PStyle = { ...btnTextBase, left: VIDEO_CONTROLS_LEFT };
+const btnTextBaseObj = (): PStyle => {
+  return {
+    fontSize: { _unit: "px", value: 25 },
+    bottom: VIDEO_CONTROLS_BOTTOM + 1.2,
+    zIndex: LAYER_5,
+    width: VIDEO_CONTROLS_WIDTH / 2,
+    textAlign: "center",
+    visibility: "hidden",
+    margin: { _unit: "px", value: 0 },
+  }
+}
+const muteUnmuteText: PStyle = { ...btnTextBaseObj(), right: VIDEO_CONTROLS_RIGHT };
+const playPauseText: PStyle = { ...btnTextBaseObj(), left: VIDEO_CONTROLS_LEFT };
 const replayText: PStyle = {
-  ...btnTextBase,
+  ...btnTextBaseObj(),
   width: VIDEO_CONTROLS_WIDTH,
   left: VIDEO_CONTROLS_LEFT,
   // backgroundColor: Colors.yellow,
@@ -156,8 +165,9 @@ const responseButtonBaseCss = (): CssTheme => ({
     fontSize: { _unit: "px", value: 28 },
     lineHeight: 1.1,
 
-    // TODO Denne angir knappens max-bredde. Default bør være 25.
-    maxWidth: 25,
+    // TODO Skal knappene vokse, med mindre det settes en maksbredde?
+    // maxWidth: 25,
+    // maxWidth: { _unit: "percent", value: 10 },
     minWidth: 12,
     // width: 20,
     // flex: "0 0 auto",
@@ -171,11 +181,11 @@ const responseButtonBaseCss = (): CssTheme => ({
     position: "relative",
     display: "block",
     cursor: "pointer",
-    // maxWidth: { _unit: "percent", value: 10 },
   },
   cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
   cssEnabled: { opacity: 1, cursor: "pointer" },
 });
+
 export const primaryButton = (overridesCss: PStyle): BuilderOptionTheme => {
   const base = responseButtonBaseCss();
   const optionTheme: BuilderOptionTheme = {
@@ -183,8 +193,8 @@ export const primaryButton = (overridesCss: PStyle): BuilderOptionTheme => {
     normal: {
       btn: {
         css: {
-          ...base.css,
-          ...overridesCss,
+          ...deepClone(base.css),
+          ...deepClone(overridesCss),
           backgroundColor: Colors.primary,
           borderColor: Colors.primary,
           textColor: Colors.white,
@@ -200,8 +210,8 @@ export const primaryButton = (overridesCss: PStyle): BuilderOptionTheme => {
     dontKnow: {
       btn: {
         css: {
-          ...base.css,
-          ...overridesCss,
+          ...deepClone(base.css),
+          ...deepClone(overridesCss),
           backgroundColor: Colors.secondary,
           borderColor: Colors.secondary,
           textColor: Colors.primary,
@@ -375,14 +385,15 @@ export const Theme2: IDefaultTheme = {
         bottom: Q_AREA_BOTTOM + H_M3,
         left: Q_AREA_LEFT + W_M3,
         // backgroundColor: "green",
-        gap: { _unit: "px", value: 40 },
+        gap: { _unit: "px", value: 32 },
         alignItems: "stretch",
       },
       whenSingle: { justifyContent: "center" },
       whenMany: { justifyContent: "flex-start" },
     },
 
-    nextButtonTheme: primaryButton({}),
-    responseButtons: primaryButton({}),
+    nextButtonTheme: primaryButton({fontSize: { _unit: "px", value: 28 }, maxWidth: {_unit: "percent", value: 25}}),
+    responseButtons: primaryButton({fontSize: { _unit: "px", value: 28 }, maxWidth: {_unit: "percent", value: 25 }}),
   },
 };
+console.log(Theme2);