Sidebar optimization and dummy static page for uncoming internal page
This commit is contained in:
shortcutme
parent
53a40fa914
commit
d44a4e8ae2
6 changed files with 464 additions and 114 deletions
60
plugins/Sidebar/media/Internals.coffee
Normal file
60
plugins/Sidebar/media/Internals.coffee
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
class Internals extends Class
|
||||
constructor: (@sidebar) ->
|
||||
@tag = null
|
||||
@opened = false
|
||||
if window.top.location.hash == "#internals"
|
||||
setTimeout (=> @open()), 10
|
||||
|
||||
createHtmltag: ->
|
||||
@when_loaded = $.Deferred()
|
||||
if not @container
|
||||
@container = $("""
|
||||
<div class="internals-container">
|
||||
<div class="internals"><div class="internals-middle">
|
||||
<div class="mynode"></div>
|
||||
<div class="peers">
|
||||
<div class="peer"><div class="line"></div><a href="#" class="icon">\u25BD</div></div>
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
""")
|
||||
@container.appendTo(document.body)
|
||||
@tag = @container.find(".internals")
|
||||
|
||||
open: =>
|
||||
@createHtmltag()
|
||||
@sidebar.fixbutton_targety = @sidebar.page_height
|
||||
@stopDragY()
|
||||
|
||||
onOpened: =>
|
||||
@sidebar.onClosed()
|
||||
@log "onOpened"
|
||||
|
||||
onClosed: =>
|
||||
$(document.body).removeClass("body-internals")
|
||||
|
||||
stopDragY: =>
|
||||
# Animate sidebar and iframe
|
||||
if @sidebar.fixbutton_targety == @sidebar.fixbutton_inity
|
||||
# Closed
|
||||
targety = 0
|
||||
@opened = false
|
||||
else
|
||||
# Opened
|
||||
targety = @sidebar.fixbutton_targety - @sidebar.fixbutton_inity
|
||||
@onOpened()
|
||||
@opened = true
|
||||
|
||||
# Revent sidebar transitions
|
||||
if @tag
|
||||
@tag.css("transition", "0.5s ease-out")
|
||||
@tag.css("transform", "translateY(#{targety}px)").one transitionEnd, =>
|
||||
@tag.css("transition", "")
|
||||
if not @opened
|
||||
@log "cleanup"
|
||||
# Revert body transformations
|
||||
@log "stopdrag", "opened:", @opened, targety
|
||||
if not @opened
|
||||
@onClosed()
|
||||
|
||||
window.Internals = Internals
|
||||
17
plugins/Sidebar/media/Internals.css
Normal file
17
plugins/Sidebar/media/Internals.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
.internals-container { width: 100%; z-index: 998; position: absolute; top: -100vh; }
|
||||
.internals { background-color: #EEE; height: 100vh; transform: translateY(0px); }
|
||||
.internals-middle {height: 0px; top: 50%; position: absolute; width: 100%; left: 50%; }
|
||||
|
||||
.internals .mynode {
|
||||
border: 0.5px solid #aaa; width: 50px; height: 50px; transform: rotateZ(45deg); margin-top: -25px; margin-left: -25px;
|
||||
opacity: 1; display: inline-block; background-color: #EEE; z-index: 9; position: absolute; outline: 5px solid #EEE;
|
||||
}
|
||||
.internals .peers { width: 0px; height: 0px; position: absolute; left: -20px; top: -20px; text-align: center; }
|
||||
.internals .peer { left: 0px; top: 0px; position: absolute; }
|
||||
.internals .peer .icon { width: 20px; height: 20px; padding: 10px; display: inline-block; text-decoration: none; left: 200px; position: absolute; color: #666; }
|
||||
.internals .peer .icon:before { content: "\25BC"; position: absolute; margin-top: 3px; margin-left: -1px; opacity: 0; transition: all 0.3s }
|
||||
.internals .peer .icon:hover:before { opacity: 1; transition: none }
|
||||
.internals .peer .line {
|
||||
width: 187px; border-top: 1px solid #CCC; position: absolute; top: 20px; left: 20px;
|
||||
transform: rotateZ(334deg); transform-origin: bottom left;
|
||||
}
|
||||
|
|
@ -4,11 +4,16 @@ class Sidebar extends Class
|
|||
@container = null
|
||||
@opened = false
|
||||
@width = 410
|
||||
@internals = new Internals(@)
|
||||
@fixbutton = $(".fixbutton")
|
||||
@fixbutton_addx = 0
|
||||
@fixbutton_addy = 0
|
||||
@fixbutton_initx = 0
|
||||
@fixbutton_inity = 15
|
||||
@fixbutton_targetx = 0
|
||||
@move_lock = null
|
||||
@page_width = $(window).width()
|
||||
@page_height = $(window).height()
|
||||
@frame = $("#inner-iframe")
|
||||
@initFixbutton()
|
||||
@dragStarted = 0
|
||||
|
|
@ -41,13 +46,16 @@ class Sidebar extends Class
|
|||
@dragStarted = (+ new Date)
|
||||
@fixbutton.one "mousemove touchmove", (e) =>
|
||||
mousex = e.pageX
|
||||
mousey = e.pageY
|
||||
if not mousex
|
||||
mousex = e.originalEvent.touches[0].pageX
|
||||
mousey = e.originalEvent.touches[0].pageY
|
||||
|
||||
@fixbutton_addx = @fixbutton.offset().left-mousex
|
||||
@fixbutton_addx = @fixbutton.offset().left - mousex
|
||||
@fixbutton_addy = @fixbutton.offset().top - mousey
|
||||
@startDrag()
|
||||
@fixbutton.parent().on "click touchend touchcancel", (e) =>
|
||||
if (+ new Date)-@dragStarted < 100
|
||||
if (+ new Date) - @dragStarted < 100
|
||||
window.top.location = @fixbutton.find(".fixbutton-bg").attr("href")
|
||||
@stopDrag()
|
||||
@resized()
|
||||
|
|
@ -55,6 +63,7 @@ class Sidebar extends Class
|
|||
|
||||
resized: =>
|
||||
@page_width = $(window).width()
|
||||
@page_height = $(window).height()
|
||||
@fixbutton_initx = @page_width - 75 # Initial x position
|
||||
if @opened
|
||||
@fixbutton.css
|
||||
|
|
@ -65,6 +74,7 @@ class Sidebar extends Class
|
|||
|
||||
# Start dragging the fixbutton
|
||||
startDrag: ->
|
||||
@move_lock = "x" # Temporary until internals not finished
|
||||
@log "startDrag"
|
||||
@fixbutton_targetx = @fixbutton_initx # Fallback x position
|
||||
|
||||
|
|
@ -81,7 +91,9 @@ class Sidebar extends Class
|
|||
@fixbutton.one "click", (e) =>
|
||||
@stopDrag()
|
||||
@fixbutton.removeClass("dragging")
|
||||
if Math.abs(@fixbutton.offset().left - @fixbutton_initx) > 5
|
||||
moved_x = Math.abs(@fixbutton.offset().left - @fixbutton_initx)
|
||||
moved_y = Math.abs(@fixbutton.offset().top - @fixbutton_inity)
|
||||
if moved_x > 5 or moved_y > 10
|
||||
# If moved more than some pixel the button then don't go to homepage
|
||||
e.preventDefault()
|
||||
|
||||
|
|
@ -97,20 +109,45 @@ class Sidebar extends Class
|
|||
|
||||
# Wait for moving the fixbutton
|
||||
waitMove: (e) =>
|
||||
if Math.abs(@fixbutton.offset().left - @fixbutton_targetx) > 10 and (+ new Date)-@dragStarted > 100
|
||||
@moved()
|
||||
document.body.style.perspective = "1000px"
|
||||
document.body.style.height = "100%"
|
||||
document.body.style.willChange = "perspective"
|
||||
document.documentElement.style.height = "100%"
|
||||
#$(document.body).css("backface-visibility", "hidden").css("perspective", "1000px").css("height", "900px")
|
||||
# $("iframe").css("backface-visibility", "hidden")
|
||||
|
||||
moved_x = Math.abs(parseInt(@fixbutton[0].style.left) - @fixbutton_targetx)
|
||||
moved_y = Math.abs(parseInt(@fixbutton[0].style.top) - @fixbutton_targety)
|
||||
if moved_x > 5 and (+ new Date) - @dragStarted + moved_x > 50
|
||||
@moved("x")
|
||||
@fixbutton.stop().animate {"top": @fixbutton_inity}, 1000
|
||||
@fixbutton.parents().off "mousemove touchmove" ,@waitMove
|
||||
|
||||
moved: ->
|
||||
@log "Moved"
|
||||
else if moved_y > 5 and (+ new Date) - @dragStarted + moved_y > 50
|
||||
@moved("y")
|
||||
@fixbutton.parents().off "mousemove touchmove" ,@waitMove
|
||||
|
||||
moved: (direction) ->
|
||||
@log "Moved", direction
|
||||
@move_lock = direction
|
||||
if direction == "y"
|
||||
$(document.body).addClass("body-internals")
|
||||
return @internals.createHtmltag()
|
||||
@createHtmltag()
|
||||
$(document.body).css("perspective", "1000px").addClass("body-sidebar")
|
||||
$(document.body).addClass("body-sidebar")
|
||||
@container.on "mousedown touchend touchcancel", (e) =>
|
||||
if e.target != e.currentTarget
|
||||
return true
|
||||
@log "closing"
|
||||
if $(document.body).hasClass("body-sidebar")
|
||||
@close()
|
||||
return true
|
||||
|
||||
$(window).off "resize"
|
||||
$(window).on "resize", =>
|
||||
$(document.body).css "height", $(window).height()
|
||||
@scrollable()
|
||||
@resized()
|
||||
$(window).trigger "resize"
|
||||
|
||||
# Override setsiteinfo to catch changes
|
||||
@wrapper.setSiteInfo = (site_info) =>
|
||||
|
|
@ -157,7 +194,6 @@ class Sidebar extends Class
|
|||
@when_loaded.resolve()
|
||||
|
||||
else # Not first update, patch the html to keep unchanged dom elements
|
||||
@log "Patching content"
|
||||
morphdom @tag.find(".content")[0], '<div class="content">'+res+'</div>', {
|
||||
onBeforeMorphEl: (from_el, to_el) -> # Ignore globe loaded state
|
||||
if from_el.className == "globe" or from_el.className.indexOf("noupdate") >= 0
|
||||
|
|
@ -169,19 +205,38 @@ class Sidebar extends Class
|
|||
|
||||
animDrag: (e) =>
|
||||
mousex = e.pageX
|
||||
if not mousex
|
||||
mousey = e.pageY
|
||||
if not mousex and e.originalEvent.touches
|
||||
mousex = e.originalEvent.touches[0].pageX
|
||||
mousey = e.originalEvent.touches[0].pageY
|
||||
|
||||
overdrag = @fixbutton_initx-@width-mousex
|
||||
overdrag = @fixbutton_initx - @width - mousex
|
||||
if overdrag > 0 # Overdragged
|
||||
overdrag_percent = 1+overdrag/300
|
||||
overdrag_percent = 1 + overdrag/300
|
||||
mousex = (mousex + (@fixbutton_initx-@width)*overdrag_percent)/(1+overdrag_percent)
|
||||
targetx = @fixbutton_initx-mousex-@fixbutton_addx
|
||||
targetx = @fixbutton_initx - mousex - @fixbutton_addx
|
||||
targety = @fixbutton_inity - mousey - @fixbutton_addy
|
||||
|
||||
@fixbutton[0].style.left = (mousex+@fixbutton_addx)+"px"
|
||||
if @move_lock == "x"
|
||||
targety = @fixbutton_inity
|
||||
else if @move_lock == "y"
|
||||
targetx = @fixbutton_initx
|
||||
|
||||
if @tag
|
||||
@tag[0].style.transform = "translateX(#{0-targetx}px)"
|
||||
if not @move_lock or @move_lock == "x"
|
||||
@fixbutton[0].style.left = (mousex + @fixbutton_addx) + "px"
|
||||
if @tag
|
||||
@tag[0].style.transform = "translateX(#{0 - targetx}px)"
|
||||
|
||||
if not @move_lock or @move_lock == "y"
|
||||
@fixbutton[0].style.top = (mousey + @fixbutton_addy) + "px"
|
||||
if @internals.tag
|
||||
@internals.tag[0].style.transform = "translateY(#{0 - targety}px)"
|
||||
|
||||
#if @move_lock == "x"
|
||||
# @fixbutton[0].style.left = "#{@fixbutton_targetx} px"
|
||||
#@fixbutton[0].style.top = "#{@fixbutton_inity}px"
|
||||
#if @move_lock == "y"
|
||||
# @fixbutton[0].style.top = "#{@fixbutton_targety} px"
|
||||
|
||||
# Check if opened
|
||||
if (not @opened and targetx > @width/3) or (@opened and targetx > @width*0.9)
|
||||
|
|
@ -189,6 +244,11 @@ class Sidebar extends Class
|
|||
else
|
||||
@fixbutton_targetx = @fixbutton_initx
|
||||
|
||||
if (not @internals.opened and 0 - targety > @page_height/10) or (@internals.opened and 0 - targety > @page_height*0.95)
|
||||
@fixbutton_targety = @page_height - @fixbutton_inity - 50
|
||||
else
|
||||
@fixbutton_targety = @fixbutton_inity
|
||||
|
||||
|
||||
# Stop dragging the fixbutton
|
||||
stopDrag: ->
|
||||
|
|
@ -203,45 +263,56 @@ class Sidebar extends Class
|
|||
# Move back to initial position
|
||||
if @fixbutton_targetx != @fixbutton.offset().left
|
||||
# Animate fixbutton
|
||||
@fixbutton.stop().animate {"left": @fixbutton_targetx}, 500, "easeOutBack", =>
|
||||
if @move_lock == "y"
|
||||
top = @fixbutton_targety
|
||||
left = @fixbutton_initx
|
||||
if @move_lock == "x"
|
||||
top = @fixbutton_inity
|
||||
left = @fixbutton_targetx
|
||||
@fixbutton.stop().animate {"left": left, "top": top}, 500, "easeOutBack", =>
|
||||
# Switch back to auto align
|
||||
if @fixbutton_targetx == @fixbutton_initx # Closed
|
||||
@fixbutton.css("left", "auto")
|
||||
else # Opened
|
||||
@fixbutton.css("left", @fixbutton_targetx)
|
||||
@fixbutton.css("left", left)
|
||||
|
||||
$(".fixbutton-bg").trigger "mouseout" # Switch fixbutton back to normal status
|
||||
|
||||
# Animate sidebar and iframe
|
||||
if @fixbutton_targetx == @fixbutton_initx
|
||||
# Closed
|
||||
targetx = 0
|
||||
@opened = false
|
||||
@stopDragX()
|
||||
@internals.stopDragY()
|
||||
@move_lock = null
|
||||
|
||||
stopDragX: ->
|
||||
# Animate sidebar and iframe
|
||||
if @fixbutton_targetx == @fixbutton_initx or @move_lock == "y"
|
||||
# Closed
|
||||
targetx = 0
|
||||
@opened = false
|
||||
else
|
||||
# Opened
|
||||
targetx = @width
|
||||
if @opened
|
||||
@onOpened()
|
||||
else
|
||||
# Opened
|
||||
targetx = @width
|
||||
if @opened
|
||||
@when_loaded.done =>
|
||||
@onOpened()
|
||||
else
|
||||
@when_loaded.done =>
|
||||
@onOpened()
|
||||
@opened = true
|
||||
@opened = true
|
||||
|
||||
# Revent sidebar transitions
|
||||
if @tag
|
||||
@tag.css("transition", "0.4s ease-out")
|
||||
@tag.css("transform", "translateX(-#{targetx}px)").one transitionEnd, =>
|
||||
@tag.css("transition", "")
|
||||
if not @opened
|
||||
@container.remove()
|
||||
@container = null
|
||||
@tag.remove()
|
||||
@tag = null
|
||||
# Revent sidebar transitions
|
||||
if @tag
|
||||
@tag.css("transition", "0.4s ease-out")
|
||||
@tag.css("transform", "translateX(-#{targetx}px)").one transitionEnd, =>
|
||||
@tag.css("transition", "")
|
||||
if not @opened
|
||||
@container.remove()
|
||||
@container = null
|
||||
@tag.remove()
|
||||
@tag = null
|
||||
|
||||
# Revert body transformations
|
||||
@log "stopdrag", "opened:", @opened
|
||||
if not @opened
|
||||
@onClosed()
|
||||
# Revert body transformations
|
||||
@log "stopdrag", "opened:", @opened
|
||||
if not @opened
|
||||
@onClosed()
|
||||
|
||||
|
||||
onOpened: ->
|
||||
|
|
@ -448,19 +519,23 @@ class Sidebar extends Class
|
|||
|
||||
# Close
|
||||
@tag.find(".close").off("click touchend").on "click touchend", (e) =>
|
||||
@startDrag()
|
||||
@stopDrag()
|
||||
@close()
|
||||
return false
|
||||
|
||||
@loadGlobe()
|
||||
|
||||
close: ->
|
||||
@move_lock = "x"
|
||||
@startDrag()
|
||||
@stopDrag()
|
||||
|
||||
|
||||
onClosed: ->
|
||||
$(window).off "resize"
|
||||
$(window).on "resize", @resized
|
||||
$(document.body).css("transition", "0.6s ease-in-out").removeClass("body-sidebar").on transitionEnd, (e) =>
|
||||
if e.target == document.body
|
||||
$(document.body).css("height", "auto").css("perspective", "").css("transition", "").off transitionEnd
|
||||
if e.target == document.body and not $(document.body).hasClass("body-sidebar") and not $(document.body).hasClass("body-internals")
|
||||
$(document.body).css("height", "auto").css("perspective", "").css("will-change", "").css("transition", "").off transitionEnd
|
||||
@unloadGlobe()
|
||||
|
||||
# We dont need site info anymore
|
||||
|
|
@ -468,7 +543,7 @@ class Sidebar extends Class
|
|||
|
||||
|
||||
loadGlobe: =>
|
||||
console.log "loadGlobe", @tag.find(".globe").hasClass("loading")
|
||||
console.log "loadGlobe", @tag.find(".globe")[0], @tag.find(".globe").hasClass("loading")
|
||||
if @tag.find(".globe").hasClass("loading")
|
||||
setTimeout (=>
|
||||
if typeof(DAT) == "undefined" # Globe script not loaded, do it first
|
||||
|
|
@ -487,6 +562,7 @@ class Sidebar extends Class
|
|||
@globe.scene.remove(@globe.points)
|
||||
@globe.addData( globe_data, {format: 'magnitude', name: "hello", animated: false} )
|
||||
@globe.createPoints()
|
||||
@tag?.find(".globe").removeClass("loading")
|
||||
else if typeof(DAT) != "undefined"
|
||||
try
|
||||
@globe = new DAT.Globe( @tag.find(".globe")[0], {"imgDir": "/uimedia/globe/"} )
|
||||
|
|
@ -496,8 +572,8 @@ class Sidebar extends Class
|
|||
catch e
|
||||
console.log "WebGL error", e
|
||||
@tag?.find(".globe").addClass("error").text("WebGL not supported")
|
||||
@tag?.find(".globe").removeClass("loading")
|
||||
|
||||
@tag?.find(".globe").removeClass("loading")
|
||||
|
||||
|
||||
unloadGlobe: =>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,10 @@
|
|||
.fixbutton-bg:active { cursor: -webkit-grabbing; }
|
||||
|
||||
|
||||
.body-sidebar { background-color: #666 !important; }
|
||||
#inner-iframe { transition: 0.3s ease-in-out; transform-origin: left; }
|
||||
.body-sidebar iframe { transform: rotateY(5deg); opacity: 0.8; pointer-events: none; outline: 1px solid transparent } /* translateX(-200px) scale(0.95)*/
|
||||
.body-sidebar, .body-internals { background-color: #666 !important; }
|
||||
#inner-iframe { transition: 0.3s ease-in-out; transform-origin: left bottom; }
|
||||
.body-sidebar iframe { transform: rotateY(5deg); opacity: 0.8; pointer-events: none; outline: 1px solid transparent }
|
||||
.body-internals iframe { transform: rotateX(5deg); opacity: 0.8; pointer-events: none; outline: 1px solid transparent }
|
||||
|
||||
.sidebar .link-right { color: white; text-decoration: none; border-bottom: 1px solid #666; text-transform: uppercase; float: right; margin-right: 7px; margin-top: 1px; }
|
||||
.sidebar .link-right:hover { border-color: #CCC; }
|
||||
|
|
|
|||
|
|
@ -1,5 +1,27 @@
|
|||
|
||||
|
||||
/* ---- plugins/Sidebar/media/Internals.css ---- */
|
||||
|
||||
|
||||
.internals-container { width: 100%; z-index: 998; position: absolute; top: -100vh; }
|
||||
.internals { background-color: #EEE; height: 100vh; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px) ; }
|
||||
.internals-middle {height: 0px; top: 50%; position: absolute; width: 100%; left: 50%; }
|
||||
|
||||
.internals .mynode {
|
||||
border: 0.5px solid #aaa; width: 50px; height: 50px; -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); transform: rotateZ(45deg) ; margin-top: -25px; margin-left: -25px;
|
||||
opacity: 1; display: inline-block; background-color: #EEE; z-index: 9; position: absolute; outline: 5px solid #EEE;
|
||||
}
|
||||
.internals .peers { width: 0px; height: 0px; position: absolute; left: -20px; top: -20px; text-align: center; }
|
||||
.internals .peer { left: 0px; top: 0px; position: absolute; }
|
||||
.internals .peer .icon { width: 20px; height: 20px; padding: 10px; display: inline-block; text-decoration: none; left: 200px; position: absolute; color: #666; }
|
||||
.internals .peer .icon:before { content: "\25BC"; position: absolute; margin-top: 3px; margin-left: -1px; opacity: 0; -webkit-transition: all 0.3s ; -moz-transition: all 0.3s ; -o-transition: all 0.3s ; -ms-transition: all 0.3s ; transition: all 0.3s }
|
||||
.internals .peer .icon:hover:before { opacity: 1; -webkit-transition: none ; -moz-transition: none ; -o-transition: none ; -ms-transition: none ; transition: none }
|
||||
.internals .peer .line {
|
||||
width: 187px; border-top: 1px solid #CCC; position: absolute; top: 20px; left: 20px;
|
||||
-webkit-transform: rotateZ(334deg); -moz-transform: rotateZ(334deg); -o-transform: rotateZ(334deg); -ms-transform: rotateZ(334deg); transform: rotateZ(334deg) ; transform-origin: bottom left;
|
||||
}
|
||||
|
||||
|
||||
/* ---- plugins/Sidebar/media/Menu.css ---- */
|
||||
|
||||
|
||||
|
|
@ -86,9 +108,10 @@
|
|||
.fixbutton-bg:active { cursor: -webkit-grabbing; }
|
||||
|
||||
|
||||
.body-sidebar { background-color: #666 !important; }
|
||||
#inner-iframe { -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out ; transform-origin: left; }
|
||||
.body-sidebar iframe { -webkit-transform: rotateY(5deg); -moz-transform: rotateY(5deg); -o-transform: rotateY(5deg); -ms-transform: rotateY(5deg); transform: rotateY(5deg) ; opacity: 0.8; pointer-events: none; outline: 1px solid transparent } /* translateX(-200px) scale(0.95)*/
|
||||
.body-sidebar, .body-internals { background-color: #666 !important; }
|
||||
#inner-iframe { -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out ; transform-origin: left bottom; }
|
||||
.body-sidebar iframe { -webkit-transform: rotateY(5deg); -moz-transform: rotateY(5deg); -o-transform: rotateY(5deg); -ms-transform: rotateY(5deg); transform: rotateY(5deg) ; opacity: 0.8; pointer-events: none; outline: 1px solid transparent }
|
||||
.body-internals iframe { -webkit-transform: rotateX(5deg); -moz-transform: rotateX(5deg); -o-transform: rotateX(5deg); -ms-transform: rotateX(5deg); transform: rotateX(5deg) ; opacity: 0.8; pointer-events: none; outline: 1px solid transparent }
|
||||
|
||||
.sidebar .link-right { color: white; text-decoration: none; border-bottom: 1px solid #666; text-transform: uppercase; float: right; margin-right: 7px; margin-top: 1px; }
|
||||
.sidebar .link-right:hover { border-color: #CCC; }
|
||||
|
|
|
|||
|
|
@ -57,6 +57,95 @@
|
|||
}).call(this);
|
||||
|
||||
|
||||
/* ---- plugins/Sidebar/media/Internals.coffee ---- */
|
||||
|
||||
|
||||
(function() {
|
||||
var Internals,
|
||||
bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
|
||||
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
|
||||
hasProp = {}.hasOwnProperty;
|
||||
|
||||
Internals = (function(superClass) {
|
||||
extend(Internals, superClass);
|
||||
|
||||
function Internals(sidebar) {
|
||||
this.sidebar = sidebar;
|
||||
this.stopDragY = bind(this.stopDragY, this);
|
||||
this.onClosed = bind(this.onClosed, this);
|
||||
this.onOpened = bind(this.onOpened, this);
|
||||
this.open = bind(this.open, this);
|
||||
this.tag = null;
|
||||
this.opened = false;
|
||||
if (window.top.location.hash === "#internals") {
|
||||
setTimeout(((function(_this) {
|
||||
return function() {
|
||||
return _this.open();
|
||||
};
|
||||
})(this)), 10);
|
||||
}
|
||||
}
|
||||
|
||||
Internals.prototype.createHtmltag = function() {
|
||||
this.when_loaded = $.Deferred();
|
||||
if (!this.container) {
|
||||
this.container = $("<div class=\"internals-container\">\n <div class=\"internals\"><div class=\"internals-middle\">\n <div class=\"mynode\"></div>\n <div class=\"peers\">\n <div class=\"peer\"><div class=\"line\"></div><a href=\"#\" class=\"icon\">\u25BD</div></div>\n </div>\n </div></div>\n</div>");
|
||||
this.container.appendTo(document.body);
|
||||
return this.tag = this.container.find(".internals");
|
||||
}
|
||||
};
|
||||
|
||||
Internals.prototype.open = function() {
|
||||
this.createHtmltag();
|
||||
this.sidebar.fixbutton_targety = this.sidebar.page_height;
|
||||
return this.stopDragY();
|
||||
};
|
||||
|
||||
Internals.prototype.onOpened = function() {
|
||||
this.sidebar.onClosed();
|
||||
return this.log("onOpened");
|
||||
};
|
||||
|
||||
Internals.prototype.onClosed = function() {
|
||||
return $(document.body).removeClass("body-internals");
|
||||
};
|
||||
|
||||
Internals.prototype.stopDragY = function() {
|
||||
var targety;
|
||||
if (this.sidebar.fixbutton_targety === this.sidebar.fixbutton_inity) {
|
||||
targety = 0;
|
||||
this.opened = false;
|
||||
} else {
|
||||
targety = this.sidebar.fixbutton_targety - this.sidebar.fixbutton_inity;
|
||||
this.onOpened();
|
||||
this.opened = true;
|
||||
}
|
||||
if (this.tag) {
|
||||
this.tag.css("transition", "0.5s ease-out");
|
||||
this.tag.css("transform", "translateY(" + targety + "px)").one(transitionEnd, (function(_this) {
|
||||
return function() {
|
||||
_this.tag.css("transition", "");
|
||||
if (!_this.opened) {
|
||||
return _this.log("cleanup");
|
||||
}
|
||||
};
|
||||
})(this));
|
||||
}
|
||||
this.log("stopdrag", "opened:", this.opened, targety);
|
||||
if (!this.opened) {
|
||||
return this.onClosed();
|
||||
}
|
||||
};
|
||||
|
||||
return Internals;
|
||||
|
||||
})(Class);
|
||||
|
||||
window.Internals = Internals;
|
||||
|
||||
}).call(this);
|
||||
|
||||
|
||||
/* ---- plugins/Sidebar/media/Menu.coffee ---- */
|
||||
|
||||
|
||||
|
|
@ -291,11 +380,16 @@ window.initScrollable = function () {
|
|||
this.container = null;
|
||||
this.opened = false;
|
||||
this.width = 410;
|
||||
this.internals = new Internals(this);
|
||||
this.fixbutton = $(".fixbutton");
|
||||
this.fixbutton_addx = 0;
|
||||
this.fixbutton_addy = 0;
|
||||
this.fixbutton_initx = 0;
|
||||
this.fixbutton_inity = 15;
|
||||
this.fixbutton_targetx = 0;
|
||||
this.move_lock = null;
|
||||
this.page_width = $(window).width();
|
||||
this.page_height = $(window).height();
|
||||
this.frame = $("#inner-iframe");
|
||||
this.initFixbutton();
|
||||
this.dragStarted = 0;
|
||||
|
|
@ -321,12 +415,15 @@ window.initScrollable = function () {
|
|||
_this.fixbutton.off("mousemove touchmove");
|
||||
_this.dragStarted = +(new Date);
|
||||
return _this.fixbutton.one("mousemove touchmove", function(e) {
|
||||
var mousex;
|
||||
var mousex, mousey;
|
||||
mousex = e.pageX;
|
||||
mousey = e.pageY;
|
||||
if (!mousex) {
|
||||
mousex = e.originalEvent.touches[0].pageX;
|
||||
mousey = e.originalEvent.touches[0].pageY;
|
||||
}
|
||||
_this.fixbutton_addx = _this.fixbutton.offset().left - mousex;
|
||||
_this.fixbutton_addy = _this.fixbutton.offset().top - mousey;
|
||||
return _this.startDrag();
|
||||
});
|
||||
};
|
||||
|
|
@ -345,6 +442,7 @@ window.initScrollable = function () {
|
|||
|
||||
Sidebar.prototype.resized = function() {
|
||||
this.page_width = $(window).width();
|
||||
this.page_height = $(window).height();
|
||||
this.fixbutton_initx = this.page_width - 75;
|
||||
if (this.opened) {
|
||||
return this.fixbutton.css({
|
||||
|
|
@ -358,6 +456,7 @@ window.initScrollable = function () {
|
|||
};
|
||||
|
||||
Sidebar.prototype.startDrag = function() {
|
||||
this.move_lock = "x";
|
||||
this.log("startDrag");
|
||||
this.fixbutton_targetx = this.fixbutton_initx;
|
||||
this.fixbutton.addClass("dragging");
|
||||
|
|
@ -367,9 +466,12 @@ window.initScrollable = function () {
|
|||
}
|
||||
this.fixbutton.one("click", (function(_this) {
|
||||
return function(e) {
|
||||
var moved_x, moved_y;
|
||||
_this.stopDrag();
|
||||
_this.fixbutton.removeClass("dragging");
|
||||
if (Math.abs(_this.fixbutton.offset().left - _this.fixbutton_initx) > 5) {
|
||||
moved_x = Math.abs(_this.fixbutton.offset().left - _this.fixbutton_initx);
|
||||
moved_y = Math.abs(_this.fixbutton.offset().top - _this.fixbutton_inity);
|
||||
if (moved_x > 5 || moved_y > 10) {
|
||||
return e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
|
@ -385,17 +487,47 @@ window.initScrollable = function () {
|
|||
};
|
||||
|
||||
Sidebar.prototype.waitMove = function(e) {
|
||||
if (Math.abs(this.fixbutton.offset().left - this.fixbutton_targetx) > 10 && (+(new Date)) - this.dragStarted > 100) {
|
||||
this.moved();
|
||||
var moved_x, moved_y;
|
||||
document.body.style.perspective = "1000px";
|
||||
document.body.style.height = "100%";
|
||||
document.body.style.willChange = "perspective";
|
||||
document.documentElement.style.height = "100%";
|
||||
moved_x = Math.abs(parseInt(this.fixbutton[0].style.left) - this.fixbutton_targetx);
|
||||
moved_y = Math.abs(parseInt(this.fixbutton[0].style.top) - this.fixbutton_targety);
|
||||
if (moved_x > 5 && (+(new Date)) - this.dragStarted + moved_x > 50) {
|
||||
this.moved("x");
|
||||
this.fixbutton.stop().animate({
|
||||
"top": this.fixbutton_inity
|
||||
}, 1000);
|
||||
return this.fixbutton.parents().off("mousemove touchmove", this.waitMove);
|
||||
} else if (moved_y > 5 && (+(new Date)) - this.dragStarted + moved_y > 50) {
|
||||
this.moved("y");
|
||||
return this.fixbutton.parents().off("mousemove touchmove", this.waitMove);
|
||||
}
|
||||
};
|
||||
|
||||
Sidebar.prototype.moved = function() {
|
||||
Sidebar.prototype.moved = function(direction) {
|
||||
var img;
|
||||
this.log("Moved");
|
||||
this.log("Moved", direction);
|
||||
this.move_lock = direction;
|
||||
if (direction === "y") {
|
||||
$(document.body).addClass("body-internals");
|
||||
return this.internals.createHtmltag();
|
||||
}
|
||||
this.createHtmltag();
|
||||
$(document.body).css("perspective", "1000px").addClass("body-sidebar");
|
||||
$(document.body).addClass("body-sidebar");
|
||||
this.container.on("mousedown touchend touchcancel", (function(_this) {
|
||||
return function(e) {
|
||||
if (e.target !== e.currentTarget) {
|
||||
return true;
|
||||
}
|
||||
_this.log("closing");
|
||||
if ($(document.body).hasClass("body-sidebar")) {
|
||||
_this.close();
|
||||
return true;
|
||||
}
|
||||
};
|
||||
})(this));
|
||||
$(window).off("resize");
|
||||
$(window).on("resize", (function(_this) {
|
||||
return function() {
|
||||
|
|
@ -404,7 +536,6 @@ window.initScrollable = function () {
|
|||
return _this.resized();
|
||||
};
|
||||
})(this));
|
||||
$(window).trigger("resize");
|
||||
this.wrapper.setSiteInfo = (function(_this) {
|
||||
return function(site_info) {
|
||||
_this.setSiteInfo(site_info);
|
||||
|
|
@ -455,7 +586,6 @@ window.initScrollable = function () {
|
|||
morphdom(this.tag.find(".content")[0], '<div class="content">' + res + '</div>');
|
||||
return this.when_loaded.resolve();
|
||||
} else {
|
||||
this.log("Patching content");
|
||||
return morphdom(this.tag.find(".content")[0], '<div class="content">' + res + '</div>', {
|
||||
onBeforeMorphEl: function(from_el, to_el) {
|
||||
if (from_el.className === "globe" || from_el.className.indexOf("noupdate") >= 0) {
|
||||
|
|
@ -469,10 +599,12 @@ window.initScrollable = function () {
|
|||
};
|
||||
|
||||
Sidebar.prototype.animDrag = function(e) {
|
||||
var mousex, overdrag, overdrag_percent, targetx;
|
||||
var mousex, mousey, overdrag, overdrag_percent, targetx, targety;
|
||||
mousex = e.pageX;
|
||||
if (!mousex) {
|
||||
mousey = e.pageY;
|
||||
if (!mousex && e.originalEvent.touches) {
|
||||
mousex = e.originalEvent.touches[0].pageX;
|
||||
mousey = e.originalEvent.touches[0].pageY;
|
||||
}
|
||||
overdrag = this.fixbutton_initx - this.width - mousex;
|
||||
if (overdrag > 0) {
|
||||
|
|
@ -480,19 +612,38 @@ window.initScrollable = function () {
|
|||
mousex = (mousex + (this.fixbutton_initx - this.width) * overdrag_percent) / (1 + overdrag_percent);
|
||||
}
|
||||
targetx = this.fixbutton_initx - mousex - this.fixbutton_addx;
|
||||
this.fixbutton[0].style.left = (mousex + this.fixbutton_addx) + "px";
|
||||
if (this.tag) {
|
||||
this.tag[0].style.transform = "translateX(" + (0 - targetx) + "px)";
|
||||
targety = this.fixbutton_inity - mousey - this.fixbutton_addy;
|
||||
if (this.move_lock === "x") {
|
||||
targety = this.fixbutton_inity;
|
||||
} else if (this.move_lock === "y") {
|
||||
targetx = this.fixbutton_initx;
|
||||
}
|
||||
if (!this.move_lock || this.move_lock === "x") {
|
||||
this.fixbutton[0].style.left = (mousex + this.fixbutton_addx) + "px";
|
||||
if (this.tag) {
|
||||
this.tag[0].style.transform = "translateX(" + (0 - targetx) + "px)";
|
||||
}
|
||||
}
|
||||
if (!this.move_lock || this.move_lock === "y") {
|
||||
this.fixbutton[0].style.top = (mousey + this.fixbutton_addy) + "px";
|
||||
if (this.internals.tag) {
|
||||
this.internals.tag[0].style.transform = "translateY(" + (0 - targety) + "px)";
|
||||
}
|
||||
}
|
||||
if ((!this.opened && targetx > this.width / 3) || (this.opened && targetx > this.width * 0.9)) {
|
||||
return this.fixbutton_targetx = this.fixbutton_initx - this.width;
|
||||
this.fixbutton_targetx = this.fixbutton_initx - this.width;
|
||||
} else {
|
||||
return this.fixbutton_targetx = this.fixbutton_initx;
|
||||
this.fixbutton_targetx = this.fixbutton_initx;
|
||||
}
|
||||
if ((!this.internals.opened && 0 - targety > this.page_height / 10) || (this.internals.opened && 0 - targety > this.page_height * 0.95)) {
|
||||
return this.fixbutton_targety = this.page_height - this.fixbutton_inity - 50;
|
||||
} else {
|
||||
return this.fixbutton_targety = this.fixbutton_inity;
|
||||
}
|
||||
};
|
||||
|
||||
Sidebar.prototype.stopDrag = function() {
|
||||
var targetx;
|
||||
var left, top;
|
||||
this.fixbutton.parents().off("mousemove touchmove");
|
||||
this.fixbutton.off("mousemove touchmove");
|
||||
this.fixbutton.css("pointer-events", "");
|
||||
|
|
@ -502,52 +653,68 @@ window.initScrollable = function () {
|
|||
}
|
||||
this.fixbutton.removeClass("dragging");
|
||||
if (this.fixbutton_targetx !== this.fixbutton.offset().left) {
|
||||
if (this.move_lock === "y") {
|
||||
top = this.fixbutton_targety;
|
||||
left = this.fixbutton_initx;
|
||||
}
|
||||
if (this.move_lock === "x") {
|
||||
top = this.fixbutton_inity;
|
||||
left = this.fixbutton_targetx;
|
||||
}
|
||||
this.fixbutton.stop().animate({
|
||||
"left": this.fixbutton_targetx
|
||||
"left": left,
|
||||
"top": top
|
||||
}, 500, "easeOutBack", (function(_this) {
|
||||
return function() {
|
||||
if (_this.fixbutton_targetx === _this.fixbutton_initx) {
|
||||
_this.fixbutton.css("left", "auto");
|
||||
} else {
|
||||
_this.fixbutton.css("left", _this.fixbutton_targetx);
|
||||
_this.fixbutton.css("left", left);
|
||||
}
|
||||
return $(".fixbutton-bg").trigger("mouseout");
|
||||
};
|
||||
})(this));
|
||||
if (this.fixbutton_targetx === this.fixbutton_initx) {
|
||||
targetx = 0;
|
||||
this.opened = false;
|
||||
this.stopDragX();
|
||||
this.internals.stopDragY();
|
||||
}
|
||||
return this.move_lock = null;
|
||||
};
|
||||
|
||||
Sidebar.prototype.stopDragX = function() {
|
||||
var targetx;
|
||||
if (this.fixbutton_targetx === this.fixbutton_initx || this.move_lock === "y") {
|
||||
targetx = 0;
|
||||
this.opened = false;
|
||||
} else {
|
||||
targetx = this.width;
|
||||
if (this.opened) {
|
||||
this.onOpened();
|
||||
} else {
|
||||
targetx = this.width;
|
||||
if (this.opened) {
|
||||
this.onOpened();
|
||||
} else {
|
||||
this.when_loaded.done((function(_this) {
|
||||
return function() {
|
||||
return _this.onOpened();
|
||||
};
|
||||
})(this));
|
||||
}
|
||||
this.opened = true;
|
||||
}
|
||||
if (this.tag) {
|
||||
this.tag.css("transition", "0.4s ease-out");
|
||||
this.tag.css("transform", "translateX(-" + targetx + "px)").one(transitionEnd, (function(_this) {
|
||||
this.when_loaded.done((function(_this) {
|
||||
return function() {
|
||||
_this.tag.css("transition", "");
|
||||
if (!_this.opened) {
|
||||
_this.container.remove();
|
||||
_this.container = null;
|
||||
_this.tag.remove();
|
||||
return _this.tag = null;
|
||||
}
|
||||
return _this.onOpened();
|
||||
};
|
||||
})(this));
|
||||
}
|
||||
this.log("stopdrag", "opened:", this.opened);
|
||||
if (!this.opened) {
|
||||
return this.onClosed();
|
||||
}
|
||||
this.opened = true;
|
||||
}
|
||||
if (this.tag) {
|
||||
this.tag.css("transition", "0.4s ease-out");
|
||||
this.tag.css("transform", "translateX(-" + targetx + "px)").one(transitionEnd, (function(_this) {
|
||||
return function() {
|
||||
_this.tag.css("transition", "");
|
||||
if (!_this.opened) {
|
||||
_this.container.remove();
|
||||
_this.container = null;
|
||||
_this.tag.remove();
|
||||
return _this.tag = null;
|
||||
}
|
||||
};
|
||||
})(this));
|
||||
}
|
||||
this.log("stopdrag", "opened:", this.opened);
|
||||
if (!this.opened) {
|
||||
return this.onClosed();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -851,21 +1018,26 @@ window.initScrollable = function () {
|
|||
})(this));
|
||||
this.tag.find(".close").off("click touchend").on("click touchend", (function(_this) {
|
||||
return function(e) {
|
||||
_this.startDrag();
|
||||
_this.stopDrag();
|
||||
_this.close();
|
||||
return false;
|
||||
};
|
||||
})(this));
|
||||
return this.loadGlobe();
|
||||
};
|
||||
|
||||
Sidebar.prototype.close = function() {
|
||||
this.move_lock = "x";
|
||||
this.startDrag();
|
||||
return this.stopDrag();
|
||||
};
|
||||
|
||||
Sidebar.prototype.onClosed = function() {
|
||||
$(window).off("resize");
|
||||
$(window).on("resize", this.resized);
|
||||
$(document.body).css("transition", "0.6s ease-in-out").removeClass("body-sidebar").on(transitionEnd, (function(_this) {
|
||||
return function(e) {
|
||||
if (e.target === document.body) {
|
||||
$(document.body).css("height", "auto").css("perspective", "").css("transition", "").off(transitionEnd);
|
||||
if (e.target === document.body && !$(document.body).hasClass("body-sidebar") && !$(document.body).hasClass("body-internals")) {
|
||||
$(document.body).css("height", "auto").css("perspective", "").css("will-change", "").css("transition", "").off(transitionEnd);
|
||||
return _this.unloadGlobe();
|
||||
}
|
||||
};
|
||||
|
|
@ -874,7 +1046,7 @@ window.initScrollable = function () {
|
|||
};
|
||||
|
||||
Sidebar.prototype.loadGlobe = function() {
|
||||
console.log("loadGlobe", this.tag.find(".globe").hasClass("loading"));
|
||||
console.log("loadGlobe", this.tag.find(".globe")[0], this.tag.find(".globe").hasClass("loading"));
|
||||
if (this.tag.find(".globe").hasClass("loading")) {
|
||||
return setTimeout(((function(_this) {
|
||||
return function() {
|
||||
|
|
@ -895,7 +1067,7 @@ window.initScrollable = function () {
|
|||
return img.onload = (function(_this) {
|
||||
return function() {
|
||||
return _this.wrapper.ws.cmd("sidebarGetPeers", [], function(globe_data) {
|
||||
var e, ref, ref1;
|
||||
var e, ref, ref1, ref2;
|
||||
if (_this.globe) {
|
||||
_this.globe.scene.remove(_this.globe.points);
|
||||
_this.globe.addData(globe_data, {
|
||||
|
|
@ -904,6 +1076,7 @@ window.initScrollable = function () {
|
|||
animated: false
|
||||
});
|
||||
_this.globe.createPoints();
|
||||
return (ref = _this.tag) != null ? ref.find(".globe").removeClass("loading") : void 0;
|
||||
} else if (typeof DAT !== "undefined") {
|
||||
try {
|
||||
_this.globe = new DAT.Globe(_this.tag.find(".globe")[0], {
|
||||
|
|
@ -918,12 +1091,12 @@ window.initScrollable = function () {
|
|||
} catch (error) {
|
||||
e = error;
|
||||
console.log("WebGL error", e);
|
||||
if ((ref = _this.tag) != null) {
|
||||
ref.find(".globe").addClass("error").text("WebGL not supported");
|
||||
if ((ref1 = _this.tag) != null) {
|
||||
ref1.find(".globe").addClass("error").text("WebGL not supported");
|
||||
}
|
||||
}
|
||||
return (ref2 = _this.tag) != null ? ref2.find(".globe").removeClass("loading") : void 0;
|
||||
}
|
||||
return (ref1 = _this.tag) != null ? ref1.find(".globe").removeClass("loading") : void 0;
|
||||
});
|
||||
};
|
||||
})(this);
|
||||
|
|
|
|||
Loading…
Reference in a new issue