181 lines
10 KiB
JavaScript
181 lines
10 KiB
JavaScript
(function () {
|
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
|
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
|
|
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
|
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
|
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
|
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[28], {
|
|
/***/
|
|
"./node_modules/@ionic/core/dist/esm/ion-ripple-effect.entry.js":
|
|
/*!**********************************************************************!*\
|
|
!*** ./node_modules/@ionic/core/dist/esm/ion-ripple-effect.entry.js ***!
|
|
\**********************************************************************/
|
|
|
|
/*! exports provided: ion_ripple_effect */
|
|
|
|
/***/
|
|
function node_modulesIonicCoreDistEsmIonRippleEffectEntryJs(module, __webpack_exports__, __webpack_require__) {
|
|
"use strict";
|
|
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export (binding) */
|
|
|
|
|
|
__webpack_require__.d(__webpack_exports__, "ion_ripple_effect", function () {
|
|
return RippleEffect;
|
|
});
|
|
/* harmony import */
|
|
|
|
|
|
var _index_92848855_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
|
|
/*! ./index-92848855.js */
|
|
"./node_modules/@ionic/core/dist/esm/index-92848855.js");
|
|
/* harmony import */
|
|
|
|
|
|
var _ionic_global_23e7365a_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
|
|
/*! ./ionic-global-23e7365a.js */
|
|
"./node_modules/@ionic/core/dist/esm/ionic-global-23e7365a.js");
|
|
|
|
var rippleEffectCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;-webkit-animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1));-webkit-animation:150ms fadeOutAnimation forwards;animation:150ms fadeOutAnimation forwards}@-webkit-keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@-webkit-keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@-webkit-keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}@keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}";
|
|
|
|
var RippleEffect = /*#__PURE__*/function () {
|
|
function RippleEffect(hostRef) {
|
|
_classCallCheck(this, RippleEffect);
|
|
|
|
Object(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["r"])(this, hostRef);
|
|
/**
|
|
* Sets the type of ripple-effect:
|
|
*
|
|
* - `bounded`: the ripple effect expands from the user's click position
|
|
* - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
|
|
*
|
|
* NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
|
|
* while surfaces for unbounded ripples should have it set to visible.
|
|
*/
|
|
|
|
this.type = 'bounded';
|
|
}
|
|
/**
|
|
* Adds the ripple effect to the parent element.
|
|
*
|
|
* @param x The horizontal coordinate of where the ripple should start.
|
|
* @param y The vertical coordinate of where the ripple should start.
|
|
*/
|
|
|
|
|
|
_createClass(RippleEffect, [{
|
|
key: "addRipple",
|
|
value: function () {
|
|
var _addRipple = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(x, y) {
|
|
var _this = this;
|
|
|
|
return regeneratorRuntime.wrap(function _callee$(_context) {
|
|
while (1) {
|
|
switch (_context.prev = _context.next) {
|
|
case 0:
|
|
return _context.abrupt("return", new Promise(function (resolve) {
|
|
Object(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["f"])(function () {
|
|
var rect = _this.el.getBoundingClientRect();
|
|
|
|
var width = rect.width;
|
|
var height = rect.height;
|
|
var hypotenuse = Math.sqrt(width * width + height * height);
|
|
var maxDim = Math.max(height, width);
|
|
var maxRadius = _this.unbounded ? maxDim : hypotenuse + PADDING;
|
|
var initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
|
|
var finalScale = maxRadius / initialSize;
|
|
var posX = x - rect.left;
|
|
var posY = y - rect.top;
|
|
|
|
if (_this.unbounded) {
|
|
posX = width * 0.5;
|
|
posY = height * 0.5;
|
|
}
|
|
|
|
var styleX = posX - initialSize * 0.5;
|
|
var styleY = posY - initialSize * 0.5;
|
|
var moveX = width * 0.5 - posX;
|
|
var moveY = height * 0.5 - posY;
|
|
Object(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["c"])(function () {
|
|
var div = document.createElement('div');
|
|
div.classList.add('ripple-effect');
|
|
var style = div.style;
|
|
style.top = styleY + 'px';
|
|
style.left = styleX + 'px';
|
|
style.width = style.height = initialSize + 'px';
|
|
style.setProperty('--final-scale', "".concat(finalScale));
|
|
style.setProperty('--translate-end', "".concat(moveX, "px, ").concat(moveY, "px"));
|
|
var container = _this.el.shadowRoot || _this.el;
|
|
container.appendChild(div);
|
|
setTimeout(function () {
|
|
resolve(function () {
|
|
removeRipple(div);
|
|
});
|
|
}, 225 + 100);
|
|
});
|
|
});
|
|
}));
|
|
|
|
case 1:
|
|
case "end":
|
|
return _context.stop();
|
|
}
|
|
}
|
|
}, _callee);
|
|
}));
|
|
|
|
function addRipple(_x, _x2) {
|
|
return _addRipple.apply(this, arguments);
|
|
}
|
|
|
|
return addRipple;
|
|
}()
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _class;
|
|
|
|
var mode = Object(_ionic_global_23e7365a_js__WEBPACK_IMPORTED_MODULE_1__["b"])(this);
|
|
return Object(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["h"])(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["H"], {
|
|
role: "presentation",
|
|
"class": (_class = {}, _defineProperty(_class, mode, true), _defineProperty(_class, 'unbounded', this.unbounded), _class)
|
|
});
|
|
}
|
|
}, {
|
|
key: "unbounded",
|
|
get: function get() {
|
|
return this.type === 'unbounded';
|
|
}
|
|
}, {
|
|
key: "el",
|
|
get: function get() {
|
|
return Object(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["i"])(this);
|
|
}
|
|
}]);
|
|
|
|
return RippleEffect;
|
|
}();
|
|
|
|
var removeRipple = function removeRipple(ripple) {
|
|
ripple.classList.add('fade-out');
|
|
setTimeout(function () {
|
|
ripple.remove();
|
|
}, 200);
|
|
};
|
|
|
|
var PADDING = 10;
|
|
var INITIAL_ORIGIN_SCALE = 0.5;
|
|
RippleEffect.style = rippleEffectCss;
|
|
/***/
|
|
}
|
|
}]);
|
|
})();
|
|
//# sourceMappingURL=28-es5.js.map
|