Commit 3b9f83f0 authored by KR Moorhouse's avatar KR Moorhouse Committed by GitHub

Merge pull request #3451 from wpninjas/gutenberg-autofilter

Gutenberg autofilter
parents 43bd2ac7 1b2e75e7
......@@ -10,4 +10,58 @@
border-bottom: 1px solid;
margin-bottom: 5px;
padding: 4px;
}
.nf-filter-input {
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
padding: 0;
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
}
.nf-filter-input .blocks-base-control {
margin: 0 0 0 0;
}
.nf-filter-input-el {
border: none !important;
box-shadow: none !important;
width: 95%;
position: relative;
display: inline-block;
}
.nf-filter-input-icon {
display: inline-block;
content: '▾';
color: #999;
font-size: 14px;
right: 8px;
position: absolute;
top: 3px;
}
.nf-filter-option-container {
display: none;
position: absolute;
background-color: #edeff0;
z-index: 10000;
padding: 4px;
width: 100%;
border-radius: 5px;
max-height: 200px;
overflow: scroll;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
.nf-filter-option {
list-style: none;
}
.nf-filter-option:hover {
background-color: #0073aa;
color: white;
}
\ No newline at end of file
......@@ -43,7 +43,7 @@ jQuery( document ).ready( function( $ ) {
}
});
$( '.nf-form-option' ).off( 'click' ).on( 'click', function() { console.log('hello');
$( '.nf-form-option' ).off( 'click' ).on( 'click', function() {
// on click get the value of the input
var val = $( this ).data( 'val' );
// nf_export_form is now a hidden field instead of select element
......
......@@ -6,11 +6,9 @@
( function( blocks, i18n, element, components ) {
var el = element.createElement, // function to create elements
// TextControl = blocks.InspectorControls.TextControl, // not needed
SelectControl = components.SelectControl, // select control
InspectorControls = blocks.InspectorControls, // sidebar controls
Sandbox = components.Sandbox; // needed to register the block
TextControl = components.TextControl,// text input control
InspectorControls = blocks.InspectorControls, // sidebar controls
Sandbox = components.Sandbox; // needed to register the block
// register our block
blocks.registerBlockType( 'ninja-forms/form', {
......@@ -23,52 +21,176 @@
type: 'integer',
default: 0
},
formName: {
type: 'string',
default: ''
}
},
edit: function( props ) {
var focus = props.focus;
var formID = props.attributes.formID;
var children = [];
if( ! formID ) formID = ''; // Default.
var focus = props.focus;
var formID = props.attributes.formID;
var formName = props.attributes.formName;
var children = [];
if( ! formID ) formID = ''; // Default.
if( ! formName ) formName = ''; // Default
// this function is required, but we don't need it to do anything
function nfOnValueChange( formName ) { }
// show the dropdown when we click on the input
function nfFocusClick( event ) {
var elID = event.target.getAttribute( 'id' );
var idArray = elID.split( '-' );
var nfOptions = document.getElementById( 'nf-filter-container-' + idArray[ idArray.length -1 ] );
nfOptions.style.display = 'block';
}
// function for select the form on filter drop down item click
function selectForm( event ) {
//set the attributes from the selected for item
props.setAttributes( {
formID: event.target.getAttribute( 'data-formid' ),
formName: event.target.innerText
} );
/**
* Get the main div of the filter to tell if this is being
* selected from the sidebar or block so we can hide the dropdown
*/
var elID = event.target.parentNode.parentNode;
var idArray = elID.getAttribute( 'id' ).split( '-' );
var nfOptions = document.getElementById( 'nf-filter-container-' + idArray[ idArray.length -1 ] );
var inputEl = document.getElementById( 'formFilter-sidebar' );
inputEl.value = '';
nfOptions.style.display = 'none';
}
function nfHideOptions( event ) {
/**
* Get the main div of the filter to tell if this is being
* selected from the sidebar or block so we can hide the dropdown
*/
var elID = event.target.getAttribute( 'id' );
var idArray = elID.split( '-' );
var nfOptions = document.getElementById( 'nf-filter-container-' + idArray[ idArray.length -1 ] );
nfOptions.style.display = 'none';
}
function nfInputKeyUp( event ) {
var val = event.target.value;
/**
* Get the main div of the filter to tell if this is being
* selected from the sidebar or block so we can SHOW the dropdown
*/
var filterInputContainer = event.target.parentNode.parentNode;
filterInputContainer.querySelector( '.nf-filter-option-container' ).style.display = 'block';
filterInputContainer.style.display = 'block';
// Let's filter the forms here
_.each( ninjaFormsBlock.forms, function( form, index ) {
var liEl = filterInputContainer.querySelector( "[data-formid='" + form.value + "']" );
if ( 0 <= form.label.toLowerCase().indexOf( val.toLowerCase() ) ) {
// shows options that DO contain the text entered
liEl.style.display = 'block';
} else {
// hides options the do not contain the text entered
liEl.style.display = 'none';
}
});
}
// Set up the form items from the localized php variables
var formItems = [];
_.each( ninjaFormsBlock.forms, function( form, index ) {
formItems.push( el( 'li', { className: 'nf-filter-option',
'data-formid': form.value, onMouseDown: selectForm},
form.label + " ( ID: " + form.value + " )" ))
});
// Set up form filter for the block
var inputFilterMain = el( 'div', { id: 'nf-filter-input-main',
className: 'nf-filter-input' },
el( TextControl, { id: 'formFilter-main',
placeHolder: 'Select a Form',
className: 'nf-filter-input-el blocks-select-control__input',
onChange: nfOnValueChange,
onClick: nfFocusClick,
onKeyUp: nfInputKeyUp,
onBlur: nfHideOptions
} ),
el( 'span', { id: 'nf-filter-input-icon-main',
className: 'nf-filter-input-icon',
onClick: nfFocusClick,
dangerouslySetInnerHTML: { __html: '&#9662;' } } ),
el( 'div', { id: 'nf-filter-container-main',
className: 'nf-filter-option-container' },
el( 'ul', null, formItems )
)
);
// Create filter input for the sidebar blocks settings
var inputFilterSidebar = el( 'div', { id: 'nf-filter-input-sidebar',
className: 'nf-filter-input' },
el( TextControl, { id: 'formFilter-sidebar',
placeHolder: 'Select a Form',
className: 'nf-filter-input-el blocks-select-control__input',
onChange: nfOnValueChange,
onClick: nfFocusClick,
onKeyUp: nfInputKeyUp,
onBlur: nfHideOptions
} ),
el( 'span', { id: 'nf-filter-input-icon-sidebar',
className: 'nf-filter-input-icon',
onClick: nfFocusClick,
dangerouslySetInnerHTML: { __html: '&#9662;' } } ),
el( 'div', { id: 'nf-filter-container-sidebar',
className: 'nf-filter-option-container' },
el( 'ul', null, formItems )
)
);
// Set up the form filter dropdown in the side bar 'block' settings
var inspectorControls = el( InspectorControls, {},
el( 'span', null, 'Current selected form:' ),
el( 'br', null ),
el( 'span', null, formName ),
el( 'br', null ),
el ('hr', null ),
el ( 'label', { for: 'formFilter-sidebar' }, 'Type to filter' +
' forms' ),
inputFilterSidebar
// el( SelectControl, { label: 'Form ID', value: formID, options: ninjaFormsBlock.forms, onChange: onFormChange } )
);
function onFormChange( newFormID ) {
// updates the form id on the props
props.setAttributes( { formID: newFormID } );
}
// Set up the form dropdown in the side bar 'block' settings
var inspectorControls = el( InspectorControls, {},
el( SelectControl, { label: 'Form ID', value: formID, options: ninjaFormsBlock.forms, onChange: onFormChange } )
);
/**
* Create the div container, add an overlay so the user can interact
* with the form in Gutenberg, then render the iframe with form
*/
if( '' === formID ) {
children.push( el( 'div', {style : {width: '100%'}}, el( 'img',
{ src: ninjaFormsBlock.block_logo}),
el( SelectControl, { value: formID, options: ninjaFormsBlock.forms, onChange: onFormChange })
) );
} else {
children.push(
el( 'div', { className: 'nf-iframe-container' },
el( 'div', { className: 'nf-iframe-overlay' } ),
el( 'iframe', { src: ninjaFormsBlock.siteUrl + '?nf_preview_form='
+ formID + '&nf_iframe', height: '0', width: '500', scrolling: 'no' })
/**
* Create the div container, add an overlay so the user can interact
* with the form in Gutenberg, then render the iframe with form
*/
if( '' === formID ) {
children.push( el( 'div', {style : {width: '100%'}},
el( 'img', { src: ninjaFormsBlock.block_logo}),
// el( SelectControl, { value: formID, options: ninjaFormsBlock.forms, onChange: onFormChange }),
el ( 'div', null, 'Type to Filter'),
inputFilterMain
) );
} else {
children.push(
el( 'div', { className: 'nf-iframe-container' },
el( 'div', { className: 'nf-iframe-overlay' } ),
el( 'iframe', { src: ninjaFormsBlock.siteUrl + '?nf_preview_form='
+ formID + '&nf_iframe', height: '0', width: '500', scrolling: 'no' })
)
)
)
}
return [
children,
// inspectorControls
!! focus && inspectorControls
];
}
return [
children,
!! focus && inspectorControls
];
},
save: function( props ) {
......
......@@ -49,10 +49,7 @@ class NF_FormBlock {
wp_enqueue_script( 'ninja-forms-block' );
$forms = array();
$forms[] = array (
'value' => '',
'label' => '-- Select a Form --',
);
foreach( Ninja_Forms()->form()->get_forms() as $form ){
$forms[] = array (
'value' => $form->get_id(),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment