PluginProbe
Visual Slider / trunk
Visual Slider vtrunk
visual-slider / admin / assets / js / responsive.js

responsive.js in Visual Slider trunk, at admin/assets/js/responsive.js

305 lines 17.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 (function ($, undefined) {
2 'use strict';
3 function isset(variable){
4 return variable !== "undefined" && variable !== "0" && variable !== null && variable !== '';
5 }
6
7
8
9 /*************************************************************************************************************************************************************************
10 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
11
12 Global Perview size
13
14 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
15 **************************************************************************************************************************************************************************/
16
17
18 $.fn.vs_perview_size = function() {
19 var this_element = $('.vs-custom-slider');
20 if($('.vs-custom-slider').hasClass('vs-visualslider')){
21 $('.vs_perview_global').removeClass('vs-active-loading vs-loading');
22
23 var data_slider = jQuery.parseJSON( this_element.find('.vs-slide-options').html());
24 var width= this_element.find('.vs-slide-list-warp').width();
25 var desktop_width= data_slider['desktop_width'];
26 var tablet_width= data_slider['tablet_width'];
27 var mobile_width= data_slider['mobile_width'];
28
29 var content_width = $('.vs_perview_global_content').width();
30
31 if ( (content_width <= 1024 && content_width >= 751) ){
32
33 this_element.addClass('vs-in-tablet').removeClass('vs-in-mobile vs-in-desktop');
34 if(this_element.hasClass('vs-has-tablet') && this_element.hasClass('vs-full-width')){
35 if( this_element.hasClass('vs-has-tablet') && (width < tablet_width) ){
36 this_element.addClass('vs-has-scale').removeClass('vs-not-scale');
37 }else{
38 this_element.addClass('vs-not-scale').removeClass('vs-has-scale');
39 }
40 }else{
41 this_element.addClass('vs-has-scale').removeClass('vs-not-scale');
42 }
43
44
45 }else if ( content_width <= 750 && content_width >= 1 ){
46
47 this_element.addClass('vs-in-mobile').removeClass('vs-in-desktop vs-in-tablet');
48 if(this_element.hasClass('vs-has-mobile') && this_element.hasClass('vs-full-width') ){
49 if((width < mobile_width)){
50 this_element.addClass('vs-has-scale').removeClass('vs-not-scale');
51 }else{
52 this_element.addClass('vs-has-scale').removeClass('vs-has-scale');
53 }
54 }else{
55 this_element.addClass('vs-has-scale').removeClass('vs-not-scale');
56 }
57
58 } else{
59
60 this_element.removeClass('vs-in-mobile vs-in-desktop vs-in-tablet').addClass('vs-in-desktop');
61 if(width < desktop_width ){
62 this_element.removeClass('vs-not-scale').addClass('vs-has-scale');
63 }else{
64 this_element.removeClass('vs-has-scale').addClass('vs-not-scale');
65 }
66
67 }
68
69
70
71 }
72
73 };
74
75 /*************************************************************************************************************************************************************************
76 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
77
78 Perview Global Click
79
80 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
81 **************************************************************************************************************************************************************************/
82
83 $.fn.vs_perview_global_click = function(responsive) {
84 $(document).on('click', ".vs_perview_global .vs_perview_heading_"+responsive+",.vs_perview_global .vs_perview_heading_"+responsive+" label,.vs_perview_global .vs_perview_heading_"+responsive+" option", function(e) {
85 $('.vs_perview_global').removeClass('vs_perview_tablet vs_perview_desktop vs_perview_mobile');
86 $('.vs_perview_global').addClass('vs_perview_'+responsive);
87 var responsive_width = $('.vs_perview_global #vs_perview_'+responsive+'_width').val();
88
89 $('.vs_module_setting').removeClass('vs_global_mobile vs_global_tablet vs_global_desktop');
90 $('.vs_module_setting').addClass('vs_global_'+responsive);
91 $('.vs_perview_global').attr('style','--vs-prw-wt:'+responsive_width+';');
92 $('body').vs_reload_global_slider();
93 });
94
95 };
96
97 /*************************************************************************************************************************************************************************
98 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
99
100 Slide Perview size
101
102 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
103 **************************************************************************************************************************************************************************/
104 $.fn.vs_perview_slide_size = function() {
105 var json = $('.vs-custom-slider');
106 var this_element = $('.vs_perview_slide .vs-slide-warp');
107 var data_slider = jQuery.parseJSON( json.find('.vs-slide-options').html());
108
109 var width= this_element.find('.vs-slide').width();
110 var desktop_width= data_slider['desktop_width'];
111 var tablet_width= data_slider['tablet_width'];
112 var mobile_width= data_slider['mobile_width'];
113 var content_width = $('.vs_perview_slide_content').width();
114 if ( (content_width <= 1024 && content_width >= 751) ){
115 if(this_element.hasClass('vs-has-tablet') ){
116 if( (width < tablet_width) ){
117 this_element.removeClass('vs-not-scale').addClass('vs-has-scale');
118 }else{
119 this_element.removeClass('vs-has-scale').addClass('vs-not-scale');
120 }
121 }else{
122 this_element.removeClass('vs-not-scale').addClass('vs-has-scale');
123 }
124
125 }else if ( (content_width <= 750 && content_width >= 1) ){
126 if(this_element.hasClass('vs-has-mobile') ){
127 if( (width < mobile_width) ){
128 this_element.removeClass('vs-not-scale').addClass('vs-has-scale');
129 }else{
130 this_element.removeClass('vs-has-scale').addClass('vs-not-scale');
131 }
132 }else{
133 this_element.removeClass('vs-not-scale').addClass('vs-has-scale');
134 }
135 } else{
136 if(width < desktop_width ){
137 this_element.removeClass('vs-not-scale').addClass('vs-has-scale');
138 }else{
139 this_element.removeClass('vs-has-scale').addClass('vs-not-scale');
140 }
141
142 }
143
144 };
145 /*************************************************************************************************************************************************************************
146 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
147
148 Slide Responsive
149
150 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
151 **************************************************************************************************************************************************************************/
152 $.fn.vs_slide_responsive = function(this_element) {
153
154 var width_warp= this_element.find('.vs-slide-list-warp').width();
155 return " --vs-sc-wt:"+width_warp+";";
156
157 };
158
159 /*************************************************************************************************************************************************************************
160 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
161
162 Perview Slide Click
163
164 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
165 **************************************************************************************************************************************************************************/
166
167 $.fn.vs_perview_slide_click = function(responsive) {
168 $(document).on('click', ".vs_perview_slide .vs_perview_heading_"+responsive, function() {
169 $('.vs_perview_slide').removeClass('vs_perview_mobile vs_perview_tablet vs_perview_desktop');
170 $('.vs_perview_slide').addClass('vs_perview_'+responsive+'');
171 var responsvie_width = $('.vs_perview_slide #vs_perview_'+responsive+'_width').val();
172 $('.vs_perview_slide').css({'--vs-prw-wt':responsvie_width});
173
174 $('.vs_perview_slide .vs-slide-warp').removeClass('vs-in-mobile vs-in-tablet vs-in-desktop');
175 $('.vs_perview_slide .vs-slide-warp').addClass('vs-in-'+responsive+'');
176 $('.vs_panel').removeClass('vs_panel_mobile vs_panel_tablet vs_panel_desktop');
177 $('.vs_panel').addClass('vs_panel_'+responsive);
178 $('body').vs_perview_slide_size();
179 var style = $('body').vs_slide_responsive($('.vs_perview_full_screen'));
180 $('body').find('.vs-slide-warp').attr('style',style);
181
182 });
183 };
184
185 /*************************************************************************************************************************************************************************
186 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
187 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
188 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
189 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
190
191 Start Ready
192
193 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
194 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
195 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
196 **************************************************************************************************************************************************************************/
197
198 jQuery(document).ready(function() {
199 $('body').vs_perview_size();
200
201 /*************************************************************************************************************************************************************************
202 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
203
204 Full SCREEN
205
206 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
207 **************************************************************************************************************************************************************************/
208
209 $(document).on('click','.vs_perview_slide .vs_perview_full_screen_mode',function() {
210 $('.vs_panel').removeClass('vs_panel_mobile vs_panel_tablet vs_panel_desktop');
211 $(this).parents('.vs_perview_slide').addClass('vs_perview_full_screen');
212 $('.vs_module_side_options_active').removeClass('vs_module_side_options_active');
213 $('.vs_panel_options_active').removeClass('vs_panel_options_active');
214 $('body').vs_perview_slide_size();
215 var style = $('body').vs_slide_responsive($('.vs_perview_full_screen'));
216 $('body').find('.vs-slide-warp').attr('style',style);
217 });
218 /*************************************************************************************************************************************************************************
219 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
220
221 Full SCREEN Close
222
223 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
224 **************************************************************************************************************************************************************************/
225
226 $(document).on('click','.vs_perview_slide .vs_perview_full_screen_close',function() {
227 $(this).parents('.vs_perview_slide').removeClass('vs_perview_full_screen');
228 $( ".vs_perview_slide .vs_perview_heading_desktop" ).trigger( "click" );
229
230 });
231
232 $(document).on('click','.vs_perview_global .vs_perview_full_screen_mode',function() {
233 $(this).parents('.vs_perview_global').addClass('vs_perview_full_screen');
234 $('body').vs_reload_global_slider();
235 });
236
237 $(document).on('click','.vs_perview_global .vs_perview_full_screen_close',function() {
238
239 $(this).parents('.vs_perview_global').removeClass('vs_perview_full_screen');
240 $('body').vs_reload_global_slider();
241
242 });
243
244
245 /*************************************************************************************************************************************************************************
246 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
247
248 Responsive_options
249
250 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
251 **************************************************************************************************************************************************************************/
252 $(document).on('click', '.vs_module_setting .vs_responsive_options_desktop', function(e) {
253 $( ".vs_perview_global .vs_perview_heading_desktop" ).trigger( "click" );
254 });
255
256
257 $(document).on('click', '.vs_module_setting .vs_responsive_options_tablet', function(e) {
258 $( ".vs_perview_global .vs_perview_heading_tablet" ).trigger( "click" );
259 });
260
261 $(document).on('click', '.vs_module_setting .vs_responsive_options_mobile', function(e) {
262 $( ".vs_perview_global .vs_perview_heading_mobile" ).trigger( "click" );
263 });
264
265 $(document).on('click', '.vs_panel .vs_responsive_options_desktop', function(e) {
266 $( ".vs_panel .vs_perview_heading_desktop" ).trigger( "click" );
267 });
268
269
270 $(document).on('click', '.vs_panel .vs_responsive_options_tablet', function(e) {
271 $( ".vs_panel .vs_perview_heading_tablet" ).trigger( "click" );
272 });
273
274 $(document).on('click', '.vs_panel .vs_responsive_options_mobile', function(e) {
275 $( ".vs_panel .vs_perview_heading_mobile" ).trigger( "click" );
276 });
277
278
279
280
281 $('body').vs_perview_global_click('desktop');
282 $('body').vs_perview_global_click('tablet');
283 $('body').vs_perview_global_click('mobile');
284
285
286 $('body').vs_perview_slide_click('desktop');
287 $('body').vs_perview_slide_click('tablet');
288 $('body').vs_perview_slide_click('mobile');
289
290 /*************************************************************************************************************************************************************************
291 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
292 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
293 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
294 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
295
296 Ready END
297
298 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
299 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
300 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
301 **************************************************************************************************************************************************************************/
302 });
303
304 })(jQuery);
305