| @@ -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 | } |
| @@ -880,10 +870,9 @@ | ||
| 880 | 870 | id: id, |
| 881 | 871 | settings: (_element$settings = element.settings) !== null && _element$settings !== void 0 ? _element$settings : {}, |
| 882 | 872 | elements: elements, |
| 883 | 873 | isLocked: element.isLocked || false, |
| 884 | - editor_settings: element.editor_settings || {}, | |
| 885 | - meta: element.meta || {} | |
| 874 | + editor_settings: element.editor_settings || {} | |
| 886 | 875 | }; |
| 887 | 876 | } |
| 888 | 877 | }]); |
| 889 | 878 | }(elementor.modules.elements.models.Element); |
| @@ -1127,26 +1116,38 @@ | ||
| 1127 | 1116 | value: true |
| 1128 | 1117 | })); |
| 1129 | 1118 | exports["default"] = createAtomicElementBaseView; |
| 1130 | 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")); | |
| 1131 | 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")); | |
| 1132 | 1123 | var _toConsumableArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ "../node_modules/@babel/runtime/helpers/toConsumableArray.js")); |
| 1133 | 1124 | var _slicedToArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../node_modules/@babel/runtime/helpers/slicedToArray.js")); |
| 1134 | 1125 | var _elementTypes = __webpack_require__(/*! elementor-editor/utils/element-types */ "../assets/dev/js/editor/utils/element-types.js"); |
| 1135 | 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; } | |
| 1136 | 1129 | var BaseElementView = elementor.modules.elements.views.BaseElement; |
| 1137 | 1130 | function createAtomicElementBaseView(type) { |
| 1131 | + var resolvedTagCache = new WeakMap(); | |
| 1138 | 1132 | var AtomicElementView = BaseElementView.extend({ |
| 1139 | 1133 | template: Marionette.TemplateCache.get("#tmpl-elementor-".concat(type, "-content")), |
| 1140 | 1134 | emptyView: _atomicElementEmptyView.default, |
| 1141 | 1135 | _childrenRenderPromises: [], |
| 1142 | - _createElement: function _createElement(tag) { | |
| 1143 | - var _elementor$$preview; | |
| 1144 | - var previewDocument = (_elementor$$preview = elementor.$preview) === null || _elementor$$preview === void 0 || (_elementor$$preview = _elementor$$preview[0]) === null || _elementor$$preview === void 0 ? void 0 : _elementor$$preview.contentDocument; | |
| 1145 | - if (previewDocument) { | |
| 1146 | - return previewDocument.createElement(tag); | |
| 1136 | + tagName: function tagName() { | |
| 1137 | + var _resolvedTagCache$get; | |
| 1138 | + return (_resolvedTagCache$get = resolvedTagCache.get(this.model)) !== null && _resolvedTagCache$get !== void 0 ? _resolvedTagCache$get : this._resolveTag(); | |
| 1139 | + }, | |
| 1140 | + _resolveTag: function _resolveTag() { | |
| 1141 | + var _this$getResolverRend, _resolvedTag$value; | |
| 1142 | + var renderContext = (_this$getResolverRend = this.getResolverRenderContext) === null || _this$getResolverRend === void 0 ? void 0 : _this$getResolverRend.call(this); | |
| 1143 | + var tagSetting = this.model.getSetting('tag'); | |
| 1144 | + var resolvedTag = this._resolvePropValue(tagSetting, renderContext); | |
| 1145 | + var tagValue = (_resolvedTag$value = resolvedTag === null || resolvedTag === void 0 ? void 0 : resolvedTag.value) !== null && _resolvedTag$value !== void 0 ? _resolvedTag$value : resolvedTag; | |
| 1146 | + if (this._hasLink(renderContext)) { | |
| 1147 | + return 'a'; | |
| 1147 | 1148 | } |
| 1148 | - return document.createElement(tag); | |
| 1149 | + return tagValue || this.model.config.default_html_tag || 'div'; | |
| 1149 | 1150 | }, |
| 1150 | 1151 | getChildViewContainer: function getChildViewContainer() { |
| 1151 | 1152 | this.childViewContainer = ''; |
| 1152 | 1153 | return Marionette.CompositeView.prototype.getChildViewContainer.apply(this, arguments); |
| @@ -1170,16 +1171,157 @@ | ||
| 1170 | 1171 | getResolverRenderContext: function getResolverRenderContext() { |
| 1171 | 1172 | var _this$_parent2, _this$_parent2$getRes; |
| 1172 | 1173 | 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); |
| 1173 | 1174 | }, |
| 1175 | + className: function className() { | |
| 1176 | + var generatedClasses = this.getGeneratedClasses(); | |
| 1177 | + return "".concat(BaseElementView.prototype.className.apply(this), " e-con e-atomic-element ").concat(this.getClassString(), " ").concat(generatedClasses); | |
| 1178 | + }, | |
| 1179 | + getGeneratedClasses: function getGeneratedClasses() { | |
| 1180 | + var _this = this; | |
| 1181 | + var propsSchema = this.model.config.atomic_props_schema || {}; | |
| 1182 | + var generatedClasses = []; | |
| 1183 | + Object.keys(propsSchema).forEach(function (key) { | |
| 1184 | + var _propsSchema$key; | |
| 1185 | + var propMeta = (_propsSchema$key = propsSchema[key]) === null || _propsSchema$key === void 0 ? void 0 : _propsSchema$key.meta; | |
| 1186 | + if (propMeta !== null && propMeta !== void 0 && propMeta.generates_class) { | |
| 1187 | + var _settingValue$value; | |
| 1188 | + var classPattern = propMeta.generates_class; | |
| 1189 | + var settingValue = _this.model.getSetting(key); | |
| 1190 | + var value = (_settingValue$value = settingValue === null || settingValue === void 0 ? void 0 : settingValue.value) !== null && _settingValue$value !== void 0 ? _settingValue$value : settingValue; | |
| 1191 | + if (value && 'string' === typeof value) { | |
| 1192 | + var className = classPattern.replace('{value}', value); | |
| 1193 | + generatedClasses.push(className); | |
| 1194 | + } | |
| 1195 | + } | |
| 1196 | + }); | |
| 1197 | + return generatedClasses.join(' '); | |
| 1198 | + }, | |
| 1199 | + // TODO: Copied from `views/column.js`. | |
| 1200 | + ui: function ui() { | |
| 1201 | + var ui = BaseElementView.prototype.ui.apply(this, arguments); | |
| 1202 | + ui.percentsTooltip = '> .elementor-element-overlay .elementor-column-percents-tooltip'; | |
| 1203 | + return ui; | |
| 1204 | + }, | |
| 1205 | + attributes: function attributes() { | |
| 1206 | + var _this$model$getSettin, _this$model$getSettin2, _this$model$config$in, _this$model; | |
| 1207 | + var attr = BaseElementView.prototype.attributes.apply(this); | |
| 1208 | + var local = {}; | |
| 1209 | + var cssId = this.model.getSetting('_cssid'); | |
| 1210 | + 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 : []; | |
| 1211 | + 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 : {}; | |
| 1212 | + if (cssId) { | |
| 1213 | + local.id = cssId.value; | |
| 1214 | + } | |
| 1215 | + local['data-interaction-id'] = this.getInteractionId(); | |
| 1216 | + customAttributes.forEach(function (attribute) { | |
| 1217 | + var _attribute$value, _attribute$value2; | |
| 1218 | + 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; | |
| 1219 | + 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; | |
| 1220 | + if (key && value) { | |
| 1221 | + local[key] = value; | |
| 1222 | + } | |
| 1223 | + }); | |
| 1224 | + return _objectSpread(_objectSpread(_objectSpread({}, attr), initialAttributes), local); | |
| 1225 | + }, | |
| 1226 | + // TODO: Copied from `views/column.js`. | |
| 1227 | + attachElContent: function attachElContent() { | |
| 1228 | + BaseElementView.prototype.attachElContent.apply(this, arguments); | |
| 1229 | + var $tooltip = jQuery('<div>', { | |
| 1230 | + class: 'elementor-column-percents-tooltip', | |
| 1231 | + 'data-side': elementorCommon.config.isRTL ? 'right' : 'left' | |
| 1232 | + }); | |
| 1233 | + this.$el.children('.elementor-element-overlay').append($tooltip); | |
| 1234 | + }, | |
| 1235 | + // TODO: Copied from `views/column.js`. | |
| 1236 | + getPercentSize: function getPercentSize(size) { | |
| 1237 | + if (!size) { | |
| 1238 | + size = this.el.getBoundingClientRect().width; | |
| 1239 | + } | |
| 1240 | + return +(size / this.$el.parent().width() * 100).toFixed(3); | |
| 1241 | + }, | |
| 1242 | + // TODO: Copied from `views/column.js`. | |
| 1243 | + getPercentsForDisplay: function getPercentsForDisplay() { | |
| 1244 | + var width = +this.model.getSetting('width') || this.getPercentSize(); | |
| 1245 | + return width.toFixed(1) + '%'; | |
| 1246 | + }, | |
| 1247 | + renderOnChange: function renderOnChange(settings) { | |
| 1248 | + var _this2 = this; | |
| 1249 | + var changed = settings.changedAttributes(); | |
| 1250 | + setTimeout(function () { | |
| 1251 | + _this2.updateHandlesPosition(); | |
| 1252 | + }); | |
| 1253 | + if (!changed) { | |
| 1254 | + return; | |
| 1255 | + } | |
| 1256 | + BaseElementView.prototype.renderOnChange.apply(this, settings); | |
| 1257 | + if (changed.attributes) { | |
| 1258 | + var $elAttrs = this.$el[0].attributes; | |
| 1259 | + for (var i = $elAttrs.length - 1; i >= 0; i--) { | |
| 1260 | + var attrName = $elAttrs[i].name; | |
| 1261 | + if (attrName !== 'class') { | |
| 1262 | + this.$el.removeAttr(attrName); | |
| 1263 | + } | |
| 1264 | + } | |
| 1265 | + var newAttrs = this.attributes(); | |
| 1266 | + Object.entries(newAttrs).forEach(function (_ref5) { | |
| 1267 | + var _ref6 = (0, _slicedToArray2.default)(_ref5, 2), | |
| 1268 | + key = _ref6[0], | |
| 1269 | + value = _ref6[1]; | |
| 1270 | + if (key !== 'class' && value !== undefined) { | |
| 1271 | + _this2.$el.attr(key, value); | |
| 1272 | + } | |
| 1273 | + }); | |
| 1274 | + return; | |
| 1275 | + } | |
| 1276 | + | |
| 1277 | + // Check if classes changed OR if any setting with generates_class metadata changed | |
| 1278 | + var propsSchema = this.model.config.atomic_props_schema || {}; | |
| 1279 | + var hasGeneratesClassChange = Object.keys(changed).some(function (key) { | |
| 1280 | + var _propsSchema$key2; | |
| 1281 | + 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; | |
| 1282 | + }); | |
| 1283 | + if (changed.classes || hasGeneratesClassChange) { | |
| 1284 | + // Preserve runtime state classes (e.g., e--selected) that are managed by Alpine | |
| 1285 | + // and would be lost when replacing the class attribute. | |
| 1286 | + var preservedClasses = Array.from(this.$el[0].classList).filter(function (cls) { | |
| 1287 | + return cls.startsWith('e--'); | |
| 1288 | + }); | |
| 1289 | + this.$el.attr('class', this.className()); | |
| 1290 | + preservedClasses.forEach(function (cls) { | |
| 1291 | + return _this2.$el[0].classList.add(cls); | |
| 1292 | + }); | |
| 1293 | + return; | |
| 1294 | + } | |
| 1295 | + if (changed._cssid) { | |
| 1296 | + if (changed._cssid.value) { | |
| 1297 | + this.$el.attr('id', changed._cssid.value); | |
| 1298 | + } else { | |
| 1299 | + this.$el.removeAttr('id'); | |
| 1300 | + } | |
| 1301 | + return; | |
| 1302 | + } | |
| 1303 | + this.$el.addClass(this.getClasses()); | |
| 1304 | + if (this.isTagChanged(changed)) { | |
| 1305 | + this.rerenderEntireView(); | |
| 1306 | + } | |
| 1307 | + }, | |
| 1308 | + isTagChanged: function isTagChanged(changed) { | |
| 1309 | + 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; | |
| 1310 | + }, | |
| 1311 | + rerenderEntireView: function rerenderEntireView() { | |
| 1312 | + var parent = this._parent; | |
| 1313 | + this._parent.removeChildView(this); | |
| 1314 | + parent.addChild(this.model, AtomicElementView, this._index); | |
| 1315 | + }, | |
| 1174 | 1316 | render: function render() { |
| 1175 | - var _this = this; | |
| 1317 | + var _this3 = this; | |
| 1176 | 1318 | this._currentRenderPromise = new Promise(function (resolve) { |
| 1177 | 1319 | // Optimize rendering by reusing existing child views instead of recreating them. |
| 1178 | - if (_this._shouldSkipFullRender()) { | |
| 1179 | - _this._renderWithoutDomRecreation(resolve); | |
| 1320 | + if (_this3._shouldSkipFullRender()) { | |
| 1321 | + _this3._renderWithoutDomRecreation(resolve); | |
| 1180 | 1322 | } else { |
| 1181 | - _this._renderWithDomRecreation(resolve); | |
| 1323 | + _this3._renderWithDomRecreation(resolve); | |
| 1182 | 1324 | } |
| 1183 | 1325 | }); |
| 1184 | 1326 | return this; |
| 1185 | 1327 | }, |
| @@ -1196,43 +1338,80 @@ | ||
| 1196 | 1338 | var firstChild = this.children.findByIndex(0); |
| 1197 | 1339 | 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; |
| 1198 | 1340 | }, |
| 1199 | 1341 | _renderWithoutDomRecreation: function _renderWithoutDomRecreation(resolve) { |
| 1200 | - var _this2 = this; | |
| 1342 | + var _this4 = this; | |
| 1201 | 1343 | this._beforeRender(); |
| 1202 | 1344 | this._renderChildren(); |
| 1203 | 1345 | this._waitForChildrenToComplete().then(function () { |
| 1204 | - _this2._afterRender(); | |
| 1346 | + _this4._afterRender(); | |
| 1205 | 1347 | resolve(); |
| 1206 | 1348 | }); |
| 1207 | 1349 | }, |
| 1208 | 1350 | _renderWithDomRecreation: function _renderWithDomRecreation(resolve) { |
| 1351 | + var _this5 = this; | |
| 1209 | 1352 | BaseElementView.prototype.render.apply(this, arguments); |
| 1210 | 1353 | this._waitForChildrenToComplete().then(function () { |
| 1354 | + _this5._applyResolvedAttributes(); | |
| 1211 | 1355 | resolve(); |
| 1212 | 1356 | }); |
| 1213 | 1357 | }, |
| 1214 | 1358 | _beforeRender: function _beforeRender() { |
| 1215 | 1359 | this._isRendering = true; |
| 1360 | + this._invalidateTagCache(); | |
| 1216 | 1361 | this.triggerMethod('before:render', this); |
| 1217 | 1362 | }, |
| 1363 | + _invalidateTagCache: function _invalidateTagCache() { | |
| 1364 | + resolvedTagCache.delete(this.model); | |
| 1365 | + }, | |
| 1366 | + _cacheResolvedTag: function _cacheResolvedTag(tag) { | |
| 1367 | + resolvedTagCache.set(this.model, tag); | |
| 1368 | + }, | |
| 1218 | 1369 | _afterRender: function _afterRender() { |
| 1219 | 1370 | this._isRendering = false; |
| 1220 | 1371 | this.isRendered = true; |
| 1221 | 1372 | this.triggerMethod('render', this); |
| 1373 | + this._applyResolvedAttributes(); | |
| 1222 | 1374 | }, |
| 1375 | + _applyResolvedAttributes: function _applyResolvedAttributes() { | |
| 1376 | + if (!this._parent) { | |
| 1377 | + return; | |
| 1378 | + } | |
| 1379 | + if (this._shouldRecreateForTagChange()) { | |
| 1380 | + return; | |
| 1381 | + } | |
| 1382 | + this._applyLinkAttributes(); | |
| 1383 | + }, | |
| 1384 | + _shouldRecreateForTagChange: function _shouldRecreateForTagChange() { | |
| 1385 | + var resolvedTag = this.tagName(); | |
| 1386 | + var currentTag = this.el.tagName.toLowerCase(); | |
| 1387 | + if (resolvedTag === currentTag) { | |
| 1388 | + return false; | |
| 1389 | + } | |
| 1390 | + this._cacheResolvedTag(resolvedTag); | |
| 1391 | + this.rerenderEntireView(); | |
| 1392 | + return true; | |
| 1393 | + }, | |
| 1394 | + _applyLinkAttributes: function _applyLinkAttributes() { | |
| 1395 | + this.$el.removeAttr('href'); | |
| 1396 | + this.$el.removeAttr('data-action-link'); | |
| 1397 | + var link = this.getLink(); | |
| 1398 | + if (link) { | |
| 1399 | + this.$el.attr(link.attr, link.value); | |
| 1400 | + } | |
| 1401 | + }, | |
| 1223 | 1402 | _waitForChildrenToComplete: function _waitForChildrenToComplete() { |
| 1224 | - var _this3 = this; | |
| 1403 | + var _this6 = this; | |
| 1225 | 1404 | return (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee() { |
| 1226 | 1405 | return _regenerator.default.wrap(function (_context) { |
| 1227 | 1406 | while (1) switch (_context.prev = _context.next) { |
| 1228 | 1407 | case 0: |
| 1229 | - if (!(_this3._childrenRenderPromises.length > 0)) { | |
| 1408 | + if (!(_this6._childrenRenderPromises.length > 0)) { | |
| 1230 | 1409 | _context.next = 1; |
| 1231 | 1410 | break; |
| 1232 | 1411 | } |
| 1233 | 1412 | _context.next = 1; |
| 1234 | - return Promise.all(_this3._childrenRenderPromises); | |
| 1413 | + return Promise.all(_this6._childrenRenderPromises); | |
| 1235 | 1414 | case 1: |
| 1236 | 1415 | case "end": |
| 1237 | 1416 | return _context.stop(); |
| 1238 | 1417 | } |
| @@ -1251,25 +1430,25 @@ | ||
| 1251 | 1430 | this._collectChildrenRenderPromises(); |
| 1252 | 1431 | }, |
| 1253 | 1432 | _collectChildrenRenderPromises: function _collectChildrenRenderPromises() { |
| 1254 | 1433 | var _this$children3, |
| 1255 | - _this4 = this; | |
| 1434 | + _this7 = this; | |
| 1256 | 1435 | this._childrenRenderPromises = []; |
| 1257 | 1436 | (_this$children3 = this.children) === null || _this$children3 === void 0 || _this$children3.each(function (childView) { |
| 1258 | 1437 | if (childView._currentRenderPromise) { |
| 1259 | - _this4._childrenRenderPromises.push(childView._currentRenderPromise); | |
| 1438 | + _this7._childrenRenderPromises.push(childView._currentRenderPromise); | |
| 1260 | 1439 | } |
| 1261 | 1440 | }); |
| 1262 | 1441 | }, |
| 1263 | 1442 | onRender: function onRender() { |
| 1264 | - var _this5 = this; | |
| 1443 | + var _this8 = this; | |
| 1265 | 1444 | this.dispatchPreviewEvent('elementor/element/render'); |
| 1266 | 1445 | BaseElementView.prototype.onRender.apply(this, arguments); |
| 1267 | 1446 | |
| 1268 | 1447 | // Defer to wait for everything to render. |
| 1269 | 1448 | setTimeout(function () { |
| 1270 | - _this5.droppableInitialize(); | |
| 1271 | - _this5.updateHandlesPosition(); | |
| 1449 | + _this8.droppableInitialize(); | |
| 1450 | + _this8.updateHandlesPosition(); | |
| 1272 | 1451 | }); |
| 1273 | 1452 | }, |
| 1274 | 1453 | onDestroy: function onDestroy() { |
| 1275 | 1454 | BaseElementView.prototype.onDestroy.apply(this, arguments); |
| @@ -1284,8 +1463,50 @@ | ||
| 1284 | 1463 | element: this.getDomElement().get(0) |
| 1285 | 1464 | } |
| 1286 | 1465 | })); |
| 1287 | 1466 | }, |
| 1467 | + _hasLink: function _hasLink(renderContext) { | |
| 1468 | + var _resolvedLink$value; | |
| 1469 | + var linkSetting = this.model.getSetting('link'); | |
| 1470 | + var resolvedLink = this._resolvePropValue(linkSetting, renderContext); | |
| 1471 | + if ('link' !== (resolvedLink === null || resolvedLink === void 0 ? void 0 : resolvedLink.$$type)) { | |
| 1472 | + return false; | |
| 1473 | + } | |
| 1474 | + var destination = this._resolvePropValue((_resolvedLink$value = resolvedLink.value) === null || _resolvedLink$value === void 0 ? void 0 : _resolvedLink$value.destination, renderContext); | |
| 1475 | + return !!(destination !== null && destination !== void 0 && destination.value); | |
| 1476 | + }, | |
| 1477 | + getLink: function getLink() { | |
| 1478 | + var _this$getResolverRend2, _resolvedLink$value2; | |
| 1479 | + var renderContext = (_this$getResolverRend2 = this.getResolverRenderContext) === null || _this$getResolverRend2 === void 0 ? void 0 : _this$getResolverRend2.call(this); | |
| 1480 | + var linkSetting = this.model.getSetting('link'); | |
| 1481 | + var resolvedLink = this._resolvePropValue(linkSetting, renderContext); | |
| 1482 | + if ('link' !== (resolvedLink === null || resolvedLink === void 0 ? void 0 : resolvedLink.$$type)) { | |
| 1483 | + return null; | |
| 1484 | + } | |
| 1485 | + var destination = this._resolvePropValue((_resolvedLink$value2 = resolvedLink.value) === null || _resolvedLink$value2 === void 0 ? void 0 : _resolvedLink$value2.destination, renderContext); | |
| 1486 | + if (!(destination !== null && destination !== void 0 && destination.value)) { | |
| 1487 | + return null; | |
| 1488 | + } | |
| 1489 | + var $$type = destination.$$type, | |
| 1490 | + value = destination.value; | |
| 1491 | + if ('dynamic' === $$type) { | |
| 1492 | + var _value$settings; | |
| 1493 | + var resolvedValue = this.handleDynamicLink(value); | |
| 1494 | + if (!resolvedValue) { | |
| 1495 | + return null; | |
| 1496 | + } | |
| 1497 | + return { | |
| 1498 | + attr: 'action' === ((_value$settings = value.settings) === null || _value$settings === void 0 ? void 0 : _value$settings.group) ? 'data-action-link' : 'href', | |
| 1499 | + value: resolvedValue | |
| 1500 | + }; | |
| 1501 | + } | |
| 1502 | + var isPostId = 'number' === $$type; | |
| 1503 | + var hrefPrefix = isPostId ? elementor.config.home_url + '/?p=' : ''; | |
| 1504 | + return { | |
| 1505 | + attr: 'href', | |
| 1506 | + value: hrefPrefix + value | |
| 1507 | + }; | |
| 1508 | + }, | |
| 1288 | 1509 | droppableInitialize: function droppableInitialize() { |
| 1289 | 1510 | this.$el.html5Droppable(this.getDroppableOptions()); |
| 1290 | 1511 | }, |
| 1291 | 1512 | /** |
| @@ -1293,9 +1514,9 @@ | ||
| 1293 | 1514 | * |
| 1294 | 1515 | * @return {Object} groups |
| 1295 | 1516 | */ |
| 1296 | 1517 | getContextMenuGroups: function getContextMenuGroups() { |
| 1297 | - var _this6 = this, | |
| 1518 | + var _this9 = this, | |
| 1298 | 1519 | _elementorCommon$conf; |
| 1299 | 1520 | var saveActions = [{ |
| 1300 | 1521 | name: 'save', |
| 1301 | 1522 | title: __('Save as a template', 'elementor'), |
| @@ -1300,9 +1521,9 @@ | ||
| 1300 | 1521 | name: 'save', |
| 1301 | 1522 | title: __('Save as a template', 'elementor'), |
| 1302 | 1523 | callback: this.saveAsTemplate.bind(this), |
| 1303 | 1524 | isEnabled: function isEnabled() { |
| 1304 | - return !_this6.getContainer().isLocked(); | |
| 1525 | + return !_this9.getContainer().isLocked(); | |
| 1305 | 1526 | } |
| 1306 | 1527 | }]; |
| 1307 | 1528 | var isAdministrator = elementor.config.user.is_administrator; |
| 1308 | 1529 | var isExperimentalFeaturesEnabled = (_elementorCommon$conf = elementorCommon.config.experimentalFeatures) === null || _elementorCommon$conf === void 0 ? void 0 : _elementorCommon$conf.e_components; |
| @@ -1321,9 +1542,9 @@ | ||
| 1321 | 1542 | shortcut: isProActive || isProOutdated ? newBadge : proBadge, |
| 1322 | 1543 | hasShortcutAction: showPromoBadge, |
| 1323 | 1544 | callback: this.saveAsComponent.bind(this), |
| 1324 | 1545 | isEnabled: function isEnabled() { |
| 1325 | - return (isProActive || isProOutdated) && !_this6.getContainer().isLocked(); | |
| 1546 | + return (isProActive || isProOutdated) && !_this9.getContainer().isLocked(); | |
| 1326 | 1547 | } |
| 1327 | 1548 | }); |
| 1328 | 1549 | } |
| 1329 | 1550 | var groups = BaseElementView.prototype.getContextMenuGroups.apply(this, arguments), |
| @@ -1406,9 +1627,9 @@ | ||
| 1406 | 1627 | preventInit: true |
| 1407 | 1628 | }; |
| 1408 | 1629 | }, |
| 1409 | 1630 | getDroppableOptions: function getDroppableOptions() { |
| 1410 | - var _this7 = this; | |
| 1631 | + var _this0 = this; | |
| 1411 | 1632 | var items = '> .elementor-element, > .elementor-empty-view .elementor-first-add'; |
| 1412 | 1633 | return { |
| 1413 | 1634 | axis: null, |
| 1414 | 1635 | items: items, |
| @@ -1418,9 +1639,9 @@ | ||
| 1418 | 1639 | currentElementClass: 'elementor-html5dnd-current-element', |
| 1419 | 1640 | placeholderClass: 'elementor-sortable-placeholder elementor-widget-placeholder', |
| 1420 | 1641 | hasDraggingOnChildClass: 'e-dragging-over', |
| 1421 | 1642 | getDropContainer: function getDropContainer() { |
| 1422 | - return _this7.getContainer(); | |
| 1643 | + return _this0.getContainer(); | |
| 1423 | 1644 | }, |
| 1424 | 1645 | onDropping: function onDropping(side, event) { |
| 1425 | 1646 | event.stopPropagation(); |
| 1426 | 1647 | |
| @@ -1430,14 +1651,14 @@ | ||
| 1430 | 1651 | draggedElement = draggedView === null || draggedView === void 0 ? void 0 : draggedView.getContainer().view.el, |
| 1431 | 1652 | containerElement = event.currentTarget.parentElement, |
| 1432 | 1653 | elements = Array.from((containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelectorAll(':scope > .elementor-element')) || []); |
| 1433 | 1654 | var targetIndex = elements.indexOf(event.currentTarget); |
| 1434 | - if (_this7.isPanelElement(draggedView, draggedElement)) { | |
| 1655 | + if (_this0.isPanelElement(draggedView, draggedElement)) { | |
| 1435 | 1656 | var _elementorCommon; |
| 1436 | - if (_this7.draggingOnBottomOrRightSide(side) && !_this7.emptyViewIsCurrentlyBeingDraggedOver()) { | |
| 1657 | + if (_this0.draggingOnBottomOrRightSide(side) && !_this0.emptyViewIsCurrentlyBeingDraggedOver()) { | |
| 1437 | 1658 | targetIndex++; |
| 1438 | 1659 | } |
| 1439 | - _this7.onDrop(event, { | |
| 1660 | + _this0.onDrop(event, { | |
| 1440 | 1661 | at: targetIndex |
| 1441 | 1662 | }); |
| 1442 | 1663 | if ((_elementorCommon = elementorCommon) !== null && _elementorCommon !== void 0 && (_elementorCommon = _elementorCommon.eventsManager) !== null && _elementorCommon !== void 0 && _elementorCommon.dispatchEvent) { |
| 1443 | 1664 | var selectedElement = elementor.channels.panelElements.request('element:selected'); |
| @@ -1455,16 +1676,16 @@ | ||
| 1455 | 1676 | } |
| 1456 | 1677 | } |
| 1457 | 1678 | return; |
| 1458 | 1679 | } |
| 1459 | - if (_this7.isParentElement(draggedView.getContainer().id)) { | |
| 1680 | + if (_this0.isParentElement(draggedView.getContainer().id)) { | |
| 1460 | 1681 | return; |
| 1461 | 1682 | } |
| 1462 | - if (_this7.emptyViewIsCurrentlyBeingDraggedOver()) { | |
| 1463 | - _this7.moveDroppedItem(draggedView, 0); | |
| 1683 | + if (_this0.emptyViewIsCurrentlyBeingDraggedOver()) { | |
| 1684 | + _this0.moveDroppedItem(draggedView, 0); | |
| 1464 | 1685 | return; |
| 1465 | 1686 | } |
| 1466 | - _this7.moveExistingElement(side, draggedView, containerElement, elements, targetIndex, draggedElement); | |
| 1687 | + _this0.moveExistingElement(side, draggedView, containerElement, elements, targetIndex, draggedElement); | |
| 1467 | 1688 | } |
| 1468 | 1689 | }; |
| 1469 | 1690 | }, |
| 1470 | 1691 | moveExistingElement: function moveExistingElement(side, draggedView, containerElement, elements, targetIndex, draggedElement) { |
| @@ -1582,8 +1803,26 @@ | ||
| 1582 | 1803 | }); |
| 1583 | 1804 | }); |
| 1584 | 1805 | this.addSectionView = addSectionView; |
| 1585 | 1806 | }, |
| 1807 | + getClasses: function getClasses() { | |
| 1808 | + var _window, _window$get, _this$options; | |
| 1809 | + 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'); | |
| 1810 | + if (!transformer) { | |
| 1811 | + return []; | |
| 1812 | + } | |
| 1813 | + 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) || []); | |
| 1814 | + }, | |
| 1815 | + getClassString: function getClassString() { | |
| 1816 | + var classes = this.getClasses(); | |
| 1817 | + var base = this.getBaseClass(); | |
| 1818 | + return [base].concat((0, _toConsumableArray2.default)(classes)).join(' '); | |
| 1819 | + }, | |
| 1820 | + getBaseClass: function getBaseClass() { | |
| 1821 | + var _this$options2, _Object$keys$; | |
| 1822 | + var baseStyles = elementor.helpers.getAtomicWidgetBaseStyles((_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.model); | |
| 1823 | + return (_Object$keys$ = Object.keys(baseStyles !== null && baseStyles !== void 0 ? baseStyles : {})[0]) !== null && _Object$keys$ !== void 0 ? _Object$keys$ : ''; | |
| 1824 | + }, | |
| 1586 | 1825 | isOverflowHidden: function isOverflowHidden() { |
| 1587 | 1826 | var elementStyles = window.getComputedStyle(this.el); |
| 1588 | 1827 | var overflowStyles = [elementStyles.overflowX, elementStyles.overflowY, elementStyles.overflow]; |
| 1589 | 1828 | return overflowStyles.includes('hidden') || overflowStyles.includes('auto'); |
| @@ -1607,8 +1846,75 @@ | ||
| 1607 | 1846 | if (!this.model.collection) { |
| 1608 | 1847 | return true; |
| 1609 | 1848 | } |
| 1610 | 1849 | return 0 === this.model.collection.indexOf(this.model); |
| 1850 | + }, | |
| 1851 | + getDynamicLinkValue: function getDynamicLinkValue(name, settings) { | |
| 1852 | + var simpleTransform = function simpleTransform(props) { | |
| 1853 | + var transformed = Object.entries(props).map(function (_ref7) { | |
| 1854 | + var _ref8 = (0, _slicedToArray2.default)(_ref7, 2), | |
| 1855 | + settingKey = _ref8[0], | |
| 1856 | + settingValue = _ref8[1]; | |
| 1857 | + var value = 'object' === (0, _typeof2.default)(settingValue) && 'value' in settingValue ? settingValue.value : settingValue; | |
| 1858 | + return [settingKey, value]; | |
| 1859 | + }); | |
| 1860 | + return Object.fromEntries(transformed); | |
| 1861 | + }; | |
| 1862 | + var getTagValue = function getTagValue() { | |
| 1863 | + var _elementor$dynamicTag; | |
| 1864 | + var tag = elementor.dynamicTags.createTag('v4-dynamic-tag', name, simpleTransform(settings)); | |
| 1865 | + if (!tag) { | |
| 1866 | + return null; | |
| 1867 | + } | |
| 1868 | + return (_elementor$dynamicTag = elementor.dynamicTags.loadTagDataFromCache(tag)) !== null && _elementor$dynamicTag !== void 0 ? _elementor$dynamicTag : null; | |
| 1869 | + }; | |
| 1870 | + var tagValue = getTagValue(); | |
| 1871 | + if (tagValue !== null) { | |
| 1872 | + return tagValue; | |
| 1873 | + } | |
| 1874 | + return new Promise(function (resolve) { | |
| 1875 | + elementor.dynamicTags.refreshCacheFromServer(function () { | |
| 1876 | + resolve(getTagValue()); | |
| 1877 | + }); | |
| 1878 | + }); | |
| 1879 | + }, | |
| 1880 | + handleDynamicLink: function handleDynamicLink(linkValue) { | |
| 1881 | + var _this1 = this; | |
| 1882 | + var result = this.getDynamicLinkValue(linkValue.name, linkValue.settings); | |
| 1883 | + if (!result) { | |
| 1884 | + return null; | |
| 1885 | + } | |
| 1886 | + if ('string' === typeof result) { | |
| 1887 | + return result; | |
| 1888 | + } | |
| 1889 | + result.then(function (href) { | |
| 1890 | + _this1.el.removeAttribute('href'); | |
| 1891 | + var attribute = 'action' === linkValue.group ? 'data-action-link' : 'href'; | |
| 1892 | + _this1.el.setAttribute(attribute, href); | |
| 1893 | + }).then(function () { | |
| 1894 | + return _this1.dispatchPreviewEvent('elementor/element/render'); | |
| 1895 | + }); | |
| 1896 | + return null; | |
| 1897 | + }, | |
| 1898 | + _resolvePropValue: function _resolvePropValue(prop, renderContext) { | |
| 1899 | + var _window2, _registry$get; | |
| 1900 | + if (!prop || (0, _typeof2.default)(prop) !== 'object') { | |
| 1901 | + return prop; | |
| 1902 | + } | |
| 1903 | + if ('overridable' !== prop.$$type) { | |
| 1904 | + return prop; | |
| 1905 | + } | |
| 1906 | + 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; | |
| 1907 | + var transformer = registry === null || registry === void 0 || (_registry$get = registry.get) === null || _registry$get === void 0 ? void 0 : _registry$get.call(registry, 'overridable'); | |
| 1908 | + if (!transformer) { | |
| 1909 | + var _prop$value; | |
| 1910 | + return (_prop$value = prop.value) === null || _prop$value === void 0 ? void 0 : _prop$value.origin_value; | |
| 1911 | + } | |
| 1912 | + var transformed = transformer(prop.value, { | |
| 1913 | + key: 'overridable', | |
| 1914 | + renderContext: renderContext | |
| 1915 | + }); | |
| 1916 | + return this._resolvePropValue(transformed, renderContext); | |
| 1611 | 1917 | }, |
| 1612 | 1918 | getInteractionId: function getInteractionId() { |
| 1613 | 1919 | var originId = this.model.get('originId'); |
| 1614 | 1920 | var id = this.model.get('id'); |
