evil-front 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: df26866b8b19e4d3f42c79c980310ff044a36f93
+  data.tar.gz: 1707febaae47a5ba06ec9a5b55d19c4839859223
+SHA512:
+  metadata.gz: 2b2bf25a92aff66e2b38759e21ca0eb6a60f3ef04c1f2120577671dd9636298e59cebc6f39344e720f469bed21ca9710dffda75c223dc4789628959e4d32067d
+  data.tar.gz: a307a12384256e1625d99b8ebf92403c65d608e13217b43ade5bf57a4b963f311b28314f2c809d2463da74c8f4adb7c598868440e151fbb76a64a42bcb78860a

data/.rspec

@@ -0,0 +1 @@
+--format documentation --colour

data/ChangeLog.md

@@ -0,0 +1,3 @@
+## 0.1 “Hellespontus Montes”
+
+* Initial release.

data/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright 2013 Andrey Sitnik <andrey@sitnik.ru>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/Rakefile

@@ -0,0 +1,13 @@
+require 'rubygems'
+
+require 'bundler/setup'
+Bundler::GemHelper.install_tasks
+
+require 'rspec/core/rake_task'
+RSpec::Core::RakeTask.new
+task default: :spec
+
+task :clobber_package do
+  rm_r 'pkg' rescue nil
+end
+task clobber: [:clobber_package]

data/evil-front.gemspec

@@ -0,0 +1,27 @@
+require File.expand_path('../lib/evil-front/version', __FILE__)
+
+Gem::Specification.new do |s|
+  s.platform    = Gem::Platform::RUBY
+  s.name        = 'evil-front'
+  s.version     = EvilFront::VERSION
+  s.date        = Time.now.strftime('%Y-%m-%d')
+  s.summary     = 'Helpers, Sass mixins and JS shortcuts from Evil Martians'
+
+  s.author   = 'Andrey Sitnik'
+  s.email    = 'andrey@sitnik.ru'
+  s.homepage = 'https://github.com/ai/evil-front'
+  s.license  = 'MIT'
+
+  s.files            = `git ls-files`.split("\n")
+  s.extra_rdoc_files = ['LICENSE']
+  s.require_path     = 'lib'
+
+  s.add_dependency 'i18n',                '>= 0'
+  s.add_dependency 'slim',                '>= 1.3.9'
+  s.add_dependency 'sass',                '>= 3.2.9'
+  s.add_dependency 'nokogiri',            '>= 1'
+  s.add_dependency 'sprockets',           '>= 1'
+  s.add_dependency 'unicode_utils',       '>= 1.4'
+  s.add_dependency 'rails-sass-images',   '>= 0.3'
+  s.add_dependency 'standalone_typograf', '>= 3.0.1'
+end

data/lib/assets/javascripts/evil-front/after.js

@@ -0,0 +1,7 @@
+// Alternate syntax for `setTimeout`, to be more useful in CoffeeScript.
+//
+//   after 1000, ->
+//     addSecond()
+window.after = function (ms, callback) {
+    return setTimeout(callback, ms);
+};

data/lib/assets/javascripts/evil-front/ajax.js

@@ -0,0 +1,61 @@
+//= evil-front/jquery
+
+// Change selected form to be sent by AJAX.
+//
+//   $('form').evil.ajax
+//     success:      -> message('success')
+//     error: (text) -> message('error' + text)
+//
+// While AJAX is loading, form will has `is-submitting` class.
+// Don’t forget to show loader.
+evil.$.extend('ajax', function (opts) {
+    if ( !opts ) {
+        opts = { };
+    }
+
+    this.submit(function (event) {
+        if ( event.isPropagationStopped() ) {
+            return false;
+        }
+
+        var form = $(this);
+
+        if ( form.hasClass('is-submitting') ) {
+            return false;
+        }
+        form.addClass('is-submitting');
+
+        var check = true;
+        if ( opts.submitting ) {
+            check = opts.submitting(form);
+        }
+        if ( !check ) {
+            return false;
+        }
+
+        $.ajax({
+            url:  form.attr('action'),
+            type: form.attr('method').toUpperCase(),
+            data: form.serialize(),
+            success: function (data) {
+                if ( opts.success ) {
+                    opts.success(data, form);
+                }
+            },
+            error: function (e) {
+                if ( e.status == 500 ) {
+                    if ( opts.serverError ) {
+                        opts.serverError(form);
+                    }
+                } else if ( opts.error ) {
+                    opts.error(e.responseText, form);
+                }
+            },
+            complete: function () {
+                form.removeClass('is-submitting');
+            }
+        });
+
+        return false;
+    });
+});

