Permalink
Browse files

Merge pull request #404 from koenbok/feature/customDeviceImprovements

Improve support for custom devices
  • Loading branch information...
jonastreub committed Aug 24, 2016
2 parents 8488d33 + 7415853 commit 768739813fdc0a6549577a531d98acc8d92b226d
Showing with 53 additions and 35 deletions.
  1. +8 −13 extras/Studio.framer/app.coffee
  2. +3 −3 extras/Studio.framer/framer/config.json
  3. +42 −19 framer/Components/DeviceComponent.coffee
@@ -1,17 +1,12 @@
# Framer.Extras.Hints.disable()
Framer.Info =
title: ""
author: "Koen Bok"
twitter: ""
description: ""
# Framer.Extras.Preloader.enable()
Device.customize
deviceType: Device.Type.Tablet
screenWidth: 720
screenHeight: 1024
deviceImage: "http://f.cl.ly/items/001L0v3c1f120t0p2z24/custom.png"
deviceImageWidth: 800
deviceImageHeight: 1214
grid = new GridComponent
size: Screen
Screen.backgroundColor = "28affa"
grid.renderCell = (layer) ->
layer.image = Utils.randomImage(layer) + "cache=#{Date.now()}"
layer.onTap ->
@@ -1,12 +1,12 @@
{
"propertyPanelToggleStates" : {
"Filters" : false
},
"deviceOrientation" : 0,
"sharedPrototype" : 1,
"contentScale" : 1,
"deviceType" : "apple-iphone-5s-gold",
"selectedHand" : "iphone-hands-2",
"deviceType" : "custom",
"selectedHand" : "iphone-hands-1",
"updateDelay" : 0.3,
"deviceScale" : "fit",
"foldedCodeRanges" : [
@@ -59,6 +59,11 @@ class exports.DeviceComponent extends BaseClass
_.extend(@, _.defaults(options, defaults))
@Type =
Tablet: "tablet"
Phone: "phone"
Browser: "browser"
_setup: ->
if @_setupDone
@@ -229,12 +234,16 @@ class exports.DeviceComponent extends BaseClass
###########################################################################
# DEVICE TYPE
customize: (deviceProps) =>
Devices.custom = _.defaults deviceProps, Devices.custom
@deviceType = "custom"
@define "deviceType",
get: ->
@_deviceType
set: (deviceType) ->
if deviceType is @_deviceType
if deviceType is @_deviceType and deviceType isnt "custom"
return
device = null
@@ -264,6 +273,8 @@ class exports.DeviceComponent extends BaseClass
@_update()
@emit("change:deviceType")
@viewport.point = @_viewportOrientationOffset()
if shouldZoomToFit
@deviceScale = "fit"
@@ -459,24 +470,7 @@ class exports.DeviceComponent extends BaseClass
rotationZ: -@_orientation
scale: @_calculatePhoneScale()
[width, height] = @_getOrientationDimensions(@_device.screenWidth, @_device.screenHeight)
@content.width = width
@content.height = height
offset = (@screen.width - width) / 2
offset *= -1 if @_orientation == -90
[x, y] = [0, 0]
if @isLandscape
x = offset
y = offset
contentProperties =
rotationZ: @_orientation
x: x
y: y
contentProperties = @_viewportOrientationOffset()
@hands.animateStop()
@viewport.animateStop()
@@ -499,6 +493,27 @@ class exports.DeviceComponent extends BaseClass
@emit("change:orientation", @_orientation)
_viewportOrientationOffset: =>
[width, height] = @_getOrientationDimensions(@_device.screenWidth, @_device.screenHeight)
@content.width = width
@content.height = height
offset = (@screen.width - width) / 2
offset *= -1 if @_orientation == -90
[x, y] = [0, 0]
if @isLandscape
x = offset
y = offset
return contentProperties =
rotationZ: @_orientation
x: x
y: y
_orientationChange: =>
@_orientation = window.orientation
@_update()
@@ -991,6 +1006,14 @@ Devices =
deviceType: "desktop"
backgroundColor: "white"
"custom":
name: "Custom"
deviceImageWidth: 874
deviceImageHeight: 1792
screenWidth: 750
screenHeight: 1334
deviceType: "phone"
# iPad Air
"apple-ipad-air-2-silver": _.clone(iPadAir2BaseDevice)
"apple-ipad-air-2-gold": _.clone(iPadAir2BaseDevice)

0 comments on commit 7687398

Please sign in to comment.