[dobrochan][ponyach.ru] Поддержка рейтингов в превью прикрепляемых файлов

[OpenA]

Написал вот такой вот патч, который малой кровью добавляет поддерхку рейтингов и спойлеров в поля добавления файлов в режиме превью:

diff --git a/src/Dollchan_Extension_Tools.es6.user.js b/src/Dollchan_Extension_Tools.es6.user.js
index 9855065a..bea9c639 100644
--- a/src/Dollchan_Extension_Tools.es6.user.js
+++ b/src/Dollchan_Extension_Tools.es6.user.js
@@ -8321,15 +8321,29 @@ class FileInput {
 		this._mediaEl = null;
 		this._parent = parent;
 		this._rarMsg = null;
-		this._spoilEl = $q('input[type="checkbox"][name="spoiler"]', el.parentNode);
+		this._num = el.id.slice(-1);
+		this._spoilEl = el.form.elements['spoiler'] || // iichan
+						el.form.elements['upload-rating-'+ this._num] || // ponyach
+						el.form.elements['file_'+ this._num +'_rating']; // dobrochan
 		this._thumb = null;
 		this._utils = $add(`<div class="de-file-utils">
 			<div class="de-file-btn-rar" title="${ Lng.helpAddFile[lang] }" style="display: none;"></div>
-			<input class="de-file-spoil" type="checkbox" title="${ Lng.spoilFile[lang] }" style="display: none;">
+			<div class="de-file-spoil" title="${ Lng.spoilFile[lang] }" style="display: none;"></div>
 			<div class="de-file-btn-txt" title="${ Lng.addManually[lang] }"></div>
 			<div class="de-file-btn-del" title="${ Lng.removeFile[lang] }" style="display: none;"></div>
 		</div>`);
 		[this._btnRarJpg, this._btnSpoil, this._btnTxt, this._btnDel] = Array.from(this._utils.children);
+		if(this._spoilEl) {
+			switch (this._spoilEl.type) {
+				case 'select-one':
+					this._btnSpoil.innerHTML = `<ul>${ this._spoilEl.innerHTML }</ul>`;
+					this._btnSpoil.className = 'de-file-rate';
+					this._btnSpoil.title = this._spoilEl.value;
+					break;
+				case 'checkbox':
+					this._btnSpoil.classList[(this._spoilEl.checked ? 'add': 'remove')]('de-active');
+			}
+		}
 		this._utils.addEventListener('click', this);
 		this._txtWrap = $add(`<span class="de-file-txt-wrap">
 			<input type="text" name="de-file-txt" class="de-file-txt-input de-file-txt-noedit" title="${
@@ -8339,6 +8353,7 @@ class FileInput {
 		[this._txtInput, this._txtAddBtn] = Array.from(this._txtWrap.children);
 		this._txtWrap.addEventListener('click', this);
 		this._toggleDragEvents(this._txtWrap, true);
+		
 		if(Cfg.ajaxPosting) {
 			$hide(el);
 		}
@@ -8418,8 +8433,11 @@ class FileInput {
 				this.clear();
 				this._parent.hide();
 			} else if(el === this._btnSpoil) {
-				this._spoilEl.checked = this._btnSpoil.checked;
-				return;
+				this._spoilEl.checked = this._btnSpoil.classList.toggle('de-active');
+			} else if(el.parentNode.parentNode === this._btnSpoil) {
+				this._btnSpoil.classList.remove('de-active');
+				this._btnSpoil.title = el.textContent;
+				this._spoilEl.value = el.value;
 			} else if(el === this._btnRarJpg) {
 				this._addRarJpeg();
 			} else if(el === this._btnTxt) {
@@ -8609,7 +8627,8 @@ class FileInput {
 				$hide(this._txtWrap);
 			}
 			if(this._spoilEl) {
-				this._btnSpoil.checked = this._spoilEl.checked;
+				this._btnSpoil.classList[(this._spoilEl.checked ? 'add': 'remove')]('de-active');
+				this._btnSpoil.title = this._spoilEl.type === 'select-one' ? this._spoilEl.value : Lng.spoilFile[lang];
 				$show(this._btnSpoil);
 			}
 			this._txtInput.classList.add('de-file-txt-noedit');
@@ -15887,7 +15906,14 @@ function scriptCSS() {
 	.de-file-off > .de-file-img > div::after { content: "${ Lng.dropFileHere[lang] }"; display: block; width: 80px; margin: 0 auto; font: 11px arial; opacity: .8; white-space: initial; }
 	.de-file-rarmsg { margin: 0 2px; vertical-align: 4px; font: bold 11px tahoma; cursor: default; }
 	.de-file-btn-del, .de-file-btn-rar, .de-file-btn-txt { display: inline-block; margin: 0 1px; padding: 0 16px 16px 0; cursor: pointer; }
-	.de-file-spoil { margin: 0 3px; vertical-align: 1px; }
+	.de-file-spoil, .de-file-rate { background-color: #eee; border: 2px groove; cursor: pointer; display: inline-block; margin: 0 1px; -webkit-user-select: none; user-select: none; }
+	.de-file-spoil { padding: 0 12px 12px 0; }
+	.de-file-spoil.de-active:before { content: ""; background-color: dimgrey; margin: 1px; padding: 5px; position: absolute; }
+	.de-file-rate { font: 9px tahoma; height: 13px; min-width: 30px; position: relative; }
+	.de-file-rate:before { content: "▲" attr(title); position: absolute; left: 0;}
+	.de-file-rate > ul { position: absolute; list-style: outside none none; padding: 0; bottom: 100%; border: 1px outset; visibility: hidden; }
+	.de-file-rate.de-active > ul { visibility: visible; left: -15%; right: -15%; background-color: #eee; }
+	.de-file-rate > ul > *:hover { background-color: rgba(96,96,96,.15); }
 	.de-file-txt-add { font-weight: bold; width: 21px; padding: 0 !important; }
 	.de-file-txt-input { border: 1px solid #9c9c9c; padding: 2px; font: 12px/16px sans-serif; }
 	.de-file-txt-noedit { background: rgba(255,255,255,.5); cursor: pointer; }

Выглядит это вот так: http://imgur.com/a/aAr3H

Пришлось сделать кастомный выпадающий список, потому как стандартный во первых громоздкий, во вторых в некоторых браузерах перемещение курсора на его список теряет hover и вся строка de-file-util мгновенно прячется вместе с ним же.

На оформлении сильно не настаиваю, но вот то как список открывается и закрывается - лучше оставить как есть, в него даже удобней тыкаться чем в стандартный.

[OpenA]

Поколдовал немного над стилями:

diff --git a/src/Dollchan_Extension_Tools.es6.user.js b/src/Dollchan_Extension_Tools.es6.user.js
index 9855065a..8552d33a 100644
--- a/src/Dollchan_Extension_Tools.es6.user.js
+++ b/src/Dollchan_Extension_Tools.es6.user.js
@@ -8321,22 +8321,37 @@ class FileInput {
 		this._mediaEl = null;
 		this._parent = parent;
 		this._rarMsg = null;
-		this._spoilEl = $q('input[type="checkbox"][name="spoiler"]', el.parentNode);
+		this._num = el.id.slice(-1);
+		this._spoilEl = el.form.elements['spoiler'] ||
+						el.form.elements['upload-rating-'+ this._num] ||
+						el.form.elements['file_'+ this._num +'_rating'];
 		this._thumb = null;
 		this._utils = $add(`<div class="de-file-utils">
 			<div class="de-file-btn-rar" title="${ Lng.helpAddFile[lang] }" style="display: none;"></div>
-			<input class="de-file-spoil" type="checkbox" title="${ Lng.spoilFile[lang] }" style="display: none;">
+			<div class="de-file-spoil" title="${ Lng.spoilFile[lang] }" style="display: none;"></div>
 			<div class="de-file-btn-txt" title="${ Lng.addManually[lang] }"></div>
 			<div class="de-file-btn-del" title="${ Lng.removeFile[lang] }" style="display: none;"></div>
 		</div>`);
 		[this._btnRarJpg, this._btnSpoil, this._btnTxt, this._btnDel] = Array.from(this._utils.children);
+		if(this._spoilEl) {
+			switch (this._spoilEl.type) {
+				case 'select-one':
+					$hide(this._spoilEl);
+					this._btnSpoil.innerHTML = `<ul>${ this._spoilEl.innerHTML }</ul>`;
+					this._btnSpoil.className = 'de-file-rate';
+					this._btnSpoil.title = this._spoilEl.selectedOptions[0].textContent;
+					break;
+				case 'checkbox':
+					this._btnSpoil.classList[(this._spoilEl.checked ? 'add': 'remove')]('de-active');
+			}
+		}
 		this._utils.addEventListener('click', this);
 		this._txtWrap = $add(`<span class="de-file-txt-wrap">
-			<input type="text" name="de-file-txt" class="de-file-txt-input de-file-txt-noedit" title="${
-				Lng.youCanDrag[lang] }" placeholder="${ Lng.dropFileHere[lang] }">
+			<div class="de-file-txt-drop" title="${	Lng.youCanDrag[lang] }"></div>
+			<input type="text" name="de-file-txt" class="de-file-txt-input de-file-off" placeholder="${ Lng.dropFileHere[lang] }">
 			<input type="button" class="de-file-txt-add" value="+" title="${
 				Lng.add[lang] }" style="display: none;"></span>`);
