SHARE
TWEET

Untitled

a guest Jul 17th, 2019 62 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import {
  2.   getContainerStyle,
  3.   getComponentStyles
  4. } from './style';
  5.  
  6.  
  7.  
  8.  function FloatingBord({memberAttr, container, component}) {
  9.   const $container      = $(`[${memberAttr}="${container}"]`);
  10.   const $component      = $container.find(`[${memberAttr}="${component}"]`);
  11.   const $win            = $(window);
  12.  
  13.    const componentStyles = getComponentStyles();
  14.   $component.css(componentStyles.fixing);
  15.  
  16.    const contianreStyle  = getContainerStyle($component.innerHeight());
  17.   $container.css(contianreStyle);
  18.  
  19.    return {
  20.     get isReady() {
  21.       return (
  22.         this.$container.length > 0 &&
  23.         this.$component.length > 0 &&
  24.         this.$win.length       > 0
  25.       );
  26.     },
  27.     get $container() {
  28.       return $container;
  29.     },
  30.     get $component() {
  31.       return $component;
  32.     },
  33.     get $win() {
  34.       return $win;
  35.     },
  36.     get isFloatingCondition() {
  37.       return this._containerTop <= this._viewPortBottom - this._componentHeight;
  38.     },
  39.     get _viewPortBottom() {
  40.       return this.$win.scrollTop() + this.$win.innerHeight();
  41.     },
  42.     get _componentHeight() {
  43.       return this.$component.height();
  44.     },
  45.     get _containerTop() {
  46.       return this.$container.offset().top;
  47.     },
  48.     set floating(floating) {
  49.       this.$component.css(floating ? componentStyles.floating : componentStyles.fixing);
  50.     }
  51.   }
  52. }
  53.  
  54.  
  55.  
  56.  export const FLOATING_BORD = {
  57.   memberAttr: 'data-floating-component',
  58.   container : 'container',
  59.   component : 'component'
  60. }
  61.  
  62.  
  63.  
  64.  export function setFloatingBord(options) {
  65.   let   componentIsFloating = false;
  66.   const bord                = FloatingBord(options);
  67.  
  68.   if (!bord.isReady) return;
  69.  
  70.   function _set(_floating) {
  71.     return componentIsFloating = bord.floating = _floating;
  72.   }
  73.  
  74.    _set(bord.isFloatingCondition);
  75.  
  76.    bord.$win.on('scroll.setFloatingBord', () =>
  77.     componentIsFloating !== bord.isFloatingCondition && _set(bord.isFloatingCondition)
  78.   );
  79. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top