Участник:Zimorodokan/add.js

Материал из Викиновостей, свободного источника новостей

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

  • Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
  • Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
  • Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
  • Opera: Нажмите Ctrl+F5.
console.log('START')

let E = {};
let F = {};

F.preparePage = function preparePage () {
	console.log('F.preparePage START')
	if (location.pathname == '/wiki/%D0%A3%D1%87%D0%B0%D1%81%D1%82%D0%BD%D0%B8%D0%BA:Zimorodokan/%D0%94%D0%9E%D0%91%D0%90%D0%92%D0%98%D0%A2%D0%AC') {
		let html = document.createElement('html');
		let head = document.createElement('head');
		let body = document.createElement('body');
		head.setAttribute('lang', 'ru');
		head.setAttribute('dir', 'ltr');
		html.appendChild(head);
		html.appendChild(body);
		console.log('BEFORELOAD', head);
		document.replaceChild(html, document.documentElement);
		document.head.insertAdjacentHTML('beforeend', `
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Добавить новость</title>
		<meta name="Description" content="Страница добавления новости в проект ru.wikinews.org">
		`);
		document.head.insertAdjacentHTML('beforeend', `<style>

		*,
		*::before,
		*::after {
			background-clip: padding-box;
			background-color: transparent;
			background-image: none;
			border: 0 solid transparent;
			border-collapse: collapse;
			border-image-width: 0;
			box-sizing: border-box;
			color: #000;
			font-family: Verdana, Tahoma, Calibri, sans-serif;
			font-size: unset;
			margin: 0;
			line-height: normal;
			outline: 0 solid transparent;
			overflow-wrap: break-word;
			padding: 0;
			text-transform: none;
			word-wrap: break-word;
		}

		a {
			color: rgb(0, 139, 19);
			text-decoration: underline;
		}

		a:hover {
			color: rgb(0, 63, 8);
		}

		button {
			cursor: pointer;
		}

		.how-add-news-link {
			font-size: 17px;
			margin: 16px auto;
			text-align: center;
		}

		#addNewsForm {
			background-color: rgb(240, 255, 240);
			border-color: rgb(15, 102, 7);
			border-width: 2px;
			margin: 16px auto;
			padding: 0 16px;
			box-shadow: 0 0 5px;
			width: calc(100% - 6px);
			border-radius: 10px;
		}

		#addNewsForm .form-input {
			margin: 32px auto;
		}

		#addNewsForm .form-input label {
			color: rgb(15, 102, 7);
			cursor: pointer;
			display: block;
			font-weight: bold;
			margin: 0 0 8px;
		}

		#addNewsForm .form-input input.block {
			background-color: rgb(255, 255, 255);
			border-color: rgb(224, 224, 224);
			border-radius: 4px;
			border-width: 2px;
			display: block;
			font-size: 16px;
			line-height: 1.5;
			padding: 4px 8px;
			width: 100%;
		}

		#addNewsForm .form-input select.block {
			background-color: rgb(255, 255, 255);
			background-color: rgb(244, 244, 244);
			border-color: rgb(224, 224, 224);
			border-radius: 4px;
			border-width: 2px;
			display: block;
			font-size: 16px;
			max-height: 95vh;
			width: 100%;
		}

		#addNewsForm .form-input input.block:invalid {
			border-color: rgb(255, 0, 0);
			box-shadow: none;
		}

		#addNewsForm .form-input input.block:focus {
			border-color: rgb(13, 150, 0);
		}

		#addNewsForm .form-input select.block:invalid {
			border-color: rgb(255, 0, 0);
			box-shadow: none;
		}

		#addNewsForm .form-input select.block:focus {
			border-color: rgb(13, 150, 0);
		}

		#addNewsForm .form-input select.block option {
			background-color: #fff;
			cursor: pointer;
			display: block;
			font-size: 16px;
			line-height: 32px;
			margin: 1px 0;
			padding: 8px;
			width: 100%;
		}

		#addNewsForm .form-textarea {
			margin: 32px auto;
		}

		#addNewsForm .form-textarea label {
			color: rgb(15, 102, 7);
			cursor: pointer;
			display: block;
			font-weight: bold;
			margin: 0 0 8px;
		}

		#addNewsForm .form-textarea textarea.block {
			background-color: rgb(255, 255, 255);
			border-color: rgb(224, 224, 224);
			border-radius: 4px;
			border-width: 2px;
			display: block;
			font-size: 16px;
			height: 95vh;
			min-height: 240px;
			line-height: 1.5;
			padding: 4px 8px;
			min-width: 100%;
		}

		#addNewsForm .form-textarea textarea.block:focus {
			border-color: rgb(13, 150, 0);
		}

		#addNewsForm .form-textarea textarea.block:invalid {
			border-color: rgb(255, 0, 0);
			box-shadow: none;
		}

		#addNewsForm .form-flat-buttons {
			align-items: center;
			border-color: rgb(244, 244, 244);
			border-width: 1px 0 0 0;
			bottom: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin: 32px auto 16px;
		}

		#addNewsForm .form-flat-buttons>button {
			border-radius: 8px;
			box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .2);
			cursor: pointer;
			display: block;
			flex: none;
			font-size: 16px;
			line-height: 48px;
			margin: 0 8px 16px;
			min-width: 64px;
			padding: 0 24px;
			overflow: hidden;
			text-align: center;
			white-space: nowrap;
		}

		#addNewsForm .form-flat-buttons>button:hover {
			box-shadow: 0 5px 12px 0 rgba(0, 0, 0, .2);
		}

		.button.green {
			background-color: rgb(14, 150, 0);
			color: rgb(255, 255, 255);
		}

		.button.green:hover {
			background-color: rgb(17, 202, 0);
			color: rgb(255, 255, 255);
		}

		.button.blue {
			background-color: rgb(0, 65, 161);
			color: rgb(255, 255, 255);
		}

		.button.blue:hover {
			background-color: rgb(0, 101, 252);
			color: rgb(255, 255, 255);
		}

		.button.white {
			background-color: rgb(255, 255, 255);
			color: rgb(218, 36, 25);
		}

		.button.white:hover {
			background-color: rgb(244, 244, 244);
		}

		@media (min-width: 640px) {
			#addNewsForm .flex {
				align-content: stretch;
				display: flex;
				justify-content: space-between;
				margin: 32px auto;
			}

			#addNewsForm .flex>div {
				flex: none;
				margin: auto;
				width: 40%;
			}
		}

		</style>`);
		document.body.insertAdjacentHTML('beforeend', `

		<div class="how-add-news-link"><a href="https://ru.wikinews.org/?curid=1334" target="_blank">Как добавить новость</a></div>
		<form id="addNewsForm" class="form">
			<div class="form-input">
				<label for="addNewsForm_Title">Заголовок новости</label>
				<input class="block" type="text" name="addNewsForm_Title" id="addNewsForm_Title" required autocomplete="off"
					placeholder="Введите Заголовок новости">
			</div>
			<div class="form-textarea">
				<label for="addNewsForm_Text">Текст новости</label>
				<textarea class="block" name="addNewsForm_Text" id="addNewsForm_Text" required autocomplete="off"
					placeholder="Введите текст новости"></textarea>
			</div>
			<div class="form-input">
				<label for="addNewsForm_Image">Изображение на Викискладе (<a href="https://commons.wikimedia.org/"
						target="_blank">выбрать</a>)</label>
				<input class="block" type="text" name="addNewsForm_Image" id="addNewsForm_Image" autocomplete="off"
					placeholder="Изображение на Викискладе">
			</div>
			<div class="flex">
				<div class="form-input">
					<label for="addNewsForm_Topics">Главная тема</label>
					<select class="block" name="addNewsForm_Topics" id="addNewsForm_Topics" size="20" required>
						<option value="Происшествия">Происшествия</option>
						<option value="Политика‎">Политика‎</option>
						<option value="Наука и технологии‎">Наука и технологии‎</option>
						<option value="Интернет">Интернет</option>
						<option value="Общество‎">Общество‎</option>
						<option value="Спорт">Спорт</option>
						<option value="Экономика">Экономика</option>
						<option value="Преступность и право">Преступность и право</option>
						<option value="Культура">Культура</option>
						<option value="Религия‎">Религия‎</option>
						<option value="Фоторепортажи">Фоторепортажи</option>
						<option value="Дни рождения‎ ">Дни рождения‎ </option>
						<option value="Рейтинги‎">Рейтинги‎</option>
						<option value="Некрологи‎">Некрологи‎</option>
						<option value="Спорт">Спорт</option>
						<option value="Спорт">Спорт</option>
						<option value="Спорт">Спорт</option>
						<option value="Спорт">Спорт</option>
						<option value="Спорт">Спорт</option>
						<option value="Спорт">Спорт</option>
						<option value="Спорт">Спорт</option>
						<option value="Спорт">Спорт</option>
						<option value="Спорт">Спорт</option>
						<option value="Спорт">Спорт</option>
						<option value="Спорт">Спорт</option>
						<option value="Спорт">Спорт</option>
						<option value="Спорт">Спорт</option>
						<option value="Спорт">Спорт</option>
						<option value="Спорт">Спорт</option>
					</select>
				</div>
				<div class="form-input">
					<label for="addNewsForm_Countries">Страна</label>
					<select class="block" name="addNewsForm_Countries" id="addNewsForm_Countries" size="20" required>
						<option value="Россия">Россия</option>
						<option value="Украина">Украина</option>
						<option value="США">США</option>
						<option value="Франция">Франция</option>
						<option value="Китай">Китай</option>
						<option value="Великобритания">Великобритания</option>
						<option value="Германия">Германия</option>
						<option value="Евросоюз">Евросоюз</option>
						<option value="Испания">Испания</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
						<option value="США">США</option>
					</select>
				</div>
			</div>
			<div class="form-input">
				<label for="addNewsForm_Categories">Категории новости</label>
				<input class="block" type="text" name="addNewsForm_Categories" id="addNewsForm_Categories"
					autocomplete="off" placeholder="Категории с разделителем «|»">
			</div>
			<div class="form-flat-buttons">
				<button type="button" class="button type1 green" id="addNewsForm_SaveButton">Сохранить</button>
				<button type="button" class="button type1 blue" id="addNewsForm_EditButton">Редактировать</button>
				<button type="button" class="button type1 white" id="addNewsForm_CancelButton">Отменить</button>
			</div>
		</form>
	</body>

	`);
	}
};

