Add make dev command for fast and easy debugging in Framer Studio

Based on the webpack dev server

Makefile

@@ -26,8 +26,9 @@ debug: bootstrap clean
 watch: bootstrap 
 	$(gulp) watch
 
-watcher: bootstrap 
-	$(gulp) watcher
+dev: bootstrap 
+	open -a "Framer Studio Beta" "extras/DevServer.framer"
+	$(bin)/coffee scripts/devserver.coffee
 
 test: bootstrap 
 	$(gulp) test

extras/DevServer.framer/.gitignore

@@ -0,0 +1,34 @@
+# Default Framer gitignore file
+
+# Mac specific
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear on external disk
+.Spotlight-V100
+.Trashes
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+# Framer specific
+.temp.html
+framer/*.old.*
+framer/backup.coffee
+framer/backups
+framer/backups/*
+framer/.*.hash
+framer/framer.generated.js
+framer/framer.modules.js
+framer/images/*

extras/DevServer.framer/app.coffee

@@ -0,0 +1,40 @@
+layer =  new Layer
+	width: Screen.width / 2
+	height: Screen.height / 2
+
+layer.center()
+
+layer.draggable.enabled = true
+layer.pinchable.enabled = true
+layer.pinchable.rotate = false
+
+
+Utils.labelLayer(layer, "ALT to emulate touch, CMD to pan")
+
+# layer.on Gestures.PinchStart, (e) -> print e.type
+# layer.on Gestures.Pinch, (e) -> print e.type
+# layer.on Gestures.PinchEnd, (e) -> print e.type
+# 
+# layer.on Gestures.RotateStart, (e) -> print e.type
+# layer.on Gestures.Rotate, (e) -> print e.type
+# layer.on Gestures.RotateEnd, (e) -> print e.type
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

extras/DevServer.framer/framer/.bowerrc

@@ -0,0 +1,3 @@
+{
+	"directory" : "plugins"
+}

extras/DevServer.framer/framer/config.json

@@ -0,0 +1,8 @@
+{
+  "updateDelay" : 0.3,
+  "deviceScale" : -1,
+  "deviceOrientation" : 0,
+  "contentScale" : 1,
+  "sharedPrototype" : 1,
+  "deviceType" : "fullscreen"
+}

extras/DevServer.framer/framer/framer.debug.js

@@ -0,0 +1 @@
+../../../build/framer.debug.js

extras/DevServer.framer/framer/framer.init.js

@@ -0,0 +1,126 @@
+(function() {
+
+function isFileLoadingAllowed() {
+	return (window.location.protocol.indexOf("file") == -1)
+}
+
+function isHomeScreened() {
+	return ("standalone" in window.navigator) && window.navigator.standalone == true
+}
+
+function isCompatibleBrowser() {
+	return Utils.isWebKit()
+}
+
+var alertNode;
+
+function dismissAlert() {
+	alertNode.parentElement.removeChild(alertNode)
+	loadProject()
+}
+
+function showAlert(html) {
+
+	alertNode = document.createElement("div")
+
+	alertNode.classList.add("framerAlertBackground")
+	alertNode.innerHTML = html
+
+	document.addEventListener("DOMContentLoaded", function(event) {
+		document.body.appendChild(alertNode)
+	})
+
+	window.dismissAlert = dismissAlert;
+}
+
+function showBrowserAlert() {
+	var html = ""
+	html += "<div class='framerAlert'>"
+	html += "<strong>Error: Not A WebKit Browser</strong>"
+	html += "Your browser is not supported. <br> Please use Safari or Chrome.<br>"
+	html += "<a class='btn' href='javascript:void(0)' onclick='dismissAlert();'>Try anyway</a>"
+	html += "</div>"
+
+	showAlert(html)
+}
+
+function showFileLoadingAlert() {
+	var html = ""
+	html += "<div class='framerAlert'>"
+	html += "<strong>Error: Local File Restrictions</strong>"
+	html += "Preview this prototype with Framer Mirror or learn more about "
+	html += "<a href='https://github.com/koenbok/Framer/wiki/LocalLoading'>file restrictions</a>.<br>"
+	html += "<a class='btn' href='javascript:void(0)' onclick='dismissAlert();'>Try anyway</a>"
+	html += "</div>"
+
+	showAlert(html)
+}
+
+function showHomeScreenAlert() {
+
+	link = document.createElement("link");
+	link.href = "framer/mirror.css"
+	link.type = "text/css"
+	link.rel = "stylesheet"
+	link.media = "screen"
+
+	document.addEventListener("DOMContentLoaded", function(event) {
+		document.getElementsByTagName("head")[0].appendChild(link)
+	})
+
+	var html = ""
+	html += "<figure class='icon-close' href='javascript:void(0)' onclick='dismissAlert();'></figure>"
+	html += "<section class='wrapper'>"
+	html += "<figure class='icon-framer'></figure><h1>Install Prototype</h1>"
+	html += "<p>Tap <div class='share'><figure class='icon-share'></figure> Share</div>, then choose 'Add to Home Screen'</p> "
+	html += "<section class='arrow'><figure class='icon-arrow'></figure></section>"
+	html += "</section>"
+
+	showAlert(html)
+}
+
+function loadProject() {
+	CoffeeScript.load("app.coffee")
+}
+
+function setDefaultPageTitle() {
+	// If no title was set we set it to the project folder name so
+	// you get a nice name on iOS if you bookmark to desktop.
+	document.addEventListener("DOMContentLoaded", function() {
+		if (document.title == "") {
+			if (window.FramerStudioInfo && window.FramerStudioInfo.documentTitle) {
+				document.title = window.FramerStudioInfo.documentTitle
+			} else {
+				document.title = window.location.pathname.replace(/\//g, "")
+			}
+		}
+	})
+}
+
+function init() {
+
+	if (Utils.isFramerStudio()) {
+		return
+	}
+
+	setDefaultPageTitle()
+
+	if (!isCompatibleBrowser()) {
+		return showBrowserAlert()
+	}
+
+	if (!isFileLoadingAllowed()) {
+		return showFileLoadingAlert()
+	}
+
+	// if (Utils.isMobile() && !isHomeScreened()) {
+	// 	return showHomeScreenAlert()
+	// }
+
+	loadProject()
+
+}
+
+init()
+
+})()