You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1143 lines
62 KiB

1 year ago
  1. ( function( $ ) {
  2. 'use strict';
  3. var $window = $( window ),
  4. $document = $( document ),
  5. $body = $( 'body' );
  6. // Site title and description.
  7. wp.customize( 'blogname', function( value ) {
  8. value.bind( function( to ) {
  9. $( '.site-title' ).text( to );
  10. } );
  11. } );
  12. wp.customize( 'blogdescription', function( value ) {
  13. value.bind( function( to ) {
  14. $( '.site-description' ).text( to );
  15. } );
  16. } );
  17. wp.customize.bind( 'preview-ready', function() {
  18. var defaultTarget = window.parent === window ? null : window.parent;
  19. $document.on(
  20. 'click',
  21. '.site-header-focus-item .item-customizer-focus, .builder-item-focus .edit-row-action',
  22. function(e) {
  23. e.preventDefault();
  24. e.stopPropagation();
  25. var p = $( this ).closest( '.site-header-focus-item' );
  26. var section_id = p.attr( 'data-section' ) || '';
  27. if ( section_id ) {
  28. if ( defaultTarget.wp.customize.section( section_id ) ) {
  29. defaultTarget.wp.customize.section( section_id ).focus();
  30. }
  31. }
  32. }
  33. );
  34. $document.on(
  35. 'click',
  36. '.site-footer-focus-item .item-customizer-focus',
  37. function(e) {
  38. e.preventDefault();
  39. e.stopPropagation();
  40. var p = $( this ).closest( '.site-footer-focus-item' );
  41. var section_id = p.attr( 'data-section' ) || '';
  42. if ( section_id ) {
  43. if ( defaultTarget.wp.customize.section( section_id ) ) {
  44. defaultTarget.wp.customize.section( section_id ).focus();
  45. }
  46. }
  47. }
  48. );
  49. } );
  50. document.addEventListener('DOMContentLoaded', function () {
  51. if ( navigator.userAgent.toLowerCase().indexOf('safari/') != -1 ) {
  52. if ( navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
  53. } else {
  54. // Safari doesn't want to render the iframe... This hack at least makes it render although it's not idea because of the flash.
  55. // $body.animate({
  56. // opacity: 0,
  57. // }, 50, function() {
  58. // $body.css( 'display', 'none' );
  59. // $body.css( 'opacity', 1 );
  60. // });
  61. // setTimeout(function(){
  62. // $body.css( 'display', 'block' );
  63. // }, 100);
  64. }
  65. }
  66. var hasSelectiveRefresh = (
  67. 'undefined' !== typeof wp &&
  68. wp.customize &&
  69. wp.customize.selectiveRefresh &&
  70. wp.customize.widgetsPreview &&
  71. wp.customize.widgetsPreview.WidgetPartial
  72. );
  73. if ( hasSelectiveRefresh ) {
  74. wp.customize.selectiveRefresh.bind('partial-content-rendered', function (placement) {
  75. if ( placement.partial.id === 'header_desktop_items' ) {
  76. window.kadence.initToggleDrawer();
  77. }
  78. window.kadence.initTransHeaderPadding();
  79. if ( typeof window.kadence.initStickyHeader !== "undefined" ) {
  80. window.kadence.initStickyHeader();
  81. window.kadence.initScrollToTop();
  82. }
  83. } );
  84. }
  85. });
  86. var kadenceCustomizer = {
  87. live_css_typography : function( key, rules, newValue ) {
  88. var styleID = 'kadence-customize-preview-css-' + key,
  89. $style = $( '#' + styleID ),
  90. css = '',
  91. media_tablet = '@media screen and (max-width: 1023px)',
  92. media_mobile = '@media screen and (max-width: 499px)',
  93. selector,
  94. cssArray = {};
  95. // Create <style> tag if doesn't exist.
  96. if ( 0 === $style.length ) {
  97. $style = $( document.createElement( 'style' ) );
  98. $style.attr( 'id', styleID );
  99. $style.attr( 'type', 'text/css' );
  100. // Append <style> tag to <head>.
  101. $style.appendTo( $( 'head' ) );
  102. }
  103. _.each( rules, function( rule ) {
  104. if ( undefined == rule['property'] || undefined == rule['selector'] ) {
  105. return;
  106. }
  107. rule['media'] = rule['media'] || 'global';
  108. rule['pattern'] = rule['pattern'] || '$';
  109. if ( 'object' == typeof newValue ) {
  110. if ( undefined !== newValue['size'] && 'object' == typeof newValue['size'] && 'family' !== rule['key'] ) {
  111. if ( undefined !== newValue['size']['desktop'] && '' !== newValue['size']['desktop'] ) {
  112. selector = ( undefined !== rule['selector']['desktop'] ? rule['selector']['desktop'] : rule['selector'] );
  113. // Define properties.
  114. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  115. if ( undefined == cssArray[ rule['media'] ][ selector ] ) cssArray[ rule['media'] ][ selector ] = {};
  116. var unit = ( undefined !== newValue['sizeType'] && '' !== newValue['sizeType'] ? newValue['sizeType'] : 'px' );
  117. cssArray[ rule['media'] ][ selector ]['font-size'] = newValue['size']['desktop'] + unit;
  118. }
  119. if ( undefined !== newValue['size']['tablet'] && '' !== newValue['size']['tablet'] ) {
  120. selector = ( undefined !== rule['selector']['tablet'] ? rule['selector']['tablet'] : rule['selector'] );
  121. // Define properties.
  122. if ( undefined == cssArray[ media_tablet ] ) cssArray[ media_tablet ] = {};
  123. if ( undefined == cssArray[ media_tablet ][ selector ] ) cssArray[ media_tablet ][ selector ] = {};
  124. var unit = ( undefined !== newValue['sizeType'] && '' !== newValue['sizeType'] ? newValue['sizeType'] : 'px' );
  125. cssArray[ media_tablet ][ selector ]['font-size'] = newValue['size']['tablet'] + unit;
  126. }
  127. if ( undefined !== newValue['size']['mobile'] && '' !== newValue['size']['mobile'] ) {
  128. selector = ( undefined !== rule['selector']['mobile'] ? rule['selector']['mobile'] : rule['selector'] );
  129. // Define properties.
  130. if ( undefined == cssArray[ media_mobile ] ) cssArray[ media_mobile ] = {};
  131. if ( undefined == cssArray[ media_mobile ][ selector ] ) cssArray[ media_mobile ][ selector ] = {};
  132. var unit = ( undefined !== newValue['sizeType'] && '' !== newValue['sizeType'] ? newValue['sizeType'] : 'px' );
  133. cssArray[ media_mobile ][ selector ]['font-size'] = newValue['size']['mobile'] + unit;
  134. }
  135. }
  136. if ( undefined !== newValue['lineHeight'] && 'object' == typeof newValue['lineHeight'] && 'family' !== rule['key'] ) {
  137. if ( undefined !== newValue['lineHeight']['desktop'] && '' !== newValue['lineHeight']['desktop'] ) {
  138. selector = ( undefined !== rule['selector']['desktop'] ? rule['selector']['desktop'] : rule['selector'] );
  139. // Define properties.
  140. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  141. if ( undefined == cssArray[ rule['media'] ][ selector ] ) cssArray[ rule['media'] ][ selector ] = {};
  142. var unit = ( undefined !== newValue['lineType'] && '' !== newValue['lineType'] && '-' !== newValue['lineType'] ? newValue['lineType'] : '' );
  143. cssArray[ rule['media'] ][ selector ]['line-height'] = newValue['lineHeight']['desktop'] + unit;
  144. }
  145. if ( undefined !== newValue['lineHeight']['tablet'] && '' !== newValue['lineHeight']['tablet'] ) {
  146. selector = ( undefined !== rule['selector']['tablet'] ? rule['selector']['tablet'] : rule['selector'] );
  147. // Define properties.
  148. if ( undefined == cssArray[ media_tablet ] ) cssArray[ media_tablet ] = {};
  149. if ( undefined == cssArray[ media_tablet ][ selector ] ) cssArray[ media_tablet ][ selector ] = {};
  150. var unit = ( undefined !== newValue['lineType'] && '' !== newValue['lineType'] && '-' !== newValue['lineType'] ? newValue['lineType'] : '' );
  151. cssArray[ media_tablet ][ selector ]['line-height'] = newValue['lineHeight']['tablet'] + unit;
  152. }
  153. if ( undefined !== newValue['lineHeight']['mobile'] && '' !== newValue['lineHeight']['mobile'] ) {
  154. selector = ( undefined !== rule['selector']['mobile'] ? rule['selector']['mobile'] : rule['selector'] );
  155. // Define properties.
  156. if ( undefined == cssArray[ media_mobile ] ) cssArray[ media_mobile ] = {};
  157. if ( undefined == cssArray[ media_mobile ][ selector ] ) cssArray[ media_mobile ][ selector ] = {};
  158. var unit = ( undefined !== newValue['lineType'] && '' !== newValue['lineType'] && '-' !== newValue['lineType'] ? newValue['lineType'] : '' );
  159. cssArray[ media_mobile ][ selector ]['line-height'] = newValue['lineHeight']['mobile'] + unit;
  160. }
  161. }
  162. if ( undefined !== newValue['letterSpacing'] && 'object' == typeof newValue['letterSpacing'] && 'family' !== rule['key']) {
  163. if ( undefined !== newValue['letterSpacing']['desktop'] && '' !== newValue['letterSpacing']['desktop'] ) {
  164. selector = ( undefined !== rule['selector']['desktop'] ? rule['selector']['desktop'] : rule['selector'] );
  165. // Define properties.
  166. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  167. if ( undefined == cssArray[ rule['media'] ][ selector ] ) cssArray[ rule['media'] ][ selector ] = {};
  168. var unit = ( undefined !== newValue['spacingType'] && '' !== newValue['spacingType'] ? newValue['spacingType'] : '' );
  169. cssArray[ rule['media'] ][ selector ]['letter-spacing'] = newValue['letterSpacing']['desktop'] + unit;
  170. }
  171. if ( undefined !== newValue['letterSpacing']['tablet'] && '' !== newValue['letterSpacing']['tablet'] ) {
  172. selector = ( undefined !== rule['selector']['tablet'] ? rule['selector']['tablet'] : rule['selector'] );
  173. // Define properties.
  174. if ( undefined == cssArray[ media_tablet ] ) cssArray[ media_tablet ] = {};
  175. if ( undefined == cssArray[ media_tablet ][ selector ] ) cssArray[ media_tablet ][ selector ] = {};
  176. var unit = ( undefined !== newValue['spacingType'] && '' !== newValue['spacingType'] ? newValue['spacingType'] : '' );
  177. cssArray[ media_tablet ][ selector ]['letter-spacing'] = newValue['letterSpacing']['tablet'] + unit;
  178. }
  179. if ( undefined !== newValue['letterSpacing']['mobile'] && '' !== newValue['letterSpacing']['mobile'] ) {
  180. selector = ( undefined !== rule['selector']['mobile'] ? rule['selector']['mobile'] : rule['selector'] );
  181. // Define properties.
  182. if ( undefined == cssArray[ media_mobile ] ) cssArray[ media_mobile ] = {};
  183. if ( undefined == cssArray[ media_mobile ][ selector ] ) cssArray[ media_mobile ][ selector ] = {};
  184. var unit = ( undefined !== newValue['spacingType'] && '' !== newValue['spacingType'] ? newValue['spacingType'] : '' );
  185. cssArray[ media_mobile ][ selector ]['letter-spacing'] = newValue['letterSpacing']['mobile'] + unit;
  186. }
  187. }
  188. if ( undefined !== newValue['family'] && '' !== newValue['family'] ) {
  189. selector = ( undefined !== rule['selector']['desktop'] ? rule['selector']['desktop'] : rule['selector'] );
  190. // Define properties.
  191. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  192. if ( undefined == cssArray[ rule['media'] ][ selector ] ) cssArray[ rule['media'] ][ selector ] = {};
  193. if ( undefined !== newValue['google'] && newValue['google'] && typeof (WebFont) !== 'undefined' && WebFont ) {
  194. var link = newValue['family'];
  195. if ( 'family' === rule['key'] && newValue['variant'] ) {
  196. link += ':' + newValue['variant'].toString();
  197. } else if ( newValue['variant'] && '' !== newValue['variant'] ) {
  198. link += ':' + newValue['variant'];
  199. }
  200. WebFont.load( {google: {families: [link]}} );
  201. }
  202. cssArray[ rule['media'] ][ selector ]['font-family'] = ( 'inherit' !== newValue['family'] ? newValue['family'] : '' );
  203. }
  204. if ( undefined !== newValue['style'] && 'family' !== rule['key'] ) {
  205. selector = ( undefined !== rule['selector']['desktop'] ? rule['selector']['desktop'] : rule['selector'] );
  206. // Define properties.
  207. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  208. if ( undefined == cssArray[ rule['media'] ][ selector ] ) cssArray[ rule['media'] ][ selector ] = {};
  209. cssArray[ rule['media'] ][ selector ]['font-style'] = newValue['style'];
  210. }
  211. if ( undefined !== newValue['weight'] && 'family' !== rule['key'] ) {
  212. selector = ( undefined !== rule['selector']['desktop'] ? rule['selector']['desktop'] : rule['selector'] );
  213. // Define properties.
  214. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  215. if ( undefined == cssArray[ rule['media'] ][ selector ] ) cssArray[ rule['media'] ][ selector ] = {};
  216. cssArray[ rule['media'] ][ selector ]['font-weight'] = newValue['weight'];
  217. }
  218. if ( undefined !== newValue['transform'] && '' !== newValue['transform'] && 'family' !== rule['key'] ) {
  219. selector = ( undefined !== rule['selector']['desktop'] ? rule['selector']['desktop'] : rule['selector'] );
  220. // Define properties.
  221. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  222. if ( undefined == cssArray[ rule['media'] ][ selector ] ) cssArray[ rule['media'] ][ selector ] = {};
  223. cssArray[ rule['media'] ][ selector ]['text-transform'] = newValue['transform'];
  224. }
  225. if ( undefined !== newValue['color'] && 'family' !== rule['key'] ) {
  226. selector = ( undefined !== rule['selector']['desktop'] ? rule['selector']['desktop'] : rule['selector'] );
  227. // Define properties.
  228. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  229. if ( undefined == cssArray[ rule['media'] ][ selector ] ) cssArray[ rule['media'] ][ selector ] = {};
  230. var color_type = '';
  231. if ( newValue['color'].includes('palette') ) {
  232. color_type = 'var(--global-' + newValue['color'] + ')';
  233. } else {
  234. color_type = newValue['color']
  235. }
  236. cssArray[ rule['media'] ][ selector ]['color'] = color_type;
  237. }
  238. }
  239. } );
  240. // Loop into the sorted array to build CSS string.
  241. _.each( cssArray, function( selectors, media ) {
  242. if ( 'global' !== media ) css += media + '{';
  243. _.each( selectors, function( properties, selector ) {
  244. css += selector + '{';
  245. _.each( properties, function( value, property ) {
  246. css += property + ':' + value + ';';
  247. });
  248. css += '}';
  249. });
  250. if ( 'global' !== media ) css += '}';
  251. });
  252. // Add CSS string to <style> tag.
  253. $style.html( css );
  254. },
  255. live_css_background : function( key, rules, newValue ) {
  256. var styleID = 'kadence-customize-preview-css-' + key,
  257. $style = $( '#' + styleID ),
  258. css = '',
  259. media_tablet = '@media screen and (max-width: 1023px)',
  260. media_mobile = '@media screen and (max-width: 499px)',
  261. selector,
  262. cssArray = {};
  263. // Create <style> tag if doesn't exist.
  264. if ( 0 === $style.length ) {
  265. $style = $( document.createElement( 'style' ) );
  266. $style.attr( 'id', styleID );
  267. $style.attr( 'type', 'text/css' );
  268. // Append <style> tag to <head>.
  269. $style.appendTo( $( 'head' ) );
  270. }
  271. _.each( rules, function( rule ) {
  272. if ( undefined == rule['property'] || undefined == rule['selector'] ) {
  273. return;
  274. }
  275. rule['media'] = rule['media'] || 'global';
  276. rule['pattern'] = rule['pattern'] || '$';
  277. if ( 'object' == typeof newValue ) {
  278. if ( undefined !== newValue['desktop'] ) {
  279. selector = ( undefined !== rule['selector']['desktop'] ? rule['selector']['desktop'] : rule['selector'] );
  280. // Define properties.
  281. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  282. if ( undefined == cssArray[ rule['media'] ][ selector ] ) cssArray[ rule['media'] ][ selector ] = {};
  283. var background_type = ( undefined !== newValue['desktop']['type'] && '' !== newValue['desktop']['type'] ? newValue['desktop']['type'] : 'color' );
  284. var color_type = '';
  285. if ( undefined !== newValue['desktop']['color'] && '' !== newValue['desktop']['color'] ) {
  286. if ( newValue['desktop']['color'].includes('palette') ) {
  287. color_type = 'var(--global-' + newValue['desktop']['color'] + ')';
  288. } else {
  289. color_type = newValue['desktop']['color']
  290. }
  291. }
  292. if ( 'image' === background_type ) {
  293. var imageValue = ( undefined !== newValue['desktop']['image'] && undefined !== newValue['desktop']['image']['url'] && '' !== newValue['desktop']['image']['url'] ? 'url(' + newValue['desktop']['image']['url'] + ')' : false );
  294. if ( imageValue ) {
  295. cssArray[ rule['media'] ][ selector ]['background-color'] = color_type;
  296. cssArray[ rule['media'] ][ selector ]['background-image'] = imageValue;
  297. cssArray[ rule['media'] ][ selector ]['background-repeat'] = ( undefined !== newValue['desktop']['image']['repeat'] && '' !== newValue['desktop']['image']['repeat'] ? newValue['desktop']['image']['repeat'] : 'inherit' );
  298. cssArray[ rule['media'] ][ selector ]['background-size'] = ( undefined !== newValue['desktop']['image']['size'] && '' !== newValue['desktop']['image']['size'] ? newValue['desktop']['image']['size'] : 'inherit' );
  299. cssArray[ rule['media'] ][ selector ]['background-position'] = ( undefined !== newValue['desktop']['image']['position'] && undefined !== newValue['desktop']['image']['position']['x'] && '' !== newValue['desktop']['image']['position']['x'] ? `${ newValue['desktop']['image']['position']['x'] * 100 }% ${ newValue['desktop']['image']['position']['y'] * 100 }%` : 'center' );
  300. cssArray[ rule['media'] ][ selector ]['background-attachment'] = ( undefined !== newValue['desktop']['image']['attachment'] && '' !== newValue['desktop']['image']['attachment'] ? newValue['desktop']['image']['attachment'] : 'inherit' );
  301. } else {
  302. if ( '' !== color_type ) {
  303. cssArray[ rule['media'] ][ selector ]['background'] = color_type;
  304. }
  305. }
  306. } else if ( 'gradient' === background_type ) {
  307. var gradientValue = ( undefined !== newValue['desktop']['gradient'] && '' !== newValue['desktop']['gradient'] ? newValue['desktop']['gradient'] : false );
  308. if ( '' !== gradientValue ) {
  309. cssArray[ rule['media'] ][ selector ]['background'] = gradientValue;
  310. }
  311. } else {
  312. if ( '' !== color_type ) {
  313. cssArray[ rule['media'] ][ selector ]['background'] = color_type;
  314. }
  315. }
  316. }
  317. if ( undefined !== newValue['tablet'] ) {
  318. selector = ( undefined !== rule['selector']['tablet'] ? rule['selector']['tablet'] : rule['selector'] );
  319. // Define properties.
  320. if ( undefined == cssArray[ media_tablet ] ) cssArray[ media_tablet ] = {};
  321. if ( undefined == cssArray[ media_tablet ][ selector ] ) cssArray[ media_tablet ][ selector ] = {};
  322. var background_type = ( undefined !== newValue['tablet']['type'] && '' !== newValue['tablet']['type'] ? newValue['tablet']['type'] : 'color' );
  323. var color_type = '';
  324. if ( undefined !== newValue['tablet']['color'] && '' !== newValue['tablet']['color'] ) {
  325. if ( newValue['tablet']['color'].includes('palette') ) {
  326. color_type = 'var(--global-' + newValue['tablet']['color'] + ')';
  327. } else {
  328. color_type = newValue['tablet']['color']
  329. }
  330. }
  331. if ( 'image' === background_type ) {
  332. var imageValue = ( undefined !== newValue['tablet']['image'] && undefined !== newValue['tablet']['image']['url'] && '' !== newValue['tablet']['image']['url'] ? 'url(' + newValue['tablet']['image']['url'] + ')' : false );
  333. if ( imageValue ) {
  334. cssArray[ media_tablet ][ selector ]['background-color'] = color_type;
  335. cssArray[ media_tablet ][ selector ]['background-image'] = imageValue;
  336. cssArray[ media_tablet ][ selector ]['background-repeat'] = ( undefined !== newValue['tablet']['image']['repeat'] && '' !== newValue['tablet']['image']['repeat'] ? newValue['tablet']['image']['repeat'] : 'inherit' );
  337. cssArray[ media_tablet ][ selector ]['background-size'] = ( undefined !== newValue['tablet']['image']['size'] && '' !== newValue['tablet']['image']['size'] ? newValue['tablet']['image']['size'] : 'inherit' );
  338. cssArray[ media_tablet ][ selector ]['background-position'] = ( undefined !== newValue['tablet']['image']['position'] && undefined !== newValue['tablet']['image']['position']['x'] && '' !== newValue['tablet']['image']['position']['x'] ? `${ newValue['tablet']['image']['position']['x'] * 100 }% ${ newValue['tablet']['image']['position']['y'] * 100 }%` : 'center' );
  339. cssArray[ media_tablet ][ selector ]['background-attachment'] = ( undefined !== newValue['tablet']['image']['attachment'] && '' !== newValue['tablet']['image']['attachment'] ? newValue['tablet']['image']['attachment'] : 'inherit' );
  340. } else {
  341. if ( '' !== color_type ) {
  342. cssArray[ media_tablet ][ selector ]['background'] = color_type;
  343. }
  344. }
  345. } else if ( 'gradient' === background_type ) {
  346. var gradientValue = ( undefined !== newValue['tablet']['gradient'] && '' !== newValue['tablet']['gradient'] ? newValue['tablet']['gradient'] : false );
  347. if ( '' !== gradientValue ) {
  348. cssArray[ rule['media'] ][ selector ]['background'] = gradientValue;
  349. }
  350. } else {
  351. if ( '' !== color_type ) {
  352. cssArray[ media_tablet ][ selector ]['background'] = color_type;
  353. }
  354. }
  355. }
  356. if ( undefined !== newValue['mobile'] ) {
  357. selector = ( undefined !== rule['selector']['mobile'] ? rule['selector']['mobile'] : rule['selector'] );
  358. // Define properties.
  359. if ( undefined == cssArray[ media_mobile ] ) cssArray[ media_mobile ] = {};
  360. if ( undefined == cssArray[ media_mobile ][ selector ] ) cssArray[ media_mobile ][ selector ] = {};
  361. var background_type = ( undefined !== newValue['mobile']['type'] && '' !== newValue['mobile']['type'] ? newValue['mobile']['type'] : 'color' );
  362. var color_type = '';
  363. if ( undefined !== newValue['mobile']['color'] && '' !== newValue['mobile']['color'] ) {
  364. if ( newValue['mobile']['color'].includes('palette') ) {
  365. color_type = 'var(--global-' + newValue['mobile']['color'] + ')';
  366. } else {
  367. color_type = newValue['mobile']['color']
  368. }
  369. }
  370. if ( 'image' === background_type ) {
  371. var imageValue = ( undefined !== newValue['mobile']['image'] && undefined !== newValue['mobile']['image']['url'] && '' !== newValue['mobile']['image']['url'] ? 'url(' + newValue['mobile']['image']['url'] + ')' : false );
  372. if ( imageValue ) {
  373. cssArray[ media_mobile ][ selector ]['background-color'] = color_type;
  374. cssArray[ media_mobile ][ selector ]['background-image'] = imageValue;
  375. cssArray[ media_mobile ][ selector ]['background-repeat'] = ( undefined !== newValue['mobile']['image']['repeat'] && '' !== newValue['mobile']['image']['repeat'] ? newValue['mobile']['image']['repeat'] : 'inherit' );
  376. cssArray[ media_mobile ][ selector ]['background-size'] = ( undefined !== newValue['mobile']['image']['size'] && '' !== newValue['mobile']['image']['size'] ? newValue['mobile']['image']['size'] : 'inherit' );
  377. cssArray[ media_mobile ][ selector ]['background-position'] = ( undefined !== newValue['mobile']['image']['position'] && undefined !== newValue['mobile']['image']['position']['x'] && '' !== newValue['mobile']['image']['position']['x'] ? `${ newValue['mobile']['image']['position']['x'] * 100 }% ${ newValue['mobile']['image']['position']['y'] * 100 }%` : 'inherit' );
  378. cssArray[ media_mobile ][ selector ]['background-attachment'] = ( undefined !== newValue['mobile']['image']['attachment'] && '' !== newValue['mobile']['image']['attachment'] ? newValue['mobile']['image']['attachment'] : 'inherit' );
  379. } else {
  380. if ( '' !== color_type ) {
  381. cssArray[ media_mobile ][ selector ]['background'] = color_type;
  382. }
  383. }
  384. } else if ( 'gradient' === background_type ) {
  385. var gradientValue = ( undefined !== newValue['mobile']['gradient'] && '' !== newValue['mobile']['gradient'] ? newValue['mobile']['gradient'] : false );
  386. if ( '' !== gradientValue ) {
  387. cssArray[ rule['media'] ][ selector ]['background'] = gradientValue;
  388. }
  389. } else {
  390. if ( '' !== color_type ) {
  391. cssArray[ media_mobile ][ selector ]['background'] = color_type;
  392. }
  393. }
  394. }
  395. }
  396. } );
  397. // Loop into the sorted array to build CSS string.
  398. _.each( cssArray, function( selectors, media ) {
  399. if ( 'global' !== media ) css += media + '{';
  400. _.each( selectors, function( properties, selector ) {
  401. css += selector + '{';
  402. _.each( properties, function( value, property ) {
  403. css += property + ':' + value + ';';
  404. });
  405. css += '}';
  406. });
  407. if ( 'global' !== media ) css += '}';
  408. });
  409. // Add CSS string to <style> tag.
  410. $style.html( css );
  411. },
  412. live_css_border : function( key, rules, newValue ) {
  413. var styleID = 'kadence-customize-preview-css-' + key,
  414. $style = $( '#' + styleID ),
  415. css = '',
  416. media_tablet = '@media screen and (max-width: 1023px)',
  417. media_mobile = '@media screen and (max-width: 499px)',
  418. selector,
  419. property,
  420. cssArray = {};
  421. // Create <style> tag if doesn't exist.
  422. if ( 0 === $style.length ) {
  423. $style = $( document.createElement( 'style' ) );
  424. $style.attr( 'id', styleID );
  425. $style.attr( 'type', 'text/css' );
  426. // Append <style> tag to <head>.
  427. $style.appendTo( $( 'head' ) );
  428. }
  429. _.each( rules, function( rule ) {
  430. if ( undefined == rule['property'] || undefined == rule['selector'] ) {
  431. return;
  432. }
  433. rule['media'] = rule['media'] || 'global';
  434. rule['pattern'] = rule['pattern'] || '$';
  435. if ( 'object' == typeof newValue ) {
  436. if ( undefined !== newValue['desktop'] ) {
  437. selector = ( undefined !== rule['selector']['desktop'] ? rule['selector']['desktop'] : rule['selector'] );
  438. property = ( undefined !== rule['property']['desktop'] ? rule['property']['desktop'] : rule['property'] );
  439. // Define properties.
  440. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  441. if ( undefined == cssArray[ rule['media'] ][ selector ] ) cssArray[ rule['media'] ][ selector ] = {};
  442. var border_style = ( undefined !== newValue['desktop']['style'] && '' !== newValue['desktop']['style'] ? newValue['desktop']['style'] : 'undefined' );
  443. if ( 'undefined' !== border_style ) {
  444. var color_type = '';
  445. if ( undefined !== newValue['desktop']['color'] && '' !== newValue['desktop']['color'] ) {
  446. if ( newValue['desktop']['color'].includes('palette') ) {
  447. color_type = 'var(--global-' + newValue['desktop']['color'] + ')';
  448. } else {
  449. color_type = newValue['desktop']['color']
  450. }
  451. }
  452. if ( '' !== color_type ) {
  453. cssArray[ rule['media'] ][ selector ][ property ] = ( newValue['desktop']['width'] ? newValue['desktop']['width'] : '0' ) + newValue['desktop']['unit'] + ' ' + border_style + ' ' + color_type;
  454. } else {
  455. cssArray[ rule['media'] ][ selector ][ property ] = ( newValue['desktop']['width'] ? newValue['desktop']['width'] : '0' ) + newValue['desktop']['unit'] + ' ' + border_style + ' ' + 'transparent';
  456. }
  457. }
  458. }
  459. if ( undefined !== newValue['tablet'] && undefined !== newValue['tablet']['width'] && '' !== newValue['tablet']['width'] ) {
  460. selector = ( undefined !== rule['selector']['tablet'] ? rule['selector']['tablet'] : rule['selector'] );
  461. property = ( undefined !== rule['property']['tablet'] ? rule['property']['tablet'] : rule['property'] );
  462. // Define properties.
  463. if ( undefined == cssArray[ media_tablet ] ) cssArray[ media_tablet ] = {};
  464. if ( undefined == cssArray[ media_tablet ][ selector ] ) cssArray[ media_tablet ][ selector ] = {};
  465. var tablet_border_style = ( undefined !== newValue['tablet']['style'] && '' !== newValue['tablet']['style'] ? newValue['tablet']['style'] : '' );
  466. var desktop_border_style = ( undefined !== newValue['desktop']['style'] && '' !== newValue['desktop']['style'] ? newValue['desktop']['style'] : '' );
  467. var border_style = 'undefined';
  468. if ( '' !== tablet_border_style ) {
  469. border_style = tablet_border_style;
  470. } else if ( '' !== desktop_border_style ) {
  471. border_style = desktop_border_style;
  472. }
  473. if ( 'undefined' !== border_style ) {
  474. var color_type = '';
  475. var width = ( newValue['desktop']['width'] ? newValue['desktop']['width'] : '0' );
  476. var unit = ( newValue['desktop']['unit'] ? newValue['desktop']['unit'] : 'px' );
  477. if ( undefined !== newValue['tablet']['color'] && '' !== newValue['tablet']['color'] ) {
  478. if ( newValue['tablet']['color'].includes('palette') ) {
  479. color_type = 'var(--global-' + newValue['tablet']['color'] + ')';
  480. } else {
  481. color_type = newValue['tablet']['color']
  482. }
  483. } else if ( undefined !== newValue['desktop']['color'] && '' !== newValue['desktop']['color'] ) {
  484. if ( newValue['desktop']['color'].includes('palette') ) {
  485. color_type = 'var(--global-' + newValue['desktop']['color'] + ')';
  486. } else {
  487. color_type = newValue['desktop']['color']
  488. }
  489. }
  490. if ( '' !== color_type ) {
  491. cssArray[ media_tablet ][ selector ][ property ] = ( '' !== newValue['tablet']['width'] ? newValue['tablet']['width'] : width ) + ( newValue['tablet']['unit'] ? newValue['tablet']['unit'] : unit ) + ' ' + border_style + ' ' + color_type;
  492. } else {
  493. cssArray[ media_tablet ][ selector ][ property ] = ( '' !== newValue['tablet']['width'] ? newValue['tablet']['width'] : width ) + ( newValue['tablet']['unit'] ? newValue['tablet']['unit'] : unit ) + ' ' + border_style + ' ' + 'transparent';
  494. }
  495. }
  496. }
  497. if ( undefined !== newValue['mobile'] && undefined !== newValue['mobile']['width'] && '' !== newValue['mobile']['width'] ) {
  498. selector = ( undefined !== rule['selector']['mobile'] ? rule['selector']['mobile'] : rule['selector'] );
  499. property = ( undefined !== rule['property']['mobile'] ? rule['property']['mobile'] : rule['property'] );
  500. // Define properties.
  501. if ( undefined == cssArray[ media_mobile ] ) cssArray[ media_mobile ] = {};
  502. if ( undefined == cssArray[ media_mobile ][ selector ] ) cssArray[ media_mobile ][ selector ] = {};
  503. var mobile_border_style = ( undefined !== newValue['mobile']['style'] && '' !== newValue['mobile']['style'] ? newValue['mobile']['style'] : '' );
  504. var tablet_border_style = ( undefined !== newValue['tablet']['style'] && '' !== newValue['tablet']['style'] ? newValue['tablet']['style'] : '' );
  505. var desktop_border_style = ( undefined !== newValue['desktop']['style'] && '' !== newValue['desktop']['style'] ? newValue['desktop']['style'] : '' );
  506. var border_style = 'undefined';
  507. if ( '' !== mobile_border_style ) {
  508. border_style = mobile_border_style;
  509. } else if ( '' !== tablet_border_style ) {
  510. border_style = tablet_border_style;
  511. } else if ( '' !== desktop_border_style ) {
  512. border_style = desktop_border_style;
  513. }
  514. if ( 'undefined' !== border_style ) {
  515. var color_type = '';
  516. var deskWidth = ( newValue['desktop']['width'] ? newValue['desktop']['width'] : '0' );
  517. var deskUnit = ( newValue['desktop']['unit'] ? newValue['desktop']['unit'] : 'px' );
  518. var width = ( newValue['tablet'] && newValue['tablet']['width'] ? newValue['tablet']['width'] : deskWidth );
  519. var unit = ( newValue['tablet'] && newValue['tablet']['unit'] ? newValue['tablet']['unit'] : deskUnit );
  520. if ( undefined !== newValue['mobile']['color'] && '' !== newValue['mobile']['color'] ) {
  521. if ( newValue['mobile']['color'].includes('palette') ) {
  522. color_type = 'var(--global-' + newValue['mobile']['color'] + ')';
  523. } else {
  524. color_type = newValue['mobile']['color']
  525. }
  526. } else if ( undefined !== newValue['tablet'] && undefined !== newValue['tablet']['color'] && '' !== newValue['tablet']['color'] ) {
  527. if ( newValue['tablet']['color'].includes('palette') ) {
  528. color_type = 'var(--global-' + newValue['tablet']['color'] + ')';
  529. } else {
  530. color_type = newValue['tablet']['color']
  531. }
  532. } else if ( undefined !== newValue['desktop']['color'] && '' !== newValue['desktop']['color'] ) {
  533. if ( newValue['desktop']['color'].includes('palette') ) {
  534. color_type = 'var(--global-' + newValue['desktop']['color'] + ')';
  535. } else {
  536. color_type = newValue['desktop']['color']
  537. }
  538. }
  539. if ( '' !== color_type ) {
  540. cssArray[ media_mobile ][ selector ][ property ] = ( '' !== newValue['mobile']['width'] ? newValue['mobile']['width'] : width ) + ( newValue['mobile']['unit'] ? newValue['mobile']['unit'] : unit ) + ' ' + border_style + ' ' + color_type;
  541. } else {
  542. cssArray[ media_mobile ][ selector ][ property ] = ( '' !== newValue['mobile']['width'] ? newValue['mobile']['width'] : width ) + ( newValue['mobile']['unit'] ? newValue['mobile']['unit'] : unit ) + ' ' + border_style + ' ' + 'transparent';
  543. }
  544. }
  545. }
  546. if ( undefined !== newValue['style'] ) {
  547. selector = rule['selector'];
  548. property = rule['property'];
  549. // Define properties.
  550. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  551. if ( undefined == cssArray[ rule['media'] ][ selector ] ) cssArray[ rule['media'] ][ selector ] = {};
  552. var border_style = ( undefined !== newValue['style'] && '' !== newValue['style'] ? newValue['style'] : 'none' );
  553. //if ( 'none' !== border_style ) {
  554. var color_type = '';
  555. if ( undefined !== newValue['color'] && '' !== newValue['color'] ) {
  556. if ( newValue['color'].includes('palette') ) {
  557. color_type = 'var(--global-' + newValue['color'] + ')';
  558. } else {
  559. color_type = newValue['color']
  560. }
  561. }
  562. if ( '' !== color_type ) {
  563. cssArray[ rule['media'] ][ selector ][ property ] = ( newValue['width'] ? newValue['width'] : '0' ) + newValue['unit'] + ' ' + border_style + ' ' + color_type;
  564. } else {
  565. cssArray[ rule['media'] ][ selector ][ property ] = ( newValue['width'] ? newValue['width'] : '0' ) + newValue['unit'] + ' ' + border_style + ' ' + 'transparent';
  566. }
  567. //}
  568. }
  569. }
  570. } );
  571. // Loop into the sorted array to build CSS string.
  572. _.each( cssArray, function( selectors, media ) {
  573. if ( 'global' !== media ) css += media + '{';
  574. _.each( selectors, function( properties, selector ) {
  575. css += selector + '{';
  576. _.each( properties, function( value, property ) {
  577. css += property + ':' + value + ';';
  578. });
  579. css += '}';
  580. });
  581. if ( 'global' !== media ) css += '}';
  582. });
  583. // Add CSS string to <style> tag.
  584. $style.html( css );
  585. },
  586. live_css_boxshadow : function( key, rules, newValue ) {
  587. var styleID = 'kadence-customize-preview-css-' + key,
  588. $style = $( '#' + styleID ),
  589. css = '',
  590. media_tablet = '@media screen and (max-width: 1023px)',
  591. media_mobile = '@media screen and (max-width: 499px)',
  592. selector,
  593. property,
  594. cssArray = {};
  595. // Create <style> tag if doesn't exist.
  596. if ( 0 === $style.length ) {
  597. $style = $( document.createElement( 'style' ) );
  598. $style.attr( 'id', styleID );
  599. $style.attr( 'type', 'text/css' );
  600. // Append <style> tag to <head>.
  601. $style.appendTo( $( 'head' ) );
  602. }
  603. _.each( rules, function( rule ) {
  604. if ( undefined == rule['property'] || undefined == rule['selector'] ) {
  605. return;
  606. }
  607. rule['media'] = rule['media'] || 'global';
  608. rule['pattern'] = rule['pattern'] || '$';
  609. if ( 'object' == typeof newValue ) {
  610. if ( undefined !== newValue['desktop'] ) {
  611. selector = ( undefined !== rule['selector']['desktop'] ? rule['selector']['desktop'] : rule['selector'] );
  612. property = ( undefined !== rule['property']['desktop'] ? rule['property']['desktop'] : rule['property'] );
  613. // Define properties.
  614. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  615. if ( undefined == cssArray[ rule['media'] ][ selector ] ) cssArray[ rule['media'] ][ selector ] = {};
  616. var border_style = ( undefined !== newValue['desktop']['style'] && '' !== newValue['desktop']['style'] ? newValue['desktop']['style'] : 'undefined' );
  617. if ( 'undefined' !== border_style ) {
  618. var color_type = '';
  619. if ( undefined !== newValue['desktop']['color'] && '' !== newValue['desktop']['color'] ) {
  620. if ( newValue['desktop']['color'].includes('palette') ) {
  621. color_type = 'var(--global-' + newValue['desktop']['color'] + ')';
  622. } else {
  623. color_type = newValue['desktop']['color']
  624. }
  625. }
  626. if ( '' !== color_type ) {
  627. cssArray[ rule['media'] ][ selector ][ property ] = ( newValue['desktop']['width'] ? newValue['desktop']['width'] : '0' ) + newValue['desktop']['unit'] + ' ' + border_style + ' ' + color_type;
  628. } else {
  629. cssArray[ rule['media'] ][ selector ][ property ] = ( newValue['desktop']['width'] ? newValue['desktop']['width'] : '0' ) + newValue['desktop']['unit'] + ' ' + border_style + ' ' + 'transparent';
  630. }
  631. }
  632. }
  633. if ( undefined !== newValue['tablet'] ) {
  634. selector = ( undefined !== rule['selector']['tablet'] ? rule['selector']['tablet'] : rule['selector'] );
  635. property = ( undefined !== rule['property']['tablet'] ? rule['property']['tablet'] : rule['property'] );
  636. // Define properties.
  637. if ( undefined == cssArray[ media_tablet ] ) cssArray[ media_tablet ] = {};
  638. if ( undefined == cssArray[ media_tablet ][ selector ] ) cssArray[ media_tablet ][ selector ] = {};
  639. var border_style = ( undefined !== newValue['tablet']['style'] && '' !== newValue['tablet']['style'] ? newValue['tablet']['style'] : newValue['desktop']['style'] );
  640. var border_style_show = ( undefined !== newValue['tablet']['style'] && '' !== newValue['tablet']['style'] ? newValue['tablet']['style'] : 'undefined' );
  641. if ( 'undefined' !== border_style_show ) {
  642. var color_type = '';
  643. var width = ( newValue['desktop']['width'] ? newValue['desktop']['width'] : '0' );
  644. var unit = ( newValue['desktop']['unit'] ? newValue['desktop']['unit'] : 'px' );
  645. if ( undefined !== newValue['tablet']['color'] && '' !== newValue['tablet']['color'] ) {
  646. if ( newValue['tablet']['color'].includes('palette') ) {
  647. color_type = 'var(--global-' + newValue['tablet']['color'] + ')';
  648. } else {
  649. color_type = newValue['tablet']['color']
  650. }
  651. } else if ( undefined !== newValue['desktop']['color'] && '' !== newValue['desktop']['color'] ) {
  652. if ( newValue['desktop']['color'].includes('palette') ) {
  653. color_type = 'var(--global-' + newValue['desktop']['color'] + ')';
  654. } else {
  655. color_type = newValue['desktop']['color']
  656. }
  657. }
  658. if ( '' !== color_type ) {
  659. cssArray[ media_tablet ][ selector ][ property ] = ( newValue['tablet']['width'] ? newValue['tablet']['width'] : width ) + ( newValue['tablet']['unit'] ? newValue['tablet']['unit'] : unit ) + ' ' + border_style + ' ' + color_type;
  660. } else {
  661. cssArray[ media_tablet ][ selector ][ property ] = ( newValue['tablet']['width'] ? newValue['tablet']['width'] : width ) + ( newValue['tablet']['unit'] ? newValue['tablet']['unit'] : unit ) + ' ' + border_style + ' ' + 'transparent';
  662. }
  663. }
  664. }
  665. if ( undefined !== newValue['mobile'] ) {
  666. selector = ( undefined !== rule['selector']['mobile'] ? rule['selector']['mobile'] : rule['selector'] );
  667. property = ( undefined !== rule['property']['mobile'] ? rule['property']['mobile'] : rule['property'] );
  668. // Define properties.
  669. if ( undefined == cssArray[ media_mobile ] ) cssArray[ media_mobile ] = {};
  670. if ( undefined == cssArray[ media_mobile ][ selector ] ) cssArray[ media_mobile ][ selector ] = {};
  671. var border_style = ( undefined !== newValue['mobile']['style'] && '' !== newValue['mobile']['style'] ? newValue['mobile']['style'] : newValue['desktop']['style'] );
  672. var border_style_show = ( undefined !== newValue['mobile']['style'] && '' !== newValue['mobile']['style'] ? newValue['mobile']['style'] : 'undefined' );
  673. if ( 'undefined' !== border_style_show ) {
  674. var color_type = '';
  675. var deskWidth = ( newValue['desktop']['width'] ? newValue['desktop']['width'] : '0' );
  676. var deskUnit = ( newValue['desktop']['unit'] ? newValue['desktop']['unit'] : 'px' );
  677. var width = ( newValue['tablet'] && newValue['tablet']['width'] ? newValue['tablet']['width'] : deskWidth );
  678. var unit = ( newValue['tablet'] && newValue['tablet']['unit'] ? newValue['tablet']['unit'] : deskUnit );
  679. if ( undefined !== newValue['mobile']['color'] && '' !== newValue['mobile']['color'] ) {
  680. if ( newValue['mobile']['color'].includes('palette') ) {
  681. color_type = 'var(--global-' + newValue['mobile']['color'] + ')';
  682. } else {
  683. color_type = newValue['mobile']['color']
  684. }
  685. } else if ( undefined !== newValue['tablet'] && undefined !== newValue['tablet']['color'] && '' !== newValue['tablet']['color'] ) {
  686. if ( newValue['tablet']['color'].includes('palette') ) {
  687. color_type = 'var(--global-' + newValue['tablet']['color'] + ')';
  688. } else {
  689. color_type = newValue['tablet']['color']
  690. }
  691. } else if ( undefined !== newValue['desktop']['color'] && '' !== newValue['desktop']['color'] ) {
  692. if ( newValue['desktop']['color'].includes('palette') ) {
  693. color_type = 'var(--global-' + newValue['desktop']['color'] + ')';
  694. } else {
  695. color_type = newValue['desktop']['color']
  696. }
  697. }
  698. if ( '' !== color_type ) {
  699. cssArray[ media_mobile ][ selector ][ property ] = ( newValue['mobile']['width'] ? newValue['mobile']['width'] : width ) + ( newValue['mobile']['unit'] ? newValue['mobile']['unit'] : unit ) + ' ' + border_style + ' ' + color_type;
  700. } else {
  701. cssArray[ media_mobile ][ selector ][ property ] = ( newValue['mobile']['width'] ? newValue['mobile']['width'] : width ) + ( newValue['mobile']['unit'] ? newValue['mobile']['unit'] : unit ) + ' ' + border_style + ' ' + 'transparent';
  702. }
  703. }
  704. }
  705. if ( undefined !== newValue['color'] ) {
  706. selector = rule['selector'];
  707. property = rule['property'];
  708. // Define properties.
  709. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  710. if ( undefined == cssArray[ rule['media'] ][ selector ] ) cssArray[ rule['media'] ][ selector ] = {};
  711. var inset = ( undefined !== newValue['inset'] && newValue['inset'] ? 'inset' : '' );
  712. //if ( 'none' !== border_style ) {
  713. var color_type = '';
  714. if ( undefined !== newValue['color'] && '' !== newValue['color'] ) {
  715. if ( newValue['color'].includes('palette') ) {
  716. color_type = 'var(--global-' + newValue['color'] + ')';
  717. } else {
  718. color_type = newValue['color']
  719. }
  720. }
  721. if ( '' !== color_type ) {
  722. cssArray[ rule['media'] ][ selector ][ property ] = ( inset ? inset + ' ' : '' ) + ( newValue['hOffset'] ? newValue['hOffset'] : '0' ) + 'px ' + ( newValue['vOffset'] ? newValue['vOffset'] : '0' ) + 'px ' + ( newValue['blur'] ? newValue['blur'] : '0' ) + 'px ' + ( newValue['spread'] ? newValue['spread'] : '0' ) + 'px ' + ' ' + color_type;
  723. } else {
  724. cssArray[ rule['media'] ][ selector ][ property ] = ( inset ? inset + ' ' : '' ) + ( newValue['hOffset'] ? newValue['hOffset'] : '0' ) + 'px ' + ( newValue['vOffset'] ? newValue['vOffset'] : '0' ) + 'px ' + ( newValue['blur'] ? newValue['blur'] : '0' ) + 'px ' + ( newValue['spread'] ? newValue['spread'] : '0' ) + 'px ' + ' ' + 'transparent';
  725. }
  726. //}
  727. }
  728. }
  729. } );
  730. // Loop into the sorted array to build CSS string.
  731. _.each( cssArray, function( selectors, media ) {
  732. if ( 'global' !== media ) css += media + '{';
  733. _.each( selectors, function( properties, selector ) {
  734. css += selector + '{';
  735. _.each( properties, function( value, property ) {
  736. css += property + ':' + value + ';';
  737. });
  738. css += '}';
  739. });
  740. if ( 'global' !== media ) css += '}';
  741. });
  742. // Add CSS string to <style> tag.
  743. $style.html( css );
  744. },
  745. live_css : function( key, rules, newValue ) {
  746. var styleID = 'kadence-customize-preview-css-' + key,
  747. $style = $( '#' + styleID ),
  748. css = '',
  749. media_tablet = '@media screen and (max-width: 1023px)',
  750. media_mobile = '@media screen and (max-width: 499px)',
  751. cssArray = {};
  752. // Create <style> tag if doesn't exist.
  753. if ( 0 === $style.length ) {
  754. $style = $( document.createElement( 'style' ) );
  755. $style.attr( 'id', styleID );
  756. $style.attr( 'type', 'text/css' );
  757. // Append <style> tag to <head>.
  758. $style.appendTo( $( 'head' ) );
  759. }
  760. _.each( rules, function( rule ) {
  761. var formattedValue;
  762. if ( undefined == rule['property'] || undefined == rule['selector'] ) {
  763. return;
  764. }
  765. rule['media'] = rule['media'] || 'global';
  766. rule['pattern'] = rule['pattern'] || '$';
  767. if ( 'object' == typeof newValue ) {
  768. if ( undefined !== rule['key'] && 'measure' === rule['key'] ) {
  769. if ( 'object' == typeof newValue[ 'size' ] && undefined !== newValue[ 'size' ]['desktop'] ) {
  770. if ( undefined !== newValue[ 'size' ]['desktop'] ) {
  771. var unit = ( undefined !== newValue[ 'unit' ] && undefined !== newValue[ 'unit' ]['desktop'] ? newValue[ 'unit' ]['desktop'] : 'px' );
  772. formattedValue = ( '' !== newValue[ 'size' ]['desktop'][0] ? newValue[ 'size' ]['desktop'][0] : '0' ) + unit + ' ' + ( '' !== newValue[ 'size' ]['desktop'][1] ? newValue[ 'size' ]['desktop'][1] : '0' ) + unit + ' ' + ( '' !== newValue[ 'size' ]['desktop'][2] ? newValue[ 'size' ]['desktop'][2] : '0' ) + unit + ' ' + ( '' !== newValue[ 'size' ]['desktop'][3] ? newValue[ 'size' ]['desktop'][3] : '0' ) + unit;
  773. // Define properties.
  774. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  775. if ( undefined == cssArray[ rule['media'] ][ rule['selector' ] ] ) cssArray[ rule['media'] ][ rule['selector' ] ] = {};
  776. cssArray[ rule['media'] ][ rule['selector'] ][ rule['property'] ] = formattedValue;
  777. }
  778. if ( undefined !== newValue[ 'size' ]['tablet'] ) {
  779. var unit = ( undefined !== newValue[ 'unit' ]['tablet'] ? newValue[ 'unit' ]['tablet'] : '' );
  780. formattedValue = ( '' !== newValue[ 'size' ]['tablet'][0] ? newValue[ 'size' ]['tablet'][0] : '0' ) + unit + ' ' + ( '' !== newValue[ 'size' ]['tablet'][1] ? newValue[ 'size' ]['tablet'][1] : '0' ) + unit + ' ' + ( '' !== newValue[ 'size' ]['tablet'][2] ? newValue[ 'size' ]['tablet'][2] : '0' ) + unit + ' ' + ( '' !== newValue[ 'size' ]['tablet'][3] ? newValue[ 'size' ]['tablet'][3] : '0' ) + unit;
  781. // Define properties.
  782. if ( undefined == cssArray[ media_tablet ] ) cssArray[ media_tablet ] = {};
  783. if ( undefined == cssArray[ media_tablet ][ rule['selector' ] ] ) cssArray[ media_tablet ][ rule['selector' ] ] = {};
  784. cssArray[ media_tablet ][ rule['selector'] ][ rule['property'] ] = formattedValue;
  785. }
  786. if ( undefined !== newValue[ 'size' ]['mobile'] ) {
  787. var unit = ( undefined !== newValue[ 'unit' ]['mobile'] ? newValue[ 'unit' ]['mobile'] : '' );
  788. formattedValue = rule['pattern'].replace( '$', newValue[ 'size' ]['mobile'] + unit );
  789. formattedValue = ( '' !== newValue[ 'size' ]['mobile'][0] ? newValue[ 'size' ]['mobile'][0] : '0' ) + unit + ' ' + ( '' !== newValue[ 'size' ]['mobile'][1] ? newValue[ 'size' ]['mobile'][1] : '0' ) + unit + ' ' + ( '' !== newValue[ 'size' ]['mobile'][2] ? newValue[ 'size' ]['mobile'][2] : '0' ) + unit + ' ' + ( '' !== newValue[ 'size' ]['mobile'][3] ? newValue[ 'size' ]['mobile'][3] : '0' ) + unit;
  790. // Define properties.
  791. if ( undefined == cssArray[ media_mobile ] ) cssArray[ media_mobile ] = {};
  792. if ( undefined == cssArray[ media_mobile ][ rule['selector' ] ] ) cssArray[ media_mobile ][ rule['selector' ] ] = {};
  793. cssArray[ media_mobile ][ rule['selector'] ][ rule['property'] ] = formattedValue;
  794. }
  795. } else {
  796. formattedValue = ( newValue[ 'size' ] && '' !== newValue[ 'size' ][0] ? newValue[ 'size' ][0] : '0' ) + ( newValue[ 'unit' ] ? newValue[ 'unit' ] : 'px' ) + ' ' + ( newValue[ 'size' ] && '' !== newValue[ 'size' ][1] ? newValue[ 'size' ][1] : '0' ) + ( newValue[ 'unit' ] ? newValue[ 'unit' ] : 'px' ) + ' ' + ( newValue[ 'size' ] && '' !== newValue[ 'size' ][2] ? newValue[ 'size' ][2] : '0' ) + ( newValue[ 'unit' ] ? newValue[ 'unit' ] : 'px' ) + ' ' + ( newValue[ 'size' ] && '' !== newValue[ 'size' ][3] ? newValue[ 'size' ][3] : '0' ) + ( newValue[ 'unit' ] ? newValue[ 'unit' ] : 'px' );
  797. formattedValue = rule['pattern'].replace( '$', formattedValue );
  798. // Define properties.
  799. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  800. if ( undefined == cssArray[ rule['media'] ][ rule['selector' ] ] ) cssArray[ rule['media'] ][ rule['selector' ] ] = {};
  801. cssArray[ rule['media'] ][ rule['selector'] ][ rule['property'] ] = formattedValue;
  802. }
  803. } else if ( undefined !== rule['key'] && undefined !== newValue[ rule['key'] ] ) {
  804. // Fetch the property newValue using the key from setting value.
  805. if ( 'object' == typeof newValue[ rule['key'] ] ) {
  806. if ( undefined !== newValue[ rule['key'] ]['color'] && '' !== newValue[ rule['key'] ]['color'] ) {
  807. var color_type = ( undefined !== newValue[ rule['key'] ]['is_palette'] && '' !== newValue[ rule['key'] ]['is_palette'] ? 'var(--global-' + newValue[ rule['key'] ]['is_palette'] + ')' : newValue[ rule['key'] ]['color'] );
  808. formattedValue = rule['pattern'].replace( '$', color_type );
  809. // Define properties.
  810. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  811. if ( undefined == cssArray[ rule['media'] ][ rule['selector' ] ] ) cssArray[ rule['media'] ][ rule['selector' ] ] = {};
  812. cssArray[ rule['media'] ][ rule['selector'] ][ rule['property'] ] = formattedValue;
  813. }
  814. if ( undefined !== newValue[ rule['key'] ]['desktop'] ) {
  815. var unit = ( undefined !== newValue[ 'unit' ]['desktop'] ? newValue[ 'unit' ]['desktop'] : '' );
  816. formattedValue = rule['pattern'].replace( '$', newValue[ rule['key'] ]['desktop'] + unit );
  817. // Define properties.
  818. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  819. if ( undefined == cssArray[ rule['media'] ][ rule['selector' ] ] ) cssArray[ rule['media'] ][ rule['selector' ] ] = {};
  820. cssArray[ rule['media'] ][ rule['selector'] ][ rule['property'] ] = formattedValue;
  821. }
  822. if ( undefined !== newValue[ rule['key'] ]['tablet'] ) {
  823. var unit = ( undefined !== newValue[ 'unit' ]['tablet'] ? newValue[ 'unit' ]['tablet'] : '' );
  824. formattedValue = rule['pattern'].replace( '$', newValue[ rule['key'] ]['tablet'] + unit );
  825. // Define properties.
  826. if ( undefined == cssArray[ media_tablet ] ) cssArray[ media_tablet ] = {};
  827. if ( undefined == cssArray[ media_tablet ][ rule['selector' ] ] ) cssArray[ media_tablet ][ rule['selector' ] ] = {};
  828. cssArray[ media_tablet ][ rule['selector'] ][ rule['property'] ] = formattedValue;
  829. }
  830. if ( undefined !== newValue[ rule['key'] ]['mobile'] ) {
  831. var unit = ( undefined !== newValue[ 'unit' ]['mobile'] ? newValue[ 'unit' ]['mobile'] : '' );
  832. formattedValue = rule['pattern'].replace( '$', newValue[ rule['key'] ]['mobile'] + unit );
  833. // Define properties.
  834. if ( undefined == cssArray[ media_mobile ] ) cssArray[ media_mobile ] = {};
  835. if ( undefined == cssArray[ media_mobile ][ rule['selector' ] ] ) cssArray[ media_mobile ][ rule['selector' ] ] = {};
  836. cssArray[ media_mobile ][ rule['selector'] ][ rule['property'] ] = formattedValue;
  837. }
  838. } else {
  839. if ( rule['key'] === 'size' ) {
  840. formattedValue = newValue[ rule['key'] ] + ( newValue[ 'unit' ] ? newValue[ 'unit' ] : 'px' );
  841. } else if ( typeof newValue[ rule['key'] ] === 'string' && newValue[ rule['key'] ].includes('palette') ) {
  842. formattedValue = 'var(--global-' + newValue[ rule['key'] ] + ')';
  843. } else {
  844. formattedValue = newValue[ rule['key'] ];
  845. }
  846. formattedValue = rule['pattern'].replace( '$', formattedValue );
  847. // Define properties.
  848. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  849. if ( undefined == cssArray[ rule['media'] ][ rule['selector' ] ] ) cssArray[ rule['media'] ][ rule['selector' ] ] = {};
  850. cssArray[ rule['media'] ][ rule['selector'] ][ rule['property'] ] = formattedValue;
  851. }
  852. }
  853. } else {
  854. // Define new value based on the specified pattern.
  855. formattedValue = rule['pattern'].replace( '$', newValue );
  856. // Define properties.
  857. if ( undefined == cssArray[ rule['media'] ] ) cssArray[ rule['media'] ] = {};
  858. if ( undefined == cssArray[ rule['media'] ][ rule['selector' ] ] ) cssArray[ rule['media'] ][ rule['selector' ] ] = {};
  859. cssArray[ rule['media'] ][ rule['selector'] ][ rule['property'] ] = formattedValue;
  860. }
  861. });
  862. // Loop into the sorted array to build CSS string.
  863. _.each( cssArray, function( selectors, media ) {
  864. if ( 'global' !== media ) css += media + '{';
  865. _.each( selectors, function( properties, selector ) {
  866. css += selector + '{';
  867. _.each( properties, function( value, property ) {
  868. css += property + ':' + value + ';';
  869. });
  870. css += '}';
  871. });
  872. if ( 'global' !== media ) css += '}';
  873. });
  874. // Add CSS string to <style> tag.
  875. $style.html( css );
  876. },
  877. live_class : function( key, rules, newValue ) {
  878. _.each( rules, function( rule ) {
  879. var formattedValue;
  880. if ( undefined == rule['selector'] ) {
  881. return;
  882. }
  883. rule['pattern'] = rule['pattern'] || '$';
  884. if ( 'object' == typeof newValue ) {
  885. if ( undefined !== rule['key'] && undefined !== newValue[ rule['key'] ] ) {
  886. // Fetch the property newValue using the key from setting value.
  887. if ( 'object' == typeof newValue[ rule['key'] ] ) {
  888. if ( undefined !== newValue[ rule['key'] ]['desktop'] && '' !== newValue[ rule['key'] ]['desktop'] ) {
  889. if ( undefined !== rule['pattern']['desktop'] ) {
  890. var regex = new RegExp( rule['pattern']['desktop'].replace( '$', '[\\w\\-]+' ), 'i' );
  891. var device_pattern = rule['pattern']['desktop'];
  892. } else {
  893. var regex = new RegExp( rule['pattern'].replace( '$', '[\\w\\-]+' ), 'i' );
  894. var device_pattern = rule['pattern'];
  895. }
  896. if ( undefined !== rule['selector']['desktop'] ) {
  897. var items = document.querySelectorAll( rule['selector']['desktop'] );
  898. } else {
  899. var items = document.querySelectorAll( rule['selector'] );
  900. }
  901. formattedValue = device_pattern.replace( '$', newValue[ rule['key'] ]['desktop'] );
  902. items.forEach(function( item ) {
  903. if ( item.className.match( regex ) ) {
  904. item.className = item.className.replace( regex, formattedValue );
  905. } else {
  906. item.className += ' ' + formattedValue;
  907. }
  908. });
  909. }
  910. if ( undefined !== newValue[ rule['key'] ]['tablet'] && '' !== newValue[ rule['key'] ]['tablet'] ) {
  911. if ( undefined !== rule['pattern']['tablet'] ) {
  912. var regex = new RegExp( rule['pattern']['tablet'].replace( '$', '[\\w\\-]+' ), 'i' );
  913. var device_pattern = rule['pattern']['tablet'];
  914. } else {
  915. var regex = new RegExp( rule['pattern'].replace( '$', '[\\w\\-]+' ), 'i' );
  916. var device_pattern = rule['pattern'];
  917. }
  918. if ( undefined !== rule['selector']['tablet'] ) {
  919. var items = document.querySelectorAll( rule['selector']['tablet'] );
  920. } else {
  921. var items = document.querySelectorAll( rule['selector'] );
  922. }
  923. formattedValue = device_pattern.replace( '$', newValue[ rule['key'] ]['tablet'] );
  924. items.forEach(function( item ) {
  925. if ( item.className.match( regex ) ) {
  926. item.className = item.className.replace( regex, formattedValue );
  927. } else {
  928. item.className += ' ' + formattedValue;
  929. }
  930. });
  931. }
  932. if ( undefined !== newValue[ rule['key'] ]['mobile'] && '' !== newValue[ rule['key'] ]['mobile'] ) {
  933. if ( undefined !== rule['pattern']['mobile'] ) {
  934. var regex = new RegExp( rule['pattern']['mobile'].replace( '$', '[\\w\\-]+' ), 'i' );
  935. var device_pattern = rule['pattern']['mobile'];
  936. } else {
  937. var regex = new RegExp( rule['pattern'].replace( '$', '[\\w\\-]+' ), 'i' );
  938. var device_pattern = rule['pattern'];
  939. }
  940. if ( undefined !== rule['selector']['mobile'] ) {
  941. var items = document.querySelectorAll( rule['selector']['mobile'] );
  942. } else {
  943. var items = document.querySelectorAll( rule['selector'] );
  944. }
  945. formattedValue = device_pattern.replace( '$', newValue[ rule['key'] ]['mobile'] );
  946. items.forEach(function( item ) {
  947. if ( item.className.match( regex ) ) {
  948. item.className = item.className.replace( regex, formattedValue );
  949. } else {
  950. item.className += ' ' + formattedValue;
  951. }
  952. });
  953. }
  954. } else {
  955. var regex = new RegExp( rule['pattern'].replace( '$', '[\\w\\-]+' ), 'i' ),
  956. items = document.querySelectorAll( rule['selector'] ),
  957. formattedValue = rule['pattern'].replace( '$', newValue[ rule['key'] ] );
  958. items.forEach(function( item ) {
  959. if ( item.className.match( regex ) ) {
  960. item.className = item.className.replace( regex, formattedValue );
  961. } else {
  962. item.className += ' ' + formattedValue;
  963. }
  964. });
  965. }
  966. } else {
  967. if ( undefined !== newValue['desktop'] && '' !== newValue['desktop'] ) {
  968. if ( undefined !== rule['pattern']['desktop'] ) {
  969. var regex = new RegExp( rule['pattern']['desktop'].replace( '$', '[\\w\\-]+' ), 'i' );
  970. var device_pattern = rule['pattern']['desktop'];
  971. } else {
  972. var regex = new RegExp( rule['pattern'].replace( '$', '[\\w\\-]+' ), 'i' );
  973. var device_pattern = rule['pattern'];
  974. }
  975. if ( undefined !== rule['selector']['desktop'] ) {
  976. var items = document.querySelectorAll( rule['selector']['desktop'] );
  977. } else {
  978. var items = document.querySelectorAll( rule['selector'] );
  979. }
  980. formattedValue = device_pattern.replace( '$', newValue['desktop'] );
  981. items.forEach(function( item ) {
  982. if ( item.className.match( regex ) ) {
  983. item.className = item.className.replace( regex, formattedValue );
  984. } else {
  985. item.className += ' ' + formattedValue;
  986. }
  987. });
  988. }
  989. if ( undefined !== newValue['tablet'] && '' !== newValue['tablet'] ) {
  990. if ( undefined !== rule['pattern']['tablet'] ) {
  991. var regex = new RegExp( rule['pattern']['tablet'].replace( '$', '[\\w\\-]+' ), 'i' );
  992. var device_pattern = rule['pattern']['tablet'];
  993. } else {
  994. var regex = new RegExp( rule['pattern'].replace( '$', '[\\w\\-]+' ), 'i' );
  995. var device_pattern = rule['pattern'];
  996. }
  997. if ( undefined !== rule['selector']['tablet'] ) {
  998. var items = document.querySelectorAll( rule['selector']['tablet'] );
  999. } else {
  1000. var items = document.querySelectorAll( rule['selector'] );
  1001. }
  1002. formattedValue = device_pattern.replace( '$', newValue['tablet'] );
  1003. items.forEach(function( item ) {
  1004. if ( item.className.match( regex ) ) {
  1005. item.className = item.className.replace( regex, formattedValue );
  1006. } else {
  1007. item.className += ' ' + formattedValue;
  1008. }
  1009. });
  1010. }
  1011. if ( undefined !== newValue['mobile'] && '' !== newValue['mobile'] ) {
  1012. if ( undefined !== rule['pattern']['mobile'] ) {
  1013. var regex = new RegExp( rule['pattern']['mobile'].replace( '$', '[\\w\\-]+' ), 'i' );
  1014. var device_pattern = rule['pattern']['mobile'];
  1015. } else {
  1016. var regex = new RegExp( rule['pattern'].replace( '$', '[\\w\\-]+' ), 'i' );
  1017. var device_pattern = rule['pattern'];
  1018. }
  1019. if ( undefined !== rule['selector']['mobile'] ) {
  1020. var items = document.querySelectorAll( rule['selector']['mobile'] );
  1021. } else {
  1022. var items = document.querySelectorAll( rule['selector'] );
  1023. }
  1024. formattedValue = device_pattern.replace( '$', newValue['mobile'] );
  1025. items.forEach(function( item ) {
  1026. if ( item.className.match( regex ) ) {
  1027. item.className = item.className.replace( regex, formattedValue );
  1028. } else {
  1029. item.className += ' ' + formattedValue;
  1030. }
  1031. });
  1032. }
  1033. }
  1034. } else {
  1035. var regex = new RegExp( rule['pattern'].replace( '$', '[\\w\\-]+' ), 'i' ),
  1036. items = document.querySelectorAll( rule['selector'] ),
  1037. formattedValue = rule['pattern'].replace( '$', newValue );
  1038. items.forEach(function( item ) {
  1039. if ( item.className.match( regex ) ) {
  1040. item.className = item.className.replace( regex, formattedValue );
  1041. } else {
  1042. item.className += ' ' + formattedValue;
  1043. }
  1044. });
  1045. }
  1046. });
  1047. },
  1048. live_palette: function( key, rules, newValue ) {
  1049. var palette = JSON.parse( newValue );
  1050. var active = ( palette && palette['active'] ? palette['active'] : 'palette' );
  1051. if ( palette && palette[ active ] ) {
  1052. _.each( palette[ active ], function( color ) {
  1053. if ( color.slug && color.color ) {
  1054. document.documentElement.style.setProperty('--global-' + color.slug, color.color );
  1055. }
  1056. } );
  1057. }
  1058. },
  1059. live_global: function( key, rules, newValue ) {
  1060. _.each( rules, function( rule ) {
  1061. var formattedValue;
  1062. if ( undefined == rule['property'] || undefined == rule['selector'] ) {
  1063. return;
  1064. }
  1065. rule['media'] = rule['media'] || 'global';
  1066. rule['pattern'] = rule['pattern'] || '$';
  1067. if ( 'object' == typeof newValue ) {
  1068. if ( undefined !== rule['key'] && undefined !== newValue[ rule['key'] ] ) {
  1069. // Fetch the property newValue using the key from setting value.
  1070. if ( typeof newValue[ rule['key'] ] === 'string' && newValue[ rule['key'] ].includes('palette') ) {
  1071. formattedValue = 'var(--global-' + newValue[ rule['key'] ] + ')';
  1072. } else {
  1073. formattedValue = newValue[ rule['key'] ];
  1074. }
  1075. formattedValue = rule['pattern'].replace( '$', formattedValue );
  1076. // Define properties.
  1077. document.documentElement.style.setProperty(rule['selector'], formattedValue );
  1078. }
  1079. }
  1080. });
  1081. },
  1082. live_html: function( key, rules, newValue ) {
  1083. _.each( rules, function( rule ) {
  1084. var value = newValue;
  1085. if ( undefined == rule['selector'] ) return;
  1086. rule['pattern'] = rule['pattern'] || '$';
  1087. var elements = document.querySelectorAll( rule['selector'] ),
  1088. formattedValue = rule['pattern'].replace( '$', value );
  1089. // Change innerHTML on all targeted elements.
  1090. elements.forEach(function( element ) {
  1091. if ( undefined !== rule['property'] ) {
  1092. element.setAttribute( rule['property'], formattedValue );
  1093. } else {
  1094. element.innerHTML = formattedValue;
  1095. }
  1096. });
  1097. });
  1098. }
  1099. };
  1100. if ( kadenceCustomizerPreviewData && kadenceCustomizerPreviewData.liveControl ) {
  1101. _.each( kadenceCustomizerPreviewData.liveControl, function( liveControl, key ) {
  1102. var eachLiveControl = {};
  1103. _.each( liveControl, function( rule ) {
  1104. var type = rule['type'];
  1105. if ( undefined == eachLiveControl[ type ] ) eachLiveControl[ type ] = [];
  1106. eachLiveControl[ type ].push( rule );
  1107. });
  1108. wp.customize( key, function( value ) {
  1109. value.bind( function( newValue ) {
  1110. _.each( eachLiveControl, function( rule, type ) {
  1111. var functionName = 'live_'.concat( type );
  1112. kadenceCustomizer[ functionName ]( key, rule, newValue );
  1113. });
  1114. });
  1115. });
  1116. });
  1117. }
  1118. $( document ).on( 'customize-preview-menu-refreshed', function( e, params ) {
  1119. if ( params.wpNavMenuArgs.show_toggles ) {
  1120. window.kadence.initMobileToggleSub();
  1121. }
  1122. });
  1123. } )( jQuery );