Skip to content
Permalink
Browse files

Add error display for js errors

Outside of Framer Studio, it is really hard to tell if you have a js
error. So we now show the error by default. You can tap to dismiss it.
  • Loading branch information...
koenbok committed May 10, 2016
1 parent 9bc5c0e commit ea527376ab5ca125514d92a9d170c019351635ee
Showing with 105 additions and 0 deletions.
  1. +103 −0 framer/Extras/ErrorDisplay.coffee
  2. +1 −0 framer/Extras/Extras.coffee
  3. +1 −0 framer/Framer.coffee
@@ -0,0 +1,103 @@
Utils = require "../Utils"

{BaseClass} = require "../BaseClass"
{Context} = require "../Context"
{Layer} = require "../Layer"

_error = null
_context = null

Config = {}

if Utils.isMobile()
Config.height = 100
Config.textInset = 20
Config.fontSize = 32
else
Config.height = 40
Config.textInset = 12
Config.fontSize = 14


class ErrorDisplay extends BaseClass

constructor: ->

@_context ?= new Context name:"Mobile Error"
@_context.index = 1000

@_context.run =>

Events.wrap(window).addEventListener "error", (e) =>
@showError(e.message)

Events.wrap(window).addEventListener "resize", (e) =>
@resize()

createLayer: ->

return @_errorLayer if @_errorLayer

@_context.run =>

error = new Layer
name: "error"
y: Align.bottom
width: Screen.width
height: Config.height
backgroundColor: "rgba(255,0,0,1)"

error.text = new Layer
name: "text"
parent: error
size: Utils.frameInset(error, Config.textInset)
point: Align.center
backgroundColor: null
clip: true

error.text.style =
font: "#{Config.fontSize}px/1em Helvetica"
lineHeight: "#{parseInt(error.text.height * 0.95)}px"
textAlign: "center"
wordWrap: "break-word"
textOverflow: "ellipsis"

error.onTap =>
@_errorLayer?.destroy()
@_errorLayer = null

@_errorLayer = error

return @_errorLayer

resize: =>
return unless @_errorLayer
@_errorLayer.width = Screen.width
@_errorLayer.y = Align.bottom
@_errorLayer.text.size = Utils.frameInset(@_errorLayer, Config.textInset)
@_errorLayer.text.point = Align.center

showError: (message) ->

error = @createLayer()
error.scale = 1.1
error.animate
properties:
scale: 1
curve: "spring(800, 60, 10)"

error.text.html = message

destroy: ->
@_context?.destroy()

_errorDisplay = null

exports.enable = ->
return if _errorDisplay
_errorDisplay = new ErrorDisplay

exports.disable = ->
return unless _errorDisplay
_errorDisplay.destroy()
_errorDisplay = null
@@ -1,4 +1,5 @@
# exports.Hints = require "./Hints"
exports.TouchEmulator = require "./TouchEmulator"
exports.MobileScrollFix = require "./MobileScrollFix"
exports.ErrorDisplay = require "./ErrorDisplay"
exports.OmitNew = require "./OmitNew"
@@ -61,4 +61,5 @@ Framer.CurrentContext = Framer.DefaultContext

window.Canvas = new (require "./Canvas").Canvas
Framer.Extras.MobileScrollFix.enable() if Utils.isMobile()
Framer.Extras.ErrorDisplay.enable() if not Utils.isFramerStudio()
Framer.Extras.TouchEmulator.enable() if not Utils.isTouch()

0 comments on commit ea52737

Please sign in to comment.
You can’t perform that action at this time.