Components, Hooks, Functions, Variables etc. (SUPERCEDED)

Last Updated on February 22, 2021 by Neil Murray

Global Variables #

CF7 Skins Visual Global Variables #

  • window.cf7svisual – JSON object used to transfer data between React & WordPress
    • addons – Add-ons functions
    • ajaxurl – URL for AJAX post request
    • environment –
    • integration –
    • items – current form field items with user settings
    • multi –
      • input_name –
      • options – CF7 Skins Multi options settings of form
    • nonce – WordPress generated nonce for security checking
    • options – CF7 Skins options settings (general)
    • title – form title
    • treeData – RST tree data
    • update – WordPress callback function to run after security checks
    • util – shared Utilities functions
      • cf7sRequest –
    • versions – WP & CF7 versions installed

Heading

  • window.cf7sAdmin –
    • addFilter: ƒ ()
    • applyFilters: ƒ ( event )
    • backToFilters: ƒ ( event )
    • clearFilters: ƒ ( event )
    • close: ƒ (e)
    • deselect: ƒ (e)
    • details: ƒ (e)
    • filters: ƒ (e)
    • filtersChecked: ƒ ()
    • getTextarea: ƒ ()
    • init: ƒ ( url )
    • orderSkin: ƒ (e)
    • post_id: “3726”
    • select: ƒ (e)
    • selectHover: ƒ (m,e)
    • skinsSearch: ƒ (e)
    • sort: ƒ (e)
    • tab: ƒ (e)
    • updateMailtags: ƒ ()
    • view: ƒ (e)

Visual Components #

Components

  • Form
    • Edit
      • Type
    • Items
      • InputItem
      • InputItemMenu
    • Notice
    • Select
      • SelectItem
      • Tip

Further reading

Visual Component Functions #

src/visual/index.js – class Visual #

React Functions

  • componentWillMount ()
    • allow loading of selected Template to Skins>Form tab [x]
  • componentDidMount ()
    • add current form field items with user settings or setup default form [x]

Action Functions

  • Visual.onTreeChange (treeData) – update RST tree data [x]
  • Visual.saveVisualForm (event) – save …
  • Visual.updateTreeData () –
  • Visual.duplicateNode (rowInfo) – duplicate form field including all sub-items [x]
  • Visual.deleteNode (rowInfo) – delete form field including all sub-items
  • Visual.addElementOnClick (node) – click event to add element into RST tree
  • Visual.getAncestor (rowInfo) – get current edited node top level parent node ???
  • Visual.clickMenu (rowInfo, menu) – pass rowInfo for item where Add-ons menu is selected

Edit Functions

  • Visual.editCF7Element (rowInfo) – edit Form Field Item
  • Visual.editOnChange (event, optionsArrayType = null, index = null, _rowInfo = null) – edit handling 
  • Visual.editOnKeyPress (event) –
  • Visual.validateOnBlur (event) – edit input validation/sanitation
  • Visual.addEditCF7Option (event) – add option item to CF7 tag options [x]
  • Visual.removeEditCF7Option (event, index) – remove option item [x]
  • Visual.closeEditModal () – close edit window
  • changeNodeType () –

Toolbar Functions

  • Visual.clickVisualObject () –
  • Visual.clickFormOptions () –

Notice Functions

  • Visual.showNotice (content, status, isDismissible) – show notice in Skins>Form tab [x]
  • Visual.removeNotice () – remove notice [x]

State

treeData: [], //
showEditModal: false, //
notice: {
  status: 'success',
  content: '',
  isDismissible: true,		  
},
rowInfo: null,
value: [],
showTreeData: false,

RST Functions

  • insertNode – insert a node into the tree at the given depth, after the minimum index
  • removeNodeAtPath – removes the node at the specified path and returns the resulting treeData
  • getNodeAtPath – gets the node at the specified path
  • walk – walk descendants depth-first and call a callback on each
  • changeNodeAtPath – replaces node at path with object, or callback-defined object

Plugin Admin Functions

