加入media類型設定選項, logo設定

app/Presenters/Admin/OptionFormFieldsPresenter.php

@@ -2,6 +2,7 @@
 
 namespace App\Presenters\Admin;
 
+use App\Repositories\MediaFileRepository;
 use Arr;
 
 class OptionFormFieldsPresenter
@@ -11,6 +12,7 @@ class OptionFormFieldsPresenter
         $options = config('admin.options.' . $page);
         $presenter = app('Html');
         $optionRepo = app('Option');
+        $mediaFileRepo = app(MediaFileRepository::class);
         $html = '';
         if(!empty($options['fields'])) {
             foreach($options['fields'] as $key => $option) {
@@ -35,7 +37,7 @@ class OptionFormFieldsPresenter
                         ]),
                         $presenter->div([
                             'class' => 'col-12 col-md-6',
-                            'html'  => function() use ($key, $type, $required, $presenter, $optionRepo) {
+                            'html'  => function() use ($key, $type, $required, $presenter, $optionRepo, $mediaFileRepo) {
                                 $html = '';
 
                                 $bastHtmlArgs = [
@@ -43,6 +45,39 @@ class OptionFormFieldsPresenter
                                     'id'    => 'option-' . $key,
                                 ];
                                 switch ($type) {
+                                    case 'media':
+                                        $mediaFiledId = $optionRepo->$key;
+                                        $mediaFile = $mediaFileRepo->findModel($mediaFiledId);
+                                        $previewImgHtml = '';
+                                        $mediaFieldContentHtml = '';
+                                        if($mediaFile) {
+                                            $previewImgHtml = $presenter->img([
+                                                'src' => $mediaFile->url
+                                            ]);
+                                        }
+                                        $mediaFieldContentHtml .= $presenter->input(array_merge([
+                                            'type' => 'hidden',
+                                            'class' => 'input',
+                                            'value' => $mediaFiledId
+                                        ], $bastHtmlArgs));
+                                        $mediaFieldContentHtml .= $presenter->div([
+                                            'class' => 'preview',
+                                            'html' => $previewImgHtml
+                                        ]);
+                                        $mediaFieldContentHtml .= $presenter->button([
+                                            'class' => ['btn', 'btn-success', 'select-media'],
+                                            'html' => '選擇'
+                                        ]);
+                                        $mediaFieldContentHtml .= $presenter->button([
+                                            'class' => ['btn', 'btn-danger', 'clear-media'],
+                                            'style' => !$mediaFile ? 'display:none;' : '',
+                                            'html' => '清除'
+                                        ]);
+                                        $html .= $presenter->div([
+                                            'class' => 'option-media-field',
+                                            'html' => $mediaFieldContentHtml
+                                        ]);
+                                        break;
                                     case 'text':
                                     case 'password':
                                     case 'email':

app/Presenters/Html/BaseHtmlPresenter.php

@@ -23,23 +23,16 @@ trait BaseHtmlPresenter
     public function getAttributes($fieldArgs = [])
     {
         $attributes = [];
-        $multiValueAttributes = [
-            'class',
-            'style',
-        ];
+
         Arr::forget($fieldArgs, 'html');
         foreach ($fieldArgs as $name => $value) {
-            if(in_array($name, $multiValueAttributes)) {
-                if(is_array($value)) {
-                    $value = array_filter($value);
-                    $values = trim(implode(' ', $value));
-                } else {
-                    $values = $value;
-                }
-                array_push($attributes, $this->getAttribute($name, $values));
+            if(is_array($value)) {
+                $value = array_filter($value);
+                $values = trim(implode(' ', $value));
             } else {
-                array_push($attributes, $this->getAttribute($name, $value));
+                $values = $value;
             }
+            array_push($attributes, $this->getAttribute($name, $values));
         }
         return trim(implode(' ', $attributes));
     }

app/Presenters/LogoPresenter.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Presenters;
+
+use App\MediaFile;
+use App\Repositories\MediaFileRepository;
+
+class LogoPresenter
+{
+    public function getUrl()
+    {
+        $logoId = app('Option')->logo;
+        $mediaFileRepo = app(MediaFileRepository::class);
+        $logoMedia = $mediaFileRepo->findModel($logoId);
+        if($logoMedia) {
+            return $logoMedia->url;
+        }
+        return '';
+    }
+}

config/admin.php

@@ -32,6 +32,10 @@ return [
         'general' => [
             'permission' => 'admin manage options general',
             'fields' => [
+                'logo' => [
+                    'label' => 'logo',
+                    'type' => 'media'
+                ],
                 'site_name' => [
                     'label'     => 'siteName',
                     'validator' => 'required',

resources/js/admin/page/options.js

@@ -0,0 +1,26 @@
+$('.select-media').on('click', e => {
+    e.preventDefault()
+    let $this = $(e.currentTarget),
+        $input = $this.siblings('input'),
+        $preview = $this.siblings('.preview'),
+        $clearButton = $this.siblings('.clear-media')
+
+    app.methods.media(true, $input.get(0), true, (data) => {
+        let media = data.medias[0]
+        $preview.empty().append(
+            $('<img>').attr('src', media.url)
+        )
+        $clearButton.show()
+    })
+})
+
+$('.clear-media').on('click', e => {
+    e.preventDefault()
+    let $this = $(e.currentTarget),
+        $input = $this.siblings('input'),
+        $preview = $this.siblings('.preview')
+
+    $input.val(null)
+    $preview.empty()
+    $this.hide()
+})

resources/lang/en/adminOptionLabels.php

@@ -1,5 +1,6 @@
 <?php
 return [
+    'logo' => 'Logo',
     'siteName' => 'Site Name',
     'siteDescription' => 'Site Description',
     'blockSearchEngineIndexing' => 'Block Search Engine Indexing',

resources/sass/_app-common.scss

@@ -0,0 +1,3 @@
+#app-logo {
+    max-height: 25px;
+}

resources/sass/admin/app.scss

@@ -4,8 +4,4 @@
 @import "components/datatables";
 @import "components/blockui";
 @import "../components/media-library";
-
-
-
-
-
+@import "../app-common";

resources/sass/admin/page/options.scss

@@ -0,0 +1,7 @@
+.option-media-field {
+    .preview {
+        img {
+            max-width: 50%;
+        }
+    }
+}

resources/sass/app.scss

@@ -6,3 +6,5 @@
 
 // Bootstrap
 @import '~bootstrap/scss/bootstrap';
+
+@import "app-common";

resources/views/admin/layouts/app.blade.php

@@ -29,10 +29,9 @@
         <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
             <span class="navbar-toggler-icon"></span>
         </button>
-
         <ul class="nav navbar-nav">
             <li class="nav-item px-3">
-                <a href="{{ route('index') }}" class="nav-link">Front Stage</a>
+                @include('components.navBrand')
             </li>
             <li class="nav-item px-3">
                 <a href="#" class="nav-link medialibrary">Media Library</a>

resources/views/admin/menu/options/layout.blade.php

@@ -1,5 +1,13 @@
 @extends('admin.layouts.app')
 
+@push('admin-app-scripts')
+    <script src="{{ asset('js/admin/page/options.js') }}"></script>
+@endpush
+
+@push('admin-app-styles')
+    <link rel="stylesheet" href="{{ asset('css/admin/page/options.css') }}">
+@endpush
+
 @section('title')
     @lang('adminPageHeader.options.' . $slug)
 @endsection

resources/views/components/nav.blade.php

@@ -1,8 +1,6 @@
 <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
     <div class="container">
-        <a class="navbar-brand" href="{{ url('/') }}">
-            {{ config('app.name', 'Laravel') }}
-        </a>
+        @include('components.navBrand')
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
             <span class="navbar-toggler-icon"></span>
         </button>

resources/views/components/navBrand.blade.php

@@ -0,0 +1,7 @@
+<a class="navbar-brand" href="{{ url('/') }}">
+    @inject('logoPresenter', 'App\Presenters\LogoPresenter')
+    @if(app('Option')->logo)
+        <img src="{{ $logoPresenter->getUrl() }}" class="d-inline-block align-top" id="app-logo">
+    @endif
+    {{ config('app.name', 'Laravel') }}
+</a>

webpack.mix.js

@@ -22,7 +22,9 @@ mix.sass('resources/sass/app.scss', publicCssDir);
 
 mix.js('resources/js/admin/app.js', publicAdminJsDir)
     .js('resources/js/admin/page/system-status.js', publicAdminJsDir + '/page')
+    .js('resources/js/admin/page/options.js', publicAdminJsDir + '/page')
 
 mix.sass('resources/sass/admin/lib.scss', publicAdminCssDir)
     .sass('resources/sass/admin/app.scss', publicAdminCssDir)
     .sass('resources/sass/admin/page/system-status.scss', publicAdminCssDir + '/page')
+    .sass('resources/sass/admin/page/options.scss', publicAdminCssDir + '/page')