PluginProbe ʕ •ᴥ•ʔ
Simple Author Box / 2.52
Simple Author Box v2.52
trunk 1.0 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.9 2.0 2.0.1 2.0.2 2.0.4 2.0.5 2.0.6 2.0.7 2.0.8 2.0.9 2.1.0 2.1.1 2.1.2 2.1.3 2.1.4 2.1.5 2.2.0 2.2.1 2.2.2 2.3.0 2.3.1 2.3.11 2.3.12 2.3.15 2.3.16 2.3.2 2.3.20 2.3.21 2.3.22 2.4 2.41 2.42 2.45 2.46 2.47 2.48 2.49 2.50 2.51 2.52 2.54 2.55 2.56 2.57 2.59 2.60
simple-author-box / assets / js / sab-preview.js
simple-author-box / assets / js Last commit date
sab-pointers.js 4 years ago sab-preview.js 3 years ago sab_gutenberg_editor_script.js 3 years ago sabox-admin.js 4 years ago sabox-editor.js 4 years ago sabox-picker.js 4 years ago sweetalert2.min.js 5 years ago webfont.js 3 years ago
sab-preview.js
496 lines
1 /**
2 * SAB
3 * (c) WebFactory Ltd, 2016 - 2021
4 */
5
6 wp.SAB = 'undefined' === typeof( wp.SAB ) ? {} : wp.SAB;
7 wp.SAB.views = 'undefined' === typeof( wp.SAB.views ) ? {} : wp.SAB.views;
8 wp.SAB.models = 'undefined' === typeof( wp.SAB.models ) ? {} : wp.SAB.models;
9 wp.SAB.contructors = 'undefined' === typeof( wp.SAB.contructors ) ? [] : wp.SAB.contructors;
10
11 wp.SAB.models.Settings = Backbone.Model.extend({
12 initialize: function(){
13 var model = this;
14
15 var view = new wp.SAB.views.Settings({
16 model: this,
17 el: jQuery( '#sabox-container' )
18 });
19
20 this.set( 'view', view );
21 },
22 getAttribute: function( type ){
23 var value = this.get( type );
24
25 if ( 'undefined' == typeof value ) {
26 value = jQuery( '#' + type ).val();
27 }
28
29 return value;
30 }
31 });
32
33 wp.SAB.views.Settings = Backbone.View.extend({
34
35 events: {
36 // Settings specific events
37 'keyup input': 'updateModel',
38 'keyup textarea': 'updateModel',
39 'change input': 'updateModel',
40 'change textarea': 'updateModel',
41 'blur textarea': 'updateModel',
42 'change select': 'updateModel',
43 },
44
45 initialize: function( args ) {
46
47 // Check for Google Fonts
48 this.checkBunnyFonts();
49
50 this.listenTo( this.model, 'change:sab_email', this.emailVisibility );
51
52 // Author website
53 this.listenTo( this.model, 'change:sab_web', this.websiteVisibility );
54 this.listenTo( this.model, 'change:sab_web_position', this.websitePosition );
55
56 // Social Icons
57 this.listenTo( this.model, 'change:sab_hide_socials', this.socialsVisibility );
58 this.listenTo( this.model, 'change:sab_colored', this.socialIconTypeVisibility );
59 this.listenTo( this.model, 'change:sab_icons_style', this.socialIconTypeVisibility );
60 this.listenTo( this.model, 'change:sab_social_hover', this.socialIconHover );
61 this.listenTo( this.model, 'change:sab_box_long_shadow', this.socialIconShadow );
62 this.listenTo( this.model, 'change:sab_box_thin_border', this.socialIconBorder );
63
64 // Avatar
65 this.listenTo( this.model, 'change:sab_avatar_style', this.avatarStyle );
66 this.listenTo( this.model, 'change:sab_avatar_size', this.avatarSize );
67 this.listenTo( this.model, 'change:sab_avatar_hover', this.avatarHover );
68
69 // Padding
70 this.listenTo( this.model, 'change:sab_box_padding_top_bottom', this.adjustPadding );
71 this.listenTo( this.model, 'change:sab_box_padding_left_right', this.adjustPadding );
72
73 // Author Box Background
74 this.listenTo( this.model, 'change:sab_bg_image', this.adjustBoxBackground );
75
76 // Author Box Border
77 this.listenTo( this.model, 'change:sab_box_border_width', this.adjustBorder );
78 this.listenTo( this.model, 'change:sab_box_border', this.adjustBorder );
79 this.listenTo( this.model, 'change:sab_border_type', this.adjustBorder );
80
81 // Adjust Author name settings
82 this.listenTo( this.model, 'change:sab_box_name_size', this.adjustAuthorName );
83 this.listenTo( this.model, 'change:sab_box_name_font', this.adjustAuthorName );
84 this.listenTo( this.model, 'change:sab_box_author_color', this.adjustAuthorName );
85
86 // Adjust Author website settings
87 this.listenTo( this.model, 'change:sab_box_web_font', this.adjustAuthorWebsite );
88 this.listenTo( this.model, 'change:sab_box_web_size', this.adjustAuthorWebsite );
89 this.listenTo( this.model, 'change:sab_box_web_color', this.adjustAuthorWebsite );
90
91 // Adjust Author description settings
92 this.listenTo( this.model, 'change:sab_box_desc_font', this.adjustAuthorDescription );
93 this.listenTo( this.model, 'change:sab_box_desc_size', this.adjustAuthorDescription );
94 this.listenTo( this.model, 'change:sab_box_author_p_color', this.adjustAuthorDescription );
95 this.listenTo( this.model, 'change:sab_box_author_a_color', this.adjustAuthorDescription );
96 this.listenTo( this.model, 'change:sab_desc_style', this.adjustAuthorDescription );
97
98 //Tabs
99 this.listenTo( this.model, 'change:sab_tab_background_color', this.adjustTabs );
100 this.listenTo( this.model, 'change:sab_tab_text_color', this.adjustTabs );
101 this.listenTo( this.model, 'change:sab_tab_border_color', this.adjustTabs );
102 this.listenTo( this.model, 'change:sab_tab_hover_background_color', this.adjustTabs );
103 this.listenTo( this.model, 'change:sab_tab_hover_text_color', this.adjustTabs );
104 this.listenTo( this.model, 'change:sab_tab_hover_border_color', this.adjustTabs );
105
106 // Icon Size
107 this.listenTo( this.model, 'change:sab_box_icon_size', this.adjustIconSize );
108
109 // Social Bar Background Color
110 this.listenTo( this.model, 'change:sab_box_icons_back', this.changeSocialBarBackground );
111
112 // Author Box Background Color
113 this.listenTo( this.model, 'change:sab_box_author_back', this.changeAuthorBoxBackground );
114
115 // Author Box Background Color
116 this.listenTo( this.model, 'change:sab_box_icons_color', this.changeSocialIconsColor );
117
118 },
119
120 emailVisibility: function() {
121 var showEmail = wp.SAB.Settings.get( 'sab_email' );
122
123 if ( '1' == showEmail ) {
124 jQuery('.sab-user_email').parent().show();
125 }else{
126 jQuery('.sab-user_email').parent().hide();
127 }
128 },
129
130 socialsVisibility: function(){
131 var hideSocials = wp.SAB.Settings.get( 'sab_hide_socials' );
132
133 if ( '1' == hideSocials ) {
134 jQuery('.saboxplugin-socials').hide();
135 }else{
136 jQuery('.saboxplugin-socials').show();
137 }
138 },
139
140 websiteVisibility: function(){
141 var showWesite = wp.SAB.Settings.get( 'sab_web' );
142
143 if ( '1' == showWesite ) {
144 jQuery('.saboxplugin-web').show();
145 }else{
146 jQuery('.saboxplugin-web').hide();
147 }
148 },
149
150 websitePosition: function() {
151 var attribute = wp.SAB.Settings.get( 'sab_web_position' );
152
153 if ( '1' == attribute ) {
154 jQuery('.saboxplugin-web').addClass( 'sab-web-position' );
155 }else{
156 jQuery('.saboxplugin-web').removeClass( 'sab-web-position' );
157 }
158 },
159
160 socialIconTypeVisibility: function() {
161 var iconType = wp.SAB.Settings.getAttribute( 'sab_colored' ),
162 iconStyle = wp.SAB.Settings.getAttribute( 'sab_icons_style' );
163
164 jQuery('.saboxplugin-socials').removeClass( 'sab-show-simple sab-show-circle sab-show-square' );
165 if ( '1' == iconType ) {
166 if ( '1' == iconStyle ) {
167 jQuery('.saboxplugin-socials').addClass( 'sab-show-circle' );
168 }else{
169 jQuery('.saboxplugin-socials').addClass( 'sab-show-square' );
170 }
171 }else{
172 jQuery('.saboxplugin-socials').addClass( 'sab-show-simple' );
173 }
174
175 },
176
177 socialIconHover: function() {
178 var attribute = wp.SAB.Settings.get( 'sab_social_hover' );
179
180 if ( '1' == attribute ) {
181 jQuery('.saboxplugin-socials').addClass( 'sab-rotate-icons' );
182 }else{
183 jQuery('.saboxplugin-socials').removeClass( 'sab-rotate-icons' );
184 }
185 },
186
187 socialIconShadow: function() {
188 var attribute = wp.SAB.Settings.get( 'sab_box_long_shadow' );
189
190 if ( '1' == attribute ) {
191 jQuery('.saboxplugin-socials').removeClass( 'without-long-shadow' );
192 }else{
193 jQuery('.saboxplugin-socials').addClass( 'without-long-shadow' );
194 }
195 },
196
197 socialIconBorder: function() {
198 var attribute = wp.SAB.Settings.get( 'sab_box_thin_border' );
199
200 if ( '1' == attribute ) {
201 jQuery('.saboxplugin-socials').addClass( 'sab-icons-with-border' );
202 }else{
203 jQuery('.saboxplugin-socials').removeClass( 'sab-icons-with-border' );
204 }
205 },
206
207 avatarSize: function() {
208 var size = wp.SAB.Settings.get( 'sab_avatar_size' );
209 jQuery('.saboxplugin-gravatar').children('img').css('max-width', size);
210 jQuery('.saboxplugin-gravatar').children('img').attr('width', size);
211 jQuery('.saboxplugin-gravatar').children('img').attr('height', size);
212 },
213
214 avatarStyle: function() {
215 var attribute = wp.SAB.Settings.get( 'sab_avatar_style' );
216
217 jQuery('.saboxplugin-gravatar').removeClass( 'sab-round-image' );
218 jQuery('.saboxplugin-gravatar').removeClass( 'sab-fancy-image' );
219 jQuery('.saboxplugin-gravatar').removeClass( 'sab-elypse-image' );
220 jQuery('.saboxplugin-gravatar').removeClass( 'sab-shear-image' );
221 jQuery('.saboxplugin-gravatar').removeClass( 'sab-speed-image' );
222
223 if ( '1' == attribute ) {
224 jQuery('.saboxplugin-gravatar').addClass( 'sab-round-image' );
225 } else if ( '2' == attribute ) {
226 jQuery('.saboxplugin-gravatar').addClass( 'sab-fancy-image' );
227 } else if ( '3' == attribute ) {
228 jQuery('.saboxplugin-gravatar').addClass( 'sab-elypse-image' );
229 } else if ( '4' == attribute ) {
230 jQuery('.saboxplugin-gravatar').addClass( 'sab-shear-image' );
231 } else if ( '5' == attribute ) {
232 jQuery('.saboxplugin-gravatar').addClass( 'sab-speed-image' );
233 }
234 },
235
236 avatarHover: function() {
237 var attribute = wp.SAB.Settings.get( 'sab_avatar_hover' );
238
239 if ( '1' == attribute ) {
240 jQuery('.saboxplugin-gravatar').addClass( 'sab-rotate-img' );
241 }else{
242 jQuery('.saboxplugin-gravatar').removeClass( 'sab-rotate-img' );
243 }
244 },
245
246 adjustPadding: function() {
247 var paddingTopBottom = wp.SAB.Settings.getAttribute( 'sab_box_padding_top_bottom' ),
248 paddingLeftRight = wp.SAB.Settings.getAttribute( 'sab_box_padding_left_right' );
249
250 jQuery( '.saboxplugin-wrap' ).css({ 'padding' : paddingTopBottom + ' ' + paddingLeftRight });
251
252 },
253
254 adjustBoxBackground: function() {
255 var background_url = wp.SAB.Settings.getAttribute( 'sab_bg_image' );
256 if ( '' != background_url ) {
257 jQuery( '.saboxplugin-wrap' ).css({ 'background-image' : 'url(\'' + background_url + '\')'});
258 jQuery( '#sab_bg_image').parents('.sab-element-image-wrapper').find('.sabox-preview-area').html('<img src="' + background_url + '" />&nbsp;<a href="javascript: void(0);" class="sab-remove-image">Remove Image</a>');
259 } else {
260 jQuery( '.saboxplugin-wrap' ).css({ 'background-image' : 'none'});
261 jQuery( '#sab_bg_image').parents('.sab-element-image-wrapper').find('.sabox-preview-area').html('<span class="sabox-preview-area-placeholder">Select an image from our 400,000+ images gallery, or upload your own</span>');
262 }
263 },
264
265 adjustBorder: function() {
266 var border = wp.SAB.Settings.getAttribute( 'sab_box_border_width' ),
267 borderColor = wp.SAB.Settings.getAttribute( 'sab_box_border' ),
268 borderStyle = wp.SAB.Settings.getAttribute( 'sab_border_type' );
269
270 if ( '' == borderStyle ) {
271 borderStyle = 'solid';
272 }
273 jQuery( '.saboxplugin-wrap' ).css({ 'border-width' : border });
274 jQuery( '.saboxplugin-wrap' ).css({ 'border-style' : borderStyle });
275
276 if ( '' != borderColor ) {
277 jQuery( '.saboxplugin-wrap' ).css({'border-color' : borderColor });
278 }
279 },
280
281 adjustAuthorName: function() {
282 var font = wp.SAB.Settings.getAttribute( 'sab_box_name_font' ),
283 size = wp.SAB.Settings.getAttribute( 'sab_box_name_size' ),
284 color = wp.SAB.Settings.getAttribute( 'sab_box_author_color' ),
285 lineHeight = parseInt( size ) + 7;
286
287 if ( '' == color ) {
288 color = 'inherit';
289 }
290
291 if ( '' == font || 'None' == font ) {
292 font = 'inherit';
293 }else{
294 this.loadBunnyFonts( font );
295 }
296
297
298 jQuery( '.saboxplugin-wrap .saboxplugin-authorname a' ).css({ 'font-family' : font, 'color' : color, 'font-size': size, 'line-height' : lineHeight.toString() + 'px' });
299 jQuery( '.saboxplugin-wrap .saboxplugin-authorname span' ).css({ 'color' : color});
300 },
301
302 adjustTabs: function() {
303 var tab_bg_color = wp.SAB.Settings.getAttribute( 'sab_tab_background_color' ),
304 tab_text_color = wp.SAB.Settings.getAttribute( 'sab_tab_text_color' ),
305 tab_border_color = wp.SAB.Settings.getAttribute( 'sab_tab_border_color' ),
306 tab_hover_bg_color = wp.SAB.Settings.getAttribute( 'sab_tab_hover_background_color' ),
307 tab_hover_text_color = wp.SAB.Settings.getAttribute( 'sab_tab_hover_text_color' ),
308 tab_hover_border_color = wp.SAB.Settings.getAttribute( 'sab_tab_hover_border_color' );
309
310 if ( '' == tab_bg_color ) {
311 tab_bg_color = 'inherit';
312 }
313
314 if ( '' == tab_text_color ) {
315 tab_text_color = 'inherit';
316 }
317
318 if ( '' == tab_border_color ) {
319 tab_border_color = 'inherit';
320 }
321
322 if ( '' == tab_hover_bg_color ) {
323 tab_hover_bg_color = 'inherit';
324 }
325
326 if ( '' == tab_hover_text_color ) {
327 tab_hover_text_color = 'inherit';
328 }
329
330 if ( '' == tab_hover_border_color ) {
331 tab_hover_border_color = 'inherit';
332 }
333
334 jQuery( '.saboxplugin-wrap .saboxplugin-tabs-wrapper li' ).css({ 'color' : tab_text_color, 'background-color' : tab_bg_color, 'border-color': tab_border_color });
335 var hover_style = '.saboxplugin-wrap .saboxplugin-tabs-wrapper li:hover, .saboxplugin-wrap .saboxplugin-tabs-wrapper li:active{color: '+tab_hover_text_color+' !important;background-color: '+tab_hover_bg_color+' !important;border-color: '+tab_hover_border_color+' !important;}';
336 if(jQuery('#sab_tabs_css').length > 0){
337 jQuery('#sab_tabs_css').html(hover_style);
338 } else {
339 jQuery('body').append('<style id="sab_tabs_css">' + hover_style + '</style>')
340 }
341 },
342
343 adjustAuthorWebsite: function() {
344 var font = wp.SAB.Settings.getAttribute( 'sab_box_web_font' ),
345 size = wp.SAB.Settings.getAttribute( 'sab_box_web_size' ),
346 color = wp.SAB.Settings.getAttribute( 'sab_box_web_color' ),
347 lineHeight = parseInt( size ) + 7;
348
349 if ( '' == color ) {
350 color = 'inherit';
351 }
352
353 if ( '' == font || 'None' == font ) {
354 font = 'inherit';
355 }else{
356 this.loadBunnyFonts( font );
357 }
358
359
360 jQuery( '.saboxplugin-wrap .saboxplugin-web a' ).css({ 'font-family' : font, 'color' : color, 'font-size': size, 'line-height' : lineHeight.toString() + 'px' });
361 },
362
363 adjustAuthorDescription: function() {
364 var font = wp.SAB.Settings.getAttribute( 'sab_box_desc_font' ),
365 size = wp.SAB.Settings.getAttribute( 'sab_box_desc_size' ),
366 color = wp.SAB.Settings.getAttribute( 'sab_box_author_p_color' ),
367 link_color = wp.SAB.Settings.getAttribute( 'sab_box_author_a_color' ),
368 style = wp.SAB.Settings.getAttribute( 'sab_desc_style' ),
369 lineHeight = parseInt( size ) + 7;
370
371 if ( '' == color ) {
372 color = 'inherit';
373 }
374
375 if ( '' == link_color ) {
376 link_color = 'inherit';
377 }
378
379 if ( '' == font || 'None' == font ) {
380 font = 'inherit';
381 }else{
382 this.loadBunnyFonts( font );
383 }
384
385 if ( '0' == style ) {
386 style = 'normal';
387 }else{
388 style = 'italic';
389 }
390
391
392 jQuery( '.saboxplugin-wrap .saboxplugin-desc p, .saboxplugin-wrap .saboxplugin-desc' ).css({ 'font-family' : font, 'color' : color, 'font-size': size, 'line-height' : lineHeight.toString() + 'px', 'font-style' : style });
393 jQuery( '.saboxplugin-wrap .saboxplugin-desc a' ).css({ 'font-family' : font, 'color' : link_color, 'font-size': size, 'line-height' : lineHeight.toString() + 'px', 'font-style' : style });
394 },
395
396 adjustIconSize: function() {
397 var size = this.model.get( 'sab_box_icon_size' ),
398 size2x = parseInt( size ) * 2;
399
400 jQuery( '.saboxplugin-wrap .saboxplugin-socials a.saboxplugin-icon-grey svg' ).css({ 'width' : size, 'height' : size });
401 jQuery( '.saboxplugin-wrap .saboxplugin-socials a.saboxplugin-icon-color svg' ).css({ 'width' : size2x.toString() + 'px', 'height' : size2x.toString() + 'px' });
402 },
403
404 changeSocialBarBackground: function() {
405 var color = this.model.get( 'sab_box_icons_back' );
406
407 if ( '' == color ) {
408 color = 'inherit';
409 }
410
411 jQuery( '.saboxplugin-wrap .saboxplugin-socials' ).css({ 'background-color' : color });
412
413 },
414
415 changeAuthorBoxBackground: function() {
416 var color = this.model.get( 'sab_box_author_back' );
417
418 if ( '' == color ) {
419 color = 'inherit';
420 }
421
422 jQuery( '.saboxplugin-wrap' ).css({ 'background-color' : color });
423
424 },
425
426 changeSocialIconsColor: function() {
427 var color = this.model.get( 'sab_box_icons_color' );
428
429 if ( '' == color ) {
430 color = 'inherit';
431 }
432
433 jQuery( '.saboxplugin-wrap .saboxplugin-socials a.saboxplugin-icon-grey svg' ).css({ 'color' : color, 'fill' : color });
434
435 },
436
437 updateModel: function( event ) {
438 var value, setting;
439
440
441 // Check if the target has a data-field. If not, it's not a model value we want to store
442 if ( undefined === event.target.id ) {
443 return;
444 }
445
446 // Update the model's value, depending on the input type
447 if ( event.target.type == 'checkbox' ) {
448 value = ( event.target.checked ? '1' : '0' );
449 } else {
450 value = event.target.value;
451 }
452
453 // Update the model
454 this.model.set( event.target.id, value );
455
456 },
457
458 checkBunnyFonts: function() {
459 var authorFont = this.model.getAttribute( 'sab_box_name_font' ),
460 webFont = this.model.getAttribute( 'sab_box_web_font' ),
461 descriptionFont = this.model.getAttribute( 'sab_box_desc_font' );
462
463 if ( '' != authorFont && 'None' != authorFont ) {
464 this.loadBunnyFonts( authorFont );
465 }
466
467 if ( '' != webFont && 'None' != webFont ) {
468 this.loadBunnyFonts( webFont );
469 }
470
471 if ( '' != descriptionFont && 'None' != descriptionFont ) {
472 this.loadBunnyFonts( descriptionFont );
473 }
474
475 },
476
477 loadBunnyFonts: function( font ) {
478 if ( ! wp.SAB.Fonts.includes( font ) ) {
479 wp.SAB.Fonts.push( font );
480 WebFont.load({
481 bunny: {
482 families: [ font ]
483 }
484 });
485 }
486 },
487
488 });
489
490 jQuery( document ).ready(function(){
491
492 wp.SAB.Fonts = [];
493 wp.SAB.Settings = new wp.SAB.models.Settings();
494
495 });
496