X-Git-Url: https://jasonwoof.com/gitweb/?p=wfpl.git;a=blobdiff_plain;f=stylus_helpers.styl;h=93b3ae31eed4d38010c8618400b2472b11a56e79;hp=d885abed777a6e146eda1914a754a26faa44f61e;hb=HEAD;hpb=eafd74d9b5fbfada1026ab604202d8a690286cb4

diff --git a/stylus_helpers.styl b/stylus_helpers.styl
index d885abe..93b3ae3 100644
--- a/stylus_helpers.styl
+++ b/stylus_helpers.styl
@@ -150,7 +150,14 @@ sprites(image, height, count, v_offset = 0, h_offset = 0)
 			y = - (@height * n) - unit(v_offset, px)
 			background-position: (0 - unit(h_offset, px)) y
 sprite(image, height, v_offset = 0, h_offset = 0)
-	sprites(image, height, 1, v_offset, h_offset)
+	height: unit(height, px)
+	if image[1]
+		background: url(image[0])
+		background: url(image[1]), linear-gradient(transparent, transparent);
+	else
+		background-image: url(image)
+	background-repeat: no-repeat;
+	background-position: (0 - unit(h_offset, px)) (0 - unit(v_offset, px))
 
 // Styling for a variable height element with an image background where the
 // middle repeats vertically. You must split your image into three images, and
@@ -389,8 +396,8 @@ wfpl_columns_helper(top, node, selector, parent_width, expected_width)
 		unless parent_width // should only happen at top level
 			parent_width = outer_width
 		top['css'][selector] = css_rules
-		for k, v in node
-			if k != 'outer_width' && k != 'border-width' && k != 'border-left-width' && k != 'border-right-width'
+		for k, v in css_rules
+			if k != 'border-width' && k != 'border-left-width' && k != 'border-right-width'
 				if typeof(v) == 'unit' && unit(v) == 'px'
 					responsive_css_rules[k] = floor(unit((v / parent_width) * 100, '%'), 4)
 		top['responsive_css'][selector] = responsive_css_rules
@@ -440,3 +447,117 @@ 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
+					background-repeat: no-repeat
+					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