<script
  src="{{ 'custom-marquee.js' | asset_url }}"
  type="module"
  fetchpriority="low"
></script>

{% assign gap_between_elements = section.settings.gap_between_elements %}

<div id="{{section.settings.id}}" class="{{section.settings.css}}">
<div class="section-background color-{{ section.settings.color_scheme }}"></div>
<div class="section section--{{ section.settings.section_width }} color-{{ section.settings.color_scheme }}">
<marquee-component
  class="spacing-style gap-style color-{{ section.settings.color_scheme_1 }}"
  style="
    {%- render 'spacing-style', settings: section.settings %};
    {% render 'gap-style', value: gap_between_elements, name: 'marquee-gap' %}
    --marquee-direction: {{ section.settings.movement_direction }};
  "
  data-speed-factor="{{ section.settings.speed_factor }}"
  data-movement-direction="{{ section.settings.movement_direction }}"
>
  <div
    class="marquee__wrapper color-{{ section.settings.color_scheme_1 }}"
    ref="wrapper"
  >
    <div
      class="marquee__content"
      ref="content"
    >
      <div
        class="marquee__repeated-items"
        ref="marqueeItems[]"
      >
        {% content_for 'blocks' %}
      </div>
    </div>
  </div>
</marquee-component>
</div>
</div>

{% stylesheet %}
  marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }
 /* DÉBUT - DÉBLOQUER L'ANIMATION SUR MOBILE */
 /* Code bloquant à masquer */ 
 /*
  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }
*/
  /* Code à mettre à la place */ 
  marquee-component:not([data-disabled]) 
  .marquee__wrapper { animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction); } 

 /* FIN - DÉBLOQUER L'ANIMATION SUR MOBILE */


  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "t:names.marquee",
  "blocks": [
    {
      "type": "text"
    },
    {
      "type": "icon"
    },
    {
      "type": "logo"
    },
    {
      "type": "custom-group"
    },
    {
      "type": "_divider"
    }
  ],
  "settings": [
    {
      "type": "text",
      "id": "id",
      "label": "Ajout d'un ID"
    },
    {
      "type": "text",
      "id": "css",
      "label": "Ajout de class CSS"
    },
    {
      "type": "select",
      "id": "movement_direction",
      "label": "t:settings.motion_direction",
      "options": [
        {
          "value": "reverse",
          "label": "t:options.forward"
        },
        {
          "value": "normal",
          "label": "t:options.reverse"
        }
      ],
      "default": "normal"
    },
    {
      "type": "range",
      "id": "speed_factor",
      "label": "Speed Factor",
      "min": 1,
      "max": 100,
      "step": 1,
      "default": 5
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Nuancier de couleurs - Extérieur",
      "default": "scheme-1"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme_1",
      "label": "Nuancier de couleurs - Intérieur",
      "default": "scheme-1"
    },
    {
      "type": "header",
      "content": "t:content.size"
    },
    {
      "type": "select",
      "id": "section_width",
      "label": "t:settings.width",
      "options": [
        {
          "value": "page-width",
          "label": "t:options.page"
        },
        {
          "value": "full-width",
          "label": "t:options.full"
        }
      ],
      "default": "page-width"
    },
    {
      "type": "header",
      "content": "t:content.padding"
    },
    {
      "type": "range",
      "id": "padding-block-start",
      "label": "t:settings.top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 24
    },
    {
      "type": "range",
      "id": "padding-block-end",
      "label": "t:settings.bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 24
    },
    {
      "type": "range",
      "id": "gap_between_elements",
      "label": "t:settings.gap",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 24
    }
  ],
  "presets": [
    {
      "name": "t:names.marquee_section",
      "category": "Web Artisan - Custom section",
      "blocks": {
        "text": {
          "type": "text",
          "settings": {
            "text": "t:html_defaults.make_things_better",
            "type_preset": "custom",
            "font": "var(--font-body--family)",
            "font_size": "var(--font-size--h2)",
            "line_height": "tight",
            "letter_spacing": "tight",
            "case": "none",
            "wrap": "nowrap",
            "width": "fit-content"
          }
        }
      },
      "block_order": ["text"]
    }
  ]
}
{% endschema %}
