ucfopen / Materia

Engage students with easily embedded apps for online courses. Supercharge your course with compelling experiences and game mechanics.
https://ucfopen.github.io/Materia-Docs/
GNU Affero General Public License v3.0
37 stars 32 forks source link

Widget enginecore setHeight and widget height issues #1555

Open clpetersonucf opened 6 months ago

clpetersonucf commented 6 months ago

The widget enginecore has a method called setHeight that allows widgets to dynamically adjust the height of the parent container based on their computed height, via parseInt(window.getComputedStyle(document.documentElement).height, 10)

With the React update, setHeight isn't doing its job properly. This appears to be because we're setting the height of the iframe container from the get-go in the widget-player component:

setAttributes ({
    allowFullScreen: fullscreen != undefined,
    loading: false,
    htmlPath: enginePath + '?' + inst.widget.created_at,
    width: `${inst.widget.width}px`,
    height: `${inst.widget.height}px`
})

Because of this, the widget player never gets to determine its actual height, since it's immediately constrained by the predetermined height set in its install.yaml. Removing the initial height property allows widgets to do the following:

  1. Render based on the height of their contents
  2. Call setHeight in the enginecore to pass this rendered height value to the parent frame
  3. The parent frame height is set based on the rendered height of the widget, instead of a static value

There appears to be a problem with some widget engines, however. I can only assume some of our style changes to widgets over the past 12 months have made certain widgets that should remain a static height suddenly expand beyond the height they're supposed to: examples include Crossword and potentially Matching.

Ideally, we allow setHeight to work the way it's supposed to, and update individual widgets to better manage their own heights given a container with no height restraints.