Initial commit
This commit is contained in:
18
_includes/helpers/get-icon-svg.html
Normal file
18
_includes/helpers/get-icon-svg.html
Normal file
@@ -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/css/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/css/cb-icons.svg' | relative_url }}#{{ iconId }}"/></svg>{% endif %}
|
||||
53
_includes/helpers/get-icon.js
Normal file
53
_includes/helpers/get-icon.js
Normal file
@@ -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/css/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/css/cb-icons.svg" | relative_url }}#' + iconId + '"/></svg>';
|
||||
} else {
|
||||
// svg as sprite
|
||||
return '<svg class="bi icon-sprite" aria-label="' + iconTitle + '"><use xlink:href="{{ "/assets/css/cb-icons.svg" | relative_url }}#' + iconId + '"/></svg>';
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user