twbs_sass_rails 0.1.0

data/test/generators/install_generator_test.rb

@@ -0,0 +1,47 @@
+require 'test_helper'
+
+class InstallGeneratorTest < ::Rails::Generators::TestCase
+  tests TwbsSassRails::Generators::InstallGenerator
+
+  destination File.expand_path('../../tmp', File.dirname(__FILE__))
+  setup :prepare_destination
+
+  test "Assert all files are properly created" do
+    run_generator
+    assert_file 'app/assets/stylesheets/application.css'
+    assert_file 'app/assets/stylesheets/twbs-variables.css.less' do |file_content|
+      template_file = File.expand_path('../../lib/generators/twbs_sass_rails/install/templates/twbs-variables.css.less', File.dirname(__FILE__))
+      assert_match file_content, File.read(template_file)
+    end
+    assert_file 'app/assets/stylesheets/twbs.css.less' do |file_content|
+      template_file = File.expand_path('../../lib/generators/twbs_sass_rails/install/templates/twbs.css.less', File.dirname(__FILE__))
+      assert_match file_content, File.read(template_file)
+    end
+    assert_file 'app/assets/javascripts/application.js'
+    assert_file 'app/assets/javascripts/twbs.js.coffee' do |file_content|
+      template_file = File.expand_path('../../lib/generators/twbs_sass_rails/install/templates/twbs.js.coffee', File.dirname(__FILE__))
+      assert_match file_content, File.read(template_file)
+    end
+  end
+
+  test "Assert existing application.css properly requires bootstrap" do
+    copy_default_asset 'application.css', 'stylesheets'
+    run_generator
+    assert_file 'app/assets/stylesheets/application.css', /^ \*\= stub twbs-variables$/
+    assert_file 'app/assets/stylesheets/application.css', /^ \*\= require twbs$/
+  end
+
+  test "Assert existing application.js properly requires bootstrap" do
+    copy_default_asset 'application.js', 'javascripts'
+    run_generator
+    assert_file 'app/assets/javascripts/application.js', /^\/\/\= require twbs\/bootstrap$/
+  end
+
+  def copy_default_asset(asset_name, asset_dir)
+    asset = File.expand_path("default_rails_assets/#{asset_name}", File.dirname(__FILE__))
+    destination = File.join(destination_root, "app/assets/#{asset_dir}")
+
+    FileUtils.mkdir_p(destination)
+    FileUtils.cp asset, destination
+  end
+end

data/test/integration/assets_precompile_integration_test.rb

@@ -0,0 +1,49 @@
+require 'test_helper'
+
+describe "assets precompile in production environment integration" do
+  FileUtils::rm_rf 'test/dummy/public/assets'
+  system 'cd test/dummy && RAILS_ENV=production rake assets:precompile'
+
+  it "provides respond.js" do
+    visit "/assets/#{get_asset_name('respond','js')}"
+  end
+
+  it "provides fontawesome" do
+    ['eot', 'svg', 'ttf', 'woff'].each do |fmt|
+      font_file = get_asset_name('fontawesome-webfont', fmt)
+      # NOTE: Rails 3 skips fingerprint when asset has parameters.
+      font_file = 'fontawesome-webfont.svg' if Rails.version.start_with?('3')
+      visit "/assets/#{font_file}"
+      visit "/assets/#{get_asset_name('application', 'css')}"
+      page.text.must_include font_file
+      page.text.must_include "#{font_file}?\#iefix" if fmt == 'eot' && Rails.version.start_with?('4')
+    end
+  end
+
+  it "provides glyphicons" do
+    ['eot', 'svg', 'ttf', 'woff'].each do |fmt|
+      font_file = get_asset_name('glyphicons-halflings-regular', fmt)
+      # NOTE: Rails 3 skips fingerprint when asset has parameters.
+      font_file = 'glyphicons-halflings-regular.svg' if Rails.version.start_with?('3')
+      visit "/assets/#{font_file}"
+      visit "/assets/#{get_asset_name('application', 'css')}"
+      page.text.must_include font_file
+      page.text.must_include "#{font_file}?\#iefix" if fmt == 'eot' && Rails.version.start_with?('4')
+    end
+  end
+
+  it "overrides Bootstrap variables" do
+    visit "/assets/#{get_asset_name('application', 'css')}"
+    page.text.must_include 'color: #d10d10;'
+  end
+
+  it "overrides Bootstrap variables in user stylesheets" do
+    visit "/assets/#{get_asset_name('application', 'css')}"
+    page.text.must_include '.test-class { color: #d10d10; }'
+  end
+
+  private
+  def get_asset_name(asset_name, asset_ext)
+    Dir::glob("test/dummy/public/assets/#{asset_name}-*.#{asset_ext}").first.split('/').last
+  end
+end

