Setting:
`;
this.bookmarkIcon = ``;
this.viewIcon = `
`;
//css strings
this.mangaContainerCSS = `display:block;
background-color:black;
overflow-x:auto;
white-space:nowrap;
`;
this.imgContainerCSS = `width: auto;
height:auto;
display:block;
`;
this.infoContainerCSS = `font-size: 12px;
color:rgb(173, 173, 173);
line-height=1;`;
}
captionContainerCSS(outerContainer) {
return `
white-space:pre-wrap;
display:block;
z-index:1001;
position:absolute;
border: 1px solid black;
max-width:${outerContainer.clientWidth + 10}px;
background-color:white;
word-wrap:break-word;
word-break:break-all;
left:${outerContainer.style.left}px;
width:${outerContainer.clientWidth + 10}px;
`;
}
popupImg(page, outerContainer, elem, json) {
outerContainer.textContent = null;
const factory = new ContainerFactory_1.ContainerFactory();
const imgElement = factory.setId('popupImg')
.setVoidHtml()
.setCSS(this.imgContainerCSS)
.createImg();
outerContainer.appendChild(imgElement);
imgElement.src = this.getImgUrl(json);
if ($(elem).hasClass("on")) {
outerContainer.style.border = '5px solid rgb(255, 64, 96)';
// $(outerContainer).css("background", "rgb(255, 64, 96)");
}
else {
outerContainer.style.border = '5px solid rgb(34, 34, 34)';
//$(outerContainer).css("background", "rgb(34, 34, 34)");
}
let imgHeight = Number(json.body.height);
let imgWidth = Number(json.body.width);
if (imgHeight > window.innerHeight * 0.8 || imgWidth > window.innerWidth * 0.8) {
const heightScale = imgHeight / (window.innerHeight * 0.8);
const widthScale = imgWidth / (window.innerWidth * 0.8);
if (heightScale > widthScale) {
imgHeight = (imgHeight / heightScale);
imgWidth = (imgWidth / heightScale);
}
else {
imgHeight = (imgHeight / widthScale);
imgWidth = (imgWidth / widthScale);
}
}
// display container
imgElement.style.width = `${imgWidth}px`;
imgElement.style.height = `${imgHeight}px`;
outerContainer.style.width = `${imgWidth}px`;
outerContainer.style.height = `${imgHeight}px`;
outerContainer.style.display = 'block';
//set container
const offset = this.getOffset(outerContainer);
outerContainer.style.top = offset.top + 'px';
outerContainer.style.left = offset.left + 'px';
}
getOffset(outerContainer) {
const w_height = $(window).height();
const w_width = $(window).width();
const el_height = $(outerContainer).height();
const el_width = $(outerContainer).width();
const scroll_height = $(window).scrollTop();
const position_h = scroll_height + (w_height - el_height) / 2;
const position_w = (w_width - el_width) / 2;
return { top: Math.round(position_h), left: Math.round(position_w) };
}
popupCaption(outerContainer, json) {
const factory = new ContainerFactory_1.ContainerFactory();
const captionId = 'captionContainer';
this.deleteElementById(captionId);
const descriptionString = json.body.description;
const descriptionElem = factory.setId('popup-caption-text')
.setInnerHtml(descriptionString)
.createDiv();
const date = new Date(json.body.createDate);
const dateString = `upload:${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${String(date.getMinutes()).padStart(2, "0")}`;
const dateElem = factory.setId('popup-caption-date').setInnerHtml(dateString).createDiv();
const likeString = `${this.likeIcon} ${json.body.likeCount} `;
const likeElem = factory.setId('popup-caption-like').setInnerHtml(likeString).createSpan();
const bookmarkString = `${this.bookmarkIcon} ${json.body.bookmarkCount} `;
const bookmarkElem = factory.setId('popup-caption-bookmark').setInnerHtml(bookmarkString).createSpan();
const viewString = `${this.viewIcon}${json.body.viewCount}`;
const viewElem = factory.setId('popup-caption-view').setInnerHtml(viewString).createSpan();
const infoElem = factory
.setId('popup-caption-infomation')
.setVoidHtml()
.setCSS(this.infoContainerCSS)
.createDiv();
infoElem.appendChild(likeElem);
infoElem.appendChild(bookmarkElem);
infoElem.appendChild(viewElem);
const captionContainer = factory.setId(captionId)
.setCSS(this.captionContainerCSS(outerContainer))
.setVoidHtml()
.createDiv();
captionContainer.appendChild(descriptionElem);
captionContainer.appendChild(dateElem);
captionContainer.appendChild(infoElem);
outerContainer.parentNode.insertBefore(captionContainer, outerContainer);
const y = parseInt(outerContainer.style.top) - captionContainer.getBoundingClientRect().height;
captionContainer.style.top = y + 'px';
captionContainer.style.left = outerContainer.style.left;
}
deleteElementById(id) {
const elem = document.getElementById(id);
if (elem != null) {
elem.parentNode.removeChild(elem);
}
}
popupManga(outerContainer, hrefElem, json, count) {
const factory = new ContainerFactory_1.ContainerFactory();
const mangaContainer = factory.setId('mangaContainer')
.setVoidHtml()
.setCSS(this.mangaContainerCSS)
.createDiv();
//this.getMangaContainer(document)
outerContainer.appendChild(mangaContainer);
const manga = new manga_1.Manga();
// outerContainer.children.forEach(child =>child.style.display = 'none')
for (const child of outerContainer.children) {
child.style.display = 'none';
}
if ($(hrefElem).hasClass("on")) {
$(outerContainer).css("background", "rgb(255, 64, 96)");
}
else {
$(outerContainer).css("background", "rgb(34, 34, 34)");
}
this.imgsArrInit(outerContainer, mangaContainer, manga, this.getImgUrl(json), count);
outerContainer.style.width = outerContainer.style.maxWidth;
outerContainer.style.height = outerContainer.style.maxHeight;
const offset = this.getOffset(outerContainer);
outerContainer.style.top = `${offset.top}px`;
outerContainer.style.left = `${offset.left}px`;
mangaContainer.style.display = 'block';
outerContainer.style.display = 'block';
this.setScrool(outerContainer, mangaContainer, manga);
}
getImgUrl(json) {
//url = url.replace(/\/...x...\//, '/600x600/'); //both feed and artist works case | TODO: '1200x1200' variant
return json.body.urls.regular.replace(/\/...x...\//, '/600x600/');
}
imgsArrInit(outerContainer, mangaContainer, manga, primaryLink, pageNum) {
manga.pageNum = pageNum;
for (let i = 0; i < pageNum; i++) {
manga.imgsArr.push(document.createElement('img'));
mangaContainer.appendChild(manga.imgsArr[i]);
manga.imgsArr[i].src = primaryLink.replace('p0', 'p' + i);
manga.imgsArr[i].style.maxWidth = outerContainer.style.maxWidth;
manga.imgsArr[i].style.maxHeight = outerContainer.style.maxHeight;
manga.imgsArr[i].style.height = outerContainer.style.maxHeight;
manga.imgsArr[i].style.width = 'auto';
}
}
setScrool(outerContainer, mangaContainer, manga) {
mangaContainer.onwheel = function (e) {
if (e.deltaY < 0 && (outerContainer.getBoundingClientRect().top < 0)) {
outerContainer.scrollIntoView({ block: "start", behavior: "smooth" }); //aligning to top screen side on scrollUp if needed
}
else if (e.deltaY > 0 && (outerContainer.getBoundingClientRect().bottom > document.documentElement.clientHeight)) {
outerContainer.scrollIntoView({ block: "end", behavior: "smooth" }); //aligning to bottom screen side on scrollDown if needed
}
let scrlLft = mangaContainer.scrollLeft;
if ((scrlLft > 0 && e.deltaY < 0) || ((scrlLft < (mangaContainer.scrollWidth - mangaContainer.clientWidth)) && e.deltaY > 0)) {
e.preventDefault();
mangaContainer.scrollLeft += e.deltaY * manga.DELTASCALE; // TODO - find better value for opera/chrome
}
};
}
getHrefElement(page, ctype, elem) {
if (page.pagetype === enum_1.pagetype.member_illust) {
return $(elem).parent()[0];
}
return $(elem).parent().find('a')[0];
}
isManga(json) {
return json.body.illustType === 1 || (json.body.pageCount && Number(json.body.pageCount) > 1);
}
}
exports.PopupUtil = PopupUtil;
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const util_1 = __webpack_require__(3);
class Page {
constructor(url) {
this.URL = url;
this.pagetype = util_1.Util.checkPageType(url);
this.siteImgMaxWidth = 500; //this.pagetype === prop.popup_typeA ? 200 : 150
this.alloedFunclist = util_1.Util.getAllowedFuncList(this.pagetype);
this.imgSelector = 'a[href*="member_illust.php?mode=medium&illust_id="]';
this.mangaSelector = 'a[href*="member_illust.php?mode=medium&illust_id="] > div:nth-child(2) ';
}
set setURL(url) {
this.URL = url;
this.pagetype = util_1.Util.checkPageType(url);
}
get getURL() {
return this.URL;
}
get getFunclist() {
return this.alloedFunclist;
}
isEnable(elem) {
return this.alloedFunclist.indexOf(elem) > -1;
}
get getPagetype() {
return this.pagetype;
}
}
exports.Page = Page;
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const page_1 = __webpack_require__(7);
const util_1 = __webpack_require__(3);
const setting_1 = __webpack_require__(1);
'use strict';
/*
設定画面やsave & load 機能を実装予定
*/
/*
* main function
*/
const page = new page_1.Page(document.URL);
const util = new util_1.Util();
const setting = new setting_1.Setting();
setting.init().then(() => {
util.initExecute(setting, page);
});
window.onload = () => {
console.log("pagetype:" + page.pagetype.toString());
//レイアウトを変更しコメントを開く
const onloadExecute = util.onloadExecute(setting, page);
const links = document.getElementsByTagName('a');
for (const link of links) {
link.addEventListener('click', () => {
const newPageExecute = util.onloadExecute(setting, new page_1.Page(document.URL));
});
}
setting.save();
};
/***/ })
/******/ ]);
}
)();