| 1 |
<script type="text/x-template" id="tmpl-wpuf-builder-stage"> |
| 2 |
<div id="form-preview-stage" class="wpuf-style"> |
| 3 |
<h4 v-if="!form_fields.length" class="text-center"> |
| 4 |
<?php _e( 'Add fields by dragging the fields from the right sidebar to this area.', 'wp-user-frontend' ); ?> |
| 5 |
</h4> |
| 6 |
|
| 7 |
<ul :class="['wpuf-form', 'sortable-list', 'form-label-' + label_type]"> |
| 8 |
<li |
| 9 |
v-for="(field, index) in form_fields" |
| 10 |
:key="field.id" |
| 11 |
:class="[ |
| 12 |
'field-items', 'wpuf-el', field.name, field.css, 'form-field-' + field.template, |
| 13 |
field.width ? 'field-size-' + field.width : '', |
| 14 |
('custom_hidden_field' === field.template) ? 'hidden-field' : '', |
| 15 |
parseInt(editing_form_id) === parseInt(field.id) ? 'current-editing' : '' |
| 16 |
]" |
| 17 |
:data-index="index" |
| 18 |
data-source="stage" |
| 19 |
> |
| 20 |
<div v-if="!is_full_width(field.template)" class="wpuf-label"> |
| 21 |
<label v-if="!is_invisible(field)" :for="'wpuf-' + field.name ? field.name : 'cls'"> |
| 22 |
{{ field.label }} <span v-if="field.required && 'yes' === field.required" class="required">*</span> |
| 23 |
</label> |
| 24 |
</div> |
| 25 |
|
| 26 |
<component v-if="is_template_available(field)" :is="'form-' + field.template" :field="field"></component> |
| 27 |
|
| 28 |
<div v-if="is_pro_feature(field.template)" class="stage-pro-alert"> |
| 29 |
<label class="wpuf-pro-text-alert"> |
| 30 |
<a :href="pro_link" target="_blank"><strong>{{ get_field_name(field.template) }}</strong> <?php _e( 'is available in Pro Version', 'wp-user-frontend' ); ?></a> |
| 31 |
</label> |
| 32 |
</div> |
| 33 |
|
| 34 |
<div v-if="!is_failed_to_validate(field.template)" class="control-buttons"> |
| 35 |
<p> |
| 36 |
<i class="fa fa-arrows move"></i> |
| 37 |
<i class="fa fa-pencil" @click="open_field_settings(field.id)"></i> |
| 38 |
<i class="fa fa-clone" @click="clone_field(field.id, index)"></i> |
| 39 |
<i class="fa fa-trash-o" @click="delete_field(index)"></i> |
| 40 |
</p> |
| 41 |
</div> |
| 42 |
</li> |
| 43 |
|
| 44 |
<li v-if="!form_fields.length" class="field-items empty-list-item"></li> |
| 45 |
|
| 46 |
<li class="wpuf-submit"> |
| 47 |
<div class="wpuf-label"> </div> |
| 48 |
|
| 49 |
<?php do_action( 'wpuf-form-builder-template-builder-stage-submit-area' ); ?> |
| 50 |
</li> |
| 51 |
</ul><!-- .wpuf-form --> |
| 52 |
|
| 53 |
<div v-if="hidden_fields.length" class="hidden-field-list"> |
| 54 |
<h4><?php esc_html_e( 'Hidden Fields', 'wp-user-frontend' ); ?></h4> |
| 55 |
|
| 56 |
<ul class="wpuf-form"> |
| 57 |
<li |
| 58 |
v-for="(field, index) in hidden_fields" |
| 59 |
:class="['field-items', parseInt(editing_form_id) === parseInt(field.id) ? 'current-editing' : '']" |
| 60 |
> |
| 61 |
<strong><?php esc_html_e( 'key', 'wp-user-frontend' ); ?></strong>: {{ field.name }} | <strong><?php esc_html_e( 'value', 'wp-user-frontend' ); ?></strong>: {{ field.meta_value }} |
| 62 |
|
| 63 |
<div class="control-buttons"> |
| 64 |
<p> |
| 65 |
<i class="fa fa-pencil" @click="open_field_settings(field.id)"></i> |
| 66 |
<i class="fa fa-clone" @click="clone_field(field.id, index)"></i> |
| 67 |
<i class="fa fa-trash-o" @click="delete_hidden_field(field.id)"></i> |
| 68 |
</p> |
| 69 |
</div> |
| 70 |
</li> |
| 71 |
</ul> |
| 72 |
</div> |
| 73 |
|
| 74 |
<?php do_action( 'wpuf-form-builder-template-builder-stage-bottom-area' ); ?> |
| 75 |
</div><!-- #form-preview-stage --> |
| 76 |
</script> |
| 77 |
|
| 78 |
<script type="text/x-template" id="tmpl-wpuf-field-checkbox"> |
| 79 |
<div v-if="met_dependencies" class="panel-field-opt panel-field-opt-checkbox"> |
| 80 |
<label v-if="option_field.title" :class="option_field.title_class"> |
| 81 |
{{ option_field.title }} <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text> |
| 82 |
</label> |
| 83 |
<ul :class="[option_field.inline ? 'list-inline' : '']"> |
| 84 |
<li v-for="(option, key) in option_field.options"> |
| 85 |
<label> |
| 86 |
<input type="checkbox" :value="key" v-model="value"> {{ option }} |
| 87 |
</label> |
| 88 |
</li> |
| 89 |
</ul> |
| 90 |
</div> |
| 91 |
</script> |
| 92 |
|
| 93 |
<script type="text/x-template" id="tmpl-wpuf-field-html_help_text"> |
| 94 |
<div class="panel-field-opt panel-field-html-help-text" v-html="option_field.text"></div> |
| 95 |
</script> |
| 96 |
|
| 97 |
<script type="text/x-template" id="tmpl-wpuf-field-multiselect"> |
| 98 |
<div class="panel-field-opt panel-field-opt-select"> |
| 99 |
<label v-if="option_field.title"> |
| 100 |
{{ option_field.title }} <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text> |
| 101 |
</label> |
| 102 |
|
| 103 |
<select |
| 104 |
:class="['term-list-selector']" |
| 105 |
v-model="value" |
| 106 |
multiple |
| 107 |
> |
| 108 |
<option v-for="(option, key) in option_field.options" :value="key">{{ option }}</option> |
| 109 |
</select> |
| 110 |
</div> |
| 111 |
</script> |
| 112 |
|
| 113 |
<script type="text/x-template" id="tmpl-wpuf-field-option-data"> |
| 114 |
<div class="panel-field-opt panel-field-opt-text"> |
| 115 |
<label class="clearfix"> |
| 116 |
{{ option_field.title }} <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text> |
| 117 |
<span class="pull-right"> |
| 118 |
<input type="checkbox" v-model="show_value"> <?php _e( 'Show values', 'wp-user-frontend' ); ?> |
| 119 |
</span> |
| 120 |
</label> |
| 121 |
|
| 122 |
<ul :class="['option-field-option-chooser', show_value ? 'show-value' : '']"> |
| 123 |
<li class="clearfix margin-0 header"> |
| 124 |
<div class="selector"> </div> |
| 125 |
|
| 126 |
<div class="sort-handler"> </div> |
| 127 |
|
| 128 |
<div class="label"> |
| 129 |
<?php _e( 'Label', 'wp-user-frontend' ); ?> |
| 130 |
</div> |
| 131 |
|
| 132 |
<div v-if="show_value" class="value"> |
| 133 |
<?php _e( 'Value', 'wp-user-frontend' ); ?> |
| 134 |
</div> |
| 135 |
|
| 136 |
<div class="action-buttons"> </div> |
| 137 |
</li> |
| 138 |
</ul> |
| 139 |
|
| 140 |
<ul :class="['option-field-option-chooser margin-0', show_value ? 'show-value' : '']"> |
| 141 |
<li v-for="(option, index) in options" :key="option.id" :data-index="index" class="clearfix option-field-option"> |
| 142 |
<div class="selector"> |
| 143 |
<input |
| 144 |
v-if="option_field.is_multiple" |
| 145 |
type="checkbox" |
| 146 |
:value="option.value" |
| 147 |
v-model="selected" |
| 148 |
> |
| 149 |
<input |
| 150 |
v-else |
| 151 |
type="radio" |
| 152 |
:value="option.value" |
| 153 |
v-model="selected" |
| 154 |
class="option-chooser-radio" |
| 155 |
> |
| 156 |
</div> |
| 157 |
|
| 158 |
<div class="sort-handler"> |
| 159 |
<i class="fa fa-bars"></i> |
| 160 |
</div> |
| 161 |
|
| 162 |
<div class="label"> |
| 163 |
<input type="text" v-model="option.label" @input="set_option_label(index, option.label)"> |
| 164 |
</div> |
| 165 |
|
| 166 |
<div v-if="show_value" class="value"> |
| 167 |
<input type="text" v-model="option.value"> |
| 168 |
</div> |
| 169 |
|
| 170 |
<div class="action-buttons clearfix"> |
| 171 |
<i class="fa fa-minus-circle" @click="delete_option(index)"></i> |
| 172 |
</div> |
| 173 |
</li> |
| 174 |
<li> |
| 175 |
<div class="plus-buttons clearfix" @click="add_option"> |
| 176 |
<i class="fa fa-plus-circle"></i> |
| 177 |
</div> |
| 178 |
</li> |
| 179 |
</ul> |
| 180 |
|
| 181 |
<a v-if="!option_field.is_multiple && selected" href="#clear" @click.prevent="clear_selection"><?php _e( 'Clear Selection', 'wp-user-frontend' ); ?></a> |
| 182 |
</div> |
| 183 |
</script> |
| 184 |
|
| 185 |
<script type="text/x-template" id="tmpl-wpuf-field-option-pro-feature-alert"> |
| 186 |
<div class="panel-field-opt panel-field-opt-pro-feature"> |
| 187 |
<label>{{ option_field.title }}</label><br> |
| 188 |
<label class="wpuf-pro-text-alert"> |
| 189 |
<a :href="pro_link" target="_blank"><?php _e( 'Available in Pro Version', 'wp-user-frontend' ); ?></a> |
| 190 |
</label> |
| 191 |
</div> |
| 192 |
</script> |
| 193 |
|
| 194 |
<script type="text/x-template" id="tmpl-wpuf-field-options"> |
| 195 |
<div class="wpuf-form-builder-field-options"> |
| 196 |
<div v-if="!parseInt(editing_field_id)" class="options-fileds-section text-center"> |
| 197 |
<p> |
| 198 |
<span class="loader"></span> |
| 199 |
</p> |
| 200 |
</div> |
| 201 |
|
| 202 |
<div v-else> |
| 203 |
<div class="option-fields-section"> |
| 204 |
<h3 class="section-title clearfix" @click="show_basic_settings = !show_basic_settings"> |
| 205 |
{{ form_field_type_title }} <i :class="[show_basic_settings ? 'fa fa-angle-down' : 'fa fa-angle-right']"></i> |
| 206 |
</h3> |
| 207 |
|
| 208 |
<transition name="slide-fade"> |
| 209 |
<div v-show="show_basic_settings" class="option-field-section-fields"> |
| 210 |
<component |
| 211 |
v-for="option_field in basic_settings" |
| 212 |
:key="option_field.name" |
| 213 |
:is="'field-' + option_field.type" |
| 214 |
:option_field="option_field" |
| 215 |
:editing_form_field="editing_form_field" |
| 216 |
></component> |
| 217 |
</div> |
| 218 |
</transition> |
| 219 |
</div> |
| 220 |
|
| 221 |
|
| 222 |
<div v-if="advanced_settings.length" class="option-fields-section"> |
| 223 |
<h3 class="section-title" @click="show_advanced_settings = !show_advanced_settings"> |
| 224 |
{{ i18n.advanced_options }} <i :class="[show_advanced_settings ? 'fa fa-angle-down' : 'fa fa-angle-right']"></i> |
| 225 |
</h3> |
| 226 |
|
| 227 |
<transition name="slide-fade"> |
| 228 |
<div v-show="show_advanced_settings" class="option-field-section-fields"> |
| 229 |
<component |
| 230 |
v-for="option_field in advanced_settings" |
| 231 |
:key="option_field.name" |
| 232 |
:is="'field-' + option_field.type" |
| 233 |
:option_field="option_field" |
| 234 |
:editing_form_field="editing_form_field" |
| 235 |
></component> |
| 236 |
</div> |
| 237 |
</transition> |
| 238 |
</div> |
| 239 |
|
| 240 |
<?php do_action( 'wpuf_builder_field_options' ); ?> |
| 241 |
</div> |
| 242 |
|
| 243 |
</div> |
| 244 |
</script> |
| 245 |
|
| 246 |
<script type="text/x-template" id="tmpl-wpuf-field-radio"> |
| 247 |
<div class="panel-field-opt panel-field-opt-radio"> |
| 248 |
<label v-if="option_field.title"> |
| 249 |
{{ option_field.title }} <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text> |
| 250 |
</label> |
| 251 |
|
| 252 |
<ul :class="[option_field.inline ? 'list-inline' : '']"> |
| 253 |
<li v-for="(option, key) in option_field.options"> |
| 254 |
<label> |
| 255 |
<input type="radio" :value="key" v-model="value"> {{ option }} |
| 256 |
</label> |
| 257 |
</li> |
| 258 |
</ul> |
| 259 |
</div> |
| 260 |
</script> |
| 261 |
|
| 262 |
<script type="text/x-template" id="tmpl-wpuf-field-range"> |
| 263 |
<div v-if="met_dependencies" class="panel-field-opt panel-field-opt-text"> |
| 264 |
<label> |
| 265 |
{{ option_field.title }} <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text> |
| 266 |
{{ option_field.min_column }} |
| 267 |
<input |
| 268 |
type="range" |
| 269 |
v-model="value" |
| 270 |
v-bind:min="minColumn" |
| 271 |
v-bind:max="maxColumn" |
| 272 |
> |
| 273 |
</label> |
| 274 |
</div> |
| 275 |
</script> |
| 276 |
|
| 277 |
<script type="text/x-template" id="tmpl-wpuf-field-select"> |
| 278 |
<div class="panel-field-opt panel-field-opt-select"> |
| 279 |
<label v-if="option_field.title"> |
| 280 |
{{ option_field.title }} <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text> |
| 281 |
</label> |
| 282 |
|
| 283 |
<select class="opt-select-element" v-model="value"> |
| 284 |
<option value=""><?php _e( 'Select an option', 'wp-user-frontend' ); ?></option> |
| 285 |
<option v-for="(option, key) in option_field.options" :value="key">{{ option }}</option> |
| 286 |
</select> |
| 287 |
</div> |
| 288 |
</script> |
| 289 |
|
| 290 |
<script type="text/x-template" id="tmpl-wpuf-field-text"> |
| 291 |
<div v-if="met_dependencies" class="panel-field-opt panel-field-opt-text"> |
| 292 |
<label> |
| 293 |
{{ option_field.title }} <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text> |
| 294 |
|
| 295 |
<input |
| 296 |
v-if="option_field.variation && 'number' === option_field.variation" |
| 297 |
type="number" |
| 298 |
v-model="value" |
| 299 |
@focusout="on_focusout" |
| 300 |
@keyup="on_keyup" |
| 301 |
> |
| 302 |
|
| 303 |
<input |
| 304 |
v-if="!option_field.variation" |
| 305 |
type="text" |
| 306 |
v-model="value" |
| 307 |
@focusout="on_focusout" |
| 308 |
@keyup="on_keyup" |
| 309 |
> |
| 310 |
</label> |
| 311 |
</div> |
| 312 |
</script> |
| 313 |
|
| 314 |
<script type="text/x-template" id="tmpl-wpuf-field-text-meta"> |
| 315 |
<div class="panel-field-opt panel-field-opt-text panel-field-opt-text-meta"> |
| 316 |
<label> |
| 317 |
{{ option_field.title }} <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text> |
| 318 |
<input |
| 319 |
type="text" |
| 320 |
v-model="value" |
| 321 |
> |
| 322 |
</label> |
| 323 |
</div> |
| 324 |
</script> |
| 325 |
|
| 326 |
<script type="text/x-template" id="tmpl-wpuf-field-textarea"> |
| 327 |
<div class="panel-field-opt panel-field-opt-textarea"> |
| 328 |
<label> |
| 329 |
{{ option_field.title }} <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text> |
| 330 |
|
| 331 |
<textarea :rows="option_field.rows || 5" v-model="value"></textarea> |
| 332 |
</label> |
| 333 |
</div> |
| 334 |
</script> |
| 335 |
|
| 336 |
<script type="text/x-template" id="tmpl-wpuf-field-visibility"> |
| 337 |
<div class="panel-field-opt panel-field-opt-radio"> |
| 338 |
<label v-if="option_field.title"> |
| 339 |
{{ option_field.title }} <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text> |
| 340 |
</label> |
| 341 |
|
| 342 |
<ul :class="[option_field.inline ? 'list-inline' : '']"> |
| 343 |
<li v-for="(option, key) in option_field.options"> |
| 344 |
<label> |
| 345 |
<input type="radio" :value="key" v-model="selected"> {{ option }} |
| 346 |
</label> |
| 347 |
</li> |
| 348 |
</ul> |
| 349 |
|
| 350 |
<div v-if="'logged_in' === selected" class="condiotional-logic-container"> |
| 351 |
|
| 352 |
<?php $roles = get_editable_roles(); ?> |
| 353 |
|
| 354 |
<ul> |
| 355 |
<?php |
| 356 |
foreach ( $roles as $role => $value ) { |
| 357 |
$role_name = $value['name']; |
| 358 |
|
| 359 |
$output = '<li>'; |
| 360 |
$output .= "<label><input type='checkbox' v-model='choices' value='{$role}'> {$role_name} </label>"; |
| 361 |
$output .= '</li>'; |
| 362 |
|
| 363 |
echo $output; |
| 364 |
} |
| 365 |
?> |
| 366 |
</ul> |
| 367 |
</div> |
| 368 |
|
| 369 |
<div v-if="'subscribed_users' === selected" class="condiotional-logic-container"> |
| 370 |
|
| 371 |
<ul> |
| 372 |
<?php |
| 373 |
|
| 374 |
if ( class_exists( 'WPUF_Subscription' ) ) { |
| 375 |
$subscriptions = WPUF_Subscription::init()->get_subscriptions(); |
| 376 |
|
| 377 |
if ( $subscriptions ) { |
| 378 |
foreach ( $subscriptions as $pack ) { |
| 379 |
$output = '<li>'; |
| 380 |
$output .= "<label><input type='checkbox' v-model='choices' value='{$pack->ID}' > {$pack->post_title} </label>"; |
| 381 |
$output .= '</li>'; |
| 382 |
|
| 383 |
echo $output; |
| 384 |
} |
| 385 |
} else { |
| 386 |
_e( 'No subscription plan found.', 'wp-user-frontend' ); |
| 387 |
} |
| 388 |
} |
| 389 |
?> |
| 390 |
</ul> |
| 391 |
|
| 392 |
</div> |
| 393 |
</div></script> |
| 394 |
|
| 395 |
<script type="text/x-template" id="tmpl-wpuf-form-checkbox_field"> |
| 396 |
<div class="wpuf-fields"> |
| 397 |
<ul :class="['wpuf-fields-list', ('yes' === field.inline) ? 'wpuf-list-inline' : '']"> |
| 398 |
<li v-if="has_options" v-for="(label, val) in field.options"> |
| 399 |
<label> |
| 400 |
<input |
| 401 |
type="checkbox" |
| 402 |
:value="val" |
| 403 |
:checked="is_selected(val)" |
| 404 |
:class="class_names('checkbox_btns')" |
| 405 |
> {{ label }} |
| 406 |
</label> |
| 407 |
</li> |
| 408 |
</ul> |
| 409 |
|
| 410 |
<span v-if="field.help" class="wpuf-help">{{ field.help }}</span> |
| 411 |
</div> |
| 412 |
</script> |
| 413 |
|
| 414 |
<script type="text/x-template" id="tmpl-wpuf-form-column_field"> |
| 415 |
<div v-bind:class="['wpuf-field-columns', 'has-columns-'+field.columns]"> |
| 416 |
<div class="wpuf-column-field-inner-columns"> |
| 417 |
<div class="wpuf-column"> |
| 418 |
<!-- don't change column class names --> |
| 419 |
<div v-for="column in columnClasses" :class="[column, 'items-of-column-'+field.columns, 'wpuf-column-inner-fields']" :style="{ width: field.inner_columns_size[column], paddingRight: field.column_space+'px'}"> |
| 420 |
<ul class="wpuf-column-fields-sortable-list"> |
| 421 |
<li |
| 422 |
v-for="(field, index) in column_fields[column]" |
| 423 |
:key="field.id" |
| 424 |
:class="[ |
| 425 |
'column-field-items', 'wpuf-el', field.name, field.css, 'form-field-' + field.template, |
| 426 |
field.width ? 'field-size-' + field.width : '', |
| 427 |
parseInt(editing_form_id) === parseInt(field.id) ? 'current-editing' : '' |
| 428 |
]" |
| 429 |
:column-field-index="index" |
| 430 |
:in-column="column" |
| 431 |
data-source="column-field-stage" |
| 432 |
> |
| 433 |
<div v-if="!is_full_width(field.template)" class="wpuf-label wpuf-column-field-label"> |
| 434 |
<label v-if="!is_invisible(field)" :for="'wpuf-' + field.name ? field.name : 'cls'"> |
| 435 |
{{ field.label }} <span v-if="field.required && 'yes' === field.required" class="required">*</span> |
| 436 |
</label> |
| 437 |
</div> |
| 438 |
|
| 439 |
<component v-if="is_template_available(field)" :is="'form-' + field.template" :field="field"></component> |
| 440 |
|
| 441 |
<div v-if="is_pro_feature(field.template)" class="stage-pro-alert"> |
| 442 |
<label class="wpuf-pro-text-alert"> |
| 443 |
<a :href="pro_link" target="_blank"><strong>{{ get_field_name(field.template) }}</strong> <?php _e( 'is available in Pro Version', 'wp-user-frontend' ); ?></a> |
| 444 |
</label> |
| 445 |
</div> |
| 446 |
|
| 447 |
<div class="wpuf-column-field-control-buttons"> |
| 448 |
<p> |
| 449 |
<i class="fa fa-arrows move"></i> |
| 450 |
<i class="fa fa-pencil" @click="open_column_field_settings(field, index, column)"></i> |
| 451 |
<i class="fa fa-clone" @click="clone_column_field(field, index, column)"></i> |
| 452 |
<i class="fa fa-trash-o" @click="delete_column_field(index, column)"></i> |
| 453 |
</p> |
| 454 |
</div> |
| 455 |
</li> |
| 456 |
|
| 457 |
</ul> |
| 458 |
</div> |
| 459 |
</div> |
| 460 |
</div> |
| 461 |
</div></script> |
| 462 |
|
| 463 |
<script type="text/x-template" id="tmpl-wpuf-form-custom_hidden_field"> |
| 464 |
<div class="wpuf-fields"> |
| 465 |
<input |
| 466 |
type="text" |
| 467 |
:class="class_names('textfield')" |
| 468 |
:placeholder="field.placeholder" |
| 469 |
:value="field.default" |
| 470 |
:size="field.size" |
| 471 |
> |
| 472 |
<span v-if="field.help" class="wpuf-help">{{ field.help }}</span> |
| 473 |
</div> |
| 474 |
</script> |
| 475 |
|
| 476 |
<script type="text/x-template" id="tmpl-wpuf-form-custom_html"> |
| 477 |
<div class="wpuf-fields" v-html="field.html"></div> |
| 478 |
</script> |
| 479 |
|
| 480 |
<script type="text/x-template" id="tmpl-wpuf-form-dropdown_field"> |
| 481 |
<div class="wpuf-fields"> |
| 482 |
<select |
| 483 |
:class="class_names('select_lbl')" |
| 484 |
> |
| 485 |
<option v-if="field.first" value="">{{ field.first }}</option> |
| 486 |
|
| 487 |
<option |
| 488 |
v-if="has_options" |
| 489 |
v-for="(label, val) in field.options" |
| 490 |
:value="label" |
| 491 |
:selected="is_selected(label)" |
| 492 |
>{{ label }}</option> |
| 493 |
</select> |
| 494 |
|
| 495 |
<span v-if="field.help" class="wpuf-help">{{ field.help }}</span> |
| 496 |
</div> |
| 497 |
</script> |
| 498 |
|
| 499 |
<script type="text/x-template" id="tmpl-wpuf-form-email_address"> |
| 500 |
<div class="wpuf-fields"> |
| 501 |
<input |
| 502 |
type="email" |
| 503 |
:class="class_names('email')" |
| 504 |
:placeholder="field.placeholder" |
| 505 |
:value="field.default" |
| 506 |
:size="field.size" |
| 507 |
> |
| 508 |
<span v-if="field.help" class="wpuf-help">{{ field.help }}</span> |
| 509 |
</div> |
| 510 |
</script> |
| 511 |
|
| 512 |
<script type="text/x-template" id="tmpl-wpuf-form-featured_image"> |
| 513 |
<div class="wpuf-fields"> |
| 514 |
<div :id="'wpuf-img_label-' + field.id + '-upload-container'"> |
| 515 |
<div class="wpuf-attachment-upload-filelist" data-type="file" data-required="yes"> |
| 516 |
<a class="button file-selector" href="#"> |
| 517 |
<template v-if="field.button_label === ''"> |
| 518 |
<?php _e( 'Select Image', 'wp-user-frontend' ); ?> |
| 519 |
</template> |
| 520 |
<template v-else> |
| 521 |
{{ field.button_label }} |
| 522 |
</template> |
| 523 |
</a> |
| 524 |
</div> |
| 525 |
</div> |
| 526 |
|
| 527 |
<span v-if="field.help" class="wpuf-help">{{ field.help }}</span> |
| 528 |
</div> |
| 529 |
</script> |
| 530 |
|
| 531 |
<script type="text/x-template" id="tmpl-wpuf-form-fields"> |
| 532 |
<div class="wpuf-form-builder-form-fields"> |
| 533 |
<template v-for="(section, index) in panel_sections"> |
| 534 |
<div v-if="section.fields.length" class="panel-form-field-group clearfix"> |
| 535 |
<h3 class="clearfix" @click="panel_toggle(index)"> |
| 536 |
{{ section.title }} <i :class="[section.show ? 'fa fa-angle-down' : 'fa fa-angle-right']"></i> |
| 537 |
</h3> |
| 538 |
|
| 539 |
<transition name="slide-fade"> |
| 540 |
<ul |
| 541 |
v-show="section.show" |
| 542 |
class="panel-form-field-buttons clearfix" |
| 543 |
:id="'panel-form-field-buttons-' + section.id" |
| 544 |
> |
| 545 |
<template v-for="field in section.fields"> |
| 546 |
<li |
| 547 |
v-if="is_pro_feature(field)" |
| 548 |
class="button button-faded" |
| 549 |
:data-form-field="field" |
| 550 |
data-source="panel" |
| 551 |
@click="alert_pro_feature(field)" |
| 552 |
> |
| 553 |
<i v-if="field_settings[field].icon" :class="['fa fa-' + field_settings[field].icon]" aria-hidden="true"></i> {{ field_settings[field].title }} |
| 554 |
</li> |
| 555 |
|
| 556 |
<li |
| 557 |
v-if="is_failed_to_validate(field)" |
| 558 |
:class="['button', get_invalidate_btn_class(field)]" |
| 559 |
:data-form-field="field" |
| 560 |
data-source="panel" |
| 561 |
@click="alert_invalidate_msg(field)" |
| 562 |
> |
| 563 |
<i v-if="field_settings[field].icon" :class="['fa fa-' + field_settings[field].icon]" aria-hidden="true"></i> {{ field_settings[field].title }} |
| 564 |
</li> |
| 565 |
|
| 566 |
<li |
| 567 |
v-if="!is_pro_feature(field) && !is_failed_to_validate(field)" |
| 568 |
class="button" |
| 569 |
:data-form-field="field" |
| 570 |
data-source="panel" |
| 571 |
@click="add_form_field(field)" |
| 572 |
> |
| 573 |
<i v-if="field_settings[field].icon" :class="['fa fa-' + field_settings[field].icon]" aria-hidden="true"></i> {{ field_settings[field].title }} |
| 574 |
</li> |
| 575 |
</template> |
| 576 |
</ul> |
| 577 |
</transition> |
| 578 |
</div> |
| 579 |
</template> |
| 580 |
</div> |
| 581 |
</script> |
| 582 |
|
| 583 |
<script type="text/x-template" id="tmpl-wpuf-form-image_upload"> |
| 584 |
<div class="wpuf-fields"> |
| 585 |
<div :id="'wpuf-img_label-' + field.id + '-upload-container'"> |
| 586 |
<div class="wpuf-attachment-upload-filelist" data-type="file" data-required="yes"> |
| 587 |
<a class="button file-selector wpuf_img_label_148" href="#"> |
| 588 |
<template v-if="field.button_label === ''"> |
| 589 |
<?php _e( 'Select Image', 'wp-user-frontend' ); ?> |
| 590 |
</template> |
| 591 |
<template v-else> |
| 592 |
{{ field.button_label }} |
| 593 |
</template> |
| 594 |
</a> |
| 595 |
</div> |
| 596 |
</div> |
| 597 |
|
| 598 |
<span v-if="field.help" class="wpuf-help">{{ field.help }}</span> |
| 599 |
</div> |
| 600 |
</script> |
| 601 |
|
| 602 |
<script type="text/x-template" id="tmpl-wpuf-form-multiple_select"> |
| 603 |
<div class="wpuf-fields"> |
| 604 |
<select |
| 605 |
:class="class_names('multi_label')" |
| 606 |
multiple |
| 607 |
> |
| 608 |
<option v-if="field.first" value="">{{ field.first }}</option> |
| 609 |
|
| 610 |
<option |
| 611 |
v-if="has_options" |
| 612 |
v-for="(label, val) in field.options" |
| 613 |
:value="label" |
| 614 |
:selected="is_selected(label)" |
| 615 |
>{{ label }}</option> |
| 616 |
</select> |
| 617 |
|
| 618 |
<span v-if="field.help" class="wpuf-help">{{ field.help }}</span> |
| 619 |
</div> |
| 620 |
</script> |
| 621 |
|
| 622 |
<script type="text/x-template" id="tmpl-wpuf-form-post_content"> |
| 623 |
<div class="wpuf-fields"> |
| 624 |
<div class="wp-media-buttons" v-if="field.insert_image == 'yes'"> |
| 625 |
<button type="button" class="button insert-media add_media" data-editor="content"> |
| 626 |
<span class="dashicons dashicons-admin-media insert-photo-icon"></span> <?php _e( 'Insert Photo', 'wp-user-frontend' ); ?> |
| 627 |
</button> |
| 628 |
</div> |
| 629 |
<br v-if="field.insert_image == 'yes'" /> |
| 630 |
|
| 631 |
<textarea |
| 632 |
v-if="'no' === field.rich" |
| 633 |
:class="class_names('textareafield')" |
| 634 |
:placeholder="field.placeholder" |
| 635 |
:default_text="field.default" |
| 636 |
:rows="field.rows" |
| 637 |
:cols="field.cols" |
| 638 |
>{{ field.default }}</textarea> |
| 639 |
|
| 640 |
<text-editor v-if="'no' !== field.rich" :rich="field.rich" :default_text="field.default"></text-editor> |
| 641 |
|
| 642 |
<span v-if="field.help" class="wpuf-help">{{ field.help }}</span> |
| 643 |
</div> |
| 644 |
</script> |
| 645 |
|
| 646 |
<script type="text/x-template" id="tmpl-wpuf-form-post_excerpt"> |
| 647 |
<div class="wpuf-fields"> |
| 648 |
<textarea |
| 649 |
:class="class_names('textareafield')" |
| 650 |
:placeholder="field.placeholder" |
| 651 |
:rows="field.rows" |
| 652 |
:cols="field.cols" |
| 653 |
>{{ field.default }}</textarea> |
| 654 |
<span v-if="field.help" class="wpuf-help">{{ field.help }}</span> |
| 655 |
</div> |
| 656 |
</script> |
| 657 |
|
| 658 |
<script type="text/x-template" id="tmpl-wpuf-form-post_tags"> |
| 659 |
<div class="wpuf-fields"> |
| 660 |
<input |
| 661 |
type="text" |
| 662 |
:class="class_names('textfield')" |
| 663 |
:placeholder="field.placeholder" |
| 664 |
:value="field.default" |
| 665 |
:size="field.size" |
| 666 |
> |
| 667 |
|
| 668 |
<span v-if="field.help" class="wpuf-help">{{ field.help }}</span> |
| 669 |
</div> |
| 670 |
</script> |
| 671 |
|
| 672 |
<script type="text/x-template" id="tmpl-wpuf-form-post_title"> |
| 673 |
<div class="wpuf-fields"> |
| 674 |
<input |
| 675 |
type="text" |
| 676 |
:class="class_names('textfield')" |
| 677 |
:placeholder="field.placeholder" |
| 678 |
:value="field.default" |
| 679 |
:size="field.size" |
| 680 |
> |
| 681 |
<span v-if="field.help" class="wpuf-help">{{ field.help }}</span> |
| 682 |
</div> |
| 683 |
</script> |
| 684 |
|
| 685 |
<script type="text/x-template" id="tmpl-wpuf-form-radio_field"> |
| 686 |
<div class="wpuf-fields"> |
| 687 |
<ul :class="['wpuf-fields-list', ('yes' === field.inline) ? 'wpuf-list-inline' : '']"> |
| 688 |
<li v-if="has_options" v-for="(label, val) in field.options"> |
| 689 |
<label> |
| 690 |
<input |
| 691 |
type="radio" |
| 692 |
:value="val" |
| 693 |
:checked="is_selected(val)" |
| 694 |
:class="class_names('radio_btns')" |
| 695 |
> {{ label }} |
| 696 |
</label> |
| 697 |
</li> |
| 698 |
</ul> |
| 699 |
|
| 700 |
<span v-if="field.help" class="wpuf-help">{{ field.help }}</span> |
| 701 |
</div> |
| 702 |
</script> |
| 703 |
|
| 704 |
<script type="text/x-template" id="tmpl-wpuf-form-recaptcha"> |
| 705 |
<div class="wpuf-fields"> |
| 706 |
<template v-if="!has_recaptcha_api_keys"> |
| 707 |
<p v-html="no_api_keys_msg"></p> |
| 708 |
</template> |
| 709 |
|
| 710 |
<template v-else> |
| 711 |
<div v-if="'invisible_recaptcha' != field.recaptcha_type"> |
| 712 |
<img class="wpuf-recaptcha-placeholder" src="<?php echo WPUF_ASSET_URI . '/images/recaptcha-placeholder.png'; ?>" alt=""> |
| 713 |
</div> |
| 714 |
<div v-else><p><?php _e( 'Invisible reCaptcha', 'wp-user-frontend' ); ?></p></div> |
| 715 |
</template> |
| 716 |
</div> |
| 717 |
</script> |
| 718 |
|
| 719 |
<script type="text/x-template" id="tmpl-wpuf-form-section_break"> |
| 720 |
<div class="wpuf-section-wrap"> |
| 721 |
<h2 class="wpuf-section-title">{{ field.label }}</h2> |
| 722 |
<div class="wpuf-section-details">{{ field.description }}</div> |
| 723 |
</div> |
| 724 |
</script> |
| 725 |
|
| 726 |
<script type="text/x-template" id="tmpl-wpuf-form-taxonomy"> |
| 727 |
<div class="wpuf-fields"> |
| 728 |
<select |
| 729 |
:class="field.name" |
| 730 |
v-html ="get_term_dropdown_options()" |
| 731 |
> |
| 732 |
</select> |
| 733 |
|
| 734 |
<div v-if="'ajax' === field.type" class="category-wrap"> |
| 735 |
<div> |
| 736 |
<select> |
| 737 |
<option><?php _e( '— Select —', 'wp-user-frontend' ); ?></option> |
| 738 |
<option v-for="term in sorted_terms" :value="term.id">{{ term.name }}</option> |
| 739 |
</select> |
| 740 |
</div> |
| 741 |
</div> |
| 742 |
|
| 743 |
<div v-if="'multiselect' === field.type" class="category-wrap"> |
| 744 |
<select |
| 745 |
:class="field.name" |
| 746 |
v-html="get_term_dropdown_options()" |
| 747 |
multiple |
| 748 |
> |
| 749 |
</select> |
| 750 |
</div> |
| 751 |
|
| 752 |
<div v-if="'checkbox' === field.type" class="category-wrap"> |
| 753 |
<div v-if="'yes' === field.show_inline" class="category-wrap"> |
| 754 |
<div v-html="get_term_checklist_inline()"></div> |
| 755 |
</div> |
| 756 |
<div v-else-if="'no' === field.show_inline" class="category-wrap"> |
| 757 |
<div v-html="get_term_checklist()"></div> |
| 758 |
</div> |
| 759 |
</div> |
| 760 |
|
| 761 |
|
| 762 |
<input |
| 763 |
v-if="'text' === field.type" |
| 764 |
class="textfield" |
| 765 |
type="text" |
| 766 |
value="" |
| 767 |
size="40" |
| 768 |
autocomplete="off" |
| 769 |
> |
| 770 |
|
| 771 |
<span v-if="field.help" class="wpuf-help">{{ field.help }}</span> |
| 772 |
</div> |
| 773 |
</script> |
| 774 |
|
| 775 |
<script type="text/x-template" id="tmpl-wpuf-form-text_field"> |
| 776 |
<div class="wpuf-fields"> |
| 777 |
<input |
| 778 |
type="text" |
| 779 |
:class="class_names('textfield')" |
| 780 |
:placeholder="field.placeholder" |
| 781 |
:value="field.default" |
| 782 |
:size="field.size" |
| 783 |
> |
| 784 |
<span v-if="field.help" class="wpuf-help">{{ field.help }}</span> |
| 785 |
</div> |
| 786 |
</script> |
| 787 |
|
| 788 |
<script type="text/x-template" id="tmpl-wpuf-form-textarea_field"> |
| 789 |
<div class="wpuf-fields"> |
| 790 |
<textarea |
| 791 |
v-if="'no' === field.rich" |
| 792 |
:class="class_names('textareafield')" |
| 793 |
:placeholder="field.placeholder" |
| 794 |
:deault="field.default" |
| 795 |
:rows="field.rows" |
| 796 |
:cols="field.cols" |
| 797 |
>{{ field.default }}</textarea> |
| 798 |
|
| 799 |
<text-editor v-if="'no' !== field.rich" :default_text="field.default" :rich="field.rich"></text-editor> |
| 800 |
|
| 801 |
<span v-if="field.help" class="wpuf-help">{{ field.help }}</span> |
| 802 |
</div> |
| 803 |
</script> |
| 804 |
|
| 805 |
<script type="text/x-template" id="tmpl-wpuf-form-website_url"> |
| 806 |
<div class="wpuf-fields"> |
| 807 |
<input |
| 808 |
type="url" |
| 809 |
:class="class_names('url')" |
| 810 |
:placeholder="field.placeholder" |
| 811 |
:value="field.default" |
| 812 |
:size="field.size" |
| 813 |
> |
| 814 |
<span v-if="field.help" class="wpuf-help">{{ field.help }}</span> |
| 815 |
</div> |
| 816 |
</script> |
| 817 |
|
| 818 |
<script type="text/x-template" id="tmpl-wpuf-help-text"> |
| 819 |
<i class="fa fa-question-circle field-helper-text wpuf-tooltip" data-placement="top" :title="text"></i> |
| 820 |
</script> |
| 821 |
|
| 822 |
<script type="text/x-template" id="tmpl-wpuf-text-editor"> |
| 823 |
<div class="wpuf-text-editor"> |
| 824 |
|
| 825 |
<div class="wp-core-ui wp-editor-wrap tmce-active"> |
| 826 |
<link rel="stylesheet" :href="site_url + 'wp-includes/css/editor.css'" type="text/css" media="all"> |
| 827 |
<link rel="stylesheet" :href="site_url + 'wp-includes/js/tinymce/skins/lightgray/skin.min.css'" type="text/css" media="all"> |
| 828 |
|
| 829 |
<div class="wp-editor-container"> |
| 830 |
<div class="mce-tinymce mce-container mce-panel" style="visibility: hidden; border-width: 1px;"> |
| 831 |
<div class="mce-container-body mce-stack-layout"> |
| 832 |
<div class="mce-toolbar-grp mce-container mce-panel mce-stack-layout-item"> |
| 833 |
<div class="mce-container-body mce-stack-layout"> |
| 834 |
<div class="mce-container mce-toolbar mce-stack-layout-item"> |
| 835 |
<div class="mce-container-body mce-flow-layout"> |
| 836 |
<div class="mce-container mce-flow-layout-item mce-btn-group"> |
| 837 |
<div> |
| 838 |
<div v-if="is_full" class="mce-widget mce-btn mce-menubtn mce-fixed-width mce-listbox mce-btn-has-text"><button type="button"><span class="mce-txt">Paragraph</span> <i class="mce-caret"></i></button></div> |
| 839 |
<div class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-bold"></i></button></div> |
| 840 |
<div class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-italic"></i></button></div> |
| 841 |
<div class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-bullist"></i></button></div> |
| 842 |
<div class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-numlist"></i></button></div> |
| 843 |
<div class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-blockquote"></i></button></div> |
| 844 |
<div class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-alignleft"></i></button></div> |
| 845 |
<div class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-aligncenter"></i></button></div> |
| 846 |
<div class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-alignright"></i></button></div> |
| 847 |
<div class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-link"></i></button></div> |
| 848 |
<div class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-unlink"></i></button></div> |
| 849 |
<div v-if="is_full" class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-wp_more"></i></button></div> |
| 850 |
<div class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-fullscreen"></i></button></div> |
| 851 |
<div v-if="is_full" class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-wp_adv"></i></button></div> |
| 852 |
</div> |
| 853 |
</div> |
| 854 |
</div> |
| 855 |
</div> |
| 856 |
<div class="mce-container mce-toolbar mce-stack-layout-item"> |
| 857 |
<div class="mce-container-body mce-flow-layout"> |
| 858 |
<div class="mce-container mce-flow-layout-item mce-btn-group"> |
| 859 |
<div> |
| 860 |
<div v-if="is_full" class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-strikethrough"></i></button></div> |
| 861 |
<div v-if="is_full" class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-hr"></i></button></div> |
| 862 |
<div v-if="is_full" class="mce-widget mce-btn mce-colorbutton"><button type="button"><i class="mce-ico mce-i-forecolor"></i><span class="mce-preview"></span></button><button type="button" class="mce-open"> <i class="mce-caret"></i></button></div> |
| 863 |
<div v-if="is_full" class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-pastetext"></i></button></div> |
| 864 |
<div v-if="is_full" class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-removeformat"></i></button></div> |
| 865 |
<div v-if="is_full" class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-charmap"></i></button></div> |
| 866 |
<div v-if="is_full" class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-outdent"></i></button></div> |
| 867 |
<div v-if="is_full" class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-indent"></i></button></div> |
| 868 |
<div class="mce-widget mce-btn mce-disabled"><button type="button"><i class="mce-ico mce-i-undo"></i></button></div> |
| 869 |
<div class="mce-widget mce-btn mce-disabled"><button type="button"><i class="mce-ico mce-i-redo"></i></button></div> |
| 870 |
<div v-if="is_full" class="mce-widget mce-btn"><button type="button"><i class="mce-ico mce-i-wp_help"></i></button></div> |
| 871 |
</div> |
| 872 |
</div> |
| 873 |
</div> |
| 874 |
</div> |
| 875 |
</div> |
| 876 |
</div> |
| 877 |
<div class="mce-edit-area mce-container mce-panel mce-stack-layout-item" style="border-width: 1px 0px 0px;"> |
| 878 |
<div style="width: 100%; height: 150px; display: block;">{{default_text}}</div><!-- iframe replacement div --> |
| 879 |
</div> |
| 880 |
<div class="mce-statusbar mce-container mce-panel mce-stack-layout-item" style="border-width: 1px 0px 0px;"> |
| 881 |
<div class="mce-container-body mce-flow-layout"> |
| 882 |
<div class="mce-path mce-flow-layout-item"> |
| 883 |
<div class="mce-path-item" data-index="0" aria-level="0">p</div> |
| 884 |
</div> |
| 885 |
<div class="mce-flow-layout-item mce-resizehandle"><i class="mce-ico mce-i-resize"></i></div> |
| 886 |
</div> |
| 887 |
</div> |
| 888 |
</div> |
| 889 |
</div> |
| 890 |
</div> |
| 891 |
</div> |
| 892 |
</div> |
| 893 |
</script> |
| 894 |
|
