PluginProbe
MainWP Dashboard: Self-hosted WordPress Management for Agencies / 6.1
MainWP Dashboard: Self-hosted WordPress Management for Agencies v6.1
6.2 6.1.8 6.1.7 6.1.6 6.1.5 6.1.4 6.1.3 6.1.2 6.1.1 6.1 6.0.12 6.0.11 4.6.0.1 5.0 5.0.1 5.0.2 5.0.3 5.0.3.1 5.0.3.2 5.1 5.1.1 5.2 5.2.1 5.2.2 5.3 All 153 releases
mainwp / assets / js / preview.js

preview.js in MainWP Dashboard: Self-hosted WordPress Management for Agencies 6.1, at assets/js/preview.js

201 lines 6.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 *
3 * Credits
4 *
5 * Plugin-Name: Akismet Anti-Spam
6 * Plugin-URI: https://akismet.com/
7 * Author: Automattic
8 * Author URI: https://automattic.com/wordpress-plugins/
9 * License: GPLv2 or later
10 * Text Domain: akismet
11 *
12 */
13
14 jQuery(function($) {
15 const MSHOT_REFRESH_DELAY = 6000;
16 const MSHOT_REFRESH_QUERY_ARG = 'mainwp_mshot_refresh';
17
18 function mainwp_preview_append_cache_bust(url, token) {
19 if (!url) {
20 return url;
21 }
22
23 let separator = url.indexOf('?') === -1 ? '?' : '&';
24
25 return url + separator + MSHOT_REFRESH_QUERY_ARG + '=' + encodeURIComponent(token + '-' + Date.now());
26 }
27
28 function mainwp_preview_get_button_mshot_url(element, requeue) {
29 let attrName = requeue ? 'data-mainwp-mshot-requeue-src' : 'data-mainwp-mshot-src';
30 let mshotUrl = $(element).attr(attrName);
31
32 if (mshotUrl) {
33 return mshotUrl;
34 }
35
36 let linkUrl = $(element).attr('preview-site-url');
37
38 if (!linkUrl) {
39 return '';
40 }
41
42 mshotUrl = '//s0.wp.com/mshots/v1/' + encodeURIComponent(linkUrl) + '?w=900';
43
44 if (requeue) {
45 mshotUrl += '&requeue=true';
46 }
47
48 return mshotUrl;
49 }
50
51 function mainwp_preview_clear_image_recovery(img) {
52 if (img && img.mainwpMshotRecoveryTimer) {
53 clearTimeout(img.mainwpMshotRecoveryTimer);
54 img.mainwpMshotRecoveryTimer = null;
55 }
56 }
57
58 function mainwp_preview_queue_image_recovery(img) {
59 if (!img || img.dataset.mainwpMshotRecoveryRequested === '1') {
60 return;
61 }
62
63 let primarySrc = img.getAttribute('data-mainwp-mshot-src') || img.getAttribute('data-src') || img.getAttribute('src');
64 let requeueSrc = img.getAttribute('data-mainwp-mshot-requeue-src');
65
66 if (!primarySrc || !requeueSrc) {
67 return;
68 }
69
70 img.dataset.mainwpMshotRecoveryRequested = '1';
71 mainwp_preview_clear_image_recovery(img);
72
73 // Ask mShots to regenerate the thumbnail once, then retry the canonical URL.
74 img.setAttribute('src', mainwp_preview_append_cache_bust(requeueSrc, 'requeue'));
75 img.mainwpMshotRecoveryTimer = setTimeout(function () {
76 img.setAttribute('src', mainwp_preview_append_cache_bust(primarySrc, 'reload'));
77 }, MSHOT_REFRESH_DELAY);
78 }
79
80 if (!window.mainwpPreviewImageRecoveryBound) {
81 document.addEventListener('error', function (event) {
82 let target = event.target;
83
84 if (target && target.tagName === 'IMG') {
85 mainwp_preview_queue_image_recovery(target);
86 }
87 }, true);
88
89 window.mainwpPreviewImageRecoveryBound = true;
90 }
91
92 /**
93 * Init site preview function.
94 */
95 window.mainwp_preview_init_event = function () {
96 let mshotRemovalTimer = null;
97 let mshotSecondTryTimer = null;
98 let mshotThirdTryTimer = null;
99 let previewTableSelector = '.mainwp-with-preview-table';
100 let mshotEnabledLinkSelector = 'td span.mainwp-preview-item';
101
102 // Show a preview image of the hovered URL.
103 $(previewTableSelector).off('.mainwpPreview').on('click.mainwpPreview', mshotEnabledLinkSelector, function () {
104 clearTimeout(mshotRemovalTimer);
105
106 if ($('.mainwp-preview-mshot').length > 0) {
107 if ($('.mainwp-preview-mshot:first').data('link') == this) {
108 // The preview is already showing for this link.
109 return;
110 }
111 else {
112 // A new link is being hovered, so remove the old preview.
113 let existingImage = $('.mainwp-preview-mshot .mshot-image').get(0);
114 mainwp_preview_clear_image_recovery(existingImage);
115 $('.mainwp-preview-mshot').remove();
116 }
117 }
118
119 clearTimeout(mshotSecondTryTimer);
120 clearTimeout(mshotThirdTryTimer);
121
122 let primarySrc = mainwp_preview_get_button_mshot_url(this, false);
123 let requeueSrc = mainwp_preview_get_button_mshot_url(this, true);
124 let $image = $('<img />', {
125 src: primarySrc,
126 width: 450,
127 height: 338,
128 class: 'mshot-image'
129 });
130 let mShot = $('<div class="mainwp-preview-mshot mshot-container"><div class="mshot-arrow"></div></div>');
131
132 $image.attr('data-mainwp-mshot-src', primarySrc);
133 $image.attr('data-mainwp-mshot-requeue-src', requeueSrc);
134 mShot.append($image);
135 mShot.data('link', this);
136
137 let offset = $(this).offset();
138
139 mShot.offset({
140 left: Math.min($(window).width() - 475, offset.left + $(this).width() + 10), // Keep it on the screen if the link is near the edge of the window.
141 top: offset.top + ($(this).height() / 2) - 101 // 101 = top offset of the arrow plus the top border thickness
142 });
143
144 // These retries appear to be superfluous if .mshot-image has already loaded, but it's because mShots
145 // can return a "Generating thumbnail..." image if it doesn't have a thumbnail ready, so we need
146 // to retry to see if we can get the newly generated thumbnail.
147 mshotSecondTryTimer = setTimeout(function () {
148 mShot.find('.mshot-image').attr('src', mainwp_preview_append_cache_bust(primarySrc, 'retry-2'));
149 }, MSHOT_REFRESH_DELAY);
150
151 mshotThirdTryTimer = setTimeout(function () {
152 mShot.find('.mshot-image').attr('src', mainwp_preview_append_cache_bust(primarySrc, 'retry-3'));
153 }, MSHOT_REFRESH_DELAY * 2);
154
155 $('body').append(mShot);
156 }).on('mouseover.mainwpPreview', 'tr', function () {
157 // When the mouse hovers over a row, begin preloading mshots for links.
158 let linksToPreloadMshotsFor = $(this).find(mshotEnabledLinkSelector);
159
160 linksToPreloadMshotsFor.each(function () {
161 // Don't attempt to preload an mshot for a single link twice. Browser caching should cover this, but in case of
162 // race conditions, save a flag locally when we've begun trying to preload one.
163 if (!$(this).data('mainwp-preview-mshot-preloaded')) {
164 mainwp_preview_preload_mshot(this);
165 $(this).data('mainwp-preview-mshot-preloaded', true);
166 }
167 });
168 });
169
170 $(document).off('mouseup.mainwpPreview').on('mouseup.mainwpPreview', function () {
171 if ($('.mainwp-preview-mshot').length > 0) {
172 mshotRemovalTimer = setTimeout(function () {
173 clearTimeout(mshotSecondTryTimer);
174 clearTimeout(mshotThirdTryTimer);
175 let previewImage = $('.mainwp-preview-mshot .mshot-image').get(0);
176
177 mainwp_preview_clear_image_recovery(previewImage);
178 $('.mainwp-preview-mshot').remove();
179 }, 100);
180 }
181 });
182 };
183
184 // init preview.
185 mainwp_preview_init_event();
186
187 /**
188 * Begin loading an mShot preview of a link.
189 *
190 * @param object linkElement Preview trigger element.
191 */
192 function mainwp_preview_preload_mshot(linkElement) {
193 let img = new Image();
194 let primarySrc = mainwp_preview_get_button_mshot_url(linkElement, false);
195
196 if (primarySrc) {
197 img.src = primarySrc;
198 }
199 }
200 });
201