<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/') {
      try {
        addScrollObserver()
      } catch (error) {
        console.log(error)
      }
      addCommentBlock()
      addRecentPostBlock() // 댓글 -> 최신게시글 순서 중요!!
      addHeartButton()
    }
  }
</script>


80000coding.oopy.io

적용점

헤드라인

스크랩 날짜

한줄요약

Main Stack

Sub Stack

생성일

GitHub

이름

블로그, 개인 링크

Created

설명

업데이트

Name

Gallery view

갤러리 보기

CJ대한통운, 포장 신기술로 WPO 월드스타 패키징 어워즈에서 수상, 패키징 혁신 기술 개발 매진