data/lib/assets/javascripts/evil-front/core.js

@@ -0,0 +1,13 @@
+// Add global `evil` namespace and common shortcuts.
+
+if ( !window.evil ) {
+    window.evil = { };
+}
+
+evil.win  = $(window),
+evil.doc  = $(document),
+evil.body = null;
+
+evil.doc.ready(function() {
+    evil.body = $('body');
+});

data/lib/assets/javascripts/evil-front/detect-3d.js

@@ -0,0 +1,5 @@
+//= require evil-front/transform3d
+
+// Detect support 3D transform and add `transform3d` or `transform2s` class
+// to body.
+evil.transform3d.init();

data/lib/assets/javascripts/evil-front/every.js

@@ -0,0 +1,7 @@
+// Alternate syntax for `setInterval`, to be more useful in CoffeeScript.
+//
+//   every 1000, ->
+//     addSecond()
+window.every = function (ms, callback) {
+    return setInterval(callback, ms);
+};

data/lib/assets/javascripts/evil-front/http.js

@@ -0,0 +1,29 @@
+//= require evil-front/core
+// Add `evil.patch`, `evil.del`, `evil.put`, `evil.post` to send AJAX request
+// with RESTful HTTP verb by Rails X-HTTP-Method-Override header
+// and with CSRF token.
+
+(function($) {
+    var props = { patch: 'PATCH', put: 'PUT', del: 'DELETE', post: 'POST' }
+    $.each(props, function(prop, method) {
+        evil[prop] = function(url, data, callback, type) {
+            if ($.isFunction(data)) {
+                type = type || callback;
+                callback = data;
+                data = { };
+            }
+
+            return $.ajax({
+                headers: {
+                    'X-HTTP-Method-Override': method,
+                    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
+                },
+                type:    'POST',
+                url:     url,
+                data:    data,
+                success: callback,
+                dataType: type
+            });
+        }
+    })
+})(jQuery);

data/lib/assets/javascripts/evil-front/jquery.js

@@ -0,0 +1,43 @@
+//= require evil-front/core
+
+(function ($) {
+
+    // Create namespace for jQuery
+    evil.jquery = function(global, namespace) {
+        // Namespace inside jQuery.
+        global.$ = function (nodes) {
+            this.nodes = nodes;
+        };
+
+        // Syntax sugar to add own method to `$.fn.evil`.
+        global.$.extend = function (name, value) {
+            if ( $.isPlainObject(name) ) {
+                for ( key in name ) {
+                    global.$.extend(key, name[key]);
+                }
+                return;
+            }
+
+            if ( $.isFunction(value) ) {
+                var callback = value;
+                value = function () {
+                    return callback.apply(this.nodes, arguments);
+                };
+            }
+            this.prototype[name] = value;
+        };
+
+        // Hack to add `$.fn.evil` namespace.
+        var originaljQuery = $.fn.init;
+        $.fn.init = function () {
+            nodes = originaljQuery.apply(this, arguments);
+            nodes[namespace] = new global.$(nodes);
+            return nodes;
+        };
+        $.fn.init.prototype = originaljQuery.prototype;
+    };
+
+    // Create `evil.$` namespace.
+    evil.jquery(evil, 'evil');
+
+})(jQuery);

data/lib/assets/javascripts/evil-front/links.js

@@ -0,0 +1,10 @@
+//= require evil-front/core
+// Prevent default in AJAX link with only # in href
+
+evil.doc.ready(function() {
+    evil.body.on('click', 'a', function (e) {
+        if ( $(this).attr('href') == '#' ) {
+            e.preventDefault();
+        }
+    });
+})

data/lib/assets/javascripts/evil-front/outside.js

