Add option about transparent navigation bar

app/Http/Controllers/AdminController.php

@@ -85,6 +85,8 @@ public function customize(Request $request)
 
             $form->text('favicon_url')->hint()->description();
 
+            $form->checkbox('transparent_navbar')->label();
+
             $form->select('copyright_prefer')
                     ->option('0', 'Powered with ❤ by Blessing Skin Server.')
                     ->option('1', 'Powered by Blessing Skin Server.')

app/Http/Controllers/HomeController.php

@@ -7,6 +7,7 @@ class HomeController extends Controller
     public function index()
     {
         return view('index')->with('user', auth()->user())
+            ->with('transparent_navbar', option('transparent_navbar', false))
             ->with('home_pic_url', option('home_pic_url') ?: config('options.home_pic_url'));
     }
 }

config/options.php

@@ -56,4 +56,5 @@
     'reporter_score_modification' => '0',
     'reporter_reward_score'     => '0',
     'content_policy'            => '',
+    'transparent_navbar'        => 'false',
 ];

resources/assets/src/scripts/home-page.ts

@@ -12,6 +12,9 @@ function handler() {
   }
 }
 
-window.addEventListener('load', handler)
+/* istanbul ignore next */
+if (blessing.extra.transparent_navbar) {
+  window.addEventListener('load', handler)
+}
 
 export default handler

resources/assets/tests/scripts/home-page.test.ts

@@ -1,5 +1,9 @@
 import handler from '@/scripts/home-page'
 
+window.blessing.extra = {
+  transparent_navbar: false,
+}
+
 test('should be transparent at top', () => {
   Object.assign(window, { innerHeight: 900 })
   document.body.innerHTML = '<header class="main-header"></header>'

resources/assets/tests/setup.js

@@ -11,6 +11,7 @@ window.blessing = {
   base_url: '',
   site_name: 'Blessing Skin',
   version: '4.0.0',
+  extra: {},
 }
 
 window.Headers = class extends Map {

resources/lang/en/options.yml

@@ -10,6 +10,9 @@ homepage:
     title: Website Icon
     hint: Path relative to resources/assets/ or full URL.
     description: The given image must have same width and height (leave blank to use default icon).
+  transparent_navbar:
+    title:  Transparent Navigation Bar
+    label: This will enable transparent navigation bar of home page, but it will turn to be normal if page is scrolled to bottom.
   copyright_prefer:
     title: Program Copyright
     description: "You can specify a different style of program copyright for each language. To edit a specific language's corresponding program copyright style, please switch to that language and submit your edit. <br><b>Warning:</b> Any evil modification applied on the footer program copyright (including deleting, modifying author, changing link target) with out permission is <b>FORBIDDEN</b>. The author reserves the right to pursue relevant responsibilities."

resources/lang/zh_CN/options.yml

@@ -10,6 +10,9 @@ homepage:
     title: 网站图标
     hint: 相对 resources/assets/ 的路径或者完整的 URL
     description: 所使用的图像必须具有相同的宽度和高度（留空以使用默认图标）
+  transparent_navbar:
+    title:  首页导航栏透明
+    label: 开启后首页顶部的导航栏将透明化，但页面滚动到底部时会变为不透明。
   copyright_prefer:
     title: 程序版权信息
     description: 每种支持的语言都可以对应不同的程序版权信息，如果想要编辑某种特定语言下的版权信息，请在右上角切换至该语言后再提交修改。<b>对于任何恶意修改页面右下角的版权信息（包括不限于删除、修改作者信息、修改链接指向）的用户，作者保留对其追究责任的权利。</b>

resources/views/index.blade.php

@@ -17,7 +17,7 @@
 
     <div class="hp-wrapper" style="background-image: url('{{ $home_pic_url }}'); height: 100vh;">
         <!-- Navigation -->
-        <header class="main-header transparent">
+        <header class="main-header {{ $transparent_navbar ? 'transparent' : ''}}">
             <nav class="navbar navbar-fixed-top">
                 <div class="container">
                     <div class="navbar-header">
@@ -125,6 +125,10 @@
         </div>
     </div>
 
+    <script>
+    blessing.extra = @json(['transparent_navbar' => $transparent_navbar])
+    </script>
+
     <!-- App Scripts -->
     @include('common.dependencies.script')
 </body>

tests/AdminControllerTest.php

@@ -51,11 +51,13 @@ public function testCustomize()
         $this->visit('/admin/customize')
             ->type('url', 'home_pic_url')
             ->type('url', 'favicon_url')
+            ->check('transparent_navbar')
             ->select('1', 'copyright_prefer')
             ->type('copyright', 'copyright_text')
             ->press('submit_homepage');
         $this->assertEquals('url', option('home_pic_url'));
         $this->assertEquals('url', option('favicon_url'));
+        $this->assertTrue(option('transparent_navbar'));
         $this->assertEquals('1', option('copyright_prefer'));
         $this->assertEquals('copyright', option('copyright_text'));