mirror of
https://github.com/alexadam/save-as-ebook.git
synced 2025-09-06 07:29:38 +00:00
379 lines
13 KiB
JavaScript
379 lines
13 KiB
JavaScript
for (var i=0; i<document.styleSheets.length; i++) {
|
|
document.styleSheets.item(i).disabled = true;
|
|
}
|
|
|
|
var tmp = document.getElementById('cssEditor-Modal');
|
|
if (tmp) {
|
|
tmp.parentNode.removeChild(tmp);
|
|
}
|
|
|
|
var allPagesRef = null;
|
|
var allStyles = [];
|
|
var currentStyle = null;
|
|
var currentStyleIndex = -1;
|
|
|
|
|
|
showEditor();
|
|
|
|
|
|
function showEditor() {
|
|
|
|
var body = document.getElementsByTagName('body')[0];
|
|
var modalContent = document.createElement('div');
|
|
modalContent.id = 'cssEditor-modalContent';
|
|
var modalHeader = document.createElement('div');
|
|
modalHeader.id = 'cssEditor-modalHeader';
|
|
var modalList = document.createElement('div');
|
|
modalList.id = 'cssEditor-modalList';
|
|
var modalFooter = document.createElement('div');
|
|
modalFooter.id = 'cssEditor-modalFooter';
|
|
|
|
////////
|
|
// Header
|
|
var title = document.createElement('span');
|
|
title.id = "cssEditor-Title";
|
|
title.innerText = chrome.i18n.getMessage('styleEditor');
|
|
var upperCloseButton = document.createElement('button');
|
|
modalHeader.appendChild(title);
|
|
upperCloseButton.onclick = closeModal;
|
|
upperCloseButton.innerText = 'X';
|
|
upperCloseButton.className = 'cssEditor-text-button cssEditor-float-right';
|
|
modalHeader.appendChild(upperCloseButton);
|
|
/////////////////////
|
|
// Content List
|
|
|
|
var titleHolder = document.createElement('div');
|
|
titleHolder.id = 'cssEditor-ebookTitleHolder';
|
|
|
|
var existingStyles = document.createElement('select');
|
|
existingStyles.id = "cssEditor-selectStyle";
|
|
existingStyles.onchange = function (event) {
|
|
if (existingStyles.selectedIndex === 0) {
|
|
currentStyle = null;
|
|
currentStyleIndex = -1;
|
|
hideStyleEditor();
|
|
hideRemoveStyle();
|
|
hideSaveStyle();
|
|
return;
|
|
}
|
|
currentStyle = allStyles[existingStyles.selectedIndex - 1];
|
|
currentStyleIndex = existingStyles.selectedIndex - 1;
|
|
editCurrentStyle();
|
|
};
|
|
var defaultOption = document.createElement('option');
|
|
defaultOption.innerText = chrome.i18n.getMessage('selectExistingCSS');
|
|
existingStyles.appendChild(defaultOption);
|
|
titleHolder.appendChild(existingStyles);
|
|
|
|
var titleLabel = document.createElement('label');
|
|
titleLabel.id = 'cssEditor-orLabel';
|
|
titleLabel.innerText = chrome.i18n.getMessage('orLabel');
|
|
titleHolder.appendChild(titleLabel);
|
|
|
|
var createNewStyleButton = document.createElement('button');
|
|
createNewStyleButton.id = 'cssEditor-createNewStyle';
|
|
createNewStyleButton.innerText = chrome.i18n.getMessage('createNewStyle');
|
|
createNewStyleButton.onclick = createNewStyle;
|
|
titleHolder.appendChild(createNewStyleButton);
|
|
|
|
modalList.appendChild(titleHolder);
|
|
|
|
function createNewStyle() {
|
|
currentStyle = null;
|
|
currentStyleIndex = -1;
|
|
resetFields();
|
|
showStyleEditor();
|
|
showSaveStyle();
|
|
hideRemoveStyle();
|
|
createStyleList();
|
|
}
|
|
|
|
//////
|
|
|
|
var editorHolder = document.createElement('div');
|
|
editorHolder.style.display = 'none';
|
|
editorHolder.id = 'cssEditor-styleEditor';
|
|
|
|
var editorHolderLeft = document.createElement('div');
|
|
editorHolderLeft.className = 'cssEditor-left-panel';
|
|
var editorHolderRight = document.createElement('div');
|
|
editorHolderRight.className = 'cssEditor-right-panel';
|
|
|
|
var nameLabelHolder = document.createElement('div');
|
|
nameLabelHolder.className = 'cssEditor-field-label-holder';
|
|
var nameLabel = document.createElement('label');
|
|
nameLabel.className = 'cssEditor-field-label';
|
|
nameLabel.innerText = chrome.i18n.getMessage('styleNameLabel');
|
|
nameLabelHolder.appendChild(nameLabel);
|
|
editorHolderLeft.appendChild(nameLabelHolder);
|
|
|
|
var nameInputHolder = document.createElement('div');
|
|
nameInputHolder.className = 'cssEditor-field-holder';
|
|
var cssNameInput = document.createElement('input');
|
|
cssNameInput.id = 'cssEditor-styleName';
|
|
cssNameInput.type = 'text';
|
|
nameInputHolder.appendChild(cssNameInput);
|
|
editorHolderLeft.appendChild(nameInputHolder);
|
|
|
|
|
|
var urlLabelHolder = document.createElement('div');
|
|
urlLabelHolder.className = 'cssEditor-field-label-holder';
|
|
var urlLabel = document.createElement('label');
|
|
urlLabel.className = 'cssEditor-field-label';
|
|
urlLabel.innerText = 'URL Regex'; // TODO addd link to regex tutorial
|
|
var regexHelp = document.createElement('a');
|
|
regexHelp.innerText = chrome.i18n.getMessage('howToWriteRegexLabel');
|
|
regexHelp.setAttribute('href', 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions');
|
|
urlLabelHolder.appendChild(urlLabel);
|
|
urlLabelHolder.appendChild(regexHelp);
|
|
editorHolderLeft.appendChild(urlLabelHolder);
|
|
|
|
var urlInputHolder = document.createElement('div');
|
|
urlInputHolder.className = 'cssEditor-field-holder';
|
|
var urlInput = document.createElement('input');
|
|
urlInput.id = 'cssEditor-matchUrl';
|
|
urlInput.type = 'text';
|
|
urlInputHolder.appendChild(urlInput);
|
|
editorHolderLeft.appendChild(urlInputHolder);
|
|
|
|
var contentLabelHolder = document.createElement('div');
|
|
contentLabelHolder.className = 'cssEditor-field-label-holder';
|
|
var contentLabel = document.createElement('label');
|
|
contentLabel.className = 'cssEditor-field-label';
|
|
contentLabel.innerText = 'CSS';
|
|
contentLabelHolder.appendChild(contentLabel);
|
|
editorHolderRight.appendChild(contentLabelHolder);
|
|
|
|
var contentInputHolder = document.createElement('div');
|
|
contentInputHolder.className = 'cssEditor-field-holder';
|
|
var contentInput = document.createElement('textarea');
|
|
contentInput.id = 'cssEditor-styleContent';
|
|
contentInput.setAttribute('data', 'language: css');
|
|
contentInputHolder.appendChild(contentInput);
|
|
editorHolderRight.appendChild(contentInputHolder);
|
|
|
|
editorHolder.appendChild(editorHolderLeft);
|
|
editorHolder.appendChild(editorHolderRight);
|
|
modalList.appendChild(editorHolder);
|
|
|
|
|
|
|
|
var saveButtonsHolder = document.createElement('div');
|
|
|
|
var removeCssButton = document.createElement('button');
|
|
removeCssButton.id = 'cssEditor-removeStyle';
|
|
removeCssButton.innerText = chrome.i18n.getMessage('removeStyle');
|
|
removeCssButton.className = 'cssEditor-footer-button cssEditor-float-left cssEditor-cancel-button';
|
|
removeCssButton.onclick = removeStyle;
|
|
saveButtonsHolder.appendChild(removeCssButton);
|
|
|
|
var saveCssButton = document.createElement('button');
|
|
saveCssButton.id = 'cssEditor-saveStyle';
|
|
saveCssButton.innerText = chrome.i18n.getMessage('saveStyle');
|
|
saveCssButton.className = 'cssEditor-footer-button cssEditor-float-right cssEditor-save-button';
|
|
saveCssButton.onclick = saveStyle;
|
|
saveButtonsHolder.appendChild(saveCssButton);
|
|
|
|
modalFooter.appendChild(saveButtonsHolder);
|
|
|
|
//////////////////////////
|
|
|
|
function createStyleList(allStylesTmp) {
|
|
if (allStylesTmp && allStylesTmp.length > 0) {
|
|
allStyles = allStyles.concat(allStylesTmp);
|
|
}
|
|
|
|
while (existingStyles.hasChildNodes() && existingStyles.childElementCount > 1) {
|
|
existingStyles.removeChild(existingStyles.lastChild);
|
|
}
|
|
|
|
for (var i = 0; i < allStyles.length; i++) {
|
|
var listItem = document.createElement('option');
|
|
listItem.id = 'option_' + i;
|
|
listItem.className = 'cssEditor-chapter-item';
|
|
listItem.value = 'option_' + i;
|
|
listItem.innerText = allStyles[i].title;
|
|
if (currentStyle && (allStyles[i].title === currentStyle.title)) {
|
|
listItem.selected = 'selected';
|
|
}
|
|
existingStyles.appendChild(listItem);
|
|
}
|
|
}
|
|
|
|
function editCurrentStyle() {
|
|
if (!currentStyle) {
|
|
return;
|
|
}
|
|
|
|
showStyleEditor();
|
|
showRemoveStyle();
|
|
showSaveStyle();
|
|
|
|
document.getElementById('cssEditor-styleName').value = currentStyle.title;
|
|
document.getElementById('cssEditor-matchUrl').value = currentStyle.url;
|
|
document.getElementById('cssEditor-styleContent').value = currentStyle.style;
|
|
|
|
}
|
|
|
|
function resetFields() {
|
|
document.getElementById('cssEditor-styleName').value = '';
|
|
document.getElementById('cssEditor-matchUrl').value = '';
|
|
document.getElementById('cssEditor-styleContent').value = '';
|
|
}
|
|
|
|
function hideStyleEditor() {
|
|
document.getElementById('cssEditor-styleEditor').style.display = 'none';
|
|
}
|
|
|
|
function showStyleEditor() {
|
|
document.getElementById('cssEditor-styleEditor').style.display = 'flex';
|
|
}
|
|
|
|
function showRemoveStyle() {
|
|
document.getElementById('cssEditor-removeStyle').style.display = 'inline-block';
|
|
}
|
|
|
|
function hideRemoveStyle() {
|
|
document.getElementById('cssEditor-removeStyle').style.display = 'none';
|
|
}
|
|
|
|
function showSaveStyle() {
|
|
document.getElementById('cssEditor-saveStyle').style.display = 'inline-block';
|
|
}
|
|
|
|
function hideSaveStyle() {
|
|
document.getElementById('cssEditor-saveStyle').style.display = 'none';
|
|
}
|
|
|
|
function saveStyle() {
|
|
var isRegexValid = checkRegex();
|
|
if (!isRegexValid) {
|
|
alert(chrome.i18n.getMessage('invalidRegex'));
|
|
return;
|
|
}
|
|
var tmpValue = {
|
|
title: document.getElementById('cssEditor-styleName').value,
|
|
url: document.getElementById('cssEditor-matchUrl').value,
|
|
style: document.getElementById('cssEditor-styleContent').value
|
|
}
|
|
if (currentStyle === null) {
|
|
allStyles.push(tmpValue);
|
|
currentStyle = tmpValue;
|
|
currentStyleIndex = allStyles.length - 1;
|
|
} else {
|
|
currentStyle = tmpValue;
|
|
allStyles[currentStyleIndex] = currentStyle;
|
|
}
|
|
setStyles(allStyles);
|
|
createStyleList();
|
|
showRemoveStyle();
|
|
alert(chrome.i18n.getMessage('styleSaved'));
|
|
}
|
|
|
|
function checkRegex() {
|
|
var regexContent = document.getElementById('cssEditor-matchUrl').value;
|
|
var isValid = true;
|
|
try {
|
|
new RegExp(regexContent);
|
|
} catch(e) {
|
|
isValid = false;
|
|
}
|
|
return isValid;
|
|
}
|
|
|
|
function removeStyle() {
|
|
if (confirm(chrome.i18n.getMessage('confirmDeleteStyle')) == true) {
|
|
allStyles.splice(currentStyleIndex, 1);
|
|
setStyles(allStyles);
|
|
hideSaveStyle();
|
|
hideRemoveStyle();
|
|
hideStyleEditor();
|
|
createStyleList();
|
|
}
|
|
}
|
|
|
|
|
|
/////////////////////
|
|
|
|
var modal = document.createElement('div');
|
|
modal.id = 'cssEditor-Modal';
|
|
|
|
modalContent.appendChild(modalHeader);
|
|
modalContent.appendChild(modalList);
|
|
modalContent.appendChild(modalFooter);
|
|
modal.appendChild(modalContent);
|
|
|
|
body.appendChild(modal);
|
|
|
|
modal.style.display = "none";
|
|
modal.style.position = 'fixed';
|
|
modal.style.zIndex = '1';
|
|
modal.style.left = '0';
|
|
modal.style.top = '0';
|
|
modal.style.width = '100%';
|
|
modal.style.height = '100%';
|
|
modal.style.overflow = 'auto';
|
|
modal.style.backgroundColor = 'rgba(210, 210, 210, 1)';
|
|
|
|
modalContent.style.zIndex = '2';
|
|
modalContent.style.backgroundColor = '#fff';
|
|
modalContent.style.margin = '5% auto';
|
|
modalContent.style.padding = '0';
|
|
modalContent.style.width = '70%';
|
|
|
|
window.onclick = function(event) {
|
|
if (event.target == modal) {
|
|
closeModal();
|
|
}
|
|
};
|
|
|
|
modal.style.display = "block";
|
|
|
|
document.onkeydown = function(evt) {
|
|
evt = evt || window.event;
|
|
if (evt.keyCode == 27) {
|
|
closeModal();
|
|
}
|
|
};
|
|
|
|
function closeModal() {
|
|
for (var i=0; i<document.styleSheets.length; i++) {
|
|
document.styleSheets.item(i).disabled = false;
|
|
}
|
|
modal.style.display = "none";
|
|
modalContent.parentNode.removeChild(modalContent);
|
|
modal.parentNode.removeChild(modal);
|
|
}
|
|
|
|
function saveChanges() {
|
|
var newChapters = [];
|
|
var newEbookTitle = ebookTilte.value;
|
|
if (newEbookTitle.trim() === '') {
|
|
newEbookTitle = 'eBook';
|
|
}
|
|
|
|
try {
|
|
var tmpChaptersList = document.getElementsByClassName('cssEditor-chapter-item');
|
|
if (!tmpChaptersList || !allPagesRef) {
|
|
return;
|
|
}
|
|
|
|
for (var i = 0; i < tmpChaptersList.length; i++) {
|
|
var listIndex = Number(tmpChaptersList[i].id.replace('li', ''));
|
|
if (allPagesRef[listIndex].removed === false) {
|
|
newChapters.push(allPagesRef[listIndex]);
|
|
}
|
|
}
|
|
|
|
saveEbookTitle(newEbookTitle);
|
|
saveEbookPages(newChapters);
|
|
return newChapters;
|
|
} catch (e) {
|
|
console.log('Error:', e);
|
|
}
|
|
}
|
|
|
|
/////////////////////
|
|
|
|
getStyles(createStyleList);
|
|
}
|