Merge pull request #270 from MitarashiDango/feature_add_okazu_spoiler

チェックインに対してセンシティブフラグを付与可能とする対応を実施

app/Ejaculation.php

@@ -15,7 +15,7 @@ class Ejaculation extends Model
     protected $fillable = [
         'user_id', 'ejaculated_date',
         'note', 'geo_latitude', 'geo_longitude', 'link',
-        'is_private'
+        'is_private', 'is_too_sensitive'
     ];
 
     protected $dates = [
@@ -79,4 +79,17 @@ class Ejaculation extends Model
                 ->addSelect(DB::raw('0 as is_liked'));
         }
     }
+
+    /**
+     * このチェックインと同じ情報を流用してチェックインするためのURLを生成
+     * @return string
+     */
+    public function makeCheckinURL(): string
+    {
+        return route('checkin', [
+            'link' => $this->link,
+            'tags' => $this->textTags(),
+            'is_too_sensitive' => $this->is_too_sensitive,
+        ]);
+    }
 }

app/Http/Controllers/EjaculationController.php

@@ -21,7 +21,8 @@ class EjaculationController extends Controller
             'link' => $request->input('link', ''),
             'tags' => $request->input('tags', ''),
             'note' => $request->input('note', ''),
-            'is_private' => $request->input('is_private', 0) == 1
+            'is_private' => $request->input('is_private', 0) == 1,
+            'is_too_sensitive' => $request->input('is_too_sensitive', 0) == 1
         ];
 
         return view('ejaculation.checkin')->with('defaults', $defaults);
@@ -56,7 +57,8 @@ class EjaculationController extends Controller
             'ejaculated_date' => Carbon::createFromFormat('Y/m/d H:i', $inputs['date'] . ' ' . $inputs['time']),
             'note' => $inputs['note'] ?? '',
             'link' => $inputs['link'] ?? '',
-            'is_private' => $request->has('is_private') ?? false
+            'is_private' => $request->has('is_private') ?? false,
+            'is_too_sensitive' => $request->has('is_too_sensitive') ?? false
         ]);
 
         $tagIds = [];
@@ -137,7 +139,8 @@ class EjaculationController extends Controller
             'ejaculated_date' => Carbon::createFromFormat('Y/m/d H:i', $inputs['date'] . ' ' . $inputs['time']),
             'note' => $inputs['note'] ?? '',
             'link' => $inputs['link'] ?? '',
-            'is_private' => $request->has('is_private') ?? false
+            'is_private' => $request->has('is_private') ?? false,
+            'is_too_sensitive' => $request->has('is_too_sensitive') ?? false
         ])->save();
 
         $tagIds = [];

app/Http/Controllers/UserController.php

@@ -30,6 +30,7 @@ id,
 ejaculated_date,
 note,
 is_private,
+is_too_sensitive,
 link,
 to_char(lead(ejaculated_date, 1, NULL) OVER (ORDER BY ejaculated_date DESC), 'YYYY/MM/DD HH24:MI') AS before_date,
 to_char(ejaculated_date - (lead(ejaculated_date, 1, NULL) OVER (ORDER BY ejaculated_date DESC)), 'FMDDD日 FMHH24時間 FMMI分') AS ejaculated_span
@@ -151,6 +152,7 @@ id,
 ejaculated_date,
 note,
 is_private,
+is_too_sensitive,
 link,
 to_char(lead(ejaculated_date, 1, NULL) OVER (ORDER BY ejaculated_date DESC), 'YYYY/MM/DD HH24:MI') AS before_date,
 to_char(ejaculated_date - (lead(ejaculated_date, 1, NULL) OVER (ORDER BY ejaculated_date DESC)), 'FMDDD日 FMHH24時間 FMMI分') AS ejaculated_span

database/migrations/2019_09_07_164200_add_is_too_sensitive_to_ejaculations.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddIsTooSensitiveToEjaculations extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('ejaculations', function (Blueprint $table) {
+            $table->boolean('is_too_sensitive')->default(false);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('ejaculations', function (Blueprint $table) {
+            $table->dropColumn('is_too_sensitive');
+        });
+    }
+}

resources/assets/js/app.js

@@ -92,4 +92,10 @@ $(() => {
                 });
         }
     });
+
+    $(document).on('click', '.card-spoiler-overlay', function (event) {
+        const $this = $(this);
+        $this.siblings(".card-link").removeClass("card-spoiler");
+        $this.remove();
+    });
 });

