Permalink
Browse files

Hints improvements

- Disable in Framer, only when shared
- Check event types for interactive events
- Only outlines
  • Loading branch information...
koenbok committed Jul 28, 2016
1 parent 27d8ed3 commit d071ba45c81479cd0fbd58bf8f0c9a712f8462c1
Showing with 40 additions and 33 deletions.
  1. +12 −0 framer/Events.coffee
  2. +1 −0 framer/Extras/Hints.coffee
  3. +1 −1 framer/Framer.coffee
  4. +26 −32 framer/Layer.coffee
View
@@ -60,4 +60,16 @@ Events.wrap = (element) ->
Events.isGesture = (eventName) ->
return eventName in Gestures
interactiveEvents = _.values(Gestures).concat([
Events.TouchStart,
Events.TouchEnd,
Events.MouseUp,
Events.MouseDown,
Events.MouseWheel,
Events.DoubleClick
])
Events.isInteractive = (eventName) ->
return eventName in interactiveEvents
exports.Events = Events
@@ -18,6 +18,7 @@ class Hints
_handleUp: (event) =>
# See what layer we actually tapped
layer = Framer.CurrentContext.layerForElement(@_target)
# If this is a layer with interaction, we do not show any hints
View
@@ -72,7 +72,7 @@ Framer.Extras.MobileScrollFix.enable() if Utils.isMobile()
Framer.Extras.TouchEmulator.enable() if not Utils.isTouch()
Framer.Extras.ErrorDisplay.enable() if not Utils.isFramerStudio()
Framer.Extras.Preloader.enable() if not Utils.isFramerStudio()
Framer.Extras.Hints.enable()
Framer.Extras.Hints.enable() if not Utils.isFramerStudio()
if Framer.Preloader?
Framer.Preloader.once("end", Framer.Loop.start)
View
@@ -1247,55 +1247,49 @@ class exports.Layer extends BaseClass
return true
shouldShowHint: (targetLayer) ->
shouldShowHint: ->
# Don't show hints if the layer is not interactive
if @ignoreEvents is true
return false
# Don't show any hints while we are animating
# return false if @isAnimating
if @isAnimating
return false
# for parent in @ancestors()
# return false if parent.isAnimating
for parent in @ancestors()
return false if parent.isAnimating
# Don't show hints if we cannot be dragged
if @_draggable
if @_draggable.horizontal is false and @_draggable.vertical is false
return false
# Playing around with hiding layers that are covering this one, but
# it would be less "correct" as those layers would still respond at clicks
# although the hints would imply they wouldn't.
# root = @root()
# orderedLayers = _.reverse(_.sortBy(@context.layers, "index"))
# Don't show hints if there is a draggable that cannot be dragged.
if @_draggable and @_draggable.horizontal is false and @_draggable.vertical is false
return false
# for layer in _.reverse(_.sortBy(@context.layers, "index"))
# if layer.parent is null
# if Utils.frameInFrame(@_visibleFrame(),
# Utils.frameMerge(layer.frame, layer.contentFrame()))
# return false
# If we don't ignore events on this layer, make sure the layer is listening to
# an interactive event so there is a decent change something is happening after
# we click it.
# Don't show hints if we ignore events
if @ignoreEvents is false
return true
for eventName in @listenerEvents()
return true if Events.isInteractive(eventName)
return false
showHint: (highlightFrame) ->
# Start an animation with a blue rectangle fading out over time
# Start an animation with a rectangle fading out over time
layer = new Layer
frame: highlightFrame
backgroundColor: new Color("9013FE").alpha(.5)
borderColor: new Color("white").alpha(.8)
frame: Utils.frameInset(highlightFrame, -1)
backgroundColor: null
borderColor: new Color("9013FE").alpha(.8)
borderRadius: @borderRadius * Utils.average([@canvasScaleX(), @canvasScaleY()])
borderWidth: 2
borderWidth: 3
# Only show outlines if a highlight is fullscreen
if Utils.frameInFrame(@context.canvasFrame, highlightFrame)
layer.backgroundColor = null
# if Utils.frameInFrame(@context.canvasFrame, highlightFrame)
# layer.backgroundColor = null
# layer.borderColor = new Color("9013FE").alpha(.5)
animation = layer.animate
properties:
opacity: 0
properties: {opacity: 0}
curve: "ease-out"
time: 0.5

0 comments on commit d071ba4

Please sign in to comment.