| 1 |
<?php |
| 2 |
/** |
| 3 |
* js event helper links for code snipets, displayed on the js codemirror tab. |
| 4 |
* @since 4.0.0 |
| 5 |
*/ |
| 6 |
?> |
| 7 |
<ul id="js-tags" class="display-none"> |
| 8 |
<li id="form-events" class="show-events"><?=__('Form','cf7-grid-layout')?><span>></span> |
| 9 |
<ul> |
| 10 |
<li><?= __('Event: ','cf7-grid-layout')?> |
| 11 |
<a class="helper" data-cf72post="$('#cf7sg-form-{$cf7_key} form.wpcf7-form').on( 'cf7SmartGridReady', function(e){ |
| 12 |
/* event fired once the form has been initialised, click to insert helper code into your js file. */ |
| 13 |
let $form = $(this); //$jquery form object. |
| 14 |
});" href="javascript:void(0);"><?=__('form ready','cf7-grid-layout')?></a> |
| 15 |
</li> |
| 16 |
</ul> |
| 17 |
</li> |
| 18 |
<li id="table-events" class="display-none"><?=__('Tables','cf7-grid-layout')?><span>></span> |
| 19 |
<ul> |
| 20 |
<li><?= __('Event: ','cf7-grid-layout')?> |
| 21 |
<a class="helper" data-cf72post="$('#cf7sg-form-{$cf7_key} form.wpcf7-form').on( 'sgTableReady', '.container.cf7-sg-table', function(e){ |
| 22 |
/* event fired once a table has been initialised, click to insert helper code into your js file. */ |
| 23 |
let $form = $(e.delegateTarget), $table = $(e.target); |
| 24 |
});" href="javascript:void(0);"><?=__('table ready','cf7-grid-layout')?></a> |
| 25 |
</li> |
| 26 |
<li><?= __('Event: ','cf7-grid-layout')?> |
| 27 |
<a class="helper" data-cf72post="$('#cf7sg-form-{$cf7_key} form.wpcf7-form').on( 'sgRowAdded', '.container.cf7-sg-table', function(e){ |
| 28 |
/* event fired when a table row has been added, click to insert helper code into your js file. */ |
| 29 |
//$form current form jquery object. |
| 30 |
//$table table jquery object to which the new row was added. |
| 31 |
//$row newly added row jquery object. |
| 32 |
//rIdx row index (zero based). |
| 33 |
let $form = $(e.delegateTarget), $table = $(e.target), rIdx = e['row'], $row= $table.find('.row[data-row='+rIdx+']'); |
| 34 |
});" href="javascript:void(0);"><?=__('row added','cf7-grid-layout')?></a> |
| 35 |
</li> |
| 36 |
<li><?= __('Event: ','cf7-grid-layout')?> |
| 37 |
<a class="helper" data-cf72post="/* event fired when a table row has been deleted, click to insert helper code into your js file. */ |
| 38 |
$('#cf7sg-form-{$cf7_key} form.wpcf7-form').on( 'sgRowDeleted', '.container.cf7-sg-table', function(e){ |
| 39 |
//$form current form jquery object. |
| 40 |
//$table table jquery object. |
| 41 |
let $form = $(e.delegateTarget), $table = $(e.target); |
| 42 |
});" href="javascript:void(0);"><?=__('row removed','cf7-grid-layout')?></a> |
| 43 |
</li> |
| 44 |
<li><?= __('Function: ','cf7-grid-layout')?> |
| 45 |
<a class="helper" data-cf72post="//call this function once the table is ready. |
| 46 |
//$table is the table section jquery object. |
| 47 |
//adds an extra row, and fires a row added event. |
| 48 |
$table.cf7sgCloneRow(); /* function to programmatically add a row to a table if fields. */" href="javascript:void(0);"><?=__('add a row','cf7-grid-layout')?></a> |
| 49 |
</li> |
| 50 |
<li><?= __('Function: ','cf7-grid-layout')?> |
| 51 |
<a class="helper" data-cf72post="//call this function once the table is ready. |
| 52 |
//$table is the table section jquery object. |
| 53 |
//pass false to hide the button, true to enable the button. |
| 54 |
$table.toggleCF7sgTableRowAddition(false); /* hide/show row addition button. */" href="javascript:void(0);"><?=__('toggle add button','cf7-grid-layout')?></a> |
| 55 |
</li> |
| 56 |
<li><?= __('Function: ','cf7-grid-layout')?> |
| 57 |
<a class="helper" data-cf72post="//call this function once the table is ready. |
| 58 |
//$table is the table section jquery object. |
| 59 |
//pass false to hide the button, true to enable the button. |
| 60 |
$table.toggleCF7sgTableRowDeletion(false); /* hide/show row deletion button. */" href="javascript:void(0);"><?=__('toggle delete button','cf7-grid-layout')?></a> |
| 61 |
</li> |
| 62 |
<li><?= __('Function: ','cf7-grid-layout')?> |
| 63 |
<a class="helper" data-cf72post="//call this function once the table is ready. |
| 64 |
//$table is the table section jquery object. |
| 65 |
//returns number of rows in table. |
| 66 |
$table.cf7sgCountRows(); /* count table rows. */" href="javascript:void(0);"><?=__('row count','cf7-grid-layout')?></a> |
| 67 |
</li> |
| 68 |
<li><?= __('Function: ','cf7-grid-layout')?> |
| 69 |
<a class="helper" data-cf72post="//call this function once the table is ready. |
| 70 |
//$table is the table section jquery object. |
| 71 |
//returns number of rows in table. |
| 72 |
$table.cf7sgRemoveRow(); /* remove last row. */" href="javascript:void(0);"><?=__('remove last row','cf7-grid-layout')?></a> |
| 73 |
</li> |
| 74 |
</ul> |
| 75 |
</li> |
| 76 |
<li id="tab-events" class="display-none"><?=__('Tabs','cf7-grid-layout')?><span>></span> |
| 77 |
<ul> |
| 78 |
<li><?= __('Event: ','cf7-grid-layout')?> |
| 79 |
<a class="helper" data-cf72post="/* event fired once the tabs has been initialised, click to insert helper code into your js file. */ |
| 80 |
$('#cf7sg-form-{$cf7_key} form.wpcf7-form').on( 'sgTabsReady', function(e){ |
| 81 |
//$form current form jquery object. |
| 82 |
//$tabs tabs jquery object. |
| 83 |
let $form = $(this), $tabs = $(e.target); |
| 84 |
});" href="javascript:void(0);"><?=__('tabs ready','cf7-grid-layout')?></a> |
| 85 |
</li> |
| 86 |
<li><?= __('Event: ','cf7-grid-layout')?> |
| 87 |
<a class="helper" data-cf72post="/* event fired when a new tab is added, click to insert helper code into your js file. */ |
| 88 |
$('#cf7sg-form-{$cf7_key} form.wpcf7-form').on( 'sgTabAdded', '.cf7-sg-tabs-panel', function(e){ |
| 89 |
//$form current form jquery object. |
| 90 |
//$panel newly added panel jquery object. |
| 91 |
//$panel.attr('id') == <initial-id>-<tIdx> where tab index (tIdx) is greater than 0. |
| 92 |
let $form = $(this), $panel = $(e.target), tIdx = e['tab-index']; |
| 93 |
});" href="javascript:void(0);"><?=__('tab added','cf7-grid-layout')?></a> |
| 94 |
</li> |
| 95 |
<li><?= __('Event: ','cf7-grid-layout')?> |
| 96 |
<a class="helper" data-cf72post="/* event fired when a new tab is removed, click to insert helper code into your js file. */ |
| 97 |
$('#cf7sg-form-{$cf7_key} form.wpcf7-form').on( 'sgTabRemoved', '.cf7-sg-tabs', function(e){ |
| 98 |
//$form current form jquery object. |
| 99 |
//$tabs tab jquery object from which the panel was removed. |
| 100 |
let $form = $(this), $tabs = $(e.target); |
| 101 |
});" href="javascript:void(0);"><?=__('tab removed','cf7-grid-layout')?></a> |
| 102 |
</li> |
| 103 |
<li><?= __('Function: ','cf7-grid-layout')?> |
| 104 |
<a class="helper" data-cf72post=" |
| 105 |
//call this function once the tabs are ready. |
| 106 |
//adds an extra tab, and fires a tab added event. |
| 107 |
$tabs.cf7sgCloneTab(); /* function to programmatically add a tab. */" href="javascript:void(0);"><?=__('add a tab','cf7-grid-layout')?></a> |
| 108 |
</li> |
| 109 |
<li><?= __('Function: ','cf7-grid-layout')?> |
| 110 |
<a class="helper" data-cf72post=" |
| 111 |
//call this function once the tabs are ready. |
| 112 |
//removes the last tab and its corresponding panel. |
| 113 |
$tabs.cf7sgRemoveTab(); /* remove tab and panel. */" href="javascript:void(0);"><?=__('remove tab','cf7-grid-layout')?></a> |
| 114 |
</li> |
| 115 |
<li><?= __('Function: ','cf7-grid-layout')?> |
| 116 |
<a class="helper" data-cf72post=" |
| 117 |
//call this function once the tabs are ready. |
| 118 |
//to disable the tab addition pass false, to enable it pass true. |
| 119 |
$tabs.toggleCF7sgTabAddition(false); /* disable/enable tab addition. */" href="javascript:void(0);"><?=__('toggle add button','cf7-grid-layout')?></a> |
| 120 |
</li> |
| 121 |
<li><?= __('Function: ','cf7-grid-layout')?> |
| 122 |
<a class="helper" data-cf72post=" |
| 123 |
//call this function once the tabs are ready. |
| 124 |
//to disable the tab deletion pass false, to enable it pass true. |
| 125 |
$tabs.toggleCF7sgTabDeletion(false); /* disable/enable tab deletion. */" href="javascript:void(0);"><?=__('toggle delete button','cf7-grid-layout')?></a> |
| 126 |
</li> |
| 127 |
<li><?= __('Function: ','cf7-grid-layout')?> |
| 128 |
<a class="helper" data-cf72post=" |
| 129 |
//call this function once the tabs are ready. |
| 130 |
//returns the total count of current tabs. |
| 131 |
$tabs.cf7sgCountTabs(); /* tab count. */" href="javascript:void(0);"><?=__('tab count','cf7-grid-layout')?></a> |
| 132 |
</li> |
| 133 |
</ul> |
| 134 |
</li> |
| 135 |
<li id="collapsible-events" class="display-none"><?=__('Collapsible rows','cf7-grid-layout')?><span>></span> |
| 136 |
<ul> |
| 137 |
<li><?= __('Event: ','cf7-grid-layout')?> |
| 138 |
<a class="helper" data-cf72post="/* event fired once the collapsible rows (accordion/toggle/sections) have been initialised */ |
| 139 |
$('#cf7sg-form-{$cf7_key} form.wpcf7-form').on( 'sgCollapsibleRowsReady', function(e){ |
| 140 |
let $form = $(this), $section = $(e.target); |
| 141 |
});" href="javascript:void(0);"><?=__('section ready','cf7-grid-layout')?></a> |
| 142 |
</li> |
| 143 |
<li><?= __('Event: ','cf7-grid-layout')?> |
| 144 |
<a class="helper" data-cf72post="/* event fired when a collapsible section (accordion/toggle/section) is activated, click to insert helper code into your js file. */ |
| 145 |
$('#cf7sg-form-{$cf7_key} form.wpcf7-form').on( 'accordionactivate', function(e, ui){ |
| 146 |
//this event is fired if the section is either closed or opened. |
| 147 |
//for single collapsed sections, |
| 148 |
// when openned, ui.oldPanel is empty and ui.newPanel is the current opened panel. |
| 149 |
// when closed, ui.oldPanel is the currently closed panel and ui.newPanel is empty. |
| 150 |
//for accordion with multile rows, |
| 151 |
// ui.oldPanel is the previous panel (else empty if first actiation), ui.newPanel is the current opened panel. |
| 152 |
//see https://api.jqueryui.com/accordion/#event-activate for more details. |
| 153 |
let $form = $(this), $section = $(e.target); |
| 154 |
switch(true){ |
| 155 |
case $section.is('.with-toggle'): |
| 156 |
//this is a toggled section, identify it by its CSS id $this.attr('id'). |
| 157 |
break; |
| 158 |
case $section.is('.cf7sg-accordion-rows'): |
| 159 |
//this is an accordion with multiple collapsible sections, identify it by its CSS id $this.attr('id') |
| 160 |
break; |
| 161 |
default: //this is a single collapsible section. |
| 162 |
//identify it by its CSS id $this.attr('id') |
| 163 |
break; |
| 164 |
} |
| 165 |
});" href="javascript:void(0);"><?=__('section activated','cf7-grid-layout')?></a> |
| 166 |
</li> |
| 167 |
<li><?= __('Function: ','cf7-grid-layout')?> |
| 168 |
<a class="helper all-fields" data-cf72post=" |
| 169 |
// $section is the collapsible section jquery object. |
| 170 |
// you can either pass true (open, activate), or false (close) to the function. |
| 171 |
$section.activateCF7sgCollapsibleSection(true);/* toggle open/close a collapsible section. */" href="javascript:void(0);"><?=__('open/close section','cf7-grid-layout')?></a> |
| 172 |
</li> |
| 173 |
</ul> |
| 174 |
</li> |
| 175 |
<li id="slider-events" class="display-none"><?=__('Slides','cf7-grid-layout')?><span>></span> |
| 176 |
<ul> |
| 177 |
<li><?= __('Event: ','cf7-grid-layout')?> |
| 178 |
<a class="helper" data-cf72post="/* event fired once the slider has been initialised, click to insert helper code into your js file. */ |
| 179 |
$('#cf7sg-form-{$cf7_key} form.wpcf7-form').on( 'sgSliderReady','.cf7sg-slider-section', function(e){ |
| 180 |
// $form is the form jquery object. |
| 181 |
//the $slider is the div.cf7sg-slider-section element jquery object. |
| 182 |
//slides is the total number of slides. |
| 183 |
let $form = $(e.delegateTarget), $slider = $(this), slides = e.total; |
| 184 |
});" href="javascript:void(0);"><?=__('slider ready','cf7-grid-layout')?></a> |
| 185 |
</li> |
| 186 |
<li><?= __('Event: ','cf7-grid-layout')?> |
| 187 |
<a class="helper" data-cf72post="/* event fired when a new slide is active, click to insert helper code into your js file. */ |
| 188 |
$('#cf7sg-form-{$cf7_key} form.wpcf7-form').on( 'sgSlideChange','.cf7sg-slider-section', function(e){ |
| 189 |
//slide indexes are 0 based. |
| 190 |
//e['current'] holds the index of the current slide |
| 191 |
//e['last'] holds the index of the last slide. |
| 192 |
//you can add a CSS id to each div.container.cf7sg-collapsible elements |
| 193 |
// whithin the div.cf7sg-slider-section element to uniquely identify each slide $slide.attr('id'); |
| 194 |
// $form is the form jquery object. |
| 195 |
let $form = $(e.delegateTarget), $slider=$(this), $slide = $(e.target), |
| 196 |
current = e.current, last = e.last; |
| 197 |
});" href="javascript:void(0);"><?=__('on slide change','cf7-grid-layout')?></a> |
| 198 |
</li> |
| 199 |
<li><?= __('Function: ','cf7-grid-layout')?> |
| 200 |
<a class="helper slider-fields" data-cf72post=" |
| 201 |
// $slider is the slider jquery object. Function can be chained. |
| 202 |
//index can either be empty/null, which will move to the next slide. |
| 203 |
//a positive index of an existing slide to move (slide index is 0 based) or, |
| 204 |
// -1 to move to the previous slide. |
| 205 |
$slider.sgChangeSlide(index);/* change slides. */" href="javascript:void(0);"><?=__('change slide','cf7-grid-layout')?></a> |
| 206 |
</li> |
| 207 |
<li><?= __('Function: ','cf7-grid-layout')?> |
| 208 |
<a class="helper slider-fields" data-cf72post=" |
| 209 |
// $slider is the slider jquery object. The slide index is 0 based, |
| 210 |
let idx = $slider.sgCurrentSlide();/* get the current slide index. */" href="javascript:void(0);"><?=__('current slide index','cf7-grid-layout')?></a> |
| 211 |
</li> |
| 212 |
</ul> |
| 213 |
</li> |
| 214 |
<li id="field-events" class="show-events"><?=__('Form fields','cf7-grid-layout')?><span>></span> |
| 215 |
<ul> |
| 216 |
<li><?= __('Event: ','cf7-grid-layout')?> |
| 217 |
<a class="helper all-fields" data-cf72post="/* event fired when a field changes value, click to insert helper code into your js file. */ |
| 218 |
$('#cf7sg-form-{$cf7_key} form.wpcf7-form').on( 'change',':input', function(e){ |
| 219 |
let $form = $(e.delegateTarget), $field=$(this), fieldName = $field.attr('name'); |
| 220 |
{$array_field_extraction} |
| 221 |
// $form is the form jquery object. |
| 222 |
// $field is the input field jquery object. |
| 223 |
// |
| 224 |
switch(fieldName){{$list_of_fields}} |
| 225 |
});" href="javascript:void(0);"><?=__('value change','cf7-grid-layout')?></a> |
| 226 |
</li> |
| 227 |
<li><?= __('Function: ','cf7-grid-layout')?> |
| 228 |
<a class="helper all-fields" data-cf72post=" |
| 229 |
// $form is the form jquery object. |
| 230 |
// fieldName is the name of the field you need to retrieve. |
| 231 |
// you can use tab/row indexes to retrieve fields in tabbed sections and/or table structures. |
| 232 |
$field = $form.getCF7field(fieldName);/* function to retrieve a form field. */ |
| 233 |
//if your field is in a tabbed/table structure OR a table within a tabbed section, |
| 234 |
//$form.getCF7field(fieldName, {'row':1,'tab':1}) - retrieves field on row 2 of tab 2. |
| 235 |
//$form.getCF7field(fieldName, {'row':0}) - field on first row OR all first row fields on all tabs. |
| 236 |
//$form.getCF7field(fieldName, {'tab':1}) - field in first tab OR fields of all rows on first tab. |
| 237 |
//$form.getCF7field(fieldName) - field in form OR all fields of all rows on all tabs." href="javascript:void(0);"><?=__('get form field','cf7-grid-layout')?></a> |
| 238 |
</li> |
| 239 |
<li><?= __('Function: ','cf7-grid-layout')?> |
| 240 |
<a class="helper" data-cf72post=" |
| 241 |
//call this function on a jQuery field object to display a dismissible warning/message popup. |
| 242 |
//you can set an optional timeout in ms (1000ms = 1sec), after which the message will be automatically removed without user action. |
| 243 |
$field.cf7sgWarning(message, timeout); /* function to display a dismissible field warning/message. */" href="javascript:void(0);"><?=__('display a message','cf7-grid-layout')?></a> |
| 244 |
</li> |
| 245 |
</ul> |
| 246 |
</li> |
| 247 |
<li id="other-events" class="display-none"><?=__('Others','cf7-grid-layout')?><span>></span> |
| 248 |
<ul> |
| 249 |
<?php do_action('cf7sg_admin_form_editor_jstags_other_items');?> |
| 250 |
</ul> |
| 251 |
</li> |
| 252 |
<li id="last-item"> |
| 253 |
<label for="cf7sg-jstags-comments"> |
| 254 |
<?php |
| 255 |
$checked=' checked=""'; |
| 256 |
if(get_post_meta($post->ID, '_cf7sg_disable_jstags_comments',true)) $checked= ''; |
| 257 |
?> |
| 258 |
<input id="cf7sg-jstags-comments" type="checkbox" name="cf7sg_jstags_comments" value="true"<?=$checked?>/> |
| 259 |
<?=__('Show comments in helper code','cf7-grid-layout')?> |
| 260 |
</label> |
| 261 |
<?php do_action('cf7sg_admin_form_editor_jstags_last_item');?> |
| 262 |
</li> |
| 263 |
</ul> |
| 264 |
|
