wrapperProgress API command
This commit is contained in:
shortcutme
parent
60d58a2d45
commit
b68424f008
5 changed files with 158 additions and 5 deletions
|
|
@ -21,12 +21,16 @@ class Notifications
|
|||
# Create element
|
||||
elem = $(".notification.template", @elem).clone().removeClass("template")
|
||||
elem.addClass("notification-#{type}").addClass("notification-#{id}")
|
||||
if type == "progress"
|
||||
elem.addClass("notification-done")
|
||||
|
||||
# Update text
|
||||
if type == "error"
|
||||
$(".notification-icon", elem).html("!")
|
||||
else if type == "done"
|
||||
$(".notification-icon", elem).html("<div class='icon-success'></div>")
|
||||
else if type == "progress"
|
||||
$(".notification-icon", elem).html("<div class='icon-success'></div>")
|
||||
else if type == "ask"
|
||||
$(".notification-icon", elem).html("?")
|
||||
else
|
||||
|
|
@ -64,6 +68,8 @@ class Notifications
|
|||
$(".select", elem).on "click", =>
|
||||
@close elem
|
||||
|
||||
return elem
|
||||
|
||||
|
||||
close: (elem) ->
|
||||
elem.stop().animate {"width": 0, "opacity": 0}, 700, "easeInOutCubic"
|
||||
|
|
|
|||
|
|
@ -53,6 +53,8 @@ class Wrapper
|
|||
if "-" in message.params[0] # - in first param: message id defined
|
||||
[id, type] = message.params[0].split("-")
|
||||
@notifications.add(id, type, message.params[1], message.params[2])
|
||||
else if cmd == "progress" # Display notification
|
||||
@actionProgress(message)
|
||||
else if cmd == "prompt" # Prompt input
|
||||
@displayPrompt message.params[0], message.params[1], message.params[2], (res) =>
|
||||
@ws.response message.id, res
|
||||
|
|
@ -109,6 +111,8 @@ class Wrapper
|
|||
@actionConfirm(message)
|
||||
else if cmd == "wrapperPrompt" # Prompt input
|
||||
@actionPrompt(message)
|
||||
else if cmd == "wrapperProgress" # Progress bar
|
||||
@actionProgress(message)
|
||||
else if cmd == "wrapperSetViewport" # Set the viewport
|
||||
@actionSetViewport(message)
|
||||
else if cmd == "wrapperSetTitle"
|
||||
|
|
@ -197,8 +201,6 @@ 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) ->
|
||||
body = $("<span class='message'>"+message+"</span>")
|
||||
button = $("<a href='##{caption}' class='button button-#{caption}'>#{caption}</a>") # Add confirm button
|
||||
|
|
@ -249,6 +251,49 @@ class Wrapper
|
|||
@displayPrompt message.params[0], type, caption, (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
|
||||
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">
|
||||
<circle r="12" cx="15" cy="15" fill="transparent" class="circle-bg"></circle>
|
||||
<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]}")
|
||||
if elem.length
|
||||
width = $(".body .message", elem).outerWidth()
|
||||
$(".body .message", elem).html(message.params[1])
|
||||
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))
|
||||
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
|
||||
$(".circle-fg", elem).css("transition", "all 0.3s ease-in-out")
|
||||
setTimeout (->
|
||||
$(".notification-icon", elem).css {transform: "scale(1)", opacity: 1}
|
||||
$(".notification-icon .icon-success", elem).css {transform: "rotate(45deg) scale(1)"}
|
||||
), 300
|
||||
setTimeout (=>
|
||||
@notifications.close elem
|
||||
), 3000
|
||||
$(".notification-icon", elem).data("done", true)
|
||||
else if message.params[2] < 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}
|
||||
elem.removeClass("notification-done").addClass("notification-error")
|
||||
$(".notification-icon .icon-success", elem).removeClass("icon-success").html("!")
|
||||
), 300
|
||||
$(".notification-icon", elem).data("done", true)
|
||||
|
||||
|
||||
actionSetViewport: (message) ->
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ a { color: black }
|
|||
color: #4F4F4F; font-family: 'Lucida Grande', 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; /*border: 1px solid rgba(210, 206, 205, 0.2)*/
|
||||
}
|
||||
.notification-icon {
|
||||
display: block; width: 50px; height: 50px; position: absolute; float: left; z-index: 1;
|
||||
display: block; width: 50px; height: 50px; position: absolute; float: left; z-index: 2;
|
||||
text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white;
|
||||
}
|
||||
.notification .body {
|
||||
|
|
@ -82,6 +82,18 @@ a { color: black }
|
|||
.notification .input { padding: 6px; border: 1px solid #DDD; margin-left: 10px; border-bottom: 2px solid #DDD; border-radius: 1px; margin-right: -11px; transition: all 0.3s }
|
||||
.notification .input:focus { border-color: #95a5a6; outline: none }
|
||||
|
||||
/* Notification progress */
|
||||
.notification .circle { width: 50px; height: 50px; position: absolute; left: -50px; top: 0px; background-color: #e2e9ec; z-index: 1; background: linear-gradient(405deg, rgba(226, 233, 236, 0.8), #efefef); }
|
||||
.notification .circle-svg { margin-left: 10px; margin-top: 10px; transform: rotateZ(-90deg); }
|
||||
.notification .circle-bg { stroke: #FFF; stroke-width: 2px; animation: rolling 0.4s infinite linear; stroke-dasharray: 40px; transition: all 1s }
|
||||
.notification .circle-fg { stroke-dashoffset: 200; stroke: #2ecc71; stroke-width: 2px; stroke-dasharray: 75px; transition: all 5s cubic-bezier(0.19, 1, 0.22, 1); }
|
||||
.notification-progress .notification-icon { opacity: 0; transform: scale(0); transition: all 0.3s ease-in-out }
|
||||
.notification-progress .icon-success { transform: rotate(45deg) scale(0); transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
|
||||
@keyframes rolling {
|
||||
0% { stroke-dashoffset: 80px }
|
||||
100% { stroke-dashoffset: 0px }
|
||||
}
|
||||
|
||||
/* Icons (based on http://nicolasgallagher.com/pure-css-gui-icons/demo/) */
|
||||
|
||||
.icon-success { left:6px; width:5px; height:12px; border-width:0 5px 5px 0; border-style:solid; border-color:white; margin-left: 20px; margin-top: 15px; transform:rotate(45deg) }
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ a { color: black }
|
|||
color: #4F4F4F; font-family: 'Lucida Grande', 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; /*border: 1px solid rgba(210, 206, 205, 0.2)*/
|
||||
}
|
||||
.notification-icon {
|
||||
display: block; width: 50px; height: 50px; position: absolute; float: left; z-index: 1;
|
||||
display: block; width: 50px; height: 50px; position: absolute; float: left; z-index: 2;
|
||||
text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white;
|
||||
}
|
||||
.notification .body {
|
||||
|
|
@ -87,6 +87,27 @@ a { color: black }
|
|||
.notification .input { padding: 6px; border: 1px solid #DDD; margin-left: 10px; border-bottom: 2px solid #DDD; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; -ms-border-radius: 1px; border-radius: 1px ; margin-right: -11px; -webkit-transition: all 0.3s ; -moz-transition: all 0.3s ; -o-transition: all 0.3s ; -ms-transition: all 0.3s ; transition: all 0.3s }
|
||||
.notification .input:focus { border-color: #95a5a6; outline: none }
|
||||
|
||||
/* Notification progress */
|
||||
.notification .circle { width: 50px; height: 50px; position: absolute; left: -50px; top: 0px; background-color: #e2e9ec; z-index: 1; background: -webkit-linear-gradient(405deg, rgba(226, 233, 236, 0.8), #efefef);background: -moz-linear-gradient(405deg, rgba(226, 233, 236, 0.8), #efefef);background: -o-linear-gradient(405deg, rgba(226, 233, 236, 0.8), #efefef);background: -ms-linear-gradient(405deg, rgba(226, 233, 236, 0.8), #efefef);background: linear-gradient(405deg, rgba(226, 233, 236, 0.8), #efefef); }
|
||||
.notification .circle-svg { margin-left: 10px; margin-top: 10px; -webkit-transform: rotateZ(-90deg); -moz-transform: rotateZ(-90deg); -o-transform: rotateZ(-90deg); -ms-transform: rotateZ(-90deg); transform: rotateZ(-90deg) ; }
|
||||
.notification .circle-bg { stroke: #FFF; stroke-width: 2px; -webkit-animation: rolling 0.4s infinite linear; -moz-animation: rolling 0.4s infinite linear; -o-animation: rolling 0.4s infinite linear; -ms-animation: rolling 0.4s infinite linear; animation: rolling 0.4s infinite linear ; stroke-dasharray: 40px; -webkit-transition: all 1s ; -moz-transition: all 1s ; -o-transition: all 1s ; -ms-transition: all 1s ; transition: all 1s }
|
||||
.notification .circle-fg { stroke-dashoffset: 200; stroke: #2ecc71; stroke-width: 2px; stroke-dasharray: 75px; -webkit-transition: all 5s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 5s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 5s cubic-bezier(0.19, 1, 0.22, 1); -ms-transition: all 5s cubic-bezier(0.19, 1, 0.22, 1); transition: all 5s cubic-bezier(0.19, 1, 0.22, 1) ; }
|
||||
.notification-progress .notification-icon { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0) ; -webkit-transition: all 0.3s ease-in-out ; -moz-transition: all 0.3s ease-in-out ; -o-transition: all 0.3s ease-in-out ; -ms-transition: all 0.3s ease-in-out ; transition: all 0.3s ease-in-out }
|
||||
.notification-progress .icon-success { -webkit-transform: rotate(45deg) scale(0); -moz-transform: rotate(45deg) scale(0); -o-transform: rotate(45deg) scale(0); -ms-transform: rotate(45deg) scale(0); transform: rotate(45deg) scale(0) ; -webkit-transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); -ms-transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) ; }
|
||||
@keyframes rolling {
|
||||
0% { stroke-dashoffset: 80px }
|
||||
100% { stroke-dashoffset: 0px }
|
||||
}
|
||||
@-webkit-keyframes rolling {
|
||||
0% { stroke-dashoffset: 80px }
|
||||
100% { stroke-dashoffset: 0px }
|
||||
}
|
||||
@-moz-keyframes rolling {
|
||||
0% { stroke-dashoffset: 80px }
|
||||
100% { stroke-dashoffset: 0px }
|
||||
}
|
||||
|
||||
|
||||
/* Icons (based on http://nicolasgallagher.com/pure-css-gui-icons/demo/) */
|
||||
|
||||
.icon-success { left:6px; width:5px; height:12px; border-width:0 5px 5px 0; border-style:solid; border-color:white; margin-left: 20px; margin-top: 15px; transform:rotate(45deg) }
|
||||
|
|
|
|||
|
|
@ -688,10 +688,15 @@ jQuery.extend( jQuery.easing,
|
|||
}
|
||||
elem = $(".notification.template", this.elem).clone().removeClass("template");
|
||||
elem.addClass("notification-" + type).addClass("notification-" + id);
|
||||
if (type === "progress") {
|
||||
elem.addClass("notification-done");
|
||||
}
|
||||
if (type === "error") {
|
||||
$(".notification-icon", elem).html("!");
|
||||
} else if (type === "done") {
|
||||
$(".notification-icon", elem).html("<div class='icon-success'></div>");
|
||||
} else if (type === "progress") {
|
||||
$(".notification-icon", elem).html("<div class='icon-success'></div>");
|
||||
} else if (type === "ask") {
|
||||
$(".notification-icon", elem).html("?");
|
||||
} else {
|
||||
|
|
@ -735,11 +740,12 @@ jQuery.extend( jQuery.easing,
|
|||
return false;
|
||||
};
|
||||
})(this));
|
||||
return $(".select", elem).on("click", (function(_this) {
|
||||
$(".select", elem).on("click", (function(_this) {
|
||||
return function() {
|
||||
return _this.close(elem);
|
||||
};
|
||||
})(this));
|
||||
return elem;
|
||||
};
|
||||
|
||||
Notifications.prototype.close = function(elem) {
|
||||
|
|
@ -848,6 +854,8 @@ jQuery.extend( jQuery.easing,
|
|||
_ref = message.params[0].split("-"), id = _ref[0], type = _ref[1];
|
||||
}
|
||||
return this.notifications.add(id, type, message.params[1], message.params[2]);
|
||||
} 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 function(res) {
|
||||
|
|
@ -915,6 +923,8 @@ jQuery.extend( jQuery.easing,
|
|||
return this.actionConfirm(message);
|
||||
} else if (cmd === "wrapperPrompt") {
|
||||
return this.actionPrompt(message);
|
||||
} else if (cmd === "wrapperProgress") {
|
||||
return this.actionProgress(message);
|
||||
} else if (cmd === "wrapperSetViewport") {
|
||||
return this.actionSetViewport(message);
|
||||
} else if (cmd === "wrapperSetTitle") {
|
||||
|
|
@ -1127,6 +1137,65 @@ jQuery.extend( jQuery.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;
|
||||
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]);
|
||||
if (elem.length) {
|
||||
width = $(".body .message", elem).outerWidth();
|
||||
$(".body .message", elem).html(message.params[1]);
|
||||
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));
|
||||
}
|
||||
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) {
|
||||
$(".circle-fg", elem).css("transition", "all 0.3s ease-in-out");
|
||||
setTimeout((function() {
|
||||
$(".notification-icon", elem).css({
|
||||
transform: "scale(1)",
|
||||
opacity: 1
|
||||
});
|
||||
return $(".notification-icon .icon-success", elem).css({
|
||||
transform: "rotate(45deg) scale(1)"
|
||||
});
|
||||
}), 300);
|
||||
setTimeout(((function(_this) {
|
||||
return function() {
|
||||
return _this.notifications.close(elem);
|
||||
};
|
||||
})(this)), 3000);
|
||||
return $(".notification-icon", elem).data("done", true);
|
||||
} else if (message.params[2] < 0) {
|
||||
$(".body .circle-fg", elem).css("stroke", "#ec6f47").css("transition", "transition: all 0.3s ease-in-out");
|
||||
setTimeout(((function(_this) {
|
||||
return function() {
|
||||
$(".notification-icon", elem).css({
|
||||
transform: "scale(1)",
|
||||
opacity: 1
|
||||
});
|
||||
elem.removeClass("notification-done").addClass("notification-error");
|
||||
return $(".notification-icon .icon-success", elem).removeClass("icon-success").html("!");
|
||||
};
|
||||
})(this)), 300);
|
||||
return $(".notification-icon", elem).data("done", true);
|
||||
}
|
||||
};
|
||||
|
||||
Wrapper.prototype.actionSetViewport = function(message) {
|
||||
this.log("actionSetViewport", message);
|
||||
if ($("#viewport").length > 0) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue