@doenet/doenetml 0.6.0-alpha1

package/src/Core/components/ContentBrowser.js

@@ -0,0 +1,441 @@
+import { cesc } from "../../utils/url";
+import Template from "./Template";
+import BlockComponent from "./abstract/BlockComponent";
+
+export class ContentBrowser extends BlockComponent {
+  constructor(args) {
+    super(args);
+
+    Object.assign(this.actions, {
+      recordVisibilityChange: this.recordVisibilityChange.bind(this),
+      setSelectedItemInd: this.setSelectedItemInd.bind(this),
+    });
+  }
+
+  static componentType = "contentBrowser";
+
+  static renderChildren = true;
+
+  static returnChildGroups() {
+    return [
+      {
+        group: "contentBrowserItems",
+        componentTypes: ["contentBrowserItem"],
+      },
+    ];
+  }
+
+  static returnStateVariableDefinitions() {
+    let stateVariableDefinitions = super.returnStateVariableDefinitions();
+
+    stateVariableDefinitions.itemsByInitial = {
+      additionalStateVariablesDefined: [
+        { variableName: "allInitials", forRenderer: true },
+        { variableName: "firstComponentNameByInitial", forRenderer: true },
+        { variableName: "labelByInd" },
+        { variableName: "indByEscapedComponentName", forRenderer: true },
+      ],
+      returnDependencies: () => ({
+        contentBrowserItems: {
+          dependencyType: "child",
+          childGroups: ["contentBrowserItems"],
+          variableNames: ["label"],
+        },
+      }),
+      definition({ dependencyValues }) {
+        let items = [];
+        let labelByInd = {};
+        let indByEscapedComponentName = {};
+
+        for (let [
+          ind,
+          item,
+        ] of dependencyValues.contentBrowserItems.entries()) {
+          items.push({
+            ind,
+            componentName: item.componentName,
+            label: item.stateValues.label,
+          });
+          labelByInd[ind] = item.stateValues.label;
+          indByEscapedComponentName[cesc(item.componentName)] = ind;
+        }
+
+        items.sort((a, b) =>
+          a.label.toLowerCase().localeCompare(b.label.toLowerCase()),
+        );
+
+        let itemsByInitial = {};
+        let allInitials = [];
+        let firstComponentNameByInitial = {};
+        let initial,
+          initialList = [];
+        for (let item of items) {
+          let newInitial = Array.from(item.label)[0]?.toUpperCase() || "";
+
+          if (newInitial === initial) {
+            initialList.push(item);
+          } else {
+            if (initial) {
+              itemsByInitial[initial] = initialList;
+              allInitials.push(initial);
+            }
+            initial = newInitial;
+            initialList = [item];
+            firstComponentNameByInitial[initial] = item.componentName;
+          }
+        }
+        if (initial) {
+          itemsByInitial[initial] = initialList;
+          allInitials.push(initial);
+        }
+
+        return {
+          setValue: {
+            itemsByInitial,
+            allInitials,
+            firstComponentNameByInitial,
+            labelByInd,
+            indByEscapedComponentName,
+          },
+        };
+      },
+    };
+
+    stateVariableDefinitions.initial = {
+      forRenderer: true,
+      hasEssential: true,
+      returnDependencies: () => ({
+        allInitials: {
+          dependencyType: "stateVariable",
+          variableName: "allInitials",
+        },
+      }),
+      definition({ dependencyValues }) {
+        return {
+          useEssentialOrDefaultValue: {
+            initial: { defaultValue: dependencyValues.allInitials[0] || null },
+          },
+        };
+      },
+      inverseDefinition({ desiredStateVariableValues }) {
+        return {
+          success: true,
+          instructions: [
+            {
+              setEssentialValue: "initial",
+              value: desiredStateVariableValues.initial,
+            },
+          ],
+        };
+      },
+    };
+
+    stateVariableDefinitions.itemInfoForInitial = {
+      forRenderer: true,
+      returnDependencies: () => ({
+        initial: {
+          dependencyType: "stateVariable",
+          variableName: "initial",
+        },
+        itemsByInitial: {
+          dependencyType: "stateVariable",
+          variableName: "itemsByInitial",
+        },
+        selectedItemInd: {
+          dependencyType: "stateVariable",
+          variableName: "selectedItemInd",
+        },
+      }),
+      definition({ dependencyValues }) {
+        return {
+          setValue: {
+            itemInfoForInitial:
+              dependencyValues.itemsByInitial[dependencyValues.initial]?.map(
+                (x) => ({
+                  label: x.label,
+                  ind: x.ind,
+                  componentName: x.componentName,
+                  selected: x.ind === dependencyValues.selectedItemInd,
+                }),
+              ) || [],
+          },
+        };
+      },
+    };
+
+    stateVariableDefinitions.selectedItemInd = {
+      forRenderer: true,
+      hasEssential: true,
+      returnDependencies: () => ({
+        allInitials: {
+          dependencyType: "stateVariable",
+          variableName: "allInitials",
+        },
+        itemsByInitial: {
+          dependencyType: "stateVariable",
+          variableName: "itemsByInitial",
+        },
+      }),
+      definition: ({ dependencyValues }) => ({
+        useEssentialOrDefaultValue: {
+          selectedItemInd: {
+            defaultValue:
+              dependencyValues.itemsByInitial[
+                dependencyValues.allInitials[0]
+              ]?.[0]?.ind || 0,
+          },
+        },
+      }),
+      inverseDefinition({ desiredStateVariableValues }) {
+        return {
+          success: true,
+          instructions: [
+            {
+              setEssentialValue: "selectedItemInd",
+              value: desiredStateVariableValues.selectedItemInd,
+            },
+          ],
+        };
+      },
+    };
+
+    stateVariableDefinitions.selectedItemLabel = {
+      forRenderer: true,
+      returnDependencies: () => ({
+        selectedItemInd: {
+          dependencyType: "stateVariable",
+          variableName: "selectedItemInd",
+        },
+        labelByInd: {
+          dependencyType: "stateVariable",
+          variableName: "labelByInd",
+        },
+      }),
+      definition({ dependencyValues }) {
+        return {
+          setValue: {
+            selectedItemLabel:
+              dependencyValues.labelByInd[dependencyValues.selectedItemInd] ||
+              "",
+          },
+        };
+      },
+    };
+
+    stateVariableDefinitions.selectedItemComponentName = {
+      stateVariablesDeterminingDependencies: ["selectedItemInd"],
+      returnDependencies: ({ stateValues }) => ({
+        contentBrowserItems: {
+          dependencyType: "child",
+          childGroups: ["contentBrowserItems"],
+          childIndices:
+            stateValues.selectedItemInd === null
+              ? []
+              : [stateValues.selectedItemInd],
+        },
+      }),
+      definition({ dependencyValues }) {
+        return {
+          setValue: {
+            selectedItemComponentName:
+              dependencyValues.contentBrowserItems[0]?.componentName || "",
+          },
+        };
+      },
+    };
+
+    stateVariableDefinitions.childIndicesToRender = {
+      returnDependencies: () => ({
+        selectedItemInd: {
+          dependencyType: "stateVariable",
+          variableName: "selectedItemInd",
+        },
+      }),
+      definition({ dependencyValues }) {
+        let childIndicesToRender = [];
+        if (dependencyValues.selectedItemInd >= 0) {
+          childIndicesToRender.push(dependencyValues.selectedItemInd);
+        }
+        return { setValue: { childIndicesToRender } };
+      },
+      markStale: () => ({ updateRenderedChildren: true }),
+    };
+
+    return stateVariableDefinitions;
+  }
+
+  async setSelectedItemInd({
+    ind,
+    actionId,
+    sourceInformation = {},
+    skipRendererUpdate = false,
+  }) {
+    if (!(await this.stateValues.disabled)) {
+      let newLabel = (await this.stateValues.labelByInd)[ind];
+      let newInitial = newLabel?.[0]?.toUpperCase() || "";
+
+      let updateInstructions = [
+        {
+          updateType: "updateValue",
+          componentName: this.componentName,
+          stateVariable: "initial",
+          value: newInitial,
+        },
+        {
+          updateType: "updateValue",
+          componentName: this.componentName,
+          stateVariable: "selectedItemInd",
+          value: ind,
+        },
+      ];
+
+      let event = {
+        verb: "selected",
+        object: {
+          componentName: this.componentName,
+          componentType: this.componentType,
+        },
+        result: {
+          response: ind,
+          responseText: ind.toString(),
+        },
+      };
+
+      await this.coreFunctions.performUpdate({
+        updateInstructions,
+        actionId,
+        sourceInformation,
+        skipRendererUpdate: true,
+        event,
+      });
+
+      return await this.coreFunctions.triggerChainedActions({
+        componentName: this.componentName,
+        actionId,
+        sourceInformation,
+        skipRendererUpdate,
+      });
+    } else {
+      return this.coreFunctions.resolveAction({ actionId });
+    }
+  }
+
+  recordVisibilityChange({ isVisible, actionId }) {
+    this.coreFunctions.requestRecordEvent({
+      verb: "visibilityChanged",
+      object: {
+        componentName: this.componentName,
+        componentType: this.componentType,
+      },
+      result: { isVisible },
+    });
+    this.coreFunctions.resolveAction({ actionId });
+  }
+}
+
+export class ContentBrowserItem extends BlockComponent {
+  static componentType = "contentBrowserItem";
+  static rendererType = "containerBlock";
+
+  static renderChildren = true;
+  static includeBlankStringChildren = true;
+
+  static createAttributesObject() {
+    let attributes = super.createAttributesObject();
+
+    attributes.label = {
+      createComponentOfType: "text",
+      createStateVariable: "label",
+      defaultValue: "Unlabeled",
+      public: true,
+      forRenderer: true,
+    };
+
+    return attributes;
+  }
+
+  static returnSugarInstructions() {
+    let sugarInstructions = super.returnSugarInstructions();
+
+    let addContentBrowserContent = function ({ matchedChildren }) {
+      // wrap all children in a contentBrowserContent
+      let newChildren = [
+        {
+          componentType: "contentBrowserContent",
+          children: matchedChildren,
+        },
+      ];
+
+      return {
+        success: true,
+        newChildren,
+      };
+    };
+    sugarInstructions.push({
+      replacementFunction: addContentBrowserContent,
+    });
+    return sugarInstructions;
+  }
+
+  static returnChildGroups() {
+    return [
+      {
+        group: "anything",
+        componentTypes: ["_base"],
+      },
+    ];
+  }
+
+  static returnStateVariableDefinitions() {
+    let stateVariableDefinitions = super.returnStateVariableDefinitions();
+
+    stateVariableDefinitions.isSelected = {
+      returnDependencies: () => ({
+        selectedComponentName: {
+          dependencyType: "parentStateVariable",
+          variableName: "selectedItemComponentName",
+        },
+      }),
+      definition({ dependencyValues, componentName }) {
+        return {
+          setValue: {
+            isSelected:
+              dependencyValues.selectedComponentName === componentName,
+          },
+        };
+      },
+    };
+
+    return stateVariableDefinitions;
+  }
+}
+
+export class ContentBrowserContent extends Template {
+  static componentType = "contentBrowserContent";
+
+  static createAttributesObject() {
+    let attributes = super.createAttributesObject();
+
+    delete attributes.rendered;
+
+    return attributes;
+  }
+
+  static returnStateVariableDefinitions() {
+    let stateVariableDefinitions = super.returnStateVariableDefinitions();
+
+    stateVariableDefinitions.rendered = {
+      returnDependencies: () => ({
+        parentSelected: {
+          dependencyType: "parentStateVariable",
+          variableName: "isSelected",
+        },
+      }),
+      definition({ dependencyValues }) {
+        return { setValue: { rendered: dependencyValues.parentSelected } };
+      },
+    };
+
+    return stateVariableDefinitions;
+  }
+}

