all files / src/utils/ translate.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
1×
 
1×
 
1×
 
1×
 
1×
1×
 
 
 
 
1×
 
1×
 
1×
1×
1×
1×
1×
1×
1×
 
1×
1×
 
 
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
var docStyle = document && document.documentElement.style
var engine
var translate3d = false
 
Iif (window !== undefined && window.opera && Object.prototype.toString.call(window.opera) === '[object Opera]') {
  engine = 'presto'
} else Iif ('MozAppearance' in docStyle) {
  engine = 'gecko'
} else Eif ('WebkitAppearance' in docStyle) {
  engine = 'webkit'
} else if (typeof navigator.cpuClass === 'string') {
  engine = 'trident'
}
 
var cssPrefix = {trident: '-ms-', gecko: '-moz-', webkit: '-webkit-', presto: '-o-'}[engine]
 
var vendorPrefix = {trident: 'ms', gecko: 'Moz', webkit: 'Webkit', presto: 'O'}[engine]
 
var helperElem = document.createElement('div')
var perspectiveProperty = vendorPrefix + 'Perspective'
var transformProperty = vendorPrefix + 'Transform'
var transformStyleName = cssPrefix + 'transform'
var transitionProperty = vendorPrefix + 'Transition'
var transitionStyleName = cssPrefix + 'transition'
var transitionEndProperty = vendorPrefix.toLowerCase() + 'TransitionEnd'
 
Eif (helperElem.style[perspectiveProperty] !== undefined) {
  translate3d = true
}
 
var getTranslate = function (element) {
  var result = {left: 0, top: 0}
  if (element === null || element.style === null) return result
 
  var transform = element.style[transformProperty]
  var matches = /translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/g.exec(transform)
  if (matches) {
    result.left = +matches[1]
    result.top = +matches[3]
  }
 
  return result
}
 
var translateElement = function (element, x, y) {
  if (x === null && y === null) return
 
  if (element === null || element.style === null) return
 
  if (!element.style[transformProperty] && x === 0 && y === 0) return
 
  if (x === null || y === null) {
    var translate = getTranslate(element)
    if (x === null) {
      x = translate.left
    }
    if (y === null) {
      y = translate.top
    }
  }
 
  cancelTranslateElement(element)
 
  if (translate3d) {
    element.style[transformProperty] += ' translate(' + (x ? (x + 'px') : '0px') + ',' + (y ? (y + 'px') : '0px') + ') translateZ(0px)'
  } else {
    element.style[transformProperty] += ' translate(' + (x ? (x + 'px') : '0px') + ',' + (y ? (y + 'px') : '0px') + ')'
  }
}
 
var cancelTranslateElement = function (element) {
  if (element === null || element.style === null) return
  var transformValue = element.style[transformProperty]
  if (transformValue) {
    transformValue = transformValue.replace(/translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/g, '')
    element.style[transformProperty] = transformValue
  }
}
 
export default {
  transformProperty: transformProperty,
  transformStyleName: transformStyleName,
  transitionProperty: transitionProperty,
  transitionStyleName: transitionStyleName,
  transitionEndProperty: transitionEndProperty,
  getElementTranslate: getTranslate,
  translateElement: translateElement,
  cancelTranslateElement: cancelTranslateElement
}