@@ -0,0 +1,40 @@
+//= require evil-front/jquery
+
+(function() {
+    evil.$.extend('outside', function (callback) {
+        var parent = this;
+
+        var event = function(e) {
+            var el = $(e.target);
+            if ( !el.closest(parent).length ) {
+                callback();
+                off();
+            }
+        };
+
+        if ( document.body.addEventListener ) {
+            var set = function () {
+                document.body.addEventListener('click', event, true);
+                document.body.addEventListener('focus', event, true);
+            }
+            var off = function () {
+                document.body.removeEventListener('click', event, true);
+                document.body.removeEventListener('focus', event, true);
+            };
+
+        } else {
+            var name = '.evil-outside-' + (new Date()).valueOf();
+
+            var set = function () {
+                evil.body.on('click' + name + ' focus' + name, event);
+            }
+            var off = function () {
+                evil.body.off(name);
+            };
+        }
+
+        setTimeout(set, 10);
+        return off;
+    });
+
+})();

data/lib/assets/javascripts/evil-front/queue.js

@@ -0,0 +1,43 @@
+//= evil-front/core
+
+(function() {
+    // Call `callback` only after previous callback of `name` queue
+    // will be finished. It is useful to animation.
+    //
+    // b.link.click ->
+    //   evil.queue 'link', (done) ->
+    //     $.get $(@).url, (html) ->
+    //       animation html, ->
+    //         done()
+    evil.queue = function(name, callback) {
+        if ( typeof(name) == 'function' ) {
+            callback = name;
+            name     = 'default';
+        }
+
+        if ( typeof(waiters[name]) == 'undefined' ) {
+            waiting[name] = false;
+            waiters[name] = [];
+        }
+
+        if ( waiting[name] ) {
+            waiters[name].push(callback);
+        } else {
+            call(name, callback);
+        }
+    };
+
+    var waiting = { };
+    var waiters = { };
+
+    var call = function(name, callback) {
+        waiting[name] = true;
+        callback(function () {
+            waiting[name] = false;
+            var waiter = waiters[name].pop();
+            if ( waiter ) {
+                call(name, waiter);
+            }
+        });
+    };
+})();

data/lib/assets/javascripts/evil-front/tappable.js

@@ -0,0 +1,46 @@
+//= require evil-front/jquery
+
+// Add events to add special class on touch events. It will much faster, than
+// `:hover` selector.
+//
+// By default it add listener to all links and inputs on body.
+// But you can add it to any elements:
+//
+//   $('.pseudolink').evil.tappable();
+//
+// Or you can set listeners as “live” delegate:
+//
+//   $('.ajax-updated').evil.tappable('.pseudolink');
+//
+// Don’t forget about `no-hover` and `styled-taps` Sass mixins.
+(function () {
+    var start = function () {
+        this.classList.add('is-tapped');
+    };
+    var end = function () {
+        var link = $(this);
+        setTimeout(function () {
+            link.removeClass('is-tapped').
+                 addClass('was-tapped').
+                 one('mouseenter', function () {
+                     link.removeClass('was-tapped');
+                 });
+        }, 100);
+    };
+
+    evil.$.extend({
+        tappable: function (selector) {
+            if ( selector ) {
+                this.on('touchstart', selector, start);
+                this.on('touchend touchmove', selector, end);
+            } else {
+                this.on('touchstart', start);
+                this.on('touchend touchmove', end);
+            }
+        }
+    });
+
+    evil.doc.ready(function ($) {
+        evil.body.evil.tappable('a, input');
+    });
+})();

data/lib/assets/javascripts/evil-front/transform3d.js

@@ -0,0 +1,38 @@
+//= require evil-front/core
+
+(function() {
+    var cache  = undefined;
+    var inited = false;
+
+    evil.transform3d = {
+
+        // Check support for 3D transforms.
+        check: function () {
+            if ( typeof(cache) != 'undefined' ) {
+                return cache;
+            }
+
+            var cache = typeof(evil.body.css('perspective')) != 'undefined';
+            var style = document.body;
+            if ( cache && typeof(style.webkitPerspective) != 'undefined' ) {
+                cache = matchMedia("(transform-3d), (-webkit-transform-3d)");
+                cache = cache.matches;
+            }
+            return cache;
+        },
+
+        // Add `transform3d` or `transform2s` class to body.
+        init: function () {
+            if ( inited ) {
+                return;
+            }
+            inited = true;
+
+            evil.doc.ready(function () {
+                var type  = evil.transform3d.check() ? '3d' : '2d'
+                evil.body.addClass('transform-' + type);
+            });
+        }
+    }
+
+})();