resources/assets/sass/components/_link-card.scss

@@ -30,4 +30,27 @@
   .card-text {
     white-space: pre-line;
   }
+
+  .card-spoiler-overlay {
+    position: absolute;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+
+    .warning-text {
+      padding: 10px;
+      user-select: none;
+      background-color: rgba(240, 240, 240, 0.8);
+      border-radius: 5px;
+    }
+  }
+
+  .card-spoiler {
+    z-index: 1;
+    filter: blur(15px) grayscale(100%);
+  }
 }

resources/views/components/ejaculation.blade.php

@@ -19,7 +19,7 @@
 <!-- okazu link -->
 @if (!empty($ejaculation->link))
     <div class="row mx-0">
-        @component('components.link-card', ['link' => $ejaculation->link])
+        @component('components.link-card', ['link' => $ejaculation->link, 'is_too_sensitive' => $ejaculation->is_too_sensitive])
         @endcomponent
         <p class="d-flex align-items-baseline mb-2 col-12 px-0">
             <span class="oi oi-link-intact mr-1"></span><a class="overflow-hidden" href="{{ $ejaculation->link }}" target="_blank" rel="noopener">{{ $ejaculation->link }}</a>
@@ -49,8 +49,8 @@
 <div class="ejaculation-actions">
     <button type="button" class="btn btn-link text-secondary"
             data-toggle="tooltip" data-placement="bottom"
-            title="同じオカズでチェックイン" data-href="{{ route('checkin', ['link' => $ejaculation->link, 'tags' => $ejaculation->textTags()]) }}"><span class="oi oi-reload"></span></button>
+            title="同じオカズでチェックイン" data-href="{{ $ejaculation->makeCheckinURL() }}"><span class="oi oi-reload"></span></button>
     <button type="button" class="btn btn-link text-secondary like-button"
             data-toggle="tooltip" data-placement="bottom" data-trigger="hover"
             title="いいね" data-id="{{ $ejaculation->id }}" data-liked="{{ (bool)$ejaculation->is_liked }}"><span class="oi oi-heart {{ $ejaculation->is_liked ? 'text-danger' : '' }}"></span><span class="like-count">{{ $ejaculation->likes_count ? $ejaculation->likes_count : '' }}</span></button>
-</div>
+</div>

resources/views/components/link-card.blade.php

@@ -1,5 +1,10 @@
 <div class="card link-card mb-2 px-0 col-12 d-none" style="font-size: small;">
-    <a class="text-dark card-link" href="{{ $link }}" target="_blank" rel="noopener">
+    @if ($is_too_sensitive)
+        <div class="card-spoiler-overlay">
+            <span class="warning-text">クリックまたはタップで表示</span>
+        </div>
+    @endif
+    <a class="text-dark card-link {{ $is_too_sensitive ? 'card-spoiler' : '' }}" href="{{ $link }}" target="_blank" rel="noopener">
         <div class="row no-gutters">
             <div class="col-12 col-md-6 justify-content-center align-items-center">
                 <img src="" alt="Thumbnail" class="w-100 bg-secondary">

resources/views/ejaculation/checkin.blade.php

@@ -85,6 +85,12 @@
                             <span class="oi oi-lock-locked"></span> このチェックインを非公開にする
                             </label>
                         </div>
+                        <div class="custom-control custom-checkbox mb-3">
+                            <input id="isTooSensitive" name="is_too_sensitive" type="checkbox" class="custom-control-input" {{ old('is_too_sensitive') || $defaults['is_too_sensitive'] ? 'checked' : '' }}>
+                            <label class="custom-control-label" for="isTooSensitive">
+                            <span class="oi oi-warning"></span> チェックイン対象のオカズをより過激なオカズとして設定する
+                            </label>
+                        </div>
                     </div>
                 </div>
 

resources/views/ejaculation/edit.blade.php

@@ -86,6 +86,12 @@
                             <span class="oi oi-lock-locked"></span> このチェックインを非公開にする
                             </label>
                         </div>
+                        <div class="custom-control custom-checkbox mb-3">
+                            <input id="isTooSensitive" name="is_too_sensitive" type="checkbox" class="custom-control-input" {{ (is_bool(old('is_too_sensitive')) ? old('is_too_sensitive') : $ejaculation->is_too_sensitive) ? 'checked' : '' }}>
+                            <label class="custom-control-label" for="isTooSensitive">
+                            <span class="oi oi-warning"></span> チェックイン対象のオカズをより過激なオカズとして設定する
+                            </label>
+                        </div>
                     </div>
                 </div>
 

