').css({
height: this.getSettings('crop.height'),
width: this.getSettings('crop.width'),
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
});
this.elements.$elementor.append(jQuery('
').css({
fontSize: '85px'
}).html(this.getSettings('empty_content_headline')));
document.body.prepend(this.elements.$elementor);
}
/**
* CSS from another server cannot be loaded with the current dom to image library.
* this method take all the links from another domain and proxy them.
*/
}, {
key: "loadExternalCss",
value: function loadExternalCss() {
var _this = this;
var excludedUrls = [this.getSettings('home_url')].concat((0, _toConsumableArray2.default)(this.getSettings('excluded_external_css_urls')));
var notSelector = excludedUrls.map(function (url) {
return "[href^=\"".concat(url, "\"]");
}).join(', ');
jQuery('link').not(notSelector).each(function (index, el) {
var $link = jQuery(el),
$newLink = $link.clone();
$newLink.attr('href', _this.getScreenshotProxyUrl($link.attr('href')));
_this.elements.$head.append($newLink);
$link.remove();
});
}
/**
* Make a proxy to images urls that has some problems with cross origin (like youtube).
*/
}, {
key: "loadExternalImages",
value: function loadExternalImages() {
var _this2 = this;
var selector = this.getSettings('external_images_urls').map(function (url) {
return "img[src^=\"".concat(url, "\"]");
}).join(', ');
jQuery(selector).each(function (index, el) {
var $img = jQuery(el);
$img.attr('src', _this2.getScreenshotProxyUrl($img.attr('src')));
});
}
/**
* Html to images libraries can not snapshot IFrames
* this method convert all the IFrames to some other elements.
*/
}, {
key: "handleIFrames",
value: function handleIFrames() {
this.elements.$elementor.find('iframe').each(function (index, el) {
var $iframe = jQuery(el),
$iframeMask = jQuery('
', {
css: {
background: 'gray',
width: $iframe.width(),
height: $iframe.height()
}
});
$iframe.before($iframeMask);
$iframe.remove();
});
}
/**
* Remove all the sections that should not be in the screenshot.
*/
}, {
key: "removeUnnecessaryElements",
value: function removeUnnecessaryElements() {
var _this3 = this;
var currentHeight = 0;
this.elements.$sections.filter(function (index, el) {
var shouldBeRemoved = false;
if (currentHeight >= _this3.getSettings('crop.height')) {
shouldBeRemoved = true;
}
currentHeight += jQuery(el).outerHeight();
return shouldBeRemoved;
}).each(function (index, el) {
el.remove();
}); // Some 3rd party plugins inject elements into the dom, so this method removes all
// the elements that was injected, to make sure that it capture a screenshot only of the post itself.
this.elements.$notElementorElements.remove();
}
/**
* Some urls make some problems to the svg parser.
* this method convert all the urls to just '/'.
*/
}, {
key: "handleLinks",
value: function handleLinks() {
elementorCommon.elements.$body.find('a').attr('href', '/');
}
/**
* Remove unnecessary margin from the first element of the post (singles and footers).
*/
}, {
key: "removeFirstSectionMargin",
value: function removeFirstSectionMargin() {
this.elements.$firstSection.css({
marginTop: 0
});
}
/**
* Creates a png image.
*
* @returns {Promise}
*/
}, {
key: "createImage",
value: function createImage() {
var _this4 = this;
var pageLoadedPromise = new _promise.default(function (resolve) {
window.addEventListener('load', function () {
resolve();
});
});
var timeOutPromise = new _promise.default(function (resolve) {
setTimeout(function () {
resolve();
}, _this4.getSettings('render_timeout'));
});
return _promise.default.race([pageLoadedPromise, timeOutPromise]).then(function () {
_this4.log('Start creating screenshot.');
if (_this4.getSettings('isDebugSvg')) {
domtoimage.toSvg(document.body, {
imagePlaceholder: _this4.getSettings('image_placeholder')
}).then(function (svg) {
return _this4.download(svg);
});
return _promise.default.reject('Debug SVG.');
} // TODO: Extract to util function.
var isSafari = /^((?!chrome|android).)*safari/i.test(window.userAgent); // Safari browser has some problems with the images that dom-to-images
// library creates, so in this specific case the screenshot uses html2canvas.
// Note that dom-to-image creates more accurate screenshot in "not safari" browsers.
if (isSafari) {
_this4.log('Creating screenshot with "html2canvas"');
return html2canvas(document.body).then(function (canvas) {
return canvas.toDataURL('image/png');
});
}
_this4.log('Creating screenshot with "dom-to-image"');
return domtoimage.toPng(document.body, {
imagePlaceholder: _this4.getSettings('image_placeholder')
});
});
}
/**
* Download a uri, use for debugging the svg that created from dom to image libraries.
*
* @param uri
*/
}, {
key: "download",
value: function download(uri) {
var $link = jQuery('', {
href: uri,
download: 'debugSvg.svg',
html: 'Download SVG'
});
elementorCommon.elements.$body.append($link);
$link.trigger('click');
}
/**
* Creates fake image element to get the size of the image later on.
*
* @param dataUrl
* @returns {Promise}
*/
}, {
key: "createImageElement",
value: function createImageElement(dataUrl) {
var image = new Image();
image.src = dataUrl;
return new _promise.default(function (resolve) {
image.onload = function () {
return resolve(image);
};
});
}
/**
* Crop the image to requested sizes.
*
* @param image
* @returns {Promise}
*/
}, {
key: "cropCanvas",
value: function cropCanvas(image) {
var width = this.getSettings('crop.width');
var height = this.getSettings('crop.height');
var cropCanvas = document.createElement('canvas'),
cropContext = cropCanvas.getContext('2d'),
ratio = width / image.width;
cropCanvas.width = width;
cropCanvas.height = height > image.height ? image.height : height;
cropContext.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width * ratio, image.height * ratio);
return _promise.default.resolve(cropCanvas);
}
/**
* Send the image to the server.
*
* @param canvas
* @returns {Promise}
*/
}, {
key: "save",
value: function save(canvas) {
var _this5 = this;
return new _promise.default(function (resolve, reject) {
elementorCommon.ajax.addRequest('screenshot_save', {
data: {
post_id: _this5.getSettings('post_id'),
screenshot: canvas.toDataURL('image/png')
},
success: function success(url) {
_this5.log("Screenshot created: ".concat(encodeURI(url)));
resolve(url);
},
error: function error() {
_this5.log('Failed to create screenshot.');
reject();
}
});
});
}
/**
* Mark this post screenshot as failed.
*/
}, {
key: "markAsFailed",
value: function markAsFailed() {
var _this6 = this;
return new _promise.default(function (resolve, reject) {
elementorCommon.ajax.addRequest('screenshot_failed', {
data: {
post_id: _this6.getSettings('post_id')
},
success: function success() {
_this6.log("Marked as failed.");
resolve();
},
error: function error() {
_this6.log('Failed to mark this screenshot as failed.');
reject();
}
});
});
}
/**
* @param url
* @returns {string}
*/
}, {
key: "getScreenshotProxyUrl",
value: function getScreenshotProxyUrl(url) {
return "".concat(this.getSettings('home_url'), "?screenshot_proxy&nonce=").concat(this.getSettings('nonce'), "&href=").concat(url);
}
/**
* Notify that the screenshot has been succeed.
*/
}, {
key: "screenshotSucceed",
value: function screenshotSucceed(imageUrl) {
this.screenshotDone(true, imageUrl);
}
/**
* Notify that the screenshot has been failed.
*/
}, {
key: "screenshotFailed",
value: function screenshotFailed(e) {
var _this7 = this;
this.log(e, null);
this.markAsFailed().then(function () {
return _this7.screenshotDone(false);
});
}
/**
* Final method of the screenshot.
*
* @param success
* @param imageUrl
*/
}, {
key: "screenshotDone",
value: function screenshotDone(success) {
var imageUrl = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
clearTimeout(this.timeoutTimer);
this.timeoutTimer = null; // Send the message to the parent window and not to the top.
// e.g: The `Theme builder` is loaded into an iFrame so the message of the screenshot
// should be sent to the `Theme builder` window and not to the top window.
window.parent.postMessage({
name: 'capture-screenshot-done',
success: success,
id: this.getSettings('post_id'),
imageUrl: imageUrl
}, '*');
this.log("Screenshot ".concat(success ? 'Succeed' : 'Failed', "."), 'timeEnd');
}
/**
* Log messages for debugging.
*
* @param message
* @param timerMethod
*/
}, {
key: "log",
value: function log(message) {
var timerMethod = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'timeLog';
if (!this.getSettings('isDebug')) {
return;
} // eslint-disable-next-line no-console
console.log('string' === typeof message ? "".concat(this.getSettings('post_id'), " - ").concat(message) : message);
if (timerMethod) {
// eslint-disable-next-line no-console
console[timerMethod](this.getSettings('timer_label'));
}
}
}]);
return Screenshot;
}(elementorModules.ViewModule);
jQuery(function () {
new Screenshot();
});
/***/ }),
/* 544 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var $at = __webpack_require__(164)(true);
// 21.1.3.27 String.prototype[@@iterator]()
__webpack_require__(240)(String, 'String', function (iterated) {
this._t = String(iterated); // target
this._i = 0; // next index
// 21.1.5.2.1 %StringIteratorPrototype%.next()
}, function () {
var O = this._t;
var index = this._i;
var point;
if (index >= O.length) return { value: undefined, done: true };
point = $at(O, index);
this._i += point.length;
return { value: point, done: false };
});
/***/ })
/******/ ]);
//# sourceMappingURL=screenshot.js.map