jquery-ui-sass-rails 4.0.2.beta2 → 4.0.2.0

data/Gemfile

@@ -1,3 +1,5 @@
 source 'https://rubygems.org'
 
 gemspec
+
+gem 'pry-debugger'

data/History.md

@@ -2,4 +2,4 @@
 
 # 4.0.2
 
-* Initials `jquery-ui-sass-rails` release
+* Initial `jquery-ui-sass-rails` release

data/README.md

@@ -1,49 +1,34 @@
 # jquery-ui-sass-rails
 
-[![Build Status](https://secure.travis-ci.org/joliss/jquery-ui-rails.png?branch=master)](http://travis-ci.org/joliss/jquery-ui-rails) [![Dependency Status](https://gemnasium.com/joliss/jquery-ui-rails.png)](https://gemnasium.com/joliss/jquery-ui-rails)
-
-This gem packages the jQuery UI 1.10.0 stylesheets in **Sass format (SCSS syntax)** for the Rails 3.1+ [asset
+This gem packages the jQuery UI 1.10.2 stylesheets in **Sass format (SCSS syntax)** for the Rails 3.1+ [asset
 pipeline](http://guides.rubyonrails.org/asset_pipeline.html).
 
-It complements the [jquery-ui-rails](https://github.com/joliss/jquery-ui-rails), which already packages all the plain jQuery UI assets (javascript, css, images) by providing the stylesheets in Sass format allowing much easier customization through Sass variables.  It overwrites the plain CSS stylesheets from `jquery-ui-rails`.
+It complements the [jquery-ui-rails](https://github.com/joliss/jquery-ui-rails) gem, which already packages all the plain jQuery UI assets (javascript, css, images), by additionally providing the jQuery UI stylesheets in Sass format allowing much easier customization through Sass variables.  It overwrites the plain CSS stylesheets from `jquery-ui-rails`.
+
 
 ## Installation
 
-This gem already has `jquery-ui-rails` as a dependency, so it's enough to include only it in your Gemfile:
+This gem has `jquery-ui-rails` as a dependency, so it's sufficient to include only it in your Gemfile:
 
 ```ruby
 gem 'jquery-ui-sass-rails'
 ```
 
-## JavaScript
-
-For the JavaScript part you should refer to the [jquery-ui-rails documentation](https://github.com/joliss/jquery-ui-rails) and do something like this:
-
-```javascript
-//= require jquery.ui.all
-```
-
-or this:
-
-```javascript
-//= require jquery.ui.datepicker
-```
-
 ## Sass Stylesheets
 
-For the stylesheets you should use Sass's `@import` instead of Sprocket's `= require`, just as the official `sass-rails` gem [recommends it](https://github.com/rails/sass-rails#important-note).
+Unlike recommended in `jquery-ui-rails` you should always use Sass's `@import` over of Sprocket's `= require`, just as the official `sass-rails` gem [recommends it](https://github.com/rails/sass-rails#important-note).
 
-They way you import the stylesheets would be something like this:
+So the way you import the stylesheets would be something like this:
 
 ```sass
 // app/assets/stylesheets/application.css.sass
 
 @import jquery.ui.core // you always want that stylesheet
-@import jquery.ui.theme // import this when you want to build on jQuer UI's themeing
+@import jquery.ui.theme // import this when you want to build on jQuery UI's themeing
 @import jquery.ui.datepicker // import all the modules you need
 ```
 
-The big advantage that the jQuery UI stylesheets have been converted to Sass in this gem are that you have a super easy way to customize the themes using simple Sass variables.  You only need to specify your own values **before** you import the jQuery UI stylesheets:
+The big advantage that the jQuery UI stylesheets have been converted to Sass in this gem is that you now have a super easy way to customize the jQuery UI themes using simple Sass variables.  You simply need to specify your own values **before** you import the `jquery.ui.theme` stylesheet:
 
 ```sass
 // app/assets/stylesheets/application.css.sass
@@ -55,8 +40,44 @@ $bgColorContent: purple // set custom value for jQueryUI variable
 @import jquery.ui.datepicker
 ```
 
+For a list of all jQuery UI variables check out:  https://github.com/jhilden/jquery-ui-sass-rails/blob/master/app/assets/stylesheets/_jquery.ui.variables.css.scss
+
+## Themes
+
+`jquery-ui-sass-rails` comes with variable sets for all the themes in the [jQuery UI Themeroller](http://jqueryui.com/themeroller/), you use them by importing the respective partial before the `jquery.ui.theme`:
+
+```sass
+// app/assets/stylesheets/application.css.sass
+
+@import themes/jquery.ui.smoothness // variables for 'smothness' theme
+
+@import jquery.ui.core
+@import jquery.ui.theme
+@import jquery.ui.datepicker
+```
+
+
+## JavaScript
+
+For the JavaScript part you should refer to the [jquery-ui-rails documentation](https://github.com/joliss/jquery-ui-rails) and do something like this:
+
+```javascript
+//= require jquery.ui.all
+```
+
+or this:
+
+```javascript
+//= require jquery.ui.datepicker
+```
+
+## Versioning
+
+As long as I don't break any important APIs I will try I try to stick to the versioning of `jquery-ui-rails` with an additional digit.  E.g. `jquery-ui-sass-rails` version `4.0.2.x` goes along with `jquery-ui-rails` version `4.0.2`.
+
+
 ## Credits
 
 This gem is only a complement to the `jquery-ui-rails` gem and wouldn't be possible without it's author [Jo Liss](https://github.com/joliss) and the other [contributors](https://github.com/joliss/jquery-ui-rails/contributors).
 
-Since this is only a gem repackaging the jQuery UI library, the biggest thanks obviously goes out to the [jQueryUI team](http://jqueryui.com/about/).
+Since this is only a gem repackaging the jQuery UI library, the biggest thanks obviously goes out to the [jQueryUI team](http://jqueryui.com/about/).

data/Rakefile

@@ -1,9 +1,10 @@
 require 'json'
 require 'bundler/gem_tasks'
+require 'pry-debugger'
 
 desc 'remove SCSS files'
 task :clean_scss do
-  rm_rf 'app/assets/stylesheets/*.scss'
+  rm_rf 'app/assets/*'
   puts "cleaned old SCSS files"
   puts "-----"
 end
@@ -21,6 +22,7 @@ desc "Convert stylesheets to SCSS"
 task :convert_to_scss do
   source_dir = 'jquery-ui-rails/stylesheets'
   target_dir = 'app/assets/stylesheets'
+  mkdir_p target_dir
   variables_hash = {}
 
   # convert css files to scss
@@ -32,9 +34,14 @@ task :convert_to_scss do
     stylesheet_content.gsub!(/<%= image_path\((\S+)\) %>/) { "image-path(#{$1})" }
 
     # remove comment blocks with sprockets require directives, because they don't work well with Sass variables
-    stylesheet_content.gsub!(/\/\*[^\/]+require[^\/]+\*\//) do
+    stylesheet_content.gsub!(/\/\*[^\/]+require[^\/]+\*\//) do |match|
       if source_file.end_with?('jquery.ui.theme.css.erb')
-        "@import 'jquery.ui.variables';\n"
+        "@import 'themes/jquery.ui.base';\n"
+
+      elsif source_file.end_with?('jquery.ui.all.css.erb') || source_file.end_with?('jquery.ui.base.css.erb')
+        match.gsub!(' *= require ', '@import ')
+        match.gsub!(/\/\*| \*\//, '')
+
       else
         ''
       end
@@ -60,16 +67,109 @@ task :convert_to_scss do
     puts "--"
   end
 
-  # write _jquery.ui.variables.css.scss
-  variables_stylesheet = File.open "#{target_dir}/_jquery.ui.variables.css.scss", 'w'
+  # write _jquery.ui.base.css.scss
+  mkdir_p "#{target_dir}/themes"
+  variables_stylesheet = File.open "#{target_dir}/themes/_jquery.ui.base.css.scss", 'w'
   variables_hash.each do |name, value|
     variables_stylesheet << "$#{name}: #{value} !default;\n"
   end
   variables_stylesheet.close
-  puts "wrote _jquery.ui.variables.css.scss"
+  puts "wrote _jquery.ui.base.css.scss"
   puts "-----"
 end
 
-task :scss_process => [:clean_scss, :move_stylesheets, :convert_to_scss]
+task :themes do
+  def get_value(lines, line_number)
+    lines[line_number-1].split(':').last.gsub(';', '').strip
+  end
+
+  Dir['jquery-ui-themes/themes/*'].each do |theme_dir|
+    theme_name = theme_dir.split('/').last
+    puts theme_name
+
+    # copy image assets
+    image_target_dir = "app/assets/images/jquery-ui"
+    mkdir_p image_target_dir
+    FileUtils.cp(Dir.glob("#{theme_dir}/images/*"), image_target_dir)
+
+    theme_css = File.open("#{theme_dir}/jquery.ui.theme.css").read
+    theme_css.gsub!(/\r\n?/, "\n")
+    lines = theme_css.each_line.map{ |line| line }
+
+    vars = {
+      ffDefault: get_value(lines, 18),
+      fsDefault: get_value(lines, 19),
+      borderColorContent: get_value(lines, 32).split(' ').last,
+      fcContent: get_value(lines, 34),
+      borderColorHeader: get_value(lines, 40).split(' ').last,
+      fcHeader: get_value(lines, 42),
+      borderColorDefault: get_value(lines, 54).split(' ').last,
+      fwDefault: get_value(lines, 56),
+      fcDefault: get_value(lines, 57),
+      borderColorHover: get_value(lines, 71).split(' ').last,
+      fwHover: get_value(lines, 73),
+      fcHover: get_value(lines, 74),
+      borderColorActive: get_value(lines, 86).split(' ').last,
+      fwActive: get_value(lines, 88),
+      fcActive: get_value(lines, 89),
+      borderColorHighlight: get_value(lines, 103).split(' ').last,
+      fcHighlight: get_value(lines, 105),
+      borderColorError: get_value(lines, 115).split(' ').last,
+      fcError: get_value(lines, 117),
+      iconsContent: get_value(lines, 162),
+      iconsHeader: get_value(lines, 165),
+      iconsDefault: get_value(lines, 168),
+      iconsHover: get_value(lines, 172),
+      iconsActive: get_value(lines, 175),
+      iconsHighlight: get_value(lines, 178),
+      iconsError: get_value(lines, 182),
+      cornerRadius: get_value(lines, 372),
+      opacityOverlay: get_value(lines, 396),
+      opacityFilterOverlay: get_value(lines, 397),
+      offsetTopShadow: get_value(lines, 400).split(' ').first,
+      offsetLeftShadow: get_value(lines, 400).split(' ').last,
+      thicknessShadow: get_value(lines, 401),
+      opacityShadow: get_value(lines, 403),
+      opacityFilterShadow: get_value(lines, 404),
+      cornerRadiusShadow: get_value(lines, 405),
+    }
+
+    backgrounds = {
+      "Content" => 33,
+      "Header" => 41,
+      "Default" => 55,
+      "Hover" => 72,
+      "Active" => 87,
+      "Highlight" => 104,
+      "Error" => 116,
+      "Overlay" => 395,
+      "Shadow" => 402
+    }
+    backgrounds.each do |background, line_number|
+      values = get_value(lines, line_number).split(' ')
+      var_names = ["bgColor#{background}", "bgImgUrl#{background}", "bg#{background}XPos", "bg#{background}YPos", "bg#{background}Repeat"]
+      vars.merge! Hash[var_names.zip values]
+    end
+
+    # image paths
+    vars.each do |key, value|
+      if value.to_s.start_with? 'url(images/'
+        value.gsub! 'url(images/', 'url(image-path("jquery-ui/'
+        value.gsub! ')', '"))'
+        vars[key] = value
+      end
+    end
+
+    target_dir = 'app/assets/stylesheets/themes'
+    mkdir_p target_dir
+    theme_stylesheet = File.open "#{target_dir}/_jquery.ui.#{theme_name}.css.scss", 'w'
+    vars.each do |name, value|
+      theme_stylesheet << "$#{name}: #{value} !default;\n"
+    end
+    theme_stylesheet.close
+  end
+end
+
+task :scss_process => [:clean_scss, :move_stylesheets, :convert_to_scss, :themes]
 
 task :default => :scss_process