← All changes | classes/Visualizer/Render/Sidebar.php +48 -23 3.2.1 → 3.3.0 View file →

		@@ -159,8 +159,31 @@
159	159	);
160	160	}
161	161
162	162	/**
	163	+ * Add the correct description for the manual configuration box.
	164	+ */
	165	+ protected function _renderManualConfigDescription() {
	166	+ self::_renderSectionStart();
	167	+ self::_renderSectionDescription( '<span class="viz-gvlink">' . sprintf( __( 'Configure the graph by providing configuration variables right from the %1$sGoogle Visualization API%2$s. You can refer to to some examples %3$shere%4$s.', 'visualizer' ), '<a href="https://developers.google.com/chart/interactive/docs/gallery/?#configuration-options" target="_blank">', '</a>', '<a href="https://docs.themeisle.com/article/728-manual-configuration" target="_blank">', '</a>' ) . '</span>' );
	168	+ }
	169	+
	170	+ /**
	171	+ * Add the correct example for the manual configuration box.
	172	+ */
	173	+ protected function _renderManualConfigExample() {
	174	+ return '{
	175	+ "vAxis": {
	176	+ "ticks": [5, 10, 15, 20],
	177	+ "titleTextStyle": {
	178	+ "color": "red"
	179	+ },
	180	+ "textPosition": "in"
	181	+ }
	182	+ }';
	183	+ }
	184	+
	185	+ /**
163	186	* Renders chart advanced settings group.
164	187	*
165	188	* @access protected
166	189	*/
		@@ -166,9 +189,9 @@
