From 019bb943365e512132a4a309921c014d3b80a69a Mon Sep 17 00:00:00 2001
From: Jason Woofenden <jason@jasonwoof.com>
Date: Wed, 11 May 2016 19:43:59 -0400
Subject: [PATCH] stylus: scaling spritesheets

---
 stylus_helpers.styl |  113 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 113 insertions(+)

diff --git a/stylus_helpers.styl b/stylus_helpers.styl
index f8db4bf..8229b07 100644
--- a/stylus_helpers.styl
+++ b/stylus_helpers.styl
@@ -447,3 +447,116 @@ wfpl_columns(hash)
 	}
 	top.width = wfpl_columns_helper(top, hash, '', null, null)
 	return top
+
+// internal helper
+_pct_pos(offset, width, sheet_width)
+	if width is sheet_width
+		return 0
+	ratio = offset / (sheet_width - width)
+	if ratio is 0
+		return 0
+	return unit(ratio * 100, '%')
+
+// wfpl_spritesheets documentation/example:
+//
+// wfpl_spritesheets({
+//   main: {
+//     image: sha1['images/sprites.min.svg']
+//     y_origin: 'bottom' // invert y coordinates below (thx inkscape)
+//     w: 200             // width of document (whatever units)
+//     h: 400             // height of document (whatever units)
+//     sprites: {
+//       ".icon": {
+//         y: 399         // top (regardless of y_origin)
+//         w: 48          // width of sprite (in doc coords)
+//         h: 48          // height of sprite (in doc coords)
+//         gap: 2         // space _between_ rows/columns
+//         hover: 'right' // can be 'right' or 'down', meaning: direction to
+//                        // move in spritesheet to find the ":hover" graphic
+//         column: 'three' 'four' 'five' 'six' // key can be 'column' or 'row'
+//               // values are postfix for class names
+//       }
+//       ".logo": {
+//         y: 100
+//         w: 200
+//         h: 50
+//       }
+//     }
+//   }
+// })
+//
+// HTML:
+//   <div class="logo"></span>
+//   <span class="icon icon_three"></span>
+//   <span class="icon icon_four"></span>
+//
+// CSS:
+//   .icon
+//     display: inline-block
+//     width: 10%
+wfpl_spritesheets(hash)
+	for unused_name, sheet in hash
+		for selector, args in sheet.sprites
+			if sheet.y_origin is 'bottom'
+				y = sheet.h - args.y
+			else
+				y = args.y
+			if args.x
+				x = args.x
+			else
+				x = 0
+			if args.gap
+				gap = args.gap
+			else
+				gap = 0
+			w = args.w
+			h = args.h
+			if args.hover is 'right'
+				hdx = args.w + gap
+				hdy = 0
+			else if args.hover is 'down'
+				hdx = 0
+				hdy = args.h + gap
+			if not (args.column or args.row)
+				selector_before = selector + ":before"
+				{selector_before}
+					content: ''
+					display: block
+					background-position: _pct_pos(x, w, sheet.w) _pct_pos(y, h, sheet.h)
+					background-image: url((sheet['image']))
+					background-size: unit(sheet['w'] / w * 100, '%') auto
+					padding-top: unit(h / w * 100, '%')
+				selector_hover_before = selector + ":hover:before"
+				if args.hover
+					{selector_hover_before}
+						background-position: _pct_pos(x + hdx, w, sheet.w) _pct_pos(y + hdy, h, sheet.h)
+			else
+				names = ()
+				if args.column
+					dx = 0
+					dy = args.h + gap
+					for n in args.column
+						push(names, n)
+				else if args.row
+					dx = args.w + gap
+					dy = 0
+					for n in args.row
+						push(names, n)
+				d = 0
+				for postfix in names
+					selector_n_before = selector + "_" + postfix + ":before"
+					{selector_n_before}
+						background-position: _pct_pos(x + d * dx, w, sheet.w) _pct_pos(y + d * dy, h, sheet.h)
+					if args.hover
+						selector_n_hover_before = selector + "_" + postfix + ":hover:before"
+						{selector_n_hover_before}
+							background-position: _pct_pos(x + hdx + d * dx, w, sheet.w) _pct_pos(y + hdy + d * dy, h, sheet.h)
+					d += 1
+				selector_before = selector + ":before"
+				{selector_before}
+					content: ''
+					display: block
+					background-image: url((sheet['image']))
+					background-size: unit(sheet['w'] / w * 100, '%') auto
+					padding-top: unit(h / w * 100, '%')
+	return ret
-- 
1.7.10.4