hashgrid 0.1.0

data/.gitignore

@@ -0,0 +1,3 @@
+pkg/*
+*.gem
+.bundle

data/Gemfile

@@ -0,0 +1,4 @@
+source :gemcutter
+
+# Specify your gem's dependencies in hashgrid.gemspec
+gemspec

data/README.md

@@ -0,0 +1,28 @@
+# Hashgrid
+
+"A little tool that inserts a layout grid in web pages, allows you to hold it in place, and toggle between displaying it in the foreground or background."
+
+## Usage
+
+1. Include the gem in your Gemfile `gem 'hashgrid'`
+2. Run `bundle install`
+3. Add `<%= hashgrid %>` where you want the hashgrid css and javascript files to appear (usually in the head).
+4. Press **G** on your website!
+
+For more info on using hashgrid checkout the [hashgrid website](http://hashgrid.com/).
+
+## TODO
+
+* Customisable column widths
+* Customisable colour
+* Optionally hide vertical/horizontal lines
+
+## Thanks
+
+Thanks go to [Analog](http://analog.coop/) for creating [hashgrid](http://hashgrid.com/).
+
+## Licence
+
+Copyright (c) 2011 Lucas Willett and Odin Dutton
+
+Released under a [Creative Commons Attribution-Share Alike License](http://creativecommons.org/licenses/by-sa/3.0/).

data/Rakefile

@@ -0,0 +1,2 @@
+require 'bundler'
+Bundler::GemHelper.install_tasks

data/app/views/shared/_hashgrid.html.erb

@@ -0,0 +1,24 @@
+<!-- hashgrid -->
+<script>
+  if(!jQuery) {
+    var script = document.createElement('script');
+    script.type = "text/javascript";
+    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js";
+    document.getElementsByTagName('head')[0].appendChild(script);
+  }
+</script>
+<% if options %>
+  <style type="text/css" media="screen">
+    #grid div.vert {
+      <% if options[:column_width] %>
+        width: <%= options[:column_width] %> !important;
+      <% end %>
+      <% if options[:gutter_width] %>
+        margin-right: <%= options[:gutter_width] %> !important;
+      <% end %>
+    }
+  </style>
+<% end %>
+<%= stylesheet_link_tag '/stylesheets/hashgrid/hashgrid' %>
+<%= javascript_include_tag '/javascripts/hashgrid/hashgrid' %>
+<!-- /hashgrid -->

data/hashgrid.gemspec

@@ -0,0 +1,22 @@
+# -*- encoding: utf-8 -*-
+require File.expand_path("../lib/hashgrid/version", __FILE__)
+
+Gem::Specification.new do |s|
+  s.name        = "hashgrid"
+  s.version     = Hashgrid::VERSION
+  s.platform    = Gem::Platform::RUBY
+  s.authors     = ["Lucas Willett", "Odin Dutton"]
+  s.email       = ["lucas@developingego.com", "odindutton@gmail.com"]
+  s.homepage    = "http://github.com/twe4ked/hashgrid"
+  s.summary     = "A simple Rails wrapper for hashgrid."
+  s.description = s.summary
+
+  s.required_rubygems_version = ">= 1.3.6"
+
+  s.files        = `git ls-files`.split("\n")
+  s.executables  = `git ls-files`.split("\n").map{|f| f =~ /^bin\/(.*)/ ? $1 : nil}.compact
+  s.require_paths= ['lib', 'public', 'app']
+  
+  s.add_dependency('rack', '~> 1.2.1')
+  s.add_dependency('rails', '~> 3.0.0')
+end

data/lib/hashgrid/helpers.rb

@@ -0,0 +1,8 @@
+module Hashgrid
+  module Helpers
+    def hashgrid(options = nil)
+      render :partial => "shared/hashgrid", :locals => {:options => options}
+    end
+  end
+end
+ActionView::Base.send :include, Hashgrid::Helpers

data/lib/hashgrid/railtie.rb

@@ -0,0 +1,18 @@
+module Hashgrid
+  class Railtie < Rails::Railtie
+    initializer :before_initiailze do
+      require 'rack'
+      Rails.configuration.middleware.insert_before('Rack::Sendfile', 'Rack::Static',
+        :urls => ['/stylesheets/hashgrid', '/javascripts/hashgrid'],
+        :root => "#{hashgrid_root}/public"
+      )
+      ActionController::Base.prepend_view_path("#{hashgrid_root}/app/views")
+    end
+
+    private
+
+    def hashgrid_root
+      File.expand_path(File.dirname(__FILE__) + '/../..')
+    end
+  end
+end

data/lib/hashgrid/version.rb

@@ -0,0 +1,3 @@
+module Hashgrid
+  VERSION = "0.1.0"
+end

data/lib/hashgrid.rb

@@ -0,0 +1,2 @@
+require 'hashgrid/railtie'
+require 'hashgrid/helpers'

data/public/javascripts/hashgrid/hashgrid.js

@@ -0,0 +1,340 @@
+/**
+ * hashgrid (jQuery version)
+ * http://github.com/dotjay/hashgrid
+ * Version 5, 3 Nov 2010
+ * Written by Jon Gibbins, dotjay.co.uk, accessibility.co.uk
+ * Contibutors:
+ * Sean Coates, seancoates.com
+ * Phil Dokas, jetless.org
+ *
+ * // Using a basic #grid setup
+ * var grid = new hashgrid();
+ *
+ * // Using #grid with a custom id (e.g. #mygrid)
+ * var grid = new hashgrid("mygrid");
+ *
+ * // Using #grid with additional options
+ * var grid = new hashgrid({
+ *     id: 'mygrid',            // id for the grid container
+ *     modifierKey: 'alt',      // optional 'ctrl', 'alt' or 'shift'
+ *     showGridKey: 's',        // key to show the grid
+ *     holdGridKey: 'enter',    // key to hold the grid in place
+ *     foregroundKey: 'f',      // key to toggle foreground/background
+ *     jumpGridsKey: 'd',       // key to cycle through the grid classes
+ *     numberOfGrids: 2,        // number of grid classes used
+ *     classPrefix: 'class',    // prefix for the grid classes
+ *     cookiePrefix: 'mygrid'   // prefix for the cookie name
+ * });
+ */
+if (typeof jQuery == "undefined") {
+	alert("Hashgrid: jQuery not loaded. Make sure it's linked to your pages.");
+}
+
+
+/**
+ * hashgrid overlay
+ */
+var hashgrid = function(set) {
+
+	var options = {
+		id: 'grid',             // id for the grid container
+		modifierKey: null,      // optional 'ctrl', 'alt' or 'shift'
+		showGridKey: 'g',       // key to show the grid
+		holdGridKey: 'h',       // key to hold the grid in place
+		foregroundKey: 'f',     // key to toggle foreground/background
+		jumpGridsKey: 'j',      // key to cycle through the grid classes
+		numberOfGrids: 1,       // number of grid classes used
+		classPrefix: 'grid-',   // prefix for the grid classes
+		cookiePrefix: 'hashgrid'// prefix for the cookie name
+	};
+	var overlayOn = false,
+		sticky = false,
+		overlayZState = 'B',
+		overlayZBackground = -1,
+		overlayZForeground = 9999,
+		classNumber = 1;
+
+	// Apply options
+	if (typeof set == 'object') {
+		var k;
+		for (k in set) options[k] = set[k];
+	}
+	else if (typeof set == 'string') {
+		options.id = set;
+	}
+
+	// Remove any conflicting overlay
+	if ($('#' + options.id).length > 0) {
+		$('#' + options.id).remove();
+	}
+
+	// Create overlay, hidden before adding to DOM
+	var overlayEl = $('<div></div>');
+	overlayEl
+		.attr('id', options.id)
+		.css({
+			display: 'none',
+			'pointer-events': 'none'
+		});
+	$("body").prepend(overlayEl);
+	var overlay = $('#' + options.id);
+
+	// Unless a custom z-index is set, ensure the overlay will be behind everything
+	if (overlay.css('z-index') == 'auto') overlay.css('z-index', overlayZBackground);
+
+	// Override the default overlay height with the actual page height
+	var pageHeight = parseFloat($(document).height());
+	overlay.height(pageHeight);
+
+	// Add the first grid line so that we can measure it
+	overlay.append('<div id="' + options.id + '-horiz" class="horiz first-line">');
+
+	// Position off-screen and display to calculate height
+	var top = overlay.css("top");
+	overlay.css({
+		top: "-999px",
+		display: "block"
+	});
+
+	// Calculate the number of grid lines needed
+	var line = $('#' + options.id + '-horiz'),
+		lineHeight = line.outerHeight();
+
+	// Hide and reset top
+	overlay.css({
+		display: "none",
+		top: top
+	});
+
+	// Break on zero line height
+	if (lineHeight <= 0) return true;
+
+	// Add the remaining grid lines
+	var i, numGridLines = Math.floor(pageHeight / lineHeight);
+	for (i = numGridLines - 1; i >= 1; i--) {
+		overlay.append('<div class="horiz"></div>');
+	}
+
+	// vertical grid
+	overlay.append($('<div class="vert-container"></div>'));
+	var overlayVert = overlay.children('.vert-container');
+	var gridWidth = overlay.width();
+	overlayVert.css({width: gridWidth, position: 'absolute', top: 0});
+	overlayVert.append('<div class="vert first-line">&nbsp;</div>');
+
+	// 30 is an arbitrarily large number...
+	// can't calculate the margin width properly
+	for (i = 0; i < 30; i++) {
+		overlayVert.append('<div class="vert">&nbsp;</div>');
+	}
+
+	overlayVert.children()
+		.height(pageHeight)
+		.css({display: 'inline-block'});
+
+	// Check for saved state
+	var overlayCookie = readCookie(options.cookiePrefix + options.id);
+	if (typeof overlayCookie == 'string') {
+		var state = overlayCookie.split(',');
+		state[2] = Number(state[2]);
+		if ((typeof state[2] == 'number') && !isNaN(state[2])) {
+			classNumber = state[2].toFixed(0);
+			overlay.addClass(options.classPrefix + classNumber);
+		}
+		if (state[1] == 'F') {
+			overlayZState = 'F';
+			overlay.css('z-index', overlayZForeground);
+		}
+		if (state[0] == '1') {
+			overlayOn = true;
+			sticky = true;
+			showOverlay();
+		}
+	}
+	else {
+		overlay.addClass(options.classPrefix + classNumber);
+	}
+
+	// Keyboard controls
+	$(document).bind('keydown', keydownHandler);
+	$(document).bind('keyup', keyupHandler);
+
+	/**
+	 * Helpers
+	 */
+
+	function getModifier(e) {
+		if (options.modifierKey == null) return true; // Bypass by default
+		var m = true;
+		switch(options.modifierKey) {
+			case 'ctrl':
+				m = (e.ctrlKey ? e.ctrlKey : false);
+				break;
+
+			case 'alt':
+				m = (e.altKey ? e.altKey : false);
+				break;
+
+			case 'shift':
+				m = (e.shiftKey ? e.shiftKey : false);
+				break;
+		}
+		return m;
+	}
+
+	function getKey(e) {
+		var k = false, c = (e.keyCode ? e.keyCode : e.which);
+		// Handle keywords
+		if (c == 13) k = 'enter';
+		// Handle letters
+		else k = String.fromCharCode(c).toLowerCase();
+		return k;
+	}
+
+	function saveState() {
+		createCookie(options.cookiePrefix + options.id, (sticky ? '1' : '0') + ',' + overlayZState + ',' + classNumber, 1);
+	}
+
+	function showOverlay() {
+		overlay.show();
+		overlayVert.css({width: overlay.width()});
+		// hide any vertical blocks that aren't at the top of the viewport
+		overlayVert.children('.vert').each(function () {
+			$(this).css('display','inline-block');
+			if ($(this).offset().top > 0) {
+				$(this).hide();
+			}
+		});
+	}
+
+	/**
+	 * Event handlers
+	 */
+
+	function keydownHandler(e) {
+		var source = e.target.tagName.toLowerCase();
+		if ((source == 'input') || (source == 'textarea') || (source == 'select')) return true;
+		var m = getModifier(e);
+		if (!m) return true;
+		var k = getKey(e);
+		if (!k) return true;
+		switch(k) {
+			case options.showGridKey:
+				if (!overlayOn) {
+					showOverlay();
+					overlayOn = true;
+				}
+				else if (sticky) {
+					overlay.hide();
+					overlayOn = false;
+					sticky = false;
+					saveState();
+				}
+				break;
+			case options.holdGridKey:
+				if (overlayOn && !sticky) {
+					// Turn sticky overlay on
+					sticky = true;
+					saveState();
+				}
+				break;
+			case options.foregroundKey:
+				if (overlayOn) {
+					// Toggle sticky overlay z-index
+					if (overlay.css('z-index') == overlayZForeground) {
+						overlay.css('z-index', overlayZBackground);
+						overlayZState = 'B';
+					}
+					else {
+						overlay.css('z-index', overlayZForeground);
+						overlayZState = 'F';
+					}
+					saveState();
+				}
+				break;
+			case options.jumpGridsKey:
+				if (overlayOn && (options.numberOfGrids > 1)) {
+					// Cycle through the available grids
+					overlay.removeClass(options.classPrefix + classNumber);
+					classNumber++;
+					if (classNumber > options.numberOfGrids) classNumber = 1;
+					overlay.addClass(options.classPrefix + classNumber);
+					showOverlay();
+					if (/webkit/.test( navigator.userAgent.toLowerCase() )) {
+						forceRepaint();
+					}
+					saveState();
+				}
+				break;
+		}
+	}
+
+	function keyupHandler(e) {
+		var m = getModifier(e);
+		if (!m) return true;
+		var k = getKey(e);
+		if (!k) return true;
+		if ((k == options.showGridKey) && !sticky) {
+			overlay.hide();
+			overlayOn = false;
+		}
+	}
+
+	/**
+	 * Cookie functions
+	 *
+	 * By Peter-Paul Koch:
+	 * http://www.quirksmode.org/js/cookies.html
+	 */
+	function createCookie(name,value,days) {
+		if (days) {
+			var date = new Date();
+			date.setTime(date.getTime()+(days*24*60*60*1000));
+			var expires = "; expires="+date.toGMTString();
+		}
+		else var expires = "";
+		document.cookie = name+"="+value+expires+"; path=/";
+	}
+
+	function readCookie(name) {
+		var nameEQ = name + "=";
+		var ca = document.cookie.split(';');
+		for(var i=0;i < ca.length;i++) {
+			var c = ca[i];
+			while (c.charAt(0)==' ') c = c.substring(1,c.length);
+			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+		}
+		return null;
+	}
+
+	function eraseCookie(name) {
+		createCookie(name,"",-1);
+	}
+
+	/**
+	 * Forces a repaint (because WebKit has issues)
+	 * http://www.sitepoint.com/forums/showthread.php?p=4538763
+	 * http://www.phpied.com/the-new-game-show-will-it-reflow/
+	 */
+	function forceRepaint() {
+		var ss = document.styleSheets[0];
+		try {
+			ss.addRule('.xxxxxx', 'position: relative');
+			ss.removeRule(ss.rules.length - 1);
+		} catch(e){}
+	}
+
+}
+
+
+/**
+ * You can call hashgrid from your own code, but it's loaded here as
+ * an example for your convenience.
+ */
+$(document).ready(function() {
+
+	var grid = new hashgrid({
+		numberOfGrids: 2
+	});
+
+});

