@sheet-api/html
Version:
Sheet API as HTML Templates
148 lines (129 loc) • 11.8 kB
JavaScript
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["VideomatikEditor"] = factory();
else
root["VideomatikEditor"] = factory();
})(this, () => {
return /******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./src/execInElement.js":
/*!******************************!*\
!*** ./src/execInElement.js ***!
\******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nconst execInElement = (container, selector, func) => {\n [...container.querySelectorAll(selector)].forEach(func);\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (execInElement);\n\n\n//# sourceURL=webpack://VideomatikEditor/./src/execInElement.js?");
/***/ }),
/***/ "./src/getElements.js":
/*!****************************!*\
!*** ./src/getElements.js ***!
\****************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nconst getElements = () => {\n const markedElements = document.querySelectorAll('[data-sheet-api-url]');\n return [...markedElements];\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (getElements);\n\n\n//# sourceURL=webpack://VideomatikEditor/./src/getElements.js?");
/***/ }),
/***/ "./src/getForms.js":
/*!*************************!*\
!*** ./src/getForms.js ***!
\*************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nconst getForms = () => {\n const markedForms = document.querySelectorAll('form[data-sheet-api-url]');\n return [...markedForms];\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (getForms);\n\n\n//# sourceURL=webpack://VideomatikEditor/./src/getForms.js?");
/***/ }),
/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _getForms__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./getForms */ \"./src/getForms.js\");\n/* harmony import */ var _getElements__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./getElements */ \"./src/getElements.js\");\n/* harmony import */ var _processForm__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./processForm */ \"./src/processForm.js\");\n/* harmony import */ var _processElement__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./processElement */ \"./src/processElement.js\");\n/* eslint-disable no-param-reassign */\n\n\n\n\n\nconst main = () => {\n setInterval(() => {\n const forms = (0,_getForms__WEBPACK_IMPORTED_MODULE_0__[\"default\"])();\n forms.forEach(_processForm__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n\n const elements = (0,_getElements__WEBPACK_IMPORTED_MODULE_1__[\"default\"])();\n elements.forEach(_processElement__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\n }, 200);\n};\nmain();\n\n\n//# sourceURL=webpack://VideomatikEditor/./src/index.js?");
/***/ }),
/***/ "./src/processElement.js":
/*!*******************************!*\
!*** ./src/processElement.js ***!
\*******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* eslint-disable no-param-reassign */\n\nconst getData = async (url) => {\n const responseJSON = await fetch(url).then((r) => r.json());\n return responseJSON;\n};\n\nconst processElement = (element) => {\n const url = element.getAttribute('data-sheet-api-url');\n element.removeAttribute('data-sheet-api-url');\n const oldHTML = element.innerHTML;\n element.innerHTML = '';\n\n const replaceHTMLInElement = async () => {\n const data = await getData(url);\n const newHTML = data.map((object) => {\n Object.entries(object).forEach(([key, value]) => {\n object[key.trim()] = value;\n });\n\n return oldHTML.replace(/{{([^{}]*)}}/g, (match, key) => object[key.trim()]);\n }).join('');\n element.innerHTML = newHTML;\n };\n replaceHTMLInElement();\n\n const refreshTime = parseFloat(element.getAttribute('data-refresh-time')) || 0;\n if (refreshTime) {\n setInterval(replaceHTMLInElement, refreshTime * 1000);\n }\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (processElement);\n\n\n//# sourceURL=webpack://VideomatikEditor/./src/processElement.js?");
/***/ }),
/***/ "./src/processForm.js":
/*!****************************!*\
!*** ./src/processForm.js ***!
\****************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _execInElement__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./execInElement */ \"./src/execInElement.js\");\n/* eslint-disable no-param-reassign */\n\n\nconst processForm = (form) => {\n const url = form.getAttribute('data-sheet-api-url');\n form.addEventListener('submit', async (event) => {\n event.preventDefault();\n\n form.setAttribute('action', url);\n form.setAttribute('method', 'POST');\n\n const loadingMessage = form.getAttribute('data-loading-msg') || 'Loading...';\n\n const successMessage = form.getAttribute('data-success-msg') || 'Your submission was received!';\n\n const errorMessage = form.getAttribute('data-error-msg') || 'Your submission has failed, please try again later';\n\n const inputs = [...form.querySelectorAll('input[name]')];\n const formData = new FormData();\n inputs.forEach((input) => {\n formData.append(input.getAttribute('name'), input.value);\n });\n\n try {\n (0,_execInElement__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(form, 'button', (button) => {\n const type = button.getAttribute('type') || 'submit';\n const isSubmit = type === 'submit';\n if (isSubmit) {\n button.setAttribute('disabled', 'true');\n button.setAttribute('data-previous-inner-text', button.innerText);\n button.innerText = loadingMessage;\n }\n });\n const response = await fetch(url, {\n method: 'POST',\n body: formData,\n });\n\n if (response.status >= 400) {\n (0,_execInElement__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(form, '.sheet-api-error-container', (span) => {\n span.innerText = errorMessage;\n });\n return;\n }\n (0,_execInElement__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(form, '.sheet-api-success-container', (span) => {\n span.innerText = successMessage;\n });\n inputs.forEach((input) => {\n input.value = '';\n });\n } catch (error) {\n (0,_execInElement__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(form, '.sheet-api-error-container', (span) => {\n span.innerText = errorMessage;\n });\n throw error;\n } finally {\n (0,_execInElement__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(form, 'button[data-previous-inner-text]', (button) => {\n button.innerText = button.getAttribute('data-previous-inner-text');\n button.removeAttribute('disabled');\n });\n }\n });\n form.removeAttribute('data-sheet-api-url');\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (processForm);\n\n\n//# sourceURL=webpack://VideomatikEditor/./src/processForm.js?");
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ var __webpack_exports__ = __webpack_require__("./src/index.js");
/******/
/******/ return __webpack_exports__;
/******/ })()
;
});