Working Prototype
This commit is contained in:
parent
1aa0423886
commit
c90f945430
|
|
@ -1,5 +1,2 @@
|
|||
node_modules
|
||||
|
||||
## Uncomment line below if you prefer to
|
||||
## keep compiled files out of version control
|
||||
# dist/
|
||||
dist/
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
59
plugin.php
59
plugin.php
|
|
@ -43,6 +43,7 @@ if ( !class_exists('CognitoFormsPlugin') ) {
|
|||
class CognitoFormsPlugin {
|
||||
// Initialization actions
|
||||
private static $actions = array(
|
||||
'admin_init',
|
||||
'admin_menu'
|
||||
);
|
||||
|
||||
|
|
@ -52,25 +53,73 @@ if ( !class_exists('CognitoFormsPlugin') ) {
|
|||
add_action($action, array($this, $action));
|
||||
}
|
||||
|
||||
// Registers tinyMCE filters
|
||||
private function addFilters($filters) {
|
||||
foreach($filters as $filter)
|
||||
add_filter($filter, array($this, $filter));
|
||||
}
|
||||
|
||||
// Entrypoint
|
||||
public function __construct() {
|
||||
$this->addActions(self::$actions);
|
||||
}
|
||||
|
||||
// Initialize plug-in
|
||||
public function admin_init() {
|
||||
if(!current_user_can('edit_posts') && !current_user_can('edit_pages')) return;
|
||||
|
||||
register_setting('cognito_plugin', 'cognito_api_key');
|
||||
register_setting('cognito_plugin', 'cognito_admin_key');
|
||||
register_setting('cognito_plugin', 'cognito_public_key');
|
||||
register_setting('cognito_plugin', 'cognito_organization');
|
||||
|
||||
// If the flag to delete options was passed-in, delete them
|
||||
if (isset($_GET['cog_clear']) && $_GET['cog_clear'] == '1') {
|
||||
delete_option('cognito_api_key');
|
||||
delete_option('cognito_admin_key');
|
||||
delete_option('cognito_public_key');
|
||||
delete_option('cognito_organization');
|
||||
}
|
||||
|
||||
// Add tinyMCE plug-in
|
||||
if(get_user_option('rich_editing') == 'true') {
|
||||
$this->addfilters(array(
|
||||
'mce_buttons',
|
||||
'mce_external_plugins'
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
// Set up tinyMCE buttons
|
||||
public function mce_buttons($buttons) {
|
||||
array_push($buttons, '|', 'cognito');
|
||||
return $buttons;
|
||||
}
|
||||
|
||||
// Initialize tinyMCE plug-in
|
||||
public function mce_external_plugins($plugins) {
|
||||
$plugins['cognito'] = plugin_dir_url( __FILE__ ) . 'tinymce/plugin.js';
|
||||
return $plugins;
|
||||
}
|
||||
|
||||
// Initialize administration menu (left-bar)
|
||||
public function admin_menu() {
|
||||
add_menu_page('Cognito Forms', 'Cognito Forms', 'manage_options', 'Cognito', array($this, 'main_page'), '../wp-content/plugins/cognito-forms/cogicon.ico');
|
||||
add_menu_page('Cognito Forms', 'Cognito Forms', 'manage_options', 'Cognito', array($this, 'main_page'), plugin_dir_url( __FILE__ ).'cogicon.ico');
|
||||
add_submenu_page('Cognito', 'Cognito Forms', 'View Forms', 'manage_options', 'Cognito', array($this, 'main_page'));
|
||||
add_submenu_page('Cognito', 'Create Form', 'New Form', 'manage_options', 'CognitoCreateForm', array($this, 'main_page'));
|
||||
add_submenu_page('Cognito', 'Templates', 'Templates', 'manage_options', 'CognitoTemplates', array($this, 'main_page'));
|
||||
|
||||
// add_options_page('Cognito Options', 'Cognito Forms', 'manage_options', 'CognitoOptions', array($this, 'options_page'));
|
||||
|
||||
add_options_page('Cognito Options', 'Cognito Forms', 'manage_options', 'CognitoOptions', array($this, 'options_page'));
|
||||
}
|
||||
|
||||
// Entrypoint for Cognito Forms access
|
||||
public function main_page() {
|
||||
public function main_page() {
|
||||
include 'templates/main.php';
|
||||
}
|
||||
|
||||
public function options_page() {
|
||||
include 'templates/options.php';
|
||||
}
|
||||
}
|
||||
new CognitoFormsPlugin;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@ import { registerBlockType } from '@wordpress/blocks';
|
|||
import { PlainText } from '@wordpress/editor';
|
||||
import { Button, Placeholder, ExternalLink } from '@wordpress/components';
|
||||
import { BlockIcon } from '@wordpress/block-editor';
|
||||
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './editor.scss';
|
||||
import './style.scss';
|
||||
import SelectDialog from './select-dialog'
|
||||
import SelectDialog from './select-dialog';
|
||||
|
||||
const CogIcon = <svg version="1.1" viewBox="-4.6 230 110.9 111" xmlns="http://www.w3.org/2000/svg"><path id="path4" class="st0" d="M 48.599609 0 L 45.699219 16 C 41.699219 17.1 37.999609 18.4 34.599609 20.5 L 21.5 11.5 L 11.699219 20.699219 L 20.599609 34.699219 C 18.399609 38.199219 16.9 41.900391 16 45.900391 L 0 48.699219 L 0 62.699219 L 15.900391 65.599609 C 17.000391 69.699609 18.499219 73.4 20.699219 77 C 20.699219 77 21.199609 77.9 20.599609 77 L 20.5 76.900391 L 11.5 90 L 21.300781 99.800781 L 34.5 90.800781 C 38 93.000781 41.699219 94.499609 45.699219 95.599609 L 48.5 111 L 62.400391 111 L 65.199219 95.099609 C 69.199219 94.099609 73.099609 92.5 76.599609 90.5 L 89.699219 99.5 L 99.5 89.699219 L 90.5 76.599609 C 92.6 73.099609 94.200781 69.299219 95.300781 65.199219 L 110.90039 62.400391 L 110.90039 48.5 L 95.300781 45.699219 C 94.200781 41.699219 92.7 37.900781 90.5 34.300781 L 99.5 21.199219 L 89.699219 11.400391 L 76.599609 20.599609 C 72.699609 18.299609 65.400391 16 65.400391 16 L 62.5 0 L 48.599609 0 z M 55.800781 26.599609 C 63.900781 26.599609 70.7 29.300391 76 34.900391 C 78.2 37.200391 80.1 39.799609 81.5 43.099609 C 80.6 44.899609 79.9 46.699219 79.5 48.699219 L 66.599609 50.900391 C 64.599609 45.300391 60.699219 42.900391 55.199219 42.900391 C 51.599219 42.900391 48.7 44.1 46.5 46.5 C 44.2 48.9 43.099609 51.899219 43.099609 55.699219 C 43.099609 59.299219 44.200391 62.199609 46.400391 64.599609 C 48.700391 66.999609 51.500391 68.099609 54.900391 68.099609 C 58.400391 68.099609 61.099219 67.1 63.199219 65 C 64.499219 63.8 65.3 62.300391 66 60.400391 L 79.400391 62.900391 L 79.400391 62.800781 C 79.800391 64.500781 80.399609 66.199219 81.099609 67.699219 C 79.699609 71.099219 77.700781 74.2 74.800781 77 C 69.800781 81.8 63.300781 84.199219 55.300781 84.199219 C 47.200781 84.199219 40.300781 81.5 34.800781 76 C 29.300781 70.5 26.5 63.699609 26.5 55.599609 C 26.5 47.399609 29.3 40.500391 35 34.900391 C 40.6 29.400391 47.600781 26.599609 55.800781 26.599609 z " transform="translate(-4.6,230)" /></svg>;
|
||||
|
||||
|
|
@ -46,10 +46,14 @@ registerBlockType( 'cognito-forms/cognito-embed', {
|
|||
__( 'Form' ),
|
||||
],
|
||||
attributes: {
|
||||
url: {
|
||||
source: 'text',
|
||||
selector: '.cognito__form'
|
||||
}
|
||||
formID: {
|
||||
type: 'string',
|
||||
},
|
||||
embedCode: {
|
||||
type: 'string',
|
||||
source: 'html',
|
||||
selector: 'div',
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -64,34 +68,42 @@ registerBlockType( 'cognito-forms/cognito-embed', {
|
|||
* @returns {Mixed} JSX Component.
|
||||
*/
|
||||
edit: ( props ) => {
|
||||
return (
|
||||
<Placeholder
|
||||
icon={ CogIcon }
|
||||
label="Cognito Forms"
|
||||
className={ props.className }
|
||||
instructions={ __(
|
||||
'Click the button below to choose a form to embed.'
|
||||
) }
|
||||
>
|
||||
<SelectDialog></SelectDialog>
|
||||
<br />
|
||||
<div className="components-placeholder__learn-more">
|
||||
<ExternalLink
|
||||
href={ __(
|
||||
'https://wordpress.org/support/article/embeds/'
|
||||
) }
|
||||
>
|
||||
{ __( 'Learn more about embeds' ) }
|
||||
</ExternalLink>
|
||||
</div>
|
||||
{/* <PlainText
|
||||
onChange={ content => props.setAttributes({ url: content }) }
|
||||
value={ props.attributes.url }
|
||||
placeholder="Your form url"
|
||||
className="cognito__form"
|
||||
/> */}
|
||||
</Placeholder>
|
||||
);
|
||||
const handleForm = ( code ) => {
|
||||
props.setAttributes( { embedCode: code } );
|
||||
};
|
||||
|
||||
if ( ! props.attributes.embedCode ) {
|
||||
return (
|
||||
<Placeholder
|
||||
icon={ CogIcon }
|
||||
label="Cognito Forms"
|
||||
className={ props.className }
|
||||
instructions={ __(
|
||||
'Click the button below to choose a form to embed.'
|
||||
) }
|
||||
>
|
||||
<SelectDialog onSelectForm={ handleForm }></SelectDialog>
|
||||
<br />
|
||||
<div className="components-placeholder__learn-more">
|
||||
<ExternalLink
|
||||
href={ __(
|
||||
'https://wordpress.org/support/article/embeds/'
|
||||
) }
|
||||
>
|
||||
{ __( 'Learn more about embeds' ) }
|
||||
</ExternalLink>
|
||||
</div>
|
||||
{/* <PlainText
|
||||
onChange={ content => props.setAttributes({ url: content }) }
|
||||
value={ props.attributes.url }
|
||||
placeholder="Your form url"
|
||||
className="cognito__form"
|
||||
/> */}
|
||||
</Placeholder>
|
||||
);
|
||||
}
|
||||
|
||||
return ( <div dangerouslySetInnerHTML={ { __html: props.attributes.embedCode } }></div> );
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -107,20 +119,10 @@ registerBlockType( 'cognito-forms/cognito-embed', {
|
|||
*/
|
||||
save: ( props ) => {
|
||||
return (
|
||||
<div className={ props.className }>
|
||||
<p>— Hello from the frontend.</p>
|
||||
<p>
|
||||
CGB BLOCK: <code>cognito</code> is a new Gutenberg block.
|
||||
</p>
|
||||
<iframe className="cognito__form" src={ props.attributes.url }></iframe>
|
||||
<p>
|
||||
It was created via{ ' ' }
|
||||
<code>
|
||||
<a href="https://github.com/ahmadawais/create-guten-block">
|
||||
create-guten-block
|
||||
</a>
|
||||
</code>.
|
||||
</p>
|
||||
<div
|
||||
className={ props.className }
|
||||
dangerouslySetInnerHTML={ { __html: props.attributes.embedCode } }
|
||||
>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
import { Component } from '@wordpress/element';
|
||||
|
||||
class CognitoBlockEdit extends Component {
|
||||
render() {
|
||||
const { attributes, setAttributes } = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CognitoBlockEdit;
|
||||
|
|
@ -1,26 +1,45 @@
|
|||
/**
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
import React from 'react';
|
||||
import { Button, Modal, FocusableIframe } from '@wordpress/components';
|
||||
import { useState } from '@wordpress/element';
|
||||
|
||||
const SelectDialog = () => {
|
||||
const [ isOpen, setOpen ] = useState( false );
|
||||
const openModal = () => setOpen( true );
|
||||
const closeModal = () => setOpen( false );
|
||||
class SelectDialog extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
return (
|
||||
this.state = {
|
||||
isOpen: false
|
||||
};
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener('message', this.handlePostMessage, false);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('message', this.handlePostMessage);
|
||||
}
|
||||
|
||||
handlePostMessage = (event) => {
|
||||
console.log('PostMessage recieved:', event.data);
|
||||
this.props.onSelectForm(event.data);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Button variant="primary" onClick={ openModal }>
|
||||
<Button variant="primary" onClick={ () => this.setState({isOpen: true}) }>
|
||||
Choose a form
|
||||
</Button>
|
||||
{ isOpen && (
|
||||
<Modal title="Cognito Forms Embed" className="cognito-modal" onRequestClose={ closeModal } shouldCloseOnClickOutside={ false }>
|
||||
<FocusableIframe style={{ width: "500px", height: "500px" }} src="//example.com"></FocusableIframe>
|
||||
{ this.state.isOpen && (
|
||||
<Modal title="Cognito Forms Embed" className="cognito-modal" onRequestClose={ () => this.setState({isOpen: false}) } shouldCloseOnClickOutside={ false }>
|
||||
<FocusableIframe style={{ width: "500px", height: "500px" }} src="/wp-content/plugins/cognitoforms/testing/dialog.html"></FocusableIframe>
|
||||
</Modal>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
export default SelectDialog
|
||||
export default SelectDialog
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Form Selection</title>
|
||||
</head>
|
||||
<body>
|
||||
<textarea id="embed-code"></textarea>
|
||||
<button type="submit" onclick="postEmbedCode()">Submit</button>
|
||||
|
||||
<script type="text/javascript">
|
||||
function postEmbedCode(event) {
|
||||
var embedCode = document.querySelector("#embed-code").value;
|
||||
window.parent.postMessage(embedCode);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -40,11 +40,11 @@
|
|||
|
||||
var closeElement = tinyMCEPopup.getWin().document.querySelector('.mceClose, .mce-close');
|
||||
if (closeElement) closeElement.style.color = '#fff';
|
||||
|
||||
|
||||
function cognito_submit() {
|
||||
var formSelect = document.getElementById('formSelect');
|
||||
var shortcode = '[CognitoForms id="' + formSelect.value + '"]';
|
||||
|
||||
|
||||
if (window.tinyMCE) {
|
||||
if (window.tinyMCE.execInstanceCommand) {
|
||||
window.tinyMCE.execInstanceCommand('content', 'mceInsertContent', false, shortcode);
|
||||
|
|
@ -53,44 +53,44 @@
|
|||
else if (window.tinyMCE.focusedEditor) {
|
||||
window.tinyMCE.focusedEditor.insertContent(shortcode);
|
||||
}
|
||||
|
||||
|
||||
tinyMCEPopup.close();
|
||||
}
|
||||
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
jQuery(function() {
|
||||
var data = {
|
||||
action: "get_forms"
|
||||
};
|
||||
jQuery.post(tinyMCEPopup.params.ajax_url, data, function(response) {
|
||||
jQuery.post(tinyMCEPopup.params.ajax_url, data, function(response) {
|
||||
if (response) {
|
||||
var forms = JSON.parse(response);
|
||||
|
||||
|
||||
var formSelect = jQuery("#formSelect");
|
||||
jQuery.each(forms, function() {
|
||||
formSelect.append(jQuery("<option></option>")
|
||||
.attr("value", this.Id)
|
||||
.text(this.Name));
|
||||
});
|
||||
|
||||
|
||||
jQuery("#form-list").show();
|
||||
} else {
|
||||
jQuery("#no-forms").show();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div id="no-forms" style="display:none;">
|
||||
<h3>You are not logged into your Cognito Forms account.</h3>
|
||||
<p>Please click on the "Cognito Forms" link in the menu on the left and log in to register this plug-in with your account.</p>
|
||||
</div>
|
||||
|
||||
<div id="form-list" style="display:none;">
|
||||
|
||||
<div id="form-list">
|
||||
<h3>Embed a Form</h3>
|
||||
<form method="post" action="">
|
||||
<label for="formSelect">Choose a form</label>
|
||||
|
|
@ -100,4 +100,4 @@
|
|||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue