From 6892d12eed73edcad1b80a1382155ffa00963819 Mon Sep 17 00:00:00 2001 From: mnao305 Date: Mon, 4 Jul 2022 01:01:27 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=E3=83=9A=E3=83=BC=E3=82=B8=E5=85=A8?= =?UTF-8?q?=E4=BD=93=E3=82=92=E4=B8=80=E6=8B=AC=E3=81=A7=E4=BF=9D=E5=AD=98?= =?UTF-8?q?=E3=81=99=E3=82=8B=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=20(#254)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: 関数名の修正とコメントの追加 * feat: ページ全体を一括で保存するボタンを配置 * fix: 外部の画像を参照しているblogタイプコンテンツでエラーが出るのを修正 --- src/content/index.ts | 41 ++++++++++++++-------------- src/content/modules/blog.ts | 6 ++++- src/content/modules/dom.ts | 53 ++++++++++++++++++++++++++++++++++--- src/types/blog.d.ts | 5 ++-- 4 files changed, 78 insertions(+), 27 deletions(-) diff --git a/src/content/index.ts b/src/content/index.ts index 05e955c0..5a4437e3 100644 --- a/src/content/index.ts +++ b/src/content/index.ts @@ -3,7 +3,7 @@ import { browser } from 'webextension-polyfill-ts' import { PostData } from '../types' import { Backnumber } from '../types/backnumber' import { fetchBacknumberData } from './modules/backnumberPage' -import { injectBtn } from './modules/dom' +import { injectGalleryAllDlBtn, injectPageAllContentsDlBtn } from './modules/dom' import { fileDownload } from './modules/download' import { getImgList, getPhotoContents } from './modules/img' import { downloadEverythingFromPost, fetchPostData } from './modules/postPage' @@ -65,28 +65,27 @@ const elementIdTocontentId = (id: string) => { } const main = () => { - const target = document.getElementById('page') - if (!target) return - const observer = new MutationObserver((mutations) => { - mutations.forEach(mutation => { - if ((mutation.target as HTMLElement).className === 'content-block type-photo-gallery ng-scope') { - const elId = (mutation.target as HTMLElement).closest('.post-content-inner')?.id - if (elId) { - const contentId = elementIdTocontentId(elId) - injectBtn((mutation.target as HTMLElement), contentId) - observer.disconnect() - } - } - }) - }) + /** + * ページ読み込み完了後に発火する初期化処理 + */ + window.onload = () => { + // 投稿ページ全体一括保存ボタン作成 + const postBtnEl = document.getElementsByClassName('post-btns') + if (postBtnEl.length > 0) { + injectPageAllContentsDlBtn((postBtnEl[0] as HTMLElement)) + } - const config = { - characterData: false, - childList: true, - subtree: true + // ギャラリーの一括保存ボタン作成 + const galleryElements = document.getElementsByClassName('content-block type-photo-gallery ng-scope') + for (let i = 0; i < galleryElements.length; i++) { + const element = galleryElements[i] as HTMLElement + const elId = element.closest('.post-content-inner')?.id + if (elId) { + const contentId = elementIdTocontentId(elId) + injectGalleryAllDlBtn(element, contentId) + } + } } - - observer.observe(target, config) } main() diff --git a/src/content/modules/blog.ts b/src/content/modules/blog.ts index f61929db..919a4a77 100644 --- a/src/content/modules/blog.ts +++ b/src/content/modules/blog.ts @@ -8,9 +8,13 @@ export const blogDL = (postContent: PostContentBlog, filepath: string): void => const blog = json.ops for (let i = 0; i < blog.length; i++) { const element = blog[i] - if (typeof element.insert !== 'string') { + if (typeof element.insert !== 'string' && element.insert.fantiaImage) { + // Fantiaの画像 const url = `https://fantia.jp/${element.insert.fantiaImage.original_url}` fileDownload(url, filepath, element.insert.fantiaImage.id + urlToExt(element.insert.fantiaImage.url)) + } else if (typeof element.insert !== 'string' && element.insert.image) { + // 外部を参照している画像 + fileDownload(element.insert.image, filepath, String(i) + urlToExt(element.insert.image)) } } // TODO: テキストのダウンロード diff --git a/src/content/modules/dom.ts b/src/content/modules/dom.ts index 4e47245f..86cd3cca 100644 --- a/src/content/modules/dom.ts +++ b/src/content/modules/dom.ts @@ -1,7 +1,23 @@ import { browser } from 'webextension-polyfill-ts' import { saveImages } from '../index' +import { downloadEverythingFromPost } from './postPage' -export const btnCreate = (contentId: string): HTMLButtonElement => { +/** + * ダウンロードアイコンを返す + * @param {number} iconSize アイコンサイズをpxの数値で指定する + */ +const createDownloadIcon = (iconSize: number) => { + return ( + ` + + ` + ) +} + +/** + * 画像ギャラリーを一括保存するボタンを作る + */ +const createGalleryAllDlBtn = (contentId: string): HTMLButtonElement => { const btn = document.createElement('button') btn.textContent = browser.i18n.getMessage('download_all') btn.setAttribute('style', 'display: block;margin: 20px auto;padding: 20px 40px;background-color: #22c283;border: none;color: #fff;border-radius: 10px;') @@ -10,7 +26,38 @@ export const btnCreate = (contentId: string): HTMLButtonElement => { return btn } -export const injectBtn = (el: HTMLElement, contentId: string): void => { - const btn = btnCreate(contentId) +/** + * 画像ギャラリーを一括保存するボタンを配置する + */ +export const injectGalleryAllDlBtn = (el: HTMLElement, contentId: string): void => { + const btn = createGalleryAllDlBtn(contentId) + el.appendChild(btn) +} + +/** + * ページコンテンツを全てDLするボタンを作る + */ +const createPageAllContentsDlBtn = (): HTMLButtonElement => { + const btn = document.createElement('button') + btn.innerHTML = `${createDownloadIcon(16)}${browser.i18n.getMessage('download_all')}` + btn.setAttribute('style', 'margin-left: 5px; border: 1px solid #dddddd; background-color: #ffffff; color: #999999; display: inline-flex; align-items: center;') + btn.className = 'btn btn-sm' + btn.onclick = downloadEverythingFromPost + + btn.onmouseover = () => { + btn.setAttribute('style', 'margin-left: 5px; border: 1px solid #dddddd; background-color: #ffffff; color: #22c283; display: inline-flex; align-items: center;') + } + + btn.onmouseout = () => { + btn.setAttribute('style', 'margin-left: 5px; border: 1px solid #dddddd; background-color: #ffffff; color: #999999; display: inline-flex; align-items: center;') + } + return btn +} + +/** + * ページコンテンツを全てDLするボタンを配置する + */ +export const injectPageAllContentsDlBtn = (el: HTMLElement) => { + const btn = createPageAllContentsDlBtn() el.appendChild(btn) } diff --git a/src/types/blog.d.ts b/src/types/blog.d.ts index 53b4b333..f7f2fddd 100644 --- a/src/types/blog.d.ts +++ b/src/types/blog.d.ts @@ -1,9 +1,10 @@ interface FantiaImage { - fantiaImage: { + fantiaImage?: { id: string url: string 'original_url': string - } + }, + image?: string } export interface BlogBlock {