1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
<?php
/**
* Template for displaying the customtabs field
*
* @var array $field The field.
* @package YITH\PluginFramework\Templates\Fields
*/
defined( 'ABSPATH' ) || exit; // Exit if accessed directly.
list ( $name, $value ) = yith_plugin_fw_extract( $field, 'name', 'value' );
$value = ! ! $value && is_array( $value ) ? $value : array();
?>
<div id="yit_custom_tabs" class="panel wc-metaboxes-wrapper" style="display: block;">
<p class="toolbar">
<a href="#" class="close_all"><?php esc_html_e( 'Close all', 'yith-plugin-fw' ); ?></a><a href="#" class="expand_all"><?php esc_html_e( 'Expand all', 'yith-plugin-fw' ); ?></a>
</p>
<div class="yit_custom_tabs wc-metaboxes ui-sortable">
<?php foreach ( $value as $i => $the_tab ) : ?>
<div class="yit_custom_tab wc-metabox closed" rel="0">
<h3>
<button type="button" class="remove_row button"><?php esc_html_e( 'Remove', 'yith-plugin-fw' ); ?></button>
<div class="handlediv" title="Click to toggle"></div>
<strong class="attribute_name"><?php echo esc_html( $the_tab['name'] ); ?></strong>
</h3>
<table cellpadding="0" cellspacing="0" class="woocommerce_attribute_data wc-metabox-content" style="display: table;">
<tbody>
<tr>
<td class="attribute_name">
<label><?php esc_html_e( 'Name', 'yith-plugin-fw' ); ?>:</label>
<input type="text" class="attribute_name" name="<?php echo esc_attr( $name ); ?>[<?php echo esc_attr( $i ); ?>][name]" value="<?php echo esc_attr( $the_tab['name'] ); ?>">
<input type="hidden" name="<?php echo esc_attr( $name ); ?>[<?php echo esc_attr( $i ); ?>][position]" class="attribute_position" value="<?php echo esc_attr( $i ); ?>">
</td>
<td rowspan="3">
<label><?php esc_html_e( 'Value', 'yith-plugin-fw' ); ?>:</label>
<textarea name="<?php echo esc_attr( $name ); ?>[<?php echo esc_attr( $i ); ?>][value]" cols="5" rows="5" placeholder="<?php esc_attr_e( 'Content of the tab. (HTML is supported)', 'yith-plugin-fw' ); ?>"><?php echo wp_kses_post( $the_tab['value'] ); ?></textarea>
</td>
</tr>
</tbody>
</table>
</div>
<?php endforeach ?>
</div>
<p class="toolbar">
<button type="button" class="button button-primary add_custom_tab"><?php esc_html_e( 'Add custom product tab', 'yith-plugin-fw' ); ?></button>
</p>
<div class="clear"></div>
</div>
<script>
jQuery( document ).ready( function ( $ ) {
// Add rows
$( 'button.add_custom_tab' ).on( 'click', function () {
var size = $( '.yit_custom_tabs .yit_custom_tab' ).size() + 1;
// Add custom attribute row
$( '.yit_custom_tabs' ).append( '<div class="yit_custom_tab wc-metabox">\
<h3>\
<button type="button" class="remove_row button"><?php esc_html_e( 'Remove', 'yith-plugin-fw' ); ?></button>\
<div class="handlediv" title="Click to toggle"></div>\
<strong class="attribute_name"></strong>\
</h3>\
<table cellpadding="0" cellspacing="0" class="woocommerce_attribute_data">\
<tbody>\
<tr>\
<td class="attribute_name">\
<label><?php esc_html_e( 'Name', 'yith-plugin-fw' ); ?>:</label>\
<input type="text" class="attribute_name" name="<?php echo esc_attr( $name ); ?>[' + size + '][name]" />\
<input type="hidden" name="<?php echo esc_attr( $name ); ?>[' + size + '][position]" class="attribute_position" value="' + size + '" />\
</td>\
<td rowspan="3">\
<label><?php esc_html_e( 'Value', 'yith-plugin-fw' ); ?>:</label>\
<textarea name="<?php echo esc_attr( $name ); ?>[' + size + '][value]" cols="5" rows="5" placeholder="<?php echo esc_attr( addslashes( __( 'Content of the tab. (HTML is supported)', 'yith-plugin-fw' ) ) ); ?>"></textarea>\
</td>\
</tr>\
</tbody>\
</table>\
</div>' );
} );
$( '.yit_custom_tabs' ).on( 'click', 'button.remove_row', function () {
var answer = confirm( "<?php esc_attr_e( 'Do you want to remove the custom tab?', 'yith-plugin-fw' ); ?>" );
if ( answer ) {
var $parent = $( this ).parent().parent();
$parent.remove();
attribute_row_indexes();
}
return false;
} );
// Attribute ordering
$( '.yit_custom_tabs' ).sortable(
{
items : '.yit_custom_tab',
cursor : 'move',
axis : 'y',
handle : 'h3',
scrollSensitivity : 40,
forcePlaceholderSize: true,
helper : 'clone',
opacity : 0.65,
placeholder : 'wc-metabox-sortable-placeholder',
start : function ( event, ui ) {
ui.item.css( 'background-color', '#f6f6f6' );
},
stop : function ( event, ui ) {
ui.item.removeAttr( 'style' );
attribute_row_indexes();
}
}
);
function attribute_row_indexes() {
$( '.yit_custom_tabs .yit_custom_tab' ).each( function ( index, el ) {
var newVal = '[' + $( el ).index( '.yit_custom_tabs .yit_custom_tab' ) + ']';
var oldVal = '[' + $( '.attribute_position', el ).val() + ']';
$( ':input:not(button)', el ).each( function () {
var name = $( this ).attr( 'name' );
$( this ).attr( 'name', name.replace( oldVal, newVal ) );
} );
$( '.attribute_position', el ).val( $( el ).index( '.yit_custom_tabs .yit_custom_tab' ) );
} );
}
} );
</script>
|