| @@ -827,14 +827,10 @@ | ||
| 827 | 827 | } |
| 828 | 828 | }, { |
| 829 | 829 | key: "initialize", |
| 830 | 830 | value: function initialize(attributes, options) { |
| 831 | - var _this$config; | |
| 832 | 831 | var elementType = this.get('elType'); |
| 833 | 832 | this.config = elementor.config.elements[elementType]; |
| 834 | - if ((_this$config = this.config) !== null && _this$config !== void 0 && (_this$config = _this$config.meta) !== null && _this$config !== void 0 && _this$config.permanently_locked) { | |
| 835 | - this.set('isLocked', true); | |
| 836 | - } | |
| 837 | 833 | var isNewElementCreate = 0 === this.get('elements').length && $e.commands.currentTrace.includes('document/elements/create'); |
| 838 | 834 | if (isNewElementCreate) { |
| 839 | 835 | this.onElementCreate(); |
| 840 | 836 | } |
| @@ -849,14 +845,8 @@ | ||
| 849 | 845 | }, { |
| 850 | 846 | key: "onElementCreate", |
| 851 | 847 | value: function onElementCreate() { |
| 852 | 848 | var _this = this; |
| 853 | - if (this.get('skipDefaultChildren')) { | |
| 854 | - this.unset('skipDefaultChildren', { | |
| 855 | - silent: true | |
| 856 | - }); | |
| 857 | - return; | |
| 858 | - } | |
| 859 | 849 | this.set('elements', this.getDefaultChildren().map(function (element) { |
| 860 | 850 | return _this.buildElement(element); |
| 861 | 851 | })); |
| 862 | 852 | } |
| @@ -1126,15 +1116,20 @@ | ||
| 1126 | 1116 | value: true |
| 1127 | 1117 | })); |
| 1128 | 1118 | exports["default"] = createAtomicElementBaseView; |
| 1129 | 1119 | var _regenerator = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/regenerator */ "../node_modules/@babel/runtime/regenerator/index.js")); |
| 1120 | +var _typeof2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/typeof */ "../node_modules/@babel/runtime/helpers/typeof.js")); | |
| 1130 | 1121 | var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ "../node_modules/@babel/runtime/helpers/asyncToGenerator.js")); |
| 1122 | +var _defineProperty2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "../node_modules/@babel/runtime/helpers/defineProperty.js")); | |
| 1131 | 1123 | var _toConsumableArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ "../node_modules/@babel/runtime/helpers/toConsumableArray.js")); |
| 1132 | 1124 | var _slicedToArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../node_modules/@babel/runtime/helpers/slicedToArray.js")); |
| 1133 | 1125 | var _elementTypes = __webpack_require__(/*! elementor-editor/utils/element-types */ "../assets/dev/js/editor/utils/element-types.js"); |
| 1134 | 1126 | var _atomicElementEmptyView = _interopRequireDefault(__webpack_require__(/*! ./container/atomic-element-empty-view */ "../modules/atomic-widgets/assets/js/editor/container/atomic-element-empty-view.js")); |
| 1127 | +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; } | |
| 1128 | +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; } | |
| 1135 | 1129 | var BaseElementView = elementor.modules.elements.views.BaseElement; |
| 1136 | 1130 | function createAtomicElementBaseView(type) { |
| 1131 | + var resolvedTagCache = new WeakMap(); | |
| 1137 | 1132 | var AtomicElementView = BaseElementView.extend({ |
| 1138 | 1133 | template: Marionette.TemplateCache.get("#tmpl-elementor-".concat(type, "-content")), |
| 1139 | 1134 | emptyView: _atomicElementEmptyView.default, |
| 1140 | 1135 | _childrenRenderPromises: [], |
| @@ -1145,8 +1140,24 @@ | ||
| 1145 | 1140 | return previewDocument.createElement(tag); |
| 1146 | 1141 | } |
| 1147 | 1142 | return document.createElement(tag); |
| 1148 | 1143 | }, |
| 1144 | + tagName: function tagName() { | |
| 1145 | + var _resolvedTagCache$get; | |
| 1146 | + return (_resolvedTagCache$get = resolvedTagCache.get(this.model)) !== null && _resolvedTagCache$get !== void 0 ? _resolvedTagCache$get : this._resolveTag(); | |
| 1147 | + }, | |
| 1148 | + _resolveTag: function _resolveTag() { | |
| 1149 | + var _this$getResolverRend, _linkSetting$value, _resolvedLinkTag$valu, _resolvedTag$value; | |
| 1150 | + var renderContext = (_this$getResolverRend = this.getResolverRenderContext) === null || _this$getResolverRend === void 0 ? void 0 : _this$getResolverRend.call(this); | |
| 1151 | + var tagSetting = this.model.getSetting('tag'); | |
| 1152 | + var resolvedTag = this._resolvePropValue(tagSetting, renderContext); | |
| 1153 | + var linkSetting = this.model.getSetting('link'); | |
| 1154 | + var resolvedLinkTag = this._resolvePropValue(linkSetting === null || linkSetting === void 0 || (_linkSetting$value = linkSetting.value) === null || _linkSetting$value === void 0 ? void 0 : _linkSetting$value.tag, renderContext); | |
| 1155 | + var linkTag = (_resolvedLinkTag$valu = resolvedLinkTag === null || resolvedLinkTag === void 0 ? void 0 : resolvedLinkTag.value) !== null && _resolvedLinkTag$valu !== void 0 ? _resolvedLinkTag$valu : resolvedLinkTag; | |
| 1156 | + var baseTag = (_resolvedTag$value = resolvedTag === null || resolvedTag === void 0 ? void 0 : resolvedTag.value) !== null && _resolvedTag$value !== void 0 ? _resolvedTag$value : resolvedTag; | |
| 1157 | + var resultTag = linkTag !== null && linkTag !== void 0 ? linkTag : baseTag; | |
| 1158 | + return resultTag || this.model.config.default_html_tag || 'div'; | |
| 1159 | + }, | |
| 1149 | 1160 | getChildViewContainer: function getChildViewContainer() { |
| 1150 | 1161 | this.childViewContainer = ''; |
| 1151 | 1162 | return Marionette.CompositeView.prototype.getChildViewContainer.apply(this, arguments); |
| 1152 | 1163 | }, |
| @@ -1169,16 +1180,157 @@ | ||
| 1169 | 1180 | getResolverRenderContext: function getResolverRenderContext() { |
| 1170 | 1181 | var _this$_parent2, _this$_parent2$getRes; |
| 1171 | 1182 | return (_this$_parent2 = this._parent) === null || _this$_parent2 === void 0 || (_this$_parent2$getRes = _this$_parent2.getResolverRenderContext) === null || _this$_parent2$getRes === void 0 ? void 0 : _this$_parent2$getRes.call(_this$_parent2); |
| 1172 | 1183 | }, |
| 1184 | + className: function className() { | |
| 1185 | + var generatedClasses = this.getGeneratedClasses(); | |
| 1186 | + return "".concat(BaseElementView.prototype.className.apply(this), " e-con e-atomic-element ").concat(this.getClassString(), " ").concat(generatedClasses); | |
| 1187 | + }, | |
| 1188 | + getGeneratedClasses: function getGeneratedClasses() { | |
| 1189 | + var _this = this; | |
| 1190 | + var propsSchema = this.model.config.atomic_props_schema || {}; | |
| 1191 | + var generatedClasses = []; | |
| 1192 | + Object.keys(propsSchema).forEach(function (key) { | |
| 1193 | + var _propsSchema$key; | |
| 1194 | + var propMeta = (_propsSchema$key = propsSchema[key]) === null || _propsSchema$key === void 0 ? void 0 : _propsSchema$key.meta; | |
| 1195 | + if (propMeta !== null && propMeta !== void 0 && propMeta.generates_class) { | |
| 1196 | + var _settingValue$value; | |
| 1197 | + var classPattern = propMeta.generates_class; | |
| 1198 | + var settingValue = _this.model.getSetting(key); | |
| 1199 | + var value = (_settingValue$value = settingValue === null || settingValue === void 0 ? void 0 : settingValue.value) !== null && _settingValue$value !== void 0 ? _settingValue$value : settingValue; | |
| 1200 | + if (value && 'string' === typeof value) { | |
| 1201 | + var className = classPattern.replace('{value}', value); | |
| 1202 | + generatedClasses.push(className); | |
| 1203 | + } | |
| 1204 | + } | |
| 1205 | + }); | |
| 1206 | + return generatedClasses.join(' '); | |
| 1207 | + }, | |
| 1208 | + // TODO: Copied from `views/column.js`. | |
| 1209 | + ui: function ui() { | |
| 1210 | + var ui = BaseElementView.prototype.ui.apply(this, arguments); | |
| 1211 | + ui.percentsTooltip = '> .elementor-element-overlay .elementor-column-percents-tooltip'; | |
| 1212 | + return ui; | |
| 1213 | + }, | |
| 1214 | + attributes: function attributes() { | |
| 1215 | + var _this$model$getSettin, _this$model$getSettin2, _this$model$config$in, _this$model; | |
| 1216 | + var attr = BaseElementView.prototype.attributes.apply(this); | |
| 1217 | + var local = {}; | |
| 1218 | + var cssId = this.model.getSetting('_cssid'); | |
| 1219 | + var customAttributes = (_this$model$getSettin = (_this$model$getSettin2 = this.model.getSetting('attributes')) === null || _this$model$getSettin2 === void 0 ? void 0 : _this$model$getSettin2.value) !== null && _this$model$getSettin !== void 0 ? _this$model$getSettin : []; | |
| 1220 | + var initialAttributes = (_this$model$config$in = this === null || this === void 0 || (_this$model = this.model) === null || _this$model === void 0 || (_this$model = _this$model.config) === null || _this$model === void 0 ? void 0 : _this$model.initial_attributes) !== null && _this$model$config$in !== void 0 ? _this$model$config$in : {}; | |
| 1221 | + if (cssId) { | |
| 1222 | + local.id = cssId.value; | |
| 1223 | + } | |
| 1224 | + local['data-interaction-id'] = this.getInteractionId(); | |
| 1225 | + customAttributes.forEach(function (attribute) { | |
| 1226 | + var _attribute$value, _attribute$value2; | |
| 1227 | + var key = (_attribute$value = attribute.value) === null || _attribute$value === void 0 || (_attribute$value = _attribute$value.key) === null || _attribute$value === void 0 ? void 0 : _attribute$value.value; | |
| 1228 | + var value = (_attribute$value2 = attribute.value) === null || _attribute$value2 === void 0 || (_attribute$value2 = _attribute$value2.value) === null || _attribute$value2 === void 0 ? void 0 : _attribute$value2.value; | |
| 1229 | + if (key && value) { | |
| 1230 | + local[key] = value; | |
| 1231 | + } | |
| 1232 | + }); | |
| 1233 | + return _objectSpread(_objectSpread(_objectSpread({}, attr), initialAttributes), local); | |
| 1234 | + }, | |
| 1235 | + // TODO: Copied from `views/column.js`. | |
| 1236 | + attachElContent: function attachElContent() { | |
| 1237 | + BaseElementView.prototype.attachElContent.apply(this, arguments); | |
| 1238 | + var $tooltip = jQuery('<div>', { | |
| 1239 | + class: 'elementor-column-percents-tooltip', | |
| 1240 | + 'data-side': elementorCommon.config.isRTL ? 'right' : 'left' | |
| 1241 | + }); | |
| 1242 | + this.$el.children('.elementor-element-overlay').append($tooltip); | |
| 1243 | + }, | |
| 1244 | + // TODO: Copied from `views/column.js`. | |
| 1245 | + getPercentSize: function getPercentSize(size) { | |
| 1246 | + if (!size) { | |
| 1247 | + size = this.el.getBoundingClientRect().width; | |
| 1248 | + } | |
| 1249 | + return +(size / this.$el.parent().width() * 100).toFixed(3); | |
| 1250 | + }, | |
| 1251 | + // TODO: Copied from `views/column.js`. | |
| 1252 | + getPercentsForDisplay: function getPercentsForDisplay() { | |
| 1253 | + var width = +this.model.getSetting('width') || this.getPercentSize(); | |
| 1254 | + return width.toFixed(1) + '%'; | |
| 1255 | + }, | |
| 1256 | + renderOnChange: function renderOnChange(settings) { | |
| 1257 | + var _this2 = this; | |
| 1258 | + var changed = settings.changedAttributes(); | |
| 1259 | + setTimeout(function () { | |
| 1260 | + _this2.updateHandlesPosition(); | |
| 1261 | + }); | |
| 1262 | + if (!changed) { | |
| 1263 | + return; | |
| 1264 | + } | |
| 1265 | + BaseElementView.prototype.renderOnChange.apply(this, settings); | |
| 1266 | + if (changed.attributes) { | |
| 1267 | + var $elAttrs = this.$el[0].attributes; | |
| 1268 | + for (var i = $elAttrs.length - 1; i >= 0; i--) { | |
| 1269 | + var attrName = $elAttrs[i].name; | |
| 1270 | + if (attrName !== 'class') { | |
| 1271 | + this.$el.removeAttr(attrName); | |
| 1272 | + } | |
| 1273 | + } | |
| 1274 | + var newAttrs = this.attributes(); | |
| 1275 | + Object.entries(newAttrs).forEach(function (_ref5) { | |
| 1276 | + var _ref6 = (0, _slicedToArray2.default)(_ref5, 2), | |
| 1277 | + key = _ref6[0], | |
| 1278 | + value = _ref6[1]; | |
| 1279 | + if (key !== 'class' && value !== undefined) { | |
| 1280 | + _this2.$el.attr(key, value); | |
| 1281 | + } | |
| 1282 | + }); | |
| 1283 | + return; | |
| 1284 | + } | |
| 1285 | + | |
| 1286 | + // Check if classes changed OR if any setting with generates_class metadata changed | |
| 1287 | + var propsSchema = this.model.config.atomic_props_schema || {}; | |
| 1288 | + var hasGeneratesClassChange = Object.keys(changed).some(function (key) { | |
| 1289 | + var _propsSchema$key2; | |
| 1290 | + return (_propsSchema$key2 = propsSchema[key]) === null || _propsSchema$key2 === void 0 || (_propsSchema$key2 = _propsSchema$key2.meta) === null || _propsSchema$key2 === void 0 ? void 0 : _propsSchema$key2.generates_class; | |
| 1291 | + }); | |
| 1292 | + if (changed.classes || hasGeneratesClassChange) { | |
| 1293 | + // Preserve runtime state classes (e.g., e--selected) that are managed by Alpine | |
| 1294 | + // and would be lost when replacing the class attribute. | |
| 1295 | + var preservedClasses = Array.from(this.$el[0].classList).filter(function (cls) { | |
| 1296 | + return cls.startsWith('e--'); | |
| 1297 | + }); | |
| 1298 | + this.$el.attr('class', this.className()); | |
| 1299 | + preservedClasses.forEach(function (cls) { | |
| 1300 | + return _this2.$el[0].classList.add(cls); | |
| 1301 | + }); | |
| 1302 | + return; | |
| 1303 | + } | |
| 1304 | + if (changed._cssid) { | |
| 1305 | + if (changed._cssid.value) { | |
| 1306 | + this.$el.attr('id', changed._cssid.value); | |
| 1307 | + } else { | |
| 1308 | + this.$el.removeAttr('id'); | |
| 1309 | + } | |
| 1310 | + return; | |
| 1311 | + } | |
| 1312 | + this.$el.addClass(this.getClasses()); | |
| 1313 | + if (this.isTagChanged(changed)) { | |
| 1314 | + this.rerenderEntireView(); | |
| 1315 | + } | |
| 1316 | + }, | |
| 1317 | + isTagChanged: function isTagChanged(changed) { | |
| 1318 | + return ((changed === null || changed === void 0 ? void 0 : changed.tag) !== undefined || (changed === null || changed === void 0 ? void 0 : changed.link) !== undefined) && this._parent && this.tagName() !== this.el.tagName; | |
| 1319 | + }, | |
| 1320 | + rerenderEntireView: function rerenderEntireView() { | |
| 1321 | + var parent = this._parent; | |
| 1322 | + this._parent.removeChildView(this); | |
| 1323 | + parent.addChild(this.model, AtomicElementView, this._index); | |
| 1324 | + }, | |
| 1173 | 1325 | render: function render() { |
| 1174 | - var _this = this; | |
| 1326 | + var _this3 = this; | |
| 1175 | 1327 | this._currentRenderPromise = new Promise(function (resolve) { |
| 1176 | 1328 | // Optimize rendering by reusing existing child views instead of recreating them. |
| 1177 | - if (_this._shouldSkipFullRender()) { | |
| 1178 | - _this._renderWithoutDomRecreation(resolve); | |
| 1329 | + if (_this3._shouldSkipFullRender()) { | |
| 1330 | + _this3._renderWithoutDomRecreation(resolve); | |
| 1179 | 1331 | } else { |
| 1180 | - _this._renderWithDomRecreation(resolve); | |
| 1332 | + _this3._renderWithDomRecreation(resolve); | |
| 1181 | 1333 | } |
| 1182 | 1334 | }); |
| 1183 | 1335 | return this; |
| 1184 | 1336 | }, |
| @@ -1195,43 +1347,87 @@ | ||
| 1195 | 1347 | var firstChild = this.children.findByIndex(0); |
| 1196 | 1348 | return (_firstChild$$el$get$i = firstChild === null || firstChild === void 0 || (_firstChild$$el = firstChild.$el) === null || _firstChild$$el === void 0 || (_firstChild$$el = _firstChild$$el.get(0)) === null || _firstChild$$el === void 0 ? void 0 : _firstChild$$el.isConnected) !== null && _firstChild$$el$get$i !== void 0 ? _firstChild$$el$get$i : false; |
| 1197 | 1349 | }, |
| 1198 | 1350 | _renderWithoutDomRecreation: function _renderWithoutDomRecreation(resolve) { |
| 1199 | - var _this2 = this; | |
| 1351 | + var _this4 = this; | |
| 1200 | 1352 | this._beforeRender(); |
| 1201 | 1353 | this._renderChildren(); |
| 1202 | 1354 | this._waitForChildrenToComplete().then(function () { |
| 1203 | - _this2._afterRender(); | |
| 1355 | + _this4._afterRender(); | |
| 1204 | 1356 | resolve(); |
| 1205 | 1357 | }); |
| 1206 | 1358 | }, |
| 1207 | 1359 | _renderWithDomRecreation: function _renderWithDomRecreation(resolve) { |
| 1360 | + var _this5 = this; | |
| 1208 | 1361 | BaseElementView.prototype.render.apply(this, arguments); |
| 1209 | 1362 | this._waitForChildrenToComplete().then(function () { |
| 1363 | + _this5._applyResolvedAttributes(); | |
| 1210 | 1364 | resolve(); |
| 1211 | 1365 | }); |
| 1212 | 1366 | }, |
| 1213 | 1367 | _beforeRender: function _beforeRender() { |
| 1214 | 1368 | this._isRendering = true; |
| 1369 | + this._invalidateTagCache(); | |
| 1215 | 1370 | this.triggerMethod('before:render', this); |
| 1216 | 1371 | }, |
| 1372 | + _invalidateTagCache: function _invalidateTagCache() { | |
| 1373 | + resolvedTagCache.delete(this.model); | |
| 1374 | + }, | |
| 1375 | + _cacheResolvedTag: function _cacheResolvedTag(tag) { | |
| 1376 | + resolvedTagCache.set(this.model, tag); | |
| 1377 | + }, | |
| 1217 | 1378 | _afterRender: function _afterRender() { |
| 1218 | 1379 | this._isRendering = false; |
| 1219 | 1380 | this.isRendered = true; |
| 1220 | 1381 | this.triggerMethod('render', this); |
| 1382 | + this._applyResolvedAttributes(); | |
| 1221 | 1383 | }, |
| 1384 | + _applyResolvedAttributes: function _applyResolvedAttributes() { | |
| 1385 | + if (!this._parent) { | |
| 1386 | + return; | |
| 1387 | + } | |
| 1388 | + if (this._shouldRecreateForTagChange()) { | |
| 1389 | + return; | |
| 1390 | + } | |
| 1391 | + this._applyLinkAttributes(); | |
| 1392 | + }, | |
| 1393 | + _shouldRecreateForTagChange: function _shouldRecreateForTagChange() { | |
| 1394 | + var resolvedTag = this.tagName(); | |
| 1395 | + var currentTag = this.el.tagName.toLowerCase(); | |
| 1396 | + if (resolvedTag === currentTag) { | |
| 1397 | + return false; | |
| 1398 | + } | |
| 1399 | + this._cacheResolvedTag(resolvedTag); | |
| 1400 | + this.rerenderEntireView(); | |
| 1401 | + return true; | |
| 1402 | + }, | |
| 1403 | + _applyLinkAttributes: function _applyLinkAttributes() { | |
| 1404 | + var _this6 = this; | |
| 1405 | + this.$el.removeAttr('href'); | |
| 1406 | + this.$el.removeAttr('data-action-link'); | |
| 1407 | + var link = this.getLinkAttributes(); | |
| 1408 | + if (!link) { | |
| 1409 | + return; | |
| 1410 | + } | |
| 1411 | + Object.entries(link).forEach(function (_ref7) { | |
| 1412 | + var _ref8 = (0, _slicedToArray2.default)(_ref7, 2), | |
| 1413 | + key = _ref8[0], | |
| 1414 | + value = _ref8[1]; | |
| 1415 | + _this6.$el.attr(key, value); | |
| 1416 | + }); | |
| 1417 | + }, | |
| 1222 | 1418 | _waitForChildrenToComplete: function _waitForChildrenToComplete() { |
| 1223 | - var _this3 = this; | |
| 1419 | + var _this7 = this; | |
| 1224 | 1420 | return (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee() { |
| 1225 | 1421 | return _regenerator.default.wrap(function (_context) { |
| 1226 | 1422 | while (1) switch (_context.prev = _context.next) { |
| 1227 | 1423 | case 0: |
| 1228 | - if (!(_this3._childrenRenderPromises.length > 0)) { | |
| 1424 | + if (!(_this7._childrenRenderPromises.length > 0)) { | |
| 1229 | 1425 | _context.next = 1; |
| 1230 | 1426 | break; |
| 1231 | 1427 | } |
| 1232 | 1428 | _context.next = 1; |
| 1233 | - return Promise.all(_this3._childrenRenderPromises); | |
| 1429 | + return Promise.all(_this7._childrenRenderPromises); | |
| 1234 | 1430 | case 1: |
| 1235 | 1431 | case "end": |
| 1236 | 1432 | return _context.stop(); |
| 1237 | 1433 | } |
| @@ -1250,25 +1446,25 @@ | ||
| 1250 | 1446 | this._collectChildrenRenderPromises(); |
| 1251 | 1447 | }, |
| 1252 | 1448 | _collectChildrenRenderPromises: function _collectChildrenRenderPromises() { |
| 1253 | 1449 | var _this$children3, |
| 1254 | - _this4 = this; | |
| 1450 | + _this8 = this; | |
| 1255 | 1451 | this._childrenRenderPromises = []; |
| 1256 | 1452 | (_this$children3 = this.children) === null || _this$children3 === void 0 || _this$children3.each(function (childView) { |
| 1257 | 1453 | if (childView._currentRenderPromise) { |
| 1258 | - _this4._childrenRenderPromises.push(childView._currentRenderPromise); | |
| 1454 | + _this8._childrenRenderPromises.push(childView._currentRenderPromise); | |
| 1259 | 1455 | } |
| 1260 | 1456 | }); |
| 1261 | 1457 | }, |
| 1262 | 1458 | onRender: function onRender() { |
| 1263 | - var _this5 = this; | |
| 1459 | + var _this9 = this; | |
| 1264 | 1460 | this.dispatchPreviewEvent('elementor/element/render'); |
| 1265 | 1461 | BaseElementView.prototype.onRender.apply(this, arguments); |
| 1266 | 1462 | |
| 1267 | 1463 | // Defer to wait for everything to render. |
| 1268 | 1464 | setTimeout(function () { |
| 1269 | - _this5.droppableInitialize(); | |
| 1270 | - _this5.updateHandlesPosition(); | |
| 1465 | + _this9.droppableInitialize(); | |
| 1466 | + _this9.updateHandlesPosition(); | |
| 1271 | 1467 | }); |
| 1272 | 1468 | }, |
| 1273 | 1469 | onDestroy: function onDestroy() { |
| 1274 | 1470 | BaseElementView.prototype.onDestroy.apply(this, arguments); |
| @@ -1283,8 +1479,46 @@ | ||
| 1283 | 1479 | element: this.getDomElement().get(0) |
| 1284 | 1480 | } |
| 1285 | 1481 | })); |
| 1286 | 1482 | }, |
| 1483 | + _hasLink: function _hasLink(renderContext) { | |
| 1484 | + var _resolvedLink$value; | |
| 1485 | + var linkSetting = this.model.getSetting('link'); | |
| 1486 | + var resolvedLink = this._resolvePropValue(linkSetting, renderContext); | |
| 1487 | + if ('link' !== (resolvedLink === null || resolvedLink === void 0 ? void 0 : resolvedLink.$$type)) { | |
| 1488 | + return false; | |
| 1489 | + } | |
| 1490 | + var destination = this._resolvePropValue((_resolvedLink$value = resolvedLink.value) === null || _resolvedLink$value === void 0 ? void 0 : _resolvedLink$value.destination, renderContext); | |
| 1491 | + return !!(destination !== null && destination !== void 0 && destination.value); | |
| 1492 | + }, | |
| 1493 | + getLinkAttributes: function getLinkAttributes() { | |
| 1494 | + var _this$getResolverRend2, _resolvedLink$value2; | |
| 1495 | + var renderContext = (_this$getResolverRend2 = this.getResolverRenderContext) === null || _this$getResolverRend2 === void 0 ? void 0 : _this$getResolverRend2.call(this); | |
| 1496 | + var linkSetting = this.model.getSetting('link'); | |
| 1497 | + var resolvedLink = this._resolvePropValue(linkSetting, renderContext); | |
| 1498 | + if ('link' !== (resolvedLink === null || resolvedLink === void 0 ? void 0 : resolvedLink.$$type)) { | |
| 1499 | + return null; | |
| 1500 | + } | |
| 1501 | + var destination = this._resolvePropValue((_resolvedLink$value2 = resolvedLink.value) === null || _resolvedLink$value2 === void 0 ? void 0 : _resolvedLink$value2.destination, renderContext); | |
| 1502 | + if (!(destination !== null && destination !== void 0 && destination.value)) { | |
| 1503 | + return null; | |
| 1504 | + } | |
| 1505 | + var $$type = destination.$$type, | |
| 1506 | + value = destination.value; | |
| 1507 | + if ('dynamic' === $$type) { | |
| 1508 | + var resolvedValue = this.handleDynamicLink(value); | |
| 1509 | + if (!resolvedValue) { | |
| 1510 | + return null; | |
| 1511 | + } | |
| 1512 | + var attributeKey = 'action' === (value === null || value === void 0 ? void 0 : value.group) ? 'data-action-link' : 'href'; | |
| 1513 | + return (0, _defineProperty2.default)({}, attributeKey, resolvedValue); | |
| 1514 | + } | |
| 1515 | + var isPostId = 'number' === $$type; | |
| 1516 | + var hrefPrefix = isPostId ? elementor.config.home_url + '/?p=' : ''; | |
| 1517 | + return { | |
| 1518 | + href: hrefPrefix + value | |
| 1519 | + }; | |
| 1520 | + }, | |
| 1287 | 1521 | droppableInitialize: function droppableInitialize() { |
| 1288 | 1522 | this.$el.html5Droppable(this.getDroppableOptions()); |
| 1289 | 1523 | }, |
| 1290 | 1524 | /** |
| @@ -1292,9 +1526,9 @@ | ||
| 1292 | 1526 | * |
| 1293 | 1527 | * @return {Object} groups |
| 1294 | 1528 | */ |
| 1295 | 1529 | getContextMenuGroups: function getContextMenuGroups() { |
| 1296 | - var _this6 = this, | |
| 1530 | + var _this0 = this, | |
| 1297 | 1531 | _elementorCommon$conf; |
| 1298 | 1532 | var saveActions = [{ |
| 1299 | 1533 | name: 'save', |
| 1300 | 1534 | title: __('Save as a template', 'elementor'), |
| @@ -1299,9 +1533,9 @@ | ||
| 1299 | 1533 | name: 'save', |
| 1300 | 1534 | title: __('Save as a template', 'elementor'), |
| 1301 | 1535 | callback: this.saveAsTemplate.bind(this), |
| 1302 | 1536 | isEnabled: function isEnabled() { |
| 1303 | - return !_this6.getContainer().isLocked(); | |
| 1537 | + return !_this0.getContainer().isLocked(); | |
| 1304 | 1538 | } |
| 1305 | 1539 | }]; |
| 1306 | 1540 | var isAdministrator = elementor.config.user.is_administrator; |
| 1307 | 1541 | var isExperimentalFeaturesEnabled = (_elementorCommon$conf = elementorCommon.config.experimentalFeatures) === null || _elementorCommon$conf === void 0 ? void 0 : _elementorCommon$conf.e_components; |
| @@ -1320,9 +1554,9 @@ | ||
| 1320 | 1554 | shortcut: isProActive || isProOutdated ? newBadge : proBadge, |
| 1321 | 1555 | hasShortcutAction: showPromoBadge, |
| 1322 | 1556 | callback: this.saveAsComponent.bind(this), |
| 1323 | 1557 | isEnabled: function isEnabled() { |
| 1324 | - return (isProActive || isProOutdated) && !_this6.getContainer().isLocked(); | |
| 1558 | + return (isProActive || isProOutdated) && !_this0.getContainer().isLocked(); | |
| 1325 | 1559 | } |
| 1326 | 1560 | }); |
| 1327 | 1561 | } |
| 1328 | 1562 | var groups = BaseElementView.prototype.getContextMenuGroups.apply(this, arguments), |
| @@ -1405,9 +1639,9 @@ | ||
| 1405 | 1639 | preventInit: true |
| 1406 | 1640 | }; |
| 1407 | 1641 | }, |
| 1408 | 1642 | getDroppableOptions: function getDroppableOptions() { |
| 1409 | - var _this7 = this; | |
| 1643 | + var _this1 = this; | |
| 1410 | 1644 | var items = '> .elementor-element, > .elementor-empty-view .elementor-first-add'; |
| 1411 | 1645 | return { |
| 1412 | 1646 | axis: null, |
| 1413 | 1647 | items: items, |
| @@ -1417,9 +1651,9 @@ | ||
| 1417 | 1651 | currentElementClass: 'elementor-html5dnd-current-element', |
| 1418 | 1652 | placeholderClass: 'elementor-sortable-placeholder elementor-widget-placeholder', |
| 1419 | 1653 | hasDraggingOnChildClass: 'e-dragging-over', |
| 1420 | 1654 | getDropContainer: function getDropContainer() { |
| 1421 | - return _this7.getContainer(); | |
| 1655 | + return _this1.getContainer(); | |
| 1422 | 1656 | }, |
| 1423 | 1657 | onDropping: function onDropping(side, event) { |
| 1424 | 1658 | event.stopPropagation(); |
| 1425 | 1659 | |
| @@ -1429,14 +1663,14 @@ | ||
| 1429 | 1663 | draggedElement = draggedView === null || draggedView === void 0 ? void 0 : draggedView.getContainer().view.el, |
| 1430 | 1664 | containerElement = event.currentTarget.parentElement, |
| 1431 | 1665 | elements = Array.from((containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelectorAll(':scope > .elementor-element')) || []); |
| 1432 | 1666 | var targetIndex = elements.indexOf(event.currentTarget); |
| 1433 | - if (_this7.isPanelElement(draggedView, draggedElement)) { | |
| 1667 | + if (_this1.isPanelElement(draggedView, draggedElement)) { | |
| 1434 | 1668 | var _elementorCommon; |
| 1435 | - if (_this7.draggingOnBottomOrRightSide(side) && !_this7.emptyViewIsCurrentlyBeingDraggedOver()) { | |
| 1669 | + if (_this1.draggingOnBottomOrRightSide(side) && !_this1.emptyViewIsCurrentlyBeingDraggedOver()) { | |
| 1436 | 1670 | targetIndex++; |
| 1437 | 1671 | } |
| 1438 | - _this7.onDrop(event, { | |
| 1672 | + _this1.onDrop(event, { | |
| 1439 | 1673 | at: targetIndex |
| 1440 | 1674 | }); |
| 1441 | 1675 | if ((_elementorCommon = elementorCommon) !== null && _elementorCommon !== void 0 && (_elementorCommon = _elementorCommon.eventsManager) !== null && _elementorCommon !== void 0 && _elementorCommon.dispatchEvent) { |
| 1442 | 1676 | var selectedElement = elementor.channels.panelElements.request('element:selected'); |
| @@ -1454,16 +1688,16 @@ | ||
| 1454 | 1688 | } |
| 1455 | 1689 | } |
| 1456 | 1690 | return; |
| 1457 | 1691 | } |
| 1458 | - if (_this7.isParentElement(draggedView.getContainer().id)) { | |
| 1692 | + if (_this1.isParentElement(draggedView.getContainer().id)) { | |
| 1459 | 1693 | return; |
| 1460 | 1694 | } |
| 1461 | - if (_this7.emptyViewIsCurrentlyBeingDraggedOver()) { | |
| 1462 | - _this7.moveDroppedItem(draggedView, 0); | |
| 1695 | + if (_this1.emptyViewIsCurrentlyBeingDraggedOver()) { | |
| 1696 | + _this1.moveDroppedItem(draggedView, 0); | |
| 1463 | 1697 | return; |
| 1464 | 1698 | } |
| 1465 | - _this7.moveExistingElement(side, draggedView, containerElement, elements, targetIndex, draggedElement); | |
| 1699 | + _this1.moveExistingElement(side, draggedView, containerElement, elements, targetIndex, draggedElement); | |
| 1466 | 1700 | } |
| 1467 | 1701 | }; |
| 1468 | 1702 | }, |
| 1469 | 1703 | moveExistingElement: function moveExistingElement(side, draggedView, containerElement, elements, targetIndex, draggedElement) { |
| @@ -1581,8 +1815,26 @@ | ||
| 1581 | 1815 | }); |
| 1582 | 1816 | }); |
| 1583 | 1817 | this.addSectionView = addSectionView; |
| 1584 | 1818 | }, |
| 1819 | + getClasses: function getClasses() { | |
| 1820 | + var _window, _window$get, _this$options; | |
| 1821 | + var transformer = (_window = window) === null || _window === void 0 || (_window = _window.elementorV2) === null || _window === void 0 || (_window = _window.editorCanvas) === null || _window === void 0 || (_window = _window.settingsTransformersRegistry) === null || _window === void 0 || (_window$get = _window.get) === null || _window$get === void 0 ? void 0 : _window$get.call(_window, 'classes'); | |
| 1822 | + if (!transformer) { | |
| 1823 | + return []; | |
| 1824 | + } | |
| 1825 | + return transformer(((_this$options = this.options) === null || _this$options === void 0 || (_this$options = _this$options.model) === null || _this$options === void 0 || (_this$options = _this$options.getSetting('classes')) === null || _this$options === void 0 ? void 0 : _this$options.value) || []); | |
| 1826 | + }, | |
| 1827 | + getClassString: function getClassString() { | |
| 1828 | + var classes = this.getClasses(); | |
| 1829 | + var base = this.getBaseClass(); | |
| 1830 | + return [base].concat((0, _toConsumableArray2.default)(classes)).join(' '); | |
| 1831 | + }, | |
| 1832 | + getBaseClass: function getBaseClass() { | |
| 1833 | + var _this$options2, _Object$keys$; | |
| 1834 | + var baseStyles = elementor.helpers.getAtomicWidgetBaseStyles((_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.model); | |
| 1835 | + return (_Object$keys$ = Object.keys(baseStyles !== null && baseStyles !== void 0 ? baseStyles : {})[0]) !== null && _Object$keys$ !== void 0 ? _Object$keys$ : ''; | |
| 1836 | + }, | |
| 1585 | 1837 | isOverflowHidden: function isOverflowHidden() { |
| 1586 | 1838 | var elementStyles = window.getComputedStyle(this.el); |
| 1587 | 1839 | var overflowStyles = [elementStyles.overflowX, elementStyles.overflowY, elementStyles.overflow]; |
| 1588 | 1840 | return overflowStyles.includes('hidden') || overflowStyles.includes('auto'); |
| @@ -1606,8 +1858,75 @@ | ||
| 1606 | 1858 | if (!this.model.collection) { |
| 1607 | 1859 | return true; |
| 1608 | 1860 | } |
| 1609 | 1861 | return 0 === this.model.collection.indexOf(this.model); |
| 1862 | + }, | |
| 1863 | + getDynamicLinkValue: function getDynamicLinkValue(name, settings) { | |
| 1864 | + var simpleTransform = function simpleTransform(props) { | |
| 1865 | + var transformed = Object.entries(props).map(function (_ref0) { | |
| 1866 | + var _ref1 = (0, _slicedToArray2.default)(_ref0, 2), | |
| 1867 | + settingKey = _ref1[0], | |
| 1868 | + settingValue = _ref1[1]; | |
| 1869 | + var value = 'object' === (0, _typeof2.default)(settingValue) && 'value' in settingValue ? settingValue.value : settingValue; | |
| 1870 | + return [settingKey, value]; | |
| 1871 | + }); | |
| 1872 | + return Object.fromEntries(transformed); | |
| 1873 | + }; | |
| 1874 | + var getTagValue = function getTagValue() { | |
| 1875 | + var _elementor$dynamicTag; | |
| 1876 | + var tag = elementor.dynamicTags.createTag('v4-dynamic-tag', name, simpleTransform(settings)); | |
| 1877 | + if (!tag) { | |
| 1878 | + return null; | |
| 1879 | + } | |
| 1880 | + return (_elementor$dynamicTag = elementor.dynamicTags.loadTagDataFromCache(tag)) !== null && _elementor$dynamicTag !== void 0 ? _elementor$dynamicTag : null; | |
| 1881 | + }; | |
| 1882 | + var tagValue = getTagValue(); | |
| 1883 | + if (tagValue !== null) { | |
| 1884 | + return tagValue; | |
| 1885 | + } | |
| 1886 | + return new Promise(function (resolve) { | |
| 1887 | + elementor.dynamicTags.refreshCacheFromServer(function () { | |
| 1888 | + resolve(getTagValue()); | |
| 1889 | + }); | |
| 1890 | + }); | |
| 1891 | + }, | |
| 1892 | + handleDynamicLink: function handleDynamicLink(linkValue) { | |
| 1893 | + var _this10 = this; | |
| 1894 | + var result = this.getDynamicLinkValue(linkValue.name, linkValue.settings); | |
| 1895 | + if (!result) { | |
| 1896 | + return null; | |
| 1897 | + } | |
| 1898 | + if ('string' === typeof result) { | |
| 1899 | + return result; | |
| 1900 | + } | |
| 1901 | + result.then(function (href) { | |
| 1902 | + _this10.el.removeAttribute('href'); | |
| 1903 | + var attribute = 'action' === linkValue.group ? 'data-action-link' : 'href'; | |
| 1904 | + _this10.el.setAttribute(attribute, href); | |
| 1905 | + }).then(function () { | |
| 1906 | + return _this10.dispatchPreviewEvent('elementor/element/render'); | |
| 1907 | + }); | |
| 1908 | + return null; | |
| 1909 | + }, | |
| 1910 | + _resolvePropValue: function _resolvePropValue(prop, renderContext) { | |
| 1911 | + var _window2, _registry$get; | |
| 1912 | + if (!prop || (0, _typeof2.default)(prop) !== 'object') { | |
| 1913 | + return prop; | |
| 1914 | + } | |
| 1915 | + if ('overridable' !== prop.$$type) { | |
| 1916 | + return prop; | |
| 1917 | + } | |
| 1918 | + var registry = (_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.elementorV2) === null || _window2 === void 0 || (_window2 = _window2.editorCanvas) === null || _window2 === void 0 ? void 0 : _window2.settingsTransformersRegistry; | |
| 1919 | + var transformer = registry === null || registry === void 0 || (_registry$get = registry.get) === null || _registry$get === void 0 ? void 0 : _registry$get.call(registry, 'overridable'); | |
| 1920 | + if (!transformer) { | |
| 1921 | + var _prop$value; | |
| 1922 | + return (_prop$value = prop.value) === null || _prop$value === void 0 ? void 0 : _prop$value.origin_value; | |
| 1923 | + } | |
| 1924 | + var transformed = transformer(prop.value, { | |
| 1925 | + key: 'overridable', | |
| 1926 | + renderContext: renderContext | |
| 1927 | + }); | |
| 1928 | + return this._resolvePropValue(transformed, renderContext); | |
| 1610 | 1929 | }, |
| 1611 | 1930 | getInteractionId: function getInteractionId() { |
| 1612 | 1931 | var originId = this.model.get('originId'); |
| 1613 | 1932 | var id = this.model.get('id'); |
