Merge pull request #50 from iFgR/fix_update

Implement the update() method.

src/index.js

@@ -4,45 +4,60 @@ let objAvoided = []
 let elementAvoided = []
 let keyPressed = false
 
-const parseValue = (binding) => {
-  const value = typeof binding.value === 'string' ? JSON.parse(binding.value.replace(/\'/gi, '"')) : binding.value
+const parseValue = (value) => {
+  value = typeof value === 'string' ? JSON.parse(value.replace(/\'/gi, '"')) : value
   if (value instanceof Array) {
     return {'': value};
   }
   return value
 }
 
+const bindValue = (value, el, binding, vnode) => {
+  const push = binding.modifiers.push === true
+  const avoid = binding.modifiers.avoid === true
+  const focus = !binding.modifiers.focus === true
+  const once = binding.modifiers.once === true
+  if (avoid) {
+    objAvoided.push(el)
+  } else {
+    mappingFunctions({b: value, push, once, focus, el: vnode.elm})
+  }
+}
+
+const unbindValue = (value, el) => {
+  for (let item in value) {
+    const k = value[item].join('')
+    const idxElm = mapFunctions[k].el.indexOf(el)
+    if (mapFunctions[k].el.length > 1 && idxElm > -1) {
+      mapFunctions[k].el.splice(idxElm, 1)
+    } else {
+      delete mapFunctions[k]
+    }
+
+    objAvoided = objAvoided.filter((itm) => {
+      return !itm === el;
+    })
+  }
+}
+
 ShortKey.install = (Vue, options) => {
   elementAvoided = [...(options && options.prevent ? options.prevent : [])]
   Vue.directive('shortkey', {
     bind: (el, binding, vnode) => {
       // Mapping the commands
-      const b = parseValue(binding)
-      const push = binding.modifiers.push === true
-      const avoid = binding.modifiers.avoid === true
-      const focus = !binding.modifiers.focus === true
-      const once = binding.modifiers.once === true
-      if (avoid) {
-        objAvoided.push(el)
-      } else {
-        mappingFunctions({b, push, once, focus, el: vnode.elm})
-      }
+      const value = parseValue(binding.value)
+      bindValue(value, el, binding, vnode)
     },
-    unbind: (el, binding) => {
-      const b = parseValue(binding)
-      for (let item in b) {
-        const k = b[item].join('')
-        const idxElm = mapFunctions[k].el.indexOf(el)
-        if (mapFunctions[k].el.length > 1 && idxElm > -1) {
-          mapFunctions[k].el.splice(idxElm, 1)
-        } else {
-          delete mapFunctions[k]
-        }
-      }
+    update: (el, binding, vnode) => {
+      const oldValue = parseValue(binding.oldValue)
+      unbindValue(oldValue, el)
 
-      objAvoided = objAvoided.filter((itm) => {
-        return !itm === el;
-      })
+      const newValue = parseValue(binding.value)
+      bindValue(newValue, el, binding, vnode)
+    },
+    unbind: (el, binding) => {
+      const value = parseValue(binding.value)
+      unbindValue(value, el)
     }
   })
 }

test/index.test.js

@@ -267,6 +267,36 @@ describe('functionnal tests', () => {
     vm.$destroy()
   })
 
+  it("Update the binding", (done) => {
+    const vm = VM(`<div>
+                      <div v-if="!called" class="first" @shortkey="foo" v-shortkey="[\'q\']">foo</div>
+                      <div v-else         class="test"  @shortkey="bar" v-shortkey="[\'g\']">bar</div>
+                    </div>`)
+    vm.$mount(createDiv())
+    const keydown = createEvent('keydown')
+    keydown.key = 'q'
+    document.dispatchEvent(keydown)
+
+    const keyup = createEvent('keyup')
+    keydown.key = 'q'
+    document.dispatchEvent(keyup)
+
+    expect(vm.called).to.be.true
+    Vue.nextTick(() => {
+      const keydown2 = createEvent('keydown')
+      keydown2.key = 'g'
+      document.dispatchEvent(keydown2)
+
+      const keyup2 = createEvent('keyup')
+      keydown2.key = 'g'
+      document.dispatchEvent(keyup2)
+
+      expect(vm.calledBubble).to.be.true
+      vm.$destroy()
+      done()
+    })
+  })
+
   it('Prevent bubble event', () => {
     const vm = new VM('<div @shortkey="bar" v-shortkey="[\'a\']"><button type="button" @shortkey="foo" v-shortkey="[\'b\']">TEST</button></div>')
     vm.$mount(createDiv())