data/public/stylesheets/hashgrid/hashgrid.css

@@ -0,0 +1,85 @@
+/**
+ * Grid
+ */
+#grid{
+
+    /* Dimensions - same width as your grid with gutters */
+    width: 980px;
+
+    /* Grid (left-aligned)
+    position: absolute;
+    top: 0;
+    left: 0;
+    */
+
+    /* Grid (centered) */
+    position: absolute;
+    top: 0;
+    left: 50%;
+    margin-left: -490px;
+
+}
+
+/**
+ * Vertical grid lines
+ *
+ * Set the column width taking the borders into consideration,
+ * and use margins to set column gutters.
+ */
+#grid div.vert{
+
+    width: 139px;
+    border: solid darkturquoise;
+    border-width: 0 1px;
+    margin-right: 19px;
+
+}
+
+#grid div.vert.first-line{
+
+    margin-left: 19px;
+
+}
+
+
+/**
+ * Horizontal grid lines, defined by your base line height
+ *
+ * Remember, the CSS properties that define the box model:
+ * visible height = height + borders + margins + padding
+ */
+#grid div.horiz{
+
+    /* 20px line height */
+    height: 19px;
+    border-bottom: 1px dotted darkgray;
+    margin: 0;
+    padding: 0;
+
+}
+
+/**
+* Classes for multiple grids
+*
+* When using more than one grid, remember to set the numberOfGrids 
+* option in the hashgrid.js file.
+*/
+#grid.grid-1 div.vert{
+
+    /* Vertical grid line colour for grid 1 */
+    border-color: darkturquoise;
+
+}
+#grid.grid-2{
+
+    /* Adjustments */
+    padding: 0 160px;
+    width: 660px;
+
+}
+#grid.grid-2 div.vert{
+
+    /* Vertical grid line colour for grid 2 */
+    border-color: crimson;
+
+}

