From f9720dccba209b4020829a56de219c58fdc79a92 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 4 Feb 2018 10:44:04 -0800
Subject: [PATCH] refactor out StatusSpoiler.html

---
 .../_components/status/MediaAttachments.html  |  1 -
 routes/_components/status/Status.html         | 43 ++--------------
 routes/_components/status/StatusSpoiler.html  | 49 +++++++++++++++++++
 3 files changed, 53 insertions(+), 40 deletions(-)
 create mode 100644 routes/_components/status/StatusSpoiler.html

diff --git a/routes/_components/status/MediaAttachments.html b/routes/_components/status/MediaAttachments.html
index 76569d1f..2e8546f1 100644
--- a/routes/_components/status/MediaAttachments.html
+++ b/routes/_components/status/MediaAttachments.html
@@ -1,6 +1,5 @@
 {{#if status.sensitive}}
 <div class="status-sensitive-media-container {{sensitiveShown ? 'status-sensitive-media-shown' : 'status-sensitive-media-hidden'}}"
-     on:recalculateHeight
 >
   <button type="button" class="status-sensitive-media-button"
           aria-label="{{sensitiveShown ? 'Hide sensitive media: ' : 'Show sensitive media'}}"
diff --git a/routes/_components/status/Status.html b/routes/_components/status/Status.html
index 17d948ff..1e5d00f7 100644
--- a/routes/_components/status/Status.html
+++ b/routes/_components/status/Status.html
@@ -8,12 +8,7 @@
   <StatusAuthor status="{{originalStatus}}" :isStatusInContext />
   <Avatar account={{originalAccount}} className="status-sidebar" size="small" />
   {{#if originalStatus.spoiler_text}}
-    <div class="status-spoiler">{{originalStatus.spoiler_text}}</div>
-  {{/if}}
-  {{#if originalStatus.spoiler_text}}
-    <div class="status-spoiler-button">
-      <button type="button" on:click="onClickSpoilerButton()">{{spoilerShown ? 'Show less' : 'Show more'}}</button>
-    </div>
+    <StatusSpoiler status="{{originalStatus}}" :spoilerShown on:recalculateHeight />
   {{/if}}
   {{#if !originalStatus.spoiler_text || spoilerShown}}
     <StatusContent status="{{originalStatus}}" />
@@ -55,25 +50,6 @@
     margin: 0 10px 0 0;
   }
 
-  .status-spoiler {
-    grid-area: status-spoiler;
-    word-wrap: break-word;
-    overflow: hidden;
-    white-space: pre-wrap;
-    font-size: 1.1em;
-    margin: 5px;
-  }
-
-  .status-spoiler-button {
-    grid-area: status-spoiler-button;
-    margin: 5px;
-  }
-
-  .status-spoiler-button button {
-    padding: 5px 10px;
-    font-size: 1.1em;
-  }
-
   @media (max-width: 767px) {
     .status-article {
       padding: 10px 10px;
@@ -88,6 +64,7 @@
   import StatusContent from './StatusContent.html'
   import Toolbar from './Toolbar.html'
   import StatusHeader from './StatusHeader.html'
+  import StatusSpoiler from './StatusSpoiler.html'
   import ExternalLink from '../ExternalLink.html'
   import { store } from '../../_store/store'
 
@@ -99,7 +76,8 @@
       ExternalLink,
       StatusHeader,
       StatusAuthor,
-      StatusContent
+      StatusContent,
+      StatusSpoiler
     },
     store: () => store,
     computed: {
@@ -109,19 +87,6 @@
       originalMediaAttachments: (originalStatus) => originalStatus.media_attachments,
       statusId: (originalStatus) => originalStatus.id,
       spoilerShown: ($spoilersShown, $currentInstance, statusId) => $spoilersShown && $spoilersShown[$currentInstance] && $spoilersShown[$currentInstance][statusId]
-    },
-    methods: {
-      onClickSpoilerButton() {
-        let statusId = this.get('statusId')
-        let instanceName = this.store.get('currentInstance')
-        let $spoilersShown = this.store.get('spoilersShown') || {}
-        if (!$spoilersShown[instanceName]) {
-          $spoilersShown[instanceName] = {}
-        }
-        $spoilersShown[instanceName][statusId] = !$spoilersShown[instanceName][statusId]
-        this.store.set({'spoilersShown': $spoilersShown})
-        this.fire('recalculateHeight')
-      }
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/status/StatusSpoiler.html b/routes/_components/status/StatusSpoiler.html
new file mode 100644
index 00000000..be5fd315
--- /dev/null
+++ b/routes/_components/status/StatusSpoiler.html
@@ -0,0 +1,49 @@
+<div class="status-spoiler">{{status.spoiler_text}}</div>
+<div class="status-spoiler-button">
+  <button type="button" on:click="onClickSpoilerButton()">
+    {{spoilerShown ? 'Show less' : 'Show more'}}
+  </button>
+</div>
+<style>
+  .status-spoiler {
+    grid-area: status-spoiler;
+    word-wrap: break-word;
+    overflow: hidden;
+    white-space: pre-wrap;
+    font-size: 1.1em;
+    margin: 5px;
+  }
+
+  .status-spoiler-button {
+    grid-area: status-spoiler-button;
+    margin: 5px;
+  }
+
+  .status-spoiler-button button {
+    padding: 5px 10px;
+    font-size: 1.1em;
+  }
+</style>
+<script>
+  import { store } from '../../_store/store'
+
+  export default {
+    store: () => store,
+    computed: {
+      statusId: (status) => status.id
+    },
+    methods: {
+      onClickSpoilerButton() {
+        let statusId = this.get('statusId')
+        let instanceName = this.store.get('currentInstance')
+        let $spoilersShown = this.store.get('spoilersShown') || {}
+        if (!$spoilersShown[instanceName]) {
+          $spoilersShown[instanceName] = {}
+        }
+        $spoilersShown[instanceName][statusId] = !$spoilersShown[instanceName][statusId]
+        this.store.set({'spoilersShown': $spoilersShown})
+        this.fire('recalculateHeight')
+      }
+    }
+  }
+</script>
\ No newline at end of file