resources/views/ejaculation/show.blade.php

@@ -47,7 +47,7 @@
                         <!-- okazu link -->
                         @if (!empty($ejaculation->link))
                             <div class="row mx-0">
-                                @component('components.link-card', ['link' => $ejaculation->link])
+                                @component('components.link-card', ['link' => $ejaculation->link, 'is_too_sensitive' => $ejaculation->is_too_sensitive])
                                 @endcomponent
                                 <p class="d-flex align-items-baseline mb-2 col-12 px-0">
                                     <span class="oi oi-link-intact mr-1"></span><a class="overflow-hidden" href="{{ $ejaculation->link }}" target="_blank" rel="noopener">{{ $ejaculation->link }}</a>
@@ -75,7 +75,7 @@
                         @endif
                         <!-- actions -->
                         <div class="ejaculation-actions">
-                            <button type="button" class="btn btn-link text-secondary" data-toggle="tooltip" data-placement="bottom" title="同じオカズでチェックイン" data-href="{{ route('checkin', ['link' => $ejaculation->link, 'tags' => $ejaculation->textTags()]) }}"><span class="oi oi-reload"></span></button>
+                            <button type="button" class="btn btn-link text-secondary" data-toggle="tooltip" data-placement="bottom" title="同じオカズでチェックイン" data-href="{{ $ejaculation->makeCheckinURL() }}"><span class="oi oi-reload"></span></button>
                             <button type="button" class="btn btn-link text-secondary like-button" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" title="いいね" data-id="{{ $ejaculation->id }}" data-liked="{{ (bool)$ejaculation->is_liked }}"><span class="oi oi-heart {{ $ejaculation->is_liked ? 'text-danger' : '' }}"></span><span class="like-count">{{ $ejaculation->likes_count ? $ejaculation->likes_count : '' }}</span></button>
                             @if ($user->isMe())
                                 <button type="button" class="btn btn-link text-secondary" data-toggle="tooltip" data-placement="bottom" title="修正" data-href="{{ route('checkin.edit', ['id' => $ejaculation->id]) }}"><span class="oi oi-pencil"></span></button>

resources/views/user/profile.blade.php

@@ -53,7 +53,7 @@
                 <!-- okazu link -->
                 @if (!empty($ejaculation->link))
                     <div class="row mx-0">
-                        @component('components.link-card', ['link' => $ejaculation->link])
+                        @component('components.link-card', ['link' => $ejaculation->link, 'is_too_sensitive' => $ejaculation->is_too_sensitive])
                         @endcomponent
                         <p class="d-flex align-items-baseline mb-2 col-12 px-0">
                             <span class="oi oi-link-intact mr-1"></span><a class="overflow-hidden" href="{{ $ejaculation->link }}" target="_blank" rel="noopener">{{ $ejaculation->link }}</a>
@@ -81,7 +81,7 @@
                 @endif
                 <!-- actions -->
                 <div class="ejaculation-actions">
-                    <button type="button" class="btn btn-link text-secondary" data-toggle="tooltip" data-placement="bottom" title="同じオカズでチェックイン" data-href="{{ route('checkin', ['link' => $ejaculation->link, 'tags' => $ejaculation->textTags()]) }}"><span class="oi oi-reload"></span></button>
+                    <button type="button" class="btn btn-link text-secondary" data-toggle="tooltip" data-placement="bottom" title="同じオカズでチェックイン" data-href="{{ $ejaculation->makeCheckinURL() }}"><span class="oi oi-reload"></span></button>
                     <button type="button" class="btn btn-link text-secondary like-button" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" title="いいね" data-id="{{ $ejaculation->id }}" data-liked="{{ (bool)$ejaculation->is_liked }}"><span class="oi oi-heart {{ $ejaculation->is_liked ? 'text-danger' : '' }}"></span><span class="like-count">{{ $ejaculation->likes_count ? $ejaculation->likes_count : '' }}</span></button>
                     @if ($user->isMe())
                         <button type="button" class="btn btn-link text-secondary" data-toggle="tooltip" data-placement="bottom" title="修正" data-href="{{ route('checkin.edit', ['id' => $ejaculation->id]) }}"><span class="oi oi-pencil"></span></button>