X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=stylus_helpers.styl;h=93b3ae31eed4d38010c8618400b2472b11a56e79;hb=aa71e6c696f55d1fa3af661ad37ec02101ad7a08;hp=f8db4bf19ad783816ea67224ea276981d0acfe72;hpb=faffdde4b15b98d545f487f783da89aca8190a4e;p=wfpl.git
diff --git a/stylus_helpers.styl b/stylus_helpers.styl
index f8db4bf..93b3ae3 100644
--- a/stylus_helpers.styl
+++ b/stylus_helpers.styl
@@ -447,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:
+//
+//
+//
+//
+// 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