src/dev/includes/admin-visual.php – Class CF7_Skins_Visual_Admin

  • visual_tab ( $tabs ) – add Skins>Form tab (Visual UI)
  • visual_content ( $tabs ) – add visual form content (not used at this stage)
  • save_visual ( $cf7 ) – save the visual form by clicking Save Visual button
    • content of Skins>Form tab is added to CF7>Form tab
  • cf7skins_visual_update () –  save Visual data into the WP database
  • extract_visual ( $items ) – 
  • loop_children ( $item, $parent ) – 
  • create_element ( $item ) – 
  • create_cf7_tags ( $item ) – 
  • class_attribute ( $item ) – 
  • default_tag ( $item ) – 
  • select_template () – 
  • enqueue_scripts () – 
  • log_scripts () –
  • copy_visual ( $cf7 ) – 
  • setting_fields () – 
  • admin_notice – 
  • import_node – 

Utility Functions

src/visual/util/index.js

  • cf7sItems – define all CF7 Tags & CF7 Skins Items [x]
  • cf7sRequest () – AJAX post request function [x]
  • cf7sDropRules () – 
  • cf7sSurroundingRules () – 
  • cf7sDuplicateRules () –
  • randomizeName – random tag name numbering
  • mergeDefault (nodes) – merge node with default from cf7sItems.js
  • versionCompare () – compares two software version numbers

Add-ons Functions

src/visual/addons.js

  • register ( hook, callback ) –
  • get ( hook ) –

Hooks #

CF7 Skins Visual Hooks #

includes/admin-visual.php

Filters Tag

  • cf7s_visual_update_js_callbacks
    Run add-ons JavaScript callback functions. Can be function within namespace or standalone function. For example: myNameSpace.myFunction() or anotherFunction(). See Visual Save and Addon Update.
    Hooked value:
    • array(), (Array) all registered callback
  • cf7skins_create_element
    Create custom element for Visual.
    Hooked value:
    • $skin_item, (DOM Object) visual DOM elements.
    • $item, (Object) visual item
    • $this, (PHP Class) CF7_Skins_Admin_Visual class

CF7 Skins Hooks #

cf7skins\includes\admin.php #

( ‘cf7s_update’, $cf7 ) action – while saving Contact Form 7 form
( ‘cf7s_admin_enqueue_scripts’, $hook_suffix ) action – while enqueuing CF7 Skins admin styles and scripts
( ‘cf7s_add_meta_boxes’, $post_id ) action – while creating the skins metabox (only for CF7 before 4.2)

cf7skins\includes\contact.php

( ‘cf7skins_enqueue_scripts’, $ids ) action – while applying cf7skins styles to current CF7 form
$cf7skins_classes = ( ‘cf7skins_form_classes’, $cf7skins_class ) filter – apply additional classes to CF7 Skins styling e.g. cf7s-multi

cf7skins\includes\settings.php

( ‘cf7skins_section_{$this->section}’ ) action – after each Contact Form 7 Skins Settings section. In each Tab before Save Changes.
( ‘cf7skins_setting_info’, $args ) action – on the cf7skins_setting_info option. Used in \plugins\cf7skins\includes\logs.php.

$this->tabs = apply_filters( ‘cf7skins_setting_tabs‘, array( etc.)) – Contact Form 7 Skins Settings Tabs
$fields = apply_filters( ‘cf7skins_setting_fields‘, array( etc.)) – Contact Form 7 Skins Settings Options. Licenses are added in license.php.
return apply_filters( ‘cf7skins_setting_sanitize‘, $this->options, $old_option, $inputs ) filter – sanitized Licenses added via apply_filters () in license.php
return apply_filters( ‘cf7skins_color_scheme‘, $colors ) filter – applies CF7 Skins Color Schemes

cf7skins\includes\template.php

$templates = apply_filters( ‘cf7skins_templates’, $templates ); // add filter for other plugins
return apply_filters( ‘template_filter_tags’, $filter_tags ); //

cf7skins\includes\style.php

$styles = apply_filters( ‘cf7skins_styles’, $styles ) filter – add filter for other plugins
return apply_filters( ‘style_filter_tags’, $filter_tags ) filter – add filter for other plugins

Contact Form 7 Hooks

See http://hookr.io/plugins/contact-form-7

CF7 Skins – Other Stuff #

DOM element selectors #

