1 | var transform = (function() {
|
2 |
|
3 | if (typeof document === 'undefined') return 'transform';
|
4 | var properties = [
|
5 | 'oTransform',
|
6 | 'msTransform',
|
7 | 'mozTransform',
|
8 | 'webkitTransform',
|
9 | 'transform'
|
10 | ];
|
11 | var style = document.createElement('div').style;
|
12 | for (var i = 0; i < properties.length; i++) {
|
13 |
|
14 | if (properties[i] in style) {
|
15 | return properties[i];
|
16 | }
|
17 | }
|
18 |
|
19 | return 'transform';
|
20 | }());
|
21 |
|
22 | export function createCommentNode(cmt) {
|
23 | var node = document.createElement('div');
|
24 | node.style.cssText = 'position:absolute;';
|
25 | if (typeof cmt.render === 'function') {
|
26 | var $el = cmt.render();
|
27 | if ($el instanceof HTMLElement) {
|
28 | node.appendChild($el);
|
29 | return node;
|
30 | }
|
31 | }
|
32 | node.textContent = cmt.text;
|
33 | if (cmt.style) {
|
34 | for (var key in cmt.style) {
|
35 | node.style[key] = cmt.style[key];
|
36 | }
|
37 | }
|
38 | return node;
|
39 | }
|
40 |
|
41 | export function init() {
|
42 | var stage = document.createElement('div');
|
43 | stage.style.cssText = 'overflow:hidden;white-space:nowrap;transform:translateZ(0);';
|
44 | return stage;
|
45 | }
|
46 |
|
47 | export function clear(stage) {
|
48 | var lc = stage.lastChild;
|
49 | while (lc) {
|
50 | stage.removeChild(lc);
|
51 | lc = stage.lastChild;
|
52 | }
|
53 | }
|
54 |
|
55 | export function resize(stage, width, height) {
|
56 | stage.style.width = width + 'px';
|
57 | stage.style.height = height + 'px';
|
58 | }
|
59 |
|
60 | export function framing() {
|
61 |
|
62 | }
|
63 |
|
64 | export function setup(stage, comments) {
|
65 | var df = document.createDocumentFragment();
|
66 | var i = 0;
|
67 | var cmt = null;
|
68 | for (i = 0; i < comments.length; i++) {
|
69 | cmt = comments[i];
|
70 | cmt.node = cmt.node || createCommentNode(cmt);
|
71 | df.appendChild(cmt.node);
|
72 | }
|
73 | if (comments.length) {
|
74 | stage.appendChild(df);
|
75 | }
|
76 | for (i = 0; i < comments.length; i++) {
|
77 | cmt = comments[i];
|
78 | cmt.width = cmt.width || cmt.node.offsetWidth;
|
79 | cmt.height = cmt.height || cmt.node.offsetHeight;
|
80 | }
|
81 | }
|
82 |
|
83 | export function render(stage, cmt) {
|
84 | cmt.node.style[transform] = 'translate(' + cmt.x + 'px,' + cmt.y + 'px)';
|
85 | }
|
86 |
|
87 |
|
88 | export function remove(stage, cmt) {
|
89 | stage.removeChild(cmt.node);
|
90 |
|
91 | if (!this.media) {
|
92 | cmt.node = null;
|
93 | }
|
94 | }
|
95 |
|
96 | export default {
|
97 | name: 'dom',
|
98 | init: init,
|
99 | clear: clear,
|
100 | resize: resize,
|
101 | framing: framing,
|
102 | setup: setup,
|
103 | render: render,
|
104 | remove: remove,
|
105 | };
|