Dropdown: Scroll

No notes defined.

<div aria-labelledby="" class="sds-actionMenu dropdown-menu -filters">
    <div class="sds-actionMenu__scrollHeader" data-headroom>
        <div class="sds-actionMenu__scrollSort">
            <div class="dropdown-header">Trier</div>
            <div class="d-flex">
                <button type="button" class="sds-actionMenu__item dropdown-item d-flex">
                    <span class="sds-iconCircle -secondary10" aria-hidden="true">

                        <span class="sds-icon sds-icon-arrowbottom"></span>

                    </span>

                    <span>A-Z</span>
                </button>
                <button type="button" class="sds-actionMenu__item dropdown-item d-flex">
                    <span class="sds-iconCircle -secondary10" aria-hidden="true">

                        <span class="sds-icon sds-icon-arrowtop"></span>

                    </span>

                    <span>Z-A</span>
                </button>
            </div>
            <div class="dropdown-divider"></div>
        </div>
        <div class="sds-actionMenu__scrollNoMarginTop dropdown-header d-flex justify-content-between">
            Filtrer

            <button type="button" class="sds-btn -btnSecondary -btnInverse -noPadding -btnSmall d-none">

                <span class="sds-btn__text">Annuler <span>(1)</span></span>

            </button>

        </div>
        <div class="dropdown-item -isStatic">

            <div class="sds-input -search -hasIcon">
                <input id="" class="sds-input form-control" type="text" placeholder="Search" value="">

                <div class="sds-input__searchActions">
                    <div class="sds-input__clearBtn">
                        <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost -smaller">

                            <span class="sds-icon sds-icon-close"></span>

                        </button>
                    </div>
                    <div class="sds-input__searchBtn">
                        <button type="button" class="sds-btn -btnSecondary -btnSmall" disabled>

                            <span class="sds-btn__text">Rechercher</span>

                        </button>
                    </div>
                </div>

                <div class="sds-input__iconLeft">
                    <span class="sds-icon sds-icon-search"></span>
                </div>

            </div>

        </div>
        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="default"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="default">Sélectionner tout</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>
    </div>
    <div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait0"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait0">item0</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait1"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait1">item1</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait2"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait2">item2</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait3">item3</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait4"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait4">item4</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait5"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait5">item5</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait6"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait6">item6</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait7"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait7">item7</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait8"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait8">item8</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait9"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait9">item9</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait10"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait10">item10</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait11"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait11">item11</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait12"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait12">item12</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait13"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait13">item13</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait14"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait14">item14</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait15"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait15">item15</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait16"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait16">item16</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait17"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait17">item17</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait18"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait18">item18</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait19"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait19">item19</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait20"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait20">item20</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait21"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait21">item21</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait22"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait22">item22</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait23"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait23">item23</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

        <div class="dropdown-item">
            <div class="sds-checkbox custom-control custom-checkbox">
                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait24"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                <label class="custom-control-label" for="luxlait24">item24</label>

                <div class="sds-checkbox__error invalid-feedback">Error message</div>
            </div>
        </div>

    </div>
</div>
 
<div aria-labelledby="{{ parentID }}" class="{{ namespace }}actionMenu dropdown-menu{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}actionMenu__scrollHeader" data-headroom>
		<div class="{{ namespace }}actionMenu__scrollSort">
			<div class="dropdown-header">Trier</div>
			<div class="d-flex">
				<button type="button" class="{{ namespace }}actionMenu__item dropdown-item d-flex">
					{% render "@icon-circle-regular--secondary-10",{icon: "icon-arrowbottom"},true %}
					<span>A-Z</span>
				</button>
				<button type="button" class="{{ namespace }}actionMenu__item dropdown-item d-flex">
					{% render "@icon-circle-regular--secondary-10",{icon: "icon-arrowtop"},true %}
					<span>Z-A</span>
				</button>
			</div>
			<div class="dropdown-divider"></div>
		</div>
		<div class="{{ namespace }}actionMenu__scrollNoMarginTop dropdown-header d-flex justify-content-between">
			Filtrer
			{% if searchActive %}
				{% render "@btn-secondary-inverse--no-padding-small",{
					text: "Annuler <span>(0)</span>"
				},true %}
			{% else %}
				{% render "@btn-secondary-inverse--no-padding-small",{
					classes: ["d-none"],
					text: "Annuler <span>(1)</span>"
				},true %}
			{% endif %}
		</div>
		<div class="dropdown-item -isStatic">
			{% if searchActive %}
				{% render "@input--search-blur-value",{value: "Due dili"},true %}
			{% else %}
				{% render "@input--search" %}
			{% endif %}
		</div>
		<div class="dropdown-item">
			{% render "@checkbox",{text: "Sélectionner tout"},true %}
		</div>
	</div>
	<div>
		{% for i in range(0,25) %}
		<div class="dropdown-item">
			{% render "@checkbox",{
				labelFor: "luxlait"+i,
				id: "luxlait"+i,
				text: "item"+i
			},true %}
		</div>
		{% endfor %}
	</div>
