function glx($x) { return 60 + 48 * $x; } function gly($y) { return 110 + 48 * $y; } $sheet = new PhutilSpriteSheet(); $at = '@'; $sheet->setCSSHeader(<<<EOCSS /** * @provides autosprite-css * {$at}generated */ .autosprite { background-image: url(/rsrc/image/autosprite.png); background-repeat: no-repeat; } EOCSS ); $menu_normal_template = id(new PhutilSprite())->setSourceFile($srcroot . '/menu_normal_1x.png')->setSourceSize(26, 26); $menu_hover_template = id(new PhutilSprite())->setSourceFile($srcroot . '/menu_hover_1x.png')->setSourceSize(26, 26); $menu_selected_template = id(new PhutilSprite())->setSourceFile($srcroot . '/menu_selected_1x.png')->setSourceSize(26, 26); $menu_map = array('' => $menu_normal_template, '-selected' => $menu_selected_template, ':hover' => $menu_hover_template); $icon_map = array('help' => array(4, 19), 'settings' => array(0, 28), 'logout' => array(3, 6), 'notifications' => array(5, 20), 'task' => array(1, 15)); foreach ($icon_map as $icon => $coords) { list($x, $y) = $coords; foreach ($menu_map as $suffix => $template) { $sheet->addSprite(id(clone $template)->setSourcePosition(glx($x), gly($y))->setTargetCSS('.main-menu-item-icon-' . $icon . $suffix)); }
private function buildSheet($name, $has_retina, $type = null, $extra_css = '') { $sheet = new PhutilSpriteSheet(); $at = '@'; switch ($type) { case PhutilSpriteSheet::TYPE_STANDARD: default: $type = PhutilSpriteSheet::TYPE_STANDARD; $repeat_rule = 'no-repeat'; break; case PhutilSpriteSheet::TYPE_REPEAT_X: $repeat_rule = 'repeat-x'; break; case PhutilSpriteSheet::TYPE_REPEAT_Y: $repeat_rule = 'repeat-y'; break; } $retina_rules = null; if ($has_retina) { $retina_rules = <<<EOCSS @media only screen and (min-device-pixel-ratio: 1.5), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) { .sprite-{$name}{$extra_css} { background-image: url(/rsrc/image/sprite-{$name}-X2.png); background-size: {X}px {Y}px; } } EOCSS; } $sheet->setSheetType($type); $sheet->setCSSHeader(<<<EOCSS /** * @provides sprite-{$name}-css * {$at}generated */ .sprite-{$name}{$extra_css} { background-image: url(/rsrc/image/sprite-{$name}.png); background-repeat: {$repeat_rule}; } {$retina_rules} EOCSS ); return $sheet; }