Skip to content

Commit

Permalink
feat: added a new property, clean-up and improve efficiency
Browse files Browse the repository at this point in the history
  • Loading branch information
@andreeapescar
andreeapescar committed Mar 23, 2023
1 parent 944070b commit 2d8e9b2
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 39 deletions.
27 changes: 14 additions & 13 deletions docs/components/pie-author/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,20 @@ The class `pie-loading` will be added to the element while assets are being load

## Properties

| Property | Attribute | Description | Type | Default |
| --------------------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------- |
| `addPreview` | `add-preview` | Adds a preview view which will render the content in another tab as it may appear to a student or instructor. | `boolean` | `false` |
| `addRubric` | `add-rubric` | If set the player will add a rubric authoring interaction to the config | `boolean` | `undefined` |
| `bundleEndpoints` | -- | Provide this property override the default endpoints used by the player to retrieve JS bundles. Must be set before setting the config property. Most users will not need to use this property. | `BundleEndpoints` | `undefined` |
| `bundleHost` | `bundle-host` | Optionally specifies the back-end that builds and hosts javascript bundles for rendering assessment items. This property lets you choose which environment to use, from 'dev' , 'stage' or 'prod' environments. Until 1.0 will default to 'stage'. | `string` | `undefined` |
| `config` | -- | The Pie config model. | `AdvancedItemConfig \| PieContent` | `undefined` |
| `configSettings` | -- | To customize the standard behaviour provided by interaction configuration views you can provide settings key-ed by the package name. e.g. `{ '@pie-element/inline-choice': { promptLabel: 'Item Stem' } }` The settings that are configurable for each authoring view are documented in the `@package-name/docs` folder for each package. | `{ [packageName: string]: Object; }` | `undefined` |
| `defaultComplexRubricModel` | -- | To provide a way to add a default model to complex-rubric | `Object` | `undefined` |
| `disableBundler` | `disable-bundler` | Allows disabling of the default behaviour which is to look up and load the JS bundle that define the Custom Elements used by the item config. This if for advanced use cases when using the pie-player in a container that is managing loading of Custom Elements and Controllers. | `boolean` | `false` |
| `imageSupport` | -- | external providers can set this if they need to upload the assets to the cloud etc. by default we use data urls | `ExternalImageSupport` | `new DataURLImageSupport()` |
| `uploadSoundSupport` | -- | external providers can set this if they need to upload the assets to the cloud etc. by default we use data urls | `ExternalUploadSoundSupport` | `new DataURLUploadSoundSupport()` |
| `version` | `version` | | `string` | `VERSION` |
| Property | Attribute | Description | Type | Default |
| --------------------------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------- |
| `addPreview` | `add-preview` | Adds a preview view which will render the content in another tab as it may appear to a student or instructor. | `boolean` | `false` |
| `addRubric` | `add-rubric` | If set the player will add a rubric authoring interaction to the config | `boolean` | `undefined` |
| `bundleEndpoints` | -- | Provide this property override the default endpoints used by the player to retrieve JS bundles. Must be set before setting the config property. Most users will not need to use this property. | `BundleEndpoints` | `undefined` |
| `bundleHost` | `bundle-host` | Optionally specifies the back-end that builds and hosts javascript bundles for rendering assessment items. This property lets you choose which environment to use, from 'dev' , 'stage' or 'prod' environments. Until 1.0 will default to 'stage'. | `string` | `undefined` |
| `config` | -- | The Pie config model. | `AdvancedItemConfig \| PieContent` | `undefined` |
| `configSettings` | -- | To customize the standard behaviour provided by interaction configuration views you can provide settings key-ed by the package name. e.g. `{ '@pie-element/inline-choice': { promptLabel: 'Item Stem' } }` The settings that are configurable for each authoring view are documented in the `@package-name/docs` folder for each package. | `{ [packageName: string]: Object; }` | `undefined` |
| `defaultComplexRubricModel` | -- | To provide a way to add a default model to complex-rubric | `Object` | `undefined` |
| `disableBundler` | `disable-bundler` | Allows disabling of the default behaviour which is to look up and load the JS bundle that define the Custom Elements used by the item config. This if for advanced use cases when using the pie-player in a container that is managing loading of Custom Elements and Controllers. | `boolean` | `false` |
| `imageSupport` | -- | external providers can set this if they need to upload the assets to the cloud etc. by default we use data urls | `ExternalImageSupport` | `new DataURLImageSupport()` |
| `isInsidePieApiAuthor` | `is-inside-pie-api-author` | If pie-author is used inside pie-api-author component. Do not set it manually. | `boolean` | `false` |
| `uploadSoundSupport` | -- | external providers can set this if they need to upload the assets to the cloud etc. by default we use data urls | `ExternalUploadSoundSupport` | `new DataURLUploadSoundSupport()` |
| `version` | `version` | | `string` | `VERSION` |


