Revert browse

_includes/helpers/get-icon-svg.html

@@ -0,0 +1,18 @@
+{% comment %}
+
+    Liquid utility to get a theme icon based on display_template or format.
+    returns an svg sprite (in html)
+
+    E.G. --> {% include helpers/get-icon-svg.html template="pdf" type="hidden" %}
+
+    Options: 
+
+    - "template" - the display_template to represent (usually provided from an item metadata "display_template" or "format")
+    - "type" - choose from "thumb" (svg like an image), "hidden" (svg aria-hidden), or "sprite" (svg sprite) (optional, default "sprite")
+
+{%- endcomment -%}
+{%- capture iconId -%}{% if include.template contains 'image' %}icon-image{% elsif include.template contains 'pdf' %}icon-pdf{% elsif include.template contains 'video' %}icon-video{% elsif include.template contains 'audio' %}icon-audio{% elsif include.template contains 'panorama' %}icon-panorama{% elsif include.template contains 'compound' %}icon-compound-object{% elsif include.template contains 'multiple' %}icon-multiple{% elsif include.template contains 'record' %}icon-record{% else %}icon-default{% endif %}{%- endcapture -%}
+{% if include.type == "thumb" %}
+<svg class="bi text-body img-fluid" fill="currentColor" role="img"><title>{{ include.template }} file icon</title><use xlink:href="{{ '/assets/lib/cb-icons.svg' | relative_url }}#{{ iconId }}"/></svg>
+{%- else -%}
+<svg class="bi icon-sprite"{% if include.type == 'hidden' %} aria-hidden="true"{% endif %}><use xlink:href="{{ '/assets/lib/cb-icons.svg' | relative_url }}#{{ iconId }}"/></svg>{% endif %}

_includes/helpers/get-icon.js

@@ -0,0 +1,53 @@
+/* 
+    get a theme icon based on display_template or format 
+    return svg sprite
+*/
+function getIcon(objectTemplate,objectFormat,svgType) {
+    var iconTemplate, iconId, iconTitle;
+    if (objectTemplate && objectTemplate != "") {
+        iconTemplate = objectTemplate;
+    } else if (objectFormat && objectFormat != "") {
+        iconTemplate = objectFormat;
+    } else {
+        iconTemplate = ""
+    }
+    // choose icon
+    if (iconTemplate.includes("image")) {
+        iconId = "icon-image";
+        iconTitle = "image file icon";
+    } else if (iconTemplate.includes("pdf")) {
+        iconId = "icon-pdf";
+        iconTitle = "pdf file icon";
+    } else if (iconTemplate.includes("video")) {
+        iconId = "icon-video";
+        iconTitle = "video file icon";
+    } else if (iconTemplate.includes("audio")) {
+        iconId = "icon-audio";
+        iconTitle = "audio file icon";
+    } else if (iconTemplate.includes("panorama")) {
+        iconId = "icon-panorama";
+        iconTitle = "panorama file icon";
+    } else if (iconTemplate.includes("compound")) {
+        iconId = "icon-compound-object";
+        iconTitle = "compound object icon";
+    } else if (iconTemplate.includes("multiple")) {
+        iconId = "icon-multiple";
+        iconTitle = "multiple object icon";
+    } else if (iconTemplate.includes("record")) {
+        iconId = "icon-record";
+        iconTitle = "record object icon";
+    } else {
+        iconId = "icon-default";
+        iconTitle = "file icon";
+    }
+    if (svgType == "thumb") {
+        // svg sprite as thumb
+        return '<svg class="bi text-body img-fluid" fill="currentColor" role="img"><title>' + iconTitle + '</title><use xlink:href="{{ "/assets/lib/cb-icons.svg" | relative_url }}#' + iconId + '"/></svg>';
+    } else if (svgType == "hidden") {
+        // svg as sprite with aria-hidden
+        return '<svg class="bi icon-sprite" aria-hidden="true"><use xlink:href="{{ "/assets/lib/cb-icons.svg" | relative_url }}#' + iconId + '"/></svg>';
+    } else {
+        // svg as sprite
+        return '<svg class="bi icon-sprite" aria-label="' + iconTitle + '"><use xlink:href="{{ "/assets/lib/cb-icons.svg" | relative_url }}#' + iconId + '"/></svg>';
+    }
+}