data/test/integration/twbs_sass_rails_integration_test.rb

@@ -0,0 +1,37 @@
+require 'test_helper'
+
+describe "twbs sass rails integration" do
+  it "does not default to glyphicons" do
+    visit '/assets/default-twbs.css'
+    page.text.wont_include 'glyphicons'
+  end
+
+  it "provides bootstrap stylesheet on the asset pipeline" do
+    visit '/assets/application.css'
+    page.text.must_include '* Bootstrap'
+  end
+
+  it "provides bootstrap javscript on the asset pipeline" do
+    visit '/assets/application.js'
+    page.text.must_include '* Bootstrap'
+  end
+
+  it "provides respond.js on the asset pipeline" do
+    visit '/assets/respond.js'
+    page.text.must_include 'Respond.js'
+  end
+
+  it "provides fontawesome on the asset pipeline" do
+    visit '/assets/fontawesome-webfont.eot'
+    visit '/assets/fontawesome-webfont.svg'
+    visit '/assets/fontawesome-webfont.ttf'
+    visit '/assets/fontawesome-webfont.woff'
+  end
+
+  it "provides glyphicons on the asset pipeline" do
+    visit '/assets/glyphicons-halflings-regular.eot'
+    visit '/assets/glyphicons-halflings-regular.svg'
+    visit '/assets/glyphicons-halflings-regular.ttf'
+    visit '/assets/glyphicons-halflings-regular.woff'
+  end
+end

data/test/test_helper.rb

@@ -0,0 +1,38 @@
+# Configure Rails Environment
+ENV['RAILS_ENV'] = 'test'
+
+if ENV['CI']
+  require 'coveralls'
+  Coveralls.wear!
+else
+  require 'simplecov'
+  SimpleCov.start 'rails'
+end
+
+require File.expand_path('../dummy/config/environment.rb',  __FILE__)
+
+require 'rails/test_help'
+Rails.backtrace_cleaner.remove_silencers!
+
+require 'minitest/autorun'
+require 'capybara/rails'
+
+require 'debugger'
+Debugger.settings[:autoeval] = true
+
+require 'turn'
+Turn.config.format = :cool
+Turn.config.natural = true
+Turn.config.verbose = true
+
+# Load support files
+Dir["#{File.dirname(__FILE__)}/support/**/*.rb"].each { |f| require f }
+
+# For generators
+require 'rails/generators/test_case'
+require 'generators/twbs_sass_rails/install/install_generator'
+
+class IntegrationTest < MiniTest::Spec
+  include Capybara::DSL
+  register_spec_type(/integration$/, self)
+end

data/twbs_sass_rails.gemspec

