Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
1 contributor

Users who have contributed to this file

452 lines (381 sloc) 12.1 KB
{%- comment -%} ---------------- THE CSS --------------------- {%- endcomment -%}
{%- assign button_width_small = 28 -%}
{%- assign button_width_large = 32 -%}
{%- assign tooltip_max_width = 320 -%}
{%- assign image_aspect_ratio = section.settings.image.aspect_ratio | default: 1 -%}
{%- assign section_selector = '[data-tooltips="' | append: section.id | append: '"]'-%}
<style>
.tooltips-section {
position: relative;
}
.tooltips-figure {
margin: 0;
}
.tooltips-img {
display: block;
width: 100%;
}
.tooltips-list {
padding: 0 0 0 32px;
list-style: decimal;
}
.tooltip-item {
box-sizing: border-box;
padding: 8px 12px;
}
.tooltip-button {
background: transparent;
width: 100%;
border: 0;
padding: 0;
text-align: left;
z-index: 1;
}
.tooltip-button:focus {
outline: none;
}
.tooltip-index {
border-radius: 50%;
text-align: center;
position: absolute;
padding: 0;
font-size: 14px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
line-height: {{ button_width_small }}px;
width: {{ button_width_small }}px;
}
.tooltip-overlay {
background: #fff;
opacity: 1;
overflow: hidden;
will-change: height;
}
.tooltip-header {
display: none;
}
{{ section_selector }} .tooltip-button:focus .tooltip-index,
{{ section_selector }} .tooltip-button[aria-expanded="true"] .tooltip-index {
box-shadow: 0 0 0 2px {{ section.settings.tooltip_focus_color }};
}
{{ section_selector }} .tooltip-index {
background-color: {{ section.settings.tooltip_background_color }};
color: {{ section.settings.tooltip_color }};
}
{%- for block in section.blocks -%}
{{ section_selector }} .tooltip-item:nth-child({{ forloop.index }}) .tooltip-index {
top: 0px;
margin-top: {{ block.settings.top | divided_by: image_aspect_ratio }}%;
left: {{ block.settings.left }}%;
}
{%- endfor -%}
.tooltip-item .tooltip-overlay:empty {
animation: none;
}
[aria-expanded="true"] ~ .tooltip-overlay {
animation: tooltip-expand 200ms both cubic-bezier(0.4, 0, 0.2, 1);
}
[aria-expanded="false"] ~ .tooltip-overlay {
animation: tooltip-collapse 180ms both cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes tooltip-expand {
0% { height: var(--start-h) }
100% { height: var(--end-h) }
}
@keyframes tooltip-collapse {
0% { height: var(--start-h) }
100% { height: var(--end-h) }
}
@media (prefers-reduced-motion: reduce) {
.tooltip-overlay {
animation-duration: 0s!important;
}
}
@media (min-width: {{ section.settings.breakpoint }}px) {
.tooltips-list {
margin: 0;
padding: 0;
list-style: none;
}
.tooltip-button .tooltip-index {
font-size: 16px;
position: static;
transform: translate(0, 0);
line-height: {{ button_width_large }}px;
width: {{ button_width_large }}px;
}
.tooltip-button {
position: absolute;
padding: 0;
font-size: 16px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: {{ button_width_large }}px;
height: {{ button_width_large }}px;
}
.tooltip-title {
display: none;
}
.tooltip-item {
max-width: {{ tooltip_max_width }}px;
padding: 0;
}
[aria-expanded="true"] ~ .tooltip-overlay {
margin-left: -{{ button_width_large }}px;
z-index: 3;
}
[aria-expanded="true"].tooltip-button {
z-index: 4;
}
.tooltip-overlay:empty {
padding: 0;
opacity: 0;
transform: scale(0, 0);
}
.tooltip-overlay {
max-width: 320px;
padding: 16px 16px 16px 64px;
margin-left: -32px;
border-radius: 2px;
box-shadow: 0 17px 50px 0 rgba(0,0,0,0.19);
transform-origin: top left;
position: absolute;
will-change: opacity, transform;
}
.tooltip-header {
display: block;
}
[aria-expanded="true"] ~ .tooltip-overlay {
animation: tooltip-expand-large 200ms both cubic-bezier(0.4, 0, 0.2, 1);
}
[aria-expanded="false"] ~ .tooltip-overlay {
animation: tooltip-collapse-large 180ms both cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes tooltip-expand-large {
0% { opacity: 0; transform: scale(.2, .2); }
100% { opacity: 1; transform: scale(1, 1); }
}
@keyframes tooltip-collapse-large {
0% { opacity: 1; }
100% { opacity: 0; }
}
{%- for block in section.blocks -%}
{%- assign y = block.settings.top | divided_by: image_aspect_ratio -%}
{%- assign tooltip_selector = '#tooltip-' | append: block.id -%}
{{ tooltip_selector }} .tooltip-button {
top: 0px;
margin-top: {{ y }}%;
left: {{ block.settings.left }}%;
}
{{ tooltip_selector }} .tooltip-overlay {
top: -{{ button_width_large }}px;
margin-top: {{ y }}%;
left: {{ block.settings.left }}%;
}
{{ tooltip_selector }} .tooltip-button .tooltip-index {
margin-top: 0;
}
{%- endfor -%}
}
</style>
{%- comment -%} ---------------- THE NO-JS ------------------- {%- endcomment -%}
<noscript>
<style>
.tooltips-section .tooltips-list {
list-style: decimal;
padding: 24px;
}
.tooltip-item {
position: static;
padding: 16px;
max-width: none;
}
</style>
</noscript>
{%- comment -%} ---------------- THE MARKUP ------------------ {%- endcomment -%}
<div class="tooltips-section" data-tooltips="{{ section.id }}">
<figure class="tooltips-figure">
{%- if section.settings.image == blank -%}
{{ 'image' | placeholder_svg_tag: 'tooltips-picture' }}
{%- else -%}
<picture class="tooltips-picture">
<source srcset="{{ section.settings.image | img_url: '320x' }} 1x,
{{ section.settings.image | img_url: '320x', scale: 2 }} 2x" media="(max-width: 320px)">
<source srcset="{{ section.settings.image | img_url: '420x' }} 1x,
{{ section.settings.image | img_url: '420x', scale: 2 }} 2x" media="(max-width: 420px)">
<source srcset="{{ section.settings.image | img_url: '768x' }} 1x,
{{ section.settings.image | img_url: '768x', scale: 2 }} 2x" media="(max-width: 768px)">
<source srcset="{{ section.settings.image | img_url: '1240x' }} 1x,
{{ section.settings.image | img_url: '1240x', scale: 2 }} 2x" media="(max-width: 1240px)">
<source srcset="{{ section.settings.image | img_url: '1440x' }} 1x,
{{ section.settings.image | img_url: '1440x', scale: 2 }} 2x" media="(max-width: 1440px)">
<source srcset="{{ section.settings.image | img_url: '1660x' }} 1x,
{{ section.settings.image | img_url: '1660x', scale: 2 }} 2x" media="(max-width: 1660px)">
<source srcset="{{ section.settings.image | img_url: '2048x' }} 1x,
{{ section.settings.image | img_url: '2048x', scale: 2 }} 2x" media="(min-width: 1661px)">
<img class="tooltips-img" src="{{ section.settings.image | img_url: '2048x' }}" alt="{{ section.settings.image.alt }}">
</picture>
{%- endif -%}
</figure>
<ol class="tooltips-list" aria-label="{{ section.settings.title }}">
{%- for block in section.blocks -%}
<li class="tooltip-item" id="tooltip-{{ block.id }}">
<button class="tooltip-button"
type="button"
value="{{ block.id }}"
aria-describedby="tooltip-overlay-{{ block.id }}"
aria-label="{{ forloop.index }}, {{ block.settings.title }}"
aria-expanded="false"
data-tooltip-trigger
{{ block.shopify_attributes }} >
<div class="tooltip-index" role="none">{{ forloop.index }}</div>
<strong class="tooltip-title" role="none">{{ block.settings.title }}</strong>
</button>
<aside class="tooltip-overlay" id="tooltip-overlay-{{ block.id }}" data-tooltip-overlay></aside>
<noscript data-tooltip-markup>
<strong class="tooltip-header">{{ block.settings.title }}</strong>
{{ block.settings.content }}
</noscript>
</li>
{%- endfor -%}
</ol>
{%- comment -%} ---------------- THE CONFIG ------------------ {%- endcomment -%}
<script data-tooltips-config type="application/json">
{
"breakpoint": {{ section.settings.breakpoint }},
"sectionId": {{ section.id | json }},
"blocksId": {{ section.blocks | map: 'id' | json }}
}
</script>
</div>
{%- comment -%} ------------------ THE JS -------------------- {%- endcomment -%}
<script src="{{ 'tooltips.js' | asset_url }}" defer="defer"></script>
{%- comment -%} --------------- THEME EDITOR ----------------- {%- endcomment -%}
{%- if section.blocks.last.shopify_attributes != blank -%}
<script>
(function ThemeEditor(SD){
var sectionId = {{ section.id | json }};
if (SD.ThemeEditor[sectionId]) return;
SD.ThemeEditor[sectionId] = 'init';
initEvents(sectionId);
document.addEventListener('shopify:section:load', function(evt) {
if (evt.detail.sectionId !== sectionId) return;
var section = SD[sectionId];
section.init(section.config);
initEvents(sectionId);
});
function initEvents(sectionId) {
var sectionHost = document.querySelector('[data-tooltips="' + sectionId + '"]');
sectionHost.addEventListener('shopify:block:select', toggleSelect);
sectionHost.addEventListener('shopify:block:deselect', toggleSelect);
}
function toggleSelect(evt) {
var sectionId = evt.detail.sectionId;
var blockId = evt.detail.blockId;
var section = SD[sectionId];
evt.type === 'shopify:block:select'
? section.select(blockId)
: section.deselect(blockId)
updateBlocks(section, blockId);
}
function updateBlocks(section, blockId) {
if (section.config.blocksId.indexOf(blockId) === -1) {
section.config.blocksId.push(blockId);
}
}
})(window.SectionsDesign = window.SectionsDesign || {ThemeEditor: []});
</script>
{%- endif -%}
{%- comment -%} ---------------- THE SETTINGS ---------------- {%- endcomment -%}
{% schema %}
{
"name": "Tooltips",
"class": "sd-tooltips",
"settings": [
{
"type": "paragraph",
"content": "Tooltips by Sections.design"
},
{
"type": "image_picker",
"id": "image",
"label": "Main image"
},
{
"type": "color",
"id": "tooltip_color",
"label": "Tooltip text color",
"default": "#ffffff"
},
{
"type": "color",
"id": "tooltip_background_color",
"label": "Tooltip background color",
"default": "#64cbdf"
},
{
"type": "color",
"id": "tooltip_focus_color",
"label": "Tooltip focus color",
"default": "#ff0000"
},
{
"type": "text",
"id": "breakpoint",
"label": "Media query breakpoint",
"default": "768"
}
],
"blocks": [
{
"type": "Tooltip",
"name": "Tooltip",
"settings": [
{
"type": "text",
"id": "title",
"label": "Tooltip",
"default": "Tooltip title"
},
{
"type": "html",
"id": "content",
"label": "Tooltip HTML content",
"default": "I am a tooltip, I provide additional explanatory content and showcase product features."
},
{
"type": "range",
"id": "top",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Top position",
"default": 50
},
{
"type": "range",
"id": "left",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Left position",
"default": 50
}
]
}
],
"presets": [
{
"name": "Tooltips",
"category": "Tooltips by Sections.design",
"blocks": [
{
"type": "Tooltip"
}
]
}
]
}
{% endschema %}
You can’t perform that action at this time.