Skip to content
Permalink
Browse files

Merge pull request #404 from koenbok/feature/customDeviceImprovements

Improve support for custom devices
  • Loading branch information
Jonas Treub
Jonas Treub 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.
You can’t perform that action at this time.