inspector-component/content-bindings/inspector-assets/InspectorAssetBinding.js

  1. /**
  2. * Asset Inspector
  3. * Visual inspector for webstrate assets
  4. *
  5. * Copyright 2020, 2021 Rolf Bagge, Janus B. Kristensen, CAVI,
  6. * Center for Advanced Visualization and Interaction, Aarhus University
  7. *
  8. * Licensed under the Apache License, Version 2.0 (the "License");
  9. * you may not use this file except in compliance with the License.
  10. * You may obtain a copy of the License at
  11. *
  12. * http://www.apache.org/licenses/LICENSE-2.0
  13. * Unless required by applicable law or agreed to in writing, software
  14. * distributed under the License is distributed on an "AS IS" BASIS,
  15. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16. * See the License for the specific language governing permissions and
  17. * limitations under the License.
  18. **/
  19. /**
  20. * Visual inspector for webstrate assets
  21. * @type type
  22. */
  23. class InspectorAssetBinding {
  24. /**
  25. * Inspects the given TreeNode and if supported, returns a map of inspector elements
  26. * @param {TreeNode} treeNode
  27. * @returns {Cauldron.InspectorElement[]}
  28. */
  29. static inspect(treeNode) {
  30. if(treeNode.type === "AssetNode" || treeNode.type === "AssetContainer") {
  31. let elements = [];
  32. elements.push(new Cauldron.InspectorAssetPreviewElement(treeNode));
  33. elements.push(new Cauldron.InspectorAssetAttributeElement(treeNode, "fileName", "name"));
  34. elements.push(new Cauldron.InspectorAssetAttributeElement(treeNode, "v", "version"));
  35. elements.push(new Cauldron.InspectorAssetAttributeElement(treeNode, "fileSize", "size", true));
  36. elements.push(new Cauldron.InspectorAssetAttributeElement(treeNode, "mimeType", "type"));
  37. let downloadButton = ButtonSystem.ButtonFactory.createButton("Download", {
  38. onAction: ()=>{
  39. EventSystem.triggerEvent("Cauldron.Asset.Download", {
  40. asset: treeNode.context
  41. });
  42. },
  43. style: "outlined",
  44. icon: IconRegistry.createIcon("mdc:get_app"),
  45. });
  46. elements.push(new Cauldron.InspectorHTMLElement(downloadButton.html));
  47. downloadButton.html.style.gridColumn = "1/3";
  48. return elements;
  49. }
  50. return null;
  51. }
  52. }
  53. window.Cauldron.InspectorAssetBinding = InspectorAssetBinding;
  54. Cauldron.CauldronInspector.registerContentBinding(InspectorAssetBinding, 10);
  55. class InspectorAssetAttributeElement extends Cauldron.InspectorElement {
  56. /**
  57. *
  58. * @param {TreeNode} treeNode
  59. * @param {String} attrName
  60. * @param {String} overrideLabel
  61. */
  62. constructor(treeNode, attrName, overrideLabel = null, formatSize = false) {
  63. super();
  64. let self = this;
  65. this.formatSize = formatSize;
  66. this.treeNode = treeNode;
  67. this.attrName = attrName;
  68. this.label = document.createElement("span");
  69. this.label.classList.add("cauldron-inspector-element-label");
  70. this.label.textContent = overrideLabel==null?this.attrName+":":overrideLabel;
  71. this.content = document.createElement("span");
  72. this.content.classList.add("cauldron-inspector-element-field");
  73. this.html.appendChild(this.label);
  74. this.html.appendChild(this.content);
  75. this.handleAssetUpdated = function() {
  76. self.assetUpdated();
  77. };
  78. this.treeNode.registerOnDecoratedCallback(this.handleAssetUpdated);
  79. this.assetUpdated();
  80. }
  81. destroy() {
  82. super.destroy();
  83. this.treeNode.deregisterOnDecoratedCallback(this.handleAssetUpdated);
  84. }
  85. assetUpdated() {
  86. let value = this.treeNode.context[this.attrName];
  87. if(this.formatSize) {
  88. let unit = "B";
  89. value = parseInt(value);
  90. if(value > 1024) {
  91. value /= 1024;
  92. unit = "KiB";
  93. if(value > 1024) {
  94. value /= 1024;
  95. unit = "MiB";
  96. if(value > 1024) {
  97. value /= 1024;
  98. unit = "GiB";
  99. if(value > 1024) {
  100. value /= 1024;
  101. unit = "TiB";
  102. }
  103. }
  104. }
  105. }
  106. value = value.toFixed(2) + " " + unit;
  107. }
  108. this.content.textContent = value;
  109. }
  110. }
  111. window.Cauldron.InspectorAssetAttributeElement = InspectorAssetAttributeElement;
  112. class InspectorAssetPreviewElement extends Cauldron.InspectorElement {
  113. constructor(treeNode) {
  114. super();
  115. let self = this;
  116. this.treeNode = treeNode;
  117. this.handleAssetUpdated = function() {
  118. self.assetUpdated();
  119. };
  120. this.treeNode.registerOnDecoratedCallback(this.handleAssetUpdated);
  121. this.assetUpdated();
  122. this.html.classList.add("inspector-asset");
  123. }
  124. destroy() {
  125. super.destroy();
  126. this.treeNode.deregisterOnDecoratedCallback(this.handleAssetUpdated);
  127. }
  128. assetUpdated() {
  129. while(this.html.firstChild) this.html.firstChild.remove();
  130. let element = null;
  131. switch(this.treeNode.context["mimeType"]){
  132. case "image/svg+xml":
  133. case "image/gif":
  134. case "image/jpeg":
  135. case "image/bmp":
  136. case "image/x-icon":
  137. case "image/png":
  138. element = document.createElement("img");
  139. element.src = location.href.split("?")[0] + this.treeNode.context["fileName"];
  140. break;
  141. case "video/x-matroska":
  142. case "video/quicktime":
  143. case "video/mp4":
  144. case "video/webm":
  145. case "video/opgg":
  146. element = document.createElement("video");
  147. element.src = location.href.split("?")[0] + this.treeNode.context["fileName"];
  148. element.setAttribute("controls", true);
  149. break;
  150. case "audio/mp3":
  151. case "audio/wav":
  152. case "audio/ogg":
  153. case "audio/mpeg":
  154. element = document.createElement("audio");
  155. element.src = location.href.split("?")[0] + this.treeNode.context["fileName"];
  156. element.setAttribute("controls", true);
  157. break;
  158. default:
  159. console.log("Unhandled mimeType:", this.treeNode.context["mimeType"]);
  160. return;
  161. }
  162. element.classList.add("cauldron-inspector-element-asset-preview");
  163. element.setAttribute("tabindex","0");
  164. this.html.appendChild(element);
  165. }
  166. }
  167. window.Cauldron.InspectorAssetPreviewElement = InspectorAssetPreviewElement;