Permalink
Browse files

Power tweaking preloader behaviour

  • Loading branch information...
koenbok committed Aug 3, 2016
1 parent b69ac08 commit 31a7bf9d5bea5bc0e7c7782630f5db71f5a58eca
@@ -1,13 +1,7 @@
Framer.Info =
title: "Bolt Inbox"
author: "Floris Verloop"
twitter: "fverloop"
# Framer.Extras.Preloader.enable()
Framer.Extras.ShareInfo.enable()
Framer.Extras.Hints.enable()
grid = new GridComponent
size: Screen
layer = new Layer
point: Align.center
layer.onClick ->
grid.renderCell = (layer) ->
layer.image = Utils.randomImage(layer) + "?cache=#{Date.now()}"
@@ -7,9 +7,8 @@
}
body {
background-color: #000;
font: 28px/1em "Helvetica";
color: #FFF;
color: gray;
overflow: hidden;
}
View
@@ -3,6 +3,7 @@ Utils = require "./Utils"
FramerCSS = """
body {
margin: 0;
background-color: white;
}
.framerContext {
View
@@ -93,6 +93,13 @@ class exports.Context extends BaseClass
@define "layerCounter", get: -> @_layerCounter
@define "rootLayers", get: -> _.filter @_layers, (layer) -> layer.parent is null
@define "visible",
get: -> @_visible or true
set: (value) ->
return if value is @_visible
@_element?.style.visibility = if value then "visible" else "hidden"
@_visible = value
addLayer: (layer) ->
return if layer in @_layers
@_layerCounter++
@@ -14,25 +14,7 @@ class Preloader extends BaseClass
@start()
setupContext: ->
parentContext = Framer.Device?.content
parentContext ?= Framer.CurrentContext
@context = new Context({parent: parentContext, name: "Preloader"})
@hintBlocker = new Context({name: "Hint Blocker"})
@hintBlocker.index = 15000 # Above hints, below share info
@hintBlocker.run =>
blocker = new Layer
size : Canvas
backgroundColor : null
blocker.onTouchStart (event) ->
event.stopPropagation()
blocker.onTouchEnd (event) ->
event.stopPropagation()
blocker.onTouchMove (event) ->
event.stopPropagation()
@context = new Context({name: "Preloader"})
@context.run(@_setupContext)
@define "progress",
@@ -79,22 +61,23 @@ class Preloader extends BaseClass
@_handleProgress()
start: =>
# A static delay avoids the progress from being shown if the loading
# took less then the delay. So if all images were cached then we don't
# hope to see a loading screen at all.
Utils.delay(0.2, @_start)
_start: =>
return if @isLoading
@setupContext()
@_isLoading = true
@_startTime = Date.now()
@emit("start")
@setupContext()
# We need a little delay for the contexts to build up so we can
# actually find the images in it.
Utils.delay(0.2, @_start)
_start: =>
# Another bit of delay to find out if the images are already cached
# so we avoid a mini flickr of the progress indicator.
Utils.delay 0.2, => @cover.visible = true
# By default we take the image from the prototype and the device
@addImagesFromContext(Framer.DefaultContext)
@@ -106,19 +89,30 @@ class Preloader extends BaseClass
if not @_media.length
return @end()
# Only now show the cover
@cover.opacity = 1
# Make sure we always show the prototype after n seconds, even if not
# all the images managed to load at all.
Utils.delay(@timeout, @_handleTimeout)
end: =>
return unless @isLoading
@emit("end")
@_isLoading = false
@context?.destroy()
@hintBlocker?.destroy()
@_end()
_end: =>
Framer.DefaultContext.visible = true
finalize = =>
@emit("end")
@_isLoading = false
@context?.destroy()
if @cover?.visible
@cover?.animate
properties: {opacity: 0}
time: 0.13
@cover.onAnimationDidEnd(finalize)
else
finalize()
_handleProgress: =>
@emit("progress", @progress)
@@ -127,7 +121,7 @@ class Preloader extends BaseClass
_handleLoaded: ->
if @time > 0.5
Utils.delay(0.5, @end)
Utils.delay(0.2, @end)
else
@end()
@@ -139,9 +133,9 @@ class Preloader extends BaseClass
_setupContext: =>
@cover = new Layer
frame: @context
frame: Canvas
backgroundColor: "white"
opacity: 0
visible: false
@progressIndicator = new CircularProgressComponent
size: 160
@@ -159,6 +153,11 @@ class Preloader extends BaseClass
parent: @cover
backgroundColor: null
# We display it a tad larger on mobile
if Utils.isMobile()
@progressIndicator.scale = 1.25
@brand.scale = 1.25
if @_logo
@setLogo(@_logo)
else
@@ -168,13 +167,9 @@ class Preloader extends BaseClass
@setLogo(logoUrl)
do layout = =>
if Utils.isMobile()
scale = 2
else
screen = Framer.Device?.screen
scale = screen?.frame.width / screen?.canvasFrame.width
@progressIndicator.scale = scale
@brand.scale = scale
@cover.frame = Canvas
@progressIndicator.point = Align.center
@brand.point = Align.center
Canvas.onResize(layout)
@@ -183,7 +178,7 @@ exports.enable = ->
exports.disable = ->
return unless Framer.Preloader
Framer.Preloader.end()
Framer.Preloader._end()
Framer.Preloader = null
exports.addImage = (url) ->
View
@@ -61,9 +61,11 @@ Defaults = (require "./Defaults").Defaults
Defaults.setup()
Framer.resetDefaults = Defaults.reset
# Create the default context
# Create the default context, set it to invisble by default so
# the preloader can pick it up if it needs to.
Framer.DefaultContext = new Framer.Context(name:"Default")
Framer.DefaultContext.backgroundColor = "white"
Framer.DefaultContext.visible = false
Framer.CurrentContext = Framer.DefaultContext
window.Canvas = new (require "./Canvas").Canvas
@@ -74,10 +76,10 @@ Framer.Extras.ErrorDisplay.enable() if not Utils.isFramerStudio()
Framer.Extras.Preloader.enable() if not Utils.isFramerStudio()
Framer.Extras.Hints.enable() if not Utils.isFramerStudio()
startAfterPreloader = ->
Utils.domComplete(Framer.Loop.start)
# If there is no preloader around, we show the default context
# This _won't_ avoid a flickr of the device if you use the preloader
# from your code directly, unfortunately. But at this point, that is an
# action in the future, so we can't know wether that will happen or not.
Framer.DefaultContext.visible = true unless Framer.Preloader
if Framer.Preloader?
Framer.Preloader.once("end", startAfterPreloader)
else
startAfterPreloader()
Utils.domComplete(Framer.Loop.start)

0 comments on commit 31a7bf9

Please sign in to comment.