PageSpeed_Page_View.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. /**
  2. * File: PageSpeed_Page_View.js
  3. *
  4. * JavaScript for the PageSpeed page.
  5. *
  6. * @since 2.3.0 Update to utilize OAuth2.0 and overhaul of feature.
  7. *
  8. * @global w3tcData Localized data.
  9. */
  10. jQuery(document).ready(function ($) {
  11. /**
  12. * Analyze GPS page_post URL via AJAX to Google PageSpeed Insights.
  13. *
  14. * @since 2.3.0
  15. *
  16. * @param object page_post GPS page page_post object.
  17. * @param boolean nocache Flag to enable/disable results cache.
  18. *
  19. * @return void
  20. */
  21. function w3tcps_analyze(page_post, nocache) {
  22. let page_post_id = page_post.find('.w3tcps_buttons').attr('page_post_id');
  23. let page_post_url = page_post.find('.w3tcps_buttons').attr('page_post_url');
  24. page_post.find('.page_post_psresults').fadeOut('fast');
  25. page_post.find('.w3tcps_buttons').addClass('w3tc_none');
  26. page_post.find('.w3tcps_loading').removeClass('w3tc_none').find('.spinner').addClass('is-active');
  27. page_post.find('.w3tcps_error').addClass('w3tc_none');
  28. $.ajax({
  29. type: 'GET',
  30. url: ajaxurl + '?action=w3tc_ajax&_wpnonce=' + w3tc_nonce + '&w3tc_action=pagespeed_data&url=' + encodeURIComponent(page_post_url) + (nocache ? '&cache=no' : ''),
  31. dataType: 'json',
  32. success: function (data) {
  33. $('#' + page_post_id).prev().find('.w3tcps_loading').addClass('w3tc_none').find('.spinner').removeClass('is-active');
  34. if (data.error) {
  35. $('.w3tcps_buttons').removeClass('w3tc_none');
  36. $('#' + page_post_id).prev().find('.w3tcps_error').html(w3tcData.lang.pagespeed_data_error + data.error);
  37. $('#' + page_post_id).prev().find('.w3tcps_error').removeClass('w3tc_none');
  38. return;
  39. } else if (data.missing_token) {
  40. $('.w3tcps_buttons').addClass('w3tc_none');
  41. $('#' + page_post_id).prev().find('.w3tcps_missing_token').html(data.missing_token);
  42. $('#' + page_post_id).prev().find('.w3tcps_missing_token').removeClass('w3tc_none');
  43. return;
  44. }
  45. $('.w3tcps_timestamp').html(data.w3tcps_timestamp);
  46. $('.w3tcps_buttons').removeClass('w3tc_none');
  47. $('#' + page_post_id).html(data.w3tcps_content).fadeIn('slow');
  48. $('.w3tcps_item_desciption a').attr('target', '_blank');
  49. },
  50. error: function (jqXHR, textStatus, errorThrown) {
  51. $('.w3tcps_analyze').prop('disabled', false);
  52. $('#' + page_post_id).prev().find('.w3tcps_error').html(w3tcData.lang.pagespeed_data_error + errorThrown);
  53. $('#' + page_post_id).prev().find('.w3tcps_error').removeClass('w3tc_none');
  54. $('#' + page_post_id).prev().find('.w3tcps_loading').addClass('w3tc_none').find('.spinner').removeClass('is-active');
  55. },
  56. async: true
  57. });
  58. }
  59. /**
  60. * Toggle breakdown accordion.
  61. *
  62. * @since 2.3.0
  63. *
  64. * @return void
  65. */
  66. function w3tcps_breakdown_items_toggle() {
  67. if (window.w3tc_ga) {
  68. w3tc_ga(
  69. 'event',
  70. 'metric',
  71. {
  72. eventCategory: 'w3tc_pagespeed',
  73. eventLabel: $(this).attr('gatitle')
  74. }
  75. );
  76. }
  77. $(this).find('.dashicons').toggleClass("dashicons-arrow-up-alt2 dashicons-arrow-down-alt2");
  78. $(this).next().slideToggle();
  79. }
  80. /**
  81. * View mobile tab.
  82. *
  83. * @since 2.3.0
  84. *
  85. * @return void
  86. */
  87. function w3tcps_mobile_toggle() {
  88. if (window.w3tc_ga) {
  89. w3tc_ga(
  90. 'event',
  91. 'mobile_tab',
  92. {
  93. eventCategory: 'w3tc_pagespeed',
  94. eventLabel: $('#w3tcps_control_mobile').text()
  95. }
  96. );
  97. }
  98. $('#w3tcps_control_desktop').removeClass('nav-tab-active');
  99. $('#w3tcps_desktop').hide();
  100. $('#w3tcps_control_mobile').addClass('nav-tab-active');
  101. $('#w3tcps_mobile').show();
  102. }
  103. /**
  104. * View desktop tab.
  105. *
  106. * @since 2.3.0
  107. *
  108. * @return void
  109. */
  110. function w3tcps_desktop_toggle() {
  111. if (window.w3tc_ga) {
  112. w3tc_ga(
  113. 'event',
  114. 'desktop_tab',
  115. {
  116. eventCategory: 'w3tc_pagespeed',
  117. eventLabel: $('#w3tcps_control_desktop').text()
  118. }
  119. );
  120. }
  121. $('#w3tcps_control_mobile').removeClass('nav-tab-active');
  122. $('#w3tcps_mobile').hide();
  123. $('#w3tcps_control_desktop').addClass('nav-tab-active');
  124. $('#w3tcps_desktop').show();
  125. }
  126. /**
  127. * View breakdown auidt type tab.
  128. *
  129. * @since 2.3.0
  130. *
  131. * @return void
  132. */
  133. function w3tcps_audit_filter(event) {
  134. event.preventDefault();
  135. if (window.w3tc_ga) {
  136. w3tc_ga(
  137. 'event',
  138. 'filter_tab',
  139. {
  140. eventCategory: 'w3tc_pagespeed',
  141. eventLabel: $(this).text()
  142. }
  143. );
  144. }
  145. if ('ALL' === $(this).text()) {
  146. $('.w3tcps_breakdown .audits').show();
  147. } else if ($(this).text().trim) {
  148. $('.w3tcps_breakdown .audits').hide();
  149. $('.w3tcps_breakdown .' + $(this).text()).delay(200).show();
  150. } else {
  151. $('.w3tcps_breakdown .audits').show();
  152. alert(w3tcData.lang.pagespeed_filter_error);
  153. }
  154. }
  155. /**
  156. * Copy full URL value.
  157. *
  158. * @since 2.3.0
  159. *
  160. * @return void
  161. */
  162. function w3tcps_copyurl() {
  163. var copyurl = $(this).attr('copyurl');
  164. const message = document.createElement("span");
  165. message.id = 'copyurl_result';
  166. message.style.cssText = 'position:absolute;background:#ffffff;padding:0 5px;';
  167. if (window.isSecureContext && navigator.clipboard) {
  168. navigator.clipboard.writeText(copyurl).then(
  169. function () {
  170. message.style.cssText += 'border:2px solid #72aee6;';
  171. message.textContent = "Coppied to clipboard";
  172. },
  173. function () {
  174. message.style.cssText += 'border:2px solid #00a32a;';
  175. message.textContent = 'Unable to copy to clipboard';
  176. }
  177. );
  178. } else {
  179. const textArea = document.createElement("textarea");
  180. textArea.id = 'copyurl_fallback';
  181. textArea.style.cssText = 'position:absolute;left:-10000px;';
  182. textArea.value = copyurl;
  183. $(this).append(textArea);
  184. textArea.focus();
  185. textArea.select();
  186. try {
  187. document.execCommand('copy');
  188. message.style.cssText += 'border:2px solid #72aee6;';
  189. message.textContent = "Coppied to clipboard";
  190. } catch (err) {
  191. console.error('Unable to copy to clipboard', err);
  192. message.style.cssText += 'border:2px solid #00a32a;';
  193. message.textContent = 'Unable to copy to clipboard';
  194. }
  195. $('#copyurl_fallback').remove();
  196. }
  197. $(this).parent().prepend(message);
  198. setTimeout(
  199. function () {
  200. $('#copyurl_result').remove();
  201. },
  202. 2000
  203. );
  204. }
  205. function showSnackBar() {
  206. var sb = document.getElementById("snackbar");
  207. //this is where the class name will be added & removed to activate the css
  208. sb.className = "show";
  209. setTimeout(() => { sb.className = sb.className.replace("show", ""); }, 3000);
  210. }
  211. $(document).on('click', '.w3tcps_breakdown_items_toggle', w3tcps_breakdown_items_toggle);
  212. $(document).on('click', '#w3tcps_control_mobile', w3tcps_mobile_toggle);
  213. $(document).on('click', '#w3tcps_control_desktop', w3tcps_desktop_toggle);
  214. $(document).on('click', '.w3tcps_audit_filter', w3tcps_audit_filter);
  215. $(document).on('click', '.copyurl', w3tcps_copyurl);
  216. $('.w3tcps_content').on('click', '.w3tcps_analyze', function () {
  217. if (window.w3tc_ga) {
  218. w3tc_ga(
  219. 'event',
  220. 're_analyze',
  221. {
  222. eventCategory: 'w3tc_pagespeed',
  223. eventLabel: $(this).closest('.page_post').find('.w3tcps_buttons').attr('page_post_url')
  224. }
  225. );
  226. }
  227. w3tcps_analyze($(this).closest('.page_post'), true);
  228. });
  229. w3tcps_analyze($('#w3tcps_home .page_post'), false);
  230. });