Source: view/view/Layout.js

  1. /** @module */
  2. /**
  3. * Layout keeps an internal ordered list of div names.
  4. * It creates a parent div to fill with these divs.
  5. * New divs are added according to the order of the names.
  6. * If the new div isn't in the list, then it is added at the end of the parent div.
  7. * @param {String[]} - Names in an ordered list for the layout.
  8. * @constructor
  9. */
  10. export default function Layout(order) {
  11. const self = this
  12. const divsByName = {}
  13. const extraDivs = []
  14. /**
  15. * Adds a new div with a name that should be in Layout's internal ordered list.
  16. * @param {String} name
  17. * @param {HTMLElement} div
  18. */
  19. self.newElement = (name, div) => {
  20. if (order.includes(name)) {
  21. divsByName[name] = div
  22. } else {
  23. extraDivs.push(div)
  24. }
  25. }
  26. /**
  27. * When we're done adding new divs, we return a parent div.
  28. * @returns The parent div containing all other divs in order.
  29. */
  30. self.makeComponent = () => {
  31. const parent = document.createElement('div')
  32. parent.className = 'sandbox'
  33. order.forEach((name) => {
  34. const div = divsByName[name]
  35. if (div !== undefined) {
  36. parent.appendChild(div)
  37. }
  38. })
  39. extraDivs.forEach((div) => {
  40. parent.appendChild(div)
  41. })
  42. return parent
  43. }
  44. }