oci/zeronet
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move progress display to separate function

Browse source
This commit is contained in:
shortcutme 2019-05-29 16:02:34 +02:00
parent 7b41922c2d
commit 589869c5ed
No known key found for this signature in database
GPG key ID: 5B63BAE6CB9613AE
2 changed files with 29 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/Ui/media/Wrapper.coffee
View file

@ -355,9 +355,8 @@ class Wrapper
@displayPrompt message.params[0], type, caption, placeholder, (res) => @displayPrompt message.params[0], type, caption, placeholder, (res) =>
@sendInner {"cmd": "response", "to": message.id, "result": res} # Response to confirm @sendInner {"cmd": "response", "to": message.id, "result": res} # Response to confirm
actionProgress: (message) -> displayProgress: (type, body, percent) ->
message.params = @toHtmlSafe(message.params) # Escape html percent = Math.min(100, percent)/100
percent = Math.min(100, message.params[2])/100
offset = 75-(percent*75) offset = 75-(percent*75)
circle = """ circle = """
<div class="circle"><svg class="circle-svg" width="30" height="30" viewport="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"> <div class="circle"><svg class="circle-svg" width="30" height="30" viewport="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg">
@ -365,22 +364,22 @@ class Wrapper
<circle r="12" cx="15" cy="15" fill="transparent" class="circle-fg" style="stroke-dashoffset: #{offset}"></circle> <circle r="12" cx="15" cy="15" fill="transparent" class="circle-fg" style="stroke-dashoffset: #{offset}"></circle>
</svg></div> </svg></div>
""" """
body = "<span class='message'>"+message.params[1]+"</span>" + circle body = "<span class='message'>"+body+"</span>" + circle
elem = $(".notification-#{message.params[0]}") elem = $(".notification-#{type}")
if elem.length if elem.length
width = $(".body .message", elem).outerWidth() width = $(".body .message", elem).outerWidth()
$(".body .message", elem).html(message.params[1]) $(".body .message", elem).html(body)
if $(".body .message", elem).css("width") == "" if $(".body .message", elem).css("width") == ""
$(".body .message", elem).css("width", width) $(".body .message", elem).css("width", width)
$(".body .circle-fg", elem).css("stroke-dashoffset", offset) $(".body .circle-fg", elem).css("stroke-dashoffset", offset)
else else
elem = @notifications.add(message.params[0], "progress", $(body)) elem = @notifications.add(type, "progress", $(body))
if percent > 0 if percent > 0
$(".body .circle-bg", elem).css {"animation-play-state": "paused", "stroke-dasharray": "180px"} $(".body .circle-bg", elem).css {"animation-play-state": "paused", "stroke-dasharray": "180px"}
if $(".notification-icon", elem).data("done") if $(".notification-icon", elem).data("done")
return false return false
else if message.params[2] >= 100 # Done else if percent >= 100 # Done
$(".circle-fg", elem).css("transition", "all 0.3s ease-in-out") $(".circle-fg", elem).css("transition", "all 0.3s ease-in-out")
setTimeout (-> setTimeout (->
$(".notification-icon", elem).css {transform: "scale(1)", opacity: 1} $(".notification-icon", elem).css {transform: "scale(1)", opacity: 1}
@ -390,7 +389,7 @@ class Wrapper
@notifications.close elem @notifications.close elem
), 3000 ), 3000
$(".notification-icon", elem).data("done", true) $(".notification-icon", elem).data("done", true)
else if message.params[2] < 0 # Error else if percent < 0 # Error
$(".body .circle-fg", elem).css("stroke", "#ec6f47").css("transition", "transition: all 0.3s ease-in-out") $(".body .circle-fg", elem).css("stroke", "#ec6f47").css("transition", "transition: all 0.3s ease-in-out")
setTimeout (=> setTimeout (=>
$(".notification-icon", elem).css {transform: "scale(1)", opacity: 1} $(".notification-icon", elem).css {transform: "scale(1)", opacity: 1}
@ -400,6 +399,10 @@ class Wrapper
$(".notification-icon", elem).data("done", true) $(".notification-icon", elem).data("done", true)
actionProgress: (message) ->
message.params = @toHtmlSafe(message.params) # Escape html
@displayProgress(message.params[0], message.params[1], message.params[2])
actionSetViewport: (message) -> actionSetViewport: (message) ->
@log "actionSetViewport", message @log "actionSetViewport", message
if $("#viewport").length > 0 if $("#viewport").length > 0

33
src/Ui/media/all.js
View file

@ -1403,11 +1403,9 @@ $.extend( $.easing,
Wrapper.prototype.displayPrompt = function(message, type, caption, placeholder, cb) { Wrapper.prototype.displayPrompt = function(message, type, caption, placeholder, cb) {
var body, button, input; var body, button, input;
body = $("<span class='message'></span>").html(message); body = $("<span class='message'></span>").html(message);
if (placeholder != null) { if (placeholder == null) {
placeholder;
} else {
placeholder = ""; placeholder = "";
}; }
input = $("<input/>", { input = $("<input/>", {
type: type, type: type,
"class": "input button-" + type, "class": "input button-" + type,
@ -1464,23 +1462,22 @@ $.extend( $.easing,
})(this)); })(this));
}; };
Wrapper.prototype.actionProgress = function(message) { Wrapper.prototype.displayProgress = function(type, body, percent) {
var body, circle, elem, offset, percent, width; var circle, elem, offset, width;
message.params = this.toHtmlSafe(message.params); percent = Math.min(100, percent) / 100;
percent = Math.min(100, message.params[2]) / 100;
offset = 75 - (percent * 75); offset = 75 - (percent * 75);
circle = "<div class=\"circle\"><svg class=\"circle-svg\" width=\"30\" height=\"30\" viewport=\"0 0 30 30\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle r=\"12\" cx=\"15\" cy=\"15\" fill=\"transparent\" class=\"circle-bg\"></circle>\n <circle r=\"12\" cx=\"15\" cy=\"15\" fill=\"transparent\" class=\"circle-fg\" style=\"stroke-dashoffset: " + offset + "\"></circle>\n</svg></div>"; circle = "<div class=\"circle\"><svg class=\"circle-svg\" width=\"30\" height=\"30\" viewport=\"0 0 30 30\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle r=\"12\" cx=\"15\" cy=\"15\" fill=\"transparent\" class=\"circle-bg\"></circle>\n <circle r=\"12\" cx=\"15\" cy=\"15\" fill=\"transparent\" class=\"circle-fg\" style=\"stroke-dashoffset: " + offset + "\"></circle>\n</svg></div>";
body = "<span class='message'>" + message.params[1] + "</span>" + circle; body = "<span class='message'>" + body + "</span>" + circle;
elem = $(".notification-" + message.params[0]); elem = $(".notification-" + type);
if (elem.length) { if (elem.length) {
width = $(".body .message", elem).outerWidth(); width = $(".body .message", elem).outerWidth();
$(".body .message", elem).html(message.params[1]); $(".body .message", elem).html(body);
if ($(".body .message", elem).css("width") === "") { if ($(".body .message", elem).css("width") === "") {
$(".body .message", elem).css("width", width); $(".body .message", elem).css("width", width);
} }
$(".body .circle-fg", elem).css("stroke-dashoffset", offset); $(".body .circle-fg", elem).css("stroke-dashoffset", offset);
} else { } else {
elem = this.notifications.add(message.params[0], "progress", $(body)); elem = this.notifications.add(type, "progress", $(body));
} }
if (percent > 0) { if (percent > 0) {
$(".body .circle-bg", elem).css({ $(".body .circle-bg", elem).css({
@ -1490,7 +1487,7 @@ $.extend( $.easing,
} }
if ($(".notification-icon", elem).data("done")) { if ($(".notification-icon", elem).data("done")) {
return false; return false;
} else if (message.params[2] >= 100) { } else if (percent >= 100) {
$(".circle-fg", elem).css("transition", "all 0.3s ease-in-out"); $(".circle-fg", elem).css("transition", "all 0.3s ease-in-out");
setTimeout((function() { setTimeout((function() {
$(".notification-icon", elem).css({ $(".notification-icon", elem).css({
@ -1507,7 +1504,7 @@ $.extend( $.easing,
}; };
})(this)), 3000); })(this)), 3000);
return $(".notification-icon", elem).data("done", true); return $(".notification-icon", elem).data("done", true);
} else if (message.params[2] < 0) { } else if (percent < 0) {
$(".body .circle-fg", elem).css("stroke", "#ec6f47").css("transition", "transition: all 0.3s ease-in-out"); $(".body .circle-fg", elem).css("stroke", "#ec6f47").css("transition", "transition: all 0.3s ease-in-out");
setTimeout(((function(_this) { setTimeout(((function(_this) {
return function() { return function() {
@ -1523,6 +1520,11 @@ $.extend( $.easing,
} }
}; };
Wrapper.prototype.actionProgress = function(message) {
message.params = this.toHtmlSafe(message.params);
return this.displayProgress(message.params[0], message.params[1], message.params[2]);
};
Wrapper.prototype.actionSetViewport = function(message) { Wrapper.prototype.actionSetViewport = function(message) {
this.log("actionSetViewport", message); this.log("actionSetViewport", message);
if ($("#viewport").length > 0) { if ($("#viewport").length > 0) {
@ -2025,7 +2027,6 @@ $.extend( $.easing,
}).call(this); }).call(this);
/* ---- src/Ui/media/ZeroSiteTheme.coffee ---- */ /* ---- src/Ui/media/ZeroSiteTheme.coffee ---- */
@ -2075,4 +2076,4 @@ $.extend( $.easing,
} }
}); });
}).call(this); }).call(this);