package/src/Core/components/ContentPicker.js

@@ -0,0 +1,263 @@
+import BlockComponent from "./abstract/BlockComponent";
+
+export default class ContentPicker extends BlockComponent {
+  constructor(args) {
+    super(args);
+
+    Object.assign(this.actions, {
+      recordVisibilityChange: this.recordVisibilityChange.bind(this),
+      updateSelectedIndices: this.updateSelectedIndices.bind(this),
+    });
+  }
+
+  static componentType = "contentPicker";
+
+  static renderChildren = true;
+
+  static createAttributesObject() {
+    let attributes = super.createAttributesObject();
+    attributes.separateByTopic = {
+      createComponentOfType: "boolean",
+      createStateVariable: "separateByTopic",
+      defaultValue: false,
+      public: true,
+      forRenderer: true,
+    };
+    attributes.label = {
+      createComponentOfType: "text",
+      createStateVariable: "label",
+      defaultValue: "Select",
+      forRenderer: true,
+    };
+    attributes.defaultTopicLabel = {
+      createComponentOfType: "text",
+      createStateVariable: "defaultTopicLabel",
+      defaultValue: "Other",
+    };
+
+    return attributes;
+  }
+
+  static returnChildGroups() {
+    return [
+      {
+        group: "allChildren",
+        componentTypes: ["_base"],
+      },
+    ];
+  }
+
+  static returnStateVariableDefinitions() {
+    let stateVariableDefinitions = super.returnStateVariableDefinitions();
+
+    stateVariableDefinitions.childrenWithTitle = {
+      returnDependencies: () => ({
+        children: {
+          dependencyType: "child",
+          childGroups: ["allChildren"],
+          variableNames: ["title"],
+          variablesOptional: true,
+        },
+      }),
+      definition({ dependencyValues }) {
+        return {
+          setValue: {
+            childrenWithTitle: dependencyValues.children,
+          },
+        };
+      },
+    };
+
+    stateVariableDefinitions.childInfo = {
+      stateVariablesDeterminingDependencies: [
+        "childrenWithTitle",
+        "separateByTopic",
+      ],
+      additionalStateVariablesDefined: [
+        { variableName: "childrenByTopic", forRenderer: true },
+      ],
+      forRenderer: true,
+      returnDependencies({ stateValues }) {
+        let dependencies = {
+          childrenWithTitle: {
+            dependencyType: "stateVariable",
+            variableName: "childrenWithTitle",
+          },
+          separateByTopic: {
+            dependencyType: "stateVariable",
+            variableName: "separateByTopic",
+          },
+        };
+
+        if (stateValues.separateByTopic) {
+          dependencies.defaultTopicLabel = {
+            dependencyType: "stateVariable",
+            variableName: "defaultTopicLabel",
+          };
+          for (let [ind, child] of stateValues.childrenWithTitle.entries()) {
+            dependencies[`childTopics${ind}`] = {
+              dependencyType: "descendant",
+              ancestorName: child.componentName,
+              componentTypes: ["topic"],
+              variableNames: ["value"],
+              includeNonActiveChildren: true,
+            };
+          }
+        }
+
+        return dependencies;
+      },
+      definition: function ({ dependencyValues }) {
+        let childInfo = [];
+        let childrenByTopic = {};
+        let allLowercaseTopics = {};
+        for (let [ind, child] of dependencyValues.childrenWithTitle.entries()) {
+          let childObject = {
+            componentName: child.componentName,
+            title: child.stateValues.title || "Untitled",
+          };
+          childInfo.push(childObject);
+
+          if (dependencyValues.separateByTopic) {
+            let topicsForChild = dependencyValues[`childTopics${ind}`].map(
+              (x) => x.stateValues.value,
+            );
+            if (topicsForChild.length > 0) {
+              for (let topic of topicsForChild) {
+                let topicLower = topic.toLowerCase();
+                let topicWithCase = allLowercaseTopics[topicLower];
+                if (!topicWithCase) {
+                  topicWithCase = allLowercaseTopics[topicLower] = topic;
+                }
+
+                let childrenWithTopic = childrenByTopic[topicWithCase];
+                if (!childrenWithTopic) {
+                  childrenWithTopic = childrenByTopic[topicWithCase] = [];
+                }
+                childrenWithTopic.push(ind);
+              }
+            } else {
+              let defaultTopic = dependencyValues.defaultTopicLabel;
+              let childrenWithoutTopic = childrenByTopic[defaultTopic];
+              if (!childrenWithoutTopic) {
+                childrenWithoutTopic = childrenByTopic[defaultTopic] = [];
+              }
+              childrenWithoutTopic.push(ind);
+            }
+          }
+        }
+
+        return { setValue: { childInfo, childrenByTopic } };
+      },
+    };
+
+    stateVariableDefinitions.selectedIndices = {
+      hasEssential: true,
+      defaultValue: [1],
+      forRenderer: true,
+      returnDependencies: () => ({}),
+      definition: () => ({
+        useEssentialOrDefaultValue: { selectedIndices: true },
+      }),
+      inverseDefinition({ desiredStateVariableValues }) {
+        let desiredIndices = desiredStateVariableValues.selectedIndices;
+        if (
+          !Array.isArray(desiredIndices) ||
+          !desiredIndices.every((x) => x >= 0)
+        ) {
+          return { success: false };
+        }
+
+        return {
+          success: true,
+          instructions: [
+            {
+              setEssentialValue: "selectedIndices",
+              value: desiredIndices,
+            },
+          ],
+        };
+      },
+    };
+
+    stateVariableDefinitions.childIndicesToRender = {
+      returnDependencies: () => ({
+        selectedIndices: {
+          dependencyType: "stateVariable",
+          variableName: "selectedIndices",
+        },
+      }),
+      definition({ dependencyValues }) {
+        return {
+          setValue: {
+            childIndicesToRender: dependencyValues.selectedIndices.map(
+              (x) => x - 1,
+            ),
+          },
+        };
+      },
+      markStale: () => ({ updateRenderedChildren: true }),
+    };
+
+    return stateVariableDefinitions;
+  }
+
+  async updateSelectedIndices({
+    selectedIndices,
+    actionId,
+    sourceInformation = {},
+    skipRendererUpdate = false,
+  }) {
+    if (!(await this.stateValues.disabled)) {
+      let updateInstructions = [
+        {
+          updateType: "updateValue",
+          componentName: this.componentName,
+          stateVariable: "selectedIndices",
+          value: selectedIndices,
+        },
+      ];
+
+      let event = {
+        verb: "selected",
+        object: {
+          componentName: this.componentName,
+          componentType: this.componentType,
+        },
+        result: {
+          response: selectedIndices,
+          responseText: selectedIndices.map((i) => String(i)),
+        },
+      };
+
+      await this.coreFunctions.performUpdate({
+        updateInstructions,
+        actionId,
+        sourceInformation,
+        skipRendererUpdate: true,
+        event,
+      });
+
+      return await this.coreFunctions.triggerChainedActions({
+        componentName: this.componentName,
+        actionId,
+        sourceInformation,
+        skipRendererUpdate,
+      });
+    } else {
+      return this.coreFunctions.resolveAction({ actionId });
+    }
+  }
+
+  recordVisibilityChange({ isVisible, actionId }) {
+    this.coreFunctions.requestRecordEvent({
+      verb: "visibilityChanged",
+      object: {
+        componentName: this.componentName,
+        componentType: this.componentType,
+      },
+      result: { isVisible },
+    });
+    this.coreFunctions.resolveAction({ actionId });
+  }
+}