InspectorShared.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. import Check from "../Core/Check.js";
  2. import defined from "../Core/defined.js";
  3. /**
  4. * A static class with helper functions used by the CesiumInspector and Cesium3DTilesInspector
  5. * @private
  6. */
  7. const InspectorShared = {};
  8. /**
  9. * Creates a checkbox component
  10. * @param {String} labelText The text to display in the checkbox label
  11. * @param {String} checkedBinding The name of the variable used for checked binding
  12. * @param {String} [enableBinding] The name of the variable used for enable binding
  13. * @return {Element}
  14. */
  15. InspectorShared.createCheckbox = function (
  16. labelText,
  17. checkedBinding,
  18. enableBinding
  19. ) {
  20. //>>includeStart('debug', pragmas.debug);
  21. Check.typeOf.string("labelText", labelText);
  22. Check.typeOf.string("checkedBinding", checkedBinding);
  23. //>>includeEnd('debug');
  24. const checkboxContainer = document.createElement("div");
  25. const checkboxLabel = document.createElement("label");
  26. const checkboxInput = document.createElement("input");
  27. checkboxInput.type = "checkbox";
  28. let binding = `checked: ${checkedBinding}`;
  29. if (defined(enableBinding)) {
  30. binding += `, enable: ${enableBinding}`;
  31. }
  32. checkboxInput.setAttribute("data-bind", binding);
  33. checkboxLabel.appendChild(checkboxInput);
  34. checkboxLabel.appendChild(document.createTextNode(labelText));
  35. checkboxContainer.appendChild(checkboxLabel);
  36. return checkboxContainer;
  37. };
  38. /**
  39. * Creates a section element
  40. * @param {Element} panel The parent element
  41. * @param {String} headerText The text to display at the top of the section
  42. * @param {String} sectionVisibleBinding The name of the variable used for visible binding
  43. * @param {String} toggleSectionVisibilityBinding The name of the function used to toggle visibility
  44. * @return {Element}
  45. */
  46. InspectorShared.createSection = function (
  47. panel,
  48. headerText,
  49. sectionVisibleBinding,
  50. toggleSectionVisibilityBinding
  51. ) {
  52. //>>includeStart('debug', pragmas.debug);
  53. Check.defined("panel", panel);
  54. Check.typeOf.string("headerText", headerText);
  55. Check.typeOf.string("sectionVisibleBinding", sectionVisibleBinding);
  56. Check.typeOf.string(
  57. "toggleSectionVisibilityBinding",
  58. toggleSectionVisibilityBinding
  59. );
  60. //>>includeEnd('debug');
  61. const section = document.createElement("div");
  62. section.className = "cesium-cesiumInspector-section";
  63. section.setAttribute(
  64. "data-bind",
  65. `css: { "cesium-cesiumInspector-section-collapsed": !${sectionVisibleBinding} }`
  66. );
  67. panel.appendChild(section);
  68. const sectionHeader = document.createElement("h3");
  69. sectionHeader.className = "cesium-cesiumInspector-sectionHeader";
  70. sectionHeader.appendChild(document.createTextNode(headerText));
  71. sectionHeader.setAttribute(
  72. "data-bind",
  73. `click: ${toggleSectionVisibilityBinding}`
  74. );
  75. section.appendChild(sectionHeader);
  76. const sectionContent = document.createElement("div");
  77. sectionContent.className = "cesium-cesiumInspector-sectionContent";
  78. section.appendChild(sectionContent);
  79. return sectionContent;
  80. };
  81. export default InspectorShared;