</div>
  • Content: 
    export default class CpbDropdown {

	constructor() {
		this.initDropdownHeadroom();
		this.fixedTableHeaders();
	}

	initDropdownHeadroom () {

		let stickyDropdownHeaders = document.querySelectorAll(".sds-actionMenu__scrollHeader[data-headroom]");

		if (CSS && CSS.supports && CSS.supports("position", "sticky")) {
			if(stickyDropdownHeaders) {

				stickyDropdownHeaders.forEach(function(el) {

					let scrollSortHeight = el.querySelector(".sds-actionMenu__scrollSort").clientHeight;

					let hr = new Headroom(el.parentNode, {
						// vertical offset in px before element is first unpinned
						offset : scrollSortHeight,
						// or you can specify offset individually for up/down scroll

						// scroll tolerance in px before state changes
						tolerance : 0,
						// or you can specify tolerance individually for up/down scroll

						// css classes to apply
						classes : {
							// when element is initialised
							initial : "-headroom",
							// when scrolling up
							pinned : "-headroomPinned",
							// when scrolling down
							unpinned : "-headroomUnpinned",
							// when above offset
							top : "-headroomTop",
							// when below offset
							notTop : "-headroomNotTop",
							// when at bottom of scroll area
							bottom : "-headroomBottom",
							// when not at bottom of scroll area
							notBottom : "-headroomNotBottom",
							// when frozen method has been called
							frozen: "-headroomFrozen",

						},

						scroller: el.parentNode,

						// callback when pinned, `this` is headroom object
						onPin : function() {
							el.style = "transform: translateY(0)";
						},
						// callback when unpinned, `this` is headroom object
						onUnpin : function() {
							el.style = "transform: translateY(-"+ scrollSortHeight +"px)";
						},
						// callback when above offset, `this` is headroom object
						onTop : function() {
						},
						// callback when below offset, `this` is headroom object
						onNotTop : function() {},
						// callback when at bottom of page, `this` is headroom object
						onBottom : function() {},
						// callback when moving away from bottom of page, `this` is headroom object
						onNotBottom : function() {}
					});
					hr.init();
				})
			}
		} else {
			console.log("no position: sticky; support");
		}

	}

	fixedTableHeaders () {
		let element = document.querySelector("thead");
		let parentElement = element.parentElement;
		window.addEventListener('scroll', () => {
			console.log("heyho")
			let coordinates = parentElement.getBoundingClientRect();
			if (coordinates.y < 0) {
				element.style.transform = 'translate3d(0, ' + 'calc(128px + ' + (-coordinates.y) + 'px), 0)';
			} else {
				element.style.transform = 'translate3d(0,0,0)';
			}
		})
	}

}
  • URL: /components/raw/cpb-dropdown/CpbDropdown.js
  • Filesystem Path: components/corporate-bridge/molecules/dropdown/CpbDropdown.js
  • Size: 2.8 KB
  • Content: 
    /* variables specific to current element */

$element-specific-variables: "";

.#{$namespace}actionMenu {

	/* Save root element context for easy access if nesting is needed */

	$self: &;

	/* properties of current element  + media queries */

	/* Pseudo Elements */

	&::before {
	}

	&::after {
	}

	/*
	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
	(e.g: keyframes)
	*/
	@at-root {
	}


	/* children - write selector in full in comments in order to facilitate search */

	// actionMenu__reorder
	&__reorder  {

		// follows same logic as parent

		color: map-deep-get($token-color-brand-map, "secondary", "100");

	}

	&__scrollHeader {

		position: sticky;
		top: -$dropdown-padding-y;
		z-index: z("low");
		@include custom-prop-fallback("background-color","comp-dropdown-background-color");
		margin-top: -$dropdown-padding-y;
		padding-top: $dropdown-padding-y;
		padding-bottom: $dropdown-divider-margin-y;
		margin-bottom: $dropdown-divider-margin-y;

		transition: transform 0.25s linear;

		&::after {

			content: "";
			position: absolute;
			bottom: 0;
			left: $dropdown-item-padding-x;
			right: $dropdown-item-padding-x;
			@include nav-divider($dropdown-divider-bg, 0, true);

		}


	}

	&__scrollSort {
		padding-bottom: $dropdown-divider-margin-y;
	}

	&__scrollNoMarginTop {

		margin-top: 0 !important;

	}


	/* modifiers */

	// actionMenu -altStyle
	&.-filters {

		// follows same logic as base element

		width: 320px;
		overflow-y: auto;
		overscroll-behavior: contain;


	}
	
	&.-reorder {

		width: 320px;

	}

	/* random parent element */
	/* 
	*
	*   Syntax : .randomParentElt & {}
	*
	*/

	/* Pseudo Classes */

	&:hover {
		@media (hover: hover) {

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}
  • URL: /components/raw/cpb-dropdown/_action-menu.scss
  • Filesystem Path: components/corporate-bridge/molecules/dropdown/_action-menu.scss
  • Size: 1.8 KB