← All changes | js/library.js +269 -14 3.1.1 → 4.0.8 View file →

		@@ -1,5 +1,7 @@
1	1	/* global visualizer */
	2	+/* global alert */
	3	+
2	4	(function (wpmv) {
3	5	var vm, vmv;
4	6
5	7	vm = visualizer.media = {};
		@@ -20,24 +22,48 @@
20	22	self.createIframeStates();
21	23	},
22	24
23	25	open: function () {
24		- wpmv.MediaFrame.prototype.open.apply(this, arguments);
	26	+ try{
	27	+ wpmv.MediaFrame.prototype.open.apply(this, arguments);
	28	+ }catch(error){
	29	+ alert(visualizer.i10n.conflict);
	30	+ }
25	31	this.$el.addClass('hide-menu');
26	32	}
27	33	});
28	34	})(wp.media.view);
29	35
	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	+
30	45	(function ($, vmv, vu) {
31	46	var resizeTimeout;
32	47
33	48	$.fn.adjust = function () {
	49	+ if ( $( '#visualizer-library' ).hasClass( 'view-list' ) ) {
	50	+ return this;
	51	+ }
34	52	return $(this).each(function () {
35	53	var width = $('#visualizer-library').width(),
36	54	margin = width * 0.02;
37	55
38	56	width *= 0.305;
39		- $(this).width(width - 14).height(width * 0.75).parent().css('margin-right', margin + 'px').css('margin-bottom', margin + 'px');
	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 );
40	66	});
41	67	};
42	68
43	69	$('.visualizer-chart-canvas').adjust();
		@@ -42,44 +68,213 @@
42	68
43	69	$('.visualizer-chart-canvas').adjust();
44	70
45	71	$(document).ready(function () {
46		- $('.visualizer-chart, .visualizer-library-pagination').fadeIn(500);
	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	+ }
47	86
48		- $('.visualizer-chart-shortcode').click(function (e) {
	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	+
49	146	var range, selection;
50	147
51	148	if (window.getSelection && document.createRange) {
52	149	selection = window.getSelection();
53	150	range = document.createRange();
54		- range.selectNodeContents(e.target);
	151	+ range.selectNodeContents(event.target);
55	152	selection.removeAllRanges();
56	153	selection.addRange(range);
57	154	} else if (document.selection && document.body.createTextRange) {
58	155	range = document.body.createTextRange();
59		- range.moveToElementText(e.target);
	156	+ range.moveToElementText(event.target);
60	157	range.select();
61	158	}
62	159	});
63	160
64		- $('.add-new-h2').click(function () {
	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() {
65	172	var wnd = window,
66	173	view = new vmv.Chart({action: vu.create});
	174	+ vu.create = vu.create.replace(/[\?&]lang=[^&]+/, '').replace(/[\?&]parent_chart_id=[^&]+/, '');
67	175
	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
68	187	wnd.send_to_editor = function () {
69		- wnd.location.href = vu.base;
	188	+ wnd.location.href = vu.base.replace(/type=[a-zA-Z]*/, '').replace(/vaction/, '');
70	189	};
71	190	view.open();
	191	+ }
72	192
	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	+ }
73	215	return false;
74	216	});
75	217
76		- $('.visualizer-chart-edit').click(function () {
77		- var wnd = window,
78		- view = new vmv.Chart({action: vu.edit + '&chart=' + $(this).attr('data-chart')});
	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();
79	224
	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	+
80	275	wnd.send_to_editor = function () {
81		- wnd.location.reload();
	276	+ wnd.location.href = wnd.location.href.replace(/vaction/, '');
82	277	};
83	278
84	279	view.open();
85	280
		@@ -84,10 +279,20 @@
84	279	view.open();
85	280
86	281	return false;
87	282	});
	283	+ $(".visualizer-chart-clone").on("click", function ( event ) {
	284	+ if ( createPopupProBlocker( $, event ) ) {
	285	+ event.preventDefault();
	286	+ }
	287	+ });
88	288
89		- $(".visualizer-chart-export").on("click", function () {
	289	+ $(".visualizer-chart-export").on("click", function (event) {
	290	+
	291	+ if ( createPopupProBlocker( $, event ) ) {
	292	+ return;
	293	+ }
	294	+
90	295	$.ajax({
91	296	url: $(this).attr("data-chart"),
92	297	method: "get",
93	298	success: function (data, textStatus, jqXHR) {
		@@ -105,8 +310,28 @@
105	310	}
106	311	});
107	312	return false;
108	313	});
	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	+
109	334	$(window).resize(function () {
110	335	clearTimeout(resizeTimeout);
111	336	resizeTimeout = setTimeout(function () {
112	337	$('.visualizer-chart-canvas').adjust();
		@@ -111,6 +336,36 @@
111	336	resizeTimeout = setTimeout(function () {
112	337	$('.visualizer-chart-canvas').adjust();
113	338	}, 100);
114	339	});
	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);
115	345	});
116		-})(jQuery, visualizer.media.view, visualizer.urls);
	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	+});