Device Preview

[billiemead]

@HansSchouten

Thank you for all of your dedication and work on what is by far, the best page builder for Laravel! After several demo sites I took the plunge and installed in on a clients app and it's going great. But I do miss the device previewer from the original so I did some looking around and found a decent library, I just am not sure where to inject it.

https://codepen.io/kunukn/pen/adrZBd

I got the header and footer working, compiled the CSS and JS and got all dependencies loading but the JavaScript takes a URL parameter (which I thought to use to load the canvas iframe).

const url = ' ';

But after several hours of searching I cannot find where the Pagebuilder canvas iframe is rendered as I had planned to piggyback there.

Any insight would be great. Cheers...

[HansSchouten]

Hi, thank you! Glad to hear that. The default device switcher buttons should be present somewhere. I see I have disabled them earlier via style. However, uncommenting that does not bring them back. I think the default behaviour needs to enabled somewhere around here, but I am not sure what to add exactly at the moment. I have to look closer in the GrapesJS docs I guess. However, suppose we manage to revive the switching buttons, I am still wondering where to put them on the UI. Any ideas?

[billiemead]

Sorry for the delay, got busy being a Dad (I have 2 girls doing school at home!)

How's this? And I was able to reintegrate the device manager and it's working nicely. I'll do a PR and work on it this week if you'd like!

Cheers, Billie

[HansSchouten]

Hi Billie, no problem and thanks for your suggestion. Good to hear that you managed to make the device manager work again! Unfortunately at that location there is already a language picker if you make the website multilanguage, but I guess it can fit in the middle as well. A PR or some code snippet would be great :smiley:

[billiemead]

Hi Hans, I figured that spot was too good. How's this?

I will write up the code snippets later tonight and send over.

Cheers, Billie

[billiemead]

Hans, as promised. This includes the CSS to match the screenshot I posted earlier but if you or anyone has a different layout idea, just make sure to remove the display:none; from app.css (pagebuilder.scss) and just add the 2 new lines in config.php!

Cheers,

// ------- pagebuilder.js ------- //

Around line 5

replace:

$(".gjs-editor").append($("#toggle-sidebar"));
$(".gjs-pn-panels").prepend($("#sidebar-header"));
$(".gjs-pn-panels").append($("#sidebar-bottom-buttons"));

with:

$(".gjs-editor").append($("#toggle-sidebar"));
$(".gjs-pn-panels").prepend($("#sidebar-header"));
$(".gjs-pn-panels").append($("#sidebar-bottom-device"));
$(".gjs-pn-panels").append($("#sidebar-bottom-buttons"));

// ------- config.php ------- //

Around Line 8:

replace:

return [
    'container' => '#gjs',
    'noticeOnUnload' => false,
    'avoidInlineStyle' => true,
    'allowScripts' => true,

with:

return [
    'container' => '#gjs',
    'noticeOnUnload' => false,
    'avoidInlineStyle' => true,
    'allowScripts' => true,
    'showDevices' => true,
    'devicePreviewMode' => true,    

// ------- pagebuilder.php ------- //

add: <div id="sidebar-bottom-device"></div>

right above: <div id="sidebar-bottom-buttons">

// ------- dist/pagebuilder/app.js ------- //

Around line 56

replace:

$(".gjs-editor").append($("#toggle-sidebar")),
$(".gjs-pn-panels").prepend($("#sidebar-header")),
$(".gjs-pn-panels").append($("#sidebar-bottom-buttons")),

with:

$(".gjs-editor").append($("#toggle-sidebar")),
$(".gjs-pn-panels").prepend($("#sidebar-header")),
$(".gjs-pn-panels").append($("#sidebar-bottom-device")),
$(".gjs-pn-panels").append($("#sidebar-bottom-buttons")),

// ------- app.css ------- //

replace:

.gjs-pn-commands,
.gjs-pn-options,
.gjs-pn-devices-c {
  display: none;
}

with:

.gjs-pn-commands,
.gjs-pn-options {
  display: none;
}

then add:

.gjs-pn-devices-c {
    position: absolute;
    bottom: 50px;
    left: 155px;
    margin: -5px;
    color: #aaa;
    background: transparent;
}

#sidebar-bottom-device {
    position: absolute;
    left: 0;
    bottom: 40px;
    height: 40px;
    width: 300px;
    margin: 0;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #fff;
    border-top: 1px solid #dbdbdb;
    border-right: 2px solid #dfe0e1;
}

.gjs-devices-c {
    padding: 0;
}

#gjs-pn-devices-c {
    width: 85%;
    z-index: 1;
}

#gjs-pn-devices-c {
    padding-left: 30px;
}

.gjs-devices-c {
    display: flex;
    align-items: center;
    padding: 0;
}

.gjs-devices-c .gjs-device-label {
    flex-grow: 2;
    font-size: 0.7em;
    text-align: left;
    margin-right: 5px;
    color: #aaa;
}

.gjs-devices-c .gjs-select {
    flex-grow: 20;
    color: #888;
    font-size: 12px;
}

.gjs-pn-views-container {
    border-right: 0;
    padding-top: 89px;
    background: #222;
    height: calc(100% - 80px);
    overflow: hidden;
}

[HansSchouten]

Great thanks for the effort! I will soon have a look at it.

[amenk]

We are interested in this as well. For convenience I took the notes of @billiemead and tried to make a pull request. Unfortunately I do not see the device manager. The <div id="sidebar-bottom-device"></div> just stays empty. Any ideas?

[billiemead]

