CF7 Skins Visual Code – old

Last Updated on October 26, 2024 by Neil Murray

Visual Component functions

src/visual/index.js – class Visual

  • 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]
  • Visual.onTreeChange (treeData) – update RST tree data [x]
  • Visual.saveVisualForm (event) – save …
  • Visual.duplicateNode (rowInfo) – duplicate form field including all sub-items [x]
  • Visual.deleteNode (rowInfo) – delete form field including all sub-items
  • Visual.mergeDefault (nodes) – merge node with default from cf7sItems.js
  • 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
  • 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
  • Visual.showNotice (content, status, isDismissible) – show notice in Skins>Form tab [x]
  • Visual.removeNotice () – remove notice [x]

Global Variables

  • window.cf7svisual – JSON object used to transfer data between React & WordPress
    • items – current form field items with user settings
    • ajaxurl – URL for AJAX post request
    • nonce – WordPress generated nonce for security checking
    • update – WordPress callback function to run after security checks

State

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

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

Add-ons functions

src/visual/addons.js

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

CF7 element selectors

  • src/index.js
    • document.getElementById(‘tab-visual’) – src/index.js
  • src/visual/index.js
    • document.getElementById( ‘tab-template’ ) –  Template tab
    • tabTemplate.getElementsByClassName( “select” ) – Select on each Template  
    • document.getElementById(‘post_ID’).getAttribute(‘value’) – CF7 form ID (null for new created form)
    • document.getElementById(‘wpcf7-admin-form-element’) – CF7 UI ( form method=”post” )
    • document.getElementById(‘cf7s-visual-notice’) – display notice above CF7 UI
    • document.getElementsByClassName(‘cf7sSpinner’) – show spinner while Save
    • document.getElementById( ‘cf7s-template’ ).value – selected CF7 Skins Template
    • document.getElementById( ‘cf7s-style’ ).value – selected CF7 Skins Syyle
    • 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)

JavaScript Coding Techniques

const renderAddon = !! window.cf7svisual.addons ? action : '';

!! is used to make sure test returns as Boolean – only true or false.

Refer JS Double Bang — or “The Not Operator Part !!”

Further Reading:

Notes

We need to get our Dev. Guidelines to a point where we can bring on a React JS Dev to work quickly & easily in our React/WordPress environment.

We need to explain how we use React & RST in CF7 Skins Visual, in detail, so that a new React JS Dev can start work quickly & easily on our plugins.

We need to recall what we’ve learnt since we started using React & RST in CF7 Skins Visual and explain this clearly & concisely.

Neil Murray – Dec 2017