BUX Component Development Platform

File Download 

<div class="bux-file-download-container" role="list">
    <div class="bux-file-download" role="listitem">

        <a class="bux-file-download__filename" href="#" rel="noopener" download>
            <span class="bux-file-download__icon" aria-hidden="true"></span>
            <span class="bux-file-download__label">Student Handbook</span>
        </a> <span class="bux-file-download__meta">
            <span class="bux-file-download__language">Spanish</span>
            <span class="bux-file-download__type">PDF</span>
            <span class="bux-file-download__size">1.2 MB</span>
        </span>
    </div>
</div>
 
{# Normalize to array if single file #}
{% set file_list = files ?? [{
    link: file_link,
    name: file_name,
    language: file_language,
    type: file_type,
    size: file_size
}] %}

<div class="bux-file-download-container" role="list">
{% for file in file_list %}
    <div class="bux-file-download" role="listitem">
        {% embed '@link' with {
            base_class: 'bux-file-download__filename',
            link_url: file.link,
            attributes: {
                download: true
            }
        }
        %}
        {% block content %}
            <span class="bux-file-download__icon" aria-hidden="true"></span>
            <span class="bux-file-download__label">{{ file.name }}</span>
        {% endblock %}
        {% endembed %}
        <span class="bux-file-download__meta">
            {% if file.language %}
                <span class="bux-file-download__language">{{ file.language }}</span>
            {% endif %}
            <span class="bux-file-download__type">{{ file.type }}</span>
            <span class="bux-file-download__size">{{ file.size }}</span>
        </span>
    </div>
{% endfor %}
</div>
 
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
  • Content: 
    .bux-file-download {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $sp-8;
  line-height: 18px;
  border-top: 2px solid $gray-light-40;
  border-bottom: 2px solid $gray-light-40;

  & + & {
    border-top: none;
  }

  &:hover {
    background-color: #EFF1F2;

    .bux-file-download__label {
      margin-bottom: -2px;
    }
  }

  &__filename {
    font-weight: 700;
    color: $scarlet;
    text-decoration: none;
    max-width: 65%;
    display: flex;
    align-items: flex-start;
    gap: $sp-8;
  }

  &__icon {
    font-size: $ts-sm;
    font-family: $icon;
    font-weight: 400;
    flex-shrink: 0;

    &:before {
      content: "\f015";
    }
  }

  &__meta {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: flex-end;
    column-gap: $sp-16;
    row-gap: $sp-4;
    color: $gray-dark-80;
    font-weight: 700;
    align-self: flex-start;

    @media (max-width: $bp-md) {
      column-gap: $sp-8;
    }
  }

  &__language {
    text-align: right;

    @media (max-width: $bp-md) {
      flex-basis: 100%;
    }
  }
}
  • URL: /components/raw/file-download/_file-download.scss
  • Filesystem Path: src/components/file-download/_file-download.scss
  • Size: 1.1 KB
  • Content: 
    {
    const FILE_DOWNLOAD_SELECTOR = ".bux-file-download";
    const POINTER_MOVE_THRESHOLD = 8;

    const addFileDownloadClickHandling = (container: HTMLElement) => {
        const link = container.querySelector("a");
        if (!link) return;

        container.style.cursor = "pointer";

        link.addEventListener("click", (event) => event.stopPropagation());
        link.addEventListener("pointerdown", (event) => event.stopPropagation());

        let startX = 0;
        let startY = 0;

        container.addEventListener("pointerdown", (event) => {
            if (event.button !== 0) return;

            startX = event.clientX;
            startY = event.clientY;
        });

        container.addEventListener("pointerup", (event) => {
            if (event.button !== 0) return;

            const diffX = Math.abs(event.clientX - startX);
            const diffY = Math.abs(event.clientY - startY);

            if (diffX < POINTER_MOVE_THRESHOLD && diffY < POINTER_MOVE_THRESHOLD) {
                event.preventDefault();
                link.click();
            }
        });
    };

    const downloadCards = document.querySelectorAll(FILE_DOWNLOAD_SELECTOR) as NodeListOf<HTMLElement>;
    for (const element of downloadCards) { addFileDownloadClickHandling(element); }
}
  • URL: /components/raw/file-download/file-download.ts
  • Filesystem Path: src/components/file-download/file-download.ts
  • Size: 1.3 KB

No notes defined.