spans 0.4.0 → 1.1.0

data/lib/spans/engine.rb

@@ -1,5 +0,0 @@
-module Spans
-  class Engine < ::Rails::Engine
-    require 'inline-blocks'
-  end
-end

data/lib/spans/importer.rb

@@ -0,0 +1,14 @@
+require 'grids'
+
+module Spans
+  class Importer < Grids::Importer
+    private
+    def extension_regex
+      /\.spans$/
+    end
+
+    def template_path
+      File.join(File.expand_path('../', __FILE__), 'spans.scss.erb')
+    end
+  end
+end

data/lib/spans/spans.scss.erb

@@ -0,0 +1,19 @@
+@import 'spaceless';
+
+@mixin <%= name %>-spans {
+  @include spaceless;  
+  margin-right: <%= name %>-gutter-x(-1);
+
+  & > * {
+    display: inline-block;
+    vertical-align: top;
+    margin-right: <%= name %>-gutter-x(1);
+  }
+}
+
+.<%= name %>-spans { @include <%= name %>-spans; }
+
+@for $i from 1 through $<%= name %>-modules-x-count {
+  .<%= name %>-spans .span#{$i} { width: <%= name %>-modules-x($i); }
+  .<%= name %>-spans .gap#{$i} { padding-left: <%= name %>-modules-gap-x($i); }
+}

data/lib/spans/version.rb

@@ -1,3 +1,3 @@
 module Spans
-  VERSION = "0.4.0"
+  VERSION = "1.1.0"
 end

data/lib/spans.rb

@@ -1,5 +1,18 @@
 require "spans/engine"
+require 'spans/importer'
 require "spans/version"
 
 module Spans
+  # def self.load_paths
+  #   [
+  #     File.expand_path('../../app/assets/javascripts/', __FILE__),
+  #   ]
+  # end
+
+  # if defined? Rails
+  #   class Engine < ::Rails::Engine
+  #   end
+  # end
+
+  Sass.load_paths << Importer.new('.')
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: spans
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 1.1.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,24 +9,40 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-02-07 00:00:00.000000000 Z
+date: 2013-02-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
-  name: inline-blocks
+  name: spaceless
   requirement: !ruby/object:Gem::Requirement
     none: false
     requirements:
-    - - '='
+    - - ! '>='
       - !ruby/object:Gem::Version
-        version: 0.0.3
+        version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     none: false
     requirements:
-    - - '='
+    - - ! '>='
       - !ruby/object:Gem::Version
-        version: 0.0.3
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: grids
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.2'
 description: Extremely simple scss grid system.
 email:
 - abc@oktoberliner.ru
@@ -34,11 +50,9 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- app/assets/javascripts/spans/hashgrid.js
-- app/assets/javascripts/spans.js.coffee
-- app/assets/stylesheets/spans/grid.css.scss
-- app/assets/stylesheets/spans.css.scss
 - lib/spans/engine.rb
+- lib/spans/importer.rb
+- lib/spans/spans.scss.erb
 - lib/spans/version.rb
 - lib/spans.rb
 - MIT-LICENSE
@@ -58,7 +72,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 3283207008503999020
+      hash: -892031560827161286
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -67,7 +81,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 3283207008503999020
+      hash: -892031560827161286
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.23

data/app/assets/javascripts/spans/hashgrid.js

