fl-builder-responsive-preview.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. ( function( $ ) {
  2. /**
  3. * Helper for handling responsive preview in an iframe.
  4. *
  5. * @since 2.0.6
  6. * @class FLBuilderResponsivePreview
  7. */
  8. FLBuilderResponsivePreview = {
  9. /**
  10. * Enters responsive preview mode.
  11. *
  12. * @since 2.0.6
  13. * @method enter
  14. */
  15. enter: function() {
  16. FL.Builder.getActions().displayPanel( null );
  17. FLBuilder.UIIFrame.exitResponsiveEditing();
  18. this.render();
  19. },
  20. /**
  21. * Exits responsive preview mode.
  22. *
  23. * @since 2.0.6
  24. * @method exit
  25. */
  26. exit: function() {
  27. this.destroy();
  28. },
  29. /**
  30. * Switch to a different device preview size.
  31. *
  32. * @since 2.0.6
  33. * @param {String} mode
  34. * @method switchTo
  35. */
  36. switchTo: function( mode ) {
  37. var settings = FLBuilderConfig.global,
  38. frame = $( '#fl-builder-preview-frame' ),
  39. width = '100%';
  40. if ( 'responsive' == mode ) {
  41. width = ( '1' !== settings.responsive_preview && settings.responsive_breakpoint >= 360 ) ? 360 : settings.responsive_breakpoint;
  42. frame.width( width );
  43. } else if ( 'medium' == mode ) {
  44. width = ( '1' !== settings.responsive_preview && settings.medium_breakpoint >= 769 ) ? 769 : settings.medium_breakpoint;
  45. frame.width( width );
  46. } else if ( 'large' == mode ) {
  47. width = ( '1' !== settings.responsive_preview && settings.large_breakpoint >= 1200 ) ? 1200 : settings.large_breakpoint;
  48. frame.width( width );
  49. }
  50. frame.width( width );
  51. },
  52. /**
  53. * Renders the iframe for previewing the layout.
  54. *
  55. * @since 2.0.6
  56. * @method render
  57. */
  58. render: function() {
  59. var body = $( 'body' ),
  60. src = FLBuilderConfig.previewUrl,
  61. last = $( '#fl-builder-preview-mask, #fl-builder-preview-frame' ),
  62. mask = $( '<div id="fl-builder-preview-mask"></div>' ),
  63. frame = $( '<iframe id="fl-builder-preview-frame" frameborder="0" src="' + src + '"></iframe>' );
  64. last.remove();
  65. body.append( mask );
  66. body.append( frame );
  67. body.css( 'overflow', 'hidden' );
  68. },
  69. _showSize: function(mode) {
  70. var show_size = $('.fl-builder--preview-actions .size' ),
  71. large = ( '1' === FLBuilderConfig.global.responsive_preview ) ? FLBuilderConfig.global.large_breakpoint : 1200,
  72. medium = ( '1' === FLBuilderConfig.global.responsive_preview ) ? FLBuilderConfig.global.medium_breakpoint : 769,
  73. responsive = ( '1' === FLBuilderConfig.global.responsive_preview ) ? FLBuilderConfig.global.responsive_breakpoint : 360,
  74. size_text = '';
  75. if ( 'responsive' === mode ) {
  76. size_text = FLBuilderStrings.mobile + ' ' + responsive + 'px';
  77. } else if ( 'medium' === mode ) {
  78. size_text = FLBuilderStrings.medium + ' ' + medium + 'px';
  79. } else if ( 'large' === mode ) {
  80. size_text = FLBuilderStrings.large + ' ' + large + 'px';
  81. }
  82. if ( ! size_text ) {
  83. show_size.hide();
  84. } else {
  85. show_size.show();
  86. }
  87. show_size.html('').html(size_text)
  88. },
  89. /**
  90. * Removes the iframe for previewing the layout.
  91. *
  92. * @since 2.0.6
  93. * @method destroy
  94. */
  95. destroy: function() {
  96. $( '#fl-builder-preview-mask, #fl-builder-preview-frame' ).remove();
  97. $( 'body' ).css( 'overflow', 'visible' );
  98. $('.fl-builder--preview-actions .size' ).html('');
  99. },
  100. }
  101. } )( jQuery );