46 lines
1.8 KiB
Plaintext
46 lines
1.8 KiB
Plaintext
{% comment %}
|
|
Renders a visual display element, currently just a swatch. If wrapped in "visual-display-parent" and "visual-display-parent--swatch" classes, this will receive hover and focus states.
|
|
|
|
Add a class of "active" or "disabled" to the parent element to change the state of the visual display.
|
|
|
|
Accepts:
|
|
- type: {String} Can be "colors" or "image", or nothing to represent an empty state.
|
|
- value: {Object} Will be an array of color drops, or image drop, depending on the "type"
|
|
- presentation: {String} Can only be "swatch"
|
|
|
|
Usage:
|
|
{% render 'visual-display', type: value.display.type, value: value.display.value, presentation: filter.presentation %}
|
|
{% endcomment %}
|
|
<div class="visual-display visual-display--presentation-{{ presentation }}{% unless type == "colors" or type == "image" %} empty{% endunless %}">
|
|
{%- case type -%}
|
|
{%- when 'colors' -%}
|
|
{% liquid
|
|
assign size_limit = value.size | at_most: 4
|
|
assign rotation = '0deg'
|
|
if size_limit == 2
|
|
assign rotation = '45deg'
|
|
endif
|
|
|
|
assign angle_increment = 360 | divided_by: size_limit
|
|
assign angle = 0
|
|
%}
|
|
{%- capture conic_gradient -%}
|
|
{%- for color in value limit: size_limit -%}
|
|
{{ color }} {{ angle }}deg{%- assign angle = angle | plus: angle_increment %} {{ angle }}deg{%- unless forloop.last %}, {%- endunless -%}
|
|
{%- endfor -%}
|
|
{%- endcapture -%}
|
|
<div
|
|
class="visual-display__child"
|
|
style="background: conic-gradient({{ conic_gradient }}); transform: rotateZ({{ rotation }});"
|
|
></div>
|
|
{%- when 'image' -%}
|
|
{{
|
|
value
|
|
| image_url: width: 300
|
|
| image_tag: class: 'visual-display__child visual-display__image', alt: value.alt
|
|
}}
|
|
{%- else -%}
|
|
<div class="visual-display__child"></div>
|
|
{%- endcase -%}
|
|
</div>
|