@@ -1,424 +0,0 @@
-/**
- * hashgrid (jQuery version, adapters are on the way)
- * http://github.com/dotjay/hashgrid
- * Version 8, 06 Oct 2012
- * Written by Jon Gibbins
- *
- * Contibutors:
- * James Aitken, http://loonypandora.co.uk/
- * Tom Arnold, http://www.tomarnold.de/
- * Sean Coates, http://seancoates.com/
- * Phil Dokas, http://jetless.org/
- * Andrew Jaswa, http://andrewjaswa.com/
- * Callum Macrae, http://lynx.io/
- */
-
-/**
- * @license Copyright 2011 Analog Coop Limited
- *
- * 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.
- */
-
-/**
- * Usage
- *
- * // The basic #grid setup looks like this
- * var grid = new hashgrid();
- *
- * // But there are a whole bunch of additional options you can set
- * var grid = new hashgrid({
- *     id: 'mygrid',            // set a custom 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: 'myclass',  // prefix for the grid classes
- *     cookiePrefix: 'mygrid'   // prefix for the cookie name
- * });
- */
-
-
-/**
- * Make sure we have the library
- * TODO: Use an adapter
- */
-if (typeof jQuery == "undefined") {
-  alert("Hashgrid: jQuery not loaded. Make sure it's linked to your pages.");
-}
-
-
-/**
- * hashgrid overlay
- * @constructor
- */
-spans = {};
-spans.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
-      container: $('body')
-    },
-    alreadyDown,
-    classNumber = 1,
-    gridLines,
-    gridWidth,
-    i,
-    line,
-    lineHeight,
-    numGridLines,
-    overlay,
-    overlayCookie,
-    overlayEl,
-    overlayOn = false,
-    overlayVert,
-    overlayZState = 'B',
-    overlayZBackground = -1,
-    overlayZForeground = 9999,
-    pageHeight,
-    setKey,
-    state,
-    sticky = false,
-    top;
-
-  // Apply options
-  if (typeof set == 'object') {
-    for (setKey in set) {
-      options[setKey] = set[setKey];
-    }
-  }
-  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
-  overlayEl = $('<div></div>');
-  overlayEl
-    .attr('id', options.id)
-    .css({
-      display: 'none',
-      pointerEvents: 'none'
-    });
-  options.container.prepend(overlayEl);
-  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
-  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
-  top = overlay.css("top");
-  overlay.css({
-    top: '-999px',
-    display: 'block'
-  });
-
-  // Calculate the number of grid lines needed
-  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 false;
-  }
-
-  // Add the remaining grid lines
-  numGridLines = Math.floor(pageHeight / lineHeight);
-  gridLines = '';
-
-  for (i = numGridLines - 1; i >= 1; i--) {
-    gridLines += '<div class="horiz"></div>';
-  }
-  overlay.append(gridLines);
-
-  // vertical grid
-  overlay.append($('<div class="vert-container"></div>'));
-  overlayVert = overlay.children('.vert-container');
-  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
-  gridLines = '';
-  for (i = 0; i < 30; i++) {
-    gridLines += '<div class="vert">&nbsp;</div>';
-  }
-  overlayVert.append(gridLines);
-  overlayVert.children()
-    .height(pageHeight)
-    .css({ display: 'inline-block' });
-
-  // Check for saved state
-  overlayCookie = readCookie(options.cookiePrefix + options.id);
-  if (typeof overlayCookie == 'string') {
-    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 () {
-      var vCol = $(this);
-      vCol.css('display','inline-block');
-      if (vCol.offset().top > vCol.parent().offset().top) {
-        vCol.hide();
-      }
-    });
-  }
-
-  /**
-   * Event handlers
-   */
-
-  alreadyDown = {};
-
-  function keydownHandler(e) {
-    var k,
-      m,
-      source = e.target.tagName.toLowerCase();
-
-    if ((source == 'input') || (source == 'textarea') || (source == 'select')) {
-      return true;
-    }
-
-    m = getModifier(e);
-    if (!m) {
-      return true;
-    }
-
-    k = getKey(e);
-    if (!k) {
-      return true;
-    }
-
-    if (alreadyDown[k]) {
-      return true;
-    }
-    alreadyDown[k] = 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;
-    }
-
-    return true;
-  }
-
-  function keyupHandler(e) {
-    var k,
-      m = getModifier(e);
-
-    if (!m) {
-      return true;
-    }
-
-    k = getKey(e);
-    alreadyDown[k] = false;
-
-    if (k && (k == options.showGridKey) && !sticky) {
-      overlay.hide();
-      overlayOn = false;
-    }
-
-    return true;
-  }
-
-  /**
-   * Cookie functions
-   *
-   * By Peter-Paul Koch:
-   * http://www.quirksmode.org/js/cookies.html
-   */
-  function createCookie(name, value, days) {
-    var date,
-      expires = "";
-
-    if (days) {
-      date = new Date();
-      date.setTime( date.getTime() + (days*24*60*60*1000) );
-      expires = "; expires=" + date.toGMTString();
-    }
-
-    document.cookie = name + "=" + value + expires + "; path=/";
-  }
-
-  function readCookie(name) {
-    var c,
-      ca = document.cookie.split(';'),
-      i = 0,
-      len = ca.length,
-      nameEQ = name + "=";
-
-    for (; i < len; i++) {
-      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) {}
-  }
-
-  return {};
-};

data/app/assets/javascripts/spans.js.coffee

