@10up/block-components
Version:
10up Components built for the WordPress Block Editor.
466 lines (431 loc) • 16.8 kB
JavaScript
/******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./components/inner-block-slider/icons.js":
/*!************************************************!*\
!*** ./components/inner-block-slider/icons.js ***!
\************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ ChevronLeft: function() { return /* binding */ ChevronLeft; },
/* harmony export */ ChevronRight: function() { return /* binding */ ChevronRight; }
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
var _jsxFileName = "/Users/fabiankaegy/Developer/10up/block-components/components/inner-block-slider/icons.js";
const ChevronLeft = () => (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "40",
height: "40",
fill: "none",
viewBox: "0 0 14.4 23.7",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 2,
columnNumber: 2
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
stroke: "currentColor",
strokeWidth: "3",
d: "M11.19,1.81l-9.12,10,9.12,10",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 9,
columnNumber: 3
}
}));
const ChevronRight = () => (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "40",
height: "40",
fill: "none",
viewBox: "0 0 14.4 23.7",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 14,
columnNumber: 2
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
stroke: "currentColor",
strokeWidth: "3",
d: "M2.1,21.9l9.1-10l-9.1-10",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 3
}
}));
/***/ }),
/***/ "@emotion/react":
/*!*********************************!*\
!*** external "@emotion/react" ***!
\*********************************/
/***/ (function(module) {
module.exports = require("@emotion/react");
/***/ }),
/***/ "@wordpress/block-editor":
/*!******************************************!*\
!*** external "@wordpress/block-editor" ***!
\******************************************/
/***/ (function(module) {
module.exports = require("@wordpress/block-editor");
/***/ }),
/***/ "@wordpress/blocks":
/*!************************************!*\
!*** external "@wordpress/blocks" ***!
\************************************/
/***/ (function(module) {
module.exports = require("@wordpress/blocks");
/***/ }),
/***/ "@wordpress/data":
/*!**********************************!*\
!*** external "@wordpress/data" ***!
\**********************************/
/***/ (function(module) {
module.exports = require("@wordpress/data");
/***/ }),
/***/ "@wordpress/deprecated":
/*!****************************************!*\
!*** external "@wordpress/deprecated" ***!
\****************************************/
/***/ (function(module) {
module.exports = require("@wordpress/deprecated");
/***/ }),
/***/ "@wordpress/element":
/*!*************************************!*\
!*** external "@wordpress/element" ***!
\*************************************/
/***/ (function(module) {
module.exports = require("@wordpress/element");
/***/ })
/******/ });
/************************************************************************/
/******/ // 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/compat get default export */
/******/ !function() {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function() { return module['default']; } :
/******/ function() { return module; };
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(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 */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ }();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
!function() {
/*!************************************************!*\
!*** ./components/inner-block-slider/index.js ***!
\************************************************/
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ InnerBlockSlider: function() { return /* binding */ InnerBlockSlider; }
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _wordpress_deprecated__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/deprecated */ "@wordpress/deprecated");
/* harmony import */ var _wordpress_deprecated__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_deprecated__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _emotion_react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @emotion/react */ "@emotion/react");
/* harmony import */ var _emotion_react__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_emotion_react__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./icons */ "./components/inner-block-slider/icons.js");
var _jsxFileName = "/Users/fabiankaegy/Developer/10up/block-components/components/inner-block-slider/index.js";
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/* eslint-disable */
// @ts-nocheck
/** @jsx jsx */
const InnerBlockSlider = ({
parentBlockId,
slidesPerPage = 1,
allowedBlock,
template = null,
slideHeight = null
}) => {
const [currentPage, setCurrentPage] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(1);
_wordpress_deprecated__WEBPACK_IMPORTED_MODULE_4___default()('InnerBlockSlider', {
since: '1.15.12',
version: '1.16',
alternative: 'the useInnerBlocksProps hook to render the inner blocks and then use the same JS library that powers the slider on the frontend in the editor',
plugin: '10up Block Components'
});
let innerBlockTemplate = template;
if (!innerBlockTemplate) {
innerBlockTemplate = [[allowedBlock]];
}
const slideBlocks = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_1__.useSelect)(select => select('core/block-editor').getBlock(parentBlockId).innerBlocks);
const {
insertBlock
} = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_1__.useDispatch)('core/editor');
const slides = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useRef)();
const slideCount = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useRef)();
const totalPages = Math.ceil(slideBlocks.length / slidesPerPage);
const totalWidth = 100 / slidesPerPage * slideBlocks.length;
const slideSlotWidth = 100 / slideBlocks.length;
const moveOffset = slideSlotWidth * (currentPage - 1) * slidesPerPage;
const addSlide = () => {
const created = (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__.createBlock)(allowedBlock);
insertBlock(created, undefined, parentBlockId);
};
/**
* Reset page to 1 if slidesPerPage changes
*/
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
setCurrentPage(1);
}, [slidesPerPage]);
/**
* If a slide is added, switch to the new slide. If one is deleted, make sure we don't
* show a non-existent slide.
*/
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
if (!slideCount.current) {
slideCount.current = slideBlocks.length;
} else if (slideBlocks.length > slideCount.current) {
// Slide added
slideCount.current = slideBlocks.length;
setCurrentPage(totalPages);
} else if (slideBlocks.length < slideCount.current) {
// Slide deleted
slideCount.current = slideBlocks.length;
if (currentPage > totalPages) {
setCurrentPage(totalPages);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [slideBlocks.length]);
const slidesCSS = (0,_emotion_react__WEBPACK_IMPORTED_MODULE_5__.css)`
/* stylelint-disable */
width: ${totalWidth}%;
transform: translate3d(-${moveOffset}%, 0px, 0px);
${slideHeight ? `height: ${slideHeight};` : ''}
display: flex;
flex-wrap: nowrap;
& > .wp-block {
width: ${slideSlotWidth}%;
}
`;
const innerBlocksProps = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useInnerBlocksProps)({
className: 'slides',
ref: slides
}, {
template: innerBlockTemplate,
orientation: 'horizontal',
allowedBlocks: [allowedBlock]
});
const prevEnabled = currentPage > 1;
const nextEnabled = currentPage < totalPages;
return (0,_emotion_react__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
className: "inner-block-slider",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 114,
columnNumber: 3
}
}, (0,_emotion_react__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
className: "slides-outer",
style: {
overflow: 'hidden'
},
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 4
}
}, (0,_emotion_react__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", _extends({}, innerBlocksProps, {
css: slidesCSS,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 5
}
}))), (0,_emotion_react__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
className: "navigation",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 4
}
}, [...Array(totalPages).keys()].map(i => (0,_emotion_react__WEBPACK_IMPORTED_MODULE_5__.jsx)("button", {
"aria-label": `Slide ${i + 1}`,
onClick: () => {
setCurrentPage(i + 1);
},
type: "button",
key: i + 1,
className: `dot ${currentPage === i + 1 ? 'current' : ''}`,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 6
}
})), (0,_emotion_react__WEBPACK_IMPORTED_MODULE_5__.jsx)("button", {
"aria-label": "Add new slide",
onClick: () => {
addSlide();
},
type: "button",
className: "add",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 5
}
}, (0,_emotion_react__WEBPACK_IMPORTED_MODULE_5__.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
role: "img",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 6
}
}, (0,_emotion_react__WEBPACK_IMPORTED_MODULE_5__.jsx)("path", {
d: "M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 7
}
})))), (0,_emotion_react__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
className: "controls",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 144,
columnNumber: 4
}
}, (0,_emotion_react__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
className: `prev-container ${!prevEnabled ? 'disable' : ''}`,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 145,
columnNumber: 5
}
}, (0,_emotion_react__WEBPACK_IMPORTED_MODULE_5__.jsx)("button", {
onClick: () => {
if (prevEnabled) {
setCurrentPage(currentPage - 1);
}
},
type: "button",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 6
}
}, (0,_emotion_react__WEBPACK_IMPORTED_MODULE_5__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_6__.ChevronLeft, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 7
}
}))), (0,_emotion_react__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
className: `next-container ${!nextEnabled ? 'disable' : ''}`,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 5
}
}, (0,_emotion_react__WEBPACK_IMPORTED_MODULE_5__.jsx)("button", {
onClick: () => {
if (nextEnabled) {
setCurrentPage(currentPage + 1);
}
},
type: "button",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 158,
columnNumber: 6
}
}, (0,_emotion_react__WEBPACK_IMPORTED_MODULE_5__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_6__.ChevronRight, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 166,
columnNumber: 7
}
})))));
};
}();
module.exports = __webpack_exports__;
/******/ })()
;
//# sourceMappingURL=index.js.map