| 1 |
(function (window, $) { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
var modalSelector = '.wpvr-image-resize-modal'; |
| 5 |
|
| 6 |
function getConfig() { |
| 7 |
if (window.wpvr_obj && window.wpvr_obj.image_resize_warning) { |
| 8 |
return window.wpvr_obj; |
| 9 |
} |
| 10 |
|
| 11 |
return window.wpvrSetupWizardData || {}; |
| 12 |
} |
| 13 |
|
| 14 |
function remove() { |
| 15 |
$(modalSelector).remove(); |
| 16 |
$(document).off('keydown.wpvrImageResizeWarning'); |
| 17 |
} |
| 18 |
|
| 19 |
function enableLargeImageHandler() { |
| 20 |
var config = getConfig(); |
| 21 |
|
| 22 |
if (!config.ajaxurl || !config.ajax_nonce) { |
| 23 |
return; |
| 24 |
} |
| 25 |
|
| 26 |
$.post(config.ajaxurl, { |
| 27 |
action: 'wpvr_enable_large_image_handler', |
| 28 |
nonce: config.ajax_nonce |
| 29 |
}); |
| 30 |
|
| 31 |
config.image_resize_warning.setting_enabled = true; |
| 32 |
} |
| 33 |
|
| 34 |
function warningIcon() { |
| 35 |
return '<svg width="36" height="30" viewBox="0 0 36 30" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' + |
| 36 |
'<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4802 1.86951L35.4553 24.3914C36.1816 25.5621 36.1816 26.9598 35.4553 28.1305C34.7289 29.3011 33.4278 30 31.9751 30H4.025C2.5722 30 1.2712 29.3011 0.5448 28.1305C-0.1816 26.9598 -0.1816 25.5621 0.5448 24.3914L14.5198 1.86951C15.2462 0.698907 16.5473 0 18 0C19.4527 0 20.7538 0.698841 21.4802 1.86951ZM31.9751 28.0358C32.6647 28.0358 33.2822 27.7041 33.6271 27.1484C33.9719 26.5927 33.9719 25.9291 33.6271 25.3734L19.6521 2.8515C19.3072 2.2958 18.6896 1.96404 18 1.96404C17.3104 1.96404 16.6928 2.2958 16.3479 2.8515L2.37293 25.3734C2.02812 25.9291 2.02812 26.5927 2.37293 27.1484C2.71774 27.7041 3.33537 28.0358 4.025 28.0358H31.9751Z" fill="#FAAC14"/>' + |
| 37 |
'<path d="M18 22C17.4486 22 17 22.4486 17 23C17 23.5514 17.4486 24 18 24C18.5514 24 19 23.5514 19 23C19 22.4486 18.5514 22 18 22Z" fill="#FAAC14"/>' + |
| 38 |
'<rect x="17" y="11" width="2" height="9" fill="#FAAC14"/>' + |
| 39 |
'</svg>'; |
| 40 |
} |
| 41 |
|
| 42 |
function showModal(attachment, applyImage) { |
| 43 |
var config = getConfig(); |
| 44 |
var strings = config.image_resize_warning || {}; |
| 45 |
var $modal = $('<div>', { |
| 46 |
class: 'wpvr-image-resize-modal', |
| 47 |
role: 'dialog', |
| 48 |
'aria-modal': 'true', |
| 49 |
'aria-labelledby': 'wpvr-image-resize-modal-title' |
| 50 |
}); |
| 51 |
var $setting = $('<input>', { |
| 52 |
type: 'checkbox', |
| 53 |
id: 'wpvr-disable-large-image-handler', |
| 54 |
checked: !!strings.setting_enabled |
| 55 |
}); |
| 56 |
var completed = false; |
| 57 |
|
| 58 |
function finish(imageUrl, enableSetting) { |
| 59 |
if (completed) { |
| 60 |
return; |
| 61 |
} |
| 62 |
|
| 63 |
completed = true; |
| 64 |
if (enableSetting) { |
| 65 |
enableLargeImageHandler(); |
| 66 |
} |
| 67 |
|
| 68 |
remove(); |
| 69 |
applyImage(imageUrl); |
| 70 |
} |
| 71 |
|
| 72 |
$setting.on('change', function () { |
| 73 |
if (this.checked) { |
| 74 |
finish(attachment.originalImageURL, true); |
| 75 |
} |
| 76 |
}); |
| 77 |
|
| 78 |
var $options = $('<div>', { class: 'wpvr-image-resize-modal__options' }); |
| 79 |
|
| 80 |
if (strings.can_manage_settings) { |
| 81 |
$options.append( |
| 82 |
$('<label>', { |
| 83 |
for: 'wpvr-disable-large-image-handler', |
| 84 |
class: 'wpvr-image-resize-modal__setting' |
| 85 |
}).append( |
| 86 |
$setting, |
| 87 |
$('<span>', { |
| 88 |
class: 'wpvr-image-resize-modal__toggle', |
| 89 |
'aria-hidden': 'true' |
| 90 |
}), |
| 91 |
$('<span>', { text: strings.disable_handler || '' }) |
| 92 |
), |
| 93 |
$('<p>', { |
| 94 |
class: 'wpvr-image-resize-modal__note', |
| 95 |
text: strings.high_resolution_note || '' |
| 96 |
}) |
| 97 |
); |
| 98 |
} |
| 99 |
|
| 100 |
var $body = $('<div>', { class: 'pano-error-body' }).append( |
| 101 |
$('<button>', { |
| 102 |
type: 'button', |
| 103 |
class: 'cross wpvr-image-resize-modal__close', |
| 104 |
'aria-label': strings.close || 'Close', |
| 105 |
text: '\u00d7' |
| 106 |
}).on('click', function () { |
| 107 |
finish(attachment.url); |
| 108 |
}), |
| 109 |
$('<span>', { class: 'icon pano-warning' }).html(warningIcon()), |
| 110 |
$('<div>', { class: 'pano-error-message' }).append( |
| 111 |
$('<h3>', { |
| 112 |
id: 'wpvr-image-resize-modal-title', |
| 113 |
class: 'pano-error-title', |
| 114 |
text: strings.heading || '' |
| 115 |
}), |
| 116 |
$('<p>', { |
| 117 |
text: strings.scaled_message || '' |
| 118 |
}) |
| 119 |
), |
| 120 |
$options |
| 121 |
); |
| 122 |
|
| 123 |
remove(); |
| 124 |
$('body').append( |
| 125 |
$modal.append( |
| 126 |
$('<div>', { class: 'pano-error-wrapper' }).append($body) |
| 127 |
) |
| 128 |
); |
| 129 |
|
| 130 |
$(document).on('keydown.wpvrImageResizeWarning', function (event) { |
| 131 |
if (event.key === 'Escape') { |
| 132 |
finish(attachment.url); |
| 133 |
} |
| 134 |
}); |
| 135 |
|
| 136 |
$modal.on('click', function (event) { |
| 137 |
if (event.target === this) { |
| 138 |
finish(attachment.url); |
| 139 |
} |
| 140 |
}); |
| 141 |
|
| 142 |
if (strings.can_manage_settings) { |
| 143 |
$setting.trigger('focus'); |
| 144 |
} else { |
| 145 |
$modal.find('.wpvr-image-resize-modal__close').trigger('focus'); |
| 146 |
} |
| 147 |
} |
| 148 |
|
| 149 |
function applySelection(attachment, applyImage) { |
| 150 |
var config = getConfig(); |
| 151 |
var strings = config.image_resize_warning || {}; |
| 152 |
var selectedUrl = attachment && attachment.url; |
| 153 |
var originalUrl = attachment && attachment.originalImageURL; |
| 154 |
|
| 155 |
if (!selectedUrl || typeof applyImage !== 'function') { |
| 156 |
return; |
| 157 |
} |
| 158 |
|
| 159 |
if (originalUrl && originalUrl !== selectedUrl && strings.setting_enabled) { |
| 160 |
applyImage(originalUrl); |
| 161 |
return; |
| 162 |
} |
| 163 |
|
| 164 |
if (originalUrl && originalUrl !== selectedUrl) { |
| 165 |
showModal(attachment, applyImage); |
| 166 |
return; |
| 167 |
} |
| 168 |
|
| 169 |
applyImage(selectedUrl); |
| 170 |
} |
| 171 |
|
| 172 |
function handleSelection(attachment, applyImage) { |
| 173 |
var attachmentId = parseInt(attachment && attachment.id, 10) || 0; |
| 174 |
var width = parseInt(attachment && attachment.width, 10) || 0; |
| 175 |
var height = parseInt(attachment && attachment.height, 10) || 0; |
| 176 |
var needsRefresh = !(attachment && attachment.originalImageURL) |
| 177 |
&& (width >= 2560 || height >= 2560) |
| 178 |
&& attachmentId |
| 179 |
&& window.wp |
| 180 |
&& wp.media; |
| 181 |
|
| 182 |
remove(); |
| 183 |
|
| 184 |
if (!needsRefresh) { |
| 185 |
applySelection(attachment, applyImage); |
| 186 |
return; |
| 187 |
} |
| 188 |
|
| 189 |
var attachmentModel = wp.media.attachment(attachmentId); |
| 190 |
|
| 191 |
attachmentModel.fetch() |
| 192 |
.done(function () { |
| 193 |
try { |
| 194 |
applySelection(attachmentModel.toJSON(), applyImage); |
| 195 |
} catch (error) { |
| 196 |
applyImage(attachment.url); |
| 197 |
} |
| 198 |
}) |
| 199 |
.fail(function () { |
| 200 |
applySelection(attachment, applyImage); |
| 201 |
}); |
| 202 |
} |
| 203 |
|
| 204 |
window.WPVRImageResizeWarning = { |
| 205 |
handleSelection: handleSelection, |
| 206 |
remove: remove |
| 207 |
}; |
| 208 |
}(window, jQuery)); |
| 209 |
|
