Merge branch 'master' into slider-update

# Conflicts: # extras/Studio.framer/framer/framer.debug.js.map # extras/Studio.framer/index.html
koenbok · Dec 29, 2015 · e59f7b2 · e59f7b2
2 parents e6bc5cc + d8ac785
commit e59f7b2
Show file tree

Hide file tree

Showing 128 changed files with 4,408 additions and 247 deletions.
diff --git a/extras/Perf.framer/framer/config.json b/extras/Perf.framer/framer/config.json
@@ -3,7 +3,7 @@
   "sharedPrototype" : 1,
   "deviceOrientation" : 0,
   "contentScale" : 1,
-  "deviceType" : "fullscreen",
+  "deviceType" : "iphone-6-silver",
   "updateDelay" : 0.3,
   "deviceScale" : -1,
   "delay" : 0.3

diff --git a/extras/Perf.framer/framer/framer.generated.js b/extras/Perf.framer/framer/framer.generated.js
@@ -343,7 +343,9 @@ ContextListener = (function() {
   }
 
   ContextListener.prototype._update = function() {
-    return bridge.send("ui:layers", _.map(this._context._layerList, getLayerProperties));
+    var layers;
+    layers = this._context._layers || this._context._layerList;
+    return bridge.send("ui:layers", _.map(layers, getLayerProperties));
   };
 
   ContextListener.prototype.send = function(eventName, info) {
@@ -371,7 +373,7 @@ ContextListener = (function() {
     results = [];
     for (i = 0, len = ContextListenerPropertyUpdateKeys.length; i < len; i++) {
       key = ContextListenerPropertyUpdateKeys[i];
-      results.push(layer.on("change:" + key, this.update));
+      results.push(layer.off("change:" + key, this.update));
     }
     return results;
   };
@@ -640,17 +642,6 @@ Runtime = (function(superClass) {
         });
       });
     }
-    Framer.Importer.load = function(path) {
-      var importer, layer, layers, name;
-      importer = new Framer.Importer(path);
-      layers = importer.load();
-      for (name in layers) {
-        layer = layers[name];
-        layer.__framerImportedFromPath = path;
-        layer;
-      }
-      return layers;
-    };
     bridge.send("runtime.init");
     return this._errorHandlerSetup();
   };
