@@ -95,7 +95,7 @@ header.scrollTargetSelector = document.querySelector('#scrollingRegion') ## JavaScript -Initialize the header component by adding the `mdk-js-header` class. +Initialize the header component by adding the `js-mdk-header` class. ## Options @@ -185,7 +185,7 @@ The header options can be used programatically (see [Programmatic usage](#progra Get a reference to a header component and interact with the API. ```js -var headerNode = document.querySelector('.mdk-js-header') +var headerNode = document.querySelector('.js-mdk-header') var header = headerNode.mdkHeader // Set the `fixed` option via property assignment @@ -203,7 +203,7 @@ document.documentElement.addEventListener('scroll', function () { Sometimes you need to initialize a header dynamically, for example when using libraries like Vue.js or Angular2 where you need to hook into the application lifecycle. ```js -var headerNode = document.querySelector('.mdk-js-header') +var headerNode = document.querySelector('.js-mdk-header') // Initialize header domFactory.handler.upgradeElement(headerNode, 'mdk-header') diff --git a/src/header/header.js b/src/header/header.js index 3f6e303..28ca604 100644 --- a/src/header/header.js +++ b/src/header/header.js @@ -2,6 +2,9 @@ import { scrollTargetBehavior } from '../scroll-target-behavior' import { scrollEffectBehavior } from '../scroll-effect-behavior' import { handler } from 'dom-factory' +// const RetargetMouseScroll = require('retarget-mouse-scroll') +import {RetargetMouseScroll} from './retarget-mouse-scroll' + // SCROLL EFFECTS import { SCROLL_EFFECTS } from '../scroll-effects' @@ -65,6 +68,12 @@ export const headerComponent = (element) => ({ disabled: { type: Boolean, reflectToAttribute: true + }, + + retargetMouseScroll: { + type: Boolean, + reflectToAttribute: true, + value: true } }, @@ -73,7 +82,7 @@ export const headerComponent = (element) => ({ * @type {Array} */ observers: [ - '_handleFixedPositionedScroll(scrollTargetSelector)', + '_handleFixedPositionedScroll(scrollTarget)', '_reset(condenses, reveals, fixed)' ], @@ -100,11 +109,11 @@ export const headerComponent = (element) => ({ // The distance in pixels the header will be translated to when scrolling _dHeight: 0, - // The offsetTop of `_primaryElement` - _primaryElementTop: 0, + // The offsetTop of `_primary` + _primaryTop: 0, // The element that remains visibile when the header condenses - _primaryElement: null, + _primary: null, // The header's top value used for the `transformY` _top: 0, @@ -123,7 +132,10 @@ export const headerComponent = (element) => ({ * @return {Boolean} */ get transformDisabled () { - return this.disabled || this.element.hasAttribute('transform-disabled') || !this._isPositionedFixed + return this.disabled || + this.element.dataset.transformDisabled || + ! this._isPositionedFixedEmulated || + this.condenses && ! this.willCondense() }, /** @@ -131,7 +143,7 @@ export const headerComponent = (element) => ({ * @param {Boolean} value */ set transformDisabled (value) { - this.element[value ? 'setAttribute' : 'removeAttribute']('transform-disabled', 'transform-disabled') + this.element[value ? 'setAttribute' : 'removeAttribute']('data-transform-disabled', 'data-transform-disabled') }, /** @@ -142,10 +154,18 @@ export const headerComponent = (element) => ({ return this.fixed ? this._dHeight : this._height + 5 }, - get _isPositionedFixed () { + get _isPositionedFixedEmulated () { return this.fixed || this.condenses || this.reveals }, + get _isPositionedAbsolute () { + return window.getComputedStyle(this.element).position === 'absolute' + }, + + get _primaryisPositionedFixed () { + return window.getComputedStyle(this._primary).position === 'fixed' + }, + /** * Returns true if the header will condense based on the size of the header * @return {Boolean} @@ -186,39 +206,43 @@ export const headerComponent = (element) => ({ }, _setupBackgrounds () { - let bgNode = document.createElement('DIV') - this.element.insertBefore(bgNode, this.element.childNodes[0]) - bgNode.classList.add(BG.substr(1)) - - const bgLayerClassNames = [FRONT_LAYER.substr(1), REAR_LAYER.substr(1)] - bgLayerClassNames.map(className => { - let bgNodeLayer = document.createElement('DIV') - bgNode.appendChild(bgNodeLayer) - bgNodeLayer.classList.add(className) + let bgNode = this.element.querySelector(BG) + if (!bgNode) { + bgNode = document.createElement('DIV') + this.element.insertBefore(bgNode, this.element.childNodes[0]) + bgNode.classList.add(BG.substr(1)) + } + + [FRONT_LAYER, REAR_LAYER].map(className => { + let bgNodeLayer = bgNode.querySelector(className) + if (!bgNodeLayer) { + bgNodeLayer = document.createElement('DIV') + bgNode.appendChild(bgNodeLayer) + bgNodeLayer.classList.add(className.substr(1)) + } }) }, _reset () { + this._primary.classList[(this.fixed || this.condenses || this.reveals) ? 'add' : 'remove'](MODIFIER_FIXED) + if (this.element.offsetWidth === 0 && this.element.offsetHeight === 0) { return } - this.element.classList[this._isPositionedFixed ? 'add' : 'remove'](MODIFIER_FIXED) - this._transform('translate3d(0, 0, 0)') - if (this._primaryElement) { - this._transform('translate3d(0, 0, 0)', this._primaryElement) + if (this._primaryisPositionedFixed) { + this.element.style.paddingTop = this._primary.offsetHeight + 'px' } let scrollTop = this._clampedScrollTop let firstSetup = this._height === 0 || scrollTop === 0 this._height = this.element.offsetHeight - this._primaryElement = this._getPrimaryElement() - this._primaryElementTop = this._primaryElement ? this._primaryElement.offsetTop : 0 + this._primaryTop = this._primary ? this._primary.offsetTop : 0 this._dHeight = 0 if (this._mayMove()) { - this._dHeight = this._primaryElement ? this._height - this._primaryElement.offsetHeight : 0 + this._dHeight = this._primary ? this._height - this._primary.offsetHeight : 0 } this._setUpEffects() @@ -231,14 +255,10 @@ export const headerComponent = (element) => ({ */ _handleFixedPositionedScroll () { if (this._fixedPositionedScrollHandler !== undefined) { - this.element.removeEventListener('wheel', this._fixedPositionedScrollHandler) + this._fixedPositionedScrollHandler.restore() } - if (this._isValidScrollTarget() && this._isPositionedFixed && this.scrollTarget !== this._doc) { - this._fixedPositionedScrollHandler = (e) => { - let passMouseEvent = new WheelEvent(e.type, e) - this.scrollTarget.dispatchEvent(passMouseEvent) - } - this.element.addEventListener('wheel', this._fixedPositionedScrollHandler) + if (this._isValidScrollTarget() && this._isPositionedFixedEmulated && this.scrollTarget !== this._doc && this.retargetMouseScroll) { + this._fixedPositionedScrollHandler = RetargetMouseScroll(this.element, this.scrollTarget) } }, @@ -246,23 +266,29 @@ export const headerComponent = (element) => ({ * Returns a reference to the element that remains visible when the header condenses. * @return {HTMLElement} */ - _getPrimaryElement () { - let primaryElement + get _primary () { + if (this._primaryElement) { + return this._primaryElement + } + + let primary let nodes = this.element.querySelector(CONTENT).children for (let i = 0; i < nodes.length; i++) { if (nodes[i].nodeType === Node.ELEMENT_NODE) { let node = nodes[i] - if (node.hasAttribute('primary')) { - primaryElement = node + if (node.dataset.primary !== undefined) { + primary = node break } - else if (!primaryElement) { - primaryElement = node + else if (!primary) { + primary = node } } } - return primaryElement + + this._primaryElement = primary + return this._primaryElement }, /** @@ -275,27 +301,25 @@ export const headerComponent = (element) => ({ return } + if (!forceUpdate && scrollTop === this._lastScrollTop) { + return + } + let progress = 0 let top = 0 let lastTop = this._top - let lastScrollTop = this._lastScrollTop let maxHeaderTop = this._maxHeaderTop - let dScrollTop = scrollTop - lastScrollTop + let dScrollTop = scrollTop - this._lastScrollTop let absDScrollTop = Math.abs(dScrollTop) - let isScrollingDown = scrollTop > lastScrollTop + let isScrollingDown = scrollTop > this._lastScrollTop let now = Date.now() - if (!forceUpdate && scrollTop === lastScrollTop) { - return - } - if (this._mayMove()) { top = this._clamp(this.reveals ? lastTop + dScrollTop : scrollTop, 0, maxHeaderTop) } if (scrollTop >= this._dHeight) { top = this.condenses ? Math.max(this._dHeight, top) : top - this.element.style.transitionDuration = '0ms' } if (this.reveals && absDScrollTop < 100) { @@ -313,7 +337,7 @@ export const headerComponent = (element) => ({ } let scrollVelocity = dScrollTop / (now - this._lastTimestamp) - this.element.style.transitionDuration = `${ this._clamp((top - lastTop) / scrollVelocity, 0, 300) }ms` + this._revealTransitionDuration = this._clamp((top - lastTop) / scrollVelocity, 0, 300) } else { top = this._top @@ -337,10 +361,8 @@ export const headerComponent = (element) => ({ if (forceUpdate || progress !== this._progress || lastTop !== top || scrollTop === 0) { this._progress = progress - requestAnimationFrame(() => { - this._runEffects(progress, top) - this._transformHeader(top) - }) + this._runEffects(progress, top) + this._transformHeader(top) } }, @@ -352,10 +374,52 @@ export const headerComponent = (element) => ({ if (this.transformDisabled) { return } - this._transform(`translate3d(0, ${ -top }px, 0)`) - if (this._primaryElement && this.condenses && top >= this._primaryElementTop) { - this._transform(`translate3d(0, ${ Math.min(top, this._dHeight) - this._primaryElementTop }px, 0)`, this._primaryElement) + if (this._isPositionedAbsolute) { + let transform = top + if (this.scrollTarget === this._doc) { + transform = 0 + } + + if (top === transform) { + this._transform(`translate3d(0, ${ transform * -1 }px, 0)`) + } + + if (top >= this._primaryTop) { + this._transform(`translate3d(0, ${ Math.min(top, this._dHeight) - this._primaryTop }px, 0)`, this._primary) + } + return + } + + if (this.fixed && this._isPositionedFixed) { + let transform = top + + this._transform(`translate3d(0, ${ transform * -1 }px, 0)`) + + if (top >= this._primaryTop) { + this._transform(`translate3d(0, ${ Math.min(top, this._dHeight) - this._primaryTop }px, 0)`, this._primary) + } + return + } + + let transform = 0 + let duration = `${ this._revealTransitionDuration }ms` + + if (top > this._dHeight) { + transform = -1 * (top - this._dHeight) + + if (this.reveals) { + duration = '0ms' + } + } + if (this.reveals && top <= this._dHeight) { + this._primary.style.transitionDuration = duration + } + + this._transform(`translate3d(0, ${ transform }px, 0)`, this._primary) + + if (this.reveals && top > this._dHeight) { + setTimeout(() => this._primary.style.transitionDuration = duration) } }, @@ -393,11 +457,10 @@ export const headerComponent = (element) => ({ this.attachToScrollTarget() this._handleFixedPositionedScroll() this._setupBackgrounds() - this._reset() - SCROLL_EFFECTS.concat(HEADER_SCROLL_EFFECTS).map(effect => { - this.registerEffect(effect.name, effect) - }) + this._primary.setAttribute('data-primary', 'data-primary') + + SCROLL_EFFECTS.concat(HEADER_SCROLL_EFFECTS).map(effect => this.registerEffect(effect.name, effect)) }, /** diff --git a/src/header/header.scss b/src/header/header.scss index 51a1aec..8abd48b 100644 --- a/src/header/header.scss +++ b/src/header/header.scss @@ -1,42 +1,27 @@ +@import '../variables'; + .mdk-header { position: relative; - transition-timing-function: linear; - transition-property: transform; + z-index: 1; margin-bottom: $mdk-spacer; height: 200px; - &::after { - position: absolute; - right: 0; - bottom: -5px; - left: 0; - width: 100%; - height: 5px; - content: ""; - transition: opacity 0.4s; - pointer-events: none; - opacity: 0; - box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4); - will-change: opacity; - } - :last-child { margin-bottom: 0; } - &[condenses], - &[reveals] { - will-change: transform; - } - - [fx-condenses] { + [data-fx-condenses] { transform-origin: left top; opacity: 0; - &[fx-id] { + &[data-fx-id] { opacity: 1; } } + + [data-primary] { + z-index: 1; + } } .mdk-header__bg { @@ -48,6 +33,10 @@ overflow: hidden; } +[data-effects*="parallax-background"] .mdk-header__bg { + visibility: hidden; +} + .mdk-header__bg-rear, .mdk-header__bg-front { position: absolute; @@ -69,7 +58,39 @@ height: 100%; } +// Fixes [primary] stack order when using condensing header +// z-index on [primary] children is not getting applied because of the translate3d +// applied to the [primary] element +.mdk-header { + &[data-condenses] { + .mdk-header__content { + z-index: 0; + } + [data-primary] { + z-index: 1; + } + } +} + +.mdk-header--shadow { + transition: 0.25s box-shadow; +} + .mdk-header--shadow::after { + position: absolute; + right: 0; + bottom: -5px; + left: 0; + width: 100%; + height: 5px; + content: ""; + pointer-events: none; + opacity: 0; + box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4); + z-index: -1; +} + +.mdk-header--shadow-show::after { opacity: 1; } @@ -81,12 +102,20 @@ margin-bottom: 0; } +.mdk-header[data-reveals] [data-primary] { + transition: 0.25s transform; + + &.mdk-header--shadow { + transition: 0.25s box-shadow, transform; + } +} + .mdk-header[disabled] { &, &::after, .mdk-header__bg-rear, .mdk-header__bg-front, - .mdk-header__content > [primary] { + .mdk-header__content > [data-primary] { transition: none !important; } } \ No newline at end of file diff --git a/src/header/index.js b/src/header/index.js index adfe9a2..a642155 100644 --- a/src/header/index.js +++ b/src/header/index.js @@ -1,2 +1 @@ -import './header.scss' export { headerComponent } from './header' \ No newline at end of file diff --git a/src/header/retarget-mouse-scroll.js b/src/header/retarget-mouse-scroll.js new file mode 100644 index 0000000..887fd37 --- /dev/null +++ b/src/header/retarget-mouse-scroll.js @@ -0,0 +1,71 @@ +const mouseScrollEvents = ['DOMMouseScroll', 'mousewheel'] + +export const handleScroll = (evt, target, preventDefault, scrollMultiplier) => { + if (preventDefault) { + if (evt.preventDefault) { + evt.preventDefault() + } else { + event.returnValue = false + } + } + + var scrollAmount = evt.detail || (-evt.wheelDelta / 40); // convert wheelData to lines + scrollAmount *= 19; // convert lines to pixels + + if (typeof scrollMultiplier === 'number' && !isNaN(scrollMultiplier)) + scrollAmount *= scrollMultiplier; + + if (evt.wheelDeltaX || ('axis' in evt && 'HORIZONTAL_AXIS' in evt && evt.axis == evt.HORIZONTAL_AXIS)) + // horizontal scroll + if (target.scrollBy) + target.scrollBy(scrollAmount, 0); + else + target.scrollLeft += scrollAmount; + else // vertical scroll + if (target.scrollBy) + target.scrollBy(0, scrollAmount); + else + target.scrollTop += scrollAmount; +} + +export const RetargetMouseScroll = (elem, target, preventDefault, scrollMultiplier, preventRetarget) => { + if (!elem) + elem = document; + + if (!target) + target = window; + + if (typeof preventDefault !== 'boolean') + preventDefault = true; + + if (typeof preventRetarget !== 'function') + preventRetarget = null; + + var addListener, removeListener, restoreFn, + handler = function (evt) { + evt = evt || window.event; + if(preventRetarget && preventRetarget.call(this, evt)) return; + handleScroll(evt, target, preventDefault, scrollMultiplier); + }; + + if (addListener = elem.addEventListener) { + addListener.call(elem, mouseScrollEvents[0], handler, false); + addListener.call(elem, mouseScrollEvents[1], handler, false); + } + else if (addListener = elem.attachEvent) + addListener.call(elem, 'on'+mouseScrollEvents[1], handler); + + if (removeListener = elem.removeEventListener) + restoreFn = function () { + removeListener.call(elem, mouseScrollEvents[0], handler, false); + removeListener.call(elem, mouseScrollEvents[1], handler, false); + }; + else if (removeListener = elem.detachEvent) + restoreFn = function () { + removeListener.call(elem, 'on'+mouseScrollEvents[1], handler); + }; + + return { + restore: restoreFn + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 6bcb314..1039a2c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,5 @@ +import './style.scss' + // EXPORT BEHAVIORS export { scrollTargetBehavior } from './scroll-target-behavior' export { scrollEffectBehavior } from './scroll-effect-behavior' @@ -16,4 +18,7 @@ export { tooltipComponent } from './tooltip' export { SCROLL_EFFECTS } from './scroll-effects' // EXPORT HEADER SCROLL EFFECTS -export { HEADER_SCROLL_EFFECTS } from './header-scroll-effects' \ No newline at end of file +export { HEADER_SCROLL_EFFECTS } from './header-scroll-effects' + +// EXPORT MEDIA QUERY UTILITY +export { mediaQuery } from './media-query' \ No newline at end of file diff --git a/src/reveal/README.md b/src/reveal/README.md index c93d561..3348acc 100644 --- a/src/reveal/README.md +++ b/src/reveal/README.md @@ -4,4 +4,4 @@ A content area that reveals on user interaction. ## Demos -- [Reveal demo](http://mdk-demo.themekit.io/reveal.html) \ No newline at end of file +- [Reveal demo](http://mdk.frontendmatter.com/reveal.html) \ No newline at end of file diff --git a/src/reveal/index.js b/src/reveal/index.js index 1b19bb5..29769cb 100644 --- a/src/reveal/index.js +++ b/src/reveal/index.js @@ -1,2 +1 @@ -import './reveal.scss' export { revealComponent } from './reveal' \ No newline at end of file diff --git a/src/reveal/reveal.js b/src/reveal/reveal.js index 5f99f7d..506f952 100644 --- a/src/reveal/reveal.js +++ b/src/reveal/reveal.js @@ -19,6 +19,7 @@ export const revealComponent = () => ({ */ partialHeight: { reflectToAttribute: true, + type: Number, value: 0 }, @@ -32,11 +33,12 @@ export const revealComponent = () => ({ }, /** - * Toggle reveal on mouseenter/mouseleave or touchstart/touchend. + * Toggle reveal on click/mouseenter/mouseleave or touchstart/touchend. + * click|hover * @type {Object} */ - hoverReveal: { - type: Boolean, + trigger: { + value: 'click', reflectToAttribute: true }, @@ -65,7 +67,8 @@ export const revealComponent = () => ({ listeners: [ '_onEnter(mouseenter, touchstart)', '_onLeave(mouseleave, touchend)', - 'window._debounceResize(resize)' + 'window._debounceResize(resize)', + '_onClick(click)', ], /** @@ -116,24 +119,21 @@ export const revealComponent = () => ({ * Gets called automatically on `window.load` */ _reset () { - const revealOffsetTop = parseInt(window.getComputedStyle(this.reveal)['margin-top'], 10) - const revealHeight = this.reveal.offsetHeight - let translate = 'translate3d(0, ' + (revealHeight - this.partialHeight) + 'px, 0)' - this._translateReveal = translate - if (this.forceReveal) { - translate = 'translate3d(0, 0, 0)' - } + this._translate = 'translateY(' + (-1 * (this.reveal.offsetHeight - this.partialHeight)) + 'px)' + if (this.partialHeight !== 0) { this.partial.style.height = this.partialHeight + 'px' } - this.reveal.style.transitionDuration = '0s' - util.transform(translate, this.reveal) - this.element.style.height = revealOffsetTop + revealHeight + 'px' - setTimeout(() => this.reveal.style.transitionDuration = '', 0) + + this.element.style.height = this.reveal.offsetTop + this.partialHeight + 'px' + + if (this.forceReveal && !this.opened) { + this.open() + } }, _onChange () { - util.transform(this.opened || this.forceReveal ? 'translate3d(0, 0, 0)' : this._translateReveal, this.reveal) + util.transform(this.opened ? this._translate : 'translateY(0)', this.reveal) }, /** @@ -141,17 +141,27 @@ export const revealComponent = () => ({ * @param {MouseEvent|TouchEvent} event */ _onEnter () { - if (this.hoverReveal && !this.forceReveal) { + if (this.trigger === 'hover' && !this.forceReveal) { this.open() } }, + /** + * Handle `click` event. + * @param {MouseEvent|TouchEvent} event + */ + _onClick () { + if (this.trigger === 'click') { + this.toggle() + } + }, + /** * Handle `mouseleave` and `touchend` events. * @param {MouseEvent|TouchEvent} event */ _onLeave () { - if (this.hoverReveal && !this.forceReveal) { + if (this.trigger === 'hover' && !this.forceReveal) { this.close() } }, @@ -173,7 +183,6 @@ export const revealComponent = () => ({ * Initialize component. */ init () { - this._reset() this._resizeWidth = window.innerWidth }, diff --git a/src/reveal/reveal.scss b/src/reveal/reveal.scss index 067cf9a..c86bff6 100644 --- a/src/reveal/reveal.scss +++ b/src/reveal/reveal.scss @@ -1,23 +1,20 @@ +@import '../variables'; + .mdk-reveal { z-index: 0; position: relative; - transform: translateZ(0); + overflow: hidden; + display: block; - &[force-reveal], - &[opened], + &[data-opened], &--hover:hover { - .mdk-reveal__content { - transform: translate3d(0, 0, 0) !important; - } .mdk-reveal__partial { opacity: 0; } } } .mdk-reveal__content { - margin-top: $mdk-reveal-content-offset-top; transition: transform .2s; - transform: translate3d(0, 100%, 0); background-color: $mdk-reveal-content-bg; position: relative; z-index: 0; diff --git a/src/scroll-effect-behavior/scroll-effect-behavior.js b/src/scroll-effect-behavior/scroll-effect-behavior.js index 01db432..baac798 100644 --- a/src/scroll-effect-behavior/scroll-effect-behavior.js +++ b/src/scroll-effect-behavior/scroll-effect-behavior.js @@ -38,9 +38,10 @@ export const scrollEffectBehavior = () => ({ * @return {Array} */ get effects () { - return this.element.hasAttribute('effects') - ? (this.element.getAttribute('effects') || '').split(' ') - : [] + if (!this.element.dataset.effects) { + return [] + } + return this.element.dataset.effects.split(' ') }, /** @@ -51,9 +52,9 @@ export const scrollEffectBehavior = () => ({ if (this._effectsConfig) { return this._effectsConfig } - if (this.element.hasAttribute('effects-config')) { + if (this.element.hasAttribute('data-effects-config')) { try { - return JSON.parse(this.element.getAttribute('effects-config')) + return JSON.parse(this.element.getAttribute('data-effects-config')) } catch (e) {} } @@ -86,7 +87,6 @@ export const scrollEffectBehavior = () => ({ throw new Error(`effect ${ effectName } is already registered.`) } this._scrollEffects[effectName] = effectDef - this._setUpEffects() }, /** @@ -194,6 +194,7 @@ export const scrollEffectBehavior = () => ({ */ _scrollHandler () { this._updateScrollState(this._clampedScrollTop) + this._loop() }, /** diff --git a/src/scroll-effects/parallax-background.js b/src/scroll-effects/parallax-background.js index df8fdb1..b29e4b7 100644 --- a/src/scroll-effects/parallax-background.js +++ b/src/scroll-effects/parallax-background.js @@ -1,53 +1,14 @@ const FRONT_LAYER = '[class*="__bg-front"]' const REAR_LAYER = '[class*="__bg-rear"]' -const CONTAINER = '[class$="__bg"]' +const BG = '[class$="__bg"]' /** * parallax-background effect */ export const SCROLL_EFFECT_PARALLAX_BACKGROUND = { name: 'parallax-background', - setUp (config) { - config.distance = config.distance || (this.element.offsetHeight / 3) - - let container = this.element.querySelector(CONTAINER) - let frontLayer = this.element.querySelector(FRONT_LAYER) - let rearLayer = this.element.querySelector(REAR_LAYER) - let layers = [ frontLayer, rearLayer ] - - let scalar = parseFloat(config.scalar ? config.scalar : 1.5) - let distance = frontLayer.offsetHeight - container.offsetHeight - - if (distance === 0) { - distance = this._dHeight !== undefined ? this._dHeight : parseInt(config.distance, 10) - } - - let offset = distance - if (this.element.offsetTop > 0 && !this._isPositionedFixed) { - offset = distance * scalar - } - else if ((this.element.offsetTop === 0 && !this._isPositionedFixed) || this._isPositionedFixed) { - offset = scalar > 1 ? (distance * scalar) - distance : distance - (distance * scalar) - } - - this._parallaxBackgroundDelta = distance * scalar - - let transform = (this._parallaxBackgroundDelta * Math.min(1, this._progress)).toFixed(5) - let margin = (-1 * offset).toFixed(5) - - layers.map(layer => { - if (layer) { - if (layer.style.transform === '') { - layer.style.willChange = 'transform' - } - layer.style[scalar > 1 || !this._isPositionedFixed ? 'marginTop' : 'marginBottom'] = `${ margin }px` - this._transform(`translate3d(0, ${ transform }px, 0)`, layer) - } - }) - }, + setUp () {}, tearDown () { - delete this._parallaxBackgroundDelta - let layers = [ this.element.querySelector(FRONT_LAYER), this.element.querySelector(REAR_LAYER) @@ -63,17 +24,36 @@ export const SCROLL_EFFECT_PARALLAX_BACKGROUND = { }) }, run (progress, top) { + let unscrolledPercent = (this.scrollTarget.scrollHeight - this._scrollTargetHeight) / this.scrollTarget.scrollHeight + let distance = this.element.offsetHeight * unscrolledPercent + + if (this._dHeight !== undefined) { + unscrolledPercent = this._dHeight / this.element.offsetHeight + distance = this._dHeight * unscrolledPercent + } + + let scalar = 0.5 + let delta = Math.abs(distance * scalar).toFixed(5) + + let max = this._isPositionedFixedEmulated ? 1000000 : distance + let deltaProgress = delta * progress + let transform = (Math.min(deltaProgress, max)).toFixed(5) + let layers = [ this.element.querySelector(FRONT_LAYER), this.element.querySelector(REAR_LAYER) ] - - let transform = (this._parallaxBackgroundDelta * Math.min(1, progress)).toFixed(5) layers.map(layer => { if (layer) { + layer.style['marginTop'] = `${ -1 * delta }px` this._transform(`translate3d(0, ${ transform }px, 0)`, layer) } }) + + let bgNode = this.element.querySelector(BG) + if (!bgNode.style.visibility) { + bgNode.style.visibility = 'visible' + } } } \ No newline at end of file diff --git a/src/scroll-target-behavior/scroll-target-behavior.js b/src/scroll-target-behavior/scroll-target-behavior.js index 9fad558..a113a4e 100644 --- a/src/scroll-target-behavior/scroll-target-behavior.js +++ b/src/scroll-target-behavior/scroll-target-behavior.js @@ -47,8 +47,8 @@ export const scrollTargetBehavior = () => ({ if (this._scrollTargetSelector) { return this._scrollTargetSelector } - if (this.element.hasAttribute('scroll-target')) { - return this.element.getAttribute('scroll-target') + if (this.element.hasAttribute('data-scroll-target')) { + return this.element.getAttribute('data-scroll-target') } }, @@ -173,28 +173,37 @@ export const scrollTargetBehavior = () => ({ this.scrollTarget = this._doc } else if (typeof this.scrollTargetSelector === 'string') { - this.scrollTarget = this._owner.querySelector(`#${ this.scrollTargetSelector }`) + this.scrollTarget = document.querySelector(`${ this.scrollTargetSelector }`) } else if (this.scrollTargetSelector instanceof HTMLElement) { this.scrollTarget = this.scrollTargetSelector } + if (!this._doc.style.overflow) { + this._doc.style.overflow = this.scrollTarget !== this._doc ? 'hidden' : '' + } + if (this.scrollTarget) { this.eventTarget = this.scrollTarget === this._doc ? window : this.scrollTarget this._boundScrollHandler = this._boundScrollHandler || this._scrollHandler.bind(this) - this.eventTarget.addEventListener('scroll', this._boundScrollHandler) + this._loop() + // this.eventTarget.addEventListener('scroll', this._boundScrollHandler) } }, + _loop () { + requestAnimationFrame(this._boundScrollHandler) + }, + /** * Detach the scroll event listener from the scroll target * @return {[type]} [description] */ detachFromScrollTarget () { unwatch(this, 'scrollTargetSelector', this.attachToScrollTarget) - if (this.eventTarget) { - this.eventTarget.removeEventListener('scroll', this._boundScrollHandler) - } + // if (this.eventTarget) { + // this.eventTarget.removeEventListener('scroll', this._boundScrollHandler) + // } }, /** diff --git a/src/style.scss b/src/style.scss index cf94991..abe21fe 100644 --- a/src/style.scss +++ b/src/style.scss @@ -4,4 +4,5 @@ @import './drawer/drawer'; @import './drawer-layout/drawer-layout'; @import './reveal/reveal'; -@import './carousel/carousel'; \ No newline at end of file +@import './carousel/carousel'; +@import './tooltip/tooltip'; \ No newline at end of file diff --git a/src/tooltip/index.js b/src/tooltip/index.js index 441d487..e66415f 100644 --- a/src/tooltip/index.js +++ b/src/tooltip/index.js @@ -1,2 +1 @@ -import './tooltip.scss' export { tooltipComponent } from './tooltip' \ No newline at end of file diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js index 364653f..f667969 100644 --- a/src/tooltip/tooltip.js +++ b/src/tooltip/tooltip.js @@ -20,7 +20,7 @@ export const tooltipComponent = (element) => ({ for: { readOnly: true, value () { - var target = this.element.getAttribute('for') + var target = this.element.getAttribute('data-for') return document.querySelector('#' + target) } }, diff --git a/src/tooltip/tooltip.scss b/src/tooltip/tooltip.scss index 2c6e149..448a044 100644 --- a/src/tooltip/tooltip.scss +++ b/src/tooltip/tooltip.scss @@ -1,3 +1,5 @@ +@import '../variables'; + .mdk-tooltip { transform: scale(0); transition: transform .2s; @@ -17,7 +19,7 @@ border-radius: .25rem; pointer-events: none; - &[opened] { + &[data-opened] { transform: scale(1); } } \ No newline at end of file