@@ -1,49 +0,0 @@
-# = require spans/hashgrid
-
-class spans.Helper
-  constructor: (options) -> @grid = new spans.hashgrid(options)
-
-class spans.Flexgrid
-  constructor: (@sampleFontSize, @sampleAtomWidth, @sampleAtomHeight, @modulesXCount, @modulesYCount) ->
-    @ratio = (@modulesYCount * @sampleAtomHeight) / (@modulesXCount * @sampleAtomWidth)
-    @heightToFontSize = (@modulesYCount * @sampleAtomHeight) / @sampleFontSize
-    $(window).resize @newFontSize
-    @newFontSize()
-
-  newFontSize: =>
-    min = Math.min($(window).innerHeight(), $(window).innerWidth() * @ratio)
-    fontSize = min / @heightToFontSize
-    $('body').css(fontSize: "#{fontSize}px")
-
-
-# new spans.ToWidthFitter(16 / 1024)
-class spans.ToWidthFitter
-  constructor: (@sampleFontToSampleWidth) ->
-    $(window).resize @newFontSize
-    @newFontSize()
-
-  newFontSize: =>
-
-    console.log($(window).innerHeight() * @sampleFontToSampleWidth)
-    $('html').css(fontSize: "#{$(window).innerWidth() * @sampleFontToSampleWidth}px")
-
-# new spans.ToHeightFitter(16 / 768)
-class spans.ToHeightFitter
-  constructor: (@sampleFontToSampleHeight) ->
-    $(window).resize @newFontSize
-    @newFontSize()
-
-  newFontSize: =>
-    $('html').css(fontSize: "#{$(window).innerHeight() * @sampleFontToSampleHeight}px")
-
-
-# new spans.ToWindowFitter(16 / 768, 1024 / 768)
-class spans.ToWindowFitter
-  constructor: (@sampleFontToSampleHeight, @sampleWidthToSampleHeight) ->
-      $(window).resize @newFontSize
-      @newFontSize()
-
-  newFontSize: =>
-    min = Math.min($(window).innerHeight(), $(window).innerWidth() / @sampleWidthToSampleHeight)
-    fontSize = min * @sampleFontToSampleHeight
-    $('html').css(fontSize: "#{fontSize}px")

data/app/assets/stylesheets/spans/grid.css.scss

@@ -1,25 +0,0 @@
-// based on http://hashgrid.com/
-
-#grid {
-  width: modules-x($modules-x-count);
-  position: absolute;
-  top: 0;
-  left: 0;
-  overflow: hidden;
-
-  .vert-container {
-    @extend .spans;
-  }
-  .vert{
-    @extend .span1;
-    box-sizing: border-box;
-    background: rgba(255, 0, 0, 0.1);
-  }
-
-  .horiz{
-    height: y(1);
-    box-sizing: border-box;
-    background: rgba(255, 0, 0, 0.1);
-    margin-bottom: y(1);
-  }
-}

data/app/assets/stylesheets/spans.css.scss

@@ -1,47 +0,0 @@
-@import 'inline-blocks';
-
-@function x($t: 1) { @return $atom-x * $t; }
-@function y($t: 1) { @return $atom-y * $t; }
-@function gutter-x($t: 1) { @return $gutter-x * $t; }
-@function gutter-y($t: 1) { @return $gutter-y * $t; }
-@function modules-x($m) { @return x($module-width * $m) + gutter-x($m - 1); }
-@function modules-y($m) { @return y($module-height * $m) + gutter-y($m - 1); }
-@function modules-gap-x($m) { @return modules-x($m) + gutter-x(1); }
-@function modules-gap-y($m) { @return modules-y($m) + gutter-y(1); }
-@function full-page-width() { @return modules-x($modules-x-count) }
-
-@mixin spans {
-  @include inline-blocks;  
-  margin-right: -1 * gutter-x(1);
-
-  & > * {
-    @include inline-block;
-    margin-right: gutter-x(1);
-  }
-}
-
-@mixin size-scale($times) {
-  $atom-y: $atom-y / $times;
-  $atom-x: $atom-x / $times;
-  @content;
-  $atom-y: $atom-y * $times;
-  $atom-x: $atom-x * $times;
-}
-
-// deprecated
-@mixin flex-grid-scale($times) {
-  font-size: #{$times}em;
-  @include size-scale { @content; }
-}
-
-.spans { @include spans; }
-
-@for $i from 1 through $modules-x-count {
-  .spans .span#{$i} { width: modules-x($i); }
-}
-
-@for $i from 1 through $modules-x-count {
-  .spans .gap#{$i} { padding-left: modules-gap-x($i); }
-}
-
-@import 'spans/grid';