metadata

@@ -0,0 +1,116 @@
+--- !ruby/object:Gem::Specification 
+name: hashgrid
+version: !ruby/object:Gem::Version 
+  hash: 27
+  prerelease: false
+  segments: 
+  - 0
+  - 1
+  - 0
+  version: 0.1.0
+platform: ruby
+authors: 
+- Lucas Willett
+- Odin Dutton
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2011-04-21 00:00:00 +10:00
+default_executable: 
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: rack
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ~>
+      - !ruby/object:Gem::Version 
+        hash: 29
+        segments: 
+        - 1
+        - 2
+        - 1
+        version: 1.2.1
+  type: :runtime
+  version_requirements: *id001
+- !ruby/object:Gem::Dependency 
+  name: rails
+  prerelease: false
+  requirement: &id002 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ~>
+      - !ruby/object:Gem::Version 
+        hash: 7
+        segments: 
+        - 3
+        - 0
+        - 0
+        version: 3.0.0
+  type: :runtime
+  version_requirements: *id002
+description: A simple Rails wrapper for hashgrid.
+email: 
+- lucas@developingego.com
+- odindutton@gmail.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- .gitignore
+- Gemfile
+- README.md
+- Rakefile
+- app/views/shared/_hashgrid.html.erb
+- hashgrid.gemspec
+- lib/hashgrid.rb
+- lib/hashgrid/helpers.rb
+- lib/hashgrid/railtie.rb
+- lib/hashgrid/version.rb
+- public/javascripts/hashgrid/hashgrid.js
+- public/stylesheets/hashgrid/hashgrid.css
+has_rdoc: true
+homepage: http://github.com/twe4ked/hashgrid
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+- public
+- app
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 23
+      segments: 
+      - 1
+      - 3
+      - 6
+      version: 1.3.6
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.3.7
+signing_key: 
+specification_version: 3
+summary: A simple Rails wrapper for hashgrid.
+test_files: []
+