WP

  • document.getElementById(‘post_ID’)
    • ADD
  • document.getElementById(‘post_ID’).getAttribute(‘value’)
    • CF7 Post ID (null for new created CF7 form)

CF7

  • document.getElementById(‘wpcf7-contact-form-editor ‘)
  • document.getElementById(‘wpcf7-admin-form-element’)
    • CF7 UI ( form method=”post” )
  • document.getElementById(‘title’).value
    • CF7 form title
  • document.getElementById(‘contact-form-editor’)
    • CF7 UI ()
  • document.getElementById(‘form-panel’)
    • CF7 UI ()
  • document.getElementById(‘wpcf7-form’)
    • CF7 UI (textarea)

CF7 Skins

  • src/index.js
    • document.getElementById(‘tab-visual’)
      • React root on dev server
  • src/visual/index.js
    • document.getElementById( ‘tab-template’ )
      • Template tab
    • tabTemplate.getElementsByClassName( “select” )
      • Each Template on Template tab
    • document.getElementsByClassName(‘cf7sSpinner’)
      • show spinner while Save
    • document.getElementById( ‘cf7s-template’ ).value
      • selected CF7 Skins Template
    • document.getElementById( ‘cf7s-style’ ).value
      • selected CF7 Skins Style
    • document.getElementById(‘cf7s-visual-notice’)
      • display notice above CF7 UI

Heading #

wpcf7-admin-form-element – CF7 UI ( form method=”post” )
post_ID – <input type="hidden" id="post_ID" name="post_ID" value="3645">
active-tab – <input type="hidden" id="active-tab" name="active-tab" value="0 ">
title – <input type="text" name="post_title" value="Test - Visual - Test (Blank Form)" id="title">
wpcf7-shortcode – <input type="text" id="wpcf7-shortcode" value="

Error: Contact form not found.

">
contact-form-editor –
contact-form-editor-tabs –
form-panel –
wpcf7-form – <textarea id="wpcf7-form" name="wpcf7-form" data-config-field="form.body">CONTENT</textarea>
mail-panel –
wpcf7-mail –
wpcf7-mail- –
messages-panel –
additional-settings-panel –

wp_options #

cf7skins – All options set at Contact Form 7 Skins Settings
– ‘color_scheme’
– ‘display_log’
– ‘delete_data’
cf7skins_activated
cf7skins_version_installed

cf7skins_license_status – Used for Beta Testing – no longer used
cf7skins_license_key – Used for Beta Testing – no longer used

cf7skins_get_version – Used for Logs
cf7skins_activation – Used for Logs
cf7skins_deactivation – Used for Logs

cf7skinspro_activated
cf7skinspro_license_status
pro_license_key

cf7skinsmulti_activated
cf7skinsmulti_license_status
multi_license_key

cf7skinsready_activated
cf7skinsready_license_status
ready_license_key

Global Constants #

