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) =>
@sendInner {"cmd": "response", "to": message.id, "result": res} # Response to confirm
actionProgress: (message) ->
message.params = @toHtmlSafe(message.params) # Escape html
percent = Math.min(100, message.params[2])/100
displayProgress: (type, body, percent) ->
percent = Math.min(100, percent)/100
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">
@ -365,22 +364,22 @@ class Wrapper
<circle r="12" cx="15" cy="15" fill="transparent" class="circle-fg" style="stroke-dashoffset: #{offset}"></circle>
</svg></div>
"""
body = "<span class='message'>"+message.params[1]+"</span>" + circle
elem = $(".notification-#{message.params[0]}")
body = "<span class='message'>"+body+"</span>" + circle
elem = $(".notification-#{type}")
if elem.length
width = $(".body .message", elem).outerWidth()
$(".body .message", elem).html(message.params[1])
$(".body .message", elem).html(body)
if $(".body .message", elem).css("width") == ""
$(".body .message", elem).css("width", width)
$(".body .circle-fg", elem).css("stroke-dashoffset", offset)
else
elem = @notifications.add(message.params[0], "progress", $(body))
elem = @notifications.add(type, "progress", $(body))
if percent > 0
$(".body .circle-bg", elem).css {"animation-play-state": "paused", "stroke-dasharray": "180px"}
if $(".notification-icon", elem).data("done")
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")
setTimeout (->
$(".notification-icon", elem).css {transform: "scale(1)", opacity: 1}
@ -390,7 +389,7 @@ class Wrapper
@notifications.close elem
), 3000
$(".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")
setTimeout (=>
$(".notification-icon", elem).css {transform: "scale(1)", opacity: 1}
@ -400,6 +399,10 @@ class Wrapper
$(".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) ->
@log "actionSetViewport", message
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) {
var body, button, input;
body = $("<span class='message'></span>").html(message);
if (placeholder != null) {
placeholder;
} else {
if (placeholder == null) {
placeholder = "";
};
}
input = $("<input/>", {
type: type,
"class": "input button-" + type,
@ -1464,23 +1462,22 @@ $.extend( $.easing,
})(this));
};
Wrapper.prototype.actionProgress = function(message) {
var body, circle, elem, offset, percent, width;
message.params = this.toHtmlSafe(message.params);
percent = Math.min(100, message.params[2]) / 100;
Wrapper.prototype.displayProgress = function(type, body, percent) {
var circle, elem, offset, width;
percent = Math.min(100, percent) / 100;
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>";
body = "<span class='message'>" + message.params[1] + "</span>" + circle;
elem = $(".notification-" + message.params[0]);
body = "<span class='message'>" + body + "</span>" + circle;
elem = $(".notification-" + type);
if (elem.length) {
width = $(".body .message", elem).outerWidth();
$(".body .message", elem).html(message.params[1]);
$(".body .message", elem).html(body);
if ($(".body .message", elem).css("width") === "") {
$(".body .message", elem).css("width", width);
}
$(".body .circle-fg", elem).css("stroke-dashoffset", offset);
} else {
elem = this.notifications.add(message.params[0], "progress", $(body));
elem = this.notifications.add(type, "progress", $(body));
}
if (percent > 0) {
$(".body .circle-bg", elem).css({
@ -1490,7 +1487,7 @@ $.extend( $.easing,
}
if ($(".notification-icon", elem).data("done")) {
return false;
} else if (message.params[2] >= 100) {
} else if (percent >= 100) {
$(".circle-fg", elem).css("transition", "all 0.3s ease-in-out");
setTimeout((function() {
$(".notification-icon", elem).css({
@ -1507,7 +1504,7 @@ $.extend( $.easing,
};
})(this)), 3000);
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");
setTimeout(((function(_this) {
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) {
this.log("actionSetViewport", message);
if ($("#viewport").length > 0) {
@ -2025,7 +2027,6 @@ $.extend( $.easing,
}).call(this);
/* ---- src/Ui/media/ZeroSiteTheme.coffee ---- */
@ -2075,4 +2076,4 @@ $.extend( $.easing,
}
});
}).call(this);
}).call(this);