Permalink
Browse files

Deal with interactive html added and pointer events

  • Loading branch information...
koenbok committed Sep 25, 2014
1 parent fe9fa63 commit ffd106e5be10fb67f182b569024b911b76499695
Showing with 32 additions and 98 deletions.
  1. +4 −89 extras/CactusFramer/static/app.coffee
  2. +8 −0 framer/Config.coffee
  3. +4 −4 framer/Layer.coffee
  4. +16 −5 test/tests/LayerTest.coffee
@@ -1,92 +1,7 @@
getTime = Date.now
if performance.now
getTime = -> performance.now()
# class Timer
# constructor: -> @start()
# start: -> @_startTime = getTime()
# stop: -> getTime() - @_startTime
class FPSTimer
constructor: -> @start()
start: ->
@_frameCount = 0
@_startTime = getTime()
Framer.Loop.on("render", @_tick)
stop: ->
time = getTime() - @_startTime
Framer.Loop.off("render", @_tick)
results =
time: time
frames: @_frameCount
fps: 1000 / (time / @_frameCount)
return results
_tick: =>
@_frameCount++
run = (options, callback) ->
context = new Framer.Context(name:"TestRun")
context.run -> _run options, (results) ->
context.reset()
callback(results)
_run = (options, callback) ->
startTime = getTime()
results = {}
LAYERS = for i in [1..options.n]
layerC = new Layer
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight
results.layers = Framer.CurrentContext._layerList.length
results.buildTotal = getTime() - startTime
results.buildLayer = results.buildTotal / results.layers
t1 = new FPSTimer
for layer in LAYERS
layer.animate
properties:
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight
curve: "spring(1000, 10, 0)"
layer.on Events.AnimationEnd, ->
results.fps = t1.stop()
callback(results)
Utils.domComplete ->
c = 0
callback = (results) ->
if results
print "#{c} - #{results.layers}
Build: #{Utils.round(results.buildTotal, 0)}ms/#{Utils.round(results.buildLayer, 2)}ms
FPS: #{Utils.round(results.fps.fps, 1)}"
if c < 100
c++
run {n: c * 20}, callback
callback()
layer = new Layer
print layer.ignoreEvents
layer.html = "<input type='text'>"
print layer.ignoreEvents
View
@@ -22,6 +22,14 @@ FramerCSS = """
-webkit-user-select: none;
}
.framerLayer input,
.framerLayer textarea,
.framerLayer select,
.framerLayer option
{
pointer-events: auto;
}
"""
Utils.domComplete -> Utils.insertCSS(FramerCSS)
View
@@ -342,10 +342,10 @@ class exports.Layer extends BaseClass
# If the contents contains something else than plain text
# then we turn off ignoreEvents so buttons etc will work.
if not (
@_elementHTML.childNodes.length == 1 and
@_elementHTML.childNodes[0].nodeName == "#text")
@ignoreEvents = false
# if not (
# @_elementHTML.childNodes.length == 1 and
# @_elementHTML.childNodes[0].nodeName == "#text")
# @ignoreEvents = false
@emit "change:html"
@@ -665,14 +665,25 @@ describe "Layer", ->
layer._elementHTML.innerHTML.should.equal "Hello"
layer.ignoreEvents.should.equal true
it "should set other html", ->
it "should set interactive html and allow pointer events", ->
tags = ["input", "select", "textarea", "option"]
html = ""
for tag in tags
html += "<#{tag}></#{tag}>"
layer = new Layer
layer.html = "<input type=\"button\">"
layer.html = html
for tag in tags
element = layer.querySelectorAll(tag)[0]
style = window.getComputedStyle(element)
style["pointer-events"].should.equal "auto"
# style["-webkit-user-select"].should.equal "auto"
layer._element.childNodes[0].should.equal layer._elementHTML
layer._elementHTML.innerHTML.should.equal "<input type=\"button\">"
layer.ignoreEvents.should.equal false
it "should work with querySelectorAll", ->

0 comments on commit ffd106e

Please sign in to comment.