{%- capture topInfoBar -%}
<div class="top-bar {% if section.settings.topbarmobile %}small--hide{% endif %}">
<div class="marquee-text page-width{% if section.settings.fullwidth %} fullwidth{% endif %}" id="carousel-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="carousel">
<div class="flex carousel top-info-bar" data-slick='{"slidesToShow": {{ section.settings.grid }},"slidesToScroll": 1, {%- if settings.rtl -%}"rtl": true,{%- endif -%} "infinite": true, "autoplay": true,"arrows": false, "autoplaySpeed": 5000, "responsive":[{"breakpoint": 1024,"settings":{"slidesToShow": 1 }},{"breakpoint": 776,"settings":{"slidesToShow":1 }} ]}' >
{% for block in section.blocks limit: section.blocks.size %}
{% if block.settings.title %}
<div class="flex-item {{ block.settings.align_text}}" {{ block.shopify_attributes }}>
<a href="{{ block.settings.url}}">{% if block.settings.image %}<img src="{{block.settings.image | img_url: '50x' }}" alt="" /> {% endif %}{{ block.settings.title}}</a>
</div>
{% endif %}
{% endfor %}

</div>
</div>
</div>
{%- endcapture -%}
{{ topInfoBar | strip_newlines | remove: " " | remove: " " }}

<style>
{%- if settings.classic_header %}
.template-index #shopify-section-top-information-bar {display:none;}
{%- endif -%}
.top-bar { background:{{section.settings.info_bg}}; }
.top-bar a,
.top-bar { color:{{ section.settings.text_clr}}; font-size:{{section.settings.info_font}}px;}

.top-bar .slick-prev,
.top-bar .slick-next { background:none;}

.top-bar .slick-prev:before,
.top-bar .slick-next:before { color:{{ section.settings.text_clr}}; }
.top-bar .flex-item { padding:7px; text-align:center; }
.top-bar img { display:inline-block; vertical-align:text-bottom; margin-right:8px; }
@media only screen and (min-width:1025px) {
.top-bar .flex-item.left { text-align:left; }
.top-bar .flex-item.center { text-align:center; }
.top-bar .flex-item.right { text-align: right; }
}
@media only screen and (max-width:766px) {
.top-bar .flex { display:block; }
}
</style>


{% schema %}
{
"name": "Top Information Bar",
"class": "index-section",
"max_blocks": 4,
"settings":[
{
"type": "checkbox",
"id": "fullwidth",
"label": "Fullwidth?",
"default": false
},
{
"type":"checkbox",
"id":"topbarmobile",
"label":"Hide in Mobile?",
"default":true,
"info":"Hide this option for mobile view"
},
{
"type": "color",
"id": "info_bg",
"label": "Background",
"default": "#111"
},
{
"type": "color",
"id": "text_clr",
"label": "Text",
"default": "#fff"
},
{
"type": "range",
"id": "info_font",
"label": "Font Size",
"default": 12,
"min": 10,
"max": 16,
"step": 1,
"unit": "px"
}
],
"blocks": [
{
"type": "text_block",
"name": "Column",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Upload Image"
},
{
"type": "textarea",
"id": "title",
"label": "Heading",
"default": "Add a title or tagline",
"info":"use <strong> for bold text, [Find icons here](http:\/\/adornthemes.com\/ad-icons\/)"
},
{
"type": "select",
"id": "align_text",
"label": "Horizontal alignment",
"default": "center",
"options": [
{"value": "left", "label": "Left"},
{"value": "center", "label": "Centered"},
{"value": "right", "label": "Right"}
]
},
{
"type": "url",
"id": "url",
"label": "URL"
}

]
}
]
}
{% endschema %}

<script>

var styleBackup = '', restOfTimeout = 500, currentState = '', freeze = false;
$('.top-info-bar').on('init', function(event, slick, direction){
const observer = new MutationObserver(function(mutationsList, observer){
for(const mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName == 'style' && freeze) {
$('.top-info-bar .slick-track').css('transform', currentState);
}
}
});
observer.observe($('.top-info-bar .slick-track')[0], { attributes: true });
$('.top-info-bar .slick-track').mouseover(function() {
styleBackup = $('.top-info-bar .slick-track').attr('style');
currentState = getComputedStyle($('.top-info-bar .slick-track')[0]).transform;
freeze = true;
$('.top-info-bar').slick('slickPause');
let translateDone = parseFloat(currentState.split(',')[4])*(-1);
let regex = /translate3d\(([^,]*),/gm;
if((m = regex.exec(styleBackup)) !== null) {
let translateNeed = parseFloat(m[1])*(-1);
let slideWidth = $('.top-info-bar .slick-slide').first().width();
let speed = 5000/slideWidth;
restOfTimeout = (translateNeed-translateDone)*speed;
var report = "Should be: "+translateNeed+"\n";
report += "Did on hover moment: "+translateDone+"\n";
report += "Still has to scroll: "+(translateNeed-translateDone)+"px\n";
report += "Speed of scroll: "+speed+"ms\n";
report += "Desired timeout: "+restOfTimeout+"ms\n";
$('#report').text(report);
} else {
restOfTimeout = 500;
}
$('.top-info-bar .slick-track').css('transform', currentState);
});
$('.top-info-bar .slick-track').mouseout(function() {
freeze = false;
$('.top-info-bar .slick-track').attr('style', styleBackup.replace('5000ms', restOfTimeout+'ms'));
$('.top-info-bar').slick('slickPlay');
});
});
$('.top-info-bar').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
pauseOnDotsHover:false,
autoplaySpeed: 0,
dots: false,
arrows: false,
infinite: true,
speed: 5000,
pauseOnHover: true,
cssEase: 'linear'
});
});

</script>