fl-builder-node-code-settings.js 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. ( function( $ ) {
  2. var CodeSettings = {
  3. currentNodeId: null,
  4. init: function() {
  5. FLBuilder.addHook( 'settings-form-init', CodeSettings.settingsFormInit );
  6. FLBuilder.addHook( 'didSaveNodeSettingsComplete', CodeSettings.clearPreview );
  7. },
  8. clearPreview: function() {
  9. $( 'style.fl-builder-node-preview' ).remove();
  10. },
  11. settingsFormInit: function() {
  12. var style = $( 'style.fl-builder-node-preview' );
  13. var form = $( '.fl-builder-settings[data-node]' );
  14. var cssInput = $( '#fl-field-bb_css_code textarea' );
  15. if ( form.length ) {
  16. CodeSettings.currentNodeId = form.attr( 'data-node' );
  17. form.find( '.fl-builder-settings-cancel' ).on( 'click', CodeSettings.clearPreview );
  18. }
  19. if ( ! style.length ) {
  20. $( 'head' ).append( '<style class="fl-builder-node-preview"></style>' );
  21. }
  22. if ( cssInput.length ) {
  23. cssInput.on( 'change', CodeSettings.cssChanged );
  24. }
  25. },
  26. cssChanged: function( e ) {
  27. var prefix = '.fl-node-' + CodeSettings.currentNodeId;
  28. var css = CSSScoper.scope( $( e.target ).val(), prefix );
  29. $( 'style.fl-builder-node-preview' ).html( css );
  30. },
  31. };
  32. var CSSScoper = {
  33. scope: function( rules, className ) {
  34. var classLen = className.length, char, nextChar, isAt, isIn;
  35. className += ' ';
  36. rules = rules.replace( /\/\*(?:(?!\*\/)[\s\S])*\*\/|[\r\n\t]+/g, '' );
  37. rules = rules.replace( /}(\s*)@/g, '}@' );
  38. rules = rules.replace( /}(\s*)}/g, '}}' );
  39. for ( var i = 0; i < rules.length - 2; i++ ) {
  40. char = rules[ i ];
  41. nextChar = rules[ i + 1 ];
  42. if ( char === '@' ) {
  43. isAt = true;
  44. }
  45. if ( ! isAt && char === '{' ) {
  46. isIn = true;
  47. }
  48. if ( isIn && char === '}' ) {
  49. isIn = false;
  50. }
  51. if (
  52. !isIn &&
  53. nextChar !== '@' &&
  54. nextChar !== '}' &&
  55. (
  56. char === '}' ||
  57. char === ',' ||
  58. ( ( char === '{' || char === ';' ) && isAt )
  59. )
  60. ) {
  61. rules = rules.slice( 0, i + 1 ) + className + rules.slice( i + 1 );
  62. i += classLen;
  63. isAt = false;
  64. }
  65. };
  66. if ( rules.indexOf( className ) !== 0 && rules.indexOf( '@' ) !== 0 ) {
  67. rules = className + rules;
  68. }
  69. return CSSScoper.fixKeyframes( rules, className );
  70. },
  71. fixKeyframes: function( rules, className ) {
  72. var toRegex = new RegExp( '\\' + className + '\\s?to\\s?\\{', 'g' );
  73. var fromRegex = new RegExp( '\\' + className + '\\s?from\\s?\\{', 'g' );
  74. rules = rules.replace( toRegex, 'to {' );
  75. rules = rules.replace( fromRegex, 'from {' );
  76. return rules;
  77. }
  78. };
  79. $( CodeSettings.init );
  80. } )( jQuery );