Add close button to Printer

koenbok · Oct 6, 2016 · 16a1777 · 16a1777
1 parent e5584ac
commit 16a1777
Showing 1 changed file with 29 additions and 10 deletions.
diff --git a/framer/Print.coffee b/framer/Print.coffee
@@ -8,12 +8,17 @@ class Printer
 		@_context.run => Events.wrap(window).addEventListener("resize", @resize)
 
 	createLayer: =>
-		
+
 		return @_printLayer if @_printLayer
-		
+
 		@_context.run =>
+			@_container = new Layer
+				backgroundColor: null
+			@_container.style.zIndex = 999 # Always stay on top
 
 			@_printLayer = new Layer
+				parent: @_container
+
 			@_printLayer.scrollVertical = true
 			@_printLayer.ignoreEvents = false
 			@_printLayer.html = ""
@@ -25,31 +30,45 @@ class Printer
 				"border-top": "1px solid #d9d9d9"
 
 			@_printLayer.opacity = 0.9
-			@_printLayer.style.zIndex = 999 # Always stay on top
 			@_printLayer.visible = true
 			@_printLayer.backgroundColor = "white"
 
+			@_closeButton = new Layer
+				parent: @_container
+				html: '<svg><g><path d="M6.73184358,5 L10,1.73184358 L8.26815642,0 L5,3.26815642 L1.73184358,0 L0,1.73184358 L3.26815642,5 L0,8.26815642 L1.73184358,10 L5,6.73184358 L8.26815642,10 L10,8.26815642 L6.73184358,5 Z" fill="#BDBDBD"></path></g></svg>'
+				y: 6
+				width: 10
+				height: 10
+				backgroundColor: null
+			@_closeButton.onClick =>
+				@hide()
 		@resize()
 
 		return @_printLayer
 
 	resize: =>
 		return unless @_printLayer
-		@_printLayer.width = window.innerWidth
-		@_printLayer.height = 160
-		@_printLayer.maxY = window.innerHeight
+		@_container.width = window.innerWidth
+		@_container.height = 160
+		@_container.maxY = window.innerHeight
+
+		@_printLayer.size = @_container.size
+		@_closeButton.maxX = @_container.maxX - @_closeButton.y
+
+	hide: ->
+		@_container.visible = false
 
 	print: (args...) =>
-
-		@createLayer()
 
+		@createLayer()
+		@_container.visible = true
 		printPrefix = "» "
-		
+
 		printNode = document.createElement("div")
 		printNode.style["-webkit-user-select"] = "text"
 		printNode.style["cursor"] = "auto"
 		printNode.innerHTML = _.escape(printPrefix + args.map((obj) -> Utils.inspect(obj)).join(", ")) + "<br>"
-		
+
 		@_printLayer._element.appendChild(printNode)
 
 		@scrollToBottom()