1 files changed, 53 insertions, 0 deletions
diff --git a/src/components/shout_panel/shout_panel.js b/src/components/shout_panel/shout_panel.js
new file mode 100644
index 00000000..a6168971
--- /dev/null
+++ b/src/components/shout_panel/shout_panel.js
@@ -0,0 +1,53 @@
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faBullhorn,
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faBullhorn,
+  faTimes
+)
+
+const shoutPanel = {
+  props: [ 'floating' ],
+  data () {
+    return {
+      currentMessage: '',
+      channel: null,
+      collapsed: true
+    }
+  },
+  computed: {
+    messages () {
+      return this.$store.state.shout.messages
+    }
+  },
+  methods: {
+    submit (message) {
+      this.$store.state.shout.channel.push('new_msg', { text: message }, 10000)
+      this.currentMessage = ''
+    },
+    togglePanel () {
+      this.collapsed = !this.collapsed
+    },
+    userProfileLink (user) {
+      return generateProfileLink(user.id, user.username, this.$store.state.instance.restrictedNicknames)
+    }
+  },
+  watch: {
+    messages (newVal) {
+      const scrollEl = this.$el.querySelector('.chat-window')
+      if (!scrollEl) return
+      if (scrollEl.scrollTop + scrollEl.offsetHeight + 20 > scrollEl.scrollHeight) {
+        this.$nextTick(() => {
+          if (!scrollEl) return
+          scrollEl.scrollTop = scrollEl.scrollHeight - scrollEl.offsetHeight
+        })
+      }
+    }
+  }
+}
+
+export default shoutPanel