Merge branch 'feature/completion' into 'develop'

Feature/completion

See merge request !66

package.json

@@ -8,6 +8,7 @@
     "dev": "node build/dev-server.js",
     "build": "node build/build.js",
     "unit": "karma start test/unit/karma.conf.js --single-run",
+    "unit:watch": "karma start test/unit/karma.conf.js --single-run=false",
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit && npm run e2e",
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"

src/components/post_status_form/post_status_form.js

@@ -1,8 +1,8 @@
 import statusPoster from '../../services/status_poster/status_poster.service.js'
 import MediaUpload from '../media_upload/media_upload.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
-
-import { reject, map, uniqBy } from 'lodash'
+import Completion from '../../services/completion/completion.js'
+import { take, filter, reject, map, uniqBy } from 'lodash'
 
 const buildMentionsString = ({user, attentions}, currentUser) => {
   let allAttentions = [...attentions]
@@ -42,15 +42,48 @@ const PostStatusForm = {
       newStatus: {
         status: statusText,
         files: []
-      }
+      },
+      caret: 0
     }
   },
   computed: {
+    candidates () {
+      if (this.textAtCaret.charAt(0) === '@') {
+        const matchedUsers = filter(this.users, (user) => (user.name + user.screen_name).match(this.textAtCaret.slice(1)))
+        if (matchedUsers.length <= 0) {
+          return false
+        }
+        // eslint-disable-next-line camelcase
+        return map(take(matchedUsers, 5), ({screen_name, name, profile_image_url_original}) => ({
+          screen_name: screen_name,
+          name: name,
+          img: profile_image_url_original
+        }))
+      } else {
+        return false
+      }
+    },
+    textAtCaret () {
+      return (this.wordAtCaret || {}).word || ''
+    },
+    wordAtCaret () {
+      const word = Completion.wordAtPosition(this.newStatus.status, this.caret - 1) || {}
+      return word
+    },
     users () {
       return this.$store.state.users.users
     }
   },
   methods: {
+    replace (replacement) {
+      this.newStatus.status = Completion.replaceWord(this.newStatus.status, this.wordAtCaret, replacement)
+      const el = this.$el.querySelector('textarea')
+      el.focus()
+      this.caret = 0
+    },
+    setCaret ({target: {selectionStart}}) {
+      this.caret = selectionStart
+    },
     postStatus (newStatus) {
       statusPoster.postStatus({
         status: newStatus.status,

src/components/post_status_form/post_status_form.vue

@@ -2,7 +2,18 @@
   <div class="post-status-form">
     <form @submit.prevent="postStatus(newStatus)">
       <div class="form-group base03-border" >
-        <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="1" class="form-control" @keydown.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag" @input="resize"></textarea>
+        <textarea @click="setCaret" @keyup="setCaret" v-model="newStatus.status" placeholder="Just landed in L.A." rows="1" class="form-control" @keydown.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag" @input="resize"></textarea>
+      </div>
+      <div style="position:relative;" v-if="candidates">
+        <div class="autocomplete-panel base05-background">
+          <div v-for="candidate in candidates" @click="replace('@' + candidate.screen_name + ' ')" class="autocomplete base01">
+            <img :src="candidate.img"></img>
+            <span>
+              @{{candidate.screen_name}}
+              <small class="base02">{{candidate.name}}</small>
+            </span>
+          </div>
+        </div>
       </div>
       <div class='form-bottom'>
         <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
@@ -108,6 +119,34 @@
      .icon-cancel {
          cursor: pointer;
      }
+
+     .autocomplete-panel {
+       margin: 0 0.5em 0 0.5em;
+       border-radius: 5px;
+       position: absolute;
+       z-index: 1;
+       box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+       min-width: 75%;
+     }
+
+     .autocomplete {
+       cursor: pointer;
+       padding: 0.2em 0.4em 0.2em 0.4em;
+       border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+       display: flex;
+       img {
+         width: 24px;
+         height: 24px;
+         border-radius: 2px;
+       }
+       span {
+         line-height: 24px;
+         margin: 0 0.1em 0 0.2em;
+       }
+       small {
+         font-style: italic;
+       }
+     }
  }
 
 </style>

src/services/completion/completion.js

@@ -0,0 +1,70 @@
+import { reduce, find } from 'lodash'
+
+export const replaceWord = (str, toReplace, replacement) => {
+  return str.slice(0, toReplace.start) + replacement + str.slice(toReplace.end)
+}
+
+export const wordAtPosition = (str, pos) => {
+  const words = splitIntoWords(str)
+  const wordsWithPosition = addPositionToWords(words)
+
+  return find(wordsWithPosition, ({start, end}) => start <= pos && end > pos)
+}
+
+export const addPositionToWords = (words) => {
+  return reduce(words, (result, word) => {
+    const data = {
+      word,
+      start: 0,
+      end: word.length
+    }
+
+    if (result.length > 0) {
+      const previous = result.pop()
+
+      data.start += previous.end
+      data.end += previous.end
+
+      result.push(previous)
+    }
+
+    result.push(data)
+
+    return result
+  }, [])
+}
+
+export const splitIntoWords = (str) => {
+  // Split at word boundaries
+  const regex = /\b/
+  const triggers = /[@#]+$/
+
+  let split = str.split(regex)
+
+  // Add trailing @ and # to the following word.
+  const words = reduce(split, (result, word) => {
+    if (result.length > 0) {
+      let previous = result.pop()
+      const matches = previous.match(triggers)
+      if (matches) {
+        previous = previous.replace(triggers, '')
+        word = matches[0] + word
+      }
+      result.push(previous)
+    }
+    result.push(word)
+
+    return result
+  }, [])
+
+  return words
+}
+
+const completion = {
+  wordAtPosition,
+  addPositionToWords,
+  splitIntoWords,
+  replaceWord
+}
+
+export default completion

test/unit/specs/services/completion/completion.spec.js

@@ -0,0 +1,70 @@
+import { replaceWord, addPositionToWords, wordAtPosition, splitIntoWords } from '../../../../../src/services/completion/completion.js'
+
+describe('addPositiontoWords', () => {
+  it('adds the position to a word list', () => {
+    const words = ['hey', 'this', 'is', 'fun']
+
+    const expected = [
+      {
+        word: 'hey',
+        start: 0,
+        end: 3
+      },
+      {
+        word: 'this',
+        start: 3,
+        end: 7
+      },
+      {
+        word: 'is',
+        start: 7,
+        end: 9
+      },
+      {
+        word: 'fun',
+        start: 9,
+        end: 12
+      }
+    ]
+
+    const res = addPositionToWords(words)
+
+    expect(res).to.eql(expected)
+  })
+})
+
+describe('splitIntoWords', () => {
+  it('splits at whitespace boundaries', () => {
+    const str = 'This is a #nice @test for you, @idiot.'
+    const expected = ['This', ' ', 'is', ' ', 'a', ' ', '#nice', ' ', '@test', ' ', 'for', ' ', 'you', ', ', '@idiot', '.']
+    const res = splitIntoWords(str)
+
+    expect(res).to.eql(expected)
+  })
+})
+
+describe('wordAtPosition', () => {
+  it('returns the word for a given string and postion, plus the start and end position of that word', () => {
+    const str = 'Hey this is fun'
+
+    const { word, start, end } = wordAtPosition(str, 4)
+
+    expect(word).to.eql('this')
+    expect(start).to.eql(4)
+    expect(end).to.eql(8)
+  })
+})
+
+describe('replaceWord', () => {
+  it('replaces a word (with start and end) with another word in a given string', () => {
+    const str = 'hey @take, how are you'
+    const wordsWithPosition = addPositionToWords(splitIntoWords(str))
+    const toReplace = wordsWithPosition[2]
+
+    expect(toReplace.word).to.eql('@take')
+
+    const expected = 'hey @takeshitakenji, how are you'
+    const res = replaceWord(str, toReplace, '@takeshitakenji')
+    expect(res).to.eql(expected)
+  })
+})