PageDesigner for Open-admin

Freely position items on a page and edit their content.

Installation

1) Terminal

$ composer require open-admin-ext/page-designer

$ php artisan admin:import page-designer

$ php artisan vendor:publish --tag=page-designer

$ php artisan migrate

2) Add Routes

Add admin routes in App/Admin/routes.php

$router->resource('page-designer', PageDesignerController::class);
$router->resource('page-designer-images', PageDesignerImagesController::class);
$router->resource('page-designer-videos', PageDesignerVideoController::class);
$router->resource('page-designer-texts', PageDesignerTextController::class);
$router->resource('page-designer-inline-galleries', PageDesignerInlineGalleryController::class);
$router->resource('page-designer-embeds', PageDesignerEmbedController::class);

Add front-end routes in routes/web.php

use App\Http\Controllers\PageDesignerController;

Route::get('/page/{id}', [PageDesignerController::class, 'index'])->name('page-designer');

3) Check it out

App\Controllers\PageDesignerController.php

Now in the form section you see.

$form->pagedesigner('data', __('pageDesign'));

For the front-end:

Go to your-app-url/page/{id} and see how it look you can alter the look by changing resources/views/page_designer.blade.php

Options

// set snap
$form->pagedesigner('data', __('pageDesign'))->snap(30);

Adding new items to the PageDesigner

The PageDesigner automaticly scans the Admin/Controllers directory to see if there are controller with PageDesignItem trait.

You can generate an AdminController like you normaly would (Tip: use the helper plugin), then you can add the following code below.

Lets say you like an quote item to add to your PageDesigner after you create the controller. Alter it to look like this:

use OpenAdmin\Admin\PageDesigner\Traits\PageDesignItem;

class PageDesignerQuoteController extends AdminController
{
    use PageDesignItem;

    public function __construct()
    {
        $this->initPageDesignItem();
    }

    public static function pageDesign()
    {
        return [
            'parent_field'=> 'page_id',
            'type'        => 'quote',
            'title'       => 'quote',
            'icon'        => 'icon-quote-right',
            'model'       => "\App\Models\PageDesignerQuote",
        ];
    }

    // this part renders the content part of the item
    // the rendering on the frond-end is seperate, but offcourse you can let them share styles
    public static function pageDesignScripts()
    {
        return <<<'JS'
            // use the type as writen above + 'SetContent'
            window.quoteSetContent = function(data,current_content){
                current_content.innerHTML = '<h2>Quote: '+data.quote+'</h2>';
            };
        JS;
    }

    ...

Screenshot

License

Licensed under The MIT License (MIT).