').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.
*
* @return {Promise} URI containing image data
*/
}, {
key: "createImage",
value: function createImage() {
var _this4 = this;
var pageLoadedPromise = new Promise(function (resolve) {
window.addEventListener('load', function () {
resolve();
});
});
var timeOutPromise = new Promise(function (resolve) {
setTimeout(function () {
resolve();
}, _this4.getSettings('render_timeout'));
});
return Promise.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.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 {string} 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 {string} dataUrl
* @return {Promise} Image Element
*/
}, {
key: "createImageElement",
value: function createImageElement(dataUrl) {
var image = new Image();
image.src = dataUrl;
return new Promise(function (resolve) {
image.onload = function () {
return resolve(image);
};
});
}
/**
* Crop the image to requested sizes.
*
* @param {HTMLImageElement} image
* @return {Promise} Canvas
*/
}, {
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.resolve(cropCanvas);
}
/**
* Send the image to the server.
*
* @param {HTMLCanvasElement} canvas
* @return {Promise} Screenshot URL
*/
}, {
key: "save",
value: function save(canvas) {
var _this5 = this;
var isTemplate = this.getSettings('template_id');
var endpoint = isTemplate ? 'save_template_screenshot' : 'screenshot_save';
var data = _objectSpread(_objectSpread({}, isTemplate ? {
template_id: this.getSettings('template_id')
} : {
post_id: this.getSettings('post_id')
}), {}, {
screenshot: canvas.toDataURL('image/png')
});
return new Promise(function (resolve, reject) {
elementorCommon.ajax.addRequest(endpoint, {
data: data,
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.
* @param {Error} e
*/
}, {
key: "markAsFailed",
value: function markAsFailed(e) {
var _this6 = this;
return new Promise(function (resolve, reject) {
var templateId = _this6.getSettings('template_id');
var postId = _this6.getSettings('post_id');
var route = templateId ? 'template_screenshot_failed' : 'screenshot_failed';
var data = templateId ? {
template_id: templateId,
error: e.message || e.toString()
} : {
post_id: postId
};
elementorCommon.ajax.addRequest(route, {
data: data,
success: function success() {
_this6.log("Marked as failed.");
resolve();
},
error: function error() {
_this6.log('Failed to mark this screenshot as failed.');
reject();
}
});
});
}
/**
* @param {string} url
* @return {string} Screenshot Proxy URL
*/
}, {
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.
*
* @param {string} imageUrl
*/
}, {
key: "screenshotSucceed",
value: function screenshotSucceed(imageUrl) {
this.screenshotDone(true, imageUrl);
}
/**
* Notify that the screenshot has been failed.
*
* @param {Error} e
*/
}, {
key: "screenshotFailed",
value: function screenshotFailed(e) {
var _this7 = this;
this.log(e, null);
this.markAsFailed(e).then(function () {
return _this7.screenshotDone(false);
});
}
/**
* Final method of the screenshot.
*
* @param {boolean} success
* @param {string} imageUrl
*/
}, {
key: "screenshotDone",
value: function screenshotDone(success) {
var imageUrl = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
clearTimeout(this.timeoutTimer);
this.timeoutTimer = null;
var templateId = this.getSettings('template_id');
var postId = this.getSettings('post_id');
var message = templateId ? 'library/capture-screenshot-done' : 'capture-screenshot-done';
// 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: message,
success: success,
id: templateId ? templateId : postId,
imageUrl: imageUrl
}, '*');
this.log("Screenshot ".concat(success ? 'Succeed' : 'Failed', "."), 'timeEnd');
}
/**
* Log messages for debugging.
*
* @param {any} message
* @param {string?} 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'));
}
}
}]);
}(elementorModules.ViewModule);
jQuery(function () {
new Screenshot();
});
})();
/******/ })()
;
//# sourceMappingURL=cloud-library-screenshot.js.map