10 examples of 'npm popperjs' in JavaScript

132
createPopper() {
133
  let { placement } = this;
134
  const center = placement === 'center' || (!placement.includes('start') && !placement.includes('end'));
135
136
  if (['start', 'end'].indexOf(this.placement) >= 0) {
137
    placement = `bottom-${this.placement}`;
138
  }
139
140
  if (['center'].indexOf(this.placement) >= 0) {
141
    placement = 'bottom';
142
  }
143
144
  // Let Popper.js manage the arrow position when it's centered (default).
145
  if (this.arrowElement && center) {
146
    this.arrowElement.setAttribute('x-arrow', '');
147
  }
148
149
  this.popperElement.style.minWidth = `${this.getTriggerWidth()}px`;
150
151
  this.popper = new Popper(this.triggerElement, this.popperElement, {
152
    placement,
153
    modifiers: {
154
      flip: {
155
        boundariesElement: 'viewport',
156
      },
157
      keepTogether: {
158
        enabled: true,
159
      },
160
      preventOverflow: {
161
        boundariesElement: 'viewport',
162
        escapeWithReference: true,
163
      },
164
    },
165
  });
166
}

208
createPopper: function createPopper() {
209
  var _this = this;
210
211
  this.$nextTick(function () {
212
    if (_this.visibleArrow) {
213
      _this.appendArrow(_this.popper);
214
    }
215
216
    if (_this.appendToBody && !_this.appendedToBody) {
217
      _this.appendedToBody = true;
218
      document.body.appendChild(_this.popper.parentElement);
219
    }
220
221
    if (_this.popperJS && _this.popperJS.destroy) {
222
      _this.popperJS.destroy();
223
    }
224
225
    if (_this.boundariesSelector) {
226
      var boundariesElement = document.querySelector(_this.boundariesSelector);
227
228
      if (boundariesElement) {
229
        _this.popperOptions.modifiers = Object.assign({}, _this.popperOptions.modifiers);
230
        _this.popperOptions.modifiers.preventOverflow = Object.assign({}, _this.popperOptions.modifiers.preventOverflow);
231
        _this.popperOptions.modifiers.preventOverflow.boundariesElement = boundariesElement;
232
      }
233
    }
234
235
    _this.popperOptions.onCreate = function () {
236
      _this.$emit('created', _this);
237
238
      _this.$nextTick(_this.updatePopper);
239
    };
240
241
    _this.popperJS = new Popper(_this.referenceElm, _this.popper, _this.popperOptions);
242
  });
243
},

4
export default function usePopper(
5
  containerRef,
6
  elementRef,
7
  { placement = 'auto' } = {},
8
) {
9
  useEffect(() => {
10
    const container = containerRef.current
11
    const element = elementRef.current
12
    if (!container || !element) return undefined
13
    const popper = new PopperJs(container, element, {
14
      placement,
15
    })
16
    return () => popper.destroy()
17
  }, [containerRef, elementRef, placement])
18
}

146
export function PopperReactMixin(getPopperRootDom, getRefDom, config) {
147
  require_condition(typeof getPopperRootDom === 'function', '`getPopperRootDom` func is required!');
148
  require_condition(typeof getRefDom === 'function', '`getRefDom` func is required!');
149
150
  PopperMixin.call(this, config);
151
  Object.keys(mixinPrototype).forEach(k=>this[k]=mixinPrototype[k]);
152
  PopperReactMixinMethods.hookReactLifeCycle.call(this, getPopperRootDom, getRefDom);
153
154
  return this;
155
}

129
updatePopper: function updatePopper() {
130
  var popperJS = this.popperJS;
131
  if (popperJS) {
132
    popperJS.update();
133
    if (popperJS._popper) {
134
      popperJS._popper.style.zIndex = _popup.PopupManager.nextZIndex();
135
    }
136
  } else {
137
    this.createPopper();
138
  }
139
},

417
value: function _getPopperConfig() {
418
  var popperConfig = {
419
    placement: this._getPlacement(),
420
    modifiers: {
421
      offset: this._getOffset(),
422
      flip: {
423
        enabled: this._config.flip
424
      },
425
      preventOverflow: {
426
        boundariesElement: this._config.boundary
427
      }
428
    } // Disable Popper.js if we have a static display
429
430
  };
431
432
  if (this._config.display === 'static') {
433
    popperConfig.modifiers.applyStyle = {
434
      enabled: false
435
    };
436
  }
437
438
  return popperConfig;
439
}

19
function popper() {
20
	return src('./node_modules/popper.js/dist/umd/popper.min.js').pipe(
21
		dest('./static/popperjs/umd'))
22
}

67
_configurePopper(dropdownButtonElement, dropdownMenuElement) {
68
    
69
    const dropdDownMenuPlacement = dropdownMenuElement.getAttribute('x-placement');
70
    const referenceElement = this._findReferenceElement(dropdownButtonElement);
71
    
72
    const config = this._createPopperConfig(dropdDownMenuPlacement);
73
    this._popper = new Popper(referenceElement, dropdownMenuElement, config);
74
}

15
function SimplePopper() {
16
  const classes = useStyles();
17
  const [anchorEl, setAnchorEl] = React.useState(null);
18
19
  function handleClick(event) {
20
    setAnchorEl(anchorEl ? null : event.currentTarget);
21
  }
22
23
  const open = Boolean(anchorEl);
24
  const id = open ? 'simple-popper' : null;
25
26
  return (
27
    <div>
28
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
29
        Toggle Popper
30
      </Button>
31
      <Popper id={id} open={open} anchorEl={anchorEl} transition>
32
        {({ TransitionProps }) => (
33
          <Fade {...TransitionProps} timeout={350}>
34
            <Paper>
35
              <Typography className={classes.typography}>The content of the Popper.</Typography>
36
            </Paper>
37
          </Fade>
38
        )}
39
      </Popper>
40
    </div>
41
  );
42
}

1626
Dropdown.prototype._getPopperConfig = function _getPopperConfig() {
1627
  var popperConfig = {
1628
    placement: this._getPlacement(),
1629
    modifiers: {
1630
      offset: {
1631
        offset: this._config.offset
1632
      },
1633
      flip: {
1634
        enabled: this._config.flip
1635
      }
1636
    }
1637
1638
    // Disable Popper.js for Dropdown in Navbar
1639
  };if (this._inNavbar) {
1640
    popperConfig.modifiers.applyStyle = {
1641
      enabled: !this._inNavbar
1642
    };
1643
  }
1644
  return popperConfig;
1645
};