## Events
Expand Down
8 changes: 8 additions & 0 deletions src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,10 @@ export namespace Components {
*/
'imageSupport': ExternalImageSupport;
/**
* If pie-author is used inside pie-api-author component. Do not set it manually.
*/
'isInsidePieApiAuthor'?: boolean;
/**
* external providers can set this if they need to upload the assets to the cloud etc. by default we use data urls
*/
'uploadSoundSupport': ExternalUploadSoundSupport;
Expand Down Expand Up @@ -236,6 +240,10 @@ declare namespace LocalJSX {
*/
'imageSupport'?: ExternalImageSupport;
/**
* If pie-author is used inside pie-api-author component. Do not set it manually.
*/
'isInsidePieApiAuthor'?: boolean;
/**
* Emmitted when the content models in the config have been set on the content
*/
'onModelLoaded'?: (event: CustomEvent<any>) => void;
Expand Down
90 changes: 64 additions & 26 deletions src/components/pie-author/pie-author.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,11 @@ export class Author {
*/
@Prop() defaultComplexRubricModel?: Object;

/**
* If pie-author is used inside pie-api-author component. Do not set it manually.
*/
@Prop() isInsidePieApiAuthor?: boolean = false;

pieContentModel: PieContent;

pieLoader = new PieLoader();
Expand Down Expand Up @@ -293,35 +298,22 @@ export class Author {

const pieContentModel = pieContentFromConfig(newValue);

const {
shouldAddComplexRubric,
shouldRemoveComplexRubric,
complexRubricElements
} = complexRubricChecks(pieContentModel, this.configSettings);
const complexRubricCheckedValues = complexRubricChecks(pieContentModel, this.configSettings);
const {shouldAddComplexRubric, shouldRemoveComplexRubric} = complexRubricCheckedValues || {};

// if changes are needed

if (shouldAddComplexRubric || shouldRemoveComplexRubric) {
this.pieContentModel = null;

if (shouldAddComplexRubric) {
// we add complex-rubric to config
const newConfig = await this.addComplexRubric(cloneDeep(pieContentModel));

// and then we reset the config
if (newConfig) {
this.config = this.getNewConfig(newConfig);
}
}

if (shouldRemoveComplexRubric) {
// we remove complex-rubric from config
const newConfig = await this.removeComplexRubricItemTypes(cloneDeep(pieContentModel), complexRubricElements);
const newConfig = await this.getPieContentModelWithToggledComplexRubric({
complexRubricCheckedValues,
pieContentModel
});

// and then we reset the config
if (newConfig) {
this.config = this.getNewConfig(newConfig);
}
// and then we reset the config
if (newConfig) {
this.config = this.getNewConfig(newConfig);
}
} else {
// if there's no change needed, we can proceed with updating the config and loading pie-elements
Expand All @@ -337,6 +329,26 @@ export class Author {
}
}

getPieContentModelWithToggledComplexRubric = async ({complexRubricCheckedValues, pieContentModel}) => {
const {
shouldAddComplexRubric,
shouldRemoveComplexRubric,
complexRubricElements
} = complexRubricCheckedValues || {};

if (shouldAddComplexRubric) {
// we add complex-rubric to config
return this.addComplexRubric(cloneDeep(pieContentModel));
}

if (shouldRemoveComplexRubric) {
// we remove complex-rubric from config
return this.removeComplexRubricItemTypes(cloneDeep(pieContentModel), complexRubricElements);
}

return null;
}

getNewConfig = (newConfig) => {
if (this.isAdvancedItemConfig(this.config)) {
return {
Expand Down Expand Up @@ -492,7 +504,7 @@ export class Author {
}
// Note: cannot use the @Listen decorator as creates bundling problems due
// to `.` in event name.
this.el.addEventListener(ModelUpdatedEvent.TYPE, (e: ModelUpdatedEvent) => {
this.el.addEventListener(ModelUpdatedEvent.TYPE, async (e: ModelUpdatedEvent) => {
// set the internal model
// emit a content-item level event with the model
let rubricChanged;
Expand All @@ -508,10 +520,36 @@ export class Author {
}

if (this._modelLoadedState) {
this.modelUpdated.emit(this.pieContentModel);

if (rubricChanged) {
this.watchConfig(this.config, {});
if (this.isInsidePieApiAuthor) {
// if pie-author is used inside pie-api-author, then what we need is to
// calculate the new pieContentModel and make sure we emit the modelUpdated event with the updated pieContentModel

// first thing, we check what changed (if we have to add or remove complex-rubric)
const complexRubricCheckedValues = complexRubricChecks(this.pieContentModel, this.configSettings);
const {shouldAddComplexRubric, shouldRemoveComplexRubric} = complexRubricCheckedValues || {};

if (shouldAddComplexRubric || shouldRemoveComplexRubric) {
// then, if changes are needed, we make them and save the new contentModel
const newPieContentModel = await this.getPieContentModelWithToggledComplexRubric({
complexRubricCheckedValues,
pieContentModel: this.pieContentModel
});

// last thing to do is to make sure we send the updated pie content model to pie-api-author
// (which listens for this event) who will trigger watchConfig
if (newPieContentModel) {
this.modelUpdated.emit(newPieContentModel);
}
}
} else {
// however, if we only use pie-player-components, just force the call to watchConfig
await this.watchConfig(this.config, {});
}
} else {
// if rubricEnabled did not change, just behave as previously
// (pie-api-author listens for this event and triggers watchConfig)
this.modelUpdated.emit(this.pieContentModel);
}
}
});
Expand Down

0 comments on commit 2d8e9b2

Please sign in to comment.