Module: ExtJS::XTheme::Generator

Defined in:
lib/extjs-xtheme/generator.rb

Class Method Summary collapse

Class Method Details

.create(name, ext_dir, theme_dir) ⇒ Object

creates a new Sass theme

Parameters:

  • name (String)
  • ext_dir (String) —

    path to Ext directory relative to public/javascripts

  • theme_dir (String) —

    Path to theme output dir (eg: stylesheets/sass)



10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
# File 'lib/extjs-xtheme/generator.rb', line 10

def self.create(name, ext_dir, theme_dir)
  ext_css_path  = "#{ext_dir}/resources/css"
  theme_path    = "#{theme_dir}/#{name}"
  
  # Create theme directory in /stylesheets/sass
  FileUtils.mkdir_p ["#{theme_path}/visual", "#{theme_path}/structure"]

  # Create the defines.sass file, set img_path variable.          
  FileUtils.copy("#{File.dirname(__FILE__)}/template/defines.sass", "#{theme_path}/defines.sass")  
  defines = File.read("#{theme_path}/defines.sass")
  File.open("#{theme_path}/defines.sass", "w+") {|f| f << defines.gsub(/\{\{img_path\}\}/, "../sass/#{name}/images") }
  puts " - created #{theme_path}/defines.sass"

  sass_files = []
  # Iterate each Ext css file and convert to Sass.
  ["structure", "visual"].each do |subdir|
    puts " Converting #{subdir} styles to Sass"
    Dir["#{ext_css_path}/#{subdir}/*.css"].each do |file|
      m = /^.*\/(.*)\.css$/.match(file)
      sass_file = "#{theme_path}/#{subdir}/#{m.captures[0]}.sass"
      puts " - css2sass #{m.captures[0]}.css -> #{sass_file}"
      sass_files << "@import #{subdir}/#{m.captures[0]}.sass"
      `css2sass #{file} #{sass_file}`
      write_sass_vars(sass_file)
    end
  end

  # Create master sass file, which includes @imports for all other files in theme.
  puts " - Writing init.sass"
  f = File.new("#{theme_path}/init.sass", "w")
  f.puts sass_files.join("\n")

  # Copy Ext theme images to new Sass theme dir.
  FileUtils.cp_r("#{ext_dir}/resources/images/default", "#{theme_path}/images")
end

.hsv_transform(name, ext_dir, theme_dir, hue = 1.0, saturation = 1.0, lightness = 1.0) ⇒ Object

performs hsv transformation on Ext theme images and save to Sass theme dir.

Parameters:

  • name (String) —

    Theme name

  • ext_dir (String) —

    path to Ext directory relative to public/javascripts

  • hue (Float) (defaults to: 1.0)
  • saturation (Float) (defaults to: 1.0)
  • lightneess (Float) 


54
55
56
57
58
59
60
61
62
63
 
# File 'lib/extjs-xtheme/generator.rb', line 54

def self.hsv_transform(name, ext_dir, theme_dir, hue=1.0, saturation=1.0, lightness=1.0)    
  theme_path = "#{theme_dir}/#{name}"
  
  each_image(ext_path) {|img|
    write_image(img.modulate(lightness, saturation, hue), theme_path(name))
  }
  # update hue in defines.sass
  defines = File.read("#{theme_path}/defines.sass")
  File.open("#{theme_path}/defines.sass", "w+") {|f| f << defines.gsub(/hue\s?=.*/, "hue = #{(hue-1)*180}") }
end