Imrpove v-style

yyx990803 · yyx990803 · commit b8b31a06102c · 2014-12-07T13:50:06.000-05:00
- auto detect and cache prefixes
- allow both dash-case and camel-case
diff --git a/src/directives/style.js b/src/directives/style.js
@@ -1,58 +1,79 @@
+var _ = require('../util')
 var prefixes = ['-webkit-', '-moz-', '-ms-']
+var camelPrefixes = ['Webkit', 'Moz', 'ms']
 var importantRE = /!important;?$/
+var camelRE = /([a-z])([A-Z])/g
+var testEl = null
+var propCache = {}
 
 module.exports = {
 
   deep: true,
 
-  bind: function () {
-    var prop = this.arg
-    if (!prop) return
-    this.prop = prop
-  },
-
   update: function (value) {
-    if (this.prop) {
-      this.setCssProperty(this.prop, value)
+    if (this.arg) {
+      this.setProp(this.arg, value)
     } else {
       if (typeof value === 'object') {
+        if (!this.cache) this.cache = {}
         for (var prop in value) {
-          this.setCssProperty(prop, value[prop])
+          this.setProp(prop, value[prop])
+          /* jshint eqeqeq: false */
+          if (value[prop] != this.cache[prop]) {
+            this.cache[prop] = value[prop]
+            this.setProp(prop, value[prop])
+          }
         }
       } else {
         this.el.style.cssText = value
       }
     }
   },
 
-  setCssProperty: function (prop, value) {
-    var prefixed = false
-    if (prop.charAt(0) === '$') {
-      // properties that start with $ will be auto-prefixed
-      prop = prop.slice(1)
-      prefixed = true
-    }
+  setProp: function (prop, value) {
+    prop = normalize(prop)
     // cast possible numbers/booleans into strings
-    if (value != null) {
-      value += ''
-    }
-    var isImportant = importantRE.test(value)
-      ? 'important'
-      : ''
-    if (isImportant) {
-      value = value.replace(importantRE, '').trim()
-    }
-    this.el.style.setProperty(prop, value, isImportant)
-    if (prefixed) {
-      var i = prefixes.length
-      while (i--) {
-        this.el.style.setProperty(
-          prefixes[i] + prop,
-          value,
-          isImportant
-        )
+    if (value != null) value += ''
+    if (value) {
+      var isImportant = importantRE.test(value)
+        ? 'important'
+        : ''
+      if (isImportant) {
+        value = value.replace(importantRE, '').trim()
       }
+      this.el.style.setProperty(prop, value, isImportant)
+    } else {
+      this.el.style.removeProperty(prop)
     }
   }
 
+}
+
+function normalize (prop) {
+  if (propCache[prop]) {
+    return propCache[prop]
+  }
+  var res = prefix(prop)
+  propCache[prop] = propCache[res] = res
+  return res
+}
+
+function prefix (prop) {
+  prop = prop.replace(camelRE, '$1-$2').toLowerCase()
+  var camel = _.camelize(prop)
+  var upper = camel.charAt(0).toUpperCase() + camel.slice(1)
+  if (!testEl) {
+    testEl = document.createElement('div')
+  }
+  if (camel in testEl.style) {
+    return prop
+  }
+  var i = prefixes.length
+  var prefixed
+  while (i--) {
+    prefixed = camelPrefixes[i] + upper
+    if (prefixed in testEl.style) {
+      return prefixes[i] + prop
+    }
+  }
 }
diff --git a/test/unit/specs/directives/style_spec.js b/test/unit/specs/directives/style_spec.js
@@ -2,6 +2,21 @@ var _ = require('../../../../src/util')
 var def = require('../../../../src/directives/style')
 var Vue = require('../../../../src/vue')
 
+function checkPrefixedProp (prop) {
+  var el = document.createElement('div')
+  var upper = prop.charAt(0).toUpperCase() + prop.slice(1)
+  if (!(prop in el.style)) {
+    var prefixes = ['Webkit', 'Moz', 'ms']
+    var i = prefixes.length
+    while (i--) {
+      if ((prefixes[i] + upper) in el.style) {
+        prop = prefixes[i] + upper
+      }
+    }  
+  }
+  return prop
+}
+
 if (_.inBrowser) {
   describe('v-style', function () {
 
@@ -14,52 +29,53 @@ if (_.inBrowser) {
 
     it('normal with arg', function () {
       dir.arg = 'color'
-      dir.bind()
       dir.update('red')
       expect(el.style.color).toBe('red')
     })
 
     it('normal no arg', function () {
-      dir.bind()
       dir.update('color:red;')
       expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;')
     })
 
     it('!important', function () {
       dir.arg = 'color'
-      dir.bind()
       dir.update('red !important;')
       expect(el.style.getPropertyPriority('color')).toBe('important')
     })
 
+    it('camel case', function () {
+      dir.arg = 'marginLeft'
+      dir.update('30px')
+      expect(el.style.marginLeft).toBe('30px')
+    })
+
+    it('remove on falsy value', function () {
+      el.style.color = 'red'
+      dir.arg = 'color'
+      dir.update(null)
+      expect(el.style.color).toBe('')
+    })
+
     it('auto prefixing', function () {
-      var spy = el.style.setProperty = jasmine.createSpy()
-      dir.arg = '$transform'
-      dir.bind()
+      var prop = checkPrefixedProp('transform')
+      dir.arg = 'transform'
       var val = 'scale(0.5)'
       dir.update(val)
-      expect(spy).toHaveBeenCalledWith('transform', val, '')
-      expect(spy).toHaveBeenCalledWith('-ms-transform', val, '')
-      expect(spy).toHaveBeenCalledWith('-moz-transform', val, '')
-      expect(spy).toHaveBeenCalledWith('-webkit-transform', val, '')
+      expect(el.style[prop]).toBe(val)
     })
 
     it('update with object', function () {
-      dir.bind()
-      dir.update({color: 'red', 'margin-right': '30px'})
+      dir.update({color: 'red', marginRight: '30px'})
       expect(el.style.getPropertyValue('color')).toBe('red')
       expect(el.style.getPropertyValue('margin-right')).toBe('30px')
     })
 
     it('update with object and auto prefix', function () {
-      var spy = el.style.setProperty = jasmine.createSpy()
-      dir.bind()
-      var scale = 'scale(0.5)';
-      dir.update({'$transform': scale})
-      expect(spy).toHaveBeenCalledWith('transform', scale, '')
-      expect(spy).toHaveBeenCalledWith('-ms-transform', scale, '')
-      expect(spy).toHaveBeenCalledWith('-moz-transform', scale, '')
-      expect(spy).toHaveBeenCalledWith('-webkit-transform', scale, '')
+      var prop = checkPrefixedProp('transform')
+      var val = 'scale(0.5)';
+      dir.update({transform: val})
+      expect(el.style[prop]).toBe(val)
     })
 
     it('updates object deep', function (done) {
