Version 0.3.2, rev351, Sidebar to display site infos an modify settings, Per-site upload/download bytes statistics, Deny different origin media requests, Allow 10sec to finish query modifications, Websocket display errors to client instead of disconnecting, Allow specify notification id to server-side messages, Track every command response time
This commit is contained in:
HelloZeroNet
parent
b1c5b7d3a3
commit
b83d6ba2ff
43 changed files with 8104 additions and 39 deletions
23
plugins/Sidebar/media/Class.coffee
Normal file
23
plugins/Sidebar/media/Class.coffee
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
class Class
|
||||
trace: true
|
||||
|
||||
log: (args...) ->
|
||||
return unless @trace
|
||||
return if typeof console is 'undefined'
|
||||
args.unshift("[#{@.constructor.name}]")
|
||||
console.log(args...)
|
||||
@
|
||||
|
||||
logStart: (name, args...) ->
|
||||
return unless @trace
|
||||
@logtimers or= {}
|
||||
@logtimers[name] = +(new Date)
|
||||
@log "#{name}", args..., "(started)" if args.length > 0
|
||||
@
|
||||
|
||||
logEnd: (name, args...) ->
|
||||
ms = +(new Date)-@logtimers[name]
|
||||
@log "#{name}", args..., "(Done in #{ms}ms)"
|
||||
@
|
||||
|
||||
window.Class = Class
|
||||
89
plugins/Sidebar/media/Scrollable.js
Normal file
89
plugins/Sidebar/media/Scrollable.js
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
/* via http://jsfiddle.net/elGrecode/00dgurnn/ */
|
||||
|
||||
window.initScrollable = function () {
|
||||
|
||||
var scrollContainer = document.querySelector('.scrollable'),
|
||||
scrollContentWrapper = document.querySelector('.scrollable .content-wrapper'),
|
||||
scrollContent = document.querySelector('.scrollable .content'),
|
||||
contentPosition = 0,
|
||||
scrollerBeingDragged = false,
|
||||
scroller,
|
||||
topPosition,
|
||||
scrollerHeight;
|
||||
|
||||
function calculateScrollerHeight() {
|
||||
// *Calculation of how tall scroller should be
|
||||
var visibleRatio = scrollContainer.offsetHeight / scrollContentWrapper.scrollHeight;
|
||||
if (visibleRatio == 1)
|
||||
scroller.style.display = "none"
|
||||
else
|
||||
scroller.style.display = "block"
|
||||
return visibleRatio * scrollContainer.offsetHeight;
|
||||
}
|
||||
|
||||
function moveScroller(evt) {
|
||||
// Move Scroll bar to top offset
|
||||
var scrollPercentage = evt.target.scrollTop / scrollContentWrapper.scrollHeight;
|
||||
topPosition = scrollPercentage * (scrollContainer.offsetHeight - 5); // 5px arbitrary offset so scroll bar doesn't move too far beyond content wrapper bounding box
|
||||
scroller.style.top = topPosition + 'px';
|
||||
}
|
||||
|
||||
function startDrag(evt) {
|
||||
normalizedPosition = evt.pageY;
|
||||
contentPosition = scrollContentWrapper.scrollTop;
|
||||
scrollerBeingDragged = true;
|
||||
window.addEventListener('mousemove', scrollBarScroll)
|
||||
}
|
||||
|
||||
function stopDrag(evt) {
|
||||
scrollerBeingDragged = false;
|
||||
window.removeEventListener('mousemove', scrollBarScroll)
|
||||
}
|
||||
|
||||
function scrollBarScroll(evt) {
|
||||
if (scrollerBeingDragged === true) {
|
||||
var mouseDifferential = evt.pageY - normalizedPosition;
|
||||
var scrollEquivalent = mouseDifferential * (scrollContentWrapper.scrollHeight / scrollContainer.offsetHeight);
|
||||
scrollContentWrapper.scrollTop = contentPosition + scrollEquivalent;
|
||||
}
|
||||
}
|
||||
|
||||
function updateHeight() {
|
||||
scrollerHeight = calculateScrollerHeight()-10;
|
||||
scroller.style.height = scrollerHeight + 'px';
|
||||
}
|
||||
|
||||
function createScroller() {
|
||||
// *Creates scroller element and appends to '.scrollable' div
|
||||
// create scroller element
|
||||
scroller = document.createElement("div");
|
||||
scroller.className = 'scroller';
|
||||
|
||||
// determine how big scroller should be based on content
|
||||
scrollerHeight = calculateScrollerHeight()-10;
|
||||
|
||||
if (scrollerHeight / scrollContainer.offsetHeight < 1){
|
||||
// *If there is a need to have scroll bar based on content size
|
||||
scroller.style.height = scrollerHeight + 'px';
|
||||
|
||||
// append scroller to scrollContainer div
|
||||
scrollContainer.appendChild(scroller);
|
||||
|
||||
// show scroll path divot
|
||||
scrollContainer.className += ' showScroll';
|
||||
|
||||
// attach related draggable listeners
|
||||
scroller.addEventListener('mousedown', startDrag);
|
||||
window.addEventListener('mouseup', stopDrag);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
createScroller();
|
||||
|
||||
|
||||
// *** Listeners ***
|
||||
scrollContentWrapper.addEventListener('scroll', moveScroller);
|
||||
|
||||
return updateHeight
|
||||
};
|
||||
44
plugins/Sidebar/media/Scrollbable.css
Normal file
44
plugins/Sidebar/media/Scrollbable.css
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
.scrollable {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scrollable.showScroll::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 5%;
|
||||
right: 7px;
|
||||
height: 90%;
|
||||
width: 3px;
|
||||
background: rgba(224, 224, 255, .3);
|
||||
}
|
||||
|
||||
.scrollable .content-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-right: 50%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.scroller {
|
||||
margin-top: 5px;
|
||||
z-index: 5;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
border-radius: 5px;
|
||||
background: #151515;
|
||||
top: 0px;
|
||||
left: 395px;
|
||||
-webkit-transition: top .08s;
|
||||
-moz-transition: top .08s;
|
||||
-ms-transition: top .08s;
|
||||
-o-transition: top .08s;
|
||||
transition: top .08s;
|
||||
}
|
||||
.content {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
318
plugins/Sidebar/media/Sidebar.coffee
Normal file
318
plugins/Sidebar/media/Sidebar.coffee
Normal file
|
|
@ -0,0 +1,318 @@
|
|||
class Sidebar extends Class
|
||||
constructor: ->
|
||||
@tag = null
|
||||
@container = null
|
||||
@opened = false
|
||||
@width = 410
|
||||
@fixbutton = $(".fixbutton")
|
||||
@fixbutton_addx = 0
|
||||
@fixbutton_initx = 0
|
||||
@fixbutton_targetx = 0
|
||||
@frame = $("#inner-iframe")
|
||||
@initFixbutton()
|
||||
@dragStarted = 0
|
||||
@globe = null
|
||||
|
||||
@original_set_site_info = wrapper.setSiteInfo # We going to override this, save the original
|
||||
|
||||
# Start in opened state for debugging
|
||||
if false
|
||||
@startDrag()
|
||||
@moved()
|
||||
@fixbutton_targetx = @fixbutton_initx - @width
|
||||
@stopDrag()
|
||||
|
||||
|
||||
initFixbutton: ->
|
||||
# Detect dragging
|
||||
@fixbutton.on "mousedown", (e) =>
|
||||
e.preventDefault()
|
||||
|
||||
# Disable previous listeners
|
||||
@fixbutton.off "click"
|
||||
@fixbutton.off "mousemove"
|
||||
|
||||
# Make sure its not a click
|
||||
@dragStarted = (+ new Date)
|
||||
@fixbutton.one "mousemove", (e) =>
|
||||
@fixbutton_addx = @fixbutton.offset().left-e.pageX
|
||||
@startDrag()
|
||||
@fixbutton.parent().on "click", (e) =>
|
||||
@stopDrag()
|
||||
@fixbutton_initx = @fixbutton.offset().left # Initial x position
|
||||
|
||||
|
||||
# Start dragging the fixbutton
|
||||
startDrag: ->
|
||||
@log "startDrag"
|
||||
@fixbutton_targetx = @fixbutton_initx # Fallback x position
|
||||
|
||||
@fixbutton.addClass("dragging")
|
||||
|
||||
# Fullscreen drag bg to capture mouse events over iframe
|
||||
$("<div class='drag-bg'></div>").appendTo(document.body)
|
||||
|
||||
# IE position wrap fix
|
||||
if navigator.userAgent.indexOf('MSIE') != -1 or navigator.appVersion.indexOf('Trident/') > 0
|
||||
@fixbutton.css("pointer-events", "none")
|
||||
|
||||
# Don't go to homepage
|
||||
@fixbutton.one "click", (e) =>
|
||||
@stopDrag()
|
||||
@fixbutton.removeClass("dragging")
|
||||
if Math.abs(@fixbutton.offset().left - @fixbutton_initx) > 5
|
||||
# If moved more than some pixel the button then don't go to homepage
|
||||
e.preventDefault()
|
||||
|
||||
# Animate drag
|
||||
@fixbutton.parents().on "mousemove", @animDrag
|
||||
@fixbutton.parents().on "mousemove" ,@waitMove
|
||||
|
||||
# Stop dragging listener
|
||||
@fixbutton.parents().on "mouseup", (e) =>
|
||||
e.preventDefault()
|
||||
@stopDrag()
|
||||
|
||||
|
||||
# Wait for moving the fixbutton
|
||||
waitMove: (e) =>
|
||||
if Math.abs(@fixbutton.offset().left - @fixbutton_targetx) > 10 and (+ new Date)-@dragStarted > 100
|
||||
@moved()
|
||||
@fixbutton.parents().off "mousemove" ,@waitMove
|
||||
|
||||
moved: ->
|
||||
@log "Moved"
|
||||
@createHtmltag()
|
||||
$(document.body).css("perspective", "1000px").addClass("body-sidebar")
|
||||
$(window).off "resize"
|
||||
$(window).on "resize", =>
|
||||
$(document.body).css "height", $(window).height()
|
||||
@scrollable()
|
||||
$(window).trigger "resize"
|
||||
|
||||
# Override setsiteinfo to catch changes
|
||||
wrapper.setSiteInfo = (site_info) =>
|
||||
@setSiteInfo(site_info)
|
||||
@original_set_site_info.apply(wrapper, arguments)
|
||||
|
||||
setSiteInfo: (site_info) ->
|
||||
@updateHtmlTag()
|
||||
@displayGlobe()
|
||||
|
||||
|
||||
# Create the sidebar html tag
|
||||
createHtmltag: ->
|
||||
if not @container
|
||||
@container = $("""
|
||||
<div class="sidebar-container"><div class="sidebar scrollable"><div class="content-wrapper"><div class="content">
|
||||
</div></div></div></div>
|
||||
""")
|
||||
@container.appendTo(document.body)
|
||||
@tag = @container.find(".sidebar")
|
||||
@updateHtmlTag()
|
||||
@scrollable = window.initScrollable()
|
||||
|
||||
|
||||
updateHtmlTag: ->
|
||||
wrapper.ws.cmd "sidebarGetHtmlTag", {}, (res) =>
|
||||
if @tag.find(".content").children().length == 0 # First update
|
||||
@log "Creating content"
|
||||
morphdom(@tag.find(".content")[0], '<div class="content">'+res+'</div>')
|
||||
@scrollable()
|
||||
|
||||
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"
|
||||
return false
|
||||
else
|
||||
return true
|
||||
}
|
||||
|
||||
|
||||
animDrag: (e) =>
|
||||
mousex = e.pageX
|
||||
|
||||
overdrag = @fixbutton_initx-@width-mousex
|
||||
if overdrag > 0 # Overdragged
|
||||
overdrag_percent = 1+overdrag/300
|
||||
mousex = (e.pageX + (@fixbutton_initx-@width)*overdrag_percent)/(1+overdrag_percent)
|
||||
targetx = @fixbutton_initx-mousex-@fixbutton_addx
|
||||
|
||||
@fixbutton.offset
|
||||
left: mousex+@fixbutton_addx
|
||||
|
||||
if @tag
|
||||
@tag.css("transform", "translateX(#{0-targetx}px)")
|
||||
|
||||
# Check if opened
|
||||
if (not @opened and targetx > @width/3) or (@opened and targetx > @width*0.9)
|
||||
@fixbutton_targetx = @fixbutton_initx - @width # Make it opened
|
||||
else
|
||||
@fixbutton_targetx = @fixbutton_initx
|
||||
|
||||
|
||||
# Stop dragging the fixbutton
|
||||
stopDrag: ->
|
||||
@fixbutton.parents().off "mousemove"
|
||||
@fixbutton.off "mousemove"
|
||||
@fixbutton.css("pointer-events", "")
|
||||
$(".drag-bg").remove()
|
||||
if not @fixbutton.hasClass("dragging")
|
||||
return
|
||||
@fixbutton.removeClass("dragging")
|
||||
|
||||
# Move back to initial position
|
||||
if @fixbutton_targetx != @fixbutton.offset().left
|
||||
# Animate fixbutton
|
||||
@fixbutton.stop().animate {"left": @fixbutton_targetx}, 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-bg").trigger "mouseout" # Switch fixbutton back to normal status
|
||||
|
||||
# Animate sidebar and iframe
|
||||
if @fixbutton_targetx == @fixbutton_initx
|
||||
# Closed
|
||||
targetx = 0
|
||||
@opened = false
|
||||
else
|
||||
# Opened
|
||||
targetx = @width
|
||||
if not @opened
|
||||
@onOpened()
|
||||
@opened = true
|
||||
|
||||
# Revent sidebar transitions
|
||||
@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()
|
||||
|
||||
|
||||
onOpened: ->
|
||||
@log "Opened"
|
||||
@scrollable()
|
||||
|
||||
# Re-calculate height when site admin opened or closed
|
||||
@tag.find("#checkbox-owned").off("click").on "click", =>
|
||||
setTimeout (=>
|
||||
@scrollable()
|
||||
), 300
|
||||
|
||||
# Site limit button
|
||||
@tag.find("#button-sitelimit").on "click", =>
|
||||
wrapper.ws.cmd "siteSetLimit", $("#input-sitelimit").val(), =>
|
||||
wrapper.notifications.add "done-sitelimit", "done", "Site storage limit modified!", 5000
|
||||
@updateHtmlTag()
|
||||
return false
|
||||
|
||||
# Change identity button
|
||||
@tag.find("#button-identity").on "click", =>
|
||||
wrapper.ws.cmd "certSelect"
|
||||
return false
|
||||
|
||||
# Owned checkbox
|
||||
@tag.find("#checkbox-owned").on "click", =>
|
||||
wrapper.ws.cmd "siteSetOwned", [@tag.find("#checkbox-owned").is(":checked")]
|
||||
|
||||
# Save settings
|
||||
@tag.find("#button-settings").on "click", =>
|
||||
wrapper.ws.cmd "fileGet", "content.json", (res) =>
|
||||
data = JSON.parse(res)
|
||||
data["title"] = $("#settings-title").val()
|
||||
data["description"] = $("#settings-description").val()
|
||||
json_raw = unescape(encodeURIComponent(JSON.stringify(data, undefined, '\t')))
|
||||
wrapper.ws.cmd "fileWrite", ["content.json", btoa(json_raw)], (res) =>
|
||||
if res != "ok" # fileWrite failed
|
||||
wrapper.notifications.add "file-write", "error", "File write error: #{res}"
|
||||
else
|
||||
wrapper.notifications.add "file-write", "done", "Site settings saved!", 5000
|
||||
@updateHtmlTag()
|
||||
return false
|
||||
|
||||
# Sign content.json
|
||||
@tag.find("#button-sign").on "click", =>
|
||||
inner_path = @tag.find("#select-contents").val()
|
||||
|
||||
if wrapper.site_info.privatekey
|
||||
# Privatekey stored in users.json
|
||||
wrapper.ws.cmd "siteSign", ["stored", inner_path], (res) =>
|
||||
wrapper.notifications.add "sign", "done", "#{inner_path} Signed!", 5000
|
||||
|
||||
else
|
||||
# Ask the user for privatekey
|
||||
wrapper.displayPrompt "Enter your private key:", "password", "Sign", (privatekey) => # Prompt the private key
|
||||
wrapper.ws.cmd "siteSign", [privatekey, inner_path], (res) =>
|
||||
if res == "ok"
|
||||
wrapper.notifications.add "sign", "done", "#{inner_path} Signed!", 5000
|
||||
|
||||
return false
|
||||
|
||||
# Publish content.json
|
||||
@tag.find("#button-publish").on "click", =>
|
||||
inner_path = @tag.find("#select-contents").val()
|
||||
@tag.find("#button-publish").addClass "loading"
|
||||
wrapper.ws.cmd "sitePublish", {"inner_path": inner_path, "sign": false}, =>
|
||||
@tag.find("#button-publish").removeClass "loading"
|
||||
|
||||
@loadGlobe()
|
||||
|
||||
|
||||
onClosed: ->
|
||||
$(window).off "resize"
|
||||
$(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
|
||||
@unloadGlobe()
|
||||
|
||||
# We dont need site info anymore
|
||||
wrapper.setSiteInfo = @original_set_site_info
|
||||
|
||||
|
||||
loadGlobe: =>
|
||||
if @tag.find(".globe").hasClass("loading")
|
||||
setTimeout (=>
|
||||
if typeof(DAT) == "undefined" # Globe script not loaded, do it first
|
||||
$.getScript("/uimedia/globe/all.js", @displayGlobe)
|
||||
else
|
||||
@displayGlobe()
|
||||
), 600
|
||||
|
||||
|
||||
displayGlobe: =>
|
||||
wrapper.ws.cmd "sidebarGetPeers", [], (globe_data) =>
|
||||
if @globe
|
||||
@globe.scene.remove(@globe.points)
|
||||
@globe.addData( globe_data, {format: 'magnitude', name: "hello", animated: false} )
|
||||
@globe.createPoints()
|
||||
else
|
||||
@globe = new DAT.Globe( @tag.find(".globe")[0], {"imgDir": "/uimedia/globe/"} )
|
||||
@globe.addData( globe_data, {format: 'magnitude', name: "hello"} )
|
||||
@globe.createPoints()
|
||||
@globe.animate()
|
||||
@tag.find(".globe").removeClass("loading")
|
||||
|
||||
|
||||
unloadGlobe: =>
|
||||
if not @globe
|
||||
return false
|
||||
@globe.unload()
|
||||
@globe = null
|
||||
|
||||
|
||||
window.sidebar = new Sidebar()
|
||||
window.transitionEnd = 'transitionend webkitTransitionEnd oTransitionEnd otransitionend'
|
||||
96
plugins/Sidebar/media/Sidebar.css
Normal file
96
plugins/Sidebar/media/Sidebar.css
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
.drag-bg { width: 100%; height: 100%; position: absolute; }
|
||||
.fixbutton.dragging { cursor: -webkit-grabbing; }
|
||||
.fixbutton-bg:active { cursor: -webkit-grabbing; }
|
||||
|
||||
|
||||
.body-sidebar { background-color: #666 !important; }
|
||||
#inner-iframe { transition: 0.3s ease-in-out; transform-origin: left; backface-visibility: hidden; outline: 1px solid transparent }
|
||||
.body-sidebar iframe { transform: rotateY(5deg); opacity: 0.8; pointer-events: none } /* translateX(-200px) scale(0.95)*/
|
||||
|
||||
/* SIDEBAR */
|
||||
|
||||
.sidebar-container { width: 100%; height: 100%; overflow: hidden; position: absolute; }
|
||||
.sidebar { background-color: #212121; position: absolute; right: -1200px; height: 100%; width: 1200px; } /*box-shadow: inset 0px 0px 10px #000*/
|
||||
.sidebar .content { margin: 30px; font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue"; color: white; width: 375px; height: 300px; font-weight: 200 }
|
||||
.sidebar h1, .sidebar h2 { font-weight: lighter; }
|
||||
.sidebar .button { margin: 0px; display: inline-block; }
|
||||
|
||||
|
||||
/* FIELDS */
|
||||
|
||||
.sidebar .fields { padding: 0px; list-style-type: none; width: 355px; }
|
||||
.sidebar .fields > li, .sidebar .fields .settings-owned > li { margin-bottom: 30px }
|
||||
.sidebar .fields > li:after, .sidebar .fields .settings-owned > li:after { clear: both; content: ''; display: block }
|
||||
.sidebar .fields label { font-family: Consolas, monospace; text-transform: uppercase; font-size: 13px; color: #ACACAC; display: block; margin-bottom: 10px; }
|
||||
.sidebar .fields label small { font-weight: normal; color: white; text-transform: none; }
|
||||
.sidebar .fields .text { background-color: black; border: 0px; padding: 10px; color: white; border-radius: 3px; width: 250px; font-family: Consolas, monospace; }
|
||||
.sidebar .fields .text.long { width: 330px; font-size: 72%; }
|
||||
.sidebar .fields .disabled { color: #AAA; background-color: #3B3B3B; }
|
||||
.sidebar .fields .text-num { width: 30px; text-align: right; padding-right: 30px; }
|
||||
.sidebar .fields .text-post { color: white; font-family: Consolas, monospace; display: inline-block; font-size: 13px; margin-left: -25px; width: 25px; }
|
||||
|
||||
/* Select */
|
||||
.sidebar .fields select {
|
||||
width: 225px; background-color: #3B3B3B; color: white; font-family: Consolas, monospace; appearance: none;
|
||||
padding: 5px; padding-right: 25px; border: 0px; border-radius: 3px; height: 35px; vertical-align: 1px; box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
|
||||
}
|
||||
.sidebar .fields .select-down { margin-left: -39px; width: 34px; display: inline-block; transform: rotateZ(90deg); height: 35px; vertical-align: -8px; pointer-events: none; font-weight: bold }
|
||||
|
||||
/* Checkbox */
|
||||
.sidebar .fields .checkbox { width: 50px; height: 24px; position: relative; z-index: 999; opacity: 0; }
|
||||
.sidebar .fields .checkbox-skin { background-color: #CCC; width: 50px; height: 24px; border-radius: 15px; transition: all 0.3s ease-in-out; display: inline-block; margin-left: -59px; }
|
||||
.sidebar .fields .checkbox-skin:before {
|
||||
content: ""; position: relative; width: 20px; background-color: white; height: 20px; display: block; border-radius: 100%; margin-top: 2px; margin-left: 2px;
|
||||
transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||
}
|
||||
.sidebar .fields .checkbox:checked ~ .checkbox-skin:before { margin-left: 27px; }
|
||||
.sidebar .fields .checkbox:checked ~ .checkbox-skin { background-color: #2ECC71; }
|
||||
|
||||
/* Fake input */
|
||||
.sidebar .input { font-size: 13px; width: 250px; display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: top }
|
||||
|
||||
/* GRAPH */
|
||||
|
||||
.graph { padding: 0px; list-style-type: none; width: 351px; background-color: black; height: 10px; border-radius: 8px; overflow: hidden; position: relative;}
|
||||
.graph li { height: 100%; position: absolute; }
|
||||
.graph-stacked li { position: static; float: left; }
|
||||
|
||||
.graph-legend { padding: 0px; list-style-type: none; margin-top: 13px; font-family: Consolas, "Andale Mono", monospace; font-size: 13px; text-transform: capitalize; }
|
||||
.sidebar .graph-legend li { margin: 0px; margin-top: 5px; margin-left: 0px; width: 160px; float: left; position: relative; }
|
||||
.sidebar .graph-legend li:nth-child(odd) { margin-right: 29px }
|
||||
.graph-legend span { position: absolute; }
|
||||
.graph-legend b { text-align: right; display: inline-block; width: 50px; float: right; font-weight: normal; }
|
||||
.graph-legend li:before { content: '\2022'; font-size: 23px; line-height: 0px; vertical-align: -3px; margin-right: 5px; }
|
||||
|
||||
/* COLORS */
|
||||
|
||||
.back-green { background-color: #2ECC71 }
|
||||
.color-green:before { color: #2ECC71 }
|
||||
.back-blue { background-color: #3BAFDA }
|
||||
.color-blue:before { color: #3BAFDA }
|
||||
.back-darkblue { background-color: #2196F3 }
|
||||
.color-darkblue:before { color: #2196F3 }
|
||||
.back-purple { background-color: #B10DC9 }
|
||||
.color-purple:before { color: #B10DC9 }
|
||||
.back-yellow { background-color: #FFDC00 }
|
||||
.color-yellow:before { color: #FFDC00 }
|
||||
.back-orange { background-color: #FF9800 }
|
||||
.color-orange:before { color: #FF9800 }
|
||||
.back-gray { background-color: #ECF0F1 }
|
||||
.color-gray:before { color: #ECF0F1 }
|
||||
.back-black { background-color: #34495E }
|
||||
.color-black:before { color: #34495E }
|
||||
.back-white { background-color: #EEE }
|
||||
.color-white:before { color: #EEE }
|
||||
|
||||
|
||||
/* Settings owned */
|
||||
|
||||
.owned-title { float: left }
|
||||
#checkbox-owned { margin-bottom: 25px; margin-top: 26px; margin-left: 11px; }
|
||||
#checkbox-owned ~ .settings-owned { opacity: 0; max-height: 0px; transition: all 0.3s linear; overflow: hidden }
|
||||
#checkbox-owned:checked ~ .settings-owned { opacity: 1; max-height: 400px }
|
||||
|
||||
/* Globe */
|
||||
.globe { width: 360px; height: 360px }
|
||||
.globe.loading { background: url(/uimedia/img/loading-circle.gif) center center no-repeat }
|
||||
150
plugins/Sidebar/media/all.css
Normal file
150
plugins/Sidebar/media/all.css
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
|
||||
|
||||
/* ---- plugins/Sidebar/media/Scrollbable.css ---- */
|
||||
|
||||
|
||||
.scrollable {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scrollable.showScroll::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 5%;
|
||||
right: 7px;
|
||||
height: 90%;
|
||||
width: 3px;
|
||||
background: rgba(224, 224, 255, .3);
|
||||
}
|
||||
|
||||
.scrollable .content-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-right: 50%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.scroller {
|
||||
margin-top: 5px;
|
||||
z-index: 5;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
-webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px ;
|
||||
background: #151515;
|
||||
top: 0px;
|
||||
left: 395px;
|
||||
-webkit-transition: top .08s;
|
||||
-moz-transition: top .08s;
|
||||
-ms-transition: top .08s;
|
||||
-o-transition: top .08s;
|
||||
-webkit-transition: top .08s; -moz-transition: top .08s; -o-transition: top .08s; -ms-transition: top .08s; transition: top .08s ;
|
||||
}
|
||||
.content {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
/* ---- plugins/Sidebar/media/Sidebar.css ---- */
|
||||
|
||||
|
||||
.drag-bg { width: 100%; height: 100%; position: absolute; }
|
||||
.fixbutton.dragging { cursor: -webkit-grabbing; }
|
||||
.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; backface-visibility: hidden; outline: 1px solid transparent }
|
||||
.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 } /* translateX(-200px) scale(0.95)*/
|
||||
|
||||
/* SIDEBAR */
|
||||
|
||||
.sidebar-container { width: 100%; height: 100%; overflow: hidden; position: absolute; }
|
||||
.sidebar { background-color: #212121; position: absolute; right: -1200px; height: 100%; width: 1200px; } /*box-shadow: inset 0px 0px 10px #000*/
|
||||
.sidebar .content { margin: 30px; font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue"; color: white; width: 375px; height: 300px; font-weight: 200 }
|
||||
.sidebar h1, .sidebar h2 { font-weight: lighter; }
|
||||
.sidebar .button { margin: 0px; display: inline-block; }
|
||||
|
||||
|
||||
/* FIELDS */
|
||||
|
||||
.sidebar .fields { padding: 0px; list-style-type: none; width: 355px; }
|
||||
.sidebar .fields > li, .sidebar .fields .settings-owned > li { margin-bottom: 30px }
|
||||
.sidebar .fields > li:after, .sidebar .fields .settings-owned > li:after { clear: both; content: ''; display: block }
|
||||
.sidebar .fields label { font-family: Consolas, monospace; text-transform: uppercase; font-size: 13px; color: #ACACAC; display: block; margin-bottom: 10px; }
|
||||
.sidebar .fields label small { font-weight: normal; color: white; text-transform: none; }
|
||||
.sidebar .fields .text { background-color: black; border: 0px; padding: 10px; color: white; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px ; width: 250px; font-family: Consolas, monospace; }
|
||||
.sidebar .fields .text.long { width: 330px; font-size: 72%; }
|
||||
.sidebar .fields .disabled { color: #AAA; background-color: #3B3B3B; }
|
||||
.sidebar .fields .text-num { width: 30px; text-align: right; padding-right: 30px; }
|
||||
.sidebar .fields .text-post { color: white; font-family: Consolas, monospace; display: inline-block; font-size: 13px; margin-left: -25px; width: 25px; }
|
||||
|
||||
/* Select */
|
||||
.sidebar .fields select {
|
||||
width: 225px; background-color: #3B3B3B; color: white; font-family: Consolas, monospace; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none ;
|
||||
padding: 5px; padding-right: 25px; border: 0px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px ; height: 35px; vertical-align: 1px; -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.5); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.5); -o-box-shadow: 0px 1px 2px rgba(0,0,0,0.5); -ms-box-shadow: 0px 1px 2px rgba(0,0,0,0.5); box-shadow: 0px 1px 2px rgba(0,0,0,0.5) ;
|
||||
}
|
||||
.sidebar .fields .select-down { margin-left: -39px; width: 34px; display: inline-block; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); transform: rotateZ(90deg) ; height: 35px; vertical-align: -8px; pointer-events: none; font-weight: bold }
|
||||
|
||||
/* Checkbox */
|
||||
.sidebar .fields .checkbox { width: 50px; height: 24px; position: relative; z-index: 999; opacity: 0; }
|
||||
.sidebar .fields .checkbox-skin { background-color: #CCC; width: 50px; height: 24px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; -ms-border-radius: 15px; border-radius: 15px ; -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 ; display: inline-block; margin-left: -59px; }
|
||||
.sidebar .fields .checkbox-skin:before {
|
||||
content: ""; position: relative; width: 20px; background-color: white; height: 20px; display: block; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100% ; margin-top: 2px; margin-left: 2px;
|
||||
-webkit-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); -moz-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); -ms-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) ;
|
||||
}
|
||||
.sidebar .fields .checkbox:checked ~ .checkbox-skin:before { margin-left: 27px; }
|
||||
.sidebar .fields .checkbox:checked ~ .checkbox-skin { background-color: #2ECC71; }
|
||||
|
||||
/* Fake input */
|
||||
.sidebar .input { font-size: 13px; width: 250px; display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: top }
|
||||
|
||||
/* GRAPH */
|
||||
|
||||
.graph { padding: 0px; list-style-type: none; width: 351px; background-color: black; height: 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px ; overflow: hidden; position: relative;}
|
||||
.graph li { height: 100%; position: absolute; }
|
||||
.graph-stacked li { position: static; float: left; }
|
||||
|
||||
.graph-legend { padding: 0px; list-style-type: none; margin-top: 13px; font-family: Consolas, "Andale Mono", monospace; font-size: 13px; text-transform: capitalize; }
|
||||
.sidebar .graph-legend li { margin: 0px; margin-top: 5px; margin-left: 0px; width: 160px; float: left; position: relative; }
|
||||
.sidebar .graph-legend li:nth-child(odd) { margin-right: 29px }
|
||||
.graph-legend span { position: absolute; }
|
||||
.graph-legend b { text-align: right; display: inline-block; width: 50px; float: right; font-weight: normal; }
|
||||
.graph-legend li:before { content: '\2022'; font-size: 23px; line-height: 0px; vertical-align: -3px; margin-right: 5px; }
|
||||
|
||||
/* COLORS */
|
||||
|
||||
.back-green { background-color: #2ECC71 }
|
||||
.color-green:before { color: #2ECC71 }
|
||||
.back-blue { background-color: #3BAFDA }
|
||||
.color-blue:before { color: #3BAFDA }
|
||||
.back-darkblue { background-color: #2196F3 }
|
||||
.color-darkblue:before { color: #2196F3 }
|
||||
.back-purple { background-color: #B10DC9 }
|
||||
.color-purple:before { color: #B10DC9 }
|
||||
.back-yellow { background-color: #FFDC00 }
|
||||
.color-yellow:before { color: #FFDC00 }
|
||||
.back-orange { background-color: #FF9800 }
|
||||
.color-orange:before { color: #FF9800 }
|
||||
.back-gray { background-color: #ECF0F1 }
|
||||
.color-gray:before { color: #ECF0F1 }
|
||||
.back-black { background-color: #34495E }
|
||||
.color-black:before { color: #34495E }
|
||||
.back-white { background-color: #EEE }
|
||||
.color-white:before { color: #EEE }
|
||||
|
||||
|
||||
/* Settings owned */
|
||||
|
||||
.owned-title { float: left }
|
||||
#checkbox-owned { margin-bottom: 25px; margin-top: 26px; margin-left: 11px; }
|
||||
#checkbox-owned ~ .settings-owned { opacity: 0; max-height: 0px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear ; overflow: hidden }
|
||||
#checkbox-owned:checked ~ .settings-owned { opacity: 1; max-height: 400px }
|
||||
|
||||
/* Globe */
|
||||
.globe { width: 360px; height: 360px }
|
||||
.globe.loading { background: url(/uimedia/img/loading-circle.gif) center center no-repeat }
|
||||
882
plugins/Sidebar/media/all.js
Normal file
882
plugins/Sidebar/media/all.js
Normal file
|
|
@ -0,0 +1,882 @@
|
|||
|
||||
|
||||
/* ---- plugins/Sidebar/media/Class.coffee ---- */
|
||||
|
||||
|
||||
(function() {
|
||||
var Class,
|
||||
__slice = [].slice;
|
||||
|
||||
Class = (function() {
|
||||
function Class() {}
|
||||
|
||||
Class.prototype.trace = true;
|
||||
|
||||
Class.prototype.log = function() {
|
||||
var args;
|
||||
args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
|
||||
if (!this.trace) {
|
||||
return;
|
||||
}
|
||||
if (typeof console === 'undefined') {
|
||||
return;
|
||||
}
|
||||
args.unshift("[" + this.constructor.name + "]");
|
||||
console.log.apply(console, args);
|
||||
return this;
|
||||
};
|
||||
|
||||
Class.prototype.logStart = function() {
|
||||
var args, name;
|
||||
name = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
|
||||
if (!this.trace) {
|
||||
return;
|
||||
}
|
||||
this.logtimers || (this.logtimers = {});
|
||||
this.logtimers[name] = +(new Date);
|
||||
if (args.length > 0) {
|
||||
this.log.apply(this, ["" + name].concat(__slice.call(args), ["(started)"]));
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
Class.prototype.logEnd = function() {
|
||||
var args, ms, name;
|
||||
name = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
|
||||
ms = +(new Date) - this.logtimers[name];
|
||||
this.log.apply(this, ["" + name].concat(__slice.call(args), ["(Done in " + ms + "ms)"]));
|
||||
return this;
|
||||
};
|
||||
|
||||
return Class;
|
||||
|
||||
})();
|
||||
|
||||
window.Class = Class;
|
||||
|
||||
}).call(this);
|
||||
|
||||
|
||||
/* ---- plugins/Sidebar/media/Scrollable.js ---- */
|
||||
|
||||
|
||||
/* via http://jsfiddle.net/elGrecode/00dgurnn/ */
|
||||
|
||||
window.initScrollable = function () {
|
||||
|
||||
var scrollContainer = document.querySelector('.scrollable'),
|
||||
scrollContentWrapper = document.querySelector('.scrollable .content-wrapper'),
|
||||
scrollContent = document.querySelector('.scrollable .content'),
|
||||
contentPosition = 0,
|
||||
scrollerBeingDragged = false,
|
||||
scroller,
|
||||
topPosition,
|
||||
scrollerHeight;
|
||||
|
||||
function calculateScrollerHeight() {
|
||||
// *Calculation of how tall scroller should be
|
||||
var visibleRatio = scrollContainer.offsetHeight / scrollContentWrapper.scrollHeight;
|
||||
if (visibleRatio == 1)
|
||||
scroller.style.display = "none"
|
||||
else
|
||||
scroller.style.display = "block"
|
||||
return visibleRatio * scrollContainer.offsetHeight;
|
||||
}
|
||||
|
||||
function moveScroller(evt) {
|
||||
// Move Scroll bar to top offset
|
||||
var scrollPercentage = evt.target.scrollTop / scrollContentWrapper.scrollHeight;
|
||||
topPosition = scrollPercentage * (scrollContainer.offsetHeight - 5); // 5px arbitrary offset so scroll bar doesn't move too far beyond content wrapper bounding box
|
||||
scroller.style.top = topPosition + 'px';
|
||||
}
|
||||
|
||||
function startDrag(evt) {
|
||||
normalizedPosition = evt.pageY;
|
||||
contentPosition = scrollContentWrapper.scrollTop;
|
||||
scrollerBeingDragged = true;
|
||||
window.addEventListener('mousemove', scrollBarScroll)
|
||||
}
|
||||
|
||||
function stopDrag(evt) {
|
||||
scrollerBeingDragged = false;
|
||||
window.removeEventListener('mousemove', scrollBarScroll)
|
||||
}
|
||||
|
||||
function scrollBarScroll(evt) {
|
||||
if (scrollerBeingDragged === true) {
|
||||
var mouseDifferential = evt.pageY - normalizedPosition;
|
||||
var scrollEquivalent = mouseDifferential * (scrollContentWrapper.scrollHeight / scrollContainer.offsetHeight);
|
||||
scrollContentWrapper.scrollTop = contentPosition + scrollEquivalent;
|
||||
}
|
||||
}
|
||||
|
||||
function updateHeight() {
|
||||
scrollerHeight = calculateScrollerHeight()-10;
|
||||
scroller.style.height = scrollerHeight + 'px';
|
||||
}
|
||||
|
||||
function createScroller() {
|
||||
// *Creates scroller element and appends to '.scrollable' div
|
||||
// create scroller element
|
||||
scroller = document.createElement("div");
|
||||
scroller.className = 'scroller';
|
||||
|
||||
// determine how big scroller should be based on content
|
||||
scrollerHeight = calculateScrollerHeight()-10;
|
||||
|
||||
if (scrollerHeight / scrollContainer.offsetHeight < 1){
|
||||
// *If there is a need to have scroll bar based on content size
|
||||
scroller.style.height = scrollerHeight + 'px';
|
||||
|
||||
// append scroller to scrollContainer div
|
||||
scrollContainer.appendChild(scroller);
|
||||
|
||||
// show scroll path divot
|
||||
scrollContainer.className += ' showScroll';
|
||||
|
||||
// attach related draggable listeners
|
||||
scroller.addEventListener('mousedown', startDrag);
|
||||
window.addEventListener('mouseup', stopDrag);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
createScroller();
|
||||
|
||||
|
||||
// *** Listeners ***
|
||||
scrollContentWrapper.addEventListener('scroll', moveScroller);
|
||||
|
||||
return updateHeight
|
||||
};
|
||||
|
||||
|
||||
/* ---- plugins/Sidebar/media/Sidebar.coffee ---- */
|
||||
|
||||
|
||||
(function() {
|
||||
var Sidebar,
|
||||
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
|
||||
__extends = 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;
|
||||
|
||||
Sidebar = (function(_super) {
|
||||
__extends(Sidebar, _super);
|
||||
|
||||
function Sidebar() {
|
||||
this.unloadGlobe = __bind(this.unloadGlobe, this);
|
||||
this.displayGlobe = __bind(this.displayGlobe, this);
|
||||
this.loadGlobe = __bind(this.loadGlobe, this);
|
||||
this.animDrag = __bind(this.animDrag, this);
|
||||
this.waitMove = __bind(this.waitMove, this);
|
||||
this.tag = null;
|
||||
this.container = null;
|
||||
this.opened = false;
|
||||
this.width = 410;
|
||||
this.fixbutton = $(".fixbutton");
|
||||
this.fixbutton_addx = 0;
|
||||
this.fixbutton_initx = 0;
|
||||
this.fixbutton_targetx = 0;
|
||||
this.frame = $("#inner-iframe");
|
||||
this.initFixbutton();
|
||||
this.dragStarted = 0;
|
||||
this.globe = null;
|
||||
this.original_set_site_info = wrapper.setSiteInfo;
|
||||
if (false) {
|
||||
this.startDrag();
|
||||
this.moved();
|
||||
this.fixbutton_targetx = this.fixbutton_initx - this.width;
|
||||
this.stopDrag();
|
||||
}
|
||||
}
|
||||
|
||||
Sidebar.prototype.initFixbutton = function() {
|
||||
this.fixbutton.on("mousedown", (function(_this) {
|
||||
return function(e) {
|
||||
e.preventDefault();
|
||||
_this.fixbutton.off("click");
|
||||
_this.fixbutton.off("mousemove");
|
||||
_this.dragStarted = +(new Date);
|
||||
return _this.fixbutton.one("mousemove", function(e) {
|
||||
_this.fixbutton_addx = _this.fixbutton.offset().left - e.pageX;
|
||||
return _this.startDrag();
|
||||
});
|
||||
};
|
||||
})(this));
|
||||
this.fixbutton.parent().on("click", (function(_this) {
|
||||
return function(e) {
|
||||
return _this.stopDrag();
|
||||
};
|
||||
})(this));
|
||||
return this.fixbutton_initx = this.fixbutton.offset().left;
|
||||
};
|
||||
|
||||
Sidebar.prototype.startDrag = function() {
|
||||
this.log("startDrag");
|
||||
this.fixbutton_targetx = this.fixbutton_initx;
|
||||
this.fixbutton.addClass("dragging");
|
||||
$("<div class='drag-bg'></div>").appendTo(document.body);
|
||||
if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
|
||||
this.fixbutton.css("pointer-events", "none");
|
||||
}
|
||||
this.fixbutton.one("click", (function(_this) {
|
||||
return function(e) {
|
||||
_this.stopDrag();
|
||||
_this.fixbutton.removeClass("dragging");
|
||||
if (Math.abs(_this.fixbutton.offset().left - _this.fixbutton_initx) > 5) {
|
||||
return e.preventDefault();
|
||||
}
|
||||
};
|
||||
})(this));
|
||||
this.fixbutton.parents().on("mousemove", this.animDrag);
|
||||
this.fixbutton.parents().on("mousemove", this.waitMove);
|
||||
return this.fixbutton.parents().on("mouseup", (function(_this) {
|
||||
return function(e) {
|
||||
e.preventDefault();
|
||||
return _this.stopDrag();
|
||||
};
|
||||
})(this));
|
||||
};
|
||||
|
||||
Sidebar.prototype.waitMove = function(e) {
|
||||
if (Math.abs(this.fixbutton.offset().left - this.fixbutton_targetx) > 10 && (+(new Date)) - this.dragStarted > 100) {
|
||||
this.moved();
|
||||
return this.fixbutton.parents().off("mousemove", this.waitMove);
|
||||
}
|
||||
};
|
||||
|
||||
Sidebar.prototype.moved = function() {
|
||||
this.log("Moved");
|
||||
this.createHtmltag();
|
||||
$(document.body).css("perspective", "1000px").addClass("body-sidebar");
|
||||
$(window).off("resize");
|
||||
$(window).on("resize", (function(_this) {
|
||||
return function() {
|
||||
$(document.body).css("height", $(window).height());
|
||||
return _this.scrollable();
|
||||
};
|
||||
})(this));
|
||||
$(window).trigger("resize");
|
||||
return wrapper.setSiteInfo = (function(_this) {
|
||||
return function(site_info) {
|
||||
_this.setSiteInfo(site_info);
|
||||
return _this.original_set_site_info.apply(wrapper, arguments);
|
||||
};
|
||||
})(this);
|
||||
};
|
||||
|
||||
Sidebar.prototype.setSiteInfo = function(site_info) {
|
||||
this.updateHtmlTag();
|
||||
return this.displayGlobe();
|
||||
};
|
||||
|
||||
Sidebar.prototype.createHtmltag = function() {
|
||||
if (!this.container) {
|
||||
this.container = $("<div class=\"sidebar-container\"><div class=\"sidebar scrollable\"><div class=\"content-wrapper\"><div class=\"content\">\n</div></div></div></div>");
|
||||
this.container.appendTo(document.body);
|
||||
this.tag = this.container.find(".sidebar");
|
||||
this.updateHtmlTag();
|
||||
return this.scrollable = window.initScrollable();
|
||||
}
|
||||
};
|
||||
|
||||
Sidebar.prototype.updateHtmlTag = function() {
|
||||
return wrapper.ws.cmd("sidebarGetHtmlTag", {}, (function(_this) {
|
||||
return function(res) {
|
||||
if (_this.tag.find(".content").children().length === 0) {
|
||||
_this.log("Creating content");
|
||||
morphdom(_this.tag.find(".content")[0], '<div class="content">' + res + '</div>');
|
||||
return _this.scrollable();
|
||||
} 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") {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
})(this));
|
||||
};
|
||||
|
||||
Sidebar.prototype.animDrag = function(e) {
|
||||
var mousex, overdrag, overdrag_percent, targetx;
|
||||
mousex = e.pageX;
|
||||
overdrag = this.fixbutton_initx - this.width - mousex;
|
||||
if (overdrag > 0) {
|
||||
overdrag_percent = 1 + overdrag / 300;
|
||||
mousex = (e.pageX + (this.fixbutton_initx - this.width) * overdrag_percent) / (1 + overdrag_percent);
|
||||
}
|
||||
targetx = this.fixbutton_initx - mousex - this.fixbutton_addx;
|
||||
this.fixbutton.offset({
|
||||
left: mousex + this.fixbutton_addx
|
||||
});
|
||||
if (this.tag) {
|
||||
this.tag.css("transform", "translateX(" + (0 - targetx) + "px)");
|
||||
}
|
||||
if ((!this.opened && targetx > this.width / 3) || (this.opened && targetx > this.width * 0.9)) {
|
||||
return this.fixbutton_targetx = this.fixbutton_initx - this.width;
|
||||
} else {
|
||||
return this.fixbutton_targetx = this.fixbutton_initx;
|
||||
}
|
||||
};
|
||||
|
||||
Sidebar.prototype.stopDrag = function() {
|
||||
var targetx;
|
||||
this.fixbutton.parents().off("mousemove");
|
||||
this.fixbutton.off("mousemove");
|
||||
this.fixbutton.css("pointer-events", "");
|
||||
$(".drag-bg").remove();
|
||||
if (!this.fixbutton.hasClass("dragging")) {
|
||||
return;
|
||||
}
|
||||
this.fixbutton.removeClass("dragging");
|
||||
if (this.fixbutton_targetx !== this.fixbutton.offset().left) {
|
||||
this.fixbutton.stop().animate({
|
||||
"left": this.fixbutton_targetx
|
||||
}, 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);
|
||||
}
|
||||
return $(".fixbutton-bg").trigger("mouseout");
|
||||
};
|
||||
})(this));
|
||||
if (this.fixbutton_targetx === this.fixbutton_initx) {
|
||||
targetx = 0;
|
||||
this.opened = false;
|
||||
} else {
|
||||
targetx = this.width;
|
||||
if (!this.opened) {
|
||||
this.onOpened();
|
||||
}
|
||||
this.opened = true;
|
||||
}
|
||||
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();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Sidebar.prototype.onOpened = function() {
|
||||
this.log("Opened");
|
||||
this.scrollable();
|
||||
this.tag.find("#checkbox-owned").off("click").on("click", (function(_this) {
|
||||
return function() {
|
||||
return setTimeout((function() {
|
||||
return _this.scrollable();
|
||||
}), 300);
|
||||
};
|
||||
})(this));
|
||||
this.tag.find("#button-sitelimit").on("click", (function(_this) {
|
||||
return function() {
|
||||
wrapper.ws.cmd("siteSetLimit", $("#input-sitelimit").val(), function() {
|
||||
wrapper.notifications.add("done-sitelimit", "done", "Site storage limit modified!", 5000);
|
||||
return _this.updateHtmlTag();
|
||||
});
|
||||
return false;
|
||||
};
|
||||
})(this));
|
||||
this.tag.find("#button-identity").on("click", (function(_this) {
|
||||
return function() {
|
||||
wrapper.ws.cmd("certSelect");
|
||||
return false;
|
||||
};
|
||||
})(this));
|
||||
this.tag.find("#checkbox-owned").on("click", (function(_this) {
|
||||
return function() {
|
||||
return wrapper.ws.cmd("siteSetOwned", [_this.tag.find("#checkbox-owned").is(":checked")]);
|
||||
};
|
||||
})(this));
|
||||
this.tag.find("#button-settings").on("click", (function(_this) {
|
||||
return function() {
|
||||
wrapper.ws.cmd("fileGet", "content.json", function(res) {
|
||||
var data, json_raw;
|
||||
data = JSON.parse(res);
|
||||
data["title"] = $("#settings-title").val();
|
||||
data["description"] = $("#settings-description").val();
|
||||
json_raw = unescape(encodeURIComponent(JSON.stringify(data, void 0, '\t')));
|
||||
return wrapper.ws.cmd("fileWrite", ["content.json", btoa(json_raw)], function(res) {
|
||||
if (res !== "ok") {
|
||||
return wrapper.notifications.add("file-write", "error", "File write error: " + res);
|
||||
} else {
|
||||
wrapper.notifications.add("file-write", "done", "Site settings saved!", 5000);
|
||||
return _this.updateHtmlTag();
|
||||
}
|
||||
});
|
||||
});
|
||||
return false;
|
||||
};
|
||||
})(this));
|
||||
this.tag.find("#button-sign").on("click", (function(_this) {
|
||||
return function() {
|
||||
var inner_path;
|
||||
inner_path = _this.tag.find("#select-contents").val();
|
||||
if (wrapper.site_info.privatekey) {
|
||||
wrapper.ws.cmd("siteSign", ["stored", inner_path], function(res) {
|
||||
return wrapper.notifications.add("sign", "done", inner_path + " Signed!", 5000);
|
||||
});
|
||||
} else {
|
||||
wrapper.displayPrompt("Enter your private key:", "password", "Sign", function(privatekey) {
|
||||
return wrapper.ws.cmd("siteSign", [privatekey, inner_path], function(res) {
|
||||
if (res === "ok") {
|
||||
return wrapper.notifications.add("sign", "done", inner_path + " Signed!", 5000);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
return false;
|
||||
};
|
||||
})(this));
|
||||
this.tag.find("#button-publish").on("click", (function(_this) {
|
||||
return function() {
|
||||
var inner_path;
|
||||
inner_path = _this.tag.find("#select-contents").val();
|
||||
_this.tag.find("#button-publish").addClass("loading");
|
||||
return wrapper.ws.cmd("sitePublish", {
|
||||
"inner_path": inner_path,
|
||||
"sign": false
|
||||
}, function() {
|
||||
return _this.tag.find("#button-publish").removeClass("loading");
|
||||
});
|
||||
};
|
||||
})(this));
|
||||
return this.loadGlobe();
|
||||
};
|
||||
|
||||
Sidebar.prototype.onClosed = function() {
|
||||
$(window).off("resize");
|
||||
$(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);
|
||||
return _this.unloadGlobe();
|
||||
}
|
||||
};
|
||||
})(this));
|
||||
return wrapper.setSiteInfo = this.original_set_site_info;
|
||||
};
|
||||
|
||||
Sidebar.prototype.loadGlobe = function() {
|
||||
if (this.tag.find(".globe").hasClass("loading")) {
|
||||
return setTimeout(((function(_this) {
|
||||
return function() {
|
||||
if (typeof DAT === "undefined") {
|
||||
return $.getScript("/uimedia/globe/all.js", _this.displayGlobe);
|
||||
} else {
|
||||
return _this.displayGlobe();
|
||||
}
|
||||
};
|
||||
})(this)), 600);
|
||||
}
|
||||
};
|
||||
|
||||
Sidebar.prototype.displayGlobe = function() {
|
||||
return wrapper.ws.cmd("sidebarGetPeers", [], (function(_this) {
|
||||
return function(globe_data) {
|
||||
if (_this.globe) {
|
||||
_this.globe.scene.remove(_this.globe.points);
|
||||
_this.globe.addData(globe_data, {
|
||||
format: 'magnitude',
|
||||
name: "hello",
|
||||
animated: false
|
||||
});
|
||||
_this.globe.createPoints();
|
||||
} else {
|
||||
_this.globe = new DAT.Globe(_this.tag.find(".globe")[0], {
|
||||
"imgDir": "/uimedia/globe/"
|
||||
});
|
||||
_this.globe.addData(globe_data, {
|
||||
format: 'magnitude',
|
||||
name: "hello"
|
||||
});
|
||||
_this.globe.createPoints();
|
||||
_this.globe.animate();
|
||||
}
|
||||
return _this.tag.find(".globe").removeClass("loading");
|
||||
};
|
||||
})(this));
|
||||
};
|
||||
|
||||
Sidebar.prototype.unloadGlobe = function() {
|
||||
if (!this.globe) {
|
||||
return false;
|
||||
}
|
||||
this.globe.unload();
|
||||
return this.globe = null;
|
||||
};
|
||||
|
||||
return Sidebar;
|
||||
|
||||
})(Class);
|
||||
|
||||
window.sidebar = new Sidebar();
|
||||
|
||||
window.transitionEnd = 'transitionend webkitTransitionEnd oTransitionEnd otransitionend';
|
||||
|
||||
}).call(this);
|
||||
|
||||
|
||||
|
||||
/* ---- plugins/Sidebar/media/morphdom.js ---- */
|
||||
|
||||
|
||||
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.morphdom = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||||
var specialElHandlers = {
|
||||
/**
|
||||
* Needed for IE. Apparently IE doesn't think
|
||||
* that "selected" is an attribute when reading
|
||||
* over the attributes using selectEl.attributes
|
||||
*/
|
||||
OPTION: function(fromEl, toEl) {
|
||||
if ((fromEl.selected = toEl.selected)) {
|
||||
fromEl.setAttribute('selected', '');
|
||||
} else {
|
||||
fromEl.removeAttribute('selected', '');
|
||||
}
|
||||
},
|
||||
/**
|
||||
* The "value" attribute is special for the <input> element
|
||||
* since it sets the initial value. Changing the "value"
|
||||
* attribute without changing the "value" property will have
|
||||
* no effect since it is only used to the set the initial value.
|
||||
* Similar for the "checked" attribute.
|
||||
*/
|
||||
/*INPUT: function(fromEl, toEl) {
|
||||
fromEl.checked = toEl.checked;
|
||||
fromEl.value = toEl.value;
|
||||
|
||||
if (!toEl.hasAttribute('checked')) {
|
||||
fromEl.removeAttribute('checked');
|
||||
}
|
||||
|
||||
if (!toEl.hasAttribute('value')) {
|
||||
fromEl.removeAttribute('value');
|
||||
}
|
||||
}*/
|
||||
};
|
||||
|
||||
function noop() {}
|
||||
|
||||
/**
|
||||
* Loop over all of the attributes on the target node and make sure the
|
||||
* original DOM node has the same attributes. If an attribute
|
||||
* found on the original node is not on the new node then remove it from
|
||||
* the original node
|
||||
* @param {HTMLElement} fromNode
|
||||
* @param {HTMLElement} toNode
|
||||
*/
|
||||
function morphAttrs(fromNode, toNode) {
|
||||
var attrs = toNode.attributes;
|
||||
var i;
|
||||
var attr;
|
||||
var attrName;
|
||||
var attrValue;
|
||||
var foundAttrs = {};
|
||||
|
||||
for (i=attrs.length-1; i>=0; i--) {
|
||||
attr = attrs[i];
|
||||
if (attr.specified !== false) {
|
||||
attrName = attr.name;
|
||||
attrValue = attr.value;
|
||||
foundAttrs[attrName] = true;
|
||||
|
||||
if (fromNode.getAttribute(attrName) !== attrValue) {
|
||||
fromNode.setAttribute(attrName, attrValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Delete any extra attributes found on the original DOM element that weren't
|
||||
// found on the target element.
|
||||
attrs = fromNode.attributes;
|
||||
|
||||
for (i=attrs.length-1; i>=0; i--) {
|
||||
attr = attrs[i];
|
||||
if (attr.specified !== false) {
|
||||
attrName = attr.name;
|
||||
if (!foundAttrs.hasOwnProperty(attrName)) {
|
||||
fromNode.removeAttribute(attrName);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Copies the children of one DOM element to another DOM element
|
||||
*/
|
||||
function moveChildren(from, to) {
|
||||
var curChild = from.firstChild;
|
||||
while(curChild) {
|
||||
var nextChild = curChild.nextSibling;
|
||||
to.appendChild(curChild);
|
||||
curChild = nextChild;
|
||||
}
|
||||
return to;
|
||||
}
|
||||
|
||||
function morphdom(fromNode, toNode, options) {
|
||||
if (!options) {
|
||||
options = {};
|
||||
}
|
||||
|
||||
if (typeof toNode === 'string') {
|
||||
var newBodyEl = document.createElement('body');
|
||||
newBodyEl.innerHTML = toNode;
|
||||
toNode = newBodyEl.childNodes[0];
|
||||
}
|
||||
|
||||
var savedEls = {}; // Used to save off DOM elements with IDs
|
||||
var unmatchedEls = {};
|
||||
var onNodeDiscarded = options.onNodeDiscarded || noop;
|
||||
var onBeforeMorphEl = options.onBeforeMorphEl || noop;
|
||||
var onBeforeMorphElChildren = options.onBeforeMorphElChildren || noop;
|
||||
|
||||
function removeNodeHelper(node, nestedInSavedEl) {
|
||||
var id = node.id;
|
||||
// If the node has an ID then save it off since we will want
|
||||
// to reuse it in case the target DOM tree has a DOM element
|
||||
// with the same ID
|
||||
if (id) {
|
||||
savedEls[id] = node;
|
||||
} else if (!nestedInSavedEl) {
|
||||
// If we are not nested in a saved element then we know that this node has been
|
||||
// completely discarded and will not exist in the final DOM.
|
||||
onNodeDiscarded(node);
|
||||
}
|
||||
|
||||
if (node.nodeType === 1) {
|
||||
var curChild = node.firstChild;
|
||||
while(curChild) {
|
||||
removeNodeHelper(curChild, nestedInSavedEl || id);
|
||||
curChild = curChild.nextSibling;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function walkDiscardedChildNodes(node) {
|
||||
if (node.nodeType === 1) {
|
||||
var curChild = node.firstChild;
|
||||
while(curChild) {
|
||||
|
||||
|
||||
if (!curChild.id) {
|
||||
// We only want to handle nodes that don't have an ID to avoid double
|
||||
// walking the same saved element.
|
||||
|
||||
onNodeDiscarded(curChild);
|
||||
|
||||
// Walk recursively
|
||||
walkDiscardedChildNodes(curChild);
|
||||
}
|
||||
|
||||
curChild = curChild.nextSibling;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function removeNode(node, parentNode, alreadyVisited) {
|
||||
parentNode.removeChild(node);
|
||||
|
||||
if (alreadyVisited) {
|
||||
if (!node.id) {
|
||||
onNodeDiscarded(node);
|
||||
walkDiscardedChildNodes(node);
|
||||
}
|
||||
} else {
|
||||
removeNodeHelper(node);
|
||||
}
|
||||
}
|
||||
|
||||
function morphEl(fromNode, toNode, alreadyVisited) {
|
||||
if (toNode.id) {
|
||||
// If an element with an ID is being morphed then it is will be in the final
|
||||
// DOM so clear it out of the saved elements collection
|
||||
delete savedEls[toNode.id];
|
||||
}
|
||||
|
||||
if (onBeforeMorphEl(fromNode, toNode) === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
morphAttrs(fromNode, toNode);
|
||||
|
||||
if (onBeforeMorphElChildren(fromNode, toNode) === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
var curToNodeChild = toNode.firstChild;
|
||||
var curFromNodeChild = fromNode.firstChild;
|
||||
var curToNodeId;
|
||||
|
||||
var fromNextSibling;
|
||||
var toNextSibling;
|
||||
var savedEl;
|
||||
var unmatchedEl;
|
||||
|
||||
outer: while(curToNodeChild) {
|
||||
toNextSibling = curToNodeChild.nextSibling;
|
||||
curToNodeId = curToNodeChild.id;
|
||||
|
||||
while(curFromNodeChild) {
|
||||
var curFromNodeId = curFromNodeChild.id;
|
||||
fromNextSibling = curFromNodeChild.nextSibling;
|
||||
|
||||
if (!alreadyVisited) {
|
||||
if (curFromNodeId && (unmatchedEl = unmatchedEls[curFromNodeId])) {
|
||||
unmatchedEl.parentNode.replaceChild(curFromNodeChild, unmatchedEl);
|
||||
morphEl(curFromNodeChild, unmatchedEl, alreadyVisited);
|
||||
curFromNodeChild = fromNextSibling;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
var curFromNodeType = curFromNodeChild.nodeType;
|
||||
|
||||
if (curFromNodeType === curToNodeChild.nodeType) {
|
||||
var isCompatible = false;
|
||||
|
||||
if (curFromNodeType === 1) { // Both nodes being compared are Element nodes
|
||||
if (curFromNodeChild.tagName === curToNodeChild.tagName) {
|
||||
// We have compatible DOM elements
|
||||
if (curFromNodeId || curToNodeId) {
|
||||
// If either DOM element has an ID then we handle
|
||||
// those differently since we want to match up
|
||||
// by ID
|
||||
if (curToNodeId === curFromNodeId) {
|
||||
isCompatible = true;
|
||||
}
|
||||
} else {
|
||||
isCompatible = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (isCompatible) {
|
||||
// We found compatible DOM elements so add a
|
||||
// task to morph the compatible DOM elements
|
||||
morphEl(curFromNodeChild, curToNodeChild, alreadyVisited);
|
||||
}
|
||||
} else if (curFromNodeType === 3) { // Both nodes being compared are Text nodes
|
||||
isCompatible = true;
|
||||
curFromNodeChild.nodeValue = curToNodeChild.nodeValue;
|
||||
}
|
||||
|
||||
if (isCompatible) {
|
||||
curToNodeChild = toNextSibling;
|
||||
curFromNodeChild = fromNextSibling;
|
||||
continue outer;
|
||||
}
|
||||
}
|
||||
|
||||
// No compatible match so remove the old node from the DOM
|
||||
removeNode(curFromNodeChild, fromNode, alreadyVisited);
|
||||
|
||||
curFromNodeChild = fromNextSibling;
|
||||
}
|
||||
|
||||
if (curToNodeId) {
|
||||
if ((savedEl = savedEls[curToNodeId])) {
|
||||
morphEl(savedEl, curToNodeChild, true);
|
||||
curToNodeChild = savedEl; // We want to append the saved element instead
|
||||
} else {
|
||||
// The current DOM element in the target tree has an ID
|
||||
// but we did not find a match in any of the corresponding
|
||||
// siblings. We just put the target element in the old DOM tree
|
||||
// but if we later find an element in the old DOM tree that has
|
||||
// a matching ID then we will replace the target element
|
||||
// with the corresponding old element and morph the old element
|
||||
unmatchedEls[curToNodeId] = curToNodeChild;
|
||||
}
|
||||
}
|
||||
|
||||
// If we got this far then we did not find a candidate match for our "to node"
|
||||
// and we exhausted all of the children "from" nodes. Therefore, we will just
|
||||
// append the current "to node" to the end
|
||||
fromNode.appendChild(curToNodeChild);
|
||||
|
||||
curToNodeChild = toNextSibling;
|
||||
curFromNodeChild = fromNextSibling;
|
||||
}
|
||||
|
||||
// We have processed all of the "to nodes". If curFromNodeChild is non-null then
|
||||
// we still have some from nodes left over that need to be removed
|
||||
while(curFromNodeChild) {
|
||||
fromNextSibling = curFromNodeChild.nextSibling;
|
||||
removeNode(curFromNodeChild, fromNode, alreadyVisited);
|
||||
curFromNodeChild = fromNextSibling;
|
||||
}
|
||||
|
||||
var specialElHandler = specialElHandlers[fromNode.tagName];
|
||||
if (specialElHandler) {
|
||||
specialElHandler(fromNode, toNode);
|
||||
}
|
||||
}
|
||||
|
||||
var morphedNode = fromNode;
|
||||
var morphedNodeType = morphedNode.nodeType;
|
||||
var toNodeType = toNode.nodeType;
|
||||
|
||||
// Handle the case where we are given two DOM nodes that are not
|
||||
// compatible (e.g. <div> --> <span> or <div> --> TEXT)
|
||||
if (morphedNodeType === 1) {
|
||||
if (toNodeType === 1) {
|
||||
if (morphedNode.tagName !== toNode.tagName) {
|
||||
onNodeDiscarded(fromNode);
|
||||
morphedNode = moveChildren(morphedNode, document.createElement(toNode.tagName));
|
||||
}
|
||||
} else {
|
||||
// Going from an element node to a text node
|
||||
return toNode;
|
||||
}
|
||||
} else if (morphedNodeType === 3) { // Text node
|
||||
if (toNodeType === 3) {
|
||||
morphedNode.nodeValue = toNode.nodeValue;
|
||||
return morphedNode;
|
||||
} else {
|
||||
onNodeDiscarded(fromNode);
|
||||
// Text node to something else
|
||||
return toNode;
|
||||
}
|
||||
}
|
||||
|
||||
morphEl(morphedNode, toNode, false);
|
||||
|
||||
// Fire the "onNodeDiscarded" event for any saved elements
|
||||
// that never found a new home in the morphed DOM
|
||||
for (var savedElId in savedEls) {
|
||||
if (savedEls.hasOwnProperty(savedElId)) {
|
||||
var savedEl = savedEls[savedElId];
|
||||
onNodeDiscarded(savedEl);
|
||||
walkDiscardedChildNodes(savedEl);
|
||||
}
|
||||
}
|
||||
|
||||
if (morphedNode !== fromNode && fromNode.parentNode) {
|
||||
fromNode.parentNode.replaceChild(morphedNode, fromNode);
|
||||
}
|
||||
|
||||
return morphedNode;
|
||||
}
|
||||
|
||||
module.exports = morphdom;
|
||||
},{}]},{},[1])(1)
|
||||
});
|
||||
340
plugins/Sidebar/media/morphdom.js
Normal file
340
plugins/Sidebar/media/morphdom.js
Normal file
|
|
@ -0,0 +1,340 @@
|
|||
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.morphdom = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||||
var specialElHandlers = {
|
||||
/**
|
||||
* Needed for IE. Apparently IE doesn't think
|
||||
* that "selected" is an attribute when reading
|
||||
* over the attributes using selectEl.attributes
|
||||
*/
|
||||
OPTION: function(fromEl, toEl) {
|
||||
if ((fromEl.selected = toEl.selected)) {
|
||||
fromEl.setAttribute('selected', '');
|
||||
} else {
|
||||
fromEl.removeAttribute('selected', '');
|
||||
}
|
||||
},
|
||||
/**
|
||||
* The "value" attribute is special for the <input> element
|
||||
* since it sets the initial value. Changing the "value"
|
||||
* attribute without changing the "value" property will have
|
||||
* no effect since it is only used to the set the initial value.
|
||||
* Similar for the "checked" attribute.
|
||||
*/
|
||||
/*INPUT: function(fromEl, toEl) {
|
||||
fromEl.checked = toEl.checked;
|
||||
fromEl.value = toEl.value;
|
||||
|
||||
if (!toEl.hasAttribute('checked')) {
|
||||
fromEl.removeAttribute('checked');
|
||||
}
|
||||
|
||||
if (!toEl.hasAttribute('value')) {
|
||||
fromEl.removeAttribute('value');
|
||||
}
|
||||
}*/
|
||||
};
|
||||
|
||||
function noop() {}
|
||||
|
||||
/**
|
||||
* Loop over all of the attributes on the target node and make sure the
|
||||
* original DOM node has the same attributes. If an attribute
|
||||
* found on the original node is not on the new node then remove it from
|
||||
* the original node
|
||||
* @param {HTMLElement} fromNode
|
||||
* @param {HTMLElement} toNode
|
||||
*/
|
||||
function morphAttrs(fromNode, toNode) {
|
||||
var attrs = toNode.attributes;
|
||||
var i;
|
||||
var attr;
|
||||
var attrName;
|
||||
var attrValue;
|
||||
var foundAttrs = {};
|
||||
|
||||
for (i=attrs.length-1; i>=0; i--) {
|
||||
attr = attrs[i];
|
||||
if (attr.specified !== false) {
|
||||
attrName = attr.name;
|
||||
attrValue = attr.value;
|
||||
foundAttrs[attrName] = true;
|
||||
|
||||
if (fromNode.getAttribute(attrName) !== attrValue) {
|
||||
fromNode.setAttribute(attrName, attrValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Delete any extra attributes found on the original DOM element that weren't
|
||||
// found on the target element.
|
||||
attrs = fromNode.attributes;
|
||||
|
||||
for (i=attrs.length-1; i>=0; i--) {
|
||||
attr = attrs[i];
|
||||
if (attr.specified !== false) {
|
||||
attrName = attr.name;
|
||||
if (!foundAttrs.hasOwnProperty(attrName)) {
|
||||
fromNode.removeAttribute(attrName);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Copies the children of one DOM element to another DOM element
|
||||
*/
|
||||
function moveChildren(from, to) {
|
||||
var curChild = from.firstChild;
|
||||
while(curChild) {
|
||||
var nextChild = curChild.nextSibling;
|
||||
to.appendChild(curChild);
|
||||
curChild = nextChild;
|
||||
}
|
||||
return to;
|
||||
}
|
||||
|
||||
function morphdom(fromNode, toNode, options) {
|
||||
if (!options) {
|
||||
options = {};
|
||||
}
|
||||
|
||||
if (typeof toNode === 'string') {
|
||||
var newBodyEl = document.createElement('body');
|
||||
newBodyEl.innerHTML = toNode;
|
||||
toNode = newBodyEl.childNodes[0];
|
||||
}
|
||||
|
||||
var savedEls = {}; // Used to save off DOM elements with IDs
|
||||
var unmatchedEls = {};
|
||||
var onNodeDiscarded = options.onNodeDiscarded || noop;
|
||||
var onBeforeMorphEl = options.onBeforeMorphEl || noop;
|
||||
var onBeforeMorphElChildren = options.onBeforeMorphElChildren || noop;
|
||||
|
||||
function removeNodeHelper(node, nestedInSavedEl) {
|
||||
var id = node.id;
|
||||
// If the node has an ID then save it off since we will want
|
||||
// to reuse it in case the target DOM tree has a DOM element
|
||||
// with the same ID
|
||||
if (id) {
|
||||
savedEls[id] = node;
|
||||
} else if (!nestedInSavedEl) {
|
||||
// If we are not nested in a saved element then we know that this node has been
|
||||
// completely discarded and will not exist in the final DOM.
|
||||
onNodeDiscarded(node);
|
||||
}
|
||||
|
||||
if (node.nodeType === 1) {
|
||||
var curChild = node.firstChild;
|
||||
while(curChild) {
|
||||
removeNodeHelper(curChild, nestedInSavedEl || id);
|
||||
curChild = curChild.nextSibling;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function walkDiscardedChildNodes(node) {
|
||||
if (node.nodeType === 1) {
|
||||
var curChild = node.firstChild;
|
||||
while(curChild) {
|
||||
|
||||
|
||||
if (!curChild.id) {
|
||||
// We only want to handle nodes that don't have an ID to avoid double
|
||||
// walking the same saved element.
|
||||
|
||||
onNodeDiscarded(curChild);
|
||||
|
||||
// Walk recursively
|
||||
walkDiscardedChildNodes(curChild);
|
||||
}
|
||||
|
||||
curChild = curChild.nextSibling;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function removeNode(node, parentNode, alreadyVisited) {
|
||||
parentNode.removeChild(node);
|
||||
|
||||
if (alreadyVisited) {
|
||||
if (!node.id) {
|
||||
onNodeDiscarded(node);
|
||||
walkDiscardedChildNodes(node);
|
||||
}
|
||||
} else {
|
||||
removeNodeHelper(node);
|
||||
}
|
||||
}
|
||||
|
||||
function morphEl(fromNode, toNode, alreadyVisited) {
|
||||
if (toNode.id) {
|
||||
// If an element with an ID is being morphed then it is will be in the final
|
||||
// DOM so clear it out of the saved elements collection
|
||||
delete savedEls[toNode.id];
|
||||
}
|
||||
|
||||
if (onBeforeMorphEl(fromNode, toNode) === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
morphAttrs(fromNode, toNode);
|
||||
|
||||
if (onBeforeMorphElChildren(fromNode, toNode) === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
var curToNodeChild = toNode.firstChild;
|
||||
var curFromNodeChild = fromNode.firstChild;
|
||||
var curToNodeId;
|
||||
|
||||
var fromNextSibling;
|
||||
var toNextSibling;
|
||||
var savedEl;
|
||||
var unmatchedEl;
|
||||
|
||||
outer: while(curToNodeChild) {
|
||||
toNextSibling = curToNodeChild.nextSibling;
|
||||
curToNodeId = curToNodeChild.id;
|
||||
|
||||
while(curFromNodeChild) {
|
||||
var curFromNodeId = curFromNodeChild.id;
|
||||
fromNextSibling = curFromNodeChild.nextSibling;
|
||||
|
||||
if (!alreadyVisited) {
|
||||
if (curFromNodeId && (unmatchedEl = unmatchedEls[curFromNodeId])) {
|
||||
unmatchedEl.parentNode.replaceChild(curFromNodeChild, unmatchedEl);
|
||||
morphEl(curFromNodeChild, unmatchedEl, alreadyVisited);
|
||||
curFromNodeChild = fromNextSibling;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
var curFromNodeType = curFromNodeChild.nodeType;
|
||||
|
||||
if (curFromNodeType === curToNodeChild.nodeType) {
|
||||
var isCompatible = false;
|
||||
|
||||
if (curFromNodeType === 1) { // Both nodes being compared are Element nodes
|
||||
if (curFromNodeChild.tagName === curToNodeChild.tagName) {
|
||||
// We have compatible DOM elements
|
||||
if (curFromNodeId || curToNodeId) {
|
||||
// If either DOM element has an ID then we handle
|
||||
// those differently since we want to match up
|
||||
// by ID
|
||||
if (curToNodeId === curFromNodeId) {
|
||||
isCompatible = true;
|
||||
}
|
||||
} else {
|
||||
isCompatible = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (isCompatible) {
|
||||
// We found compatible DOM elements so add a
|
||||
// task to morph the compatible DOM elements
|
||||
morphEl(curFromNodeChild, curToNodeChild, alreadyVisited);
|
||||
}
|
||||
} else if (curFromNodeType === 3) { // Both nodes being compared are Text nodes
|
||||
isCompatible = true;
|
||||
curFromNodeChild.nodeValue = curToNodeChild.nodeValue;
|
||||
}
|
||||
|
||||
if (isCompatible) {
|
||||
curToNodeChild = toNextSibling;
|
||||
curFromNodeChild = fromNextSibling;
|
||||
continue outer;
|
||||
}
|
||||
}
|
||||
|
||||
// No compatible match so remove the old node from the DOM
|
||||
removeNode(curFromNodeChild, fromNode, alreadyVisited);
|
||||
|
||||
curFromNodeChild = fromNextSibling;
|
||||
}
|
||||
|
||||
if (curToNodeId) {
|
||||
if ((savedEl = savedEls[curToNodeId])) {
|
||||
morphEl(savedEl, curToNodeChild, true);
|
||||
curToNodeChild = savedEl; // We want to append the saved element instead
|
||||
} else {
|
||||
// The current DOM element in the target tree has an ID
|
||||
// but we did not find a match in any of the corresponding
|
||||
// siblings. We just put the target element in the old DOM tree
|
||||
// but if we later find an element in the old DOM tree that has
|
||||
// a matching ID then we will replace the target element
|
||||
// with the corresponding old element and morph the old element
|
||||
unmatchedEls[curToNodeId] = curToNodeChild;
|
||||
}
|
||||
}
|
||||
|
||||
// If we got this far then we did not find a candidate match for our "to node"
|
||||
// and we exhausted all of the children "from" nodes. Therefore, we will just
|
||||
// append the current "to node" to the end
|
||||
fromNode.appendChild(curToNodeChild);
|
||||
|
||||
curToNodeChild = toNextSibling;
|
||||
curFromNodeChild = fromNextSibling;
|
||||
}
|
||||
|
||||
// We have processed all of the "to nodes". If curFromNodeChild is non-null then
|
||||
// we still have some from nodes left over that need to be removed
|
||||
while(curFromNodeChild) {
|
||||
fromNextSibling = curFromNodeChild.nextSibling;
|
||||
removeNode(curFromNodeChild, fromNode, alreadyVisited);
|
||||
curFromNodeChild = fromNextSibling;
|
||||
}
|
||||
|
||||
var specialElHandler = specialElHandlers[fromNode.tagName];
|
||||
if (specialElHandler) {
|
||||
specialElHandler(fromNode, toNode);
|
||||
}
|
||||
}
|
||||
|
||||
var morphedNode = fromNode;
|
||||
var morphedNodeType = morphedNode.nodeType;
|
||||
var toNodeType = toNode.nodeType;
|
||||
|
||||
// Handle the case where we are given two DOM nodes that are not
|
||||
// compatible (e.g. <div> --> <span> or <div> --> TEXT)
|
||||
if (morphedNodeType === 1) {
|
||||
if (toNodeType === 1) {
|
||||
if (morphedNode.tagName !== toNode.tagName) {
|
||||
onNodeDiscarded(fromNode);
|
||||
morphedNode = moveChildren(morphedNode, document.createElement(toNode.tagName));
|
||||
}
|
||||
} else {
|
||||
// Going from an element node to a text node
|
||||
return toNode;
|
||||
}
|
||||
} else if (morphedNodeType === 3) { // Text node
|
||||
if (toNodeType === 3) {
|
||||
morphedNode.nodeValue = toNode.nodeValue;
|
||||
return morphedNode;
|
||||
} else {
|
||||
onNodeDiscarded(fromNode);
|
||||
// Text node to something else
|
||||
return toNode;
|
||||
}
|
||||
}
|
||||
|
||||
morphEl(morphedNode, toNode, false);
|
||||
|
||||
// Fire the "onNodeDiscarded" event for any saved elements
|
||||
// that never found a new home in the morphed DOM
|
||||
for (var savedElId in savedEls) {
|
||||
if (savedEls.hasOwnProperty(savedElId)) {
|
||||
var savedEl = savedEls[savedElId];
|
||||
onNodeDiscarded(savedEl);
|
||||
walkDiscardedChildNodes(savedEl);
|
||||
}
|
||||
}
|
||||
|
||||
if (morphedNode !== fromNode && fromNode.parentNode) {
|
||||
fromNode.parentNode.replaceChild(morphedNode, fromNode);
|
||||
}
|
||||
|
||||
return morphedNode;
|
||||
}
|
||||
|
||||
module.exports = morphdom;
|
||||
},{}]},{},[1])(1)
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue