iframe implemented

app/Application.php

@@ -3,6 +3,7 @@
 use App\Assets\BlocksScripts;
 use App\Assets\BuildModeScripts;
 use App\Assets\OnepageScripts;
+use App\Assets\PreviewScripts;
 use App\Assets\WpConflictResolver;
 use App\Content\OnepageContent;
 use App\Content\OnepageInternalScripts;
@@ -42,9 +43,9 @@ protected function enqueue_assets() {
     new OnepageScripts();
     new BlocksScripts();
     new BuildModeScripts();
+    new PreviewScripts();
 
-
-    add_action( 'wp_enqueue_scripts', [ $this, 'compile_assets' ], 1000);
+    add_action( 'wp_enqueue_scripts', [ $this, 'compile_assets' ], 100000);
   }
 
   public function compile_assets() {

app/Assets/BlocksScripts.php

@@ -6,7 +6,7 @@ public function __construct() {
   }
 
   public function enqueue() {
-    if ( $this->isBuildMode() ) {
+    if ( $this->isPreview() ) {
       $this->enqueueAllBlocksScripts();
     } else {
       $pageId   = $this->getCurrentPageId();
@@ -58,8 +58,8 @@ protected function enqueueBlockScripts( $block ) {
   /**
    * @return mixed
    */
-  protected function isBuildMode() {
-    return onepager()->content()->isBuildMode();
+  protected function isPreview() {
+    return onepager()->content()->isPreview();
   }
 
   /**

app/Assets/BuildModeScripts.php

@@ -6,25 +6,32 @@ class BuildModeScripts {
   use FormEngineScripts;
 
   public function __construct() {
-    add_action( 'wp_enqueue_scripts', [ $this, 'enqueueScripts' ],  100 );
+    add_action( 'wp_enqueue_scripts', [ $this, 'enqueueScripts' ], 99999 );
   }
 
   public function enqueueScripts() {
     if ( ! $this->isBuildMode() ) {
-      return false;
+      return;
     }
 
+    $this->resetWpScriptQueue();
+
     $this->enqueueFormEngineScripts();
     $this->enqueueInitializerScript();
   }
 
   protected function enqueueInitializerScript() {
-    $pageId = $this->getCurrentPageId();
     $asset  = onepager()->asset();
+    $pageId = $this->getCurrentPageId();
     $data   = $this->localizeScriptData( $pageId );
 
+    $asset->style( 'tx-bootstrap', op_asset( 'assets/css/bootstrap.css' ) );
+    $asset->script( 'tx-bootstrap', op_asset( 'assets/js/bootstrap.js' ), [ 'jquery' ] );
 
-    $asset->script( 'onepager', asset( 'assets/app.bundle.js' ), [ 'jquery' ] );
+    $asset->style( 'tx-animate', op_asset( 'assets/css/animate.css' ) );
+    $asset->style( 'tx-fontawesome', op_asset( 'assets/css/font-awesome.css' ) );
+
+    $asset->script( 'onepager', op_asset( 'assets/onepager-builder.bundle.js' ), [ 'jquery' ] );
     $asset->localizeScript( 'onepager', $data, 'onepager' );
   }
 
@@ -88,4 +95,9 @@ protected function isBuildMode() {
   protected function getCurrentPageId() {
     return onepager()->content()->getCurrentPageId();
   }
+
+  private function resetWpScriptQueue() {
+    wp_scripts()->queue = [ ];
+    wp_styles()->queue  = [ ];
+  }
 }

app/Assets/OnepageScripts.php

@@ -1,12 +1,8 @@
 <?php namespace App\Assets;
 
-use App\Assets\Traits\CommonAssets;
-
 class OnepageScripts {
-  use CommonAssets;
-
   public function __construct() {
-    add_action( 'wp_enqueue_scripts', [$this, 'enqueueScripts'], 100);
+    add_action( 'wp_enqueue_scripts', [$this, 'enqueueScripts']);
   }
 
   public function enqueueScripts() {
@@ -21,13 +17,29 @@ public function enqueueScripts() {
   protected function enqueuePageScripts(){
     $asset = onepager()->asset();
 
-    $asset->script( 'wow', asset( 'assets/js/wow.js' ), [ 'jquery' ] );
-    $asset->script( 'nicescroll', asset( 'assets/js/jquery.nicescroll.js' ), [ 'jquery' ] );
-    $asset->script( 'lithium', asset( 'assets/lithium.js' ), [ 'jquery' ] );
-    $asset->style( 'lithium', asset( 'assets/css/lithium.css' ) );
+    $asset->script( 'wow', op_asset( 'assets/js/wow.js' ), [ 'jquery' ] );
+    $asset->script( 'nicescroll', op_asset( 'assets/js/jquery.nicescroll.js' ), [ 'jquery' ] );
+    $asset->script( 'lithium', op_asset( 'assets/lithium.js' ), [ 'jquery' ] );
+    $asset->style( 'lithium', op_asset( 'assets/css/lithium.css' ) );
 
     if ( is_super_admin() && ! onepager()->content()->isBuildMode() ) {
-      $asset->style( 'lithium-ui', asset( 'assets/css/lithium-builder.css' ) );
+      $asset->style( 'lithium-ui', op_asset( 'assets/css/lithium-builder.css' ) );
+    }
+  }
+
+  public function enqueueCommonScripts() {
+    $asset = onepager()->asset();
+
+    if ( $this->shouldLoadTwitterBootstrap() ) {
+      $asset->style( 'bootstrap', op_asset( 'assets/css/bootstrap.css' ) );
+      $asset->script( 'bootstrap', op_asset( 'assets/js/bootstrap.js' ), [ 'jquery' ] );
     }
+
+    $asset->style( 'animatecss', op_asset( 'assets/css/animate.css' ) );
+    $asset->style( 'fontawesome', op_asset( 'assets/css/font-awesome.css' ) );
+  }
+
+  protected function shouldLoadTwitterBootstrap() {
+    return !defined( 'ONEPAGER_BOOTSTRAP' ) ? true : ONEPAGER_BOOTSTRAP;
   }
 }

app/Assets/OptionsPanelScripts.php

@@ -1,19 +1,16 @@
 <?php namespace App\Assets;
 
-use App\Assets\Traits\CommonAssets;
 use App\Assets\Traits\FormEngineScripts;
 
 class OptionsPanelScripts {
-  use CommonAssets;
   use FormEngineScripts;
 
   public function enqueue(  ) {
-    $this->enqueueCommonScripts();
     $this->enqueueFormEngineScripts();
 
     $asset = onepager()->asset();
-    $asset->style( 'lithium-ui', asset( 'assets/css/lithium-builder.css' ) );
-    $asset->script( 'admin-bundle', asset( 'assets/optionspanel.bundle.js' ), [ 'jquery' ] );
+    $asset->style( 'lithium-ui', op_asset( 'assets/css/lithium-builder.css' ) );
+    $asset->script( 'admin-bundle', op_asset( 'assets/optionspanel.bundle.js' ), [ 'jquery' ] );
     $asset->enqueue();
   }
 }

app/Assets/PreviewScripts.php

@@ -0,0 +1,24 @@
+<?php namespace App\Assets;
+
+class PreviewScripts {
+  public function __construct() {
+    add_action( 'wp_enqueue_scripts', [ $this, 'enqueue' ] );
+  }
+
+  public function enqueue() {
+    $asset  = onepager()->asset();
+
+    if ( !$this->isPreview() ) {
+      return;
+    }
+
+    $asset->script( 'onepager-preview', op_asset( 'assets/onepager-preview.bundle.js' ), [ 'jquery' ] );
+  }
+
+  /**
+   * @return mixed
+   */
+  protected function isPreview() {
+    return onepager()->content()->isPreview();
+  }
+}

app/Assets/Traits/FormEngineScripts.php

@@ -14,17 +14,17 @@ protected function formEngineScripts() {
     $asset = onepager()->asset();
 
     // tx namespaced assets to avoid multiple assets loading from other ThemeXpert product
-    $asset->script( 'tx-bootstrap-switch', asset( 'assets/js/bootstrap-switch.js' ), [ 'jquery' ] );
-    $asset->script( 'tx-bootstrap-select', asset( 'assets/js/bootstrap-select.js' ), [ 'jquery' ] );
-    $asset->script( 'tx-iconselector', asset( 'assets/js/icon-selector-bootstrap.js' ), [ 'jquery' ] );
+    $asset->script( 'tx-bootstrap-switch', op_asset( 'assets/js/bootstrap-switch.js' ), [ 'jquery' ] );
+    $asset->script( 'tx-bootstrap-select', op_asset( 'assets/js/bootstrap-select.js' ), [ 'jquery' ] );
+    $asset->script( 'tx-iconselector', op_asset( 'assets/js/icon-selector-bootstrap.js' ), [ 'jquery' ] );
 
-    $asset->script( 'tx-colorpicker', asset( 'assets/js/bootstrap-colorpicker.js' ), [ 'jquery' ] );
-    $asset->style( 'tx-colorpicker', asset( "assets/css/bootstrap-colorpicker.css" ) );
+    $asset->script( 'tx-colorpicker', op_asset( 'assets/js/bootstrap-colorpicker.js' ), [ 'jquery' ] );
+    $asset->style( 'tx-colorpicker', op_asset( "assets/css/bootstrap-colorpicker.css" ) );
 
-    $asset->script( 'tx-toastr', asset( 'assets/js/toastr.js' ), [ 'jquery' ] );
+    $asset->script( 'tx-toastr', op_asset( 'assets/js/toastr.js' ), [ 'jquery' ] );
 
     if ( is_super_admin() ) {
-      $asset->style( 'lithium-ui', asset( 'assets/css/lithium-builder.css' ) );
+      $asset->style( 'lithium-ui', op_asset( 'assets/css/lithium-builder.css' ) );
     }
   }
 

app/Content/OnepageContent.php

@@ -19,7 +19,7 @@ public function injectPageContent( $content ) {
 
     $this->setOnepageContentLoaded();
 
-    if($this->isBuildMode()){
+    if($this->isPreview()){
       return $this->getBuildModeContent();
     }
 
@@ -30,7 +30,7 @@ public function injectPageContent( $content ) {
 
 
   protected function getBuildModeContent() {
-    return '<div class="wrap"> <div id="onepager-mount"></div> </div>';
+    return '<div class="wrap"> <div id="onepager-preview"></div> </div>';
   }
 
   protected function getPageContent( $pageId ) {
@@ -50,8 +50,8 @@ protected function setOnepageContentLoaded() {
   /**
    * @return boolean
    */
-  protected function isBuildMode() {
-    return onepager()->content()->isBuildMode();
+  protected function isPreview() {
+    return onepager()->content()->isPreview();
   }
 
   /**

app/Content/OnepageToolbar.php

@@ -7,9 +7,10 @@ public function __construct(  ) {
 
   function addToolbar() {
     $isOnepage  = onepager()->content()->isOnepage();
-    $isLiveMode = onepager()->content()->isBuildMode();
+    $isPreview = onepager()->content()->isPreview();
+    $isBuildMode = onepager()->content()->isBuildMode();
 
-    if ($isOnepage && !$isLiveMode) {
+    if ($isOnepage && !$isPreview) {
       $url = onepager_get_edit_mode_url(get_current_page_url(), true);
 
       onepager()->toolbar()->addMenu(
@@ -20,7 +21,7 @@ function addToolbar() {
     }
 
     //hide the navbar when livemode
-    if ($isLiveMode) {
+    if ($isPreview || $isBuildMode) {
       show_admin_bar(false);
     }
   }

app/Dashboard/dashboard.php

@@ -63,6 +63,6 @@ function tx_rename_onepager_dashboard_submenu_name(){
 function tx_add_onepager_dashboard_scripts()
 {
   //add builder.css so icons and other stuff styles
-  wp_enqueue_style("lithium-builder", asset("assets/css/lithium-builder.css"));
+  wp_enqueue_style("lithium-builder", op_asset("assets/css/lithium-builder.css"));
 
 }

app/Loaders/TemplateLoader.php

@@ -10,6 +10,15 @@ public function __construct( PageTemplater $pageTemplateManager ) {
     $this->pageTemplateManager = $pageTemplateManager;
 
     add_action( 'wp_loaded', [ $this, 'loadOnepagerPageTemplates' ] );
+    add_filter( 'template_include', [$this, 'loadBuildModeTemplate'] );
+  }
+
+  public function loadBuildModeTemplate($template) {
+    if ( $this->isBuildMode() ) {
+      return onepager()->path( "/app/templates/builder.php" );
+    } else {
+      return $template;
+    }
   }
 
   /**
@@ -23,4 +32,12 @@ public function loadOnepagerPageTemplates() {
 
     $this->pageTemplateManager->addTemplate( 'OnePager', $default_onepage_template );
   }
+
+  /**
+   * @return mixed
+   */
+  protected function isBuildMode() {
+    return onepager()->content()->isBuildMode();
+  }
+
 }

app/Metabox/metabox.php

@@ -54,8 +54,8 @@ function tx_onepager_metabox_scripts( $hook ) {
     'buildModeUrl' => onepager_get_edit_mode_url( get_permalink( $post->ID ), true ),
   );
 
-  wp_enqueue_script( 'tx-onepager-page-meta', asset( 'assets/meta.js' ), true );
-  wp_enqueue_style( 'tx-lithium', asset( 'assets/css/lithium-builder.css' ) );
+  wp_enqueue_script( 'tx-onepager-page-meta', op_asset( 'assets/meta.js' ), true );
+  wp_enqueue_style( 'tx-lithium', op_asset( 'assets/css/lithium-builder.css' ) );
   wp_localize_script( 'tx-onepager-page-meta', 'onepager', $data );
 }
 

app/OptionsPanel/settings.php

@@ -72,9 +72,9 @@
 if ( Onepager::getOption( 'full_screen' ) ) {
   add_action( 'wp_enqueue_scripts', function () {
     $q = onepager()->asset();
-    $q->script( 'op-slimscroll', asset( 'assets/js/jquery.slimscroll.min.js' ) );
-    $q->script( 'op-fullpage', asset( 'assets/js/jquery.fullPage.js' ) );
+    $q->script( 'op-slimscroll', op_asset( 'assets/js/jquery.slimscroll.min.js' ) );
+    $q->script( 'op-fullpage', op_asset( 'assets/js/jquery.fullPage.js' ) );
 
-    $q->style( 'op-fullpage', asset( 'assets/css/jquery.fullPage.css' ) );
+    $q->style( 'op-fullpage', op_asset( 'assets/css/jquery.fullPage.css' ) );
   } );
 }

app/templates/builder.php

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html <?php language_attributes(); ?>>
+<head>
+  <meta charset="<?php bloginfo( 'charset' ); ?>">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="profile" href="http://gmpg.org/xfn/11">
+  <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
+  <title><?php wp_title(); ?></title>
+
+  <?php wp_head(); ?>
+  <style>
+    #onepager-builder{
+      width: 23%;
+      float: left;
+    }
+    #onepager-preview{
+      width: 77%;
+      margin-left: 23%;
+    }
+    #onepager-preview iframe{
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+</head>
+
+<body>
+
+  <div id="onepager-builder"></div>
+  <div id="onepager-preview">
+    <iframe src="<?php echo onepager_get_preview_url(get_current_page_url()) ?>" frameborder="0"></iframe>
+  </div>
+
+  <?php wp_footer(); ?>
+  <script>
+    jQuery("#onepager-preview").css("height", jQuery(window).height());
+  </script>
+</body>
+</html>

blocks/headers/header-2/config.php

@@ -158,8 +158,8 @@
 
   'assets' => function( $path ){
     // Magnefic popup load from onepager assets
-    Onepager::addScript( 'tx-magnific-popup', asset('assets/js/jquery.magnific-popup.js'), array( 'jquery' ) );
-    Onepager::addStyle('tx-magnific-popup', asset( 'assets/css/magnific-popup.css' ) );
+    Onepager::addScript( 'tx-magnific-popup', op_asset('assets/js/jquery.magnific-popup.js'), array( 'jquery' ) );
+    Onepager::addStyle('tx-magnific-popup', op_asset( 'assets/css/magnific-popup.css' ) );
     // Local assets
     Onepager::addStyle('header-2', $path . '/style.css');
   }