Javascriptings/textplode.html at master · methodog/Javascriptings · GitHub

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>textplode</title>
    <style type="text/css">
        html, body { margin:0; overflow:hidden; height:100%; width:100%; }
        body { background:#e5f3de; font:14px/1 helvetica,arial,freesans,sans-serif; text-align:center; }
        .dr { color:#352a30; cursor:pointer; }
    </style>
</head>

<body>
<p>✿❀❁❂❃❄❅❆✿❀❁❂❃❄❅❆✿❀❁❂❃❄❅❆✿❀❁❂❃❄❅❆✿❀❁❂❃❄❅❆✿❀❁❂❃❄❅❆</p>
<p>✿❀❁❂❃❄❅❆✿❀❁❂❃❄❅❆✿❀❁❂❃❄❅❆✿❀❁❂ DANDELION SEEDS ✿❀❁❂❃❄❅❆✿❀❁❂❃❄❅❆✿❀❁❂❃❄❅❆✿❀❁❂</p>
<p>✿❀❁❂❃❄❅❆✿❀❁❂❃❄❅❆✿❀❁❂❃❄❅❆✿❀❁❂❃❄❅❆✿❀❁❂❃❄❅❆✿❀❁❂❃❄❅❆</p>

<script type="text/javascript">
function addHandler(el,evt,fn){ if( el.addEventListener ){ el.addEventListener(evt,fn,false); }else if( el.attachEvent ){ el.attachEvent('on'+evt,fn); } }
function rmHandler(el,evt,fn){ if( el.removeEventListener ){el.removeEventListener(evt,fn,false); }else if( el.detachEvent ){ el.detachEvent('on'+evt,fn); } }
function getComputed(el,style){ if(document.defaultView && document.defaultView.getComputedStyle){ var y=document.defaultView.getComputedStyle(el,null).getPropertyValue(style); }else if(el.currentStyle){ if( style=='width' ){ y=el.getBoundingClientRect().right-el.getBoundingClientRect().left }else if( style=='height' ){ y=el.getBoundingClientRect().bottom-el.getBoundingClientRect().top }else{ var y=el.currentStyle[style] } } return parseFloat(y); }
function getPgOffset(el){ var o=[0,0]; if( el.offsetParent ){ do{ o=[o[0]+el.offsetLeft,o[1]+el.offsetTop]; }while( el=el.offsetParent ) } return [o[0]+document.body.scrollLeft,o[1]+document.body.scrollTop]; }
function getXY(e){ var xy=[]; if( e.touches && e.touches.length ){ if( e.touches.length>1 ){ xy[0] = (e.touches[0].pageX+e.touches[0].pageX)/2; xy[1] = (e.touches[0].pageY+e.touches[0].pageY)/2;}else{ xy[0] = e.touches[0].pageX; xy[1] = e.touches[0].pageY; } }else{ xy[0] = e.pageX; xy[1] = e.pageY; } return xy; }
var dragDrop;
dragDrop = {
	el: null, xy0: null, xyT: null,
    size: function(el){
        el.wh = [getComputed(el,'width'), getComputed(el,'height')];
        el.whP = [getComputed(el.P,'width'), getComputed(el.P,'height')];
    },
	init: function(el, unbound) {
		if( typeof el==='string' ){ el = document.querySelector(el); } if( !el ){ return; }
        el.P = unbound? document.body:el.parentNode;
        dragDrop.size(el);
        el.xy = [getComputed(el,'left'), getComputed(el,'top')];
        el.v = [0,0];
        el.xyO = unbound? getPgOffset(el):[0,0];
        if( !el.move ){
            el.onmousedown = dragDrop.touch;
            el.ontouchstart = dragDrop.touch;
            el.move = function(xy){
                var x=xy[0], y=xy[1], r;
                if( x<=0-el.xyO[0] ){ x=0-el.xyO[0]; r=[-1,0]; }
                else if( x>=this.whP[0]-this.wh[0]-el.xyO[0] ){ x=this.whP[0]-this.wh[0]-el.xyO[0]; r=[1,0]; }
                if( y<=0-el.xyO[1] ){ y=0-el.xyO[1]; r=[0,-1]; }
                else if( y>=this.whP[1]-this.wh[1]-el.xyO[1] ){ y=this.whP[1]-this.wh[1]-el.xyO[1]; r=[0,1]; }
                this.xy = [x,y];
                this.style.left = x+'px';
                this.style.top = y+'px';
                return r;
            };
            el.drop = function(){
                var g = 0.01, f = 0.99, fC = 0.4, r;
                this.v = [this.v[0]*f, this.v[1]+g]; //v=u+at
                var r = this.move([this.xy[0]+this.v[0], this.xy[1]+this.v[1]]);
                if( r ){
                    if( r[0] ){ this.v = [-this.v[0], this.v[1]]; }
                    if( r[1]<0 ){ this.v = [this.v[0], -this.v[1]*fC]; }
                    if( r[1]>0 ){ clearTimeout(this.t); this.v = [(Math.random()<0.5?-1:1)*Math.random()*7,-Math.random()*4]; return; }
                }
                this.t = setTimeout(function(){ el.drop(); }, 23);
                return false;
            };
        }
	},
	touch: function(e){
		e = e || window.event;
		dragDrop.el = this;
        clearTimeout(dragDrop.el.t);
        dragDrop.el.v = [0,0];
		dragDrop.xy0 = dragDrop.el.xy;
        dragDrop.xyT = getXY(e);
		if( e.type==='touchstart' ){
            dragDrop.el.ontouchmove = dragDrop.drag;
            dragDrop.el.onmousedown = null;
            dragDrop.el.ontouchend = function(){
                dragDrop.el.ontouchmove = null;
                dragDrop.el.ontouchend = null;
                dragDrop.release();
            };
        }else{
            document.onmousemove = dragDrop.drag;
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
                dragDrop.release();
            };
        }
		return false;
	},
	drag: function(e){
		e = e || window.event;
        if( e.preventDefault ){ e.preventDefault(); }else{ e.returnValue=false; }
        var xyE = getXY(e),
            xy = [dragDrop.xy0[0]+xyE[0]-dragDrop.xyT[0], dragDrop.xy0[1]+xyE[1]-dragDrop.xyT[1]];
        dragDrop.el.v = [(xy[0]-dragDrop.el.xy[0]),(xy[1]-dragDrop.el.xy[1])];
        dragDrop.el.move(xy);
		return false;
	},
	release: function(){
		dragDrop.el.drop();
		dragDrop.el = null;
	}
};

(function prepTextNodes(el){
    var div = document.createElement('div'), text_nodes = [], textContent = 'textContent' in el ? 'textContent':'innerText';
    div.className = 'dr';
    (function recursiveWalk(node){
        if( node ){
            node = node.firstChild;
            while( node!==null ){
                if( node.nodeType===3 ){
                    if( node[textContent].trim().length>0 ){ text_nodes.push(node); }
                }else if( node.nodeType===1 ){
                    if( node.nodeName.toLowerCase()!=='script' ){ recursiveWalk(node); }
                }
                node = node.nextSibling;
            }
        }
    })(el);
    for( var i=text_nodes.length-1; i>=0; i-- ){
        var dummy = document.createDocumentFragment(), node = text_nodes[i], text = node[textContent], tmp;
        for( var j=0; j<text.length; j++ ){
            tmp = div.cloneNode(true);
            tmp[textContent] = text[j];
            dummy.appendChild(tmp);
        }
        node.parentNode.replaceChild(dummy, node);
    }
})(document.body);

var i, els = document.querySelectorAll('.dr'), el;
for( i=0; i<els.length; ++i ){
    el = els[i];
    el.style.position = 'relative'; el.style.display = 'inline-block'; el.style.left = 0; el.style.top = 0;
    dragDrop.init(el, 1);
    el.style.display = 'inline';
}
addHandler(window,'resize',function(){ respond(els); });
addHandler(window,'click',function(){ respond(els); });

function respond(els){
    for( i=0; i<els.length; ++i ){
        els[i].whP = [getComputed(els[i].P,'width'), getComputed(els[i].P,'height')];
        els[i].v = [(Math.random()<0.5?-1:1)*Math.random()*7, -Math.random()*7];
        els[i].move([els[i].xy[0], els[i].xy[1]-23]);
        els[i].drop();
    }
}
</script>
</body>
</html>