| 1 |
/*! elementor - v3.26.0 - 19-12-2024 */ |
| 2 |
"use strict"; |
| 3 |
(self["webpackChunkelementor"] = self["webpackChunkelementor"] || []).push([["modules_styleguide_assets_js_frontend_app_js"],{ |
| 4 |
|
| 5 |
/***/ "../modules/styleguide/assets/js/frontend/app.js": |
| 6 |
/*!*******************************************************!*\ |
| 7 |
!*** ../modules/styleguide/assets/js/frontend/app.js ***! |
| 8 |
\*******************************************************/ |
| 9 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 10 |
|
| 11 |
|
| 12 |
|
| 13 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 14 |
Object.defineProperty(exports, "__esModule", ({ |
| 15 |
value: true |
| 16 |
})); |
| 17 |
exports["default"] = App; |
| 18 |
var _taggedTemplateLiteral2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteral */ "../node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js")); |
| 19 |
var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react")); |
| 20 |
var _styledComponents = _interopRequireDefault(__webpack_require__(/*! styled-components */ "../node_modules/styled-components/dist/styled-components.browser.esm.js")); |
| 21 |
var _settings = __webpack_require__(/*! ./contexts/settings */ "../modules/styleguide/assets/js/frontend/contexts/settings.js"); |
| 22 |
var _activeContext = _interopRequireDefault(__webpack_require__(/*! ./contexts/active-context */ "../modules/styleguide/assets/js/frontend/contexts/active-context.js")); |
| 23 |
var _header = _interopRequireDefault(__webpack_require__(/*! ./components/header */ "../modules/styleguide/assets/js/frontend/components/header.js")); |
| 24 |
var _colorsArea = _interopRequireDefault(__webpack_require__(/*! ./components/areas/colors-area */ "../modules/styleguide/assets/js/frontend/components/areas/colors-area.js")); |
| 25 |
var _fontsArea = _interopRequireDefault(__webpack_require__(/*! ./components/areas/fonts-area */ "../modules/styleguide/assets/js/frontend/components/areas/fonts-area.js")); |
| 26 |
var _appWrapper = _interopRequireDefault(__webpack_require__(/*! ./components/app-wrapper */ "../modules/styleguide/assets/js/frontend/components/app-wrapper.js")); |
| 27 |
var _templateObject; |
| 28 |
var Content = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tpadding: 48px 0;\n"]))); |
| 29 |
function App() { |
| 30 |
return /*#__PURE__*/_react.default.createElement(_settings.SettingsProvider, null, /*#__PURE__*/_react.default.createElement(_appWrapper.default, null, /*#__PURE__*/_react.default.createElement(_activeContext.default, null, /*#__PURE__*/_react.default.createElement(_header.default, null), /*#__PURE__*/_react.default.createElement(Content, null, /*#__PURE__*/_react.default.createElement(_colorsArea.default, null), /*#__PURE__*/_react.default.createElement(_fontsArea.default, null))))); |
| 31 |
} |
| 32 |
|
| 33 |
/***/ }), |
| 34 |
|
| 35 |
/***/ "../modules/styleguide/assets/js/frontend/components/app-wrapper.js": |
| 36 |
/*!**************************************************************************!*\ |
| 37 |
!*** ../modules/styleguide/assets/js/frontend/components/app-wrapper.js ***! |
| 38 |
\**************************************************************************/ |
| 39 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 40 |
|
| 41 |
/* provided dependency */ var PropTypes = __webpack_require__(/*! prop-types */ "../node_modules/prop-types/index.js"); |
| 42 |
|
| 43 |
|
| 44 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 45 |
Object.defineProperty(exports, "__esModule", ({ |
| 46 |
value: true |
| 47 |
})); |
| 48 |
exports["default"] = AppWrapper; |
| 49 |
var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react")); |
| 50 |
var _settings = __webpack_require__(/*! ../contexts/settings */ "../modules/styleguide/assets/js/frontend/contexts/settings.js"); |
| 51 |
var _loader = _interopRequireDefault(__webpack_require__(/*! ./global/loader */ "../modules/styleguide/assets/js/frontend/components/global/loader.js")); |
| 52 |
function AppWrapper(props) { |
| 53 |
var _useSettings = (0, _settings.useSettings)(), |
| 54 |
settings = _useSettings.settings, |
| 55 |
isReady = _useSettings.isReady; |
| 56 |
if (!isReady) { |
| 57 |
return /*#__PURE__*/_react.default.createElement(_loader.default, null); |
| 58 |
} |
| 59 |
var isDebug = settings.get('config').get('is_debug'), |
| 60 |
Wrapper = isDebug ? _react.default.StrictMode : _react.default.Fragment; |
| 61 |
return /*#__PURE__*/_react.default.createElement(Wrapper, null, props.children); |
| 62 |
} |
| 63 |
AppWrapper.propTypes = { |
| 64 |
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired |
| 65 |
}; |
| 66 |
|
| 67 |
/***/ }), |
| 68 |
|
| 69 |
/***/ "../modules/styleguide/assets/js/frontend/components/areas/area-title.js": |
| 70 |
/*!*******************************************************************************!*\ |
| 71 |
!*** ../modules/styleguide/assets/js/frontend/components/areas/area-title.js ***! |
| 72 |
\*******************************************************************************/ |
| 73 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 74 |
|
| 75 |
|
| 76 |
|
| 77 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 78 |
Object.defineProperty(exports, "__esModule", ({ |
| 79 |
value: true |
| 80 |
})); |
| 81 |
exports["default"] = void 0; |
| 82 |
var _taggedTemplateLiteral2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteral */ "../node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js")); |
| 83 |
var _styledComponents = _interopRequireDefault(__webpack_require__(/*! styled-components */ "../node_modules/styled-components/dist/styled-components.browser.esm.js")); |
| 84 |
var _templateObject; |
| 85 |
var AreaTitle = _styledComponents.default.h2(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tcolor: var(--e-a-color-txt);\n\tfont-family: Roboto, sans-serif;\n\tfont-size: 30px;\n\tfont-weight: 400;\n\ttext-transform: capitalize;\n\tfont-style: normal;\n\ttext-decoration: none;\n\tletter-spacing: 0;\n\tword-spacing: 0;\n\ttext-align: center;\n\tpadding: 0;\n\tmargin: 0 0 48px 0;\n"]))); |
| 86 |
var _default = exports["default"] = AreaTitle; |
| 87 |
|
| 88 |
/***/ }), |
| 89 |
|
| 90 |
/***/ "../modules/styleguide/assets/js/frontend/components/areas/area.js": |
| 91 |
/*!*************************************************************************!*\ |
| 92 |
!*** ../modules/styleguide/assets/js/frontend/components/areas/area.js ***! |
| 93 |
\*************************************************************************/ |
| 94 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 95 |
|
| 96 |
/* provided dependency */ var PropTypes = __webpack_require__(/*! prop-types */ "../node_modules/prop-types/index.js"); |
| 97 |
|
| 98 |
|
| 99 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 100 |
Object.defineProperty(exports, "__esModule", ({ |
| 101 |
value: true |
| 102 |
})); |
| 103 |
exports["default"] = void 0; |
| 104 |
var _taggedTemplateLiteral2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteral */ "../node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js")); |
| 105 |
var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react")); |
| 106 |
var _styledComponents = _interopRequireDefault(__webpack_require__(/*! styled-components */ "../node_modules/styled-components/dist/styled-components.browser.esm.js")); |
| 107 |
var _settings = __webpack_require__(/*! ../../contexts/settings */ "../modules/styleguide/assets/js/frontend/contexts/settings.js"); |
| 108 |
var _loader = _interopRequireDefault(__webpack_require__(/*! ../global/loader */ "../modules/styleguide/assets/js/frontend/components/global/loader.js")); |
| 109 |
var _divBase = _interopRequireDefault(__webpack_require__(/*! ../global/div-base */ "../modules/styleguide/assets/js/frontend/components/global/div-base.js")); |
| 110 |
var _areaTitle = _interopRequireDefault(__webpack_require__(/*! ./area-title */ "../modules/styleguide/assets/js/frontend/components/areas/area-title.js")); |
| 111 |
var _section = _interopRequireDefault(__webpack_require__(/*! ../section */ "../modules/styleguide/assets/js/frontend/components/section.js")); |
| 112 |
var _templateObject; |
| 113 |
var Wrapper = (0, _styledComponents.default)(_divBase.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\twidth: 100%;\n \tpadding-top: 96px;\n\tmin-height: 100px;\n\n\t@media (max-width: 1024px) {\n \tpadding-top: 50px;\n\t}\n"]))); |
| 114 |
var Area = _react.default.forwardRef(function (props, ref) { |
| 115 |
var config = props.config; |
| 116 |
var _useSettings = (0, _settings.useSettings)(), |
| 117 |
settings = _useSettings.settings, |
| 118 |
isReady = _useSettings.isReady; |
| 119 |
return /*#__PURE__*/_react.default.createElement(Wrapper, { |
| 120 |
ref: ref |
| 121 |
}, /*#__PURE__*/_react.default.createElement(_areaTitle.default, { |
| 122 |
name: config.type |
| 123 |
}, config.title), !isReady ? /*#__PURE__*/_react.default.createElement(_loader.default, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, config.sections.map(function (section) { |
| 124 |
var items = settings.get(config.type).get(section.type); |
| 125 |
return items.length ? /*#__PURE__*/_react.default.createElement(_section.default, { |
| 126 |
key: section.type, |
| 127 |
title: section.title, |
| 128 |
items: items, |
| 129 |
columns: section.columns, |
| 130 |
component: config.component, |
| 131 |
type: section.type |
| 132 |
}) : null; |
| 133 |
}))); |
| 134 |
}); |
| 135 |
Area.propTypes = { |
| 136 |
config: PropTypes.shape({ |
| 137 |
type: PropTypes.string.isRequired, |
| 138 |
title: PropTypes.string.isRequired, |
| 139 |
sections: PropTypes.arrayOf(PropTypes.shape({ |
| 140 |
type: PropTypes.string.isRequired, |
| 141 |
title: PropTypes.string.isRequired, |
| 142 |
columns: PropTypes.object |
| 143 |
})).isRequired, |
| 144 |
component: PropTypes.func.isRequired |
| 145 |
}).isRequired |
| 146 |
}; |
| 147 |
var _default = exports["default"] = Area; |
| 148 |
|
| 149 |
/***/ }), |
| 150 |
|
| 151 |
/***/ "../modules/styleguide/assets/js/frontend/components/areas/colors-area.js": |
| 152 |
/*!********************************************************************************!*\ |
| 153 |
!*** ../modules/styleguide/assets/js/frontend/components/areas/colors-area.js ***! |
| 154 |
\********************************************************************************/ |
| 155 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 156 |
|
| 157 |
/* provided dependency */ var __ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n")["__"]; |
| 158 |
|
| 159 |
|
| 160 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 161 |
Object.defineProperty(exports, "__esModule", ({ |
| 162 |
value: true |
| 163 |
})); |
| 164 |
exports["default"] = ColorsArea; |
| 165 |
var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react")); |
| 166 |
var _activeContext = __webpack_require__(/*! ../../contexts/active-context */ "../modules/styleguide/assets/js/frontend/contexts/active-context.js"); |
| 167 |
var _area = _interopRequireDefault(__webpack_require__(/*! ./area */ "../modules/styleguide/assets/js/frontend/components/areas/area.js")); |
| 168 |
var _color = _interopRequireDefault(__webpack_require__(/*! ../item/color */ "../modules/styleguide/assets/js/frontend/components/item/color.js")); |
| 169 |
function ColorsArea() { |
| 170 |
var _useActiveContext = (0, _activeContext.useActiveContext)(), |
| 171 |
colorsAreaRef = _useActiveContext.colorsAreaRef; |
| 172 |
var areaConfig = { |
| 173 |
title: __('Global Colors', 'elementor'), |
| 174 |
type: 'colors', |
| 175 |
component: _color.default, |
| 176 |
sections: [{ |
| 177 |
type: 'system_colors', |
| 178 |
title: __('System Colors', 'elementor'), |
| 179 |
columns: { |
| 180 |
desktop: 4, |
| 181 |
mobile: 2 |
| 182 |
} |
| 183 |
}, { |
| 184 |
type: 'custom_colors', |
| 185 |
title: __('Custom Colors', 'elementor'), |
| 186 |
columns: { |
| 187 |
desktop: 6, |
| 188 |
mobile: 2 |
| 189 |
} |
| 190 |
}] |
| 191 |
}; |
| 192 |
return /*#__PURE__*/_react.default.createElement(_area.default, { |
| 193 |
ref: colorsAreaRef, |
| 194 |
config: areaConfig |
| 195 |
}); |
| 196 |
} |
| 197 |
|
| 198 |
/***/ }), |
| 199 |
|
| 200 |
/***/ "../modules/styleguide/assets/js/frontend/components/areas/fonts-area.js": |
| 201 |
/*!*******************************************************************************!*\ |
| 202 |
!*** ../modules/styleguide/assets/js/frontend/components/areas/fonts-area.js ***! |
| 203 |
\*******************************************************************************/ |
| 204 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 205 |
|
| 206 |
/* provided dependency */ var __ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n")["__"]; |
| 207 |
|
| 208 |
|
| 209 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 210 |
Object.defineProperty(exports, "__esModule", ({ |
| 211 |
value: true |
| 212 |
})); |
| 213 |
exports["default"] = FontsArea; |
| 214 |
var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react")); |
| 215 |
var _activeContext = __webpack_require__(/*! ../../contexts/active-context */ "../modules/styleguide/assets/js/frontend/contexts/active-context.js"); |
| 216 |
var _area = _interopRequireDefault(__webpack_require__(/*! ./area */ "../modules/styleguide/assets/js/frontend/components/areas/area.js")); |
| 217 |
var _font = _interopRequireDefault(__webpack_require__(/*! ../item/font */ "../modules/styleguide/assets/js/frontend/components/item/font.js")); |
| 218 |
function FontsArea() { |
| 219 |
var _useActiveContext = (0, _activeContext.useActiveContext)(), |
| 220 |
fontsAreaRef = _useActiveContext.fontsAreaRef; |
| 221 |
var areaConfig = { |
| 222 |
title: __('Global Fonts', 'elementor'), |
| 223 |
type: 'fonts', |
| 224 |
component: _font.default, |
| 225 |
sections: [{ |
| 226 |
type: 'system_typography', |
| 227 |
title: __('System Fonts', 'elementor'), |
| 228 |
flex: 'column', |
| 229 |
columns: { |
| 230 |
desktop: 1, |
| 231 |
mobile: 1 |
| 232 |
} |
| 233 |
}, { |
| 234 |
type: 'custom_typography', |
| 235 |
title: __('Custom Fonts', 'elementor'), |
| 236 |
flex: 'column', |
| 237 |
columns: { |
| 238 |
desktop: 1, |
| 239 |
mobile: 1 |
| 240 |
} |
| 241 |
}] |
| 242 |
}; |
| 243 |
return /*#__PURE__*/_react.default.createElement(_area.default, { |
| 244 |
ref: fontsAreaRef, |
| 245 |
config: areaConfig |
| 246 |
}); |
| 247 |
} |
| 248 |
|
| 249 |
/***/ }), |
| 250 |
|
| 251 |
/***/ "../modules/styleguide/assets/js/frontend/components/global/div-base.js": |
| 252 |
/*!******************************************************************************!*\ |
| 253 |
!*** ../modules/styleguide/assets/js/frontend/components/global/div-base.js ***! |
| 254 |
\******************************************************************************/ |
| 255 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 256 |
|
| 257 |
|
| 258 |
|
| 259 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 260 |
Object.defineProperty(exports, "__esModule", ({ |
| 261 |
value: true |
| 262 |
})); |
| 263 |
exports["default"] = void 0; |
| 264 |
var _taggedTemplateLiteral2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteral */ "../node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js")); |
| 265 |
var _styledComponents = _interopRequireDefault(__webpack_require__(/*! styled-components */ "../node_modules/styled-components/dist/styled-components.browser.esm.js")); |
| 266 |
var _templateObject; |
| 267 |
var DivBase = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tbox-sizing: border-box;\n\tposition: relative;\n"]))); |
| 268 |
var _default = exports["default"] = DivBase; |
| 269 |
|
| 270 |
/***/ }), |
| 271 |
|
| 272 |
/***/ "../modules/styleguide/assets/js/frontend/components/global/element-title.js": |
| 273 |
/*!***********************************************************************************!*\ |
| 274 |
!*** ../modules/styleguide/assets/js/frontend/components/global/element-title.js ***! |
| 275 |
\***********************************************************************************/ |
| 276 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 277 |
|
| 278 |
|
| 279 |
|
| 280 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 281 |
Object.defineProperty(exports, "__esModule", ({ |
| 282 |
value: true |
| 283 |
})); |
| 284 |
exports["default"] = void 0; |
| 285 |
var _taggedTemplateLiteral2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteral */ "../node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js")); |
| 286 |
var _styledComponents = _interopRequireDefault(__webpack_require__(/*! styled-components */ "../node_modules/styled-components/dist/styled-components.browser.esm.js")); |
| 287 |
var _templateObject; |
| 288 |
var ElementTitle = _styledComponents.default.p(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tcolor: var(--e-a-color-txt);\n\tfont-family: Roboto, sans-serif;\n\tfont-size: 12px;\n\tfont-weight: 500;\n\ttext-transform: capitalize;\n\tfont-style: normal;\n\ttext-decoration: none;\n\tline-height: 1.1em;\n\tletter-spacing: 0;\n\tword-spacing: 0;\n\tpadding: 0;\n\tmargin: 0;\n"]))); |
| 289 |
var _default = exports["default"] = ElementTitle; |
| 290 |
|
| 291 |
/***/ }), |
| 292 |
|
| 293 |
/***/ "../modules/styleguide/assets/js/frontend/components/global/element-wrapper.js": |
| 294 |
/*!*************************************************************************************!*\ |
| 295 |
!*** ../modules/styleguide/assets/js/frontend/components/global/element-wrapper.js ***! |
| 296 |
\*************************************************************************************/ |
| 297 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 298 |
|
| 299 |
/* provided dependency */ var PropTypes = __webpack_require__(/*! prop-types */ "../node_modules/prop-types/index.js"); |
| 300 |
|
| 301 |
|
| 302 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 303 |
var _typeof = __webpack_require__(/*! @babel/runtime/helpers/typeof */ "../node_modules/@babel/runtime/helpers/typeof.js"); |
| 304 |
Object.defineProperty(exports, "__esModule", ({ |
| 305 |
value: true |
| 306 |
})); |
| 307 |
exports["default"] = void 0; |
| 308 |
var _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ "../node_modules/@babel/runtime/helpers/extends.js")); |
| 309 |
var _taggedTemplateLiteral2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteral */ "../node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js")); |
| 310 |
var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react")); |
| 311 |
var _styledComponents = _interopRequireWildcard(__webpack_require__(/*! styled-components */ "../node_modules/styled-components/dist/styled-components.browser.esm.js")); |
| 312 |
var _divBase = _interopRequireDefault(__webpack_require__(/*! ./div-base */ "../modules/styleguide/assets/js/frontend/components/global/div-base.js")); |
| 313 |
var _templateObject, _templateObject2, _templateObject3; |
| 314 |
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); } |
| 315 |
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } |
| 316 |
var Wrapper = (0, _styledComponents.default)(_divBase.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n\talign-items: flex-start;\n\tborder: 1px solid transparent;\n\tborder-radius: 3px;\n\tpadding: 12px;\n\tcursor: pointer;\n\t", "\n\n\t&:hover:not(.active) {\n\t\tbackground-color: var(--e-a-bg-hover);\n\t\tborder-color: var(--e-a-border-color-bold);\n\t}\n\n\t&.active {\n\t\tbackground-color: var(--e-a-bg-active);\n\t\tborder-color: var(--e-a-border-color-accent);\n\t}\n\n\t@media (max-width: 767px) {\n\t\t", "\n\t}\n"])), function (_ref) { |
| 317 |
var _columns$desktop; |
| 318 |
var columns = _ref.columns; |
| 319 |
var columnWidth = 100 / ((_columns$desktop = columns.desktop) !== null && _columns$desktop !== void 0 ? _columns$desktop : 1); |
| 320 |
return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\tflex: 0 0 ", "%;\n\t\t"])), columnWidth); |
| 321 |
}, function (_ref2) { |
| 322 |
var _columns$mobile; |
| 323 |
var columns = _ref2.columns; |
| 324 |
var columnWidth = 100 / ((_columns$mobile = columns.mobile) !== null && _columns$mobile !== void 0 ? _columns$mobile : 1); |
| 325 |
return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\tflex: 0 0 ", "%;\n\t\t\t"])), columnWidth); |
| 326 |
}); |
| 327 |
var ElementWrapper = _react.default.forwardRef(function (props, ref) { |
| 328 |
var isActive = props.isActive, |
| 329 |
children = props.children; |
| 330 |
return /*#__PURE__*/_react.default.createElement(Wrapper, (0, _extends2.default)({}, props, { |
| 331 |
ref: ref, |
| 332 |
className: isActive ? 'active' : '' |
| 333 |
}), children); |
| 334 |
}); |
| 335 |
var _default = exports["default"] = ElementWrapper; |
| 336 |
ElementWrapper.propTypes = { |
| 337 |
isActive: PropTypes.bool, |
| 338 |
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]) |
| 339 |
}; |
| 340 |
|
| 341 |
/***/ }), |
| 342 |
|
| 343 |
/***/ "../modules/styleguide/assets/js/frontend/components/global/inner-wrapper.js": |
| 344 |
/*!***********************************************************************************!*\ |
| 345 |
!*** ../modules/styleguide/assets/js/frontend/components/global/inner-wrapper.js ***! |
| 346 |
\***********************************************************************************/ |
| 347 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 348 |
|
| 349 |
|
| 350 |
|
| 351 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 352 |
Object.defineProperty(exports, "__esModule", ({ |
| 353 |
value: true |
| 354 |
})); |
| 355 |
exports["default"] = void 0; |
| 356 |
var _taggedTemplateLiteral2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteral */ "../node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js")); |
| 357 |
var _styledComponents = _interopRequireDefault(__webpack_require__(/*! styled-components */ "../node_modules/styled-components/dist/styled-components.browser.esm.js")); |
| 358 |
var _divBase = _interopRequireDefault(__webpack_require__(/*! ./div-base */ "../modules/styleguide/assets/js/frontend/components/global/div-base.js")); |
| 359 |
var _templateObject; |
| 360 |
var innerWrapper = (0, _styledComponents.default)(_divBase.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 100%;\n\tmax-width: 1140px;\n\tmargin: auto;\n\tflex-wrap: wrap;\n\tflex-direction: ", ";\n\n\t@media (max-width: 1140px) {\n\t\tpadding: 0 15px;\n\t}\n\n\t@media (max-width: 767px) {\n\t\tpadding: 0 13px;\n\t}\n"])), function (props) { |
| 361 |
var _props$flexDirection; |
| 362 |
return (_props$flexDirection = props.flexDirection) !== null && _props$flexDirection !== void 0 ? _props$flexDirection : 'row'; |
| 363 |
}); |
| 364 |
var _default = exports["default"] = innerWrapper; |
| 365 |
|
| 366 |
/***/ }), |
| 367 |
|
| 368 |
/***/ "../modules/styleguide/assets/js/frontend/components/global/loader.js": |
| 369 |
/*!****************************************************************************!*\ |
| 370 |
!*** ../modules/styleguide/assets/js/frontend/components/global/loader.js ***! |
| 371 |
\****************************************************************************/ |
| 372 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 373 |
|
| 374 |
|
| 375 |
|
| 376 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 377 |
Object.defineProperty(exports, "__esModule", ({ |
| 378 |
value: true |
| 379 |
})); |
| 380 |
exports["default"] = Loader; |
| 381 |
var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react")); |
| 382 |
function Loader() { |
| 383 |
return /*#__PURE__*/_react.default.createElement("div", { |
| 384 |
className: "e-styleguide-loader" |
| 385 |
}, /*#__PURE__*/_react.default.createElement("i", { |
| 386 |
className: "eicon-loading eicon-animation-spin" |
| 387 |
})); |
| 388 |
} |
| 389 |
|
| 390 |
/***/ }), |
| 391 |
|
| 392 |
/***/ "../modules/styleguide/assets/js/frontend/components/header.js": |
| 393 |
/*!*********************************************************************!*\ |
| 394 |
!*** ../modules/styleguide/assets/js/frontend/components/header.js ***! |
| 395 |
\*********************************************************************/ |
| 396 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 397 |
|
| 398 |
/* provided dependency */ var __ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n")["__"]; |
| 399 |
/* provided dependency */ var PropTypes = __webpack_require__(/*! prop-types */ "../node_modules/prop-types/index.js"); |
| 400 |
|
| 401 |
|
| 402 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 403 |
Object.defineProperty(exports, "__esModule", ({ |
| 404 |
value: true |
| 405 |
})); |
| 406 |
exports["default"] = Header; |
| 407 |
var _taggedTemplateLiteral2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteral */ "../node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js")); |
| 408 |
var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react")); |
| 409 |
var _styledComponents = _interopRequireDefault(__webpack_require__(/*! styled-components */ "../node_modules/styled-components/dist/styled-components.browser.esm.js")); |
| 410 |
var _activeContext = __webpack_require__(/*! ../contexts/active-context */ "../modules/styleguide/assets/js/frontend/contexts/active-context.js"); |
| 411 |
var _divBase = _interopRequireDefault(__webpack_require__(/*! ./global/div-base */ "../modules/styleguide/assets/js/frontend/components/global/div-base.js")); |
| 412 |
var _innerWrapper = _interopRequireDefault(__webpack_require__(/*! ./global/inner-wrapper */ "../modules/styleguide/assets/js/frontend/components/global/inner-wrapper.js")); |
| 413 |
var _templateObject, _templateObject2, _templateObject3, _templateObject4; |
| 414 |
var Button = _styledComponents.default.button.attrs(function (props) { |
| 415 |
return { |
| 416 |
'data-e-active': props.isActive ? true : null |
| 417 |
}; |
| 418 |
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tfont-size: 16px;\n\theight: 100%;\n\tfont-weight: 500;\n\tfont-style: normal;\n\ttext-decoration: none;\n\tline-height: 1.5em;\n\tletter-spacing: 0;\n\tcolor: var(--e-a-color-txt);\n\tborder: none;\n\tbackground: none;\n\ttext-transform: capitalize;\n\tfont-family: Roboto, sans-serif;\n\tpadding: 0;\n\n\t&:hover, &[data-e-active='true'], &:focus {\n\t\toutline: none;\n\t\tbackground: none;\n\t\tcolor: var(--e-a-color-txt-accent);\n\t}\n"]))); |
| 419 |
var AreaButton = function AreaButton(props) { |
| 420 |
var _useActiveContext = (0, _activeContext.useActiveContext)(), |
| 421 |
activeArea = _useActiveContext.activeArea, |
| 422 |
activateArea = _useActiveContext.activateArea; |
| 423 |
var area = props.area, |
| 424 |
children = props.children; |
| 425 |
var onClick = function onClick() { |
| 426 |
activateArea(area); |
| 427 |
}; |
| 428 |
|
| 429 |
// TODO: Add hover/active states |
| 430 |
|
| 431 |
return /*#__PURE__*/_react.default.createElement(Button, { |
| 432 |
variant: "transparent", |
| 433 |
size: "s", |
| 434 |
onClick: onClick, |
| 435 |
isActive: area === activeArea |
| 436 |
}, children); |
| 437 |
}; |
| 438 |
var Wrapper = (0, _styledComponents.default)(_divBase.default)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 48px;\n\tdisplay: flex;\n\tbackground: var(--e-a-bg-default);\n\tborder-bottom: 1px solid var(--e-a-border-color-bold);\n\tz-index: 1;\n"]))); |
| 439 |
var ButtonsWrapper = (0, _styledComponents.default)(_divBase.default)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\tflex-grow: 1;\n\tgap: 20px;\n"]))); |
| 440 |
var Title = _styledComponents.default.h2(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\tcolor: var(--e-a-color-txt-accent);\n\tfont-family: Roboto, sans-serif;\n\tfont-size: 16px;\n\tfont-weight: 600;\n\ttext-transform: capitalize;\n\tfont-style: normal;\n\ttext-decoration: none;\n\tline-height: 1.2em;\n\tletter-spacing: 0;\n\tword-spacing: 0;\n\tmargin: 0;\n"]))); |
| 441 |
function Header() { |
| 442 |
return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_innerWrapper.default, null, /*#__PURE__*/_react.default.createElement(Title, null, __('Show global settings', 'elementor')), /*#__PURE__*/_react.default.createElement(ButtonsWrapper, null, /*#__PURE__*/_react.default.createElement(AreaButton, { |
| 443 |
area: 'colors' |
| 444 |
}, __('Colors', 'elementor')), /*#__PURE__*/_react.default.createElement(AreaButton, { |
| 445 |
area: 'fonts' |
| 446 |
}, __('Fonts', 'elementor'))))); |
| 447 |
} |
| 448 |
AreaButton.propTypes = { |
| 449 |
area: PropTypes.string.isRequired, |
| 450 |
children: PropTypes.node.isRequired |
| 451 |
}; |
| 452 |
|
| 453 |
/***/ }), |
| 454 |
|
| 455 |
/***/ "../modules/styleguide/assets/js/frontend/components/item/color.js": |
| 456 |
/*!*************************************************************************!*\ |
| 457 |
!*** ../modules/styleguide/assets/js/frontend/components/item/color.js ***! |
| 458 |
\*************************************************************************/ |
| 459 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 460 |
|
| 461 |
/* provided dependency */ var PropTypes = __webpack_require__(/*! prop-types */ "../node_modules/prop-types/index.js"); |
| 462 |
|
| 463 |
|
| 464 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 465 |
var _typeof = __webpack_require__(/*! @babel/runtime/helpers/typeof */ "../node_modules/@babel/runtime/helpers/typeof.js"); |
| 466 |
Object.defineProperty(exports, "__esModule", ({ |
| 467 |
value: true |
| 468 |
})); |
| 469 |
exports["default"] = Color; |
| 470 |
var _taggedTemplateLiteral2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteral */ "../node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js")); |
| 471 |
var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react")); |
| 472 |
var _styledComponents = _interopRequireDefault(__webpack_require__(/*! styled-components */ "../node_modules/styled-components/dist/styled-components.browser.esm.js")); |
| 473 |
var _divBase = _interopRequireDefault(__webpack_require__(/*! ../global/div-base */ "../modules/styleguide/assets/js/frontend/components/global/div-base.js")); |
| 474 |
var _elementTitle = _interopRequireDefault(__webpack_require__(/*! ../global/element-title */ "../modules/styleguide/assets/js/frontend/components/global/element-title.js")); |
| 475 |
var _elementWrapper = _interopRequireDefault(__webpack_require__(/*! ../global/element-wrapper */ "../modules/styleguide/assets/js/frontend/components/global/element-wrapper.js")); |
| 476 |
var _activeContext = __webpack_require__(/*! ../../contexts/active-context */ "../modules/styleguide/assets/js/frontend/contexts/active-context.js"); |
| 477 |
var _templateObject, _templateObject2; |
| 478 |
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); } |
| 479 |
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } |
| 480 |
var Content = (0, _styledComponents.default)(_divBase.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\twidth: 100%;\n\theight: 100px;\n\tbackground-color: ", ";\n\tborder: 1px solid var(--e-a-border-color-focus);\n\tborder-radius: 3px;\n\talign-items: end;\n"])), function (props) { |
| 481 |
return props.hex; |
| 482 |
}); |
| 483 |
var HexString = _styledComponents.default.p(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\tcolor: var(--e-a-color-txt-invert);\n\tfont-family: Roboto, sans-serif;\n\theight: 12px;\n\tfont-size: 12px;\n\tfont-weight: 500;\n\ttext-transform: uppercase;\n\tfont-style: normal;\n\ttext-decoration: none;\n\tline-height: 1.1em;\n\tletter-spacing: 0;\n\tword-spacing: 0;\n\tmargin: 12px;\n"]))); |
| 484 |
function Color(props) { |
| 485 |
var _useActiveContext = (0, _activeContext.useActiveContext)(), |
| 486 |
activeElement = _useActiveContext.activeElement, |
| 487 |
activateElement = _useActiveContext.activateElement, |
| 488 |
getElementControl = _useActiveContext.getElementControl; |
| 489 |
var item = props.item, |
| 490 |
type = props.type; |
| 491 |
var source = 'color'; |
| 492 |
var _id = item._id, |
| 493 |
title = item.title, |
| 494 |
hex = item.color; |
| 495 |
var elementControl = getElementControl(type, source, _id); |
| 496 |
var ref = (0, _react.useRef)(null); |
| 497 |
(0, _react.useEffect)(function () { |
| 498 |
if (elementControl === activeElement) { |
| 499 |
ref.current.scrollIntoView({ |
| 500 |
behavior: 'smooth', |
| 501 |
block: 'center', |
| 502 |
inline: 'center' |
| 503 |
}); |
| 504 |
} |
| 505 |
}, [activeElement]); |
| 506 |
var onClick = function onClick() { |
| 507 |
activateElement(type, source, _id); |
| 508 |
}; |
| 509 |
return /*#__PURE__*/_react.default.createElement(_elementWrapper.default, { |
| 510 |
columns: props.columns, |
| 511 |
ref: ref, |
| 512 |
isActive: elementControl === activeElement, |
| 513 |
onClick: onClick |
| 514 |
}, /*#__PURE__*/_react.default.createElement(_elementTitle.default, null, title), /*#__PURE__*/_react.default.createElement(Content, { |
| 515 |
hex: hex |
| 516 |
}, /*#__PURE__*/_react.default.createElement(HexString, null, hex))); |
| 517 |
} |
| 518 |
Color.propTypes = { |
| 519 |
item: PropTypes.shape({ |
| 520 |
_id: PropTypes.string.isRequired, |
| 521 |
title: PropTypes.string.isRequired, |
| 522 |
color: PropTypes.string |
| 523 |
}).isRequired, |
| 524 |
type: PropTypes.string.isRequired, |
| 525 |
columns: PropTypes.shape({ |
| 526 |
desktop: PropTypes.number, |
| 527 |
mobile: PropTypes.number |
| 528 |
}) |
| 529 |
}; |
| 530 |
|
| 531 |
/***/ }), |
| 532 |
|
| 533 |
/***/ "../modules/styleguide/assets/js/frontend/components/item/font.js": |
| 534 |
/*!************************************************************************!*\ |
| 535 |
!*** ../modules/styleguide/assets/js/frontend/components/item/font.js ***! |
| 536 |
\************************************************************************/ |
| 537 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 538 |
|
| 539 |
/* provided dependency */ var __ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n")["__"]; |
| 540 |
/* provided dependency */ var PropTypes = __webpack_require__(/*! prop-types */ "../node_modules/prop-types/index.js"); |
| 541 |
|
| 542 |
|
| 543 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 544 |
var _typeof = __webpack_require__(/*! @babel/runtime/helpers/typeof */ "../node_modules/@babel/runtime/helpers/typeof.js"); |
| 545 |
Object.defineProperty(exports, "__esModule", ({ |
| 546 |
value: true |
| 547 |
})); |
| 548 |
exports["default"] = Font; |
| 549 |
var _taggedTemplateLiteral2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteral */ "../node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js")); |
| 550 |
var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react")); |
| 551 |
var _styledComponents = _interopRequireDefault(__webpack_require__(/*! styled-components */ "../node_modules/styled-components/dist/styled-components.browser.esm.js")); |
| 552 |
var _activeContext = __webpack_require__(/*! ../../contexts/active-context */ "../modules/styleguide/assets/js/frontend/contexts/active-context.js"); |
| 553 |
var _settings = __webpack_require__(/*! ../../contexts/settings */ "../modules/styleguide/assets/js/frontend/contexts/settings.js"); |
| 554 |
var _elementWrapper = _interopRequireDefault(__webpack_require__(/*! ../global/element-wrapper */ "../modules/styleguide/assets/js/frontend/components/global/element-wrapper.js")); |
| 555 |
var _elementTitle = _interopRequireDefault(__webpack_require__(/*! ../global/element-title */ "../modules/styleguide/assets/js/frontend/components/global/element-title.js")); |
| 556 |
var _templateObject, _templateObject2; |
| 557 |
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); } |
| 558 |
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } |
| 559 |
var Title = (0, _styledComponents.default)(_elementTitle.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tfont-size: 18px;\n"]))); |
| 560 |
var Content = _styledComponents.default.p.withConfig({ |
| 561 |
shouldForwardProp: function shouldForwardProp(prop) { |
| 562 |
return 'style' !== prop; |
| 563 |
} |
| 564 |
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n"])), function (_ref) { |
| 565 |
var style = _ref.style; |
| 566 |
var styleObjectToString = function styleObjectToString(obj) { |
| 567 |
return Object.keys(obj).reduce(function (acc, key) { |
| 568 |
return acc + "".concat(key, ": ").concat(obj[key], ";"); |
| 569 |
}, ''); |
| 570 |
}; |
| 571 |
return "\n\t\t\t".concat(styleObjectToString(style.style), "\n\n\t\t\t@media (max-width: 1024px) {\n\t\t\t\t").concat(styleObjectToString(style.tablet), "\n\t\t\t}\n\n\t\t\t@media (max-width: 767px) {\n\t\t\t\t").concat(styleObjectToString(style.mobile), "\n\t\t\t}\n\t\t"); |
| 572 |
}); |
| 573 |
var parseFontToStyle = function parseFontToStyle(font, fallbackFamily) { |
| 574 |
var defaultKeyParser = function defaultKeyParser(key) { |
| 575 |
return key.replace('typography_', '').replace('_', '-'); |
| 576 |
}; |
| 577 |
var fallbackLowered = fallbackFamily.toLowerCase(); |
| 578 |
var familyParser = function familyParser(value) { |
| 579 |
return value ? value + ", ".concat(fallbackLowered) : fallbackLowered; |
| 580 |
}; |
| 581 |
var sizeParser = function sizeParser(value) { |
| 582 |
if (!value || !value.size) { |
| 583 |
return ''; |
| 584 |
} |
| 585 |
return "".concat(value.size).concat(value.unit); |
| 586 |
}; |
| 587 |
var defaultParser = function defaultParser(value) { |
| 588 |
return value; |
| 589 |
}; |
| 590 |
var allowedProperties = { |
| 591 |
typography_font_family: { |
| 592 |
valueParser: familyParser, |
| 593 |
keyParser: defaultKeyParser |
| 594 |
}, |
| 595 |
typography_font_size: { |
| 596 |
valueParser: sizeParser, |
| 597 |
keyParser: defaultKeyParser |
| 598 |
}, |
| 599 |
typography_letter_spacing: { |
| 600 |
valueParser: sizeParser, |
| 601 |
keyParser: defaultKeyParser |
| 602 |
}, |
| 603 |
typography_line_height: { |
| 604 |
valueParser: sizeParser, |
| 605 |
keyParser: defaultKeyParser |
| 606 |
}, |
| 607 |
typography_word_spacing: { |
| 608 |
valueParser: sizeParser, |
| 609 |
keyParser: defaultKeyParser |
| 610 |
}, |
| 611 |
typography_font_style: { |
| 612 |
valueParser: defaultParser, |
| 613 |
keyParser: defaultKeyParser |
| 614 |
}, |
| 615 |
typography_font_weight: { |
| 616 |
valueParser: defaultParser, |
| 617 |
keyParser: defaultKeyParser |
| 618 |
}, |
| 619 |
typography_text_transform: { |
| 620 |
valueParser: defaultParser, |
| 621 |
keyParser: defaultKeyParser |
| 622 |
}, |
| 623 |
typography_text_decoration: { |
| 624 |
valueParser: defaultParser, |
| 625 |
keyParser: defaultKeyParser |
| 626 |
} |
| 627 |
}; |
| 628 |
var responsiveProperties = ['typography_font_size', 'typography_letter_spacing', 'typography_line_height', 'typography_word_spacing']; |
| 629 |
var reducer = function reducer(acc, property, screen) { |
| 630 |
var parsers = allowedProperties[property]; |
| 631 |
var key = parsers.keyParser(property); |
| 632 |
var keyInFontObject = property + (screen ? '_' + screen : ''); |
| 633 |
var value = parsers.valueParser(font[keyInFontObject]); |
| 634 |
if (value) { |
| 635 |
acc[key] = value; |
| 636 |
} |
| 637 |
return acc; |
| 638 |
}; |
| 639 |
var style = Object.keys(allowedProperties).reduce(function (acc, property) { |
| 640 |
return reducer(acc, property, ''); |
| 641 |
}, {}); |
| 642 |
var tablet = responsiveProperties.reduce(function (acc, property) { |
| 643 |
return reducer(acc, property, 'tablet'); |
| 644 |
}, {}); |
| 645 |
var mobile = responsiveProperties.reduce(function (acc, property) { |
| 646 |
return reducer(acc, property, 'mobile'); |
| 647 |
}, {}); |
| 648 |
return { |
| 649 |
style: style, |
| 650 |
tablet: tablet, |
| 651 |
mobile: mobile |
| 652 |
}; |
| 653 |
}; |
| 654 |
function Font(props) { |
| 655 |
var _useActiveContext = (0, _activeContext.useActiveContext)(), |
| 656 |
activeElement = _useActiveContext.activeElement, |
| 657 |
activateElement = _useActiveContext.activateElement, |
| 658 |
getElementControl = _useActiveContext.getElementControl; |
| 659 |
var item = props.item, |
| 660 |
type = props.type; |
| 661 |
var source = 'typography'; |
| 662 |
var _id = item._id, |
| 663 |
title = item.title; |
| 664 |
var elementControl = getElementControl(type, source, _id); |
| 665 |
var ref = (0, _react.useRef)(null); |
| 666 |
var _useSettings = (0, _settings.useSettings)(), |
| 667 |
settings = _useSettings.settings, |
| 668 |
isReady = _useSettings.isReady; |
| 669 |
var generateStyle = (0, _react.useMemo)(function () { |
| 670 |
if (!isReady) { |
| 671 |
return ''; |
| 672 |
} |
| 673 |
return parseFontToStyle(item, settings.get('fonts').get('fallback_font')); |
| 674 |
}, [item, settings]); |
| 675 |
var onClick = function onClick() { |
| 676 |
activateElement(type, source, _id); |
| 677 |
}; |
| 678 |
(0, _react.useEffect)(function () { |
| 679 |
if (elementControl === activeElement) { |
| 680 |
ref.current.scrollIntoView({ |
| 681 |
behavior: 'smooth', |
| 682 |
block: 'center', |
| 683 |
inline: 'center' |
| 684 |
}); |
| 685 |
} |
| 686 |
}, [activeElement]); |
| 687 |
return /*#__PURE__*/_react.default.createElement(_elementWrapper.default, { |
| 688 |
columns: props.columns, |
| 689 |
ref: ref, |
| 690 |
isActive: elementControl === activeElement, |
| 691 |
onClick: onClick |
| 692 |
}, /*#__PURE__*/_react.default.createElement(Title, null, title), /*#__PURE__*/_react.default.createElement(Content, { |
| 693 |
style: generateStyle |
| 694 |
}, __('The five boxing wizards jump quickly.', 'elementor'))); |
| 695 |
} |
| 696 |
Font.propTypes = { |
| 697 |
item: PropTypes.shape({ |
| 698 |
_id: PropTypes.string.isRequired, |
| 699 |
title: PropTypes.string.isRequired, |
| 700 |
color: PropTypes.string |
| 701 |
}).isRequired, |
| 702 |
type: PropTypes.string.isRequired, |
| 703 |
columns: PropTypes.shape({ |
| 704 |
desktop: PropTypes.number, |
| 705 |
mobile: PropTypes.number |
| 706 |
}) |
| 707 |
}; |
| 708 |
|
| 709 |
/***/ }), |
| 710 |
|
| 711 |
/***/ "../modules/styleguide/assets/js/frontend/components/section-title.js": |
| 712 |
/*!****************************************************************************!*\ |
| 713 |
!*** ../modules/styleguide/assets/js/frontend/components/section-title.js ***! |
| 714 |
\****************************************************************************/ |
| 715 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 716 |
|
| 717 |
|
| 718 |
|
| 719 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 720 |
Object.defineProperty(exports, "__esModule", ({ |
| 721 |
value: true |
| 722 |
})); |
| 723 |
exports["default"] = void 0; |
| 724 |
var _taggedTemplateLiteral2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteral */ "../node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js")); |
| 725 |
var _styledComponents = _interopRequireDefault(__webpack_require__(/*! styled-components */ "../node_modules/styled-components/dist/styled-components.browser.esm.js")); |
| 726 |
var _templateObject; |
| 727 |
var SectionTitle = _styledComponents.default.h3(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tpadding: 16px 12px;\n\tborder-style: solid;\n\tborder-width: 0 0 1px 0;\n\tborder-color: var(--e-a-border-color-bold);\n\tcolor: var(--e-a-color-txt);\n\tfont-family: Roboto, sans-serif;\n\tfont-size: 16px;\n\tfont-weight: 500;\n\ttext-transform: capitalize;\n\tfont-style: normal;\n\ttext-decoration: none;\n\tline-height: 1.5em;\n\tletter-spacing: 0;\n\tword-spacing: 0;\n\tmargin: 0 auto 25px;\n\twidth: 100%;\n\tmax-width: 1140px;\n"]))); |
| 728 |
var _default = exports["default"] = SectionTitle; |
| 729 |
|
| 730 |
/***/ }), |
| 731 |
|
| 732 |
/***/ "../modules/styleguide/assets/js/frontend/components/section.js": |
| 733 |
/*!**********************************************************************!*\ |
| 734 |
!*** ../modules/styleguide/assets/js/frontend/components/section.js ***! |
| 735 |
\**********************************************************************/ |
| 736 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 737 |
|
| 738 |
/* provided dependency */ var PropTypes = __webpack_require__(/*! prop-types */ "../node_modules/prop-types/index.js"); |
| 739 |
|
| 740 |
|
| 741 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 742 |
var _typeof = __webpack_require__(/*! @babel/runtime/helpers/typeof */ "../node_modules/@babel/runtime/helpers/typeof.js"); |
| 743 |
Object.defineProperty(exports, "__esModule", ({ |
| 744 |
value: true |
| 745 |
})); |
| 746 |
exports["default"] = Section; |
| 747 |
var _taggedTemplateLiteral2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteral */ "../node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js")); |
| 748 |
var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react")); |
| 749 |
var _styledComponents = _interopRequireWildcard(__webpack_require__(/*! styled-components */ "../node_modules/styled-components/dist/styled-components.browser.esm.js")); |
| 750 |
var _sectionTitle = _interopRequireDefault(__webpack_require__(/*! ./section-title */ "../modules/styleguide/assets/js/frontend/components/section-title.js")); |
| 751 |
var _divBase = _interopRequireDefault(__webpack_require__(/*! ./global/div-base */ "../modules/styleguide/assets/js/frontend/components/global/div-base.js")); |
| 752 |
var _innerWrapper = _interopRequireDefault(__webpack_require__(/*! ./global/inner-wrapper */ "../modules/styleguide/assets/js/frontend/components/global/inner-wrapper.js")); |
| 753 |
var _templateObject, _templateObject2, _templateObject3; |
| 754 |
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); } |
| 755 |
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } |
| 756 |
var Wrapper = (0, _styledComponents.default)(_divBase.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tmargin-top: 55px;\n"]))); |
| 757 |
var Content = (0, _styledComponents.default)(_divBase.default)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\twidth: 100%;\n\n\t", ";\n"])), function (_ref) { |
| 758 |
var flex = _ref.flex; |
| 759 |
return flex && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\tflex-direction: ", ";\n\t\tflex-wrap: ", ";\n\t"])), 'column' === flex ? 'column' : 'row', 'column' === flex ? 'nowrap' : 'wrap'); |
| 760 |
}); |
| 761 |
function Section(props) { |
| 762 |
var title = props.title, |
| 763 |
items = props.items, |
| 764 |
columns = props.columns, |
| 765 |
Item = props.component, |
| 766 |
type = props.type, |
| 767 |
_props$flex = props.flex, |
| 768 |
flex = _props$flex === void 0 ? 'row' : _props$flex; |
| 769 |
return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_sectionTitle.default, null, title), /*#__PURE__*/_react.default.createElement(_innerWrapper.default, null, /*#__PURE__*/_react.default.createElement(Content, { |
| 770 |
flex: flex |
| 771 |
}, items.map(function (item) { |
| 772 |
return /*#__PURE__*/_react.default.createElement(Item, { |
| 773 |
key: item._id, |
| 774 |
item: item, |
| 775 |
type: type ? type : null, |
| 776 |
columns: columns |
| 777 |
}); |
| 778 |
})))); |
| 779 |
} |
| 780 |
Section.propTypes = { |
| 781 |
title: PropTypes.string.isRequired, |
| 782 |
items: PropTypes.array.isRequired, |
| 783 |
columns: PropTypes.shape({ |
| 784 |
desktop: PropTypes.number, |
| 785 |
mobile: PropTypes.number |
| 786 |
}), |
| 787 |
component: PropTypes.func.isRequired, |
| 788 |
type: PropTypes.string, |
| 789 |
flex: PropTypes.oneOf(['row', 'column']) |
| 790 |
}; |
| 791 |
|
| 792 |
/***/ }), |
| 793 |
|
| 794 |
/***/ "../modules/styleguide/assets/js/frontend/contexts/active-context.js": |
| 795 |
/*!***************************************************************************!*\ |
| 796 |
!*** ../modules/styleguide/assets/js/frontend/contexts/active-context.js ***! |
| 797 |
\***************************************************************************/ |
| 798 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 799 |
|
| 800 |
|
| 801 |
|
| 802 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 803 |
var _typeof = __webpack_require__(/*! @babel/runtime/helpers/typeof */ "../node_modules/@babel/runtime/helpers/typeof.js"); |
| 804 |
Object.defineProperty(exports, "__esModule", ({ |
| 805 |
value: true |
| 806 |
})); |
| 807 |
exports["default"] = exports.ActiveContext = void 0; |
| 808 |
exports.useActiveContext = useActiveContext; |
| 809 |
var _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ "../node_modules/@babel/runtime/helpers/extends.js")); |
| 810 |
var _defineProperty2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "../node_modules/@babel/runtime/helpers/defineProperty.js")); |
| 811 |
var _slicedToArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../node_modules/@babel/runtime/helpers/slicedToArray.js")); |
| 812 |
var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react")); |
| 813 |
var _settings = __webpack_require__(/*! ./settings */ "../modules/styleguide/assets/js/frontend/contexts/settings.js"); |
| 814 |
var _useIntersectionObserver = _interopRequireDefault(__webpack_require__(/*! ../hooks/use-intersection-observer */ "../modules/styleguide/assets/js/frontend/hooks/use-intersection-observer.js")); |
| 815 |
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); } |
| 816 |
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } |
| 817 |
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } |
| 818 |
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } |
| 819 |
var ActiveContext = exports.ActiveContext = (0, _react.createContext)(null); |
| 820 |
var ActiveProvider = function ActiveProvider(props) { |
| 821 |
var _useState = (0, _react.useState)({ |
| 822 |
element: '', |
| 823 |
area: '' |
| 824 |
}), |
| 825 |
_useState2 = (0, _slicedToArray2.default)(_useState, 2), |
| 826 |
active = _useState2[0], |
| 827 |
setActive = _useState2[1]; |
| 828 |
var colorsAreaRef = (0, _react.useRef)(null); |
| 829 |
var fontsAreaRef = (0, _react.useRef)(null); |
| 830 |
var _useSettings = (0, _settings.useSettings)(), |
| 831 |
isReady = _useSettings.isReady; |
| 832 |
var _useIntersectionObser = (0, _useIntersectionObserver.default)(function (intersectingArea) { |
| 833 |
if (colorsAreaRef.current === intersectingArea.target) { |
| 834 |
activateArea('colors', { |
| 835 |
scroll: false |
| 836 |
}); |
| 837 |
return; |
| 838 |
} |
| 839 |
if (fontsAreaRef.current === intersectingArea.target) { |
| 840 |
activateArea('fonts', { |
| 841 |
scroll: false |
| 842 |
}); |
| 843 |
} |
| 844 |
}), |
| 845 |
setObservedElements = _useIntersectionObser.setObservedElements; |
| 846 |
var activateElement = function activateElement(type, source, id) { |
| 847 |
if ('color' === source) { |
| 848 |
window.top.$e.route('panel/global/global-colors', { |
| 849 |
activeControl: "".concat(type, "/").concat(id, "/color") |
| 850 |
}, { |
| 851 |
history: false |
| 852 |
}); |
| 853 |
} |
| 854 |
if ('typography' === source) { |
| 855 |
window.top.$e.route('panel/global/global-typography', { |
| 856 |
activeControl: "".concat(type, "/").concat(id, "/typography_typography") |
| 857 |
}, { |
| 858 |
history: false |
| 859 |
}); |
| 860 |
} |
| 861 |
}; |
| 862 |
var getElementControl = function getElementControl(type, source, id) { |
| 863 |
if ('color' === source) { |
| 864 |
return "".concat(type, "/").concat(id, "/color"); |
| 865 |
} |
| 866 |
if ('typography' === source) { |
| 867 |
return "".concat(type, "/").concat(id, "/typography_typography"); |
| 868 |
} |
| 869 |
}; |
| 870 |
var activateArea = function activateArea(area) { |
| 871 |
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, |
| 872 |
_ref$scroll = _ref.scroll, |
| 873 |
scroll = _ref$scroll === void 0 ? true : _ref$scroll; |
| 874 |
if (scroll) { |
| 875 |
scrollToArea(area); |
| 876 |
} |
| 877 |
setActive(function (prevState) { |
| 878 |
return _objectSpread(_objectSpread({}, prevState), {}, { |
| 879 |
area: area |
| 880 |
}); |
| 881 |
}); |
| 882 |
}; |
| 883 |
var scrollToArea = function scrollToArea(area) { |
| 884 |
var ref = 'colors' === area ? colorsAreaRef : fontsAreaRef; |
| 885 |
ref.current.scrollIntoView({ |
| 886 |
behavior: 'smooth', |
| 887 |
block: 'start', |
| 888 |
inline: 'start' |
| 889 |
}); |
| 890 |
}; |
| 891 |
(0, _react.useEffect)(function () { |
| 892 |
if (window.top.$e.routes.is('panel/global/global-colors')) { |
| 893 |
scrollToArea('colors'); |
| 894 |
} |
| 895 |
if (window.top.$e.routes.is('panel/global/global-typography')) { |
| 896 |
scrollToArea('fonts'); |
| 897 |
} |
| 898 |
}, []); |
| 899 |
(0, _react.useEffect)(function () { |
| 900 |
if (!isReady) { |
| 901 |
return; |
| 902 |
} |
| 903 |
setObservedElements([colorsAreaRef.current, fontsAreaRef.current]); |
| 904 |
window.top.$e.routes.on('run:after', function (component, route, args) { |
| 905 |
if ('panel/global/global-typography' === route) { |
| 906 |
setActive(function () { |
| 907 |
return { |
| 908 |
area: 'fonts', |
| 909 |
element: args.activeControl |
| 910 |
}; |
| 911 |
}); |
| 912 |
} |
| 913 |
if ('panel/global/global-colors' === route) { |
| 914 |
setActive(function () { |
| 915 |
return { |
| 916 |
area: 'colors', |
| 917 |
element: args.activeControl |
| 918 |
}; |
| 919 |
}); |
| 920 |
} |
| 921 |
}); |
| 922 |
}, [isReady]); |
| 923 |
var value = { |
| 924 |
activeElement: active.element, |
| 925 |
activeArea: active.area, |
| 926 |
activateElement: activateElement, |
| 927 |
activateArea: activateArea, |
| 928 |
colorsAreaRef: colorsAreaRef, |
| 929 |
fontsAreaRef: fontsAreaRef, |
| 930 |
getElementControl: getElementControl |
| 931 |
}; |
| 932 |
return /*#__PURE__*/_react.default.createElement(ActiveContext.Provider, (0, _extends2.default)({ |
| 933 |
value: value |
| 934 |
}, props)); |
| 935 |
}; |
| 936 |
var _default = exports["default"] = ActiveProvider; |
| 937 |
function useActiveContext() { |
| 938 |
return (0, _react.useContext)(ActiveContext); |
| 939 |
} |
| 940 |
|
| 941 |
/***/ }), |
| 942 |
|
| 943 |
/***/ "../modules/styleguide/assets/js/frontend/contexts/settings.js": |
| 944 |
/*!*********************************************************************!*\ |
| 945 |
!*** ../modules/styleguide/assets/js/frontend/contexts/settings.js ***! |
| 946 |
\*********************************************************************/ |
| 947 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 948 |
|
| 949 |
|
| 950 |
|
| 951 |
var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "../node_modules/@babel/runtime/helpers/interopRequireDefault.js"); |
| 952 |
var _typeof = __webpack_require__(/*! @babel/runtime/helpers/typeof */ "../node_modules/@babel/runtime/helpers/typeof.js"); |
| 953 |
Object.defineProperty(exports, "__esModule", ({ |
| 954 |
value: true |
| 955 |
})); |
| 956 |
exports.useSettings = exports.SettingsProvider = void 0; |
| 957 |
var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react")); |
| 958 |
var _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ "../node_modules/@babel/runtime/helpers/extends.js")); |
| 959 |
var _toConsumableArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ "../node_modules/@babel/runtime/helpers/toConsumableArray.js")); |
| 960 |
var _defineProperty2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "../node_modules/@babel/runtime/helpers/defineProperty.js")); |
| 961 |
var _slicedToArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../node_modules/@babel/runtime/helpers/slicedToArray.js")); |
| 962 |
var _useDebouncedCallback = _interopRequireDefault(__webpack_require__(/*! ../hooks/use-debounced-callback */ "../modules/styleguide/assets/js/frontend/hooks/use-debounced-callback.js")); |
| 963 |
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); } |
| 964 |
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } |
| 965 |
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } |
| 966 |
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } |
| 967 |
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; } |
| 968 |
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } } |
| 969 |
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } |
| 970 |
var SettingsContext = (0, _react.createContext)(null); |
| 971 |
|
| 972 |
/** |
| 973 |
* @return {{settings: Map, isReady: boolean}|null} context |
| 974 |
*/ |
| 975 |
var useSettings = exports.useSettings = function useSettings() { |
| 976 |
return (0, _react.useContext)(SettingsContext); |
| 977 |
}; |
| 978 |
var SettingsProvider = exports.SettingsProvider = function SettingsProvider(props) { |
| 979 |
var _useState = (0, _react.useState)('idle'), |
| 980 |
_useState2 = (0, _slicedToArray2.default)(_useState, 2), |
| 981 |
status = _useState2[0], |
| 982 |
setStatus = _useState2[1]; |
| 983 |
var _useState3 = (0, _react.useState)(new Map()), |
| 984 |
_useState4 = (0, _slicedToArray2.default)(_useState3, 2), |
| 985 |
settings = _useState4[0], |
| 986 |
_setSettings = _useState4[1]; |
| 987 |
var settingsRef = (0, _react.useRef)(settings); |
| 988 |
|
| 989 |
// TODO: Use `useDebouncedCallback` instead of `useCallback`. |
| 990 |
var setSettings = function setSettings(newSettings) { |
| 991 |
settingsRef.current = newSettings; |
| 992 |
_setSettings(newSettings); |
| 993 |
}; |
| 994 |
(0, _react.useEffect)(function () { |
| 995 |
setStatus('loaded'); |
| 996 |
}, [settings]); |
| 997 |
var getInitialSettings = function getInitialSettings() { |
| 998 |
setStatus('loading'); |
| 999 |
var kitSettings = elementor.documents.getCurrent().config.settings.settings; |
| 1000 |
var map = new Map([['colors', new Map([['system_colors', kitSettings.system_colors], ['custom_colors', kitSettings.custom_colors]])], ['fonts', new Map([['system_typography', kitSettings.system_typography], ['custom_typography', kitSettings.custom_typography], ['fallback_font', kitSettings.default_generic_fonts]])], ['config', new Map([['is_debug', elementorCommon.config.isElementorDebug]])]]); |
| 1001 |
setSettings(map); |
| 1002 |
}; |
| 1003 |
var onCommandEvent = (0, _react.useCallback)(function (event) { |
| 1004 |
switch (event.detail.command) { |
| 1005 |
case 'document/elements/settings': |
| 1006 |
onSettingsChange(event.detail.args); |
| 1007 |
break; |
| 1008 |
case 'document/repeater/insert': |
| 1009 |
onInsert(event.detail.args); |
| 1010 |
break; |
| 1011 |
case 'document/repeater/remove': |
| 1012 |
onRemove(event.detail.args); |
| 1013 |
break; |
| 1014 |
default: |
| 1015 |
break; |
| 1016 |
} |
| 1017 |
}, []); |
| 1018 |
|
| 1019 |
/** |
| 1020 |
* Triggered when a color or font is changed. |
| 1021 |
* Has a 100ms debounce. |
| 1022 |
* |
| 1023 |
* @param {{container: {model: {attributes: {name: string}}, id: number}, settings: {}}} args |
| 1024 |
*/ |
| 1025 |
var onSettingsChange = (0, _useDebouncedCallback.default)(function (args) { |
| 1026 |
var name = args.container.model.attributes.name; |
| 1027 |
var newSettings = new Map(settingsRef.current); |
| 1028 |
var _iterator = _createForOfIteratorHelper(newSettings.entries()), |
| 1029 |
_step; |
| 1030 |
try { |
| 1031 |
for (_iterator.s(); !(_step = _iterator.n()).done;) { |
| 1032 |
var _step$value = (0, _slicedToArray2.default)(_step.value, 2), |
| 1033 |
group = _step$value[0], |
| 1034 |
groupSettings = _step$value[1]; |
| 1035 |
if (!groupSettings.has(name)) { |
| 1036 |
continue; |
| 1037 |
} |
| 1038 |
if (Array.isArray(groupSettings.get(name))) { |
| 1039 |
var index = groupSettings.get(name).findIndex(function (item) { |
| 1040 |
return item._id === args.container.id; |
| 1041 |
}); |
| 1042 |
if (-1 === index) { |
| 1043 |
return; |
| 1044 |
} |
| 1045 |
newSettings.get(group).get(name)[index] = _objectSpread(_objectSpread({}, groupSettings.get(name)[index]), args.settings); |
| 1046 |
} else { |
| 1047 |
newSettings.get(group).set(name, args.settings); |
| 1048 |
} |
| 1049 |
} |
| 1050 |
} catch (err) { |
| 1051 |
_iterator.e(err); |
| 1052 |
} finally { |
| 1053 |
_iterator.f(); |
| 1054 |
} |
| 1055 |
setSettings(newSettings); |
| 1056 |
}, 100); |
| 1057 |
|
| 1058 |
/** |
| 1059 |
* Triggered when a new custom color or font is created. |
| 1060 |
* |
| 1061 |
* @param {{name: string, model: string, options: {at: number}}} args |
| 1062 |
*/ |
| 1063 |
var onInsert = function onInsert(args) { |
| 1064 |
var name = args.name; |
| 1065 |
var newSettings = new Map(settingsRef.current); |
| 1066 |
var _iterator2 = _createForOfIteratorHelper(newSettings.entries()), |
| 1067 |
_step2; |
| 1068 |
try { |
| 1069 |
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) { |
| 1070 |
var _args$options; |
| 1071 |
var _step2$value = (0, _slicedToArray2.default)(_step2.value, 2), |
| 1072 |
group = _step2$value[0], |
| 1073 |
groupSettings = _step2$value[1]; |
| 1074 |
if (!groupSettings.has(name)) { |
| 1075 |
continue; |
| 1076 |
} |
| 1077 |
var newArray = (0, _toConsumableArray2.default)(groupSettings.get(name)); |
| 1078 |
var at = undefined === ((_args$options = args.options) === null || _args$options === void 0 ? void 0 : _args$options.at) ? newArray.length : args.options.at; |
| 1079 |
newSettings.get(group).set(name, [].concat((0, _toConsumableArray2.default)(newArray.slice(0, at)), [args.model], (0, _toConsumableArray2.default)(newArray.slice(at)))); |
| 1080 |
} |
| 1081 |
} catch (err) { |
| 1082 |
_iterator2.e(err); |
| 1083 |
} finally { |
| 1084 |
_iterator2.f(); |
| 1085 |
} |
| 1086 |
setSettings(newSettings); |
| 1087 |
}; |
| 1088 |
|
| 1089 |
/** |
| 1090 |
* Triggered when a custom color or font is removed. |
| 1091 |
* |
| 1092 |
* @param {{name: string, index: number}} args |
| 1093 |
*/ |
| 1094 |
var onRemove = function onRemove(args) { |
| 1095 |
var name = args.name; |
| 1096 |
var newSettings = new Map(settingsRef.current); |
| 1097 |
var _iterator3 = _createForOfIteratorHelper(newSettings.entries()), |
| 1098 |
_step3; |
| 1099 |
try { |
| 1100 |
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) { |
| 1101 |
var _step3$value = (0, _slicedToArray2.default)(_step3.value, 2), |
| 1102 |
group = _step3$value[0], |
| 1103 |
groupSettings = _step3$value[1]; |
| 1104 |
if (!groupSettings.has(name)) { |
| 1105 |
continue; |
| 1106 |
} |
| 1107 |
var newArray = (0, _toConsumableArray2.default)(groupSettings.get(name)); |
| 1108 |
newSettings.get(group).set(name, newArray.filter(function (item, index) { |
| 1109 |
return index !== args.index; |
| 1110 |
})); |
| 1111 |
} |
| 1112 |
} catch (err) { |
| 1113 |
_iterator3.e(err); |
| 1114 |
} finally { |
| 1115 |
_iterator3.f(); |
| 1116 |
} |
| 1117 |
setSettings(newSettings); |
| 1118 |
}; |
| 1119 |
(0, _react.useEffect)(function () { |
| 1120 |
getInitialSettings(); |
| 1121 |
window.top.addEventListener('elementor/commands/run/after', onCommandEvent, { |
| 1122 |
passive: true |
| 1123 |
}); |
| 1124 |
return function () { |
| 1125 |
window.top.removeEventListener('elementor/commands/run/after', onCommandEvent); |
| 1126 |
}; |
| 1127 |
}, []); |
| 1128 |
var value = { |
| 1129 |
settings: settings, |
| 1130 |
isReady: 'loaded' === status |
| 1131 |
}; |
| 1132 |
return /*#__PURE__*/_react.default.createElement(SettingsContext.Provider, (0, _extends2.default)({ |
| 1133 |
value: value |
| 1134 |
}, props)); |
| 1135 |
}; |
| 1136 |
|
| 1137 |
/***/ }), |
| 1138 |
|
| 1139 |
/***/ "../modules/styleguide/assets/js/frontend/hooks/use-debounced-callback.js": |
| 1140 |
/*!********************************************************************************!*\ |
| 1141 |
!*** ../modules/styleguide/assets/js/frontend/hooks/use-debounced-callback.js ***! |
| 1142 |
\********************************************************************************/ |
| 1143 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 1144 |
|
| 1145 |
|
| 1146 |
|
| 1147 |
Object.defineProperty(exports, "__esModule", ({ |
| 1148 |
value: true |
| 1149 |
})); |
| 1150 |
exports["default"] = useDebouncedCallback; |
| 1151 |
var _react = __webpack_require__(/*! react */ "react"); |
| 1152 |
function useDebouncedCallback(callback, wait) { |
| 1153 |
var timeout = (0, _react.useRef)(); |
| 1154 |
return (0, _react.useCallback)(function () { |
| 1155 |
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { |
| 1156 |
args[_key] = arguments[_key]; |
| 1157 |
} |
| 1158 |
var later = function later() { |
| 1159 |
clearTimeout(timeout.current); |
| 1160 |
callback.apply(void 0, args); |
| 1161 |
}; |
| 1162 |
clearTimeout(timeout.current); |
| 1163 |
timeout.current = setTimeout(later, wait); |
| 1164 |
}, [callback, wait]); |
| 1165 |
} |
| 1166 |
|
| 1167 |
/***/ }), |
| 1168 |
|
| 1169 |
/***/ "../modules/styleguide/assets/js/frontend/hooks/use-intersection-observer.js": |
| 1170 |
/*!***********************************************************************************!*\ |
| 1171 |
!*** ../modules/styleguide/assets/js/frontend/hooks/use-intersection-observer.js ***! |
| 1172 |
\***********************************************************************************/ |
| 1173 |
/***/ ((__unused_webpack_module, exports, __webpack_require__) => { |
| 1174 |
|
| 1175 |
|
| 1176 |
|
| 1177 |
Object.defineProperty(exports, "__esModule", ({ |
| 1178 |
value: true |
| 1179 |
})); |
| 1180 |
exports["default"] = useIntersectionObserver; |
| 1181 |
var _react = __webpack_require__(/*! react */ "react"); |
| 1182 |
function useIntersectionObserver(callback) { |
| 1183 |
var observer; |
| 1184 |
var elements = []; |
| 1185 |
(0, _react.useEffect)(function () { |
| 1186 |
observer = new IntersectionObserver(function (entries) { |
| 1187 |
var intersectingArea = entries.find(function (entry) { |
| 1188 |
return entry.isIntersecting; |
| 1189 |
}); |
| 1190 |
if (intersectingArea) { |
| 1191 |
callback(intersectingArea); |
| 1192 |
} |
| 1193 |
}, {}); |
| 1194 |
return function () { |
| 1195 |
observer.disconnect(); |
| 1196 |
}; |
| 1197 |
}, []); |
| 1198 |
var observe = function observe() { |
| 1199 |
if (elements.length !== 0) { |
| 1200 |
elements.forEach(function (element) { |
| 1201 |
if (element) { |
| 1202 |
observer.observe(element); |
| 1203 |
} |
| 1204 |
}); |
| 1205 |
} |
| 1206 |
}; |
| 1207 |
var unobserve = function unobserve() { |
| 1208 |
if (elements.length !== 0) { |
| 1209 |
elements.forEach(function (element) { |
| 1210 |
if (element) { |
| 1211 |
observer.unobserve(element); |
| 1212 |
} |
| 1213 |
}); |
| 1214 |
} |
| 1215 |
}; |
| 1216 |
var setObservedElements = function setObservedElements(observedElements) { |
| 1217 |
unobserve(); |
| 1218 |
elements = observedElements; |
| 1219 |
observe(); |
| 1220 |
}; |
| 1221 |
return { |
| 1222 |
setObservedElements: setObservedElements |
| 1223 |
}; |
| 1224 |
} |
| 1225 |
|
| 1226 |
/***/ }) |
| 1227 |
|
| 1228 |
}]); |
| 1229 |
//# sourceMappingURL=f75dc05bac1a6892309b.bundle.js.map |