@@ -0,0 +1,34 @@
+$:.push File.expand_path('../lib', __FILE__)
+
+# Maintain your gem's version:
+require 'twbs_sass_rails/version'
+
+# Describe your gem and declare its dependencies:
+Gem::Specification.new do |s|
+  s.name        = 'twbs_sass_rails'
+  s.version     = TwbsSassRails::VERSION
+  s.authors     = ['diowa']
+  s.email       = ['dev@diowa.com']
+  s.homepage    = 'https://github.com/diowa/twbs_sass_rails'
+  s.summary     = 'Bootstrap Sass assets in a Rails application.'
+  s.description = s.summary
+  s.license     = 'BSD 2-Clause'
+
+  s.files         = `git ls-files`.split("\n") - `git ls-files -- {src/*,".*"}`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ['lib']
+
+  s.add_runtime_dependency 'rails', '>= 3.2.14'
+  s.add_runtime_dependency 'therubyracer'
+  s.add_runtime_dependency 'less-rails'
+
+  s.add_development_dependency 'capybara'
+  s.add_development_dependency 'coveralls'
+  s.add_development_dependency 'debugger'
+  s.add_development_dependency 'minitest', '~> 4'
+  s.add_development_dependency 'rake'
+  s.add_development_dependency 'simplecov'
+  s.add_development_dependency 'sqlite3'
+  s.add_development_dependency 'turn'
+end

data/vendor/assets/javascripts/respond.js

