No notes defined.
<div aria-labelledby="" class="sds-actionMenu dropdown-menu -reorder">
<div class="dropdown-header">Réglages colonnes</div>
<ul class="list-unstyled">
<li draggable="true">
<div class="d-flex align-items-center dropdown-item justify-content-between">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="entite"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="entite">Entité</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
<div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
</div>
</li>
<li draggable="true">
<div class="d-flex align-items-center dropdown-item justify-content-between">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="groupe"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="groupe">Groupe</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
<div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
</div>
</li>
<li draggable="true">
<div class="d-flex align-items-center dropdown-item justify-content-between">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="equipe"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="equipe">Equipe</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
<div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
</div>
</li>
<li draggable="true">
<div class="d-flex align-items-center dropdown-item justify-content-between">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="Responsable"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="Responsable">Responsable</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
<div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
</div>
</li>
<li draggable="true">
<div class="d-flex align-items-center dropdown-item justify-content-between">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="Activite"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="Activite">Activite</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
<div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
</div>
</li>
<li draggable="true">
<div class="d-flex align-items-center dropdown-item justify-content-between">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="Statut"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="Statut">Statut</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
<div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
</div>
</li>
<li draggable="true">
<div class="d-flex align-items-center dropdown-item justify-content-between">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="ref"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="ref">Réf.</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
<div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
</div>
</li>
<li draggable="true">
<div class="d-flex align-items-center dropdown-item justify-content-between">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="rmajef"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="rmajef">Dernière mise à jour.</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
<div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
</div>
</li>
<li draggable="true">
<div class="d-flex align-items-center dropdown-item justify-content-between">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="creation"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="creation">Date de création</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
<div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
</div>
</li>
</ul>
</div>
<div aria-labelledby="{{ parentID }}" class="{{ namespace }}actionMenu dropdown-menu{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="dropdown-header">Réglages colonnes</div>
<ul class="list-unstyled">
<li draggable="true">
<div class="d-flex align-items-center dropdown-item justify-content-between">
{% render "@checkbox",{
text: "Entité",
labelFor: "entite",
id: "entite"
},true %}
<div class="{{ namespace }}actionMenu__reorder {{ namespace }}icon {{ namespace }}icon-reorder"></div>
</div>
</li>
<li draggable="true">
<div class="d-flex align-items-center dropdown-item justify-content-between">
{% render "@checkbox",{
text: "Groupe",
labelFor: "groupe",
id: "groupe"
},true %}
<div class="{{ namespace }}actionMenu__reorder {{ namespace }}icon {{ namespace }}icon-reorder"></div>
</div>
</li>
<li draggable="true">
<div class="d-flex align-items-center dropdown-item justify-content-between">
{% render "@checkbox",{
text: "Equipe",
labelFor: "equipe",
id: "equipe"
},true %}
<div class="{{ namespace }}actionMenu__reorder {{ namespace }}icon {{ namespace }}icon-reorder"></div>
</div>
</li>
<li draggable="true">
<div class="d-flex align-items-center dropdown-item justify-content-between">
{% render "@checkbox",{
text: "Responsable",
labelFor: "Responsable",
id: "Responsable"
},true %}
<div class="{{ namespace }}actionMenu__reorder {{ namespace }}icon {{ namespace }}icon-reorder"></div>
</div>
</li>
<li draggable="true">
<div class="d-flex align-items-center dropdown-item justify-content-between">
{% render "@checkbox",{
text: "Activite",
labelFor: "Activite",
id: "Activite"
},true %}
<div class="{{ namespace }}actionMenu__reorder {{ namespace }}icon {{ namespace }}icon-reorder"></div>
</div>
</li>
<li draggable="true">
<div class="d-flex align-items-center dropdown-item justify-content-between">
{% render "@checkbox",{
text: "Statut",
labelFor: "Statut",
id: "Statut"
},true %}
<div class="{{ namespace }}actionMenu__reorder {{ namespace }}icon {{ namespace }}icon-reorder"></div>
</div>
</li>
<li draggable="true">
<div class="d-flex align-items-center dropdown-item justify-content-between">
{% render "@checkbox",{
text: "Réf.",
labelFor: "ref",
id: "ref"
},true %}
<div class="{{ namespace }}actionMenu__reorder {{ namespace }}icon {{ namespace }}icon-reorder"></div>
</div>
</li>
<li draggable="true">
<div class="d-flex align-items-center dropdown-item justify-content-between">
{% render "@checkbox",{
text: "Dernière mise à jour.",
labelFor: "maj",
id: "rmajef"
},true %}
<div class="{{ namespace }}actionMenu__reorder {{ namespace }}icon {{ namespace }}icon-reorder"></div>
</div>
</li>
<li draggable="true">
<div class="d-flex align-items-center dropdown-item justify-content-between">
{% render "@checkbox",{
text: "Date de création",
labelFor: "creation",
id: "creation"
},true %}
<div class="{{ namespace }}actionMenu__reorder {{ namespace }}icon {{ namespace }}icon-reorder"></div>
</div>
</li>
</ul>
</div>
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)';
}
})
}
}
/* 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 {
}
}