6 examples of 'popper js npm' 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
}

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

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
},

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
}

29
function getPopperChildren(wrapper) {
30
  return new ShallowWrapper(
31
    wrapper
32
      .find(Popper)
33
      .props()
34
      .children({ popperProps: { style: {} }, restProps: {} }),
35
    null,
36
  );
37
}

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
},