<div id="page-center" style="
    position: fixed;
    left: 50%;
    top: 50%;
		z-index: 100;
"></div>
<script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script>
<script>
  const addPos = document.querySelector(".notion-page-content");
  
  function addScrollObserver() {
    let ele = document.querySelector(".notion-page-content");
    let contentBox = document.querySelector(".notion-table_of_contents-block");
    if (contentBox === null) return;
    if (contentBox.parentElement !== ele) {
				ele.append(contentBox);
		}
    let headers = ele.querySelectorAll("h2, h3, h4")
    let content = document.querySelector(".notion-table_of_contents-block > div");

		function useIndex() {
        let index = 0;

        return function (newIndex) {
          	if (newIndex !== undefined) index = newIndex;
          	return index;
        };
    }
    let indexContext = useIndex();
    
    let callback = (entries, observer) => {
      if (!headers && !content) return;

      headers.forEach((header, index) => {
        if (header === entries[0].target && entries[0].isIntersecting) {
          // 범위에 들어왔으면 목차의 색을 바꾸는 기능을 활용해 테스트를 해보자
					indexContext(index);
        } else {
          content.childNodes[index].style.color = "";
        }
      });
      content.childNodes[indexContext()].style.color = "red";
    }

    let observer = new IntersectionObserver(callback, {
      threshold: [1] // If 50% of the element is in the screen, can count it
    });

    headers.forEach(d => {
        observer.observe(d);
    })
  }
  
  async function addRecentPostBlock() {
    async function fetchData() {
      const response = await fetch("https://heyinsa.kr/posts",
      {
        method: 'GET',
      });

      const result = await response.text();
      const result_json = JSON.parse(result);
			return result_json;
    }

		const posts = await fetchData();
    var divElement = document.createElement('div');
    divElement.classList.add('postblock');
		
    for (var i = 0 ; i < posts.length ; ++i) {
      const title = posts[i].properties['제목']['title'][0]['plain_text'];
      const author = posts[i].properties['rich_text']['formula']['string'];
      const cover = "https://cdn.pixabay.com/photo/2016/03/20/19/22/towards-the-garden-1269304_1280.jpg";
      const url = 'https://80000coding.oopy.io/' + posts[i].id;
      var aElement = document.createElement('a');

      var titleElement = document.createElement('div');
      titleElement.classList.add('postblock-box-title');

      var titleTitleElement = document.createElement('span');
      titleTitleElement.classList.add('postblock-box-title-title');
      titleTitleElement.classList.add('theme-text');
      titleTitleElement.innerHTML = title;

      var titleAuthorElement = document.createElement('span');
      titleAuthorElement.classList.add('postblock-box-title-author');
      titleAuthorElement.innerHTML = "by " + author;

      titleElement.append(titleTitleElement);
      titleElement.append(titleAuthorElement);

      var contentElement = document.createElement('div');
      contentElement.classList.add('postblock-box-content');
      contentElement.style.backgroundImage = "url(\'" + cover + "\')";

      aElement.classList.add('postblock-box');
      aElement.href = url;
      aElement.append(contentElement);
      aElement.append(titleElement);

      divElement.append(aElement);
    }
    var dividerElement = document.createElement('span');
    dividerElement.classList.add('postblock-divider');
    dividerElement.classList.add('theme-text');
    dividerElement.innerHTML = "최근 게시글";

    addPos.append(dividerElement);
    addPos.append(divElement);
  } // end of addRecentPostBlock
    
  function addCommentBlock() {
    function setAttributes(el, attrs) {
      for (var key in attrs) {
        el.setAttribute(key, attrs[key]);
      }
    } // end of setAttributes
		var script = document.createElement('script');
    const theme = "github-" + document.body.className;
    setAttributes(script, {
      "src": "https://utteranc.es/client.js",
      "repo": "rkskekzzz/80000coding_comment",
      "issue-term": "url",
      "label": "comment",
      "theme": theme,
      "crossorigin": "anonymous",
      "async": "async"
    });
    addPos.append(script);    
  } // end of addCommentBlock
  
  async function addHeartButton() {
    class Heart extends mojs.CustomShape {
      getShape() {
        return '<path d="M92.5939814,7.35914503 C82.6692916,-2.45304834 66.6322927,-2.45304834 56.7076029,7.35914503 L52.3452392,11.6965095 C51.0327802,12.9714696 48.9328458,12.9839693 47.6203869,11.6715103 L47.6203869,11.6715103 L43.2705228,7.35914503 C33.3833318,-2.45304834 17.3213337,-2.45304834 7.43414268,7.35914503 C-2.47804756,17.1963376 -2.47804756,33.12084 7.43414268,42.9205337 L29.7959439,65.11984 C29.7959439,65.1323396 29.8084435,65.1323396 29.8084435,65.1448392 L43.2580232,78.4819224 C46.9704072,82.1818068 52.9952189,82.1818068 56.7076029,78.4819224 L70.1696822,65.1448392 C70.1696822,65.1448392 70.1696822,65.1323396 70.1821818,65.1323396 L92.5939814,42.9205337 C102.468673,33.12084 102.468673,17.1963376 92.5939814,7.35914503 L92.5939814,7.35914503 Z"></path>';
      }
      getLength() {
        return 292.110107421875;
      } // optional
    }

    mojs.addShape('heart', Heart); // passing name and Bubble class

    const COLORS = {
      purple: '#8A5CE6',
      blue: '#42AFE3',
      yellow: '#FADD4A',
      red: '#FF6680',
    };

    const duration = 350,
          delayStep = duration / 3,
          yShift = 10,
          endAngle = 30;

    let delay = 0;

    // Common options for a bubble
    const OPTS = {
      parent: document.querySelector("#page-center"),
      shape: 'heart',
      scale: { 0: 1 },
      angle: { [-90]: endAngle, easing: 'cubic.out' },
      y: { 0: -yShift },
      easing: 'sin.out',
      radius: 43,
      duration,
    };

    // bubble then options
    const THEN_OPTS = {
      y: 50,
      angle: { to: -45, easing: 'cubic.in' },
      scale: { to: 0, easing: 'quad.in' },
      easing: 'sin.in',
    };

    // blue logo then options
    const LOGO_THEN_OPTS = {
      scale: 0,
      delay: 1000,
    };

    const purpleBubble = new mojs.Shape({
      ...OPTS,
      fill: COLORS.purple,
      origin: '100% 100%',
    }).then({
      ...THEN_OPTS,
    });

    const redBubble = new mojs.Shape({
      ...OPTS,
      shape: 'heart',
      fill: COLORS.red,
      origin: '0% 100%',
      delay: (delay += delayStep),
      x: 10,
      y: { [-55]: -55 - yShift },
      angle: { 40: -endAngle },
    }).then({
      ...THEN_OPTS,
      angle: { to: 90, easing: 'expo.in' },
    });

    const yellowBubble = new mojs.Shape({
      ...OPTS,
      fill: COLORS.yellow,
      origin: '100% 100%',
      delay: (delay += delayStep),
      y: { [-85]: -85 - yShift },
      x: 15,
      angle: { [-30]: endAngle },
    }).then({
      ...THEN_OPTS,
      duration: 300,
      y: 15,
    });

    const blueCircle = new mojs.Shape({
      parent: document.querySelector("#page-center"),
      shape: 'circle',
      fill: COLORS.blue,
      radius: 10,
      scale: { 0: 1 },
      x: { [-25]: -55 },
      y: { 0: -70 },
      delay: duration / 2 + 50,
      duration: 1 * duration,
      easing: 'quad.out',
    }).then({
      x: -20,
      y: 0,
      delay: 50,
      scale: { to: 0.65, easing: 'quad.in' },
      duration: duration / 1.75,
      easing: 'cubic.in',
      isShowEnd: false,
    });

    const check = new mojs.Shape({
      parent: document.querySelector("#page-center"),
      shape: 'heart',
      stroke: COLORS.red,
      fill: 'none',
      strokeWidth: 10,
      x: 1,
      y: 2,
      strokeLinecap: 'round',
      strokeDasharray: '100%',
      strokeDashoffset: { '100%': 0 },
      delay: 2.5 * duration - 50,
      duration: 2.5 * duration,
      easing: 'quad.out',
    }).then({
      scale: 0,
      duration: 1.35 * duration,
      delay: 450,
      angle: 360,
      easing: 'cubic.in',
    });

    const data = { host : window.location.href };
    const response = await fetch("https://heyinsa.kr/heart" , {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data)
    });
    const result = await response.text();
    const result_json = JSON.parse(result);
    const buttonPos = document.querySelector(".top-button");
    const floatIconBorder = document.createElement('div');
    floatIconBorder.classList.add('floatIconBorder');
    console.log(result_json);
    const floatIcon = document.createElement('div');
    function eventHandlerFactory(obj) {
      return async function () {
        if (floatIcon.classList.contains('liked')) {
          floatIcon.classList.remove('liked')
          data['value'] = 0 + obj.number
        } else {
          const timeline = new mojs.Timeline({ delay: 0 })
          timeline.add(purpleBubble, redBubble, yellowBubble, blueCircle, check).play()
          floatIcon.classList.add('liked')
          data['value'] = 0 + obj.number + 1
        }
        await fetch('https://heyinsa.kr/heart', {
          method: 'PATCH',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data),
        })
      }
    }
    floatIcon.classList.add('flaticon');
  	floatIcon.addEventListener('click', eventHandlerFactory(result_json))
    buttonPos.parentNode.append(floatIconBorder);
   	buttonPos.parentNode.append(floatIcon);
  }
  window.onload = function () {
    if (window.location.href !== 'https://80000coding.oopy.io/') {
      addCommentBlock()
      addRecentPostBlock() // 댓글 -> 최신게시글 순서 중요!!
      addHeartButton()
    }
  }
</script>


80000coding.oopy.io

상태

분류

참여자

event_date

날짜

이름

이슈 등록자

이슈 등록일자

concat

formatDate

기본 보기

김환태

쑤 

HyunChae Moon

42Gather

42Gather Grand Open in 2021.08.23 Join Us!

Visit 42Seoul Gather Town

Apply to our community

42Gather 개발기

Event List

회의록

Request List

Gallery

Builder

개포 클러스터

서초 클러스터

Assets

Staff