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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
<?php
/*
# Param Use -
array(
"type" => "ultimate_responsive",
"class" => "",
"heading" => __("Font size", 'ultimate_vc'),
"param_name" => "YOUR_PARAM_NAME_FONT_SIZE",
"unit" => "px", // use '%' or 'px'
"media" => array(
// "Large Screen" => '',
"Desktop" => '28', // Here '28' is default value set for 'Desktop'
"Tablet" => '',
"Tablet Portrait" => '',
"Mobile Landscape" => '',
"Mobile" => '',
),
"group" => "Typography"
),
# Module implementation -
1] Create Data List -
$args = array(
'target' => '#ID .TARGET_element_CLASS, #ID #TARGET_element_ID', // set targeted element e.g. unique class/id etc.
'media_sizes' => array(
font-size' => $YOUR_PARAM_NAME_FONT_SIZE, // Your PARAM_NAME which you set in array
'line-height' => $YOUR_PARAM_NAME_LINE_HEIGHT // Your PARAM_NAME which you set in array
),
);
$data_list = get_ultimate_vc_responsive_media_css($args);
2] Add ID and class 'ult-responsive' and set data attribute - $data_list to targeted element
<div id="#ID" class='ult-responsive' '.$data_list.' >
<div class="TARGET_element_ID">
...
</div>
<div class="TARGET_element_CLASS">
...
</div>
....
</div>
Note - Without .ult-responsive class on target resposive param will not work
*/
if(!class_exists('Ultimate_Responsive'))
{
class Ultimate_Responsive
{
function __construct()
{
add_action( 'admin_enqueue_scripts', array( $this, 'ultimate_admin_responsive_param_scripts' ) );
if(defined('WPB_VC_VERSION') && version_compare(WPB_VC_VERSION, 4.8) >= 0) {
if(function_exists('vc_add_shortcode_param'))
{
vc_add_shortcode_param('ultimate_responsive', array($this, 'ultimate_responsive_callback'), UAVC_URL.'admin/vc_extend/js/ultimate-responsive.js');
}
}
else {
if(function_exists('add_shortcode_param'))
{
add_shortcode_param('ultimate_responsive', array($this, 'ultimate_responsive_callback'), UAVC_URL.'admin/vc_extend/js/ultimate-responsive.js');
}
}
}
function ultimate_responsive_callback($settings, $value)
{
$dependency = '';
$unit = $settings['unit'];
$medias = $settings['media'];
if(is_numeric($value)){
$value = "desktop:".$value.'px;';
}
$uid = 'ultimate-responsive-'. rand(1000, 9999);
$html = '<div class="ultimate-responsive-wrapper" id="'.$uid.'" >';
$html .= ' <div class="ultimate-responsive-items" >';
foreach($medias as $key => $default_value ) {
//$html .= $key;
switch ($key) {
case 'Desktop':
$class = 'required';
$data_id = strtolower((preg_replace('/\s+/', '_', $key)));
$dashicon = "<i class='dashicons dashicons-desktop'></i>";
$icons = 'simplify-icon dashicons dashicons-arrow-right-alt2';
if ( is_rtl() ) {
$icons = 'simplify-icon dashicons dashicons-arrow-left-alt2';
}
$html .= $this->ultimate_responsive_param_media($class, $dashicon, $key, $default_value ,$unit, $data_id);
$html .= "<div class='simplify'>
<div class='ult-tooltip simplify-options'>".__("Responsive Options","ultimate_vc")."</div>
<i class='$icons'></i>
</div>";
break;
case 'Tablet':
$class = 'optional';
$data_id = strtolower((preg_replace('/\s+/', '_', $key)));
$dashicon = "<i class='dashicons dashicons-tablet' style='transform: rotate(90deg);'></i>";
$html .= $this->ultimate_responsive_param_media($class, $dashicon, $key, $default_value ,$unit, $data_id);
break;
case 'Tablet Portrait':
$class = 'optional';
$data_id = strtolower((preg_replace('/\s+/', '_', $key)));
$dashicon = "<i class='dashicons dashicons-tablet'></i>";
$html .= $this->ultimate_responsive_param_media($class, $dashicon, $key, $default_value ,$unit, $data_id);
break;
case 'Mobile Landscape':
$class = 'optional';
$data_id = strtolower((preg_replace('/\s+/', '_', $key)));
$dashicon = "<i class='dashicons dashicons-smartphone' style='transform: rotate(90deg);'></i>";
$html .= $this->ultimate_responsive_param_media($class, $dashicon, $key, $default_value ,$unit, $data_id);
break;
case 'Mobile':
$class = 'optional';
$data_id = strtolower((preg_replace('/\s+/', '_', $key)));
$dashicon = "<i class='dashicons dashicons-smartphone'></i>";
$html .= $this->ultimate_responsive_param_media($class, $dashicon, $key, $default_value ,$unit, $data_id);
break;
}
}
$html .= ' </div>';
$html .= $this->get_units($unit);
$html .= ' <input type="hidden" data-unit="'.esc_attr( $unit ).'" name="'.esc_attr( $settings['param_name'] ).'" class="wpb_vc_param_value ultimate-responsive-value '. esc_attr( $settings['param_name'] ).' '.esc_attr( $settings['type'] ).'_field" value="'.esc_attr( $value ).'" '.$dependency.' />';
$html .= '</div>';
return $html;
}
function ultimate_responsive_param_media($class, $dashicon, $key, $default_value, $unit, $data_id) {
$tooltipVal = str_replace('_', ' ', $data_id);
$html = ' <div class="ult-responsive-item '.esc_attr( $class ).' '.esc_attr( $data_id ).' ">';
$html .= ' <span class="ult-icon">';
$html .= ' <div class="ult-tooltip '.esc_attr( $class ).' '.esc_attr( $data_id ).'">'.ucwords($tooltipVal).'</div>';
$html .= $dashicon;
$html .= ' </span>';
$html .= ' <input type="text" class="ult-responsive-input" data-default="'.esc_attr( $default_value ) .'" data-unit="'.esc_attr( $unit ).'" data-id="'.esc_attr( $data_id ).'" />';
$html .= ' </div>';
return $html;
}
function get_units($unit) {
// set units - px, em, %
$html = '<div class="ultimate-unit-section">';
$html .= ' <label>'.esc_html( $unit ).'</label>';
$html .= '</div>';
return $html;
}
// admin scripts
function ultimate_admin_responsive_param_scripts($hook) {
if($hook == "post.php" || $hook == "post-new.php"){
wp_enqueue_style( 'wp-color-picker' );
$bsf_dev_mode = bsf_get_option('dev_mode');
if($bsf_dev_mode === 'enable') {
$css_ext = '.css';
if ( is_rtl() ) {
$css_ext = '-rtl.css';
}
Ultimate_VC_Addons::ultimate_register_style( 'ultimate_responsive_param_css', UAVC_URL.'admin/vc_extend/css/ultimate_responsive' . $css_ext, true );
// wp_register_style('ultimate_responsive_param_css', plugins_url('../admin/vc_extend/css/ultimate_responsive.min.css', __FILE__ ));
wp_enqueue_style( 'ultimate_responsive_param_css');
}
}
}
}
}
if(class_exists('Ultimate_Responsive'))
{
$Ultimate_Responsive = new Ultimate_Responsive();
}
|