F.delayedStart = function delayedStart (func, timeout) {
	console.log("F.delayedStart");
	timeoutID = window.setTimeout(func, timeout);
};

F.findElements = function findElements() {
	console.log("F.findElements");
	E.addNewsForm = document.getElementById("addNewsForm");
	E.addNewsForm_SaveButton = document.getElementById("addNewsForm_SaveButton");
	console.log(E.addNewsForm);
};

F.formSubmit = async function formSubmit(event) {
	event.preventDefault();
	console.log("F.formSubmit");
	let newsFormData = new FormData(E.addNewsForm);
	let newsMainCountry = newsFormData.get('addNewsForm_Countries') ? newsFormData.get('addNewsForm_Countries') : '';
	let newsMainTopic = newsFormData.get('addNewsForm_Topics') ? newsFormData.get('addNewsForm_Topics') : '';
	let newsText = newsFormData.get('addNewsForm_Text');
	let newsCategories = newsFormData.get('addNewsForm_Categories') ? newsFormData.get('addNewsForm_Categories') : '';
	let newsImage = newsFormData.get('addNewsForm_Image');
	let newsTitle = newsFormData.get('addNewsForm_Title');
	let wikiNewsTitle = 'Участник:Zimorodokan%2F' + newsTitle;
	let wikiNewsText = `
{{редактируется}}
{{дата|19 October 2020}}
{{тема|${newsMainCountry}|${newsMainTopic}}<!-- Внесите несколько (от 1 до 4) главных тем-категорий, разделяя символом «|» -->
[[Файл:${newsImage}|thumb|left|300px|]]<!-- Вставьте имя (после слова «Файл:») и описание (перед символами «]]») файла с Викисклада. -->
<!-- Напишите свой текст ниже этой строчки -->

${newsText}

<!-- Текст новости должен закончиться над этой строчкой -->
{{-}}

== Источники ==
* {{источник|url=|Название=|Автор=|Издатель=|Дата=}}

{{Подвал новости}}

<!-- Добавляйте категории разделяя символом «|» -->
{{Категории|${newsCategories}}}
	`;
	console.log(wikiNewsText);
	let csrf_token = await F.getCsrfToken();
	F.createNews(wikiNewsTitle, wikiNewsText, csrf_token);
};

F.createNews = async function createNews(wikiNewsTitle, wikiNewsText, csrf_token) {
	console.log("F.createNews");
	let newsPostData = new FormData();
	newsPostData.append('text', wikiNewsText)
	newsPostData.append('token', csrf_token)
	let requestOptions = {
		'method': 'POST',
		'body': newsPostData
	}
	let response = await fetch(`https://ru.wikinews.org/w/api.php?action=edit&format=json&title=${wikiNewsTitle}`, requestOptions);
	console.log(response);
};


F.addEvents = function addEvents() {
	console.log("F.addEvents");
	if (E.addNewsForm_SaveButton) {
		E.addNewsForm_SaveButton.addEventListener("click", F.formSubmit);
	};
};

F.getCsrfToken = async function getCsrfToken() {
	console.log("F.getCsrfToken");
	try {
		var url = 'https://ru.wikinews.org/w/api.php?action=query&format=json&meta=tokens';
		var response = await fetch(url);
		var data = await response.json();
		console.log(data);
		return data.query.tokens.csrftoken;
	} catch(err) {
		console.log(err);
	}
};


F.preparePage();
F.findElements();
F.addEvents();
Источник — https://ru.wikinews.org/w/index.php?title=Участник:Zimorodokan/add.js&oldid=8611966