@@ -713,10 +704,10 @@ if (window.require == null) {
 }
 
 getLayerById = function(id) {
-  var i, layer, len, ref;
-  ref = Framer.CurrentContext._layerList;
-  for (i = 0, len = ref.length; i < len; i++) {
-    layer = ref[i];
+  var i, layer, layers, len;
+  layers = Framer.CurrentContext._layers || Framer.CurrentContext._layerList;
+  for (i = 0, len = layers.length; i < len; i++) {
+    layer = layers[i];
     if (layer.id === id) {
       return layer;
     }

diff --git a/extras/Perf.framer/framer/framer.js.map b/extras/Perf.framer/framer/framer.js.map
diff --git a/extras/Perf.framer/framer/framer.modules.js b/extras/Perf.framer/framer/framer.modules.js
diff --git a/extras/Perf.framer/index.html b/extras/Perf.framer/index.html
@@ -26,7 +26,7 @@
 
 		<script src="framer/coffee-script.js"></script>
 
-		<script src="framer/framer.js"></script>
+		<script src="framer/framer.debug.js"></script>
 		<script src="framer/framer.generated.js"></script>
 		<script src="framer/framer.modules.js"></script>
 		<script src="framer/framer.init.js"></script>

diff --git a/extras/Studio.framer/.gitignore b/extras/Studio.framer/.gitignore
@@ -29,7 +29,6 @@ framer/backup.coffee
 framer/backups
 framer/backups/*
 framer/.*.hash
-framer/framer.debug.js
 framer/framer.generated.js
 framer/framer.modules.js
 framer/images/*
diff --git a/extras/Studio.framer/framer/framer.debug.js b/extras/Studio.framer/framer/framer.debug.js
@@ -0,0 +1 @@
+../../../build/framer.debug.js
diff --git a/extras/Studio.framer/framer/framer.debug.js.map b/extras/Studio.framer/framer/framer.debug.js.map
diff --git a/extras/Studio.framer/framer/framer.debug.js.map b/extras/Studio.framer/framer/framer.debug.js.map
diff --git a/extras/Studio.framer/index.html b/extras/Studio.framer/index.html
@@ -2,7 +2,7 @@
 <html>
 	<head>
 		<meta charset="utf-8">
-
+		
 		<meta name="format-detection" content="telephone=no">
 		<meta name="apple-mobile-web-app-capable" content="yes">
 		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
@@ -36,4 +36,4 @@
 	</head>
 	<body>
 	</body>
-</html>
+</html>
diff --git a/framer/AnimationLoop.coffee b/framer/AnimationLoop.coffee
@@ -29,11 +29,9 @@ class exports.AnimationLoop extends EventEmitter
 		# Workaraound for RAF bug on 10.10
 		# https://bugs.webkit.org/show_bug.cgi?id=137599
 
-		if Utils.webkitVersion() > 600 and Utils.isDesktop()
-			@raf = false
-
-		if Utils.webkitVersion() > 600 and Utils.isFramerStudio()
-			@raf = false
+		if Utils.webkitVersion() > 600 and Utils.webkitVersion() < 601
+			if Utils.isFramerStudio() or Utils.isDesktop()
+				@raf = false
 
 		# To avoid event emitter warning
 		@maximumListeners = Infinity

diff --git a/framer/Color.coffee b/framer/Color.coffee
@@ -12,6 +12,9 @@ ColorType =
 class exports.Color extends BaseClass
 	constructor: (@color, r, g, b) ->
 
+		if @color == ""
+			@color = null
+
 		color = @color
 
 		# If input already is a Color object return input
@@ -456,7 +459,8 @@ convertToPercentage = (n) ->
 # If there isn't, it will be set to 1 by default.
 correctAlpha = (a) ->
 	a = parseFloat(a)
-	if isNaN(a) or a < 0 or a > 1 then a = 1
+	if a < 0 then a = 0
+	if isNaN(a) or a > 1 then a = 1
 	return a
 
 # Take input from [0, n] and return it as [0, 1]

diff --git a/framer/Components/DeviceComponent.coffee b/framer/Components/DeviceComponent.coffee
@@ -279,19 +279,22 @@ class exports.DeviceComponent extends BaseClass
 		if _.startsWith(name, "http://") or _.startsWith(name, "https://")
 			return name
 
+		# If this device is added by the user we use the name as it is
+		if @_deviceType not in BuiltInDevices
+			return name
+
+		# We want to get these image from our public resources server
+		resourceUrl = "//resources.framerjs.com/static/DeviceResources"
+
 		# If we're running Framer Studio and have local files, we'd like to use those
 		if Utils.isFramerStudio() and window.FramerStudioInfo
-			resourceUrl = window.FramerStudioInfo.deviceImagesUrl
-
-		# If not, we want to get these image from our public resources server
-		else
-			resourceUrl = "//resources.framerjs.com/static/DeviceResources"
+			resourceUrl = window.FramerStudioInfo.deviceImagesUrl	
 
 		# We'd like to use jp2 if possible, or check if we don't for this specific device
-		if Utils.isJP2Supported() and @_device.deviceImageJP2 isnt false
+		if Utils.isJP2Supported() and @_device.deviceImageJP2 is true
 			return "#{resourceUrl}/#{name.replace(".png", ".jp2")}"
-		else
-			return "#{resourceUrl}/#{name}"
+
+		return "#{resourceUrl}/#{name}"
 
 	###########################################################################
 	# DEVICE ZOOM
@@ -823,5 +826,6 @@ Devices =
 	"applewatchedition-42-gold-sportband-white": _.clone(AppleWatch42Device)
 
 
-
 exports.DeviceComponent.Devices = Devices
+
+BuiltInDevices = _.keys(Devices)
diff --git a/framer/Components/ScrollComponent.coffee b/framer/Components/ScrollComponent.coffee
@@ -162,7 +162,7 @@ class exports.ScrollComponent extends Layer
 		# color around until you set a content layer so you can see the ScrollComponent 
 		# on your screen after creation.
 		if @content.subLayers.length
-			if @content.backgroundColor.isEqual(Framer.Defaults.Layer.backgroundColor)
+			if @content.backgroundColor?.isEqual(Framer.Defaults.Layer.backgroundColor)
 				@content.backgroundColor = null
 
 	@define "scroll",
@@ -409,10 +409,27 @@ wrapComponent = (instance, layer, options = {correct:true}) ->
 			layer.x = layer.y = 0
 			layer = wrapper
 
-			console.log "Corrected the scroll component without sub layers"
-
-	for propKey in ["frame", "image", "name"]
-		scroll[propKey] = layer[propKey]
+			# console.info "Corrected the scroll component without sub layers"
+
+	scroll.frame = layer.frame
+	scroll.superLayer = layer.superLayer
+	scroll.index = layer.index
+
+	# Copy over the name, if we don't have it try to use the variable
+	# name from Framer Studio if it was given.
+	if layer.name and layer.name isnt ""
+		scroll.name = layer.name
+	else if layer.__framerInstanceInfo?.name
+		scroll.name = layer.__framerInstanceInfo.name
+
+	# If we have an image set, it makes way more sense to add it to the
+	# background of the wrapper then the content.
+	if layer.image
+		scroll.image = layer.image
+		layer.image = null
+
+	# Set the original layer as the content layer for the scroll
+	scroll.setContentLayer(layer)
 
 	# https://github.com/motif/Company/issues/208
 
@@ -433,23 +450,11 @@ wrapComponent = (instance, layer, options = {correct:true}) ->
 		if screenFrame.x < Screen.width
 			if screenFrame.x + screenFrame.width > Screen.width
 				scroll.width = Screen.width - screenFrame.x
-				console.log "Corrected the scroll width to #{scroll.width}"
+				# console.info "Corrected the scroll width to #{scroll.width}"
 
 		if screenFrame.y < Screen.height
 			if screenFrame.y + screenFrame.height > Screen.height
 				scroll.height = Screen.height - screenFrame.y
-				console.log "Corrected the scroll height to #{scroll.height}"
+				# console.info "Corrected the scroll height to #{scroll.height}"
 
-
-	# Now copy over all the content to the new scroll component
-	for subLayer in layer.subLayers
-		subLayerIndex = subLayer.index
-		subLayer.superLayer = scroll.content
-		subLayer.index = subLayerIndex
-
-	scroll.superLayer = layer.superLayer
-	scroll.index = layer.index
-
-	layer.destroy()
-
 	return scroll
diff --git a/framer/Context.coffee b/framer/Context.coffee
@@ -1,8 +1,11 @@
 {_} = require "./Underscore"
 
 Utils = require "./Utils"
-{BaseClass} = require "./BaseClass"
+
 {Config} = require "./Config"
+{Defaults} = require "./Defaults"
+
+{BaseClass} = require "./BaseClass"
 {DOMEventManager} = require "./DOMEventManager"
 
 ###
@@ -37,19 +40,21 @@ class exports.Context extends BaseClass
 		get: -> @_element
 
 	constructor: (options={}) ->
-
-		super
 
-		options = _.defaults options,
-			parent: null
-			name: null
+		options = Defaults.getDefaults("Context", options)
+
+		super
 
 		if not options.name
 			throw Error("Contexts need a name")
 
 		@_parent = options.parent
 		@_name = options.name
 
+		@perspective = options.perspective
+		@perspectiveOriginX = options.perspectiveOriginX
+		@perspectiveOriginY = options.perspectiveOriginY
+
 		@reset()
 
 	reset: ->
@@ -211,6 +216,7 @@ class exports.Context extends BaseClass
 		@_element = document.createElement("div")
 		@_element.id = "FramerContextRoot-#{@_name}"
 		@_element.classList.add("framerContext")
+		@_element.style["webkitPerspective"] = @perspective
 
 		@__pendingElementAppend = =>
 			parentElement = @_parent?._element
@@ -254,3 +260,39 @@ class exports.Context extends BaseClass
 	@define "size",  get: -> _.pluck(@frame, ["x", "y"])
 	@define "point", get: -> _.pluck(@frame, ["width", "height"])
 
+	@define "backgroundColor",
+		get: ->
+			return @_element?.style["backgroundColor"]
+		set: (value) ->
+			if Color.isColor(value)
+				@_element?.style["backgroundColor"] = new Color value.toString()
+
+	@define "perspective",
+		get: ->
+			return @_perspective
+		set: (value) ->
+			if _.isNumber(value)
+				@_perspective = value
+				@_element?.style["webkitPerspective"] = @_perspective
+
+	_updatePerspective: ->
+		@_element?.style["webkitPerspectiveOrigin"] = "#{@perspectiveOriginX * 100}% #{@perspectiveOriginY * 100}%"
+
+	@define "perspectiveOriginX",
+		get: ->
+			return @_perspectiveOriginX if _.isNumber(@_perspectiveOriginX)
+			return 0.5
+		set: (value) ->
+			if _.isNumber(value)
+				@_perspectiveOriginX = value
+				@_updatePerspective()
+
+	@define "perspectiveOriginY",
+		get: ->
+				return @_perspectiveOriginY if _.isNumber(@_perspectiveOriginY)
+				return .5
+		set: (value) ->
+			if _.isNumber(value)
+				@_perspectiveOriginY = value
+				@_updatePerspective()
+
diff --git a/framer/DOMEventManager.coffee b/framer/DOMEventManager.coffee
@@ -9,9 +9,9 @@ class DOMEventManagerElement extends EventEmitter
 
 	constructor: (@element) ->
 
-	addListener: (eventName, listener) ->	
+	addListener: (eventName, listener, capture=false) ->	
 		super(eventName, listener)
-		@element.addEventListener(eventName, listener)
+		@element.addEventListener(eventName, listener, capture)
 
 	removeListener: (eventName, listener) ->
 		super(eventName, listener)

diff --git a/framer/Defaults.coffee b/framer/Defaults.coffee
@@ -15,6 +15,12 @@ Originals =
 		# curve: "spring(400,40,0)" # Or, the Cemre-Curve
 		curve: "ease"
 		time: 1
+	Context:
+		perspective: 1200
+		perspectiveOriginX: 0.5
+		perspectiveOriginY: 0.5
+		parent: null
+		name: null
 	DeviceComponent:
 		fullScreen: false
 		padding: 50

diff --git a/framer/Framer.coffee b/framer/Framer.coffee
@@ -49,13 +49,13 @@ Utils.domComplete(Framer.Loop.start)
 
 window.Framer = Framer if window
 
-Framer.DefaultContext = new Framer.Context(name:"Default")
-Framer.CurrentContext = Framer.DefaultContext
-
-# Fix for mobile scrolling
-Framer.Extras.MobileScrollFix.enable() if Utils.isMobile()
-
 # Set the defaults
 Defaults = (require "./Defaults").Defaults
 Defaults.setup()
 Framer.resetDefaults = Defaults.reset
+
+Framer.DefaultContext = new Framer.Context(name:"Default")
+Framer.CurrentContext = Framer.DefaultContext
+
+# Fix for mobile scrolling
+Framer.Extras.MobileScrollFix.enable() if Utils.isMobile()