mirror of
https://github.com/Skylar-Tech/node-red-contrib-matrix-chat.git
synced 2025-07-02 00:21:12 -06:00
330 lines
15 KiB
HTML
330 lines
15 KiB
HTML
<script type="text/html" data-template-name="matrix-user-settings">
|
|
<div class="form-row">
|
|
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
|
|
<input type="text" id="node-input-name" placeholder="Name">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-server"><i class="fa fa-user"></i> Matrix Server Config</label>
|
|
<input type="text" id="node-input-server">
|
|
</div>
|
|
<div class="form-row" style="margin-bottom:0;">
|
|
<label><i class="fa fa-list"></i> <span data-i18n="change.label.rules"></span></label>
|
|
</div>
|
|
<div class="form-row node-input-rule-container-row">
|
|
<ol id="node-input-rule-container"></ol>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
$(function(){
|
|
$("#node-input-roomId").on("keyup", function() {
|
|
if($(this).val() && !$(this).val().startsWith("!")) {
|
|
$("#node-input-roomId-error").html(`Room IDs start with exclamation point "!"<br />Example: !OGEhHVWSdvArJzumhm:matrix.org`).show();
|
|
} else {
|
|
$("#node-input-roomId-error").hide();
|
|
}
|
|
}).trigger('keyup');
|
|
});
|
|
</script>
|
|
</script>
|
|
|
|
<script type="text/html" data-help-name="matrix-user-settings">
|
|
<h3>Details</h3>
|
|
<p>
|
|
Set and get the current user's display name or avatar.
|
|
</p>
|
|
|
|
<h3>Inputs</h3>
|
|
<dl class="message-properties">
|
|
<dt class="optional">dynamic
|
|
<span class="property-type">string|object</span>
|
|
</dt>
|
|
<dd> The properties used to set the avatar_url or display name are configured on the node.</dd>
|
|
</dl>
|
|
|
|
<h3>Outputs</h3>
|
|
<ol class="node-ports">
|
|
<li>Success
|
|
<dl class="message-properties">
|
|
<dt>msg <span class="property-type">object</span></dt>
|
|
<dd>Original message object with modifications based on config.</dd>
|
|
</dl>
|
|
<dl class="message-properties">
|
|
<dt>msg.setter_errors <span class="property-type">undefined|object</span></dt>
|
|
<dd>Returned if saving a setting failed.</dd>
|
|
</dl>
|
|
<dl class="message-properties">
|
|
<dt>msg.getter_errors <span class="property-type">undefined|object</span></dt>
|
|
<dd>Returned if there is an error thrown getting a user setting</dd>
|
|
</dl>
|
|
<dt class="optional">dynamic
|
|
<span class="property-type">string|object</span>
|
|
</dt>
|
|
<dd> You configure what user settings to output in the node configuration.</dd>
|
|
</li>
|
|
</ol>
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
(function(){
|
|
var userSettingOptions = [
|
|
{ value: "display_name", label: "Display name" },
|
|
{ value: "avatar_url", label: "Avatar URL" },
|
|
];
|
|
var defaultRules = [{
|
|
t: "set",
|
|
p: userSettingOptions[0].value,
|
|
to: "payload",
|
|
tot: "msg"
|
|
}];
|
|
|
|
function isInvalidProperty(v,vt) {
|
|
if (/msg|flow|global/.test(vt)) {
|
|
if (!RED.utils.validatePropertyExpression(v)) {
|
|
return "Invalid property: " + v;
|
|
}
|
|
} else if (vt === "jsonata") {
|
|
try{ jsonata(v); } catch(e) {
|
|
return "Invalid expression: " + e.message;
|
|
}
|
|
} else if (vt === "json") {
|
|
try{ JSON.parse(v); } catch(e) {
|
|
return "Invalid JSON data: " + e.message;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
RED.nodes.registerType('matrix-user-settings',{
|
|
category: 'matrix',
|
|
color: '#00b7ca',
|
|
icon: "matrix.png",
|
|
outputLabels: ["success", "error"],
|
|
inputs:1,
|
|
outputs:2,
|
|
defaults: {
|
|
name: { value: null },
|
|
server: { type: "matrix-server-config" },
|
|
roomId: { value: null },
|
|
reason: { value: null },
|
|
rules: {
|
|
value: defaultRules,
|
|
validate: function(rules, opt) {
|
|
let msg;
|
|
const errors = []
|
|
if (!rules || rules.length === 0) { return true }
|
|
for (let i=0;i<rules.length;i++) {
|
|
const opt = { label: "Rule"+' '+(i+1) }
|
|
const r = rules[i];
|
|
if (r.t === 'set' || r.t === 'get') {
|
|
if ((msg = isInvalidProperty(r.p,r.pt)) !== false) {
|
|
return msg;
|
|
}
|
|
if ((msg = isInvalidProperty(r.to,r.tot)) !== false) {
|
|
return msg;
|
|
}
|
|
}
|
|
}
|
|
return errors.length ? errors : true;
|
|
}
|
|
},
|
|
},
|
|
oneditprepare: function() {
|
|
var set = "Set";
|
|
var to = "to the value";
|
|
var toValueLabel = "to the property";
|
|
var search = this._("change.action.search");
|
|
var replace = this._("change.action.replace");
|
|
var regex = this._("change.label.regex");
|
|
|
|
function createPropertyValue(row2_1, row2_2, type, defaultType) {
|
|
var propValInput = $('<input/>',{class:"node-input-rule-property-value",type:"text"})
|
|
.appendTo(row2_1)
|
|
.typedInput({
|
|
default: defaultType || (type === 'set' ? 'str' : 'msg'),
|
|
types: (type === 'set' ? ['msg','flow','global','str','json','jsonata'] : ['msg', 'flow', 'global'])
|
|
});
|
|
|
|
var lsLabel = $('<label style="padding-left: 130px;"></label>').appendTo(row2_2);
|
|
var localStorageEl = $('<input type="checkbox" class="node-input-rule-property-localStorage" style="width: auto; margin: 0 6px 0 0">').appendTo(lsLabel);
|
|
$('<span>').text("Fetch from local storage").appendTo(lsLabel);
|
|
|
|
propValInput.on("change", function(evt,type,val) {
|
|
row2_2.toggle(type === "msg" || type === "flow" || type === "global" || type === "env");
|
|
})
|
|
return [propValInput, localStorageEl];
|
|
}
|
|
|
|
$('#node-input-rule-container').css('min-height','150px').css('min-width','450px').editableList({
|
|
addItem: function(container,i,opt) {
|
|
var rule = opt;
|
|
if (!rule.hasOwnProperty('t')) {
|
|
rule = {t:"set",p:userSettingOptions[0].value,to:"payload",tot:"msg"};
|
|
}
|
|
if (rule.t === "set" && !rule.tot) {
|
|
if (rule.to.indexOf("msg.") === 0 && !rule.tot) {
|
|
rule.to = rule.to.substring(4);
|
|
rule.tot = "msg";
|
|
} else {
|
|
rule.tot = "str";
|
|
}
|
|
}
|
|
container.css({
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap'
|
|
});
|
|
let fragment = document.createDocumentFragment();
|
|
var row1 = $('<div/>',{style:"display:flex; align-items: center"}).appendTo(fragment);
|
|
var row2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(fragment);
|
|
var row3 = $('<div/>',{style:"margin-top:8px;"}).appendTo(fragment);
|
|
var row4 = $('<div/>',{style:"display:flex;margin-top:8px;align-items: baseline"}).appendTo(fragment);
|
|
|
|
var selectField = $('<select/>',{class:"node-input-rule-type",style:"width:110px; margin-right:10px;"}).appendTo(row1);
|
|
var selectOptions = [
|
|
{v:"set",l:"Set"},
|
|
{v:"get",l:"Get"}
|
|
];
|
|
for (var x=0; x<selectOptions.length; x++) {
|
|
selectField.append($("<option></option>").val(selectOptions[x].v).text(selectOptions[x].l));
|
|
}
|
|
|
|
var propertyName = $('<input/>',{class:"node-input-rule-property-name",type:"text"})
|
|
.appendTo(row1)
|
|
.typedInput({type:"property", types:[{
|
|
value: userSettingOptions[0]['value'],
|
|
options: userSettingOptions
|
|
}]})
|
|
.on('focus', function(evt){
|
|
// following is a fix so autocomplete will show list on focus
|
|
if(!evt.isTrigger) {
|
|
evt.stopPropagation();
|
|
$(this).trigger("keyup.red-ui-autoComplete");
|
|
}
|
|
}).on("keyup", function(evt) {
|
|
// following allows autocomplete to display even when backspace/delete is used
|
|
if (evt.keyCode === 8 || evt.keyCode === 46) {
|
|
evt.stopPropagation();
|
|
$(this).trigger("keyup.red-ui-autoComplete");
|
|
}
|
|
});
|
|
|
|
var row2_1 = $('<div/>', {style:"display:flex;align-items: baseline"}).appendTo(row2);
|
|
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
|
.text(toValueLabel)
|
|
.appendTo(row2_1);
|
|
|
|
var row2_2 = $('<div/>', {style:"margin-top: 4px;"}).appendTo(row2);
|
|
|
|
var row3_1 = $('<div/>', {style:"display:flex;align-items: baseline"}).appendTo(row3);
|
|
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
|
.text(search)
|
|
.appendTo(row3_1);
|
|
|
|
var row3_2 = $('<div/>',{style:"display:flex;margin-top:8px;align-items: baseline"}).appendTo(row3);
|
|
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
|
.text(replace)
|
|
.appendTo(row3_2);
|
|
|
|
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
|
.text(to)
|
|
.appendTo(row4);
|
|
|
|
let propertyValue = null;
|
|
let localStorageEl = null;
|
|
let fromValue = null;
|
|
let toValue = null;
|
|
|
|
selectField.on("change", function() {
|
|
var type = $(this).val();
|
|
if (propertyValue) {
|
|
propertyValue.typedInput('hide');
|
|
}
|
|
if (fromValue) {
|
|
fromValue.typedInput('hide');
|
|
}
|
|
if (toValue) {
|
|
toValue.typedInput('hide');
|
|
}
|
|
|
|
if (!propertyValue) {
|
|
var parts = createPropertyValue(row2_1, row2_2, type);
|
|
propertyValue = parts[0];
|
|
localStorageEl = parts[1];
|
|
} else {
|
|
propertyValue.typedInput('types', (type === 'set' ? ['msg','flow','global','str','json','jsonata'] : ['msg', 'flow', 'global']));
|
|
}
|
|
|
|
propertyValue.typedInput('show');
|
|
row2.show();
|
|
if(type === 'get') {
|
|
localStorageEl.parent().show();
|
|
} else {
|
|
localStorageEl.parent().hide();
|
|
}
|
|
row3.hide();
|
|
row4.hide();
|
|
});
|
|
|
|
selectField.val(rule.t);
|
|
propertyName.val(rule.p);
|
|
if (rule.t === "set" || rule.t === "get") {
|
|
var parts = createPropertyValue(row2_1, row2_2, rule.t, rule.tot);
|
|
propertyValue = parts[0];
|
|
localStorageEl = parts[1];
|
|
propertyValue.typedInput('value',rule.to);
|
|
localStorageEl.prop("checked", !!rule.ls);
|
|
if(rule.t === 'get') {
|
|
localStorageEl.parent().show();
|
|
} else {
|
|
localStorageEl.parent().hide();
|
|
}
|
|
}
|
|
selectField.change();
|
|
container[0].appendChild(fragment);
|
|
},
|
|
removable: true,
|
|
sortable: true
|
|
});
|
|
|
|
for (var i=0; i<this.rules.length; i++) {
|
|
var rule = this.rules[i];
|
|
$("#node-input-rule-container").editableList('addItem',rule);
|
|
}
|
|
},
|
|
oneditsave: function() {
|
|
var rules = $("#node-input-rule-container").editableList('items');
|
|
var node = this;
|
|
node.rules= [];
|
|
rules.each(function(i) {
|
|
var rule = $(this);
|
|
var type = rule.find(".node-input-rule-type").val();
|
|
var r = {
|
|
t:type,
|
|
p:rule.find(".node-input-rule-property-name").val(),
|
|
to:rule.find(".node-input-rule-property-value").typedInput('value'),
|
|
tot:rule.find(".node-input-rule-property-value").typedInput('type')
|
|
};
|
|
|
|
if (r.t === "get" && rule.find(".node-input-rule-property-localStorage").prop("checked")) {
|
|
r.ls = true;
|
|
}
|
|
node.rules.push(r);
|
|
});
|
|
},
|
|
oneditresize: function(size) {
|
|
var rows = $("#dialog-form>div:not(.node-input-rule-container-row)");
|
|
var height = size.height;
|
|
for (var i=0; i<rows.length; i++) {
|
|
height -= $(rows[i]).outerHeight(true);
|
|
}
|
|
var editorRow = $("#dialog-form>div.node-input-rule-container-row");
|
|
height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
|
|
height += 16;
|
|
$("#node-input-rule-container").editableList('height',height);
|
|
},
|
|
label: function() {
|
|
return this.name || "User Settings";
|
|
},
|
|
paletteLabel: 'User Settings'
|
|
});
|
|
})();
|
|
</script> |