stable-rails 0.0.1 → 0.0.2

data/.gitignore

@@ -14,3 +14,4 @@ spec/reports
 test/tmp
 test/version_tmp
 tmp
+.sass-cache

data/Gemfile.lock

@@ -39,6 +39,8 @@ GEM
     rack (1.4.1)
     rack-cache (1.2)
       rack (>= 0.4)
+    rack-protection (1.3.2)
+      rack
     rack-ssl (1.3.2)
       rack
     rack-test (0.6.2)
@@ -53,6 +55,11 @@ GEM
     rake (10.0.3)
     rdoc (3.12)
       json (~> 1.4)
+    sass (3.2.5)
+    sinatra (1.3.3)
+      rack (~> 1.3, >= 1.3.6)
+      rack-protection (~> 1.2)
+      tilt (~> 1.3, >= 1.3.3)
     sprockets (2.2.2)
       hike (~> 1.2)
       multi_json (~> 1.0)
@@ -65,4 +72,6 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  sass
+  sinatra
   stable-rails!

data/app/assets/javascripts/stable/stable.js

@@ -1,41 +1,43 @@
 (function($) {
 
   $.fn.stable = function() {
-    var stable = $(this);
-    var top_left_cell = $('.top_left', stable);
+    return this.each(function() {
+      var stable = $(this);
+      var top_left_cell = $('.c-left .t-header', stable);
 
-    $('#scroll-vertical div', stable).height($('.c-right', stable).height());
-    $('#scroll-horizontal div', stable).width($('.c-right', stable).width());
+      $('.scroll-vertical div', stable).height($('.c-right', stable).height());
+      $('.scroll-horizontal div', stable).width($('.c-right', stable).width()+$('.c-left', stable).width()+15);
 
-    stable.css('padding-bottom', top_left_cell.outerHeight());
-    stable.css('padding-right', top_left_cell.outerWidth());
+      stable.css('padding-bottom', top_left_cell.outerHeight());
+      stable.css('padding-right', top_left_cell.outerWidth()+15);
 
-    stable.addClass('on');
+      stable.addClass('on');
 
-    // Para el Scroll VERTICAL
-    $('#scroll-vertical', stable).scroll(function(){
-       $('.vertical', stable).scrollTop($(this).scrollTop());
-    });
+      // Para el Scroll VERTICAL
+      $('.scroll-vertical', stable).scroll(function(){
+         $('.vertical', stable).scrollTop($(this).scrollTop());
+      });
 
-    // Para el Scroll HORIZONTAL
-    $('#scroll-horizontal', stable).scroll(function(){
-       $('.horizontal', stable).scrollLeft($(this).scrollLeft());
-    });
+      // Para el Scroll HORIZONTAL
+      $('.scroll-horizontal', stable).scroll(function(){
+         $('.horizontal', stable).scrollLeft($(this).scrollLeft());
+      });
 
-    // Para la tabla
-    $('#mask', stable).mousewheel(function(event, delta, deltaX, deltaY) {
-      if (!stable.hasClass('on')) return;
+      // Para la tabla
+      $('.mask', stable).mousewheel(function(event, delta, deltaX, deltaY) {
+        if (!stable.hasClass('on')) return;
 
-      var newLeft = $('.horizontal', stable).scrollLeft() + 25 * deltaX;
-      var newTop = $('.vertical', stable).scrollTop() - 25 * deltaY;
+        var newLeft = $('.horizontal', stable).scrollLeft() + 25 * deltaX;
+        var newTop = $('.vertical', stable).scrollTop() - 25 * deltaY;
 
-      $('.horizontal', stable).scrollLeft(newLeft);
-      $('.vertical', stable).scrollTop(newTop);
+        $('.horizontal', stable).scrollLeft(newLeft);
+        $('.vertical', stable).scrollTop(newTop);
 
-      $('#scroll-horizontal', stable).scrollLeft(newLeft);
-      $('#scroll-vertical', stable).scrollTop(newTop);
+        $('.scroll-horizontal', stable).scrollLeft(newLeft);
+        $('.scroll-vertical', stable).scrollTop(newTop);
 
-      event.preventDefault();
+        event.preventDefault();
+      });
     });
   };
 

data/app/assets/stylesheets/stable/common.scss

@@ -0,0 +1,33 @@
+/* -- TABLA CON SCROLL APAGADO -- */
+.table-scroll {
+  position:relative;
+  margin-bottom:30px;
+}
+.table-scroll .scroll-vertical { display:none }
+.table-scroll .scroll-horizontal { display:none }
+
+/* -- TABLA CON SCROLL ENCENDIDO -- */
+.table-scroll.on {
+  position:relative;
+  margin-bottom:30px;
+}
+
+.table-scroll.on .mask { height:inherit; width:100%; overflow:hidden; white-space:nowrap; font-size:0; padding-bottom:inherit; padding-right:inherit }
+.table-scroll .mask { white-space:nowrap; font-size:0; }
+
+.table-scroll.on .scrollbars { position:relative; width:100%; height:inherit; padding-bottom:inherit; padding-right:inherit }
+.table-scroll.on .scroll-vertical { position:absolute; height:100%; width:18px; right:-2px; z-index:100; overflow-y:scroll; display:block }
+.table-scroll.on .scroll-horizontal { position:absolute; height:18px; width:100%; left:0px; bottom:-17px; z-index:100; overflow-x:scroll; display:block }
+.table-scroll.on .scroll-horizontal div { height:1px }
+
+
+/* -- ESTRUCTURA GRAL DE LA TABLA-- */
+.c-left, .c-right { display:inline-block; vertical-align:top; height:inherit }
+.c-right { width:inherit }
+
+.t-body { height:inherit; overflow:hidden }
+.t-row { font-size:0; line-height:0 }
+.t-header { overflow:hidden }
+.t-row div { display:inline-block; overflow:hidden }
+
+

data/app/assets/stylesheets/stable/index.scss

@@ -1,41 +1,17 @@
-/* -- TABLA CON SCROLL APAGADO -- */
-.table-scroll {
-  position:relative;
-  margin:0 auto; /*-- tabla centrada --*/
-  margin-bottom:30px;
+/*
+ *= require stable/common
+ *= require_self
+*/
+
+.t-header { 
+  background:#333333; 
+  color:#FFFFFF 
 }
-.table-scroll #scroll-vertical { display:none }
-.table-scroll #scroll-horizontal { display:none }
-
-/* -- TABLA CON SCROLL ENCENDIDO -- */
-.table-scroll.on {
-  position:relative;
-  margin-bottom:30px;
-  width:80%; height:200px /*-- aplicados para este ejemplo en particular --*/;
-}
-
-.table-scroll.on #mask { height:inherit; width:100%; overflow:hidden; white-space:nowrap; font-size:0; padding-bottom:inherit; padding-right:inherit }
-.table-scroll #mask { white-space:nowrap; font-size:0; }
-
-.table-scroll.on #scrollbars { position:relative; width:100%; height:inherit; padding-bottom:inherit; padding-right:inherit }
-.table-scroll.on #scroll-vertical { position:absolute; height:100%; width:18px; right:-17px; z-index:100; overflow-y:scroll; display:block }
-.table-scroll.on #scroll-horizontal { position:absolute; height:18px; width:100%; left:0px; bottom:-17px; z-index:100; overflow-x:scroll; display:block }
-.table-scroll.on #scroll-horizontal div { height:1px }
-
-
-/* -- ESTRUCTURA GRAL DE LA TABLA-- */
-.c-left, .c-right { display:inline-block; vertical-align:top; height:inherit }
-.c-right { width:inherit }
-
-.t-header { background:#333333; color:#FFFFFF; overflow:hidden }
-.t-body { height:inherit; overflow:hidden }
-.t-row { font-size:0 }
-.t-row div { border:1px solid #999; font-size:11pt; display:inline-block; height:20px; overflow:hidden }
-
-/* ----- ANCHO de CELDAS para este ejemplo ----- */
-.table-scroll.w120 .t-row div { width:120px; padding:5px }
-
-/* ----- ANCHO PARTICULAR de celdas a modo de ejemplo  ----- */
-.w200 { width:200px !important;  }
-
 
+.t-row div { 
+  border-bottom:1px solid #ededed; 
+  font-size:11pt; 
+  line-height:11pt; 
+  height:20px; 
+  padding: 5px; 
+}

data/app/assets/stylesheets/stable/theme-gray.scss

@@ -0,0 +1,7 @@
+/*
+ *= require stable/common
+ *= require_self
+*/
+
+.t-header { background:#cccccc; color: darkred; overflow:hidden }
+.t-row div { border:1px solid #999; font-size:12pt; display:inline-block; height:20px; overflow:hidden }

data/app/helpers/stable_helper.rb

@@ -1,15 +1,15 @@
 module StableHelper
 	
-	def stable(html_options = nil)
-		@builder = STableBuilder.new(self)
-		@builder.table(html_options) do
+	def stable(options = {})
+		@builder = STableBuilder.new(self, '/stable/stable')
+		@builder.table(options) do
 			yield
 		end
 	end
 
-	def table(html_options = nil)
-		@builder = TableBuilder.new(self)
-		@builder.table(html_options) do
+	def table(options = {})
+		@builder = STableBuilder.new(self, '/stable/table')
+		@builder.table(options) do
 			yield
 		end
 	end
@@ -20,75 +20,77 @@ module StableHelper
 		end
 	end
 
-	def td(content, options = {})
-		@builder.td content, options
+	def td(content, html_options = {})
+		@builder.td content, html_options
 	end
 
 end
 
-class TableBuilder
-
-	def initialize(context)
-		@context = context
-		@row_index = -1
-		@column_html_options = []
-	end
-
-	def table(html_options)
-		@context.haml_tag :table, html_options do
-			yield
-		end
-	end
-
-	def tr
-		@row_index += 1
-		@col_index = -1
-
-		@context.haml_tag :tr do
-			yield
+module Enumerable
+	def enum_drop_with_index(count)
+		self.each_with_index do |e, index|
+			next if index < count
+			yield e, index
 		end
 	end
 
-	def td(content, options)
-		@col_index += 1
-
-		if @row_index == 0
-			@column_html_options << (options.delete(:column) || {})
-		end
-
-		@context.haml_tag :td, options.merge(@column_html_options[@col_index]) do
-			@context.haml_concat content
+	def enum_drop(count)
+		self.enum_drop_with_index(count) do |e, index|
+			yield e
 		end
 	end
 end
 
 class STableBuilder
 
-	def initialize(context)
+	def initialize(context, partial_view)
+		@partial_view =  partial_view
 		@context = context
 		@data = []
 		@column_html_options = []
+		@row_index = -1
 	end
 
-	def table(html_options)
+	def table(options)
+		options.reverse_merge!({ fixed_rows: 1 })
+		html_options = options.clone
+		html_options.delete :fixed_rows
+
 		yield
 
-		@context.haml_concat @context.render(:partial => '/stable/stable', 
+		@context.haml_concat @context.render(:partial => @partial_view, 
 			:locals => { 
 				:data => @data, 
-				:html_options => html_options, 
-				:column_html_options => @column_html_options 
+				:options => options,
+				:html_options => html_options
 			}
 		)		
 	end
 
 	def tr
+		@row_index += 1
+		@col_index = -1
+
 		@data << []
 		yield
 	end
 
-	def td(content, options)
-		@column_html_options << (options[:column] || {})
-		@data.last << content
+	def td(content, html_options)
+		@col_index += 1
+
+		# ensure slot for @column_html_options[@col_index]
+		if @col_index >= @column_html_options.size
+			@column_html_options << {}
+		end
+		
+		# if html_options define style for column, override it
+		if c = html_options.delete(:column)
+			@column_html_options[@col_index] = c
+		end
+
+		# merge html_options with column html_options
+		html_options.merge!(@column_html_options[@col_index])
+
+		@data.last << { value: content, html_options: html_options }
 	end
 end

data/app/views/stable/_stable.haml

@@ -1,36 +1,31 @@
-.stable.table-scroll.w120{ html_options }
-  #scrollbars
-    #scroll-vertical
+.stable.table-scroll{ html_options }
+  .scrollbars
+    .scroll-vertical
       %div
-    #scroll-horizontal
+    .scroll-horizontal
       %div
-    #mask
+    .mask
       .c-left
         .t-header
-          .t-row
-            %div.top_left{column_html_options[0]}
-              = data[0][0]
+          - (0..options[:fixed_rows]-1).each do |row|
+            .t-row
+              %div{data[row][0][:html_options]}
+                = data[row][0][:value]
         .t-body.vertical
-          - data.each_with_index do |row, index|
-            - next if index == 0
+          - data.enum_drop(options[:fixed_rows]) do |row|
             .t-row
-              %div{column_html_options[0]}
-                = row[0]
+              %div{row[0][:html_options]}
+                = row[0][:value]
       .c-right
         .t-header.horizontal
-          .t-row
-            - data[0].each_with_index do |cell, index|
-              - next if index == 0
-              %div{column_html_options[index]}
-                = cell
+          - (0..options[:fixed_rows]-1).each do |row|
+            .t-row
+              - data[row].enum_drop(1) do |cell|
+                %div{cell[:html_options]}
+                  = cell[:value]
         .t-body.vertical.horizontal
-          - data.each_with_index do |row, index|
-            - next if index == 0
+          - data.enum_drop(options[:fixed_rows]) do |row|
             .t-row
-              - row.each_with_index do |cell, index|
-                - next if index == 0
-                %div{column_html_options[index]}
-                  = cell
-
-
-
+              - row.enum_drop(1) do |cell|
+                %div{cell[:html_options]}
+                  = cell[:value]

data/app/views/stable/_table.haml

@@ -0,0 +1,6 @@
+%table{ html_options }
+  - data.each do |row|
+    %tr
+      - row.each do |cell|
+        %td{ cell[:html_options] }
+          = cell[:value]

data/lib/stable-rails/version.rb

@@ -1,5 +1,5 @@
 module Stable
   module Rails
-    VERSION = "0.0.1"
+    VERSION = "0.0.2"
   end
 end

data/spec/sinatra-app/app.rb

@@ -0,0 +1,44 @@
+require 'sinatra'
+require 'haml'
+require 'sass'
+require 'action_view'
+require 'sprockets'
+require_relative '../../app/helpers/stable_helper'
+include StableHelper
+
+set :assets, Sprockets::Environment.new
+settings.assets.append_path File.join(File.dirname(__FILE__), "../../app/assets/javascripts")
+settings.assets.append_path File.join(File.dirname(__FILE__), "../../app/assets/stylesheets")
+
+helpers do
+  def render(*args)
+    # HACK to load gem partial view
+    if args.first.is_a?(Hash) && args.first.keys.include?(:partial)
+      partial = args.first[:partial]
+      location = File.join("../../../app/views", File.split(partial)[0], "_#{File.split(partial)[1]}") 
+      options = { :locals => args.last[:locals] }
+      return haml location.to_sym, options 
+    else
+      super
+    end
+  end
+end
+
+get '/' do
+  haml :index
+end
+
+get "/javascripts/:file.js" do
+  content_type "application/javascript"
+  settings.assets["#{params[:file]}.js"]
+end
+
+get "/stylesheets/:file.css" do
+  content_type "text/css"
+  settings.assets["#{params[:file]}.css"]
+end
+
+get "/stylesheets/:part/:file.css" do
+  content_type "text/css"
+  settings.assets["#{params[:part]}/#{params[:file]}.css"]
+end

data/spec/sinatra-app/views/index.haml

@@ -0,0 +1,54 @@
+- stable class: 'w120' do
+  - tr do
+    - td 'L\N'
+    - td 'Title 1'
+    - td 'Title 2'
+    - td 'Title 3'
+    - td 'Title 4'
+    - td 'Title 5'
+  - ('a'..'z').each do |c|
+    - tr do
+      - td "Title #{c}"
+      - td "#{c}1"
+      - td "#{c}2"
+      - td "#{c}3"
+      - td "#{c}4"
+      - td "#{c}5"
+
+- stable class: 'w120', fixed_rows: 2 do
+  - tr do
+    - td 'L\N'
+    - td 'Title 1'
+    - td 'Title 2'
+    - td 'Title 3', column: { class: 'red' }
+    - td 'Title 4'
+    - td 'Title 5'
+    - td 'Title 6'
+    - td 'Title 7'
+  - ('a'..'z').each do |c|
+    - tr do
+      - td "Title #{c}"
+      - td "#{c}1"
+      - td "#{c}2"
+      - td "#{c}3"
+      - td "#{c}4"
+      - td "#{c}5", column: { class: 'blue' }
+      - td "#{c}6"
+      - td "#{c}7"
+
+- stable class: 'w120', fixed_rows: 2 do
+  - tr do
+    - td 'L\N'
+    - td 'Title 1', style: 'width: 252px; text-align: center'
+    - td 'Title 3', style: 'width: 252px; text-align: center'
+    - td 'Title 5', style: 'width: 384px; text-align: center'
+  - ('a'..'z').each do |c|
+    - tr do
+      - td "Title #{c}"
+      - td "#{c}1"
+      - td "#{c}2"
+      - td "#{c}3"
+      - td "#{c}4"
+      - td "#{c}5"
+      - td "#{c}6"
+      - td "#{c}7"

data/spec/sinatra-app/views/layout.haml

@@ -0,0 +1,22 @@
+!!!
+%html
+  %head
+    %title stable-rails sample
+    %link(href="/stylesheets/stable.css" media="all" rel="stylesheet" type="text/css")
+    :css
+      .table-scroll {
+        height: 200px;
+        width: 70%;
+      }
+
+      .table-scroll.w120 .t-row div {
+        width: 120px;
+      }
+
+      .red { background-color: red !important; }
+      .blue { background-color: blue !important; }
+    %script(src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript")
+    %script(src="/javascripts/stable.js" type="text/javascript")
+  %body
+    %h1 stable-rails sample
+    =yield

data/stable-rails.gemspec

@@ -18,4 +18,7 @@ Gem::Specification.new do |gem|
   gem.require_paths = ["lib"]
 
   gem.add_runtime_dependency 'haml-rails'
+
+  gem.add_development_dependency 'sinatra'
+  gem.add_development_dependency 'sass'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stable-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
   prerelease: 
 platform: ruby
 authors:
@@ -10,11 +10,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-01-04 00:00:00.000000000 Z
+date: 2013-01-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: haml-rails
-  requirement: &70259525148200 !ruby/object:Gem::Requirement
+  requirement: &70120944830020 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -22,7 +22,29 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70259525148200
+  version_requirements: *70120944830020
+- !ruby/object:Gem::Dependency
+  name: sinatra
+  requirement: &70120944828760 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: *70120944828760
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: &70120944827440 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: *70120944827440
 description: Scrollable table with fixed first row and column.
 email:
 - mscebba@manas.com.ar
@@ -41,11 +63,17 @@ files:
 - app/assets/javascripts/stable/index.js
 - app/assets/javascripts/stable/jquery.mousewheel.js
 - app/assets/javascripts/stable/stable.js
+- app/assets/stylesheets/stable/common.scss
 - app/assets/stylesheets/stable/index.scss
+- app/assets/stylesheets/stable/theme-gray.scss
 - app/helpers/stable_helper.rb
 - app/views/stable/_stable.haml
+- app/views/stable/_table.haml
 - lib/stable-rails.rb
 - lib/stable-rails/version.rb
+- spec/sinatra-app/app.rb
+- spec/sinatra-app/views/index.haml
+- spec/sinatra-app/views/layout.haml
 - stable-rails.gemspec
 homepage: https://github.com/manastech/stable-rails
 licenses: []
@@ -71,4 +99,7 @@ rubygems_version: 1.8.10
 signing_key: 
 specification_version: 3
 summary: Rails gem that allows to easily include scrollable tables.
-test_files: []
+test_files:
+- spec/sinatra-app/app.rb
+- spec/sinatra-app/views/index.haml
+- spec/sinatra-app/views/layout.haml