166	189	*/
167	190	protected function _renderAdvancedSettings() {
168	191	self::_renderGroupStart( esc_html__( 'Frontend Actions', 'visualizer' ) );
169	192	self::_renderSectionStart();
170		- self::_renderSectionDescription( esc_html__( 'Configure frontend actions here.', 'visualizer' ) );
	193	+ self::_renderSectionDescription( esc_html__( 'Configure frontend actions that need to be shown.', 'visualizer' ) );
171	194	self::_renderSectionEnd();
172	195
173	196	$this->_renderActionSettings();
174	197	self::_renderGroupEnd();
		@@ -173,22 +196,9 @@
173	196	$this->_renderActionSettings();
174	197	self::_renderGroupEnd();
175	198
176	199	self::_renderGroupStart( esc_html__( 'Manual Configuration', 'visualizer' ) );
177		- self::_renderSectionStart();
178		- self::_renderSectionDescription( '<span class="viz-gvlink">' . sprintf( __( 'Configure the graph by providing configuration variables right from the %1$sGoogle Visualization API%2$s. You can refer to to some examples %3$shere%4$s.', 'visualizer' ), '<a href="https://developers.google.com/chart/interactive/docs/gallery/?#configuration-options" target="_blank">', '</a>', '<a href="https://docs.themeisle.com/article/728-manual-configuration" target="_blank">', '</a>' ) . '</span>' );
179		-
180		- $example = '
181		-{
182		- "vAxis": {
183		- "ticks": [5, 10, 15, 20],
184		- "titleTextStyle": {
185		- "color": "red"
186		- },
187		- "textPosition": "in"
188		- }
189		-}';
190		-
	200	+ $this->_renderManualConfigDescription();
191	201	self::_renderTextAreaItem(
192	202	esc_html__( 'Configuration', 'visualizer' ),
193	203	'manual',
194	204	$this->manual,
		@@ -193,9 +203,9 @@
193	203	'manual',
194	204	$this->manual,
195	205	sprintf(
196	206	esc_html__( 'One per line in valid JSON (key:value) format e.g. %s', 'visualizer' ),
197		- '<br><code>' . $example . '</code>'
	207	+ '<br><code>' . $this->_renderManualConfigExample() . '</code>'
198	208	),
199	209	'',
200	210	array( 'rows' => 5 )
201	211	);
		@@ -431,10 +441,10 @@
431	441	*
432	442	* @access protected
433	443	*/
434	444	protected function _renderViewSettings() {
435		- self::_renderGroupStart( esc_html__( 'Layout & Chart Area', 'visualizer' ) );
436		- self::_renderSectionStart( esc_html__( 'Layout', 'visualizer' ), false );
	445	+ self::_renderGroupStart( esc_html__( 'Chart Size & Placement', 'visualizer' ) );
	446	+ self::_renderSectionStart( esc_html__( 'Chart Size/Layout', 'visualizer' ), false );
437	447	self::_renderSectionDescription( esc_html__( 'Configure the total size of the chart. Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage.', 'visualizer' ) );
438	448
439	449	echo '<div class="viz-section-item">';
440	450	echo '<a class="more-info" href="javascript:;">[?]</a>';
		@@ -451,9 +461,9 @@
451	461	echo '</tr>';
452	462	echo '</table>';
453	463
454	464	echo '<p class="viz-section-description">';
455		- esc_html_e( 'Determines the total width and height of the chart.', 'visualizer' );
	465	+ esc_html_e( 'Determines the total width and height of the chart. This will only show in the front-end.', 'visualizer' );
456	466	echo '</p>';
457	467	echo '</div>';
458	468
459	469	echo '<div class="viz-section-delimiter"></div>';
		@@ -490,9 +500,9 @@
490	500	echo '</label>';
491	501	echo '</div>';
492	502	self::_renderSectionEnd();
493	503
494		- self::_renderSectionStart( esc_html__( 'Chart Area', 'visualizer' ), false );
	504	+ self::_renderSectionStart( esc_html__( 'Placement', 'visualizer' ), false );
495	505	self::_renderSectionDescription( esc_html__( 'Configure the placement and size of the chart area (where the chart itself is drawn, excluding axis and legends). Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage.', 'visualizer' ) );
496	506
497	507	echo '<div class="viz-section-item">';
498	508	echo '<a class="more-info" href="javascript:;">[?]</a>';
		@@ -564,9 +574,10 @@
564	574	echo '<a class="more-info" href="javascript:;">[?]</a>';
565	575	echo '<b>', $title, '</b>';
566	576	echo '<select class="control-select ', implode( ' ', $classes ) , '" name="', $name, '" ', ( $multiple ? 'multiple' : '' ), ' ' , $atts, '>';
567	577	foreach ( $options as $key => $label ) {
568		- $extra = $multiple && is_array( $value ) ? ( in_array( $key, $value, true ) ? 'selected' : '' ) : selected( $key, $value, false );
	578	+ // phpcs:ignore WordPress.PHP.StrictInArray.MissingTrueStrict
	579	+ $extra = $multiple && is_array( $value ) ? ( in_array( $key, $value ) ? 'selected' : '' ) : selected( $key, $value, false );
569	580	echo '<option value="', $key, '"', $extra, '>';
570	581	echo $label;
571	582	echo '</option>';
572	583	}
		@@ -590,9 +601,9 @@
590	601	protected static function _renderColorPickerItem( $title, $name, $value, $default ) {
591	602	echo '<div class="viz-section-item">';
592	603	echo '<b>', $title, '</b>';
593	604	echo '<div>';
594		- echo '<input type="text" class="color-picker-hex" name="', $name, '" maxlength="7" placeholder="', esc_attr__( 'Hex Value', 'visualizer' ), '" value="', is_null( $value ) ? $default : esc_attr( $value ), '" data-default-color="', $default, '">';
	605	+ echo '<input type="text" class="color-picker-hex color-picker" data-alpha="true" name="', $name, '" maxlength="7" placeholder="', esc_attr__( 'Hex Value', 'visualizer' ), '" value="', is_null( $value ) ? $default : esc_attr( $value ), '" data-default-color="', $default, '">';
595	606	echo '</div>';
596	607	echo '</div>';
597	608	}
598	609
		@@ -747,9 +758,10 @@
747	758	protected static function _renderCheckboxItem( $title, $name, $value, $default, $desc, $disabled = false ) {
748	759	echo '<div class="viz-section-item">';
749	760	echo '<a class="more-info" href="javascript:;">[?]</a>';
750	761	echo '<b>', $title, '</b>';
751		- echo '<input type="checkbox" class="control-check" value="', $default, '" name="', $name, '" ', ( $value === $default ? 'checked' : '' ), ' ', ( $disabled ? 'disabled=disabled' : '' ), '>';
	762	+ // phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
	763	+ echo '<input type="checkbox" class="control-check" value="', $default, '" name="', $name, '" ', ( $value == $default ? 'checked' : '' ), ' ', ( $disabled ? 'disabled=disabled' : '' ), '>';
752	764	echo '<p class="viz-section-description">', $desc, '</p>';
753	765	echo '</div>';
754	766	}
755	767
		@@ -777,5 +789,18 @@
777	789	public function getLibrary() {
778	790	return $this->_library;
779	791	}
780	792
	793	+ /**
	794	+ * Loads generic libraries conditionally.
	795	+ */
	796	+ protected function load_dependent_assets( $libs ) {
	797	+ if ( in_array( 'moment', $libs, true ) && ! wp_script_is( 'moment', 'registered' ) ) {
	798	+ wp_register_script( 'moment', VISUALIZER_ABSURL . 'js/lib/moment.min.js', array(), Visualizer_Plugin::VERSION );
	799	+ }
	800	+
	801	+ if ( in_array( 'numeral', $libs, true ) && ! wp_script_is( 'numeral', 'registered' ) ) {
	802	+ wp_register_script( 'numeral', VISUALIZER_ABSURL . 'js/lib/numeral.min.js', array(), Visualizer_Plugin::VERSION );
	803	+ }
	804	+
	805	+ }
781	806	}