| @@ -1,7 +1,5 @@ | ||
| 1 | 1 | /* global visualizer */ |
| 2 | -/* global alert */ | |
| 3 | - | |
| 4 | 2 | (function (wpmv) { |
| 5 | 3 | var vm, vmv; |
| 6 | 4 | |
| 7 | 5 | vm = visualizer.media = {}; |
| @@ -22,48 +20,24 @@ | ||
| 22 | 20 | self.createIframeStates(); |
| 23 | 21 | }, |
| 24 | 22 | |
| 25 | 23 | open: function () { |
| 26 | - try{ | |
| 27 | - wpmv.MediaFrame.prototype.open.apply(this, arguments); | |
| 28 | - }catch(error){ | |
| 29 | - alert(visualizer.i10n.conflict); | |
| 30 | - } | |
| 24 | + wpmv.MediaFrame.prototype.open.apply(this, arguments); | |
| 31 | 25 | this.$el.addClass('hide-menu'); |
| 32 | 26 | } |
| 33 | 27 | }); |
| 34 | 28 | })(wp.media.view); |
| 35 | 29 | |
| 36 | -function createPopupProBlocker( $ , e ) { | |
| 37 | - if ( ! visualizer.is_pro_user && e.target.classList.contains('viz-is-pro-chart') ) { | |
| 38 | - $("#overlay-visualizer").css("display", "block"); | |
| 39 | - $(".vizualizer-renew-notice-popup").css("display", "block"); | |
| 40 | - return true; | |
| 41 | - } | |
| 42 | - return false; | |
| 43 | -} | |
| 44 | - | |
| 45 | 30 | (function ($, vmv, vu) { |
| 46 | 31 | var resizeTimeout; |
| 47 | 32 | |
| 48 | 33 | $.fn.adjust = function () { |
| 49 | - if ( $( '#visualizer-library' ).hasClass( 'view-list' ) ) { | |
| 50 | - return this; | |
| 51 | - } | |
| 52 | 34 | return $(this).each(function () { |
| 53 | 35 | var width = $('#visualizer-library').width(), |
| 54 | 36 | margin = width * 0.02; |
| 55 | 37 | |
| 56 | 38 | width *= 0.305; |
| 57 | - $(this).prev( '.visualizer-chart-title' ).width(width - 14); | |
| 58 | - var ChartHeight = width * 0.93; | |
| 59 | - if ( $( '.visualizer-nochart-canvas' ).length === 0 ) { | |
| 60 | - ChartHeight = width * 0.78; | |
| 61 | - if ( $( '#visualizer-sidebar' ).hasClass('one-columns') ) { | |
| 62 | - ChartHeight = width * 0.92; | |
| 63 | - } | |
| 64 | - } | |
| 65 | - $(this).width(width).height( ChartHeight ); | |
| 39 | + $(this).width(width - 14).height(width * 0.75).parent().css('margin-right', margin + 'px').css('margin-bottom', margin + 'px'); | |
| 66 | 40 | }); |
| 67 | 41 | }; |
| 68 | 42 | |
| 69 | 43 | $('.visualizer-chart-canvas').adjust(); |
| @@ -68,213 +42,44 @@ | ||
| 68 | 42 | |
| 69 | 43 | $('.visualizer-chart-canvas').adjust(); |
| 70 | 44 | |
| 71 | 45 | $(document).ready(function () { |
| 72 | - // clears the filters in the library form and submits. | |
| 73 | - $('#viz-lib-reset').on('click', function(e){ | |
| 74 | - e.preventDefault(); | |
| 75 | - $(this).parent('form')[0].reset(); | |
| 76 | - $(this).parent('form').find('.viz-filter').each(function(index, el){ | |
| 77 | - var tag = $(el).prop('tagName').toLowerCase() + (typeof $(el).attr('type') !== 'undefined' ? $(el).attr('type').toLowerCase() : ''); | |
| 78 | - switch(tag){ | |
| 79 | - case 'select': | |
| 80 | - $(el).prop('selectedIndex', 0); | |
| 81 | - break; | |
| 82 | - case 'inputtext': | |
| 83 | - $(el).val(''); | |
| 84 | - break; | |
| 85 | - } | |
| 46 | + $('.visualizer-chart, .visualizer-library-pagination').fadeIn(500); | |
| 86 | 47 | |
| 87 | - }); | |
| 88 | - $(this).parent('form').submit(); | |
| 89 | - }); | |
| 90 | - | |
| 91 | - // Copy shortcode when clicking the code display in list view. | |
| 92 | - $( document ).on( 'click', '.viz-shortcode-display', function () { | |
| 93 | - var text = $( this ).text(); | |
| 94 | - var el = this; | |
| 95 | - | |
| 96 | - // Fallback copy method using a temporary textarea. Returns true on success. | |
| 97 | - var fallbackCopy = function ( value ) { | |
| 98 | - var ta = document.createElement( 'textarea' ); | |
| 99 | - ta.value = value; | |
| 100 | - document.body.appendChild( ta ); | |
| 101 | - ta.select(); | |
| 102 | - var succeeded = false; | |
| 103 | - try { | |
| 104 | - succeeded = document.execCommand( 'copy' ); | |
| 105 | - } catch ( e ) { | |
| 106 | - succeeded = false; | |
| 107 | - } | |
| 108 | - document.body.removeChild( ta ); | |
| 109 | - return succeeded; | |
| 110 | - }; | |
| 111 | - | |
| 112 | - // Apply temporary "copied" feedback. | |
| 113 | - var showCopiedFeedback = function () { | |
| 114 | - $( el ).addClass( 'viz-shortcode-copied' ); | |
| 115 | - setTimeout( function () { | |
| 116 | - $( el ).removeClass( 'viz-shortcode-copied' ); | |
| 117 | - }, 1200 ); | |
| 118 | - }; | |
| 119 | - | |
| 120 | - if ( navigator.clipboard && navigator.clipboard.writeText ) { | |
| 121 | - navigator.clipboard.writeText( text ).then( function () { | |
| 122 | - // Clipboard API succeeded. | |
| 123 | - showCopiedFeedback(); | |
| 124 | - } ).catch( function () { | |
| 125 | - // Clipboard API failed; fall back to textarea method. | |
| 126 | - if ( fallbackCopy( text ) ) { | |
| 127 | - showCopiedFeedback(); | |
| 128 | - } | |
| 129 | - } ); | |
| 130 | - } else { | |
| 131 | - // No Clipboard API; use fallback directly. | |
| 132 | - if ( fallbackCopy( text ) ) { | |
| 133 | - showCopiedFeedback(); | |
| 134 | - } | |
| 135 | - } | |
| 136 | - } ); | |
| 137 | - | |
| 138 | - $('.visualizer-chart-shortcode').click(function (event) { | |
| 139 | - | |
| 140 | - if ( createPopupProBlocker( $, event ) ) { | |
| 141 | - event.preventDefault(); | |
| 142 | - event.stopPropagation(); | |
| 143 | - return; | |
| 144 | - } | |
| 145 | - | |
| 48 | + $('.visualizer-chart-shortcode').click(function (e) { | |
| 146 | 49 | var range, selection; |
| 147 | 50 | |
| 148 | 51 | if (window.getSelection && document.createRange) { |
| 149 | 52 | selection = window.getSelection(); |
| 150 | 53 | range = document.createRange(); |
| 151 | - range.selectNodeContents(event.target); | |
| 54 | + range.selectNodeContents(e.target); | |
| 152 | 55 | selection.removeAllRanges(); |
| 153 | 56 | selection.addRange(range); |
| 154 | 57 | } else if (document.selection && document.body.createTextRange) { |
| 155 | 58 | range = document.body.createTextRange(); |
| 156 | - range.moveToElementText(event.target); | |
| 59 | + range.moveToElementText(e.target); | |
| 157 | 60 | range.select(); |
| 158 | 61 | } |
| 159 | 62 | }); |
| 160 | 63 | |
| 161 | - $( '.visualizer-languages-list' ).on( 'click', '[data-lang_code]', function() { | |
| 162 | - if ( $(this).find( 'i' ).hasClass( 'otgs-ico-add' ) ) { | |
| 163 | - vu.create = vu.create + '&lang=' + $(this).data('lang_code') + '&parent_chart_id=' + $(this).data('chart'); | |
| 164 | - $('.add-new-chart').click(); | |
| 165 | - } else { | |
| 166 | - vu.edit = vu.edit + '&lang=' + $(this).data('lang_code') + '&chart=' + $(this).data('chart'); | |
| 167 | - $('.visualizer-chart-edit').click(); | |
| 168 | - } | |
| 169 | - } ); | |
| 170 | - | |
| 171 | - function openClassicBuilder() { | |
| 64 | + $('.add-new-h2').click(function () { | |
| 172 | 65 | var wnd = window, |
| 173 | 66 | view = new vmv.Chart({action: vu.create}); |
| 174 | - vu.create = vu.create.replace(/[\?&]lang=[^&]+/, '').replace(/[\?&]parent_chart_id=[^&]+/, ''); | |
| 175 | 67 | |
| 176 | - window.parent.addEventListener('message', function(event){ | |
| 177 | - switch(event.data) { | |
| 178 | - case 'visualizer:mediaframe:close': | |
| 179 | - view.close(); | |
| 180 | - break; | |
| 181 | - } | |
| 182 | - }, false); | |
| 183 | - | |
| 184 | - // remove the 'type' while refreshing the library page on creation of a new chart. | |
| 185 | - // this is to avoid cases where users have filtered for chart type A and end up creating chart type B | |
| 186 | - // remove 'vaction' as well so that additional actions are removed | |
| 187 | 68 | wnd.send_to_editor = function () { |
| 188 | - wnd.location.href = vu.base.replace(/type=[a-zA-Z]*/, '').replace(/vaction/, ''); | |
| 69 | + wnd.location.href = vu.base; | |
| 189 | 70 | }; |
| 190 | 71 | view.open(); |
| 191 | - } | |
| 192 | 72 | |
| 193 | - function closeAddNewMenus() { | |
| 194 | - $('.viz-add-new-group').removeClass('is-open'); | |
| 195 | - $('.viz-add-new-toggle').attr('aria-expanded', 'false'); | |
| 196 | - $('.viz-add-new-menu').attr('aria-hidden', 'true'); | |
| 197 | - } | |
| 198 | - | |
| 199 | - $(document).on('click', function() { | |
| 200 | - closeAddNewMenus(); | |
| 201 | - }); | |
| 202 | - | |
| 203 | - $(document).on('click', '.viz-add-new-toggle', function(event) { | |
| 204 | - event.preventDefault(); | |
| 205 | - event.stopPropagation(); | |
| 206 | - event.stopImmediatePropagation(); | |
| 207 | - var $group = $(this).closest('.viz-add-new-group'); | |
| 208 | - var isOpen = $group.hasClass('is-open'); | |
| 209 | - closeAddNewMenus(); | |
| 210 | - if ( ! isOpen ) { | |
| 211 | - $group.addClass('is-open'); | |
| 212 | - $(this).attr('aria-expanded', 'true'); | |
| 213 | - $group.find('.viz-add-new-menu').attr('aria-hidden', 'false'); | |
| 214 | - } | |
| 215 | 73 | return false; |
| 216 | 74 | }); |
| 217 | 75 | |
| 218 | - $(document).on('click', '.viz-add-new-item', function(event) { | |
| 219 | - event.preventDefault(); | |
| 220 | - event.stopPropagation(); | |
| 221 | - event.stopImmediatePropagation(); | |
| 222 | - var builder = $(this).data('viz-builder'); | |
| 223 | - closeAddNewMenus(); | |
| 76 | + $('.visualizer-chart-edit').click(function () { | |
| 77 | + var wnd = window, | |
| 78 | + view = new vmv.Chart({action: vu.edit + '&chart=' + $(this).attr('data-chart')}); | |
| 224 | 79 | |
| 225 | - if ( builder === 'ai' ) { | |
| 226 | - if ( typeof window.vizOpenAIBuilderNew === 'function' ) { | |
| 227 | - window.vizOpenAIBuilderNew(); | |
| 228 | - return; | |
| 229 | - } | |
| 230 | - if ( typeof window.vizOpenChartChooser === 'function' ) { | |
| 231 | - var classicCallback = function() { | |
| 232 | - openClassicBuilder(); | |
| 233 | - }; | |
| 234 | - window.vizOpenChartChooser( classicCallback ); | |
| 235 | - return; | |
| 236 | - } | |
| 237 | - } | |
| 238 | - | |
| 239 | - openClassicBuilder(); | |
| 240 | - }); | |
| 241 | - | |
| 242 | - $('.add-new-chart').click(function () { | |
| 243 | - // Hook for the React chart builder chooser modal. | |
| 244 | - // If the React app is loaded it sets window.vizOpenChartChooser and handles routing. | |
| 245 | - // It will call the classicCallback if the user picks the Classic Builder. | |
| 246 | - if (typeof window.vizOpenChartChooser === 'function') { | |
| 247 | - var classicCallback = function() { | |
| 248 | - openClassicBuilder(); | |
| 249 | - }; | |
| 250 | - window.vizOpenChartChooser(classicCallback); | |
| 251 | - return false; | |
| 252 | - } | |
| 253 | - openClassicBuilder(); | |
| 254 | - return false; | |
| 255 | - }); | |
| 256 | - | |
| 257 | - $('.visualizer-chart-edit').click(function (event) { | |
| 258 | - | |
| 259 | - if ( createPopupProBlocker( $, event ) ) { | |
| 260 | - return; | |
| 261 | - } | |
| 262 | - | |
| 263 | - // D3/AI charts open in the AI Builder instead of the classic modal. | |
| 264 | - if ( $(this).data('library') === 'd3' && typeof window.vizOpenAIBuilderEdit === 'function' ) { | |
| 265 | - window.vizOpenAIBuilderEdit( $(this).attr('data-chart') ); | |
| 266 | - return false; | |
| 267 | - } | |
| 268 | - | |
| 269 | - var wnd = window; | |
| 270 | - var view = new vmv.Chart( { | |
| 271 | - action: vu.edit.indexOf('&chart') != -1 ? vu.edit : vu.edit + '&chart=' + $(this).attr('data-chart') | |
| 272 | - } ); | |
| 273 | - vu.edit = vu.edit.replace(/[\?&]lang=[^&]+/, ''); | |
| 274 | - | |
| 275 | 80 | wnd.send_to_editor = function () { |
| 276 | - wnd.location.href = wnd.location.href.replace(/vaction/, ''); | |
| 81 | + wnd.location.reload(); | |
| 277 | 82 | }; |
| 278 | 83 | |
| 279 | 84 | view.open(); |
| 280 | 85 | |
| @@ -279,20 +84,10 @@ | ||
| 279 | 84 | view.open(); |
| 280 | 85 | |
| 281 | 86 | return false; |
| 282 | 87 | }); |
| 283 | - $(".visualizer-chart-clone").on("click", function ( event ) { | |
| 284 | - if ( createPopupProBlocker( $, event ) ) { | |
| 285 | - event.preventDefault(); | |
| 286 | - } | |
| 287 | - }); | |
| 288 | 88 | |
| 289 | - $(".visualizer-chart-export").on("click", function (event) { | |
| 290 | - | |
| 291 | - if ( createPopupProBlocker( $, event ) ) { | |
| 292 | - return; | |
| 293 | - } | |
| 294 | - | |
| 89 | + $(".visualizer-chart-export").on("click", function () { | |
| 295 | 90 | $.ajax({ |
| 296 | 91 | url: $(this).attr("data-chart"), |
| 297 | 92 | method: "get", |
| 298 | 93 | success: function (data, textStatus, jqXHR) { |
| @@ -310,28 +105,8 @@ | ||
| 310 | 105 | } |
| 311 | 106 | }); |
| 312 | 107 | return false; |
| 313 | 108 | }); |
| 314 | - | |
| 315 | - $(".visualizer-chart-image").on("click", function (event) { | |
| 316 | - if ( createPopupProBlocker( $, event ) ) { | |
| 317 | - return; | |
| 318 | - } | |
| 319 | - $('body').trigger('visualizer:action:specificchart', {action: 'image', id: $(this).attr("data-chart"), data: null, dataObj: {name: $(this).attr("data-chart-title")}}); | |
| 320 | - return false; | |
| 321 | - }); | |
| 322 | - | |
| 323 | - // if vaction=addnew is found as a GET request parameter, show the modal. | |
| 324 | - if(location.href.indexOf('vaction=addnew') !== -1){ | |
| 325 | - $('.add-new-chart').first().trigger('click'); | |
| 326 | - } | |
| 327 | - | |
| 328 | - //if vaction=edit is found as a GET request parameter, show the modal. | |
| 329 | - if(location.href.indexOf('vaction=edit') !== -1 && location.href.indexOf('chart=') !== -1){ | |
| 330 | - const chartId = location.href.split('chart=')[1].split('&')[0]; | |
| 331 | - $('.visualizer-chart-edit').attr('data-chart', chartId).trigger('click'); | |
| 332 | - } | |
| 333 | - | |
| 334 | 109 | $(window).resize(function () { |
| 335 | 110 | clearTimeout(resizeTimeout); |
| 336 | 111 | resizeTimeout = setTimeout(function () { |
| 337 | 112 | $('.visualizer-chart-canvas').adjust(); |
| @@ -336,36 +111,6 @@ | ||
| 336 | 111 | resizeTimeout = setTimeout(function () { |
| 337 | 112 | $('.visualizer-chart-canvas').adjust(); |
| 338 | 113 | }, 100); |
| 339 | 114 | }); |
| 340 | - | |
| 341 | - $('.visualizer-error i.error').on('click', function(){ | |
| 342 | - alert( $(this).attr('data-viz-error') ); | |
| 343 | - }); | |
| 344 | - $('.visualizer-chart:not(.visualizer-chart-display), .visualizer-library-pagination').fadeIn(500); | |
| 345 | 115 | }); |
| 346 | -})(jQuery, visualizer.media.view, visualizer.urls); | |
| 347 | - | |
| 348 | - | |
| 349 | -document.querySelectorAll('.visualizer-chart').forEach(function (chart) { | |
| 350 | - const translatable = chart.querySelector('.visualizer-languages-list'); | |
| 351 | - if ( ! translatable ) { | |
| 352 | - return; | |
| 353 | - } | |
| 354 | - | |
| 355 | - const chartId = chart.querySelector('.visualizer-chart-canvas')?.id?.replace('visualizer-', ''); | |
| 356 | - | |
| 357 | - if ( ! chartId ) { | |
| 358 | - return; | |
| 359 | - } | |
| 360 | - | |
| 361 | - const translatableActions = translatable.querySelectorAll('[data-lang_code]'); | |
| 362 | - translatableActions.forEach(function (action) { | |
| 363 | - action.addEventListener('click', function () { | |
| 364 | - window?.tiTrk?.with('visualizer')?.add({ | |
| 365 | - feature: 'chart-library', | |
| 366 | - featureComponent: 'chart-language-translations-used', | |
| 367 | - groupId: chartId, | |
| 368 | - }); | |
| 369 | - }); | |
| 370 | - }); | |
| 371 | -}); | |
| 116 | +})(jQuery, visualizer.media.view, visualizer.urls); | |