data/lib/assets/javascripts/evil-front.js

@@ -0,0 +1,7 @@
+// Load libraries and core files.
+
+//= require evil-front/core
+//= require evil-front/after
+//= require evil-front/jquery
+
+//= require evil-blocks

data/lib/assets/stylesheets/evil-front/clearfix.sass

@@ -0,0 +1,8 @@
+// Clearfix to set block size from float inners.
+//
+// Based on http://nicolasgallagher.com/micro-clearfix-hack/
+@mixin clearfix
+  &:after
+    content: ""
+    display: table
+    clear: both

data/lib/assets/stylesheets/evil-front/colors.sass

@@ -0,0 +1,11 @@
+// Shorcut to set black color with alpha in rgba()
+//
+//   box-shadow: 0 0 5px black(0.7)
+@function black($opacity)
+  @return rgba(0, 0, 0, $opacity)
+
+// Shorcut to set white color with alpha in rgba()
+//
+//   box-shadow: 0 0 5px white(0.7)
+@function white($opacity)
+  @return rgba(255, 255, 255, $opacity)

data/lib/assets/stylesheets/evil-front/easings.sass

@@ -0,0 +1,35 @@
+// Variables with easings Bezier curves
+//
+//   transition: all 1s $easeInOutBack
+
+$easeInSine:    cubic-bezier(0.47, 0, 0.745, 0.715)
+$easeOutSine:   cubic-bezier(0.39, 0.575, 0.565, 1)
+$easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95)
+
+$easeInQuad:    cubic-bezier(0.55, 0.085, 0.68, 0.53)
+$easeOutQuad:   cubic-bezier(0.25, 0.46, 0.45, 0.94)
+$easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955)
+
+$easeInCubic:    cubic-bezier(0.55, 0.055, 0.675, 0.19)
+$easeOutCubic:   cubic-bezier(0.215, 0.61, 0.355, 1)
+$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1)
+
+$easeInQuart:    cubic-bezier(0.895, 0.03, 0.685, 0.22)
+$easeOutQuart:   cubic-bezier(0.165, 0.84, 0.44, 1)
+$easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1)
+
+$easeInQuint:    cubic-bezier(0.755, 0.05, 0.855, 0.06)
+$easeOutQuint:   cubic-bezier(0.23, 1, 0.32, 1)
+$easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1)
+
+$easeInExpo:    cubic-bezier(0.95, 0.05, 0.795, 0.035)
+$easeOutExpo:   cubic-bezier(0.19, 1, 0.22, 1)
+$easeInOutExpo: cubic-bezier(1, 0, 0, 1)
+
+$easeInCirc:    cubic-bezier(0.6, 0.04, 0.98, 0.335)
+$easeOutCirc:   cubic-bezier(0.075, 0.82, 0.165, 1)
+$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86)
+
+$easeInBack:    cubic-bezier(0.6, -0.28, 0.735, 0.045)
+$easeOutBack:   cubic-bezier(0.175, 0.885, 0.32, 1.275)
+$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55)

data/lib/assets/stylesheets/evil-front/flying-quotes.sass

@@ -0,0 +1,6 @@
+// Mark quotes to move first quote before the text line.
+@mixin flying-quotes
+  .space-before-quote
+    margin-right: 0.35em
+  .quotes
+    margin-left: -0.35em

data/lib/assets/stylesheets/evil-front/height.sass

@@ -0,0 +1,9 @@
+// Shortcut to set `height` and `line-height` to vertical text centering.
+// You can also set `$line-diff` to have different `line-height`.
+//
+//   .button
+//     display: inline-block
+//     +height(24px)
+@mixin height($height, $line-diff: 0)
+  height: $height
+  line-height: $height + $line-diff

data/lib/assets/stylesheets/evil-front/import-ruble.sass

