Class: TexturePacker

Inherits:
Object
  • Object
show all
Defined in:
lib/texture_packer.rb,
lib/texture_packer/version.rb

Defined Under Namespace

Classes: Cli, CssRule

Constant Summary collapse

SPLIT_BY_MOBILE =
'mobile'
SPLIT_BY_I18N =
'i18n'
SPLIT_BY_I18N_AND_MOBILE =
'i18n_and_mobile'
SELECTOR_ORDER =
%w[:hover :active :disabled].freeze
VERSION =
'1.7.1'

Instance Attribute Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(dir_name, output_paths_mapping, content, split_type = nil) ⇒ TexturePacker

Returns a new instance of TexturePacker.



16
17
18
19
20
21
22
23
24
25
# File 'lib/texture_packer.rb', line 16

def initialize(dir_name, output_paths_mapping, content, split_type = nil)
  @output_paths_mapping = output_paths_mapping
  @content = content.dup
  @split_type = split_type

  @dir_name = dir_name
  @base_dir_name = File.basename(@dir_name)
  @theme = @base_dir_name[/[^_]+$/]
  @dir_without_theme = @base_dir_name[0...-(@theme.size + 1)]
end

Instance Attribute Details

#base_dir_nameObject (readonly)

Returns the value of attribute base_dir_name.



7
8
9
# File 'lib/texture_packer.rb', line 7

def base_dir_name
  @base_dir_name
end

#dir_nameObject (readonly)

Returns the value of attribute dir_name.



6
7
8
# File 'lib/texture_packer.rb', line 6

def dir_name
  @dir_name
end

#dir_without_themeObject (readonly)

Returns the value of attribute dir_without_theme.



8
9
10
# File 'lib/texture_packer.rb', line 8

def dir_without_theme
  @dir_without_theme
end

#output_paths_mappingObject (readonly)

Returns the value of attribute output_paths_mapping.



9
10
11
# File 'lib/texture_packer.rb', line 9

def output_paths_mapping
  @output_paths_mapping
end

Instance Method Details

#extract_rule!Object



112
113
114
115
# File 'lib/texture_packer.rb', line 112

def extract_rule!
  @content.sub!(/^\.([a-zA-Z0-9_-]+)((?:\:\w+|\[\w+\])*) \{(.*?)\}/, '') # 抓 rule
  return [$1, $2, $3] # $1 = selector, $2 = prefix, $3 = css
end

#get_mixin(func, css) ⇒ Object



117
118
119
# File 'lib/texture_packer.rb', line 117

def get_mixin(func, css)
  return "@mixin #{func}{ #{css} }\n"
end

#need_global_mixins?Boolean

Returns:

  • (Boolean)


135
136
137
138
139
# File 'lib/texture_packer.rb', line 135

def need_global_mixins?
  return true if @split_type == SPLIT_BY_MOBILE
  return true if @split_type == SPLIT_BY_I18N_AND_MOBILE
  return false
end

#parse!Object



27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
# File 'lib/texture_packer.rb', line 27

