rev330, Early worker exit on file download bugfix, Reload only on py file changes, Modify wrapper render to allow content edit for plugins, File send action without sending header, Rename Sidebar to Fixbutton (it will be separate plugin), Fixbutton font and layout fix on OSX/Safari, Notifications fix on OSX/Safari
This commit is contained in:
HelloZeroNet
parent
d331eea384
commit
cd04abe521
12 changed files with 164 additions and 134 deletions
|
|
@ -1,33 +1,32 @@
|
|||
class Sidebar
|
||||
class Fixbutton
|
||||
constructor: ->
|
||||
@initFixbutton()
|
||||
|
||||
|
||||
initFixbutton: ->
|
||||
$(".fixbutton-bg").on "mouseover", ->
|
||||
$(@).stop().animate({"scale": 0.7}, 800, "easeOutElastic")
|
||||
@dragging = false
|
||||
$(".fixbutton-bg").on "mouseover", =>
|
||||
$(".fixbutton-bg").stop().animate({"scale": 0.7}, 800, "easeOutElastic")
|
||||
$(".fixbutton-burger").stop().animate({"opacity": 1.5, "left": 0}, 800, "easeOutElastic")
|
||||
$(".fixbutton-text").stop().animate({"opacity": 0, "left": 20}, 300, "easeOutCubic")
|
||||
|
||||
$(".fixbutton-bg").on "mouseout", ->
|
||||
$(@).stop().animate({"scale": 0.6}, 300, "easeOutCubic")
|
||||
$(".fixbutton-bg").on "mouseout", =>
|
||||
if $(".fixbutton").hasClass("dragging")
|
||||
return true
|
||||
$(".fixbutton-bg").stop().animate({"scale": 0.6}, 300, "easeOutCubic")
|
||||
$(".fixbutton-burger").stop().animate({"opacity": 0, "left": -20}, 300, "easeOutCubic")
|
||||
$(".fixbutton-text").stop().animate({"opacity": 1, "left": 0}, 300, "easeOutBack")
|
||||
|
||||
|
||||
|
||||
###$(".fixbutton-bg").on "click", ->
|
||||
return false
|
||||
###
|
||||
|
||||
$(".fixbutton-bg").on "mousedown", ->
|
||||
$(".fixbutton-bg").on "mousedown", =>
|
||||
# $(".fixbutton-burger").stop().animate({"scale": 0.7, "left": 0}, 300, "easeOutCubic")
|
||||
#$("#inner-iframe").toggleClass("back")
|
||||
#$(".wrapper-iframe").stop().animate({"scale": 0.9}, 600, "easeOutCubic")
|
||||
#$("body").addClass("back")
|
||||
|
||||
$(".fixbutton-bg").on "mouseup", ->
|
||||
$(".fixbutton-bg").on "mouseup", =>
|
||||
# $(".fixbutton-burger").stop().animate({"scale": 1, "left": 0}, 600, "easeOutElastic")
|
||||
|
||||
|
||||
|
||||
window.Sidebar = Sidebar
|
||||
|
||||
window.Fixbutton = Fixbutton
|
||||
|
|
@ -4,7 +4,7 @@ class Wrapper
|
|||
|
||||
@loading = new Loading()
|
||||
@notifications = new Notifications($(".notifications"))
|
||||
@sidebar = new Sidebar()
|
||||
@fixbutton = new Fixbutton()
|
||||
|
||||
window.addEventListener("message", @onMessageInner, false)
|
||||
@inner = document.getElementById("inner-iframe").contentWindow
|
||||
|
|
@ -146,10 +146,10 @@ class Wrapper
|
|||
message.params = @toHtmlSafe(message.params) # Escape html
|
||||
if message.params[1] then type = message.params[1] else type = "text"
|
||||
caption = "OK"
|
||||
|
||||
|
||||
@displayPrompt message.params[0], type, caption, (res) =>
|
||||
@sendInner {"cmd": "response", "to": message.id, "result": res} # Response to confirm
|
||||
|
||||
|
||||
|
||||
|
||||
actionSetViewport: (message) ->
|
||||
|
|
@ -171,7 +171,7 @@ class Wrapper
|
|||
|
||||
|
||||
actionGetLocalStorage: (message) ->
|
||||
$.when(@event_site_info).done =>
|
||||
$.when(@event_site_info).done =>
|
||||
data = localStorage.getItem "site.#{@site_info.address}"
|
||||
if data then data = JSON.parse(data)
|
||||
@sendInner {"cmd": "response", "to": message.id, "result": data}
|
||||
|
|
@ -197,7 +197,7 @@ class Wrapper
|
|||
if not @site_info then @reloadSiteInfo()
|
||||
), 2000
|
||||
|
||||
if @ws_error
|
||||
if @ws_error
|
||||
@notifications.add("connection", "done", "Connection with <b>UiServer Websocket</b> recovered.", 6000)
|
||||
@ws_error = null
|
||||
|
||||
|
|
@ -236,7 +236,7 @@ class Wrapper
|
|||
params = {"file_status": window.file_inner_path} # Query the current required file status
|
||||
else
|
||||
params = {}
|
||||
|
||||
|
||||
@ws.cmd "siteInfo", params, (site_info) =>
|
||||
@address = site_info.address
|
||||
@setSiteInfo site_info
|
||||
|
|
@ -272,7 +272,7 @@ class Wrapper
|
|||
if not $(".loadingscreen").length # Loading screen already removed (loaded +2sec)
|
||||
@notifications.add("modified", "info", "New version of this page has just released.<br>Reload to see the modified content.")
|
||||
# File failed downloading
|
||||
else if site_info.event[0] == "file_failed"
|
||||
else if site_info.event[0] == "file_failed"
|
||||
@site_error = site_info.event[1]
|
||||
if site_info.settings.size > site_info.size_limit*1024*1024 # Site size too large and not displaying it yet
|
||||
@loading.showTooLarge(site_info)
|
||||
|
|
@ -280,7 +280,7 @@ class Wrapper
|
|||
else
|
||||
@loading.printLine("#{site_info.event[1]} download failed", "error")
|
||||
# New peers found
|
||||
else if site_info.event[0] == "peers_added"
|
||||
else if site_info.event[0] == "peers_added"
|
||||
@loading.printLine("Peers found: #{site_info.peers}")
|
||||
|
||||
if @loading.screen_visible and not @site_info # First site info display current peers
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ a { color: black }
|
|||
|
||||
.template { display: none !important }
|
||||
|
||||
#inner-iframe { width: 100%; height: 100%; position: absolute; border: 0px; transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s ease-in-out }
|
||||
#inner-iframe { width: 100%; height: 100%; position: absolute; border: 0px } /*; transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s ease-in-out*/
|
||||
#inner-iframe.back { transform: scale(0.95) translate(-300px, 0px); opacity: 0.4 }
|
||||
|
||||
.button { padding: 5px 10px; margin-left: 10px; background-color: #FFF85F; border-bottom: 2px solid #CDBD1E; border-radius: 2px; text-decoration: none; transition: all 0.5s; }
|
||||
|
|
@ -17,16 +17,16 @@ a { color: black }
|
|||
|
||||
/* Fixbutton */
|
||||
|
||||
.fixbutton {
|
||||
.fixbutton {
|
||||
position: absolute; right: 35px; top: 15px; width: 40px; z-index: 999;
|
||||
text-align: center; color: white; font-family: Consolas; font-size: 25px; line-height: 40px;
|
||||
text-align: center; color: white; font-family: Consolas, Menlo, monospace; font-size: 25px;
|
||||
}
|
||||
.fixbutton-bg {
|
||||
.fixbutton-bg {
|
||||
border-radius: 80px; background-color: rgba(180, 180, 180, 0.5); cursor: pointer;
|
||||
display: block; width: 80px; height: 80px; transition: background-color 0.2s, box-shadow 0.5s; transform: scale(0.6); margin-left: -20px; margin-top: -20px; /* 2x size to prevent blur on anim */
|
||||
/*box-shadow: inset 105px 260px 0px -200px rgba(0,0,0,0.1);*/ /* box-shadow: inset -75px 183px 0px -200px rgba(0,0,0,0.1); */
|
||||
}
|
||||
.fixbutton-text { pointer-events: none; position: absolute; z-index: 999; width: 40px; backface-visibility: hidden; perspective: 1000px }
|
||||
.fixbutton-text { pointer-events: none; position: absolute; z-index: 999; width: 40px; backface-visibility: hidden; perspective: 1000px; line-height: 0px; padding-top: 20px }
|
||||
.fixbutton-burger { pointer-events: none; position: absolute; z-index: 999; width: 40px; opacity: 0; left: -20px; font-size: 48px; line-height: 32px }
|
||||
.fixbutton-bg:hover { background-color: #AF3BFF }
|
||||
.fixbutton-bg:active { background-color: #9E2FEA; top: 1px; transition: none }
|
||||
|
|
@ -35,16 +35,16 @@ a { color: black }
|
|||
/* Notification */
|
||||
|
||||
.notifications { position: absolute; top: 0px; right: 80px; display: inline-block; z-index: 999; white-space: nowrap }
|
||||
.notification {
|
||||
.notification {
|
||||
position: relative; float: right; clear: both; margin: 10px; box-sizing: border-box; overflow: hidden; backface-visibility: hidden; perspective: 1000px; padding-bottom: 5px;
|
||||
color: #4F4F4F; font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; /*border: 1px solid rgba(210, 206, 205, 0.2)*/
|
||||
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 {
|
||||
.notification-icon {
|
||||
display: block; width: 50px; height: 50px; position: absolute; float: left; z-index: 1;
|
||||
text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white;
|
||||
}
|
||||
.notification .body {
|
||||
max-width: 420px; padding-left: 14px; padding-right: 60px; height: 40px; vertical-align: middle; display: table;
|
||||
.notification .body {
|
||||
max-width: 560px; padding-left: 14px; padding-right: 60px; height: 40px; vertical-align: middle; display: table;
|
||||
background-color: white; left: 50px; top: 0px; position: relative; padding-top: 5px; padding-bottom: 5px;
|
||||
}
|
||||
.notification.long .body { padding-top: 10px; padding-bottom: 10px }
|
||||
|
|
@ -60,7 +60,7 @@ a { color: black }
|
|||
|
||||
/* Notification select */
|
||||
.notification .select {
|
||||
display: block; padding: 10px; margin-right: -32px; text-decoration: none; border-left: 3px solid #EEE;
|
||||
display: block; padding: 10px; margin-right: -32px; text-decoration: none; border-left: 3px solid #EEE;
|
||||
margin-top: 1px; transition: all 0.3s; color: #666
|
||||
}
|
||||
.notification .select:hover, .notification .select.active { background-color: #007AFF; border-left: 3px solid #5D68FF; color: white; transition: none }
|
||||
|
|
@ -90,9 +90,9 @@ a { color: black }
|
|||
/* Console */
|
||||
.console { line-height: 24px; font-family: monospace; font-size: 14px; color: #ADADAD; text-transform: uppercase; opacity: 0; transform: translateY(-20px); }
|
||||
.console-line:last-child { color: #6C6767 }
|
||||
.console .cursor {
|
||||
background-color: #999; color: #999; animation: pulse 1.5s infinite ease-in-out; margin-right: -9px;
|
||||
display: inline-block; width: 9px; height: 19px; vertical-align: -4px;
|
||||
.console .cursor {
|
||||
background-color: #999; color: #999; animation: pulse 1.5s infinite ease-in-out; margin-right: -9px;
|
||||
display: inline-block; width: 9px; height: 19px; vertical-align: -4px;
|
||||
}
|
||||
.console .console-error { color: #e74c3c; font-weight: bold; animation: pulse 2s infinite linear }
|
||||
.console .console-warning { color: #8e44ad; }
|
||||
|
|
@ -120,14 +120,14 @@ a { color: black }
|
|||
|
||||
|
||||
.progressbar { background: #26C281; position: fixed; z-index: 100; top: 0; left: 0; width: 0%; height: 2px; transition: width 0.5s, opacity 1s; display: none }
|
||||
.progressbar .peg {
|
||||
.progressbar .peg {
|
||||
display: block; position: absolute; right: 0px; width: 100px; height: 100%;
|
||||
box-shadow: 0 0 10px #AF3BFF, 0 0 5px #29d; opacity: 1.0; transform: rotate(3deg) translate(0px, -4px);
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
.icon-profile { font-size: 6px; top: 0em; border-radius: 0.7em 0.7em 0 0; background: #FFFFFF; width: 1.5em; height: 0.7em; position: relative; display: inline-block; margin-right: 4px }
|
||||
.icon-profile::before { position: absolute; content: ""; top: -1em; left: 0.38em; width: 0.8em; height: 0.85em; border-radius: 50%; background: #FFFFFF }
|
||||
.icon-profile::before { position: absolute; content: ""; top: -1em; left: 0.38em; width: 0.8em; height: 0.85em; border-radius: 50%; background: #FFFFFF }
|
||||
|
||||
/* Animations */
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ a { color: black }
|
|||
|
||||
.template { display: none !important }
|
||||
|
||||
#inner-iframe { width: 100%; height: 100%; position: absolute; border: 0px; -webkit-transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s ease-in-out ; -moz-transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s ease-in-out ; -o-transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s ease-in-out ; -ms-transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s ease-in-out ; transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s ease-in-out }
|
||||
#inner-iframe { width: 100%; height: 100%; position: absolute; border: 0px } /*; transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s ease-in-out*/
|
||||
#inner-iframe.back { -webkit-transform: scale(0.95) translate(-300px, 0px); -moz-transform: scale(0.95) translate(-300px, 0px); -o-transform: scale(0.95) translate(-300px, 0px); -ms-transform: scale(0.95) translate(-300px, 0px); transform: scale(0.95) translate(-300px, 0px) ; opacity: 0.4 }
|
||||
|
||||
.button { padding: 5px 10px; margin-left: 10px; background-color: #FFF85F; border-bottom: 2px solid #CDBD1E; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px ; text-decoration: none; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s ; }
|
||||
|
|
@ -22,16 +22,16 @@ a { color: black }
|
|||
|
||||
/* Fixbutton */
|
||||
|
||||
.fixbutton {
|
||||
.fixbutton {
|
||||
position: absolute; right: 35px; top: 15px; width: 40px; z-index: 999;
|
||||
text-align: center; color: white; font-family: Consolas; font-size: 25px; line-height: 40px;
|
||||
text-align: center; color: white; font-family: Consolas, Menlo, monospace; font-size: 25px;
|
||||
}
|
||||
.fixbutton-bg {
|
||||
.fixbutton-bg {
|
||||
-webkit-border-radius: 80px; -moz-border-radius: 80px; -o-border-radius: 80px; -ms-border-radius: 80px; border-radius: 80px ; background-color: rgba(180, 180, 180, 0.5); cursor: pointer;
|
||||
display: block; width: 80px; height: 80px; -webkit-transition: background-color 0.2s, box-shadow 0.5s; -moz-transition: background-color 0.2s, box-shadow 0.5s; -o-transition: background-color 0.2s, box-shadow 0.5s; -ms-transition: background-color 0.2s, box-shadow 0.5s; transition: background-color 0.2s, box-shadow 0.5s ; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -o-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6) ; margin-left: -20px; margin-top: -20px; /* 2x size to prevent blur on anim */
|
||||
/*box-shadow: inset 105px 260px 0px -200px rgba(0,0,0,0.1);*/ /* -webkit-box-shadow: inset -75px 183px 0px -200px rgba(0,0,0,0.1); -moz-box-shadow: inset -75px 183px 0px -200px rgba(0,0,0,0.1); -o-box-shadow: inset -75px 183px 0px -200px rgba(0,0,0,0.1); -ms-box-shadow: inset -75px 183px 0px -200px rgba(0,0,0,0.1); box-shadow: inset -75px 183px 0px -200px rgba(0,0,0,0.1) ; */
|
||||
}
|
||||
.fixbutton-text { pointer-events: none; position: absolute; z-index: 999; width: 40px; backface-visibility: hidden; -webkit-perspective: 1000px ; -moz-perspective: 1000px ; -o-perspective: 1000px ; -ms-perspective: 1000px ; perspective: 1000px }
|
||||
.fixbutton-text { pointer-events: none; position: absolute; z-index: 999; width: 40px; backface-visibility: hidden; -webkit-perspective: 1000px; -moz-perspective: 1000px; -o-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px ; line-height: 0px; padding-top: 20px }
|
||||
.fixbutton-burger { pointer-events: none; position: absolute; z-index: 999; width: 40px; opacity: 0; left: -20px; font-size: 48px; line-height: 32px }
|
||||
.fixbutton-bg:hover { background-color: #AF3BFF }
|
||||
.fixbutton-bg:active { background-color: #9E2FEA; top: 1px; -webkit-transition: none ; -moz-transition: none ; -o-transition: none ; -ms-transition: none ; transition: none }
|
||||
|
|
@ -40,16 +40,16 @@ a { color: black }
|
|||
/* Notification */
|
||||
|
||||
.notifications { position: absolute; top: 0px; right: 80px; display: inline-block; z-index: 999; white-space: nowrap }
|
||||
.notification {
|
||||
.notification {
|
||||
position: relative; float: right; clear: both; margin: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ; overflow: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; -moz-perspective: 1000px; -o-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px ; padding-bottom: 5px;
|
||||
color: #4F4F4F; font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; /*border: 1px solid rgba(210, 206, 205, 0.2)*/
|
||||
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 {
|
||||
.notification-icon {
|
||||
display: block; width: 50px; height: 50px; position: absolute; float: left; z-index: 1;
|
||||
text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white;
|
||||
}
|
||||
.notification .body {
|
||||
max-width: 420px; padding-left: 14px; padding-right: 60px; height: 40px; vertical-align: middle; display: table;
|
||||
.notification .body {
|
||||
max-width: 560px; padding-left: 14px; padding-right: 60px; height: 40px; vertical-align: middle; display: table;
|
||||
background-color: white; left: 50px; top: 0px; position: relative; padding-top: 5px; padding-bottom: 5px;
|
||||
}
|
||||
.notification.long .body { padding-top: 10px; padding-bottom: 10px }
|
||||
|
|
@ -65,7 +65,7 @@ a { color: black }
|
|||
|
||||
/* Notification select */
|
||||
.notification .select {
|
||||
display: block; padding: 10px; margin-right: -32px; text-decoration: none; border-left: 3px solid #EEE;
|
||||
display: block; padding: 10px; margin-right: -32px; text-decoration: none; border-left: 3px solid #EEE;
|
||||
margin-top: 1px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s ; color: #666
|
||||
}
|
||||
.notification .select:hover, .notification .select.active { background-color: #007AFF; border-left: 3px solid #5D68FF; color: white; -webkit-transition: none ; -moz-transition: none ; -o-transition: none ; -ms-transition: none ; transition: none }
|
||||
|
|
@ -95,9 +95,9 @@ a { color: black }
|
|||
/* Console */
|
||||
.console { line-height: 24px; font-family: monospace; font-size: 14px; color: #ADADAD; text-transform: uppercase; opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px) ; }
|
||||
.console-line:last-child { color: #6C6767 }
|
||||
.console .cursor {
|
||||
background-color: #999; color: #999; -webkit-animation: pulse 1.5s infinite ease-in-out; -moz-animation: pulse 1.5s infinite ease-in-out; -o-animation: pulse 1.5s infinite ease-in-out; -ms-animation: pulse 1.5s infinite ease-in-out; animation: pulse 1.5s infinite ease-in-out ; margin-right: -9px;
|
||||
display: inline-block; width: 9px; height: 19px; vertical-align: -4px;
|
||||
.console .cursor {
|
||||
background-color: #999; color: #999; -webkit-animation: pulse 1.5s infinite ease-in-out; -moz-animation: pulse 1.5s infinite ease-in-out; -o-animation: pulse 1.5s infinite ease-in-out; -ms-animation: pulse 1.5s infinite ease-in-out; animation: pulse 1.5s infinite ease-in-out ; margin-right: -9px;
|
||||
display: inline-block; width: 9px; height: 19px; vertical-align: -4px;
|
||||
}
|
||||
.console .console-error { color: #e74c3c; font-weight: bold; -webkit-animation: pulse 2s infinite linear ; -moz-animation: pulse 2s infinite linear ; -o-animation: pulse 2s infinite linear ; -ms-animation: pulse 2s infinite linear ; animation: pulse 2s infinite linear }
|
||||
.console .console-warning { color: #8e44ad; }
|
||||
|
|
@ -125,14 +125,14 @@ a { color: black }
|
|||
|
||||
|
||||
.progressbar { background: #26C281; position: fixed; z-index: 100; top: 0; left: 0; width: 0%; height: 2px; -webkit-transition: width 0.5s, opacity 1s; -moz-transition: width 0.5s, opacity 1s; -o-transition: width 0.5s, opacity 1s; -ms-transition: width 0.5s, opacity 1s; transition: width 0.5s, opacity 1s ; display: none }
|
||||
.progressbar .peg {
|
||||
.progressbar .peg {
|
||||
display: block; position: absolute; right: 0px; width: 100px; height: 100%;
|
||||
-webkit-box-shadow: 0 0 10px #AF3BFF, 0 0 5px #29d; -moz-box-shadow: 0 0 10px #AF3BFF, 0 0 5px #29d; -o-box-shadow: 0 0 10px #AF3BFF, 0 0 5px #29d; -ms-box-shadow: 0 0 10px #AF3BFF, 0 0 5px #29d; box-shadow: 0 0 10px #AF3BFF, 0 0 5px #29d ; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); -o-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px) ;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
.icon-profile { font-size: 6px; top: 0em; -webkit-border-radius: 0.7em 0.7em 0 0; -moz-border-radius: 0.7em 0.7em 0 0; -o-border-radius: 0.7em 0.7em 0 0; -ms-border-radius: 0.7em 0.7em 0 0; border-radius: 0.7em 0.7em 0 0 ; background: #FFFFFF; width: 1.5em; height: 0.7em; position: relative; display: inline-block; margin-right: 4px }
|
||||
.icon-profile::before { position: absolute; content: ""; top: -1em; left: 0.38em; width: 0.8em; height: 0.85em; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50% ; background: #FFFFFF }
|
||||
.icon-profile::before { position: absolute; content: ""; top: -1em; left: 0.38em; width: 0.8em; height: 0.85em; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50% ; background: #FFFFFF }
|
||||
|
||||
/* Animations */
|
||||
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@
|
|||
|
||||
jQuery.cssHooks['scale'] = {
|
||||
get: function(elem, computed, extra) {
|
||||
var match = window.getComputedStyle(elem).transform.match("[0-9\.]+")
|
||||
var match = window.getComputedStyle(elem)[transform_property].match("[0-9\.]+")
|
||||
if (match) {
|
||||
var scale = parseFloat(match[0])
|
||||
return scale
|
||||
|
|
@ -164,14 +164,14 @@ jQuery.cssHooks['scale'] = {
|
|||
},
|
||||
set: function(elem, val) {
|
||||
//var transforms = $(elem).css("transform").match(/[0-9\.]+/g)
|
||||
var transforms = window.getComputedStyle(elem).transform.match(/[0-9\.]+/g)
|
||||
var transforms = window.getComputedStyle(elem)[transform_property].match(/[0-9\.]+/g)
|
||||
if (transforms) {
|
||||
transforms[0] = val
|
||||
transforms[3] = val
|
||||
//$(elem).css("transform", 'matrix('+transforms.join(", ")+")")
|
||||
elem.style.transform = 'matrix('+transforms.join(", ")+')'
|
||||
elem.style[transform_property] = 'matrix('+transforms.join(", ")+')'
|
||||
} else {
|
||||
elem.style.transform = "scale("+val+")"
|
||||
elem.style[transform_property] = "scale("+val+")"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -181,6 +181,14 @@ jQuery.fx.step.scale = function(fx) {
|
|||
};
|
||||
|
||||
|
||||
if (window.getComputedStyle(document.body).transform) {
|
||||
transform_property = "transform"
|
||||
} else {
|
||||
transform_property = "webkitTransform"
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ---- src/Ui/media/lib/jquery.csslater.coffee ---- */
|
||||
|
||||
|
||||
|
|
@ -458,6 +466,69 @@ jQuery.extend( jQuery.easing,
|
|||
*/
|
||||
|
||||
|
||||
/* ---- src/Ui/media/Fixbutton.coffee ---- */
|
||||
|
||||
|
||||
(function() {
|
||||
var Fixbutton;
|
||||
|
||||
Fixbutton = (function() {
|
||||
function Fixbutton() {
|
||||
this.dragging = false;
|
||||
$(".fixbutton-bg").on("mouseover", (function(_this) {
|
||||
return function() {
|
||||
$(".fixbutton-bg").stop().animate({
|
||||
"scale": 0.7
|
||||
}, 800, "easeOutElastic");
|
||||
$(".fixbutton-burger").stop().animate({
|
||||
"opacity": 1.5,
|
||||
"left": 0
|
||||
}, 800, "easeOutElastic");
|
||||
return $(".fixbutton-text").stop().animate({
|
||||
"opacity": 0,
|
||||
"left": 20
|
||||
}, 300, "easeOutCubic");
|
||||
};
|
||||
})(this));
|
||||
$(".fixbutton-bg").on("mouseout", (function(_this) {
|
||||
return function() {
|
||||
if ($(".fixbutton").hasClass("dragging")) {
|
||||
return true;
|
||||
}
|
||||
$(".fixbutton-bg").stop().animate({
|
||||
"scale": 0.6
|
||||
}, 300, "easeOutCubic");
|
||||
$(".fixbutton-burger").stop().animate({
|
||||
"opacity": 0,
|
||||
"left": -20
|
||||
}, 300, "easeOutCubic");
|
||||
return $(".fixbutton-text").stop().animate({
|
||||
"opacity": 1,
|
||||
"left": 0
|
||||
}, 300, "easeOutBack");
|
||||
};
|
||||
})(this));
|
||||
|
||||
/*$(".fixbutton-bg").on "click", ->
|
||||
return false
|
||||
*/
|
||||
$(".fixbutton-bg").on("mousedown", (function(_this) {
|
||||
return function() {};
|
||||
})(this));
|
||||
$(".fixbutton-bg").on("mouseup", (function(_this) {
|
||||
return function() {};
|
||||
})(this));
|
||||
}
|
||||
|
||||
return Fixbutton;
|
||||
|
||||
})();
|
||||
|
||||
window.Fixbutton = Fixbutton;
|
||||
|
||||
}).call(this);
|
||||
|
||||
|
||||
/* ---- src/Ui/media/Loading.coffee ---- */
|
||||
|
||||
|
||||
|
|
@ -681,61 +752,6 @@ jQuery.extend( jQuery.easing,
|
|||
}).call(this);
|
||||
|
||||
|
||||
/* ---- src/Ui/media/Sidebar.coffee ---- */
|
||||
|
||||
|
||||
(function() {
|
||||
var Sidebar;
|
||||
|
||||
Sidebar = (function() {
|
||||
function Sidebar() {
|
||||
this.initFixbutton();
|
||||
}
|
||||
|
||||
Sidebar.prototype.initFixbutton = function() {
|
||||
$(".fixbutton-bg").on("mouseover", function() {
|
||||
$(this).stop().animate({
|
||||
"scale": 0.7
|
||||
}, 800, "easeOutElastic");
|
||||
$(".fixbutton-burger").stop().animate({
|
||||
"opacity": 1.5,
|
||||
"left": 0
|
||||
}, 800, "easeOutElastic");
|
||||
return $(".fixbutton-text").stop().animate({
|
||||
"opacity": 0,
|
||||
"left": 20
|
||||
}, 300, "easeOutCubic");
|
||||
});
|
||||
$(".fixbutton-bg").on("mouseout", function() {
|
||||
$(this).stop().animate({
|
||||
"scale": 0.6
|
||||
}, 300, "easeOutCubic");
|
||||
$(".fixbutton-burger").stop().animate({
|
||||
"opacity": 0,
|
||||
"left": -20
|
||||
}, 300, "easeOutCubic");
|
||||
return $(".fixbutton-text").stop().animate({
|
||||
"opacity": 1,
|
||||
"left": 0
|
||||
}, 300, "easeOutBack");
|
||||
});
|
||||
|
||||
/*$(".fixbutton-bg").on "click", ->
|
||||
return false
|
||||
*/
|
||||
$(".fixbutton-bg").on("mousedown", function() {});
|
||||
return $(".fixbutton-bg").on("mouseup", function() {});
|
||||
};
|
||||
|
||||
return Sidebar;
|
||||
|
||||
})();
|
||||
|
||||
window.Sidebar = Sidebar;
|
||||
|
||||
}).call(this);
|
||||
|
||||
|
||||
/* ---- src/Ui/media/Wrapper.coffee ---- */
|
||||
|
||||
|
||||
|
|
@ -756,7 +772,7 @@ jQuery.extend( jQuery.easing,
|
|||
this.log("Created!");
|
||||
this.loading = new Loading();
|
||||
this.notifications = new Notifications($(".notifications"));
|
||||
this.sidebar = new Sidebar();
|
||||
this.fixbutton = new Fixbutton();
|
||||
window.addEventListener("message", this.onMessageInner, false);
|
||||
this.inner = document.getElementById("inner-iframe").contentWindow;
|
||||
this.ws = new ZeroWebsocket(ws_url);
|
||||
|
|
@ -1218,4 +1234,4 @@ jQuery.extend( jQuery.easing,
|
|||
|
||||
window.wrapper = new Wrapper(ws_url);
|
||||
|
||||
}).call(this);
|
||||
}).call(this);
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
jQuery.cssHooks['scale'] = {
|
||||
get: function(elem, computed, extra) {
|
||||
var match = window.getComputedStyle(elem).transform.match("[0-9\.]+")
|
||||
var match = window.getComputedStyle(elem)[transform_property].match("[0-9\.]+")
|
||||
if (match) {
|
||||
var scale = parseFloat(match[0])
|
||||
return scale
|
||||
|
|
@ -10,18 +10,25 @@ jQuery.cssHooks['scale'] = {
|
|||
},
|
||||
set: function(elem, val) {
|
||||
//var transforms = $(elem).css("transform").match(/[0-9\.]+/g)
|
||||
var transforms = window.getComputedStyle(elem).transform.match(/[0-9\.]+/g)
|
||||
var transforms = window.getComputedStyle(elem)[transform_property].match(/[0-9\.]+/g)
|
||||
if (transforms) {
|
||||
transforms[0] = val
|
||||
transforms[3] = val
|
||||
//$(elem).css("transform", 'matrix('+transforms.join(", ")+")")
|
||||
elem.style.transform = 'matrix('+transforms.join(", ")+')'
|
||||
elem.style[transform_property] = 'matrix('+transforms.join(", ")+')'
|
||||
} else {
|
||||
elem.style.transform = "scale("+val+")"
|
||||
elem.style[transform_property] = "scale("+val+")"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
jQuery.fx.step.scale = function(fx) {
|
||||
jQuery.cssHooks['scale'].set(fx.elem, fx.now)
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
if (window.getComputedStyle(document.body).transform) {
|
||||
transform_property = "transform"
|
||||
} else {
|
||||
transform_property = "webkitTransform"
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue