app.coffee

# Project Info
# This info is presented in a widget when you share.
# http://framerjs.com/docs/#info.info

Framer.Info =
	title: "Infinity looping list"
	author: "Jungho song"
	twitter: "threeword"
	description: "- Support up and down scroll.\n- Recycle item layer of list.\n\n*Compatible with all devices."
Framer.Extras.ShareInfo.enable()
# Dummy data (Use http://dummi.io)
dummi = [
  {
    "id": 0,
    "fullName": "Winifred Nash",
    "title": "Recusandae Unde Sapiente Deleniti",
    "datePublished": "06/03/2003"
  },
  {
    "id": 1,
    "fullName": "Edith Porter",
    "title": "Optio",
    "datePublished": "08/03/2013"
  },
  {
    "id": 2,
    "fullName": "Sophie Graves",
    "title": "Dicta",
    "datePublished": "04/16/2006"
  },
  {
    "id": 3,
    "fullName": "Leona Turner",
    "title": "Sapiente Corporis Delectus",
    "datePublished": "01/09/2002"
  },
  {
    "id": 4,
    "fullName": "Genevieve Moran",
    "title": "Neque",
    "datePublished": "08/03/2008"
  },
  {
    "id": 5,
    "fullName": "Lois Tucker",
    "title": "Quam Minima Incidunt Impedit",
    "datePublished": "02/24/2016"
  },
  {
    "id": 6,
    "fullName": "Mamie Norris",
    "title": "Labore Suscipit Nesciunt Facere",
    "datePublished": "01/10/2001"
  },
  {
    "id": 7,
    "fullName": "Hilda Medina",
    "title": "Alias Voluptas Atque Voluptatum Ea",
    "datePublished": "12/11/2007"
  },
  {
    "id": 8,
    "fullName": "Flora Hart",
    "title": "Est Soluta Sunt Vel",
    "datePublished": "01/22/2007"
  },
  {
    "id": 9,
    "fullName": "Bernice Hunt",
    "title": "Obcaecati In",
    "datePublished": "02/02/2000"
  },
  {
    "id": 10,
    "fullName": "Matilda Nguyen",
    "title": "Doloremque Soluta Architecto",
    "datePublished": "05/25/2008"
  },
  {
    "id": 11,
    "fullName": "Lenora Douglas",
    "title": "Libero",
    "datePublished": "09/29/2012"
  },
  {
    "id": 12,
    "fullName": "Harriett Robbins",
    "title": "Quis Tempora Suscipit",
    "datePublished": "08/04/2013"
  },
  {
    "id": 13,
    "fullName": "Cynthia Howard",
    "title": "Inventore Molestias Culpa Accusantium",
    "datePublished": "03/04/2012"
  },
  {
    "id": 14,
    "fullName": "Della Richardson",
    "title": "Ipsa",
    "datePublished": "12/09/2000"
  },
  {
    "id": 15,
    "fullName": "Dollie Harris",
    "title": "Qui",
    "datePublished": "03/13/2013"
  },
  {
    "id": 16,
    "fullName": "Violet Conner",
    "title": "Ea Libero",
    "datePublished": "09/18/2007"
  },
  {
    "id": 17,
    "fullName": "Eula Brewer",
    "title": "Numquam Ad Consectetur",
    "datePublished": "02/04/2001"
  },
  {
    "id": 18,
    "fullName": "Josephine Webb",
    "title": "Ab",
    "datePublished": "07/03/2007"
  },
  {
    "id": 19,
    "fullName": "Catherine Morales",
    "title": "Beatae Facere",
    "datePublished": "09/17/2006"
  },
  {
    "id": 20,
    "fullName": "Betty Andrews",
    "title": "Nisi Ipsam Cupiditate Magnam",
    "datePublished": "03/14/2015"
  },
  {
    "id": 21,
    "fullName": "Maud McKinney",
    "title": "Accusamus Neque",
    "datePublished": "06/04/2007"
  },
  {
    "id": 22,
    "fullName": "Estella Bishop",
    "title": "Cupiditate Ex Quae Odit",
    "datePublished": "04/09/2013"
  },
  {
    "id": 23,
    "fullName": "Iva Frank",
    "title": "Numquam Tempore Omnis",
    "datePublished": "09/27/2011"
  },
  {
    "id": 24,
    "fullName": "Francis Johnston",
    "title": "Sunt A Pariatur",
    "datePublished": "04/20/2013"
  },
  {
    "id": 25,
    "fullName": "Sallie Yates",
    "title": "Magnam Aliquam Sequi",
    "datePublished": "11/07/2002"
  },
  {
    "id": 26,
    "fullName": "Marie Mack",
    "title": "Blanditiis Possimus Dolor Sequi Ad",
    "datePublished": "06/04/2000"
  },
  {
    "id": 27,
    "fullName": "Birdie Bradley",
    "title": "Magni",
    "datePublished": "09/21/2003"
  },
  {
    "id": 28,
    "fullName": "Etta Roberson",
    "title": "Ullam Ipsum",
    "datePublished": "05/12/2008"
  },
  {
    "id": 29,
    "fullName": "Lola Sanchez",
    "title": "Fuga",
    "datePublished": "02/17/2011"
  },
  {
    "id": 30,
    "fullName": "Lula Morton",
    "title": "Aliquid Aperiam",
    "datePublished": "11/24/2011"
  },
  {
    "id": 31,
    "fullName": "Minerva Rodriguez",
    "title": "Itaque Quidem Officiis Laboriosam Ipsam",
    "datePublished": "01/25/2010"
  },
  {
    "id": 32,
    "fullName": "Effie Williams",
    "title": "Pariatur Recusandae",
    "datePublished": "07/30/2001"
  },
  {
    "id": 33,
    "fullName": "Viola Marshall",
    "title": "Nam Porro Earum A",
    "datePublished": "12/14/2016"
  },
  {
    "id": 34,
    "fullName": "Mattie Simmons",
    "title": "Dignissimos Tenetur Earum",
    "datePublished": "06/27/2004"
  },
  {
    "id": 35,
    "fullName": "Lettie Martinez",
    "title": "Doloribus Nemo Officia Quidem Veritatis",
    "datePublished": "03/18/2000"
  },
  {
    "id": 36,
    "fullName": "Lois Mendez",
    "title": "Culpa Labore Error Sint Dolorem",
    "datePublished": "08/20/2013"
  },
  {
    "id": 37,
    "fullName": "Roxie Gonzalez",
    "title": "Nisi",
    "datePublished": "05/20/2007"
  },
  {
    "id": 38,
    "fullName": "Lou Conner",
    "title": "Veritatis",
    "datePublished": "01/24/2015"
  },
  {
    "id": 39,
    "fullName": "Barbara Joseph",
    "title": "Explicabo Consequuntur Illo",
    "datePublished": "11/17/2014"
  },
  {
    "id": 40,
    "fullName": "Victoria Colon",
    "title": "Sint Temporibus Beatae Necessitatibus",
    "datePublished": "03/25/2003"
  },
  {
    "id": 41,
    "fullName": "Pearl Atkins",
    "title": "Culpa",
    "datePublished": "03/17/2001"
  },
  {
    "id": 42,
    "fullName": "Johanna Dennis",
    "title": "Enim Nobis",
    "datePublished": "09/19/2006"
  },
  {
    "id": 43,
    "fullName": "Stella Jefferson",
    "title": "Consequatur Earum Delectus Inventore",
    "datePublished": "10/21/2013"
  },
  {
    "id": 44,
    "fullName": "Linnie Underwood",
    "title": "Veniam Ipsum",
    "datePublished": "02/16/2013"
  },
  {
    "id": 45,
    "fullName": "Nellie Jordan",
    "title": "Ducimus Illo Totam Soluta Eaque",
    "datePublished": "10/25/2014"
  },
  {
    "id": 46,
    "fullName": "Dorothy Atkins",
    "title": "Id Tempore maxime",
    "datePublished": "02/07/2001"
  },
  {
    "id": 47,
    "fullName": "Madge Guerrero",
    "title": "Ipsam Ea Nesciunt",
    "datePublished": "09/15/2009"
  },
  {
    "id": 48,
    "fullName": "Adele Jordan",
    "title": "Commodi Minima",
    "datePublished": "11/10/2006"
  },
  {
    "id": 49,
    "fullName": "Loretta Delgado",
    "title": "Eveniet Ex Sunt Beatae",
    "datePublished": "10/08/2001"
  }
]

