인기글 썸네일 미리보기 온오프 옵션 구현

wei756 · Apr 11, 2021 · b84cea8 · b84cea8
1 parent 29bc474
commit b84cea8
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 4 deletions.
diff --git a/source/bestArticle.css b/source/bestArticle.css
@@ -46,7 +46,7 @@ html[data-dark="true"] .bestArticleItem .b_nick a {
     box-sizing: content-box;
     display: none;
 }
-.bestArticleItem:hover .best_thumb_area {
+#bestArticleList.showThumb .bestArticleItem:hover .best_thumb_area {
     background-color: #fff;
     box-shadow: 0 0 6px rgb(0 0 0 / 25%);
     border-radius: 8px;

diff --git a/source/common.js b/source/common.js
@@ -55,6 +55,9 @@ function initBlockList() {
         if (!items[keyword]) {
             items[keyword] = [];
         }
+        if (items['showBestThumb'] === undefined) {
+            items['showBestThumb'] = true;
+        }
         chrome.storage.sync.set(items, () => {});
 
     });
@@ -64,7 +67,7 @@ function initBlockList() {
  * @description 새로운 차단 목록 배열을 생성합니다.
  */
 function resetBlockList() {
-    const dummyList = {darkmode: false, nid: [], keyword: [], version: 2};
+    const dummyList = {showBestThumb: true, darkmode: false, nid: [], keyword: [], version: 2};
     getBlockList(items => {
         chrome.storage.sync.set(dummyList, () => {});
     });
@@ -127,6 +130,28 @@ function removeBlockItem(type, cafeid, key, value) {
     });
 }
 
+/**
+ * @description 인기글 목록에서 썸네일 표시여부를 반환합니다.
+ * @param {function} callback 
+ */
+function isShowBestThumb(callback) {
+    getBlockList(items => {
+        callback(items['showBestThumb']);
+    });
+}
+
+/**
+ * @description 인기글 목록에서 썸네일 표시여부를 설정합니다.
+ * @param {boolean} val 썸네일 표시여부
+ * @param {function} callback 
+ */
+function setShowBestThumb(val, callback) {
+    getBlockList(items => {
+        items['showBestThumb'] = val;
+        chrome.storage.sync.set(items, callback);
+    });
+}
+
 /** 
  * @description 문자열 뒤에 알맞는 조사(을/를)를 반환합니다.
  * @param {string} str 문자열

diff --git a/source/content_script.js b/source/content_script.js
@@ -128,6 +128,7 @@ jQuery(function($){
         );
     }
 
+    let stateShowBestThumb = true;
     /** 
      * @description 인기글 목록을 불러옵니다.
      */
@@ -139,18 +140,37 @@ jQuery(function($){
         main_area.querySelector('ul.list_sub_tab > li.best').classList.add('on');
         main_area.querySelector('ul.list_sub_tab > li.best').setAttribute('aria-selected', 'true');
 
-        main_area.querySelector('div.list-style').remove();
-        main_area.querySelector('table.board-box > tbody').remove();
+        $('div.list-style .sort_area *').remove();
+        const thumb_show = $('<div class="check_box"><input type="checkbox" id="thumb_show"><label for="thumb_show">썸네일 미리보기</label></div>');
+        $('div.list-style .sort_area').append(thumb_show);
 
+        thumb_show.find('#thumb_show').on('change', e => {
+            const val = !stateShowBestThumb;
+            setShowBestThumb(val, () => {
+                setStateShowBestThumb(val);
+            });
+        });
+        main_area.querySelector('table.board-box > tbody').remove();
+
         const params = getURLParams();
         const clubid = params['clubid'];
         getBestArticles(clubid, data => {
             dispBestArticles(data);
+            isShowBestThumb(setStateShowBestThumb);
 
             // 유저 차단 적용
             doBlock();
         });
     }
+    /** 
+     * @description 썸네일 표시여부 상태를 설정합니다.
+     */
+    function setStateShowBestThumb(val) {
+        stateShowBestThumb = val;
+        $('#thumb_show').prop('checked', val);
+        const bestArticleList = $('#bestArticleList');
+        bestArticleList.attr('class', val ? 'showThumb' : '');
+    }
 
     /** 
      * @description 좋아요한 글 데이터를 불러옵니다.