edit tags: use client dialog

classes/article.php

@@ -161,35 +161,11 @@ class Article extends Handler_Protected {
 		return $rc;
 	}
 
-	function editArticleTags() {
-
-		$param = clean($_REQUEST['param']);
-
-		$tags = self::get_article_tags($param);
-
-		$tags_str = join(", ", $tags);
-
-		print_hidden("id", "$param");
-		print_hidden("op", "article");
-		print_hidden("method", "setArticleTags");
-
-		print "<header class='horizontal'>" . __("Tags for this article (separated by commas):")."</header>";
-
-		print "<section>";
-		print "<textarea dojoType='dijit.form.SimpleTextarea' rows='4'
-			style='height : 100px; font-size : 12px; width : 98%' id='tags_str'
-			name='tags_str'>$tags_str</textarea>
-		<div class='autocomplete' id='tags_choices'
-				style='display:none'></div>";
-		print "</section>";
-
-		print "<footer>";
-		print "<button dojoType='dijit.form.Button'
-			type='submit' class='alt-primary'>".__('Save')."</button> ";
-		print "<button dojoType='dijit.form.Button'
-			onclick='App.dialogOf(this).hide()'>".__('Cancel')."</button>";
-		print "</footer>";
+	function printArticleTags() {
+		$id = (int) clean($_REQUEST['id'] ?? 0);
 
+		print json_encode(["id" => $id,
+			"tags" => self::get_article_tags($id)]);
 	}
 
 	function setScore() {

js/Article.js

@@ -310,9 +310,31 @@ const Article = {
 	},
 	editTags: function (id) {
 		const dialog = new fox.SingleUseDialog({
-			id: "editTagsDlg",
 			title: __("Edit article Tags"),
-			content: __("Loading, please wait..."),
+			content: `
+				${App.FormFields.hidden("id", id.toString())}
+				${App.FormFields.hidden("op", "article")}
+				${App.FormFields.hidden("method", "setArticleTags")}
+
+				<header class='horizontal'>
+					${__("Tags for this article (separated by commas):")}
+				</header>
+
+				<section>
+					<textarea dojoType='dijit.form.SimpleTextarea' rows='4' disabled='true'
+						id='tags_str' name='tags_str'></textarea>
+					<div class='autocomplete' id='tags_choices' style='display:none'></div>
+				</section>
+
+				<footer>
+					<button dojoType='dijit.form.Button' type='submit' class='alt-primary'>
+						${__('Save')}
+					</button>
+					<button dojoType='dijit.form.Button' onclick='App.dialogOf(this).hide()'>
+						${__('Cancel')}
+					</button>
+				</footer>
+			`,
 			execute: function () {
 				if (this.validate()) {
 					Notify.progress("Saving article tags...", true);
@@ -344,10 +366,13 @@ const Article = {
 		const tmph = dojo.connect(dialog, 'onShow', function () {
 			dojo.disconnect(tmph);
 
-			xhrPost("backend.php", {op: "article", method: "editarticletags", param: id}, (transport) => {
-				dialog.attr('content', transport.responseText);
+			xhrJson("backend.php", {op: "article", method: "printArticleTags", id: id}, (reply) => {
 
-				new Ajax.Autocompleter('tags_str', 'tags_choices',
+				dijit.getEnclosingWidget($("tags_str"))
+					.attr('value', reply.tags.join(", "))
+					.attr('disabled', false);
+
+				new Ajax.Autocompleter("tags_str", "tags_choices",
 					"backend.php?op=article&method=completeTags",
 					{tokens: ',', paramName: "search"});
 			});

themes/compact.css

@@ -506,6 +506,11 @@ body.ttrss_main .dijitDialog .dlgButtons {
 body.ttrss_main .dijitDialog footer.text-center {
   text-align: center;
 }
+body.ttrss_main .dijitDialog textarea#tags_str {
+  height: 100px;
+  font-size: 12px;
+  width: 98%;
+}
 body.ttrss_main i.icon-label {
   color: #fff7d5;
 }
@@ -854,9 +859,6 @@ body.ttrss_main span.highlight {
 body.ttrss_main #headlines-frame .dijitCheckBox {
   margin-right: 4px;
 }
-body.ttrss_main #editTagsDlg {
-  overflow: visible;
-}
 body.ttrss_main #feedEditDlg img.feedIcon {
   border: 1px solid #ccc;
   padding: 5px;

themes/compact_night.css

@@ -506,6 +506,11 @@ body.ttrss_main .dijitDialog .dlgButtons {
 body.ttrss_main .dijitDialog footer.text-center {
   text-align: center;
 }
+body.ttrss_main .dijitDialog textarea#tags_str {
+  height: 100px;
+  font-size: 12px;
+  width: 98%;
+}
 body.ttrss_main i.icon-label {
   color: #fff7d5;
 }
@@ -854,9 +859,6 @@ body.ttrss_main span.highlight {
 body.ttrss_main #headlines-frame .dijitCheckBox {
   margin-right: 4px;
 }
-body.ttrss_main #editTagsDlg {
-  overflow: visible;
-}
 body.ttrss_main #feedEditDlg img.feedIcon {
   border: 1px solid #ccc;
   padding: 5px;

themes/light.css

@@ -506,6 +506,11 @@ body.ttrss_main .dijitDialog .dlgButtons {
 body.ttrss_main .dijitDialog footer.text-center {
   text-align: center;
 }
+body.ttrss_main .dijitDialog textarea#tags_str {
+  height: 100px;
+  font-size: 12px;
+  width: 98%;
+}
 body.ttrss_main i.icon-label {
   color: #fff7d5;
 }
@@ -854,9 +859,6 @@ body.ttrss_main span.highlight {
 body.ttrss_main #headlines-frame .dijitCheckBox {
   margin-right: 4px;
 }
-body.ttrss_main #editTagsDlg {
-  overflow: visible;
-}
 body.ttrss_main #feedEditDlg img.feedIcon {
   border: 1px solid #ccc;
   padding: 5px;

themes/light/tt-rss.less

@@ -516,7 +516,6 @@ body.ttrss_main {
 	}
 
 	.dijitDialog {
-
 		header,
 		.dlgSec, .dlgSecHoriz {
 			font-size : 16px;
@@ -584,6 +583,12 @@ body.ttrss_main {
 		footer.text-center {
 			text-align: center;
 		}
+
+		textarea#tags_str {
+			height : 100px;
+			font-size : 12px;
+			width : 98%;
+		}
 	}
 
 	i.icon-label {
@@ -992,18 +997,10 @@ body.ttrss_main {
 		color : #cc90cc;
 	}
 
-	div.enclosure_title {
-
-	}
-
 	#headlines-frame .dijitCheckBox {
 		margin-right : 4px;
 	}
 
-	#editTagsDlg{
-		overflow: visible;
-	}
-
 	#feedEditDlg img.feedIcon {
 		border : 1px solid #ccc;
 		padding : 5px;

themes/night.css

@@ -507,6 +507,11 @@ body.ttrss_main .dijitDialog .dlgButtons {
 body.ttrss_main .dijitDialog footer.text-center {
   text-align: center;
 }
+body.ttrss_main .dijitDialog textarea#tags_str {
+  height: 100px;
+  font-size: 12px;
+  width: 98%;
+}
 body.ttrss_main i.icon-label {
   color: #fff7d5;
 }
@@ -855,9 +860,6 @@ body.ttrss_main span.highlight {
 body.ttrss_main #headlines-frame .dijitCheckBox {
   margin-right: 4px;
 }
-body.ttrss_main #editTagsDlg {
-  overflow: visible;
-}
 body.ttrss_main #feedEditDlg img.feedIcon {
   border: 1px solid #ccc;
   padding: 5px;

themes/night_blue.css

@@ -507,6 +507,11 @@ body.ttrss_main .dijitDialog .dlgButtons {
 body.ttrss_main .dijitDialog footer.text-center {
   text-align: center;
 }
+body.ttrss_main .dijitDialog textarea#tags_str {
+  height: 100px;
+  font-size: 12px;
+  width: 98%;
+}
 body.ttrss_main i.icon-label {
   color: #fff7d5;
 }
@@ -855,9 +860,6 @@ body.ttrss_main span.highlight {
 body.ttrss_main #headlines-frame .dijitCheckBox {
   margin-right: 4px;
 }
-body.ttrss_main #editTagsDlg {
-  overflow: visible;
-}
 body.ttrss_main #feedEditDlg img.feedIcon {
   border: 1px solid #ccc;
   padding: 5px;