Makes an element fixed position while its within a container.
Makes an element fixed position while its within a container.
odopod
npm install @odopod/odo-affix --saveimport OdoAffix from '@odopod/odo-affix';
const affix = new OdoAffix(document.querySelector('.js-my-sidebar'));Visit the Odo component directory for demos, code examples, and documentation.
All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog and this project adheres to Semantic Versioning.
odo-carousel__slide--behind class was never removed from the slide.passive property in event listener options. Use OdoDevice.HAS_PASSIVE_LISTENERS to check if you can use the third argument of addEventListener as an object. Needed for newer versions of iOS and Chrome which make touchstart and touchmove events on the document passive by default.OdoDevice.HAS_PASSIVE_LISTENERS in ScrollFix to prevent scrolling the page behind the dialog in iOS 11.3+ again.min-width, max-width, min-height, max-height, letter-spacing to numeric props.!default flag to component framework variables so they can be overriden by the consumer.Bumped because OdoDevice is a dependency.
preventDefault() is only used when the expandable is going to be toggled.update() method to which will update the scroll-to offsets for expandable accordions #20.data-expandable-target has been replaced with id. Always give the target/content an id attribute.aria-describedby on the trigger. This isn't necessary when the trigger has content within in.id if they do not have one so that the aria-labelledby attribute on the target/content can reference the correct element.expandableItem.isOpen changed from a getter which checked the existence of a class name to a boolean which is set on open() and close().didMoveOnAxis, isDirectionOnAxis). This caused the carousel to not navigate after dragging.OdoVideo dependency.index.d.ts type definitions.index.d.ts type definitions.CarouselEvent from OdoCarousel (OdoCarousel.CarouselEvent).index.d.ts type definitions.axis property. Use options.axis instead.<button data-expandable-trigger="demo-expand-1">Trigger</button>
<div data-expandable-target="demo-expand-1">Target</div>"module" field in its package.json and a dist/odo-{component}.esm.js file which includes the original import and export to allow tree shaking in bundlers."sideEffects": false to package.json. responsive-classes and share have "sideEffects": true.Element#closest Element#matches, requestAnimationFrame).animation.fadeElement is now private.array.getLongestString. Not used in anything we (odopod) do.device.getTranslate.dom.getFirstElementChild. Use element.firstElementChild instead.dom.getChildren. Use Array.from(element.children) instead.math.getAugmentedRect. The Rect class now includes right and bottom (getter) properties.style.getWindowHeight. Was only an alias for window.innerHeight.onTransitionEnd, for example, you now need to import it like this:import { onTransitionEnd } from '@odopod/odo-helpers';animation.Stepper => Stepperanimation.Classes => animationClassesarray.remove => pullstring.random => randomString.odo-responsive-img--cover => .image-cover.responsive-image-cover => .background-image-cover.ghost-center-wrap, .ghost-center. Use flexbox..table-center-wrap, .table-center. Use flexbox.outline:0 on .unstyled-button:focus.data-class.xs was not defined. data-class.xs is now optional.Element#closest polyfill.Element#closest polyfill.Element#closest polyfill.Element#closest polyfill.Element#closest polyfill.initializeWhenIdle method to initialize modules in a requestIdleCallback.package.json.https links to code.odopod.com in README.md files with http. We don't have that set up yet.grabbable class when the draggable instance is enabled/disabled.setPosition() on the hotspot now that the cached position has been updated.data-position="10.5,62.2".refresh().OdoVideo.ControlsCreator.LABEL.disable() not removing a touchmove event listener, preventing touch devices from scrolling the page when they should have been able to.getComputedStyle returns "none" when a transform has not yet been applied to the element.TRIGGER_CLICKED when an element with the [data-odo-dialog-open] attribute is clicked. The first parameter of the event is the trigger element. defaultDialog.on(OdoDialog.EventType.TRIGGER_CLICKED, function (triggerElement) {
console.log('dialog about to open because you clicked:', triggerElement);
});100vh on the main element makes it taller than it should be when toolbars open.focus() on SVG elements in browsers which don't support that (IE11-)index.d.ts type definitions file for OdoBaseComponent.Add support for pseudo classes and elements. You can define them with ':class-name' or '::element-name'. The old way for visited, hover, active, and focus still work as well as others.
This now works as expected:
{
"':invalid'": {
"border-bottom": "1px solid red"
}
}