fl-builder-responsive-preview.js 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  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. this.render();
  17. },
  18. /**
  19. * Exits responsive preview mode.
  20. *
  21. * @since 2.0.6
  22. * @method exit
  23. */
  24. exit: function() {
  25. this.destroy();
  26. },
  27. /**
  28. * Switch to a different device preview size.
  29. *
  30. * @since 2.0.6
  31. * @param {String} mode
  32. * @method switchTo
  33. */
  34. switchTo: function( mode ) {
  35. var settings = FLBuilderConfig.global,
  36. frame = $( '#fl-builder-preview-frame' ),
  37. width = '100%';
  38. if ( 'responsive' == mode ) {
  39. width = settings.responsive_breakpoint >= 360 ? 360 : settings.responsive_breakpoint;
  40. frame.width( width );
  41. } else if ( 'medium' == mode ) {
  42. width = settings.medium_breakpoint >= 769 ? 769 : settings.medium_breakpoint;
  43. frame.width( width );
  44. }
  45. frame.width( width );
  46. },
  47. /**
  48. * Renders the iframe for previewing the layout.
  49. *
  50. * @since 2.0.6
  51. * @method render
  52. */
  53. render: function() {
  54. var body = $( 'body' ),
  55. src = FLBuilderConfig.previewUrl,
  56. last = $( '#fl-builder-preview-mask, #fl-builder-preview-frame' ),
  57. mask = $( '<div id="fl-builder-preview-mask"></div>' ),
  58. frame = $( '<iframe id="fl-builder-preview-frame" src="' + src + '" frameborder="0"></iframe>' );
  59. last.remove();
  60. body.append( mask );
  61. body.append( frame );
  62. },
  63. /**
  64. * Removes the iframe for previewing the layout.
  65. *
  66. * @since 2.0.6
  67. * @method destroy
  68. */
  69. destroy: function() {
  70. $( '#fl-builder-preview-mask, #fl-builder-preview-frame' ).remove();
  71. },
  72. }
  73. } )( jQuery );