snowsoft / oapage-designer
Page designer for open admin
Requires
- php: >=7.0.0
- snowsoft/oackeditor: ~0.01
- snowsoft/open-admin: ~v0.01
Requires (Dev)
- phpunit/phpunit: ~6.0
README
Freely position items on a page and edit their content.
Screenshot
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; } ...
License
Licensed under The MIT License (MIT).