@@ -0,0 +1,342 @@
+/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
+/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */
+
+window.matchMedia = window.matchMedia || (function( doc, undefined ) {
+
+  "use strict";
+
+  var bool,
+      docElem = doc.documentElement,
+      refNode = docElem.firstElementChild || docElem.firstChild,
+      // fakeBody required for <FF4 when executed in <head>
+      fakeBody = doc.createElement( "body" ),
+      div = doc.createElement( "div" );
+
+  div.id = "mq-test-1";
+  div.style.cssText = "position:absolute;top:-100em";
+  fakeBody.style.background = "none";
+  fakeBody.appendChild(div);
+
+  return function(q){
+
+    div.innerHTML = "&shy;<style media=\"" + q + "\"> #mq-test-1 { width: 42px; }</style>";
+
+    docElem.insertBefore( fakeBody, refNode );
+    bool = div.offsetWidth === 42;
+    docElem.removeChild( fakeBody );
+
+    return {
+      matches: bool,
+      media: q
+    };
+
+  };
+
+}( document ));
+
+
+
+
+
+/*! Respond.js v1.3.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs  */
+(function( win ){
+
+	"use strict";
+
+	//exposed namespace
+	var respond = {};
+	win.respond = respond;
+	
+	//define update even in native-mq-supporting browsers, to avoid errors
+	respond.update = function(){};
+	
+	//expose media query support flag for external use
+	respond.mediaQueriesSupported	= win.matchMedia && win.matchMedia( "only all" ).matches;
+	
+	//if media queries are supported, exit here
+	if( respond.mediaQueriesSupported ){
+		return;
+	}
+	
+	//define vars
+	var doc = win.document,
+		docElem = doc.documentElement,
+		mediastyles = [],
+		rules = [],
+		appendedEls = [],
+		parsedSheets = {},
+		resizeThrottle = 30,
+		head = doc.getElementsByTagName( "head" )[0] || docElem,
+		base = doc.getElementsByTagName( "base" )[0],
+		links = head.getElementsByTagName( "link" ),
+		requestQueue = [],
+		
+		//loop stylesheets, send text content to translate
+		ripCSS = function(){
+
+			for( var i = 0; i < links.length; i++ ){
+				var sheet = links[ i ],
+				href = sheet.href,
+				media = sheet.media,
+				isCSS = sheet.rel && sheet.rel.toLowerCase() === "stylesheet";
+
+				//only links plz and prevent re-parsing
+				if( !!href && isCSS && !parsedSheets[ href ] ){
+					// selectivizr exposes css through the rawCssText expando
+					if (sheet.styleSheet && sheet.styleSheet.rawCssText) {
+						translate( sheet.styleSheet.rawCssText, href, media );
+						parsedSheets[ href ] = true;
+					} else {
+						if( (!/^([a-zA-Z:]*\/\/)/.test( href ) && !base) ||
+							href.replace( RegExp.$1, "" ).split( "/" )[0] === win.location.host ){
+							requestQueue.push( {
+								href: href,
+								media: media
+							} );
+						}
+					}
+				}
+			}
+			makeRequests();
+		},
+		
+		//recurse through request queue, get css text
+		makeRequests	= function(){
+			if( requestQueue.length ){
+				var thisRequest = requestQueue.shift();
+				
+				ajax( thisRequest.href, function( styles ){
+					translate( styles, thisRequest.href, thisRequest.media );
+					parsedSheets[ thisRequest.href ] = true;
+
+					// by wrapping recursive function call in setTimeout 
+					// we prevent "Stack overflow" error in IE7
+					win.setTimeout(function(){ makeRequests(); },0);
+				} );
+			}
+		},
+		
+		//find media blocks in css text, convert to style blocks
+		translate = function( styles, href, media ){
+			var qs = styles.match(  /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi ),
+				ql = qs && qs.length || 0;
+
+			//try to get CSS path
+			href = href.substring( 0, href.lastIndexOf( "/" ) );
+
+			var repUrls	= function( css ){
+					return css.replace( /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g, "$1" + href + "$2$3" );
+				},
+				useMedia = !ql && media;
+
+			//if path exists, tack on trailing slash
+			if( href.length ){ href += "/"; }	
+				
+			//if no internal queries exist, but media attr does, use that	
+			//note: this currently lacks support for situations where a media attr is specified on a link AND
+				//its associated stylesheet has internal CSS media queries.
+				//In those cases, the media attribute will currently be ignored.
+			if( useMedia ){
+				ql = 1;
+			}
+
+			for( var i = 0; i < ql; i++ ){
+				var fullq, thisq, eachq, eql;
+
+				//media attr
+				if( useMedia ){
+					fullq = media;
+					rules.push( repUrls( styles ) );
+				}
+				//parse for styles
+				else{
+					fullq = qs[ i ].match( /@media *([^\{]+)\{([\S\s]+?)$/ ) && RegExp.$1;
+					rules.push( RegExp.$2 && repUrls( RegExp.$2 ) );
+				}
+				
+				eachq = fullq.split( "," );
+				eql	= eachq.length;
+					
+				for( var j = 0; j < eql; j++ ){
+					thisq = eachq[ j ];
+					mediastyles.push( { 
+						media : thisq.split( "(" )[ 0 ].match( /(only\s+)?([a-zA-Z]+)\s?/ ) && RegExp.$2 || "all",
+						rules : rules.length - 1,
+						hasquery : thisq.indexOf("(") > -1,
+						minw : thisq.match( /\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" ), 
+						maxw : thisq.match( /\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" )
+					} );
+				}	
+			}
+
+			applyMedia();
+		},
+        
+		lastCall,
+		
+		resizeDefer,
+		
+		// returns the value of 1em in pixels
+		getEmValue = function() {
+			var ret,
+				div = doc.createElement('div'),
+				body = doc.body,
+				fakeUsed = false;
+									
+			div.style.cssText = "position:absolute;font-size:1em;width:1em";
+					
+			if( !body ){
+				body = fakeUsed = doc.createElement( "body" );
+				body.style.background = "none";
+			}
+					
+			body.appendChild( div );
+								
+			docElem.insertBefore( body, docElem.firstChild );
+								
+			ret = div.offsetWidth;
+								
+			if( fakeUsed ){
+				docElem.removeChild( body );
+			}
+			else {
+				body.removeChild( div );
+			}
+			
+			//also update eminpx before returning
+			ret = eminpx = parseFloat(ret);
+								
+			return ret;
+		},
+		
+		//cached container for 1em value, populated the first time it's needed 
+		eminpx,
+		
+		//enable/disable styles
+		applyMedia = function( fromResize ){
+			var name = "clientWidth",
+				docElemProp = docElem[ name ],
+				currWidth = doc.compatMode === "CSS1Compat" && docElemProp || doc.body[ name ] || docElemProp,
+				styleBlocks	= {},
+				lastLink = links[ links.length-1 ],
+				now = (new Date()).getTime();
+
+			//throttle resize calls	
+			if( fromResize && lastCall && now - lastCall < resizeThrottle ){
+				win.clearTimeout( resizeDefer );
+				resizeDefer = win.setTimeout( applyMedia, resizeThrottle );
+				return;
+			}
+			else {
+				lastCall = now;
+			}
+										
+			for( var i in mediastyles ){
+				if( mediastyles.hasOwnProperty( i ) ){
+					var thisstyle = mediastyles[ i ],
+						min = thisstyle.minw,
+						max = thisstyle.maxw,
+						minnull = min === null,
+						maxnull = max === null,
+						em = "em";
+					
+					if( !!min ){
+						min = parseFloat( min ) * ( min.indexOf( em ) > -1 ? ( eminpx || getEmValue() ) : 1 );
+					}
+					if( !!max ){
+						max = parseFloat( max ) * ( max.indexOf( em ) > -1 ? ( eminpx || getEmValue() ) : 1 );
+					}
+					
+					// if there's no media query at all (the () part), or min or max is not null, and if either is present, they're true
+					if( !thisstyle.hasquery || ( !minnull || !maxnull ) && ( minnull || currWidth >= min ) && ( maxnull || currWidth <= max ) ){
+						if( !styleBlocks[ thisstyle.media ] ){
+							styleBlocks[ thisstyle.media ] = [];
+						}
+						styleBlocks[ thisstyle.media ].push( rules[ thisstyle.rules ] );
+					}
+				}
+			}
+			
+			//remove any existing respond style element(s)
+			for( var j in appendedEls ){
+				if( appendedEls.hasOwnProperty( j ) ){
+					if( appendedEls[ j ] && appendedEls[ j ].parentNode === head ){
+						head.removeChild( appendedEls[ j ] );
+					}
+				}
+			}
+			
+			//inject active styles, grouped by media type
+			for( var k in styleBlocks ){
+				if( styleBlocks.hasOwnProperty( k ) ){
+					var ss = doc.createElement( "style" ),
+						css = styleBlocks[ k ].join( "\n" );
+					
+					ss.type = "text/css";	
+					ss.media = k;
+					
+					//originally, ss was appended to a documentFragment and sheets were appended in bulk.
+					//this caused crashes in IE in a number of circumstances, such as when the HTML element had a bg image set, so appending beforehand seems best. Thanks to @dvelyk for the initial research on this one!
+					head.insertBefore( ss, lastLink.nextSibling );
+					
+					if ( ss.styleSheet ){ 
+						ss.styleSheet.cssText = css;
+					}
+					else {
+						ss.appendChild( doc.createTextNode( css ) );
+					}
+
+					//push to appendedEls to track for later removal
+					appendedEls.push( ss );
+				}
+			}
+		},
+		//tweaked Ajax functions from Quirksmode
+		ajax = function( url, callback ) {
+			var req = xmlHttp();
+			if (!req){
+				return;
+			}	
+			req.open( "GET", url, true );
+			req.onreadystatechange = function () {
+				if ( req.readyState !== 4 || req.status !== 200 && req.status !== 304 ){
+					return;
+				}
+				callback( req.responseText );
+			};
+			if ( req.readyState === 4 ){
+				return;
+			}
+			req.send( null );
+		},
+		//define ajax obj 
+		xmlHttp = (function() {
+			var xmlhttpmethod = false;	
+			try {
+				xmlhttpmethod = new win.XMLHttpRequest();
+			}
+			catch( e ){
+				xmlhttpmethod = new win.ActiveXObject( "Microsoft.XMLHTTP" );
+			}
+			return function(){
+				return xmlhttpmethod;
+			};
+		})();
+	
+	//translate CSS
+	ripCSS();
+	
+	//expose update for re-running respond later on
+	respond.update = ripCSS;
+	
+	//adjust on resize
+	function callMedia(){
+		applyMedia( true );
+	}
+	if( win.addEventListener ){
+		win.addEventListener( "resize", callMedia, false );
+	}
+	else if( win.attachEvent ){
+		win.attachEvent( "onresize", callMedia );
+	}
+})(this);

data/vendor/assets/javascripts/twbs/bootstrap/affix.js

@@ -0,0 +1,126 @@
+/* ========================================================================
+ * Bootstrap: affix.js v3.0.0
+ * http://twbs.github.com/bootstrap/javascript.html#affix
+ * ========================================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================================== */
+
+
++function ($) { "use strict";
+
+  // AFFIX CLASS DEFINITION
+  // ======================
+
+  var Affix = function (element, options) {
+    this.options = $.extend({}, Affix.DEFAULTS, options)
+    this.$window = $(window)
+      .on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this))
+      .on('click.bs.affix.data-api',  $.proxy(this.checkPositionWithEventLoop, this))
+
+    this.$element = $(element)
+    this.affixed  =
+    this.unpin    = null
+
+    this.checkPosition()
+  }
+
+  Affix.RESET = 'affix affix-top affix-bottom'
+
+  Affix.DEFAULTS = {
+    offset: 0
+  }
+
+  Affix.prototype.checkPositionWithEventLoop = function () {
+    setTimeout($.proxy(this.checkPosition, this), 1)
+  }
+
+  Affix.prototype.checkPosition = function () {
+    if (!this.$element.is(':visible')) return
+
+    var scrollHeight = $(document).height()
+    var scrollTop    = this.$window.scrollTop()
+    var position     = this.$element.offset()
+    var offset       = this.options.offset
+    var offsetTop    = offset.top
+    var offsetBottom = offset.bottom
+
+    if (typeof offset != 'object')         offsetBottom = offsetTop = offset
+    if (typeof offsetTop == 'function')    offsetTop    = offset.top()
+    if (typeof offsetBottom == 'function') offsetBottom = offset.bottom()
+
+    var affix = this.unpin   != null && (scrollTop + this.unpin <= position.top) ? false :
+                offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ? 'bottom' :
+                offsetTop    != null && (scrollTop <= offsetTop) ? 'top' : false
+
+    if (this.affixed === affix) return
+    if (this.unpin) this.$element.css('top', '')
+
+    this.affixed = affix
+    this.unpin   = affix == 'bottom' ? position.top - scrollTop : null
+
+    this.$element.removeClass(Affix.RESET).addClass('affix' + (affix ? '-' + affix : ''))
+
+    if (affix == 'bottom') {
+      this.$element.offset({ top: document.body.offsetHeight - offsetBottom - this.$element.height() })
+    }
+  }
+
+
+  // AFFIX PLUGIN DEFINITION
+  // =======================
+
+  var old = $.fn.affix
+
+  $.fn.affix = function (option) {
+    return this.each(function () {
+      var $this   = $(this)
+      var data    = $this.data('bs.affix')
+      var options = typeof option == 'object' && option
+
+      if (!data) $this.data('bs.affix', (data = new Affix(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.affix.Constructor = Affix
+
+
+  // AFFIX NO CONFLICT
+  // =================
+
+  $.fn.affix.noConflict = function () {
+    $.fn.affix = old
+    return this
+  }
+
+
+  // AFFIX DATA-API
+  // ==============
+
+  $(window).on('load', function () {
+    $('[data-spy="affix"]').each(function () {
+      var $spy = $(this)
+      var data = $spy.data()
+
+      data.offset = data.offset || {}
+
+      if (data.offsetBottom) data.offset.bottom = data.offsetBottom
+      if (data.offsetTop)    data.offset.top    = data.offsetTop
+
+      $spy.affix(data)
+    })
+  })
+
+}(window.jQuery);