Home

test_data/src/scripts/updateFragment.js

@@ -38,7 +38,6 @@ const participants = [
     { "name":"당근", "path":"carrot", "fragId":"hyunchul"},
 ]
 
-
 const SCALAR = 1;
 const THRESHOLD = 0;
 const INIT_DURATION = 300;
@@ -64,82 +63,127 @@ var render = Render.create({
                 }
              });
 
-var ceiling = Bodies.rectangle(window.innerWidth/2, 0, window.innerWidth, 60, { isStatic: true });
+var ceiling = Bodies.rectangle(render.canvas.width/2, 0, render.canvas.width, 120, { isStatic: true, friction:0, restitution:0.5 });
-var floor = Bodies.rectangle(window.innerWidth/2, window.innerHeight-100, window.innerWidth, 60, { isStatic: true });
+var leftWall = Bodies.rectangle(0, window.innerHeight/2, 60, window.innerHeight, { isStatic: true, friction:0, restitution:0.5 });
-var leftWall = Bodies.rectangle(0, window.innerHeight/2, 60, window.innerHeight, { isStatic: true });
+var rightWall = Bodies.rectangle(render.canvas.width, window.innerHeight/2, 60, window.innerHeight, { isStatic: true, friction:0, restitution:0.5 }); //update
-var rightWall = Bodies.rectangle(window.innerWidth, window.innerHeight/2, 60, window.innerHeight, { isStatic: true });
+var title = Bodies.rectangle(render.canvas.width/2, 0, 300, 200, { isStatic: true, friction:0, restitution:0.5 });
-var title = Bodies.rectangle(window.innerWidth/2, 0, 300, 200, { isStatic: true });
+var timeline = Bodies.rectangle(render.canvas.width-60, window.innerHeight-150, 150, 150, { isStatic: true, friction:0, restitution:0.5 });
-var timeline = Bodies.rectangle(window.innerWidth-60, window.innerHeight-150, 150, 150, { isStatic: true });
 
 engine.world.gravity = {scale: 0.0001, x: 0, y: 0}
-World.add(engine.world, [ceiling, floor, leftWall, rightWall, title, timeline]);
+World.add(engine.world, [ceiling, leftWall, rightWall, title, timeline]);
 Engine.run(engine);
 Render.run(render);
 
-let _svg = document.getElementById('_frags');
+let _svg = document.getElementById('_frags'); // original shape 
-let svg = document.getElementById('frags');
+let svg = document.getElementById('frags'); // display
-
-
 
+// get current fragment information
 var frag_requestURL = `${window.location.origin}/index.json`;
 var frag_request = new XMLHttpRequest();
 frag_request.open('GET', frag_requestURL);
 frag_request.responseType = 'json';
 frag_request.send();
 
+
+const FIRST_LOADING_NUM = 20;
+
 var fragments = null;
+var frag_disp = [];
 frag_request.onload = function() {
+    // after loading fragments information
     fragments = frag_request.response;
     fragments = peelFragment(fragments); 
+    let count = FIRST_LOADING_NUM-1;
+    while(count>=0){
+        addFrag();
+        count -= 1;
+    }
+}
 