CF7 Skins (Development & wordpress.org Version)
define( ‘CF7SKINS_VERSION’, ‘1.2.2’ );
define( ‘CF7SKINS_OPTIONS’, ‘cf7skins’ ); // Database option names
define( ‘CF7SKINS_TEXTDOMAIN’, ‘contact-form-7-skins’ );
define( ‘CF7SKINS_FEATURE_FILTER’, false ); // @since 0.4.0
define( ‘CF7SKINS_PATH’, plugin_dir_path( __FILE__ ) );
define( ‘CF7SKINS_URL’, plugin_dir_url( __FILE__ ) );
define( ‘CF7SKINS_STYLES_PATH’, CF7SKINS_PATH . ‘skins/styles/’ );
define( ‘CF7SKINS_STYLES_URL’, CF7SKINS_URL . ‘skins/styles/’ );
define( ‘CF7SKINS_TEMPLATES_PATH’, CF7SKINS_PATH . ‘skins/templates/’ );
define( ‘CF7SKINS_TEMPLATES_URL’, CF7SKINS_URL . ‘skins/templates/’ );
define( ‘CF7SKINS_UPDATE_URL’, ‘http://cf7skins.com’ ); // @since 0.7.0

CF7 Skins Pro
define( ‘CF7SKINSPRO_VERSION’, ‘1.2’ );
define( ‘CF7SKINSPRO_OPTIONS’, ‘cf7skins-pro’ ); // Database option names
define( ‘CF7SKINSPRO_EDD_SLUG’, ‘cf7skins-pro’ ); // EDD download slug
define( ‘CF7SKINSPRO_EDD_ID’, 3356 ); // EDD download ID
define( ‘CF7SKINSPRO_TEXTDOMAIN’, ‘cf7skins-pro’ );
define( ‘CF7SKINSPRO_PATH’, plugin_dir_path( __FILE__ ) );
define( ‘CF7SKINSPRO_URL’, plugin_dir_url( __FILE__ ) );
define( ‘CF7SKINSPRO_STYLES_PATH’, CF7SKINSPRO_PATH . ‘skins/styles/’ );
define( ‘CF7SKINSPRO_STYLES_URL’, CF7SKINSPRO_URL . ‘skins/styles/’ );
define( ‘CF7SKINSPRO_TEMPLATES_PATH’, CF7SKINSPRO_PATH . ‘skins/templates/’ );
define( ‘CF7SKINSPRO_TEMPLATES_URL’, CF7SKINSPRO_URL . ‘skins/templates/’ );

CF7 Skins Ready
define( ‘CF7SKINSREADY_VERSION’, ‘1.0.4’ );
define( ‘CF7SKINSREADY_OPTIONS’, ‘cf7skins-ready’ ); // Database option names
define( ‘CF7SKINSREADY_EDD_SLUG’, ‘cf7skins-ready’ ); // EDD Download Slug
define( ‘CF7SKINSREADY_EDD_ID’, 3953 ); // EDD Download ID
define( ‘CF7SKINSREADY_TEXTDOMAIN’, ‘cf7skins-ready’ );
define( ‘CF7SKINSREADY_PATH’, plugin_dir_path( __FILE__ ) );
define( ‘CF7SKINSREADY_URL’, plugin_dir_url( __FILE__ ) );

CF7 Skins Multi
define( ‘CF7SKINSMULTI_VERSION’, ‘1.0.7’ );
define( ‘CF7SKINSMULTI_OPTIONS’, ‘cf7skins-multi’ ); // Database option names
define( ‘CF7SKINSMULTI_EDD_SLUG’, ‘cf7skins-multi’ ); // EDD Download slug
define( ‘CF7SKINSMULTI_EDD_ID’, 3789 ); // EDD Download ID
define( ‘CF7SKINSMULTI_TEXTDOMAIN’, ‘cf7skins-multi’ );
define( ‘CF7SKINSMULTI_PATH’, plugin_dir_path( __FILE__ ) );
define( ‘CF7SKINSMULTI_URL’, plugin_dir_url( __FILE__ ) );

CF7 Skins Logic
define( ‘CF7SKINSLOGIC_VERSION’, ‘1.0.4’ );
define( ‘CF7SKINSLOGIC_OPTIONS’, ‘cf7skins-logic’ ); // Database options name
define( ‘CF7SKINSLOGIC_META’, ‘_cf7s_logic’ ); // Database post meta name
define( ‘CF7SKINSLOGIC_EDD_SLUG’, ‘cf7skins-logic’ ); // EDD Download slug
define( ‘CF7SKINSLOGIC_EDD_ID’, 4493 ); // EDD Download ID
define( ‘CF7SKINSLOGIC_TEXTDOMAIN’, ‘cf7skins-logic’ );
define( ‘CF7SKINSLOGIC_PATH’, plugin_dir_path( __FILE__ ) );
define( ‘CF7SKINSLOGIC_URL’, plugin_dir_url( __FILE__ ) );
define( ‘CF7SKINSLOGIC_USE_PANEL’, true ); // Add Logic to CF7 panels

Plugin folders

  • Plugin
  • CF7 Skins
  • CF7 Skins Pro
  • CF7 Skins Ready
  • CF7 Skins Multi
  • CF7 Skins Logic
  • Dev. Version
  • cf7skins
  • cf7skins-pro
  • cf7skins-ready
  • cf7skins-multi
  • cf7skins-logic
  • Live Version
  • contact-form-7-skins
  • cf7-skins-pro
  • cf7-skins- ready
  • cf7-skins- multi
  • cf7-skins- logic

Further reading