weForms – Easy Drag & Drop Contact Form Builder For WordPress / 1.6.24

weForms – Easy Drag & Drop Contact Form Builder For WordPress v1.6.24

weforms / assets / js / gutenblock.js

gutenblock.js in weForms – Easy Drag & Drop Contact Form Builder For WordPress 1.6.24, at assets/js/gutenblock.js

220 lines 9.5 KB

Raw Download Zip

1	/**
2	* weForms Block
3	*
4	* A block for embedding a weForms form into a post/page.
5	*/
6	( function( blocks, i18n, editor, element, components ) {
7
8	var el = element.createElement, // function to create elements
9	TextControl = components.TextControl,// text input control
10	InspectorControls = editor.InspectorControls; // sidebar controls
11
12	// register our block
13	blocks.registerBlockType( 'weforms/form', {
14	title: 'weForms',
15	icon: 'feedback',
16	category: 'common',
17
18	attributes: {
19	formID: {
20	type: 'integer',
21	default: 0
22	},
23	formName: {
24	type: 'string',
25	default: ''
26	}
27	},
28
29	edit: function( props ) {
30
31	var formID = props.attributes.formID;
32
33	var formName = props.attributes.formName;
34
35	var children = [];
36
37	if( ! formID ) formID = ''; // Default.
38	if( ! formName ) formName = ''; // Default
39
40	// this function is required, but we don't need it to do anything
41	function weFormsOnValueChange( formName ) { }
42
43	// show the dropdown when we click on the input
44	function weFormsFocusClick( event ) {
45	var elID = event.target.getAttribute( 'id' );
46	var idArray = elID.split( '-' );
47	var weFormsOptions = document.getElementById( 'weforms-filter-container-' + idArray[ idArray.length -1 ] );
48	// get the related input element
49	var weFormsInput = document.getElementById( 'weforms-formFilter-' + idArray[ idArray.length -1 ] );
50	// set focus to the element so the onBlur function runs properly
51	weFormsInput.focus();
52	weFormsOptions.style.display = 'block';
53	}
54
55	// function for select the form on filter drop down item click
56	function selectForm( event ) {
57	//set the attributes from the selected for item
58	props.setAttributes( {
59	formID: parseInt( event.target.getAttribute( 'data-formid' ) ),
60	formName: event.target.innerText
61	} );
62	/**
63	* Get the main div of the filter to tell if this is being
64	* selected from the sidebar or block so we can hide the dropdown
65	*/
66	var elID = event.target.parentNode.parentNode;
67	var idArray = elID.getAttribute( 'id' ).split( '-' );
68	var weFormsOptions = document.getElementById( 'weforms-filter-container-' + idArray[ idArray.length -1 ] );
69	var inputEl = document.getElementById( 'weforms-formFilter-sidebar' );
70
71	if( inputEl ) {
72	inputEl.value = '';
73	}
74	weFormsOptions.style.display = 'none';
75	}
76
77	function weFormsHideOptions( event ) {
78	/**
79	* Get the main div of the filter to tell if this is being
80	* selected from the sidebar or block so we can hide the dropdown
81	*/
82	var elID = event.target.getAttribute( 'id' );
83	var idArray = elID.split( '-' );
84	var weFormsOptions = document.getElementById( 'weforms-filter-container-' + idArray[ idArray.length -1 ] );
85	weFormsOptions.style.display = 'none';
86	}
87
88	function weFormsInputKeyUp( event ) {
89	var val = event.target.value;
90	/**
91	* Get the main div of the filter to tell if this is being
92	* selected from the sidebar or block so we can SHOW the dropdown
93	*/
94	var filterInputContainer = event.target.parentNode.parentNode.parentNode;
95	filterInputContainer.querySelector( '.weforms-filter-option-container' ).style.display = 'block';
96	filterInputContainer.style.display = 'block';
97
98	// Let's filter the forms here
99	_.each( weFormsBlock.forms, function( form, index ) {
100	var liEl = filterInputContainer.querySelector( "[data-formid='" + form.value + "']" );
101	if ( 0 <= form.label.toLowerCase().indexOf( val.toLowerCase() ) ) {
102	// shows options that DO contain the text entered
103	liEl.style.display = 'block';
104	} else {
105	// hides options the do not contain the text entered
106	liEl.style.display = 'none';
107	}
108	});
109	}
110
111	// Set up the form items from the localized php variables
112	var formItems = [];
113	_.each( weFormsBlock.forms, function( form, index ) {
114	formItems.push( el( 'li', { className: 'weforms-filter-option',
115	'data-formid': form.value, onMouseDown: selectForm},
116	form.label + " ( ID: " + form.value + " )" ))
117	});
118
119	// Set up form filter for the block
120	var inputFilterMain = el( 'div', { id: 'weforms-filter-input-main',
121	className: 'weforms-filter-input' },
122	el( TextControl, { id: 'weforms-formFilter-main',
123	placeHolder: 'Select a Form',
124	className: 'weforms-filter-input-el blocks-select-control__input',
125	onChange: weFormsOnValueChange,
126	onClick: weFormsFocusClick,
127	onKeyUp: weFormsInputKeyUp,
128	onBlur: weFormsHideOptions
129	} ),
130	el( 'span', { id: 'weforms-filter-input-icon-main',
131	className: 'weforms-filter-input-icon',
132	onClick: weFormsFocusClick,
133	dangerouslySetInnerHTML: { __html: '▾' } } ),
134	el( 'div', { id: 'weforms-filter-container-main',
135	className: 'weforms-filter-option-container' },
136	el( 'ul', null, formItems )
137	)
138	);
139	// Create filter input for the sidebar blocks settings
140	var inputFilterSidebar = el( 'div', { id: 'weforms-filter-input-sidebar',
141	className: 'weforms-filter-input' },
142	el( TextControl, { id: 'weforms-formFilter-sidebar',
143	placeHolder: 'Select a Form',
144	className: 'weforms-filter-input-el blocks-select-control__input',
145	onChange: weFormsOnValueChange,
146	onClick: weFormsFocusClick,
147	onKeyUp: weFormsInputKeyUp,
148	onBlur: weFormsHideOptions
149	} ),
150	el( 'span', { id: 'weforms-filter-input-icon-sidebar',
151	className: 'weforms-filter-input-icon',
152	onClick: weFormsFocusClick,
153	dangerouslySetInnerHTML: { __html: '▾' } } ),
154	el( 'div', { id: 'weforms-filter-container-sidebar',
155	className: 'weforms-filter-option-container' },
156	el( 'ul', null, formItems )
157	)
158	);
159
160	// Set up the form filter dropdown in the side bar 'block' settings
161	var inspectorControls = el( InspectorControls, {},
162	el( 'span', null, 'Current selected form:' ),
163	el( 'br', null ),
164	el( 'span', null, formName ),
165	el( 'br', null ),
166	el ('hr', null ),
167	el ( 'label', { for: 'weforms-formFilter-sidebar' }, 'Type to' +
168	' filter' +
169	' forms' ),
170	inputFilterSidebar
171	);
172
173	/**
174	* Create the div container, add an overlay so the user can interact
175	* with the form in Gutenberg, then render the iframe with form
176	*/
177	if ( '' === formID ) {
178	children.push( el( 'div', {style : {width: '100%'}},
179	el( 'img', { className: 'weforms-block-logo', src: weFormsBlock.block_logo}),
180	el ( 'div', null, 'weForms Forms'),
181	inputFilterMain
182	) );
183	} else {
184	children.push(
185	el( 'div', { className: 'weforms-iframe-container' },
186	el( 'div', { className: 'weforms-iframe-overlay' } ),
187	el( 'iframe', { src: weFormsBlock.siteUrl + '/?weforms_preview=1&weforms_iframe&form_id=' + formID, height: '0', width: '500', scrolling: 'no' })
188	)
189	)
190	}
191	children.push(inspectorControls);
192	return [
193	children
194	];
195	},
196
197	save: function( props ) {
198	var formID = props.attributes.formID;
199
200	if( ! formID ) return '';
201	/**
202	* we're essentially just adding a short code, here is where
203	* it's save in the editor
204	*
205	* return content wrapped in DIV b/c raw HTML is unsupported
206	* going forward
207	*/
208	var returnHTML = '[weforms id=' + parseInt( formID ) + ']';
209	return el( 'div', null, returnHTML );
210	}
211	} );
212
213
214	} )(
215	window.wp.blocks,
216	window.wp.i18n,
217	window.wp.editor,
218	window.wp.element,
219	window.wp.components
220	);