Skip to content
Permalink
Browse files

Add GridComponent

  • Loading branch information
koenbok committed Apr 29, 2016
1 parent 1a6bb08 commit 4cf56116c17565cf6710454ab0836e66a52ea2d1
Showing with 112 additions and 6 deletions.
  1. +109 −0 framer/Components/GridComponent.coffee
  2. +3 −6 framer/Framer.coffee
@@ -0,0 +1,109 @@
Utils = require "../Utils"

{Layer} = require "../Layer"


class exports.GridComponent extends Layer

constructor: (options) ->

defaults =
rows: 3
columns: 3
spacing: 0
backgroundColor: "transparent"

options = _.defaults(options, defaults)

super options

_.extend(@, _.pick(options, _.keys(defaults)))

@define "rows",
get: -> @_rows
set: (value) ->
@_rows = value
@_render()

@define "columns",
get: -> @_columns
set: (value) ->
@_columns = value
@_render()

@define "spacing",
get: -> @_spacing or {horizontal: 0, vertical: 0}
set: (value) ->
if _.isNumber(value)
value = {horizontal: value, vertical: value}
@_spacing = value
@_render()

@define "renderCell",
get: -> @_renderCell or @_defaultRenderCell
set: (f) ->
return if f is @_renderCell
throw Error "GridComponent.renderCell should be a function, not #{typeof(f)}" unless _.isFunction(f)
@_renderCell = f
@render()

@define "cellWidth",
get: -> (@width - (@spacing.horizontal * (@columns - 1))) / @columns

@define "cellHeight",
get: -> (@height - (@spacing.vertical * (@rows - 1))) / @rows

@define "cells",
get: -> _.values(@_cells)

cellX: (row) ->
row * (@cellWidth + @spacing.horizontal)

cellY: (column) ->
column * (@cellHeight + @spacing.vertical)

cellFrame: (column, row) ->
frame =
x: @cellX(column)
y: @cellY(row)
width: @cellWidth
height: @cellHeight

cell: (column, row) ->
@_cells["#{column}:#{row}"]

render: ->
@_render()

# columns and rows

_render: ->

@_reset()

for column in [@columns-1..0]
for row in [@rows-1..0]

frame =
x: @cellX(column)
y: @cellY(row)
width: @cellWidth
height: @cellHeight

cell = new Layer
parent: @
frame: frame
name: "Cell #{column}:#{row}"

@renderCell(cell, row, column)

@_cells["#{column}:#{row}"] = cell

_defaultRenderCell: (cell, column, row) ->
cell.backgroundColor = Utils.randomColor()
Utils.labelLayer(cell, "#{row}:#{column}")

_reset: ->
_.invoke(@cells, "destroy")
@_cells = {}

@@ -1,9 +1,5 @@
{_} = require "./Underscore"

# Before we do anything else, we need to patch touch events
if window.ontouchstart is undefined
window.ontouchstart = null

Framer = {}

# Root level modules
@@ -27,9 +23,10 @@ Framer.ScrollComponent = (require "./Components/ScrollComponent").ScrollComponen
Framer.PageComponent = (require "./Components/PageComponent").PageComponent
Framer.SliderComponent = (require "./Components/SliderComponent").SliderComponent
Framer.DeviceComponent = (require "./Components/DeviceComponent").DeviceComponent
Framer.GridComponent = (require "./Components/GridComponent").GridComponent
Framer.DeviceView = Framer.DeviceComponent # Compat

_.extend window, Framer if window
_.extend(window, Framer) if window

# Framer level modules
Framer.Context = (require "./Context").Context
@@ -64,4 +61,4 @@ Framer.DefaultContext.backgroundColor = "white"
Framer.CurrentContext = Framer.DefaultContext

Framer.Extras.MobileScrollFix.enable() if Utils.isMobile()
Framer.Extras.TouchEmulator.enable() if not Utils.isTouch()
Framer.Extras.TouchEmulator.enable() if not Utils.isTouch()

0 comments on commit 4cf5611

Please sign in to comment.