label editor: use client dialog

classes/pref/labels.php

@@ -10,72 +10,14 @@ class Pref_Labels extends Handler_Protected {
 	function edit() {
 		$label_id = clean($_REQUEST['id']);
 
-		$sth = $this->pdo->prepare("SELECT * FROM ttrss_labels2 WHERE
+		$sth = $this->pdo->prepare("SELECT id, caption, fg_color, bg_color FROM ttrss_labels2 WHERE
 			id = ? AND owner_uid = ?");
 		$sth->execute([$label_id, $_SESSION['uid']]);
 
-		if ($line = $sth->fetch()) {
+		if ($line = $sth->fetch(PDO::FETCH_ASSOC)) {
-
+			print json_encode($line);
-			print_hidden("id", "$label_id");
+		} else {
-			print_hidden("op", "pref-labels");
+			print json_encode(["error" => "LABEL_NOT_FOUND"]);
-			print_hidden("method", "save");
-
-			print "<form onsubmit='return false;'>";
-
-			print "<header>".__("Caption")."</header>";
-
-			print "<section>";
-
-			$fg_color = $line['fg_color'];
-			$bg_color = $line['bg_color'] ? $line['bg_color'] : '#fff7d5';
-
-			print "<input style='font-size : 16px; color : $fg_color; background : $bg_color; transition : background 0.1s linear'
-				id='labelEdit_caption' name='caption' dojoType='dijit.form.ValidationTextBox'
-				required='true' value=\"".htmlspecialchars($line['caption'])."\">";
-
-			print "</section>";
-
-			print "<header>" . __("Colors") . "</header>";
-			print "<section>";
-
-			print "<table>";
-			print "<tr><th style='text-align : left'>".__("Foreground:")."</th><th style='text-align : left'>".__("Background:")."</th></tr>";
-			print "<tr><td style='padding-right : 10px'>";
-
-			print "<input dojoType='dijit.form.TextBox'
-				style='display : none' id='labelEdit_fgColor'
-				name='fg_color' value='$fg_color'>";
-			print "<input dojoType='dijit.form.TextBox'
-				style='display : none' id='labelEdit_bgColor'
-				name='bg_color' value='$bg_color'>";
-
-			print "<div dojoType='dijit.ColorPalette'>
-			<script type='dojo/method' event='onChange' args='fg_color'>
-				dijit.byId('labelEdit_fgColor').attr('value', fg_color);
-				dijit.byId('labelEdit_caption').domNode.setStyle({color: fg_color});
-			</script>
-			</div>";
-
-			print "</td><td>";
-
-			print "<div dojoType='dijit.ColorPalette'>
-			<script type='dojo/method' event='onChange' args='bg_color'>
-				dijit.byId('labelEdit_bgColor').attr('value', bg_color);
-				dijit.byId('labelEdit_caption').domNode.setStyle({backgroundColor: bg_color});
-			</script>
-			</div>";
-
-			print "</td></tr></table>";
-			print "</section>";
-
-			print "<footer>";
-			print "<button dojoType='dijit.form.Button' type='submit' class='alt-primary' onclick='App.dialogOf(this).execute()'>".
-				__('Save')."</button>";
-			print "<button dojoType='dijit.form.Button' onclick='App.dialogOf(this).hide()'>".
-				__('Cancel')."</button>";
-			print "</footer>";
-
-			print "</form>";
 		}
 	}
 

js/App.js

@@ -18,8 +18,8 @@ const App = {
    is_prefs: false,
    LABEL_BASE_INDEX: -1024,
    FormFields: {
-      hidden: function(name, value) {
+      hidden: function(name, value, id = "") {
-         return `<input dojoType="dijit.form.TextBox" style="display : none" name="${name}" value="${App.escapeHtml(value)}"></input>`
+         return `<input id="${id}" dojoType="dijit.form.TextBox" style="display : none" name="${name}" value="${App.escapeHtml(value)}"></input>`
       }
    },
    Scrollable: {

js/PrefLabelTree.js

@@ -1,5 +1,5 @@
 /* eslint-disable prefer-rest-params */
-/* global __, define, lib, dijit, dojo, xhrPost, Notify, fox */
+/* global __, define, lib, dijit, dojo, xhrPost, Notify, fox, App */
 
 define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/form/DropDownButton"], function (declare, domConstruct) {
 
@@ -61,6 +61,13 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/f
 			});
 		},
 		editLabel: function(id) {
+			xhrJson("backend.php", {op: "pref-labels", method: "edit", id: id}, (reply) => {
+
+				console.log(reply);
+
+				const fg_color = reply['fg_color'];
+				const bg_color = reply['bg_color'] ? reply['bg_color'] : '#fff7d5';
+
 				const dialog = new fox.SingleUseDialog({
 					id: "labelEditDlg",
 					title: __("Label Editor"),
@@ -113,18 +120,70 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/f
 							});
 						}
 					},
-				content: __("Loading, please wait...")
+					content: `
-			});
+						<form onsubmit='return false'>
 
-			const tmph = dojo.connect(dialog, 'onShow', function () {
+						<header>${__("Caption")}</header>
-				dojo.disconnect(tmph);
+						<section>
+							<input style='font-size : 16px; color : ${fg_color}; background : ${bg_color}; transition : background 0.1s linear'
+								id='labelEdit_caption'
+								name='caption'
+								dojoType='dijit.form.ValidationTextBox'
+								required='true'
+								value="${App.escapeHtml(reply.caption)}">
+						</section>
 
-				xhrPost("backend.php", {op: "pref-labels", method: "edit", id: id}, (transport) => {
+						${App.FormFields.hidden('id', id)}
-					dialog.attr('content', transport.responseText);
+						${App.FormFields.hidden('op', 'pref-labels')}
-				})
+						${App.FormFields.hidden('method', 'save')}
+
+						${App.FormFields.hidden('fg_color', fg_color, 'labelEdit_fgColor')}
+						${App.FormFields.hidden('bg_color', bg_color, 'labelEdit_bgColor')}
+
+						<header>${__("Colors")}</header>
+						<section>
+							<table width='100%'>
+								<tr>
+									<th>${__("Foreground:")}</th>
+									<th>${__("Background:")}</th>
+								</tr>
+								<tr>
+									<td class='text-center'>
+										<div dojoType='dijit.ColorPalette'>
+											<script type='dojo/method' event='onChange' args='fg_color'>
+												dijit.byId('labelEdit_fgColor').attr('value', fg_color);
+												dijit.byId('labelEdit_caption').domNode.setStyle({color: fg_color});
+											</script>
+										</div>
+									</td>
+									<td class='text-center'>
+										<div dojoType='dijit.ColorPalette'>
+											<script type='dojo/method' event='onChange' args='bg_color'>
+												dijit.byId('labelEdit_bgColor').attr('value', bg_color);
+												dijit.byId('labelEdit_caption').domNode.setStyle({backgroundColor: bg_color});
+											</script>
+										</div>
+									</td>
+								</tr>
+							</table>
+						</section>
+
+						<footer>
+							<button dojoType='dijit.form.Button' type='submit' class='alt-primary' onclick='App.dialogOf(this).execute()'>
+								${__('Save')}
+							</button>
+							<button dojoType='dijit.form.Button' onclick='App.dialogOf(this).hide()'>
+								${__('Cancel')}
+							</button>
+						</footer>
+
+						</form>
+					`
 				});
 
 				dialog.show();
+
+			});
 		},
 		resetColors: function() {
 			const labels = this.getSelectedLabels();