label editor: use client dialog
This commit is contained in:
Andrew Dolgov
parent
0b71729bd3
commit
e7924c6dac
|
|
@ -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()) {
|
||||
|
||||
print_hidden("id", "$label_id");
|
||||
print_hidden("op", "pref-labels");
|
||||
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>";
|
||||
if ($line = $sth->fetch(PDO::FETCH_ASSOC)) {
|
||||
print json_encode($line);
|
||||
} else {
|
||||
print json_encode(["error" => "LABEL_NOT_FOUND"]);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@ const App = {
|
|||
is_prefs: false,
|
||||
LABEL_BASE_INDEX: -1024,
|
||||
FormFields: {
|
||||
hidden: function(name, value) {
|
||||
return `<input dojoType="dijit.form.TextBox" style="display : none" name="${name}" value="${App.escapeHtml(value)}"></input>`
|
||||
hidden: function(name, value, id = "") {
|
||||
return `<input id="${id}" dojoType="dijit.form.TextBox" style="display : none" name="${name}" value="${App.escapeHtml(value)}"></input>`
|
||||
}
|
||||
},
|
||||
Scrollable: {
|
||||
|
|
|
|||
|
|
@ -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,70 +61,129 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/f
|
|||
});
|
||||
},
|
||||
editLabel: function(id) {
|
||||
const dialog = new fox.SingleUseDialog({
|
||||
id: "labelEditDlg",
|
||||
title: __("Label Editor"),
|
||||
style: "width: 650px",
|
||||
setLabelColor: function (id, fg, bg) {
|
||||
xhrJson("backend.php", {op: "pref-labels", method: "edit", id: id}, (reply) => {
|
||||
|
||||
let kind = '';
|
||||
let color = '';
|
||||
console.log(reply);
|
||||
|
||||
if (fg && bg) {
|
||||
kind = 'both';
|
||||
} else if (fg) {
|
||||
kind = 'fg';
|
||||
color = fg;
|
||||
} else if (bg) {
|
||||
kind = 'bg';
|
||||
color = bg;
|
||||
}
|
||||
const fg_color = reply['fg_color'];
|
||||
const bg_color = reply['bg_color'] ? reply['bg_color'] : '#fff7d5';
|
||||
|
||||
const e = $("icon-label-" + id);
|
||||
const dialog = new fox.SingleUseDialog({
|
||||
id: "labelEditDlg",
|
||||
title: __("Label Editor"),
|
||||
style: "width: 650px",
|
||||
setLabelColor: function (id, fg, bg) {
|
||||
|
||||
if (e) {
|
||||
if (bg) e.style.color = bg;
|
||||
}
|
||||
let kind = '';
|
||||
let color = '';
|
||||
|
||||
const query = {
|
||||
op: "pref-labels", method: "colorset", kind: kind,
|
||||
ids: id, fg: fg, bg: bg, color: color
|
||||
};
|
||||
if (fg && bg) {
|
||||
kind = 'both';
|
||||
} else if (fg) {
|
||||
kind = 'fg';
|
||||
color = fg;
|
||||
} else if (bg) {
|
||||
kind = 'bg';
|
||||
color = bg;
|
||||
}
|
||||
|
||||
xhrPost("backend.php", query, () => {
|
||||
const tree = dijit.byId("filterTree");
|
||||
if (tree) tree.reload(); // maybe there's labels in there
|
||||
});
|
||||
const e = $("icon-label-" + id);
|
||||
|
||||
},
|
||||
execute: function () {
|
||||
if (this.validate()) {
|
||||
const caption = this.attr('value').caption;
|
||||
const fg_color = this.attr('value').fg_color;
|
||||
const bg_color = this.attr('value').bg_color;
|
||||
if (e) {
|
||||
if (bg) e.style.color = bg;
|
||||
}
|
||||
|
||||
dijit.byId('labelTree').setNameById(id, caption);
|
||||
this.setLabelColor(id, fg_color, bg_color);
|
||||
this.hide();
|
||||
const query = {
|
||||
op: "pref-labels", method: "colorset", kind: kind,
|
||||
ids: id, fg: fg, bg: bg, color: color
|
||||
};
|
||||
|
||||
xhrPost("backend.php", this.attr('value'), () => {
|
||||
xhrPost("backend.php", query, () => {
|
||||
const tree = dijit.byId("filterTree");
|
||||
if (tree) tree.reload(); // maybe there's labels in there
|
||||
});
|
||||
}
|
||||
},
|
||||
content: __("Loading, please wait...")
|
||||
|
||||
},
|
||||
execute: function () {
|
||||
if (this.validate()) {
|
||||
const caption = this.attr('value').caption;
|
||||
const fg_color = this.attr('value').fg_color;
|
||||
const bg_color = this.attr('value').bg_color;
|
||||
|
||||
dijit.byId('labelTree').setNameById(id, caption);
|
||||
this.setLabelColor(id, fg_color, bg_color);
|
||||
this.hide();
|
||||
|
||||
xhrPost("backend.php", this.attr('value'), () => {
|
||||
const tree = dijit.byId("filterTree");
|
||||
if (tree) tree.reload(); // maybe there's labels in there
|
||||
});
|
||||
}
|
||||
},
|
||||
content: `
|
||||
<form onsubmit='return false'>
|
||||
|
||||
<header>${__("Caption")}</header>
|
||||
<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>
|
||||
|
||||
${App.FormFields.hidden('id', id)}
|
||||
${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();
|
||||
|
||||
});
|
||||
|
||||
const tmph = dojo.connect(dialog, 'onShow', function () {
|
||||
dojo.disconnect(tmph);
|
||||
|
||||
xhrPost("backend.php", {op: "pref-labels", method: "edit", id: id}, (transport) => {
|
||||
dialog.attr('content', transport.responseText);
|
||||
})
|
||||
});
|
||||
|
||||
dialog.show();
|
||||
},
|
||||
resetColors: function() {
|
||||
const labels = this.getSelectedLabels();
|
||||
|
|
|
|||
Loading…
Reference in New Issue