Statamic enabling live view from a url and have a callback url as well

Warning: This is for a Statamic v2.10.5 and I take no responsibility for you damaging the core code. This was a functionality I needed and I’ve created this for myself. If you use this you take all the responsibility in your hands.

Also Statamic gentlemen issue a very clear warning about this:
We really don’t recommend people edit the core Statamic files because those changes will be discarded after an update.

Adding live preview from link capabilities:

Publish.vue (minified in bootstrap.js)

Find this line in statamic/bootstrap.js

this.canEdit&&(Mousetrap.

Find the last , after that function and add the bellow line

this.extra.init_live&&(this.$parent.preview(this.extra.callback_url))

App.js (minified: statamic/resources/dist/js/app.js)

Find and replace:

data:{isPublishPage:!1,

To:

data:{callbackUrl:’’,isPublishPage:!1,

Then:

preview:function(){

To:

preview:function(event, callbackUrl){ if(callbackUrl){this.callbackUrl = callbackUrl}else{this.callbackUrl = undefined}

Then:

addClass(“animating on”),this.wait(200)

To:

addClass(“animating on”), this.wait(0)

Then:

e(“.sneak-peek-wrapper”).removeClass(“animating”)})}

To:

e(“.sneak-peek-wrapper”).removeClass(“animating”), t.callbackUrl&&(window.location.replace(t.callbackUrl))})}

PublishEntryController.php (statamic/core/Http/Controllers/PublishEntryController.php)

In the public function edit($collection, $slug)

After

$extra = [
‘collection’ => $collection,
‘default_slug’ => $entry->slug(),
‘default_order’ => $entry->order(),
‘order_type’ => $entry->orderType()
];

Add the following block of code:

$callback_url = $this->request->query(‘url’);
if($callback_url)
{
 $extra[‘init_live’] = true;
 $extra[‘callback_url’] = $callback_url;
}

Now calling any collection entry with a url encoded string for eg (relative path)

/cp/collections/entries/test/test-page?locale=en&url=%2Flcc-cp%3Fsave%3Dtrue

Which translates to url decoded:

/cp/collections/entries/test/test-page?locale=en&url=/lcc-cp?save=true

Will do this:

Now the video shows nice transitions, but without the ‘Adding nice transition animations’ changes described bellow. This will be quite jarring.

Adding nice transition animations

Add this in the first line of body of ‘statamic/resources/views/layout.blade.php’:

@if (isset($extra))
 @if (in_array(“init_live”, $extra))
  <i id=”init_live” class=”icon icon-circular-graph animation-spin”>  </i>
 @endif
@endif
<div id=”hide-cp”> <!-- REMEMBER TO CLOSE THIS BEFORE THE BODY ENDS -->
@if (isset($extra))
 @if (in_array(“init_live”, $extra))
  <script>
   document.getElementById(“hide-cp”).classList.add(‘fade-out’);
  </script>
 @endif
@endif

Also close the ‘hide-cp’ div just before </body>:

Then add this to ‘statamic/resources/views/publish.blade.php’ right after @section('content') :

@if (isset($extra))
 @if (in_array(“init_live”, $extra))
  <script>
   // this is added in layout.blade.php
   // we remove it here
   window.onload = function() {
    var element = document.getElementById(“init_live”);
    element.parentNode.removeChild(element);
    document.getElementById(“hide-cp”).classList.remove(‘fade-out’);
   }; 
  </script>
 @endif
@endif

Voila, I do not promote doing this though, just showing that it can be achieved!