-		[this._txtInput, this._txtAddBtn] = Array.from(this._txtWrap.children);
+		[this._txtDrop, this._txtInput, this._txtAddBtn] = Array.from(this._txtWrap.children);
 		this._txtWrap.addEventListener('click', this);
 		this._toggleDragEvents(this._txtWrap, true);
 		if(Cfg.ajaxPosting) {
@@ -8380,7 +8395,7 @@ class FileInput {
 	}
 	clear() {
 		if(this._isThumb) {
-			this._thumb.classList.add('de-file-off');
+			this._thumb.className = 'de-file de-file-off';
 			if(this._mediaEl) {
 				window.URL.revokeObjectURL(this._mediaEl.src);
 				this._mediaEl.parentNode.title = Lng.youCanDrag[lang];
@@ -8397,8 +8412,9 @@ class FileInput {
 			if(this._isThumb) {
 				$hide(this._txtWrap);
 			}
+			$show(this._txtDrop);
 			this._txtInput.value = '';
-			this._txtInput.classList.add('de-file-txt-noedit');
+			this._txtInput.className = 'de-file-txt-input de-file-off';
 			this._txtInput.placeholder = Lng.dropFileHere[lang];
 		}
 		this.extraFile = this.imgFile = null;
@@ -8408,7 +8424,7 @@ class FileInput {
 	}
 	handleEvent(e) {
 		const el = e.target;
-		const isThumb = el === this._thumb || el.className === 'de-file-img';
+		const isThumb = el === this._thumb || el.className === 'de-file-img' ? '_thumb' : el === this._txtDrop ? '_txtInput' : 0;
 		switch(e.type) {
 		case 'change': setTimeout(() => this._onFileChange(false), 20); return;
 		case 'click':
@@ -8418,8 +8434,11 @@ class FileInput {
 				this.clear();
 				this._parent.hide();
 			} else if(el === this._btnSpoil) {
-				this._spoilEl.checked = this._btnSpoil.checked;
-				return;
+				this._spoilEl.checked = this._btnSpoil.classList.toggle('de-active');
+			} else if(el.parentNode.parentNode === this._btnSpoil) {
+				this._btnSpoil.classList.remove('de-active');
+				this._btnSpoil.title = el.textContent;
+				this._spoilEl.value = el.value;
 			} else if(el === this._btnRarJpg) {
 				this._addRarJpeg();
 			} else if(el === this._btnTxt) {
@@ -8428,31 +8447,28 @@ class FileInput {
 				if(this._isThumb) {
 					$toggle(this._txtWrap);
 				}
-				this._txtInput.classList.remove('de-file-txt-noedit');
+				$hide(this._txtDrop);
 				this._txtInput.placeholder = Lng.enterTheLink[lang];
 				this._txtInput.focus();
 			} else if(el === this._txtAddBtn) {
 				this._addUrlFile(this._txtInput.value);
-			} else if(el === this._txtInput && !this._isTxtEditable) {
-				this._input.click();
-				this._txtInput.blur();
 			}
 			e.stopPropagation();
 			$pd(e);
 			return;
 		case 'dragenter':
 			if(isThumb) {
-				this._thumb.classList.add('de-file-drag');
+				this[isThumb].classList.add('de-file-drag');
 			}
 			return;
 		case 'dragleave':
-			if(isThumb && !this._thumb.contains(e.relatedTarget)) {
-				this._thumb.classList.remove('de-file-drag');
+			if(isThumb && !this[isThumb].contains(e.relatedTarget)) {
+				this[isThumb].classList.remove('de-file-drag');
 			}
 			return;
 		case 'drop':
 			const dt = e.dataTransfer;
-			if(!isThumb && el !== this._txtInput) {
+			if(!isThumb) {
 				return;
 			}
 			const filesLen = dt.files.length;
@@ -8465,7 +8481,7 @@ class FileInput {
 			} else {
 				this._addUrlFile(dt.getData('text/plain'));
 			}
-			setTimeout(() => this._thumb.classList.remove('de-file-drag'), 10);
+			setTimeout(() => this[isThumb].classList.remove('de-file-drag'), 10);
 			e.stopPropagation();
 			$pd(e);
 		}
@@ -8609,10 +8625,12 @@ class FileInput {
 				$hide(this._txtWrap);
 			}
 			if(this._spoilEl) {
-				this._btnSpoil.checked = this._spoilEl.checked;
+				this._btnSpoil.classList[(this._spoilEl.checked ? 'add': 'remove')]('de-active');
+				this._btnSpoil.title = this._spoilEl.type === 'select-one' ? this._spoilEl.value : Lng.spoilFile[lang];
 				$show(this._btnSpoil);
 			}
-			this._txtInput.classList.add('de-file-txt-noedit');
+			$show(this._txtDrop);
+			this._txtInput.classList.remove('de-file-off');
 			this._txtInput.placeholder = Lng.dropFileHere[lang];
 		}
 		this._parent.hide();
@@ -15873,7 +15891,8 @@ function scriptCSS() {
 	video { background: black; }` +
 
 	// File inputs
-	`.de-file { display: inline-block; vertical-align: top; margin: 1px; height: ${ p = aib.multiFile ? 90 : 130 }px; width: ${ p }px; text-align: center; background-color: rgba(96,96,96,.15); border: 1px dashed grey; }
+	`.de-file { display: inline-block; vertical-align: top; margin: 1px; height: ${ p = aib.multiFile ? 90 : 130 }px; width: ${ p }px; text-align: center; }
+	.de-file, .de-file-txt-input { background-color: rgba(96,96,96,.15); border: 1px dashed grey; }
 	.de-file > .de-file-img { display: table; width: 100%; height: 100%; cursor: pointer; }
 	.de-file > .de-file-img > div { display: table-cell; vertical-align: middle; }
 	.de-file > .de-file-utils { display: none; height: 16px; margin-top: -18px; padding: 1px 0; background: rgba(64,64,64,.6); position: relative; }
@@ -15887,10 +15906,19 @@ function scriptCSS() {
 	.de-file-off > .de-file-img > div::after { content: "${ Lng.dropFileHere[lang] }"; display: block; width: 80px; margin: 0 auto; font: 11px arial; opacity: .8; white-space: initial; }
 	.de-file-rarmsg { margin: 0 2px; vertical-align: 4px; font: bold 11px tahoma; cursor: default; }
 	.de-file-btn-del, .de-file-btn-rar, .de-file-btn-txt { display: inline-block; margin: 0 1px; padding: 0 16px 16px 0; cursor: pointer; }
-	.de-file-spoil { margin: 0 3px; vertical-align: 1px; }
+	.de-file-spoil, .de-file-rate { background-color: #fff; border: 1px dotted darkcyan; cursor: pointer; display: inline-block; -webkit-user-select: none; user-select: none; border-radius: 3px; }
+	.de-file-spoil { padding: 0 12px 12px 0; margin: 0 1px; }
+	.de-file-spoil.de-active { background-color: darkcyan; border: 1px inset aliceblue; }
+	.de-file-spoil.de-active:before { content: "!"; color: white; position: absolute; font: 12px "Times"; font-weight: bold; padding: 0 4px; }
+	.de-file-rate { font: 11px sans; padding: 7px 17px; position: relative; }
+	.de-file-rate:before { content: "▲" attr(title); position: absolute; left: -1px; top: 1px; font-size: 10px; }
+	.de-file-rate > ul { position: absolute; list-style: outside none none; padding: 0; margin: 0; bottom: 100%; border: 1px outset; visibility: hidden; }
+	.de-file-rate.de-active > ul { visibility: visible; left: -15%; right: -15%; background-color: #fff; }
+	.de-file-rate > ul > * { display: list-item; text-align: center; } .de-file-rate > ul > *:hover { background-color: rgba(96,96,96,.15); }
 	.de-file-txt-add { font-weight: bold; width: 21px; padding: 0 !important; }
-	.de-file-txt-input { border: 1px solid #9c9c9c; padding: 2px; font: 12px/16px sans-serif; }
-	.de-file-txt-noedit { background: rgba(255,255,255,.5); cursor: pointer; }
+	.de-file-txt-input { padding: 2px; font: 12px/16px sans-serif; }
+	.de-file-txt-drop { cursor: pointer; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; z-index: 1; }
+	.de-file-txt-wrap { position: relative; }
 	.de-file-utils { display: inline-block; float: none; vertical-align: -2px; }` +
 	gif('.de-file-btn-del', 'R0lGODlhEAAQALMOAP8zAMopAJMAAP/M//+DIP8pAP86Av9MDP9sFP9zHv9aC/9gFf9+HJsAAP///wAAACH5BAEAAA4ALAAAAAAQABAAAARU0MlJKw3B4hrGyFP3hQNBjE5nooLJMF/3msIkJAmCeDpeU4LFQkFUCH8VwWHJRHIM0CiIMwBYryhS4XotZDuFLUAg6LLC1l/5imykgW+gU0K22C0RADs=') +
 	gif('.de-file-btn-rar', 'R0lGODlhEAAQALMAAF82SsxdwQMEP6+zzRA872NmZQesBylPHYBBHP///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAkALAAAAAAQABAAQARTMMlJaxqjiL2L51sGjCOCkGiBGWyLtC0KmPIoqUOg78i+ZwOCUOgpDIW3g3KJWC4t0ElBRqtdMr6AKRsA1qYy3JGgMR4xGpAAoRYkVDDWKx6NRgAAOw==') +

еще за одно переделал (точнее привел к единому виду) упрощенный стиль, не стоило наверно все в одно мешать, ну и ладно. Выберете что понравиться.

[SthephanShinkufag]

Почему я не спешу внедрять — это чисто фишка доброчана, и нигде больше. Менять поведение ради одной борды желательно бы в BoardDetector.js > getImageBoard(). А еще что-то там ломалось, уже не помню точно что. Хотел всё это пофиксить, но было некогда. Может гляну.

[OpenA]

На поняче еще есть.

А еще что-то там ломалось, уже не помню точно что.

При прикреплении архива, надпись png+7z сдвигает все на соседнее поле файла - это наверно? Я у себя вылечил сокращением ~~png+~~7z, больше вроде ничего такого не заметил.

Я вообще и не рассчитываю что ты примешь отсюда все как есть , тут поле упрощенного добавления файлов пирипилено, зачем - сам не помню (в угаре был наверное).

[SthephanShinkufag]

Dobrochan is dead.

[OpenA]

На https://rf.dobrochan.net/ они теперь, ну или некоторые

[SthephanShinkufag]

@OpenA

Это что, новый доброчан? o_O На движке vichan? Б-же. x__x

Где почитать про стори? Кто такие? Я вообще не следил за имиджбордами.