@@ -0,0 +1,42 @@
+// Define special class and fonts for Russian currency symbol.
+//
+// You must set you body fonts for `$defaults` argument. Also you can inline
+// in `data:uri` fonts styles, which you will use.
+//
+//   +import-ruble("PT Sane, sans-serif", $regular: inline)
+@mixin import-ruble($defaults: sans-serif, $regular: false, $italic: false, $bold: false, $bolditalic: false)
+  @font-face
+    font-family: 'ALSRubl-Arial'
+    @if $regular
+      src: inline("evil-front/alsrubl-arial-regular.woff") format("woff")
+    @else
+      src: font-url("evil-front/alsrubl-arial-regular.woff") format("woff")
+
+  @font-face
+    font-family: 'ALSRubl-Arial'
+    font-style: italic
+    @if $italic
+      src: inline("evil-front/alsrubl-arial-italic.woff") format("woff")
+    @else
+      src: font-url("evil-front/alsrubl-arial-italic.woff") format("woff")
+
+  @font-face
+    font-family: 'ALSRubl-Arial'
+    font-weight: bold
+    @if $bold
+      src: inline("evil-front/alsrubl-arial-bold.woff") format("woff")
+    @else
+      src: font-url("evil-front/alsrubl-arial-bold.woff") format("woff")
+
+  @font-face
+    font-family: 'ALSRubl-Arial'
+    font-style: italic
+    font-weight: bold
+    @if $bolditalic
+      src: inline("evil-front/alsrubl-arial-bolditalic.woff") format("woff")
+    @else
+      src: font-url("evil-front/alsrubl-arial-bolditalic.woff") format("woff")
+
+  .ruble
+    font-family: ALSRubl-Arial, unquote($defaults)
+    line-height: 1

data/lib/assets/stylesheets/evil-front/media.sass

@@ -0,0 +1,25 @@
+// Shortcuts for CSS Media Queries
+
+@mixin max-width($width)
+  @media all and (max-width: to-px($width))
+    @content
+
+@mixin min-width($width)
+  @media all and (min-width: to-px($width))
+    @content
+
+@mixin range-width($min-width, $max-width)
+  @media all and (min-width: to-px($min-width)) and (max-width: to-px($max-width))
+    @content
+
+@mixin max-height($height)
+  @media all and (max-height: to-px($height))
+    @content
+
+@mixin min-height($height)
+  @media all and (min-height: to-px($height))
+    @content
+
+@mixin range-height($min-height, $max-height)
+  @media all and (min-height: to-px($min-height)) and (max-height: to-px($max-height))
+    @content

data/lib/assets/stylesheets/evil-front/no-hover.sass

@@ -0,0 +1,17 @@
+// Add normal state, to prevent hover on touched elements
+//
+//   a
+//     display: inline-block
+//     +no-hover
+//       color: black
+//     &:hover
+//       color: gray
+//     &:active, &.is-tapped
+//       background: black
+//
+// To enable `.is-tapped` state, you need to require `evil-front/tappable` JS.
+// Don’t forget to disable transitions in `.is-tapped` and `:active` states by
+// `+styled-taps` mixin.
+@mixin no-hover
+  &, &.was-tapped:hover, &.was-tapped:active
+    @content

data/lib/assets/stylesheets/evil-front/no-tap-highlight.sass

@@ -0,0 +1,9 @@
+// Hide link tap highlight on mobile browsers. Use it only if you define your
+// own pressed styles.
+//
+//   .button
+//     +no-tap-highlight
+//
+// If you disable all taps highlight, use `styled-taps` mixin.
+@mixin no-tap-highlight
+  -webkit-tap-highlight-color: white(0)

data/lib/assets/stylesheets/evil-front/reset.sass

@@ -0,0 +1,31 @@
+// Normalize browser default styles and clean some unnecessary styles
+//
+//   +evil-reset
+
+@mixin evil-reset
+  *
+    margin: 0
+    padding: 0
+
+  a img
+    border: none
+
+  body
+    background: white
+    color: black
+    line-height: 1.4
+
+  a, input, textarea, button
+    &:focus
+      outline: none
+  ::-moz-focus-inner
+    border: 0
+
+  h1, h2, h3, h4, h5, h6
+    font-weight: normal
+
+  li
+    list-style: none
+
+  cite
+    font-style: normal

data/lib/assets/stylesheets/evil-front/size.sass

@@ -0,0 +1,8 @@
+// Shortcut to set width and height
+//
+//   +size(200, 100)
+//   +size(32)
+//   +size(50%, 10em)
+@mixin size($width, $height: $width)
+  width:  to-px($width)
+  height: to-px($height)