def parse!
  Dir['images/**/'].map{|s| s[%r{images/(.*)/}, 1] }.compact.map{|s| "#{s.tr('/', '-')}-" }.each do |path| # "images/aaa/bbb/ccc.png" => "aaa-bbb-"
    @content.gsub!(path, path.tr('-', '_')) # aaa-bbb => aaa_bbb
  end

  data = {}
  @content.gsub!(/-disabled \{/, ':disabled {') #-disabled => :disabled
  loop{ break if @content.gsub!(/-([\w]+)((?:[^\w][\w]+)*) \{/, '[\1]\2 {') == nil }
  output0 = @content
  output0.sub!(%r{(/\*(.|\n)*?\*/)}, '') # 去掉註解
  output0 = $1 + "\n"

  loop do
    selector, string_prefix, css = extract_rule!
    break if selector == nil
    next if selector == 'sprite'
    prefixs = string_prefix.scan(/\[\w+\]|\:\w+/) # [m]:disabled => ['[m]', ':disabled']
    prefixs.map! do |prefix|
      case prefix
      when '[active]'   then ':active' # 因為 TexturePacker 會把 xxx-active-hover 轉成 xxx-active:hover 而不是 xxx:active:hover
      when '[hover]'    then ':hover'
      when '[disabled]' then ':disabled'
      else                   prefix
      end
    end
    # p [selector, prefix, css]
    (data[selector] ||= {})[prefixs] = "#{css};"
  end
  # data = {selector => {nil => 'xxx', ':disabeld' => 'xxx', '[m]' => 'xxx'}}
  output1 = '' # mixin的output
  @output_paths_mapping.map do |kind, _name|
    if kind == nil
      output1 += get_mixin("#{base_dir_name}_sprite", "background-image: image-url('#{@dir_name}.png');")
    else
      output1 += get_mixin("#{base_dir_name}_sprite_#{kind}", "background-image: image-url('#{@dir_name}_#{kind}.png');")
    end
  end
  output2 = '' # scss的output
  output2 += "body[theme='#{@theme}']{\n"
  output2 += "  .#{@dir_without_theme}_sprite{\n"
  case @split_type
  when SPLIT_BY_I18N_AND_MOBILE
    output2 += "    @include desktop{\n"
    output2 += "      &:lang(zh-TW){ @include #{base_dir_name}_sprite_tw; }\n"
    output2 += "      &:lang(zh-CN){ @include #{base_dir_name}_sprite_cn; }\n"
    output2 += "      &:lang(en){ @include #{base_dir_name}_sprite_en; }\n"
    output2 += "    }\n"

    output2 += "    @include mobile{\n"
    output2 += "      &:lang(zh-TW){ @include #{base_dir_name}_sprite_tw_m; }\n"
    output2 += "      &:lang(zh-CN){ @include #{base_dir_name}_sprite_cn_m; }\n"
    output2 += "      &:lang(en){ @include #{base_dir_name}_sprite_en_m; }\n"
    output2 += "    }\n"
  when SPLIT_BY_MOBILE
    output2 += "    @include desktop{ @include #{base_dir_name}_sprite; }\n"
    output2 += "    @include mobile{ @include #{base_dir_name}_sprite_m; }\n"
  when SPLIT_BY_I18N
    output2 += "    &:lang(zh-TW){ @include #{base_dir_name}_sprite_tw; }\n"
    output2 += "    &:lang(zh-CN){ @include #{base_dir_name}_sprite_cn; }\n"
    output2 += "    &:lang(en){ @include #{base_dir_name}_sprite_en; }\n"
  else
    if @output_paths_mapping.size > 1
      output2 += @output_paths_mapping.map do |kind, _name|
        next "    @include #{base_dir_name}_sprite;\n" if kind == nil
        next "    &[kind=\"#{kind}\"] { @include #{base_dir_name}_sprite_#{kind}; }\n"
      end.join
    else
      output2 += "    @include #{base_dir_name}_sprite;\n"
    end
  end
  # output2 += "    &.split_mobile{ @include mobile{ @include #{base_dir_name}_sprite_m; }}\n" if @split_type == SPLIT_BY_MOBILE
  data.each do |selector, css_data|
    func = "#{base_dir_name}_#{selector}"
    rules = CssRule.new
    css_data.each do |prefixs, css| # EX: prefixs == [':hover']
      rules.add(prefixs, css)
    end
    output1 << get_mixin(func, rules.generate_css)
    output2 << "    &.#{parse_language_selector!(selector)} { @include #{func}; }\n"
  end
  output2 += "  }\n"
  output2 += "}\n"
  return [output0, output1, output2]
end

#parse_language_selector!(selector) ⇒ Object

向下相容



121
122
123
124
125
126
127
128
129
130
131
132
133
# File 'lib/texture_packer.rb', line 121

def parse_language_selector!(selector) # 向下相容
  language_parsed_array = selector.scan(/_(?:tw|cn|en)\z/)
  return selector if language_parsed_array.count.zero? # 如果沒有語言分類就回傳原本的 selector

  case language_parsed_array[0]
  when '_tw'
    return selector.gsub('_tw', ':lang(zh-TW)')
  when '_cn'
    return selector.gsub('_cn', ':lang(zh-CN)')
  when '_en'
    return selector.gsub('_en', ':lang(en)')
  end
end