-    //
+color = ['#556270'];
-    for(let i = 0; i < fragments.length; i++){
-        let p = findElementByProperty(participants, 'path', `${fragments[i].artist}`)
-        if (fragments[i].artist == "") continue;
 
-        let item = document.createElement("a");
+const addFrag = () => {
-        item.setAttribute("href", `/${fragments[i].artist}/#${convertIndexToString(fragments[i].index)}`);
+    let _frag = fragments.shift();
-        svg.appendChild(item);
+    let p = findElementByProperty(participants, 'path', `${_frag.artist}`)
-
+    if (_frag.artist == "") return;
-        let frag = document.querySelector(`._${p.fragId}`).cloneNode(true);
+    let frag = document.querySelector(`._${p.fragId}`).cloneNode(true); // get fragments by artist
     frag.classList=[];
-        frag.classList.add(p.fragId);
+    frag.id= `_${_frag.index}`;
-        item.appendChild(frag);
+    frag.childNodes[0].setAttribute("href", `${window.location.origin}/${_frag.artist}/#${convertIndexToString(_frag.index)}`);
-        // 1. children에서 shape를 찾아야함
-        // 2. 
-        // console.log(frag.childNodes)
-        console.log($(`.${p.fragId}`).children('.shape'));
     
-        // svg.appendChild(frag);
+    let text = frag.children[0].children[frag.children[0].children.length - 1];
+    text.innerHTML = `#${convertIndexToString(_frag.index)}`
     
-        // todo 
+    let shape = frag.children[0].children[0];
+    
+    svg.appendChild(frag);
+    frag_disp.push(addFragToWorld(shape));
 }
-        document.getElementById('fragments_wrapper').appendChild(svg.cloneNode(true));
+let initY= 0;
-
+const addFragToWorld = (path) => {
-}
+    var v = Bodies.fromVertices(100, getScrollTop(), Svg.pathToVertices(path, 20), {
-
-const addFragToWorld = (frag) => {
-    console.log(path);
-    var v = Bodies.fromVertices(100+(i*80), 80, Svg.pathToVertices(path, 20), {
       render: {
         fillStyle: color,
         strokeStyle: color
       },
       position: {
-        x: window.innerWidth/2 + (Math.random() - 0.5) * window.innerWidth*0.8,
+        x: render.canvas.width/2 + (Math.random() - 0.5) * render.canvas.width*0.8 - 50,
-        y: window.innerHeight/3 + (Math.random() - 0.5) * window.innerHeight*0.3
+        y: initY// + (Math.random()-0.3) * window.innerHeight*0.1 // ****
       },
       mass: 0.01,
       restitution: 0.5,
-      name: path.parentNode.id
+      friction:0,
+      name: path.parentNode.parentNode.id
     }, true);
-
+    initY += (window.innerWidth >= 960)?40:75;
-    let el = document.getElementById(path.parentNode.id)
+    World.add(engine.world, v);
-    el.setAttribute("visibility", "hidden")
+    let el = document.getElementById(path.parentNode.parentNode.id)
-
+    el.setAttribute("visibility", "visible")
-    frags.push(v);
+    return v;
 }
 
+let maxY = 0;
+let scrollChanged = false;
+setInterval(()=>{
+    if (!scrollChanged) return;
+    if(fragments.length <= 0) return;
+
+    let count = 1;
+    while(count>=0 && fragments.length > 0){
+        addFrag()
+        count -= 1;    
+    }
+    scrollChanged = false;
+}, 30);
+
+
+setInterval(()=>{
+    // update fragment position
+    for(let i = 0; i < frag_disp.length; i++) {
+        frag_disp[i].angle = 0; // lock rotation
+        // if((frag_disp[i].velocity.x > THRESHOLD) || (frag_disp[i].velocity.y > THRESHOLD)){
+            let el = document.getElementById(`${frag_disp[i].name}`);
+            let x = frag_disp[i].bounds.min.x * SCALAR
+            let y = frag_disp[i].bounds.min.y * SCALAR
+            el.setAttribute('transform', "translate("+x+","+y+")");
+        // }
+    }
+
+    let bodies = engine.world.bodies.filter(body => body.label === "Body");
+    maxY = bodies.sort((a, b) => (b.position.y - a.position.y))[0].position.y;
+    // if (maxY > getDocumentHeight()) return;
+
+
+    // expand the height
+    render.canvas.height = Math.max(window.innerHeight, maxY);
+    document.querySelector('#frags').style.height = render.canvas.height + 200;
+    if(leftWall.position.y+window.innerHeight/2 <getDocumentHeight()){
+        leftWall = Bodies.rectangle(0, leftWall.position.y + render.canvas.width, 60, window.innerHeight, { isStatic: true });
+        rightWall = Bodies.rectangle(render.canvas.width, rightWall.position.y + window.innerHeight, 60, window.innerHeight, { isStatic: true }); //update
+        World.add(engine.world, [leftWall, rightWall]);
+    }
+  }, 15)
+
 let peelFragment = (arr) => {
     let frags = []
     for(var i = arr.length-1; i >=0; i--) frags.push(arr[i]['__Fragment__']);
@@ -155,3 +199,26 @@ let findElementByProperty = (arr, key, value) => {
         if (arr[i][key] === value) return arr[i];
     return -1;
 }
+
+let prev = window.screenTop;
+window.addEventListener('scroll', () => {
+    if((getScrollTop() - prev > 0) || (getDocumentHeight()-(window.innerHeight+5) <= getScrollTop)){
+        scrollChanged = true;
+    }
+    prev = getScrollTop();
+});
+
+// 현재 스크롤한 높이를 구하는 함수 
+function getScrollTop() {
+    return (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
+}
+// 문서의 높이를 구하는 함수
+function getDocumentHeight() {
+    const body = document.body;
+    const html = document.documentElement;
+    
+    return Math.max(
+        body.scrollHeight, body.offsetHeight,
+        html.clientHeight, html.scrollHeight, html.offsetHeight
+    );
+}