@apicart/vue-components
Version:
Apicart Vue.Js components for simple e-commerce platform development
408 lines (351 loc) • 16.5 kB
JavaScript
/**
* @apicart/vue-components v1.0.0-alpha7
* (c) 2018-2020 Apicart Company
* Released under the MIT License.
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@apicart/core-sdk'), require('../..'), require('./..')) :
typeof define === 'function' && define.amd ? define(['@apicart/core-sdk', '../..', './..'], factory) :
(global = global || self, global.ApicartDialog = factory(global.Apicart, global.src, global.components));
}(this, (function (Apicart, src, components) { 'use strict';
Apicart = Apicart && Object.prototype.hasOwnProperty.call(Apicart, 'default') ? Apicart['default'] : Apicart;
// Older browsers don't support event options, feature detect it.
// Adopted and modified solution from Bohdan Didukh (2017)
// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi
let hasPassiveEvents = false;
if (typeof window !== 'undefined') {
const passiveTestOptions = {
get passive() {
hasPassiveEvents = true;
return undefined;
}
};
window.addEventListener('testPassive', null, passiveTestOptions);
window.removeEventListener('testPassive', null, passiveTestOptions);
}
const isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);
let locks = [];
let documentListenerAdded = false;
let initialClientY = -1;
let previousBodyOverflowSetting;
let previousBodyPaddingRight;
// returns true if `el` should be allowed to receive touchmove events.
const allowTouchMove = el => locks.some(lock => {
if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
return true;
}
return false;
});
const preventDefault = rawEvent => {
const e = rawEvent || window.event;
// For the case whereby consumers adds a touchmove event listener to document.
// Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })
// in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then
// the touchmove event on document will break.
if (allowTouchMove(e.target)) {
return true;
}
// Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
if (e.touches.length > 1) return true;
if (e.preventDefault) e.preventDefault();
return false;
};
const setOverflowHidden = options => {
// Setting overflow on body/documentElement synchronously in Desktop Safari slows down
// the responsiveness for some reason. Setting within a setTimeout fixes this.
setTimeout(() => {
// If previousBodyPaddingRight is already set, don't set it again.
if (previousBodyPaddingRight === undefined) {
const reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
const scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
if (reserveScrollBarGap && scrollBarGap > 0) {
previousBodyPaddingRight = document.body.style.paddingRight;
document.body.style.paddingRight = `${scrollBarGap}px`;
}
}
// If previousBodyOverflowSetting is already set, don't set it again.
if (previousBodyOverflowSetting === undefined) {
previousBodyOverflowSetting = document.body.style.overflow;
document.body.style.overflow = 'hidden';
}
});
};
const restoreOverflowSetting = () => {
// Setting overflow on body/documentElement synchronously in Desktop Safari slows down
// the responsiveness for some reason. Setting within a setTimeout fixes this.
setTimeout(() => {
if (previousBodyPaddingRight !== undefined) {
document.body.style.paddingRight = previousBodyPaddingRight;
// Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it
// can be set again.
previousBodyPaddingRight = undefined;
}
if (previousBodyOverflowSetting !== undefined) {
document.body.style.overflow = previousBodyOverflowSetting;
// Restore previousBodyOverflowSetting to undefined
// so setOverflowHidden knows it can be set again.
previousBodyOverflowSetting = undefined;
}
});
};
// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
const isTargetElementTotallyScrolled = targetElement => targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
const handleScroll = (event, targetElement) => {
const clientY = event.targetTouches[0].clientY - initialClientY;
if (allowTouchMove(event.target)) {
return false;
}
if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
// element is at the top of its scroll.
return preventDefault(event);
}
if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {
// element is at the bottom of its scroll.
return preventDefault(event);
}
event.stopPropagation();
return true;
};
const disableBodyScroll = (targetElement, options) => {
if (isIosDevice) {
// targetElement must be provided, and disableBodyScroll must not have been
// called on this targetElement before.
if (!targetElement) {
// eslint-disable-next-line no-console
console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');
return;
}
if (targetElement && !locks.some(lock => lock.targetElement === targetElement)) {
const lock = {
targetElement,
options: options || {}
};
locks = [...locks, lock];
targetElement.ontouchstart = event => {
if (event.targetTouches.length === 1) {
// detect single touch.
initialClientY = event.targetTouches[0].clientY;
}
};
targetElement.ontouchmove = event => {
if (event.targetTouches.length === 1) {
// detect single touch.
handleScroll(event, targetElement);
}
};
if (!documentListenerAdded) {
document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
documentListenerAdded = true;
}
}
} else {
setOverflowHidden(options);
const lock = {
targetElement,
options: options || {}
};
locks = [...locks, lock];
}
};
const enableBodyScroll = targetElement => {
if (isIosDevice) {
if (!targetElement) {
// eslint-disable-next-line no-console
console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.');
return;
}
targetElement.ontouchstart = null;
targetElement.ontouchmove = null;
locks = locks.filter(lock => lock.targetElement !== targetElement);
if (documentListenerAdded && locks.length === 0) {
document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
documentListenerAdded = false;
}
} else {
locks = locks.filter(lock => lock.targetElement !== targetElement);
if (!locks.length) {
restoreOverflowSetting();
}
}
};
var translator = Apicart.VueComponentsTranslator || src.Translator;
var i18n = translator.getI18n();
var windowIsDefined = typeof window !== 'undefined';
var script = {
name: 'apicart-dialog',
i18n: i18n,
components: {
'apicart-button': windowIsDefined && window.ApicartButton ? window.ApicartButton : components.ApicartButton
},
props: {
closeOnBgClick: {
type: Boolean,
default: true
},
showTopCloseButton: {
type: Boolean,
default: false
}
},
data: function () {
return {
visible: false
};
},
methods: {
open: function () {
this.visible = true;
this.$emit('open');
disableBodyScroll(this.$el, {
reserveScrollBarGap: true
});
},
closeByClickOnBg: function () {
if (this.closeOnBgClick) {
this.close();
}
},
close: function () {
this.visible = false;
this.$emit('close');
enableBodyScroll(this.$el);
},
toggle: function () {
if (this.visible) {
this.close();
enableBodyScroll(this.$el);
}
else {
this.open();
}
}
}
};
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ".apicart-dialog{font-family:-apple-system,\"Segoe UI\",Roboto,Oxygen,Ubuntu,Cantarell,\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";-webkit-font-smoothing:antialiased;box-sizing:border-box;outline:0}.apicart-dialog *{box-sizing:border-box;outline:0}.apicart-dialog__mask{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.32);display:table;transition:opacity .3s ease}.apicart-dialog__wrapper{display:table-cell;vertical-align:middle}.apicart-dialog__container{position:relative;width:94vw;max-width:1000px;margin:0 auto;padding:12px 16px;background-color:#fff;border-radius:2px;box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);transition:all .3s ease;font-family:Helvetica,Arial,sans-serif}@media (min-width:768px){.apicart-dialog__container{padding:20px 30px}}.apicart-dialog__close-button{position:absolute;right:0;text-align:center;font-size:38px;cursor:pointer;width:60px;display:inline-block;line-height:60px;top:0}.apicart-dialog__header{margin-top:0}.apicart-dialog__title{font-size:34px}.apicart-dialog__body{margin:20px 0}.apicart-dialog__footer-default-button-wrapper{display:flex;justify-content:space-around}.apicart-dialog-enter{opacity:0}.apicart-dialog-leave-active{opacity:0}.apicart-dialog-enter .apicart-dialog-container,.apicart-dialog-leave-active .apicart-dialog-container{-webkit-transform:scale(1.1);transform:scale(1.1)}";
styleInject(css_248z);
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
const options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
let hook;
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
}
else if (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
const originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
const existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
/* script */
const __vue_script__ = script;
/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"name":"apicart-dialog"}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.visible),expression:"visible"}],staticClass:"apicart-dialog apicart-dialog__mask"},[_c('div',{staticClass:"apicart-dialog__wrapper",on:{"click":_vm.closeByClickOnBg}},[_c('div',{staticClass:"apicart-dialog__container",on:{"click":function($event){$event.stopPropagation();}}},[_vm._t("default",[_c('div',{staticClass:"apicart-dialog__header"},[_vm._t("header")],2),_c('div',{staticClass:"apicart-dialog__body"},[_vm._t("body")],2),_c('div',{staticClass:"apicart-dialog__footer"},[_vm._t("footer",[_c('div',{staticClass:"apicart-dialog__footer-default-button-wrapper"},[_vm._t("footer-buttons",[_c('apicart-button',{attrs:{"type":"outlined"},nativeOn:{"click":function($event){return _vm.close($event)}}},[_vm._v(" "+_vm._s(_vm.$t('dialog.okButton'))+" ")])])],2)])],2)]),(_vm.showTopCloseButton)?_c('a',{staticClass:"apicart-dialog__close-button",attrs:{"role":"button"},on:{"click":_vm.close}},[_c('span',{staticClass:"apicart-icon-x"})]):_vm._e()],2)])])])};
var __vue_staticRenderFns__ = [];
/* style */
const __vue_inject_styles__ = undefined;
/* scoped */
const __vue_scope_id__ = undefined;
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
const __vue_component__ = normalizeComponent(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
false,
undefined,
undefined,
undefined
);
return __vue_component__;
})));