Skip to content

Contextual Frame

Jump to bottom
ContextualUserInterface edited this page Feb 5, 2018 · 38 revisions

An ember.js component consisting of 9 rectangular containers, capable of containing 9 ember.js components.

Implementation

  • ember.js implementation that supports responsiveness as well as the ability to drop other components into each of the containers, including recursive insertion of instances of this component embedded in the containers.

States

  • All border lines are set to 1 pixel wide.

Balanced

  • The 9 rectangular containers consist of three rows that are each one-third of the object height and three columns that are each one-third of the object width.

Outline

  • Height of the top and bottom rows is set to 32 pixels.
  • Width of the left and right columns is set to 32 pixels.
  • Container E (the center container) consumes the remaining available space.

North

  • Height of the top row is set to one third of the object height.
  • Width of containers A, B, and C are set to one third of the object width.
  • Height of the bottom row is set to 32 pixels.
  • Width of containers D, F, G, and I is set to 32 pixels.
  • Containers E and H consume the remaining available width.
  • Container E consumes the remaining available height.

NorthEast

  • Height of containers A, B, C, F and I are set to one third of the object height.
  • Width of containers A, B, C, F and I are set to one third of the object width.
  • Height of the containers G and H is set to 32 pixels.
  • Width of the containers D and G is set to 32 pixels.
  • Width of containers E and H is set to the remaining available width.
  • Height of containers D and E is set to the remaining available height.

East

  • Width of the right column is set to one third of the object width.
  • Height of containers C, F, and I are set to one third of the object height.
  • Width of the left column is set to 32 pixels.
  • Height of containers A, B, G, and H is set to 32 pixels.
  • Height of containers D and E consume the remaining available height.
  • Width of containers B, E, and H consume the remaining available width.

SouthEast

  • Height of containers C, F, G, H and I are set to one third of the object height.
  • Width of containers C, F, G, H and I are set to one third of the object width.
  • Height of the containers A and B is set to 32 pixels.
  • Width of the containers A and D is set to 32 pixels.
  • Width of containers B and E is set to the remaining available width.
  • Height of containers D and E is set to the remaining available Height.

South

  • Height of the bottom row is set to one third of the object height.
  • Width of containers G, H, and I are set to one third of the object width.
  • Height of the top row is set to 32 pixels.
  • Width of containers A, C, D, and F is set to 32 pixels.
  • Containers B and E consume the remaining available width.
  • Container E consumes the remaining available height.

SouthWest

  • Height of containers A, D, G, H and I are set to one third of the object height.
  • Width of containers A, D, G, H and I are set to one third of the object width.
  • Height of the containers B and C is set to 32 pixels.
  • Width of the containers C and F is set to 32 pixels.
  • Width of containers B and E is set to the remaining available width.
  • Height of containers E and F is set to the remaining available Height.

West

  • Width of the left column is set to one third of the object width.
  • Height of containers A, D, and G are set to one third of the object height.
  • Width of the right column is set to 32 pixels.
  • Height of containers B, C, H, and I is set to 32 pixels.
  • Height of containers E and F consume the remaining available height.
  • Width of containers B, E, and H consume the remaining available width.

NorthWest

  • Height of containers A, B, C, D and G are set to one third of the object height.
  • Width of containers A, B, C, D and G are set to one third of the object width.
  • Height of the containers H and I is set to 32 pixels.
  • Width of the containers F and I is set to 32 pixels.
  • Width of containers E and H is set to the remaining available width.
  • Height of containers E and F is set to the remaining available Height.

Responsive

  • Will scale according to the shape of the parent container.

Functions

  • ChangeState(state) - changes the object state
  • SetBackColor(color) - sets the background color
  • SetBorderColor(color) - sets the border color
  • SetBorderVisibility(bool) - shows the outer border if true, hides it if false. border is initially visible.
  • SetLinesVisibility(bool) - shows the inner lines if true, hides them if false. inner lines are initially invisible.

Acceptance Criteria - Render on a Test Page

Render 11 instances of the object as follows:

  • Render Instance 0 in the page rectangle; ChangeState(Outline); SetLinesVisibility(true).
  • Render Instance 1 in container E of instance 0; ChangeState(Balanced); SetLinesVisibility(true).
  • Render Instance 2 in container A of instance 1; ChangeState(NorthWest); SetLinesVisibility(true).
  • Render Instance 3 in container B of instance 1; ChangeState(North); SetLinesVisibility(true).
  • Render Instance 4 in container C of instance 1; ChangeState(NorthEast); SetLinesVisibility(true).
  • Render Instance 5 in container D of instance 1; ChangeState(West); SetLinesVisibility(true).
  • Render Instance 6 in container E of instance 1; ChangeState(Balanced); SetLinesVisibility(true).
  • Render Instance 7 in container F of instance 1; ChangeState(East); SetLinesVisibility(true).
  • Render Instance 8 in container G of instance 1; ChangeState(SouthWest); SetLinesVisibility(true).
  • Render Instance 9 in container H of instance 1; ChangeState(South); SetLinesVisibility(true).
  • Render Instance 10 in container I of instance 1; ChangeState(SouthEast); SetLinesVisibility(true).

All instances should scale according to the shape of the rectangle of the page, responding dynamically to resize events.

Clone this wiki locally