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 {