# Constants
DEVICE = width: 750, height: 1334
SCALE_RATIO = Screen.width / DEVICE.width
FONT = Utils.deviceFont()
MAX_COUNT = 8
SPACE = 10

# Variables
items = []

# Get list item data
getItem = (position) -> dummi[position]
# Get list item view
getView = (position, view, parent) ->
	unless view
		# List item view
		view = new Layer
			width: parent.width, height: 200
			backgroundColor: "white"
			borderRadius: 10
			custom: position
		
		# Number
		view.num = new Layer
			name: ".num"
			x: Align.right(-7), y: Align.top(7)
			width: 40, height: 40
			style: 
				font: "Bold 20px/40px #{FONT}"
				textAlign: "center"
				letterSpacing: "-1.0px"
			borderRadius: 20
			parent: view
		
		# Title
		view.title = new Layer
			name: ".title"
			width: view.width, height: 50
			style: 
				font: "Bold 30px/50px #{FONT}"
				paddingLeft: "10px"
				letterSpacing: "-0.5px"
			color: "black"
			backgroundColor: "transparent"
			parent: view
		
		# Description
		view.description = new Layer
			name: ".description"
			y: view.title.maxY
			width: view.width, height: 100
			parent: view
		
		# Author
		view.author = new Layer
			name: ".author"
			y: view.description.maxY
			width: view.width * 2/3, height: 50
			style: 
				font: "Bold 30px/50px #{FONT}"
				paddingLeft: "57px"
			color: "black"
			backgroundColor: "transparent"
			parent: view
		
		# Author photo
		view.author.photo = new Layer
			x: Align.left(10), y: Align.center
			size: 40
			backgroundColor: "gray"
			borderRadius: 20
			parent: view.author
		
		# Date
		view.date = new Layer
			name: ".date"
			x: view.author.maxX, y: view.description.maxY
			width: view.width * 1/3, height: 50
			style: 
				font: "400 30px/50px #{FONT}"
				textAlign: "right"
				paddingRight: "10px"
			color: "black"
			backgroundColor: "transparent"
			parent: view
		
		# Set description padding
		view.description.frame = Utils.frameInset view.description.frame, 10
	
		# Update item
		view.update = (position) ->
			index = position
			if position < 0 
				index = _.size(dummi) - 1 
			else if position > _.size(dummi) - 1
				index = 0
			@custom = index
			#
			@data = data = getItem index
			if data
				@num.html = data.id
				@title.html = data.title
				@author.html = data.fullName
				@date.html = data.datePublished
	
	# Update contents
	view.update position
	
	# Return
	view
	
