Multi button support for wrapperConfirm

This commit is contained in:
shortcutme 2017-05-11 17:54:48 +02:00
parent 9ec050341b
commit f183e756f3
No known key found for this signature in database
GPG key ID: 5B63BAE6CB9613AE
3 changed files with 48 additions and 30 deletions

View file

@ -203,11 +203,13 @@ class Wrapper
body = $("<span class='message'>"+message.params[1]+"</span>")
@notifications.add("notification-#{message.id}", message.params[0], body, message.params[2])
displayConfirm: (message, caption, cb) ->
displayConfirm: (message, captions, cb) ->
body = $("<span class='message'>"+message+"</span>")
button = $("<a href='##{caption}' class='button button-#{caption}'>#{caption}</a>") # Add confirm button
button.on "click", =>
cb(true)
if captions not instanceof Array then captions = [captions] # Convert to list if necessary
for caption, i in captions
button = $("<a href='##{caption}' class='button button-#{caption} button-#{i+1}' data-value='#{i+1}'>#{caption}</a>") # Add confirm button
button.on "click", (e) =>
cb(parseInt(e.currentTarget.dataset.value))
return false
body.append(button)
@notifications.add("notification-#{caption}", "ask", body)
@ -219,8 +221,8 @@ class Wrapper
actionConfirm: (message, cb=false) ->
message.params = @toHtmlSafe(message.params) # Escape html
if message.params[1] then caption = message.params[1] else caption = "ok"
@displayConfirm message.params[0], caption, =>
@sendInner {"cmd": "response", "to": message.id, "result": "boom"} # Response to confirm
@displayConfirm message.params[0], caption, (res) =>
@sendInner {"cmd": "response", "to": message.id, "result": res} # Response to confirm
return false
@ -472,6 +474,9 @@ class Wrapper
toHtmlSafe: (values) ->
if values not instanceof Array then values = [values] # Convert to array if its not
for value, i in values
if value instanceof Array
value = @toHtmlSafe(value)
else
value = String(value).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;') # Escape
value = value.replace(/&lt;([\/]{0,1}(br|b|u|i))&gt;/g, "<$1>") # Unescape b, i, u, br tags
values[i] = value

View file

@ -25,6 +25,8 @@ a { color: black }
color: rgba(0,0,0,0); background: #999 url(img/loading.gif) no-repeat center center;
-webkit-transition: all 0.5s ease-out ; -moz-transition: all 0.5s ease-out ; -o-transition: all 0.5s ease-out ; -ms-transition: all 0.5s ease-out ; transition: all 0.5s ease-out ; pointer-events: none; border-bottom: 2px solid #666
}
.button.button-2 { background-color: transparent; border: 1px solid #EEE; color: #555 }
.button.button-2:hover { border: 1px solid #CCC; color: #000 }
/* Fixbutton */

View file

@ -888,7 +888,7 @@ jQuery.extend( jQuery.easing,
} else if (cmd === "progress") {
return this.actionProgress(message);
} else if (cmd === "prompt") {
return this.displayPrompt(message.params[0], message.params[1], message.params[2], (function(_this) {
return this.displayPrompt(message.params[0], message.params[1], message.params[2], message.params[3], (function(_this) {
return function(res) {
return _this.ws.response(message.id, res);
};
@ -1086,17 +1086,23 @@ jQuery.extend( jQuery.easing,
return this.notifications.add("notification-" + message.id, message.params[0], body, message.params[2]);
};
Wrapper.prototype.displayConfirm = function(message, caption, cb) {
var body, button;
Wrapper.prototype.displayConfirm = function(message, captions, cb) {
var body, button, caption, i, j, len;
body = $("<span class='message'>" + message + "</span>");
button = $("<a href='#" + caption + "' class='button button-" + caption + "'>" + caption + "</a>");
if (!(captions instanceof Array)) {
captions = [captions];
}
for (i = j = 0, len = captions.length; j < len; i = ++j) {
caption = captions[i];
button = $("<a href='#" + caption + "' class='button button-" + caption + " button-" + (i + 1) + "' data-value='" + (i + 1) + "'>" + caption + "</a>");
button.on("click", (function(_this) {
return function() {
cb(true);
return function(e) {
cb(parseInt(e.currentTarget.dataset.value));
return false;
};
})(this));
body.append(button);
}
this.notifications.add("notification-" + caption, "ask", body);
button.focus();
return $(".notification").scrollLeft(0);
@ -1114,21 +1120,21 @@ jQuery.extend( jQuery.easing,
caption = "ok";
}
return this.displayConfirm(message.params[0], caption, (function(_this) {
return function() {
return function(res) {
_this.sendInner({
"cmd": "response",
"to": message.id,
"result": "boom"
"result": res
});
return false;
};
})(this));
};
Wrapper.prototype.displayPrompt = function(message, type, caption, cb) {
Wrapper.prototype.displayPrompt = function(message, type, caption, placeholder, cb) {
var body, button, input;
body = $("<span class='message'>" + message + "</span>");
input = $("<input type='" + type + "' class='input button-" + type + "'/>");
input = $("<input type='" + type + "' class='input button-" + type + "' placeholder='" + placeholder + "'/>");
input.on("keyup", (function(_this) {
return function(e) {
if (e.keyCode === 13) {
@ -1151,15 +1157,16 @@ jQuery.extend( jQuery.easing,
};
Wrapper.prototype.actionPrompt = function(message) {
var caption, type;
var caption, placeholder, type;
message.params = this.toHtmlSafe(message.params);
if (message.params[1]) {
type = message.params[1];
} else {
type = "text";
}
caption = "OK";
return this.displayPrompt(message.params[0], type, caption, (function(_this) {
caption = message.params[2] ? message.params[2] : "OK";
placeholder = message.params[3];
return this.displayPrompt(message.params[0], type, caption, placeholder, (function(_this) {
return function(res) {
return _this.sendInner({
"cmd": "response",
@ -1464,8 +1471,12 @@ jQuery.extend( jQuery.easing,
}
for (i = j = 0, len = values.length; j < len; i = ++j) {
value = values[i];
if (value instanceof Array) {
value = this.toHtmlSafe(value);
} else {
value = String(value).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
value = value.replace(/&lt;([\/]{0,1}(br|b|u|i))&gt;/g, "<$1>");
}
values[i] = value;
}
return values;