WP Ultimate Post Grid / 4.1.1

WP Ultimate Post Grid v4.1.1

wp-ultimate-post-grid / vendor / bv-settings / assets / js / admin / App.js

App.js in WP Ultimate Post Grid 4.1.1, at vendor/bv-settings/assets/js/admin/App.js

274 lines 8.3 KB

Raw Download Zip

1	import React, { Component } from 'react';
2	import '../../css/admin/settings.scss';
3
4	import Api from './general/Api';
5	import Helpers from './general/Helpers';
6	import MenuContainer from './menu/MenuContainer';
7	import SettingsContainer from './settings/SettingsContainer';
8	import { animateScroll as scroll, scroller } from 'react-scroll';
9	import Icon from './general/Icon';
10
11	export default class App extends Component {
12
13	constructor(props) {
14	super(props);
15
16	this.beforeUnloadHandler = this.beforeWindowClose.bind(this);
17
18	this.state = {
19	savedSettings: { ...bv_settings.settings },
20	currentSettings: { ...bv_settings.settings },
21	savingChanges: false,
22	searchQuery: '',
23	showChangedSettings: false,
24	}
25
26	this.searchTimeout = null;
27	}
28
29	scrollToElement(targetId, offset = 42) {
30	const target = document.getElementById(targetId);
31
32	if ( ! target ) {
33	return false;
34	}
35
36	const top = target.getBoundingClientRect().top + window.scrollY - offset;
37
38	scroll.scrollTo(
39	0 > top ? 0 : top,
40	{
41	smooth: true,
42	duration: 400,
43	}
44	);
45
46	return true;
47	}
48
49	onSettingChange(setting, value) {
50	const newSettings = {
51	...this.state.currentSettings,
52	[setting]: value,
53	};
54
55	this.setState({
56	currentSettings: newSettings
57	}, () => {
58	// Setting specific actions.
59	if ( 'features_custom_style' === setting ) {
60	scroller.scrollTo(setting, {
61	smooth: true,
62	duration: 400,
63	offset: -110,
64	});
65	}
66	});
67	}
68
69	onSaveChanges() {
70	this.setState({
71	savingChanges: true,
72	});
73
74	Api.saveSettings(this.state.currentSettings)
75	.then(settings => {
76	this.setState({
77	savingChanges: false,
78	savedSettings: { ...settings },
79	currentSettings: { ...settings },
80	showChangedSettings: false,
81	});
82	}).catch(err => {
83	alert('The settings could not be saved. Try again later or contact [email protected]');
84
85	this.setState({
86	savingChanges: false,
87	});
88	});
89	}
90
91	onCancelChanges() {
92	if(confirm('Are you sure you want to cancel the changes you made?')) {
93	this.setState({
94	currentSettings: { ...this.state.savedSettings },
95	showChangedSettings: false,
96	});
97	}
98	}
99
100	onResetDefaults() {
101	if(confirm('Are you sure you want to reset the settings to their default values? This will not save them yet.')) {
102	this.setState({
103	currentSettings: {
104	...this.state.savedSettings,
105	...bv_settings.defaults
106	},
107	});
108	}
109	}
110
111	scrollToTop() {
112	scroll.scrollToTop();
113	}
114
115	componentDidMount() {
116	window.addEventListener( 'beforeunload', this.beforeUnloadHandler );
117	}
118
119	componentWillUnmount() {
120	window.removeEventListener( 'beforeunload', this.beforeUnloadHandler );
121
122	if ( this.searchTimeout ) {
123	clearTimeout(this.searchTimeout);
124	}
125	}
126
127	beforeWindowClose(event) {
128	if ( this.settingsChanged() ) {
129	event.preventDefault();
130	event.returnValue = '';
131
132	return '';
133	}
134	}
135
136	settingsChanged() {
137	return 0 < Helpers.getChangedSettings(
138	bv_settings.structure,
139	this.state.savedSettings,
140	this.state.currentSettings
141	).length;
142	}
143
144	onSearchChange(query) {
145	if ( this.searchTimeout ) {
146	clearTimeout(this.searchTimeout);
147	}
148
149	this.searchTimeout = setTimeout(() => {
150	this.setState({
151	searchQuery: query
152	});
153	}, 200);
154	}
155
156	onToggleChangedSettings() {
157	this.setState((prevState) => ({
158	showChangedSettings: ! prevState.showChangedSettings,
159	}));
160	}
161
162	onRevertChangedSetting(settingId) {
163	this.setState((prevState) => ({
164	currentSettings: {
165	...prevState.currentSettings,
166	[settingId]: prevState.savedSettings[settingId],
167	},
168	}), () => {
169	const changedSettings = Helpers.getChangedSettings(
170	bv_settings.structure,
171	this.state.savedSettings,
172	this.state.currentSettings
173	);
174
175	if ( ! changedSettings.length && this.state.showChangedSettings ) {
176	this.setState({
177	showChangedSettings: false,
178	});
179	}
180	});
181	}
182
183	onJumpToChangedSetting(changedSetting) {
184	if ( changedSetting.isCurrentlyVisible ) {
185	scroller.scrollTo(changedSetting.targetAnchor, {
186	smooth: true,
187	duration: 400,
188	offset: -110,
189	});
190
191	return;
192	}
193
194	if ( this.scrollToElement(`bvs-settings-group-${changedSetting.fallbackGroupId}`) ) {
195	return;
196	}
197
198	this.scrollToElement('bvs-settings-container');
199	}
200
201	onJumpToSearchResult(searchResult) {
202	if ( ! searchResult ) {
203	return;
204	}
205
206	if ( 'setting' === searchResult.targetType ) {
207	scroller.scrollTo(searchResult.targetAnchor, {
208	smooth: true,
209	duration: 400,
210	offset: -110,
211	});
212
213	return;
214	}
215
216	if ( searchResult.targetId && this.scrollToElement(searchResult.targetId) ) {
217	return;
218	}
219
220	this.scrollToElement('bvs-settings-container');
221	}
222
223	render() {
224	const normalizedSearchQuery = this.state.searchQuery ? this.state.searchQuery.toLowerCase() : '';
225	const changedSettings = Helpers.getChangedSettings(
226	bv_settings.structure,
227	this.state.savedSettings,
228	this.state.currentSettings
229	);
230	const changedSettingsCount = changedSettings.length;
231	const showChangedSettings = this.state.showChangedSettings && 0 < changedSettingsCount;
232	const searchResultsData = Helpers.getSearchResults(
233	bv_settings.structure,
234	this.state.currentSettings,
235	normalizedSearchQuery
236	);
237
238	return (
239	<div>
240	<MenuContainer
241	structure={bv_settings.structure}
242	settings={this.state.currentSettings}
243	settingsChanged={this.settingsChanged()}
244	savingChanges={this.state.savingChanges}
245	onSaveChanges={this.onSaveChanges.bind(this)}
246	onCancelChanges={this.onCancelChanges.bind(this)}
247	searchQuery={this.state.searchQuery}
248	onSearchChange={this.onSearchChange.bind(this)}
249	searchResults={searchResultsData.groups}
250	searchResultsCount={searchResultsData.count}
251	onJumpToSearchResult={this.onJumpToSearchResult.bind(this)}
252	changedSettings={changedSettings}
253	changedSettingsCount={changedSettingsCount}
254	showChangedSettings={showChangedSettings}
255	onToggleChangedSettings={this.onToggleChangedSettings.bind(this)}
256	onJumpToChangedSetting={this.onJumpToChangedSetting.bind(this)}
257	onRevertChangedSetting={this.onRevertChangedSetting.bind(this)}
258	/>
259	<SettingsContainer
260	structure={bv_settings.structure}
261	settings={this.state.currentSettings}
262	settingsChanged={this.settingsChanged()}
263	onSettingChange={this.onSettingChange.bind(this)}
264	onResetDefaults={this.onResetDefaults.bind(this)}
265	searchQuery={this.state.searchQuery}
266	/>
267	<a href="#" className="bvs-settings-scroll-to-top" onClick={this.scrollToTop}>
268	<Icon type="up" />
269	</a>
270	</div>
271	);
272	}
273	}
274