# Draw draggable view (Compatible with all devices)
contents = new Layer
	width: DEVICE.width, height: Screen.height / SCALE_RATIO
	scale: SCALE_RATIO, originX: 0, originY: 0
	backgroundColor: "transparent"
	
# Enable draggable
contents.draggable.enabled = true
# Disable horizontal scroll
contents.draggable.horizontal = false
# Contents move event
contents.onMove ->
	f = _.first(items)
	l = _.last(items)
	
	# Last item move to top
	if Utils.frameInFrame(f.screenFrame, Screen.frame)
		contents.removeChild l
		contents.addChild l
		
		# Update contents data
		l.update l.custom = f.custom - 1
		
		# Set y position
		l.maxY = f.y - SPACE
		# Reorder list item
		items.unshift(items.pop())
		
	# First item move to bottom
	else if !Utils.frameInFrame(items[1].screenFrame, Screen.frame)
		contents.removeChild f
		contents.addChild f
		
		# Update contents data
		f.update f.custom = l.custom + 1
		
		# Set y position
		f.y = l.maxY + SPACE
		# Reorder list item
		items.push(items.shift())

# Draw list items
for i in [0...MAX_COUNT]
	# Draw
	item = getView i, null, contents
	item.name = "item - #{i}"
	item.y = contents.contentFrame().height
	item.y += SPACE if i isnt 0
	
	# Events
	item.ignoreEvents = false
	item.onClick -> print @data
	
	# Add item to list view
	contents.addChild item
	# Add item to array
	items.push item