olay-rails 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
data/.gitignore ADDED
@@ -0,0 +1,17 @@
1
+ *.gem
2
+ *.rbc
3
+ .bundle
4
+ .config
5
+ .yardoc
6
+ Gemfile.lock
7
+ InstalledFiles
8
+ _yardoc
9
+ coverage
10
+ doc/
11
+ lib/bundler/man
12
+ pkg
13
+ rdoc
14
+ spec/reports
15
+ test/tmp
16
+ test/version_tmp
17
+ tmp
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in olay-rails.gemspec
4
+ gemspec
data/LICENSE.txt ADDED
@@ -0,0 +1,19 @@
1
+ Copyright (C) 2013 Casey Foster <c@sey.me>
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining a copy
4
+ of this software and associated documentation files (the "Software"), to deal
5
+ in the Software without restriction, including without limitation the rights
6
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7
+ copies of the Software, and to permit persons to whom the Software is
8
+ furnished to do so, subject to the following conditions:
9
+
10
+ The above copyright notice and this permission notice shall be included in all
11
+ copies or substantial portions of the Software.
12
+
13
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19
+ SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,27 @@
1
+ # Olay for Rails
2
+
3
+ Places [Olay](http://orgsync.github.com/olay) into the Rails asset pipeline.
4
+
5
+ ## Versioning
6
+
7
+ This project uses [Semantic Versioning](http://semver.org/) and will account for the underlying Olay JavaScript library versioning.
8
+
9
+ ## Installation
10
+
11
+ Add this line to your application's Gemfile:
12
+
13
+ gem 'olay-rails', '~> 0.1'
14
+
15
+ And then execute:
16
+
17
+ $ bundle
18
+
19
+ ## Usage
20
+
21
+ In your application.js:
22
+
23
+ // require olay
24
+
25
+ In your application.scss:
26
+
27
+ @import 'olay';
data/Rakefile ADDED
@@ -0,0 +1 @@
1
+ require 'bundler/gem_tasks'
@@ -0,0 +1,6 @@
1
+ module Olay
2
+ module Rails
3
+ class Engine < ::Rails::Engine
4
+ end
5
+ end
6
+ end
@@ -0,0 +1,6 @@
1
+ module Olay
2
+ VERSION = '0.1.0'
3
+ module Rails
4
+ VERSION = '0.1.1'
5
+ end
6
+ end
data/lib/olay-rails.rb ADDED
@@ -0,0 +1,2 @@
1
+ require 'olay/rails/version'
2
+ require 'olay/rails/engine'
@@ -0,0 +1,24 @@
1
+ # -*- encoding: utf-8 -*-
2
+ lib = File.expand_path('../lib', __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require 'olay/rails/version'
5
+
6
+ Gem::Specification.new do |gem|
7
+ gem.name = 'olay-rails'
8
+ gem.version = Olay::Rails::VERSION
9
+ gem.summary = "Overlays that don't suck."
10
+ gem.description = "Places Olay #{Olay::VERSION} in the Rails asset pipeline."
11
+ gem.homepage = 'https://github.com/orgsync/olay-rails'
12
+
13
+ gem.authors = ['Casey Foster', 'Aaron Lasseigne']
14
+ gem.email = ['c@sey.me']
15
+
16
+ gem.license = 'MIT'
17
+
18
+ gem.files = `git ls-files`.split($/)
19
+ gem.executables = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
20
+ gem.test_files = gem.files.grep(%r{^(test|spec|features)/})
21
+ gem.require_paths = ['lib']
22
+
23
+ gem.add_dependency 'rails', '>= 3.1'
24
+ end
@@ -0,0 +1,137 @@
1
+ (function () {
2
+ 'use strict';
3
+
4
+ // Store a local reference to jQuery.
5
+ var $ = window.jQuery;
6
+
7
+ // Listen for keydown events.
8
+ $(document).keydown(function (ev) {
9
+ var $olay = $('.js-olay-container').last();
10
+ var olay = $olay.data('olay');
11
+ if (!olay) return;
12
+ var pressed = ev.which;
13
+ var keys = olay.hideOnKeys || [];
14
+ for (var i = 0, l = keys.length; i < l; ++i) {
15
+ if (pressed === keys[i]) return olay.hide() && false;
16
+ }
17
+ });
18
+
19
+ // Create the `Olay` constructor.
20
+ //
21
+ // ```js
22
+ // var olay = new Olay('Howdy!', {duration: 5000});
23
+ // ```js
24
+ var Olay = window.Olay = function (el, options) {
25
+ for (var name in options) this[name] = options[name];
26
+ this.$container = $('<div>')
27
+ .addClass('js-olay-container')
28
+ .addClass(this.transition)
29
+ .append(
30
+ this.$table = $('<div>')
31
+ .addClass('js-olay-table')
32
+ .append(
33
+ this.$cell = $('<div>')
34
+ .addClass('js-olay-cell')
35
+ .append(
36
+ this.$content = $('<div>')
37
+ .addClass('js-olay-content')
38
+ .attr({role: 'alertdialog', 'aria-label': this.ariaLabel})
39
+ .append(
40
+ this.$el = el instanceof $ ? el : $(el)))));
41
+ };
42
+
43
+ // Define `prototype` properties and methods for `Olay`.
44
+ var proto = {
45
+
46
+ // How long the olay should be displayed for (in ms)?
47
+ // `0` means indefinitely.
48
+ duration: 0,
49
+
50
+ // What transition should be used? This simply refers to a class that will
51
+ // be added to the `$container` when shown. Use this to style different
52
+ // transitions with CSS.
53
+ transition: 'js-olay-flip',
54
+
55
+ // How long should the olay take to transition in or out?
56
+ // `0` means instantly.
57
+ transitionDuration: 250,
58
+
59
+ // What keys hide the olay? Default is just ESC.
60
+ hideOnKeys: [27],
61
+
62
+ // Should the olay be hidden when there is a click outside the content box?
63
+ hideOnClick: true,
64
+
65
+ // Show the olay.
66
+ show: function () {
67
+ var inDom = $.contains($('body'), this.$container);
68
+ if (inDom && this.$container.hasClass('js-olay-show')) return this;
69
+ clearTimeout(this._timeout);
70
+ if (!inDom) this._append();
71
+
72
+ // Force a redraw before and after adding the transition class. Not doing
73
+ // this will apply the end result of the transition instantly, which is
74
+ // not desirable in a transition...
75
+ this.$container.data('olay', this).height();
76
+ this.$container.addClass('js-olay-show');
77
+ var self = this;
78
+ var hide = function () { self.hide(); };
79
+ this.$content.on('click', '.js-olay-hide', hide);
80
+ if (this.hideOnClick) {
81
+ this.$container.click(hide);
82
+ this.$content.click(function (ev) { ev.stopPropagation(); });
83
+ }
84
+ this.$el.trigger('show');
85
+ var duration = this.duration;
86
+ if (!duration) return this;
87
+ duration += this.transitionDuration;
88
+ this._timeout = setTimeout(hide, duration);
89
+ return this;
90
+ },
91
+
92
+ // Hide the olay by removing the `'js-show'` class to the container and then
93
+ // finally removing it from the DOM after `transitionDuration`.
94
+ hide: function () {
95
+ if (!this.$container.hasClass('js-olay-show')) return;
96
+ clearTimeout(this._timeout);
97
+ this.$container.removeClass('js-olay-show');
98
+ this.$el.trigger('hide');
99
+ var duration = this.transitionDuration;
100
+ if (!duration) return this._remove();
101
+ var self = this;
102
+ this._timeout = setTimeout(function () { self._remove(); }, duration);
103
+ return this;
104
+ },
105
+
106
+ // Append `$container` to the DOM. Used internally.
107
+ _append: function () {
108
+ this._activeElement = document.activeElement;
109
+ $(':input').each(function () {
110
+ var $t = $(this);
111
+ if ('olayTabindex' in $t.data()) return;
112
+ $t.data('olayTabindex', $t.attr('tabindex') || null)
113
+ .attr('tabindex', -1);
114
+ });
115
+ $('body').addClass('js-olay-visible').append(this.$container);
116
+ this.$content.attr('tabindex', 0).focus().removeAttr('tabindex');
117
+ return this;
118
+ },
119
+
120
+ // Detach or remove `$container` from the DOM. Used internally.
121
+ _remove: function () {
122
+ this.$container.remove();
123
+ var $olays = $('.js-olay-container');
124
+ ($olays.length ? $olays.last() : $('body').removeClass('js-olay-visible'))
125
+ .find(':input').each(function () {
126
+ var $t = $(this);
127
+ $t.attr('tabindex', $t.data('olayTabindex'))
128
+ .removeData('olayTabindex');
129
+ });
130
+ this._activeElement.focus();
131
+ return this;
132
+ }
133
+ };
134
+
135
+ // Extend `Olay.prototype`.
136
+ for (var name in proto) Olay.prototype[name] = proto[name];
137
+ })();
@@ -0,0 +1,129 @@
1
+ body.js-olay-visible {
2
+ overflow: hidden;
3
+ }
4
+
5
+ .js-olay-container {
6
+ position: fixed;
7
+ z-index: 999;
8
+ left: 0;
9
+ top: 0;
10
+ width: 100%;
11
+ height: 100%;
12
+ overflow: auto;
13
+ -webkit-overflow-scrolling: touch;
14
+ }
15
+
16
+ .js-olay-table {
17
+ display: table;
18
+ width: 100%;
19
+ height: 100%;
20
+ }
21
+
22
+ .js-olay-cell {
23
+ display: table-cell;
24
+ text-align: center;
25
+ vertical-align: middle;
26
+ }
27
+
28
+ .js-olay-content {
29
+ display: inline-block;
30
+ position: relative;
31
+ outline: none;
32
+ }
33
+
34
+ /* Built-in Transitions */
35
+
36
+ .js-olay-scale-up.js-olay-container,
37
+ .js-olay-scale-down.js-olay-container,
38
+ .js-olay-flip.js-olay-container,
39
+ .js-olay-slide.js-olay-container {
40
+ opacity: 0;
41
+ -webkit-transition: all .25s cubic-bezier(.5, 0, .5, 1);
42
+ -moz-transition: all .25s cubic-bezier(.5, 0, .5, 1);
43
+ -ms-transition: all .25s cubic-bezier(.5, 0, .5, 1);
44
+ -o-transition: all .25s cubic-bezier(.5, 0, .5, 1);
45
+ transition: all .25s cubic-bezier(.5, 0, .5, 1);
46
+ }
47
+
48
+ .js-olay-scale-up.js-olay-show.js-olay-container,
49
+ .js-olay-scale-down.js-olay-show.js-olay-container,
50
+ .js-olay-flip.js-olay-show.js-olay-container,
51
+ .js-olay-slide.js-olay-show.js-olay-container {
52
+ opacity: 1;
53
+ }
54
+
55
+ .js-olay-flip .js-olay-cell {
56
+ -webkit-perspective: 500px;
57
+ -moz-perspective: 500px;
58
+ -ms-perspective: 500px;
59
+ -o-perspective: 500px;
60
+ perspective: 500px;
61
+ }
62
+
63
+ .js-olay-scale-up .js-olay-content,
64
+ .js-olay-scale-down .js-olay-content,
65
+ .js-olay-flip .js-olay-content,
66
+ .js-olay-slide .js-olay-content {
67
+ -webkit-transition: all .25s cubic-bezier(.5, 0, .5, 1);
68
+ -moz-transition: all .25s cubic-bezier(.5, 0, .5, 1);
69
+ -ms-transition: all .25s cubic-bezier(.5, 0, .5, 1);
70
+ -o-transition: all .25s cubic-bezier(.5, 0, .5, 1);
71
+ transition: all .25s cubic-bezier(.5, 0, .5, 1);
72
+ }
73
+
74
+ .js-olay-scale-up .js-olay-content {
75
+ -webkit-transform: scale(.95);
76
+ -moz-transform: scale(.95);
77
+ -ms-transform: scale(.95);
78
+ -o-transform: scale(.95);
79
+ transform: scale(.95);
80
+ }
81
+
82
+ .js-olay-scale-down .js-olay-content {
83
+ -webkit-transform: scale(1.05);
84
+ -moz-transform: scale(1.05);
85
+ -ms-transform: scale(1.05);
86
+ -o-transform: scale(1.05);
87
+ transform: scale(1.05);
88
+ }
89
+
90
+ .js-olay-scale-up.js-olay-show .js-olay-content,
91
+ .js-olay-scale-down.js-olay-show .js-olay-content {
92
+ -webkit-transform: scale(1);
93
+ -moz-transform: scale(1);
94
+ -ms-transform: scale(1);
95
+ -o-transform: scale(1);
96
+ transform: scale(1);
97
+ }
98
+
99
+ .js-olay-flip .js-olay-content {
100
+ -webkit-transform: rotateX(90deg);
101
+ -moz-transform: rotateX(90deg);
102
+ -ms-transform: rotateX(90deg);
103
+ -o-transform: rotateX(90deg);
104
+ transform: rotateX(90deg);
105
+ }
106
+
107
+ .js-olay-flip.js-olay-show .js-olay-content {
108
+ -webkit-transform: rotateX(0);
109
+ -moz-transform: rotateX(0);
110
+ -ms-transform: rotateX(0);
111
+ -o-transform: rotateX(0);
112
+ transform: rotateX(0);
113
+ }
114
+
115
+ .js-olay-slide .js-olay-content {
116
+ -webkit-transform: translate(0, -100%);
117
+ -moz-transform: translate(0, -100%);
118
+ -ms-transform: translate(0, -100%);
119
+ -o-transform: translate(0, -100%);
120
+ transform: translate(0, -100%);
121
+ }
122
+
123
+ .js-olay-slide.js-olay-show .js-olay-content {
124
+ -webkit-transform: translate(0, 0);
125
+ -moz-transform: translate(0, 0);
126
+ -ms-transform: translate(0, 0);
127
+ -o-transform: translate(0, 0);
128
+ transform: translate(0, 0);
129
+ }
metadata ADDED
@@ -0,0 +1,91 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: olay-rails
3
+ version: !ruby/object:Gem::Version
4
+ hash: 25
5
+ prerelease:
6
+ segments:
7
+ - 0
8
+ - 1
9
+ - 1
10
+ version: 0.1.1
11
+ platform: ruby
12
+ authors:
13
+ - Casey Foster
14
+ - Aaron Lasseigne
15
+ autorequire:
16
+ bindir: bin
17
+ cert_chain: []
18
+
19
+ date: 2013-03-06 00:00:00 Z
20
+ dependencies:
21
+ - !ruby/object:Gem::Dependency
22
+ prerelease: false
23
+ version_requirements: &id001 !ruby/object:Gem::Requirement
24
+ none: false
25
+ requirements:
26
+ - - ">="
27
+ - !ruby/object:Gem::Version
28
+ hash: 5
29
+ segments:
30
+ - 3
31
+ - 1
32
+ version: "3.1"
33
+ requirement: *id001
34
+ name: rails
35
+ type: :runtime
36
+ description: Places Olay 0.1.0 in the Rails asset pipeline.
37
+ email:
38
+ - c@sey.me
39
+ executables: []
40
+
41
+ extensions: []
42
+
43
+ extra_rdoc_files: []
44
+
45
+ files:
46
+ - .gitignore
47
+ - Gemfile
48
+ - LICENSE.txt
49
+ - README.md
50
+ - Rakefile
51
+ - lib/olay-rails.rb
52
+ - lib/olay/rails/engine.rb
53
+ - lib/olay/rails/version.rb
54
+ - olay-rails.gemspec
55
+ - vendor/assets/javascripts/olay.js
56
+ - vendor/assets/stylesheets/olay.css
57
+ homepage: https://github.com/orgsync/olay-rails
58
+ licenses:
59
+ - MIT
60
+ post_install_message:
61
+ rdoc_options: []
62
+
63
+ require_paths:
64
+ - lib
65
+ required_ruby_version: !ruby/object:Gem::Requirement
66
+ none: false
67
+ requirements:
68
+ - - ">="
69
+ - !ruby/object:Gem::Version
70
+ hash: 3
71
+ segments:
72
+ - 0
73
+ version: "0"
74
+ required_rubygems_version: !ruby/object:Gem::Requirement
75
+ none: false
76
+ requirements:
77
+ - - ">="
78
+ - !ruby/object:Gem::Version
79
+ hash: 3
80
+ segments:
81
+ - 0
82
+ version: "0"
83
+ requirements: []
84
+
85
+ rubyforge_project:
86
+ rubygems_version: 1.8.15
87
+ signing_key:
88
+ specification_version: 3
89
+ summary: Overlays that don't suck.
90
+ test_files: []
91
+