@amenk I will try it again on a new install and see if anything has changed as there have been a few versions released since I wrote this up. I will write back in a few hours with what I can find out... cheers,

[billiemead]

@amenk Ok, so it works but I have to look into why its not rendering immediately. I did a clean install using Laravel 7 and then straight away added Laravel Page Builder via composer require and then followed the install instructions.

For an immediate work around, after all of above is completed:

// ------- app.css ------- //

replace:

.gjs-cv-canvas,
.gjs-pn-devices-c {
    left: 300px
}

with:

.gjs-cv-canvas {
    left: 300px
}

and then add:

#sidebar-bottom-buttons {
    z-index: 10;
}

(I use this utility to un-minify and then re-minify CSS and JS files: https://beautifier.io/)

Then when Page Builder first loads, click on the paintbrush icon:

then back on the cubes icon:

And finally the devices dropdown will render and be present for the remainder of the session. Again, I need to look into why its not immediately showing up and will do so later tonight.

Cheers!

[amenk]

And finally the devices dropdown will render and be present for the remainder of the session. Again, I need to look into why its > not immediately showing up and will do so later tonight.

yeah, same here, no clue why they are not initialized directly.

[ljieyao]

same issue here, any solution yet?

[ljieyao]

This is my workaround, first I add following code to pagebuilder.php

<div id="sidebar-bottom-device">
    <a id="set-dekstop-view" class="btn set-view" data-view="Desktop">
        <i class="fa fa-desktop"></i>
        Desktop
    </a>
    <a id="set-tablet-view" class="btn set-view" data-view="Tablet">
        <i class="fa fa-tablet"></i>
        Tablet
    </a>
    <a id="set-mobile-view" class="btn set-view" data-view="Mobile">
        <i class="fa fa-mobile"></i>
        Mobile
    </a>
</div>

and then I add following code to pagebuilder.js

    $('.btn.set-view').click(function (event) {
        console.log(event);
        window.editor.setDevice(event.currentTarget.dataset.view);
    });

I also add the following code to pagebuilder.scss:

#sidebar-bottom-buttons {
  position: absolute;
  left: 0;
  bottom: 0;
  height: $sidebar-bottom-buttons-height;
  width: $sidebar-width;
  margin: 0;
  padding: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: #fff;
  border-top: 1px solid #dbdbdb;
  border-right: 2px solid #dfe0e1;

  button,
  a {
    float: right;
    height: 100%;
    width: 33.33%;
    border-left: 1px solid #dfe0e1;
    border-radius: 0;
    color: #888;
    font-size: 15px;
    padding: 8px 0;

    &:hover {
      background: #16b8ec;
      color: #fff;
    }
    &:last-child {
      border-left: none;
    }
  }

  button.waiting {
    background: #16b8ec;
    color: #fff !important;

    i.fa {
      display: none;
    }
  }

  a#go-back:hover {
    background: #dc3545;
  }
}

and the following is my result:

certainly this is not the best way, but I have no clue how to make it better. Please advice.

[Ciao121]

Hi @ljieyao, I'm trying to implement your code without success. The css code you added seems to be identical to the one already in the original file. Can you check if you pasted the wrong css part?

[Ciao121]

I solved this way: add <a id="set-dekstop-view" class="btn set-view" data-view="Desktop"> <i class="fa fa-desktop"></i>. Desktop </a> <a id="set-tablet-view" class="btn set-view" data-view="Tablet"> <i class="fa fa-tablet"></i> Tablet </a> <a id="set-mobile-view" class="btn set-view" data-view="Mobile"> <i class="fa fa-mobile"></i> Mobile </a> right after <div id="sidebar-bottom-buttons"> in src/Modules/GrapesJS.

Change height: calc(100% - #{$sidebar-bottom-buttons-height}); to height: calc(100% - #{$sidebar-bottom-buttons-height}*2);` for .gjs-pn-views-container in src/Modules/GrapesJS/resources/assets/sass/pagebuilder.scss.

Remove height: $sidebar-bottom-buttons-height; from #sidebar-bottom-buttons from the same file

[ljieyao]

Hi @ljieyao, I'm trying to implement your code without success. The css code you added seems to be identical to the one already in the original file. Can you check if you pasted the wrong css part?

hi, sorry for late reply, i am not sure if u were taking from my PR, i have created another PR as I didn't execute npm run production to generate the compiled assets

[Zeeshan-1313]

@billiemead how to add more title like GENERAL or You had added Base Layouts

[HansSchouten]

In your block config.php file use 'category' => 'Name', this will automatically add any new categories.

[Zeeshan-1313]

Thank You for your response i had done much more changes in Buidler like Dynamic videos just add iframe id in video setting and boom .. play with nested blocks ..

On Fri, Sep 9, 2022 at 12:51 PM Hans Schouten @.***> wrote:

In your block settings file use 'category' => 'Name'

— Reply to this email directly, view it on GitHub https://github.com/HansSchouten/Laravel-Pagebuilder/issues/57#issuecomment-1241629219, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZ57XZ56H2VCIZDQZHFEQNTV5LT75ANCNFSM4UG2F2DQ . You are receiving this because you commented.Message ID: @.***>

[fakharbhatti]

@HansSchouten In your block config.php file use 'category' => 'Name', this will automatically add any new categories.

on which file kindly write the path

[harveertmu]

Hi @HansSchouten i want to add services similar to this https://larab.wp-guppy.com/pages/6/build how i can achieve it in setting section. And also want to add a image upload option through which user easily upload a image please help me for it .