stylus: scaling spritesheets

diff --git a/stylus_helpers.styl b/stylus_helpers.styl
index f8db4bf..8229b07 100644 (file)
--- 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