snackbarjs-rails 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE.txt +22 -0
- data/README.md +69 -0
- data/lib/snackbarjs-rails.rb +8 -0
- data/lib/snackbarjs-rails/version.rb +5 -0
- data/vendor/assets/snackbarjs/snackbar-material.css +28 -0
- data/vendor/assets/snackbarjs/snackbar.css +36 -0
- data/vendor/assets/snackbarjs/snackbar.js +137 -0
- metadata +108 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 10b0813159cd48484c0db5eed038bfaa65509640
|
4
|
+
data.tar.gz: 0f4b180217bfefcf8367b3f16cacfcb0150bbca3
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 7e416e65c3b4dc19709f233969e31d480d5a539e4d9fefb2abd84c3479c78644dbfa10615b70c9b3d4b441bc5b3886175278612e40715332f4603c9b9ef8d223
|
7
|
+
data.tar.gz: f0ba291b2d78e9bbfff49274bad87f395a3b96de30d3a9834f83abb1e83ea38bc7453b6add8a220dcb0febce3cb65d84e1e47f10e7f6561fa15b1391433cc7db
|
data/LICENSE.txt
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2015 Michael Elfassy
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,69 @@
|
|
1
|
+
# SnackbarJS for Rails
|
2
|
+
|
3
|
+
See demo:
|
4
|
+
http://fezvrasta.github.io/snackbarjs/
|
5
|
+
|
6
|
+
## Installation
|
7
|
+
|
8
|
+
Add this line to your application's Gemfile:
|
9
|
+
|
10
|
+
```ruby
|
11
|
+
gem 'snackbarjs-rails'
|
12
|
+
```
|
13
|
+
|
14
|
+
And then execute:
|
15
|
+
|
16
|
+
$ bundle
|
17
|
+
|
18
|
+
Or install it yourself as:
|
19
|
+
|
20
|
+
$ gem install snackbarjs-rails
|
21
|
+
|
22
|
+
## Usage
|
23
|
+
|
24
|
+
Add to the bottom of your layout
|
25
|
+
```
|
26
|
+
<%= javascript_tag do %>
|
27
|
+
window.flashMessages = $.parseJSON('<%=j flash.to_hash.to_json.html_safe %>');
|
28
|
+
<% end %>
|
29
|
+
|
30
|
+
# Or For slim
|
31
|
+
javascript:
|
32
|
+
window.flashMessages = $.parseJSON('#{j flash.to_hash.to_json.html_safe}')
|
33
|
+
```
|
34
|
+
|
35
|
+
And then to your application.js
|
36
|
+
```javascript
|
37
|
+
//= require snackbar
|
38
|
+
|
39
|
+
$(document).on('ready page:load', function(){
|
40
|
+
$.each( flashMessages, function(key, value){
|
41
|
+
$.snackbar({content: value, style: key, timeout: 10000});
|
42
|
+
});
|
43
|
+
});
|
44
|
+
```
|
45
|
+
|
46
|
+
Finally edit your application.css.scss
|
47
|
+
```scss
|
48
|
+
@import "snackbar";
|
49
|
+
@import "snackbar-material";
|
50
|
+
|
51
|
+
.snackbar.error {
|
52
|
+
background-color: red;
|
53
|
+
}
|
54
|
+
.snackbar.alert {
|
55
|
+
background-color: yellow;
|
56
|
+
color: black;
|
57
|
+
}
|
58
|
+
.snackbar.notice {
|
59
|
+
background-color: green;
|
60
|
+
}
|
61
|
+
```
|
62
|
+
|
63
|
+
## Contributing
|
64
|
+
|
65
|
+
1. Fork it ( https://github.com/elfassy/snackbarjs-rails/fork )
|
66
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
67
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
68
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
69
|
+
5. Create a new Pull Request
|
@@ -0,0 +1,28 @@
|
|
1
|
+
.snackbar {
|
2
|
+
background-color: #323232;
|
3
|
+
color: #FFFFFF;
|
4
|
+
font-size: 14px;
|
5
|
+
border-radius: 2px;
|
6
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
7
|
+
height: 0;
|
8
|
+
-moz-transition: -moz-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
|
9
|
+
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
|
10
|
+
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
|
11
|
+
-moz-transform: translateY(200%);
|
12
|
+
-webkit-transform: translateY(200%);
|
13
|
+
transform: translateY(200%);
|
14
|
+
}
|
15
|
+
.snackbar.snackbar-opened {
|
16
|
+
padding: 14px 15px;
|
17
|
+
margin-bottom: 20px;
|
18
|
+
height: auto;
|
19
|
+
-moz-transition: -moz-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s;
|
20
|
+
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s;
|
21
|
+
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
|
22
|
+
-moz-transform: none;
|
23
|
+
-webkit-transform: none;
|
24
|
+
transform: none;
|
25
|
+
}
|
26
|
+
.snackbar.toast {
|
27
|
+
border-radius: 200px;
|
28
|
+
}
|
@@ -0,0 +1,36 @@
|
|
1
|
+
#snackbar-container {
|
2
|
+
position: fixed;
|
3
|
+
left: 20px;
|
4
|
+
bottom: 0;
|
5
|
+
z-index: 99999;
|
6
|
+
}
|
7
|
+
.snackbar {
|
8
|
+
overflow: hidden;
|
9
|
+
clear: both;
|
10
|
+
min-width: 288px;
|
11
|
+
max-width: 568px;
|
12
|
+
cursor: pointer;
|
13
|
+
opacity: 0;
|
14
|
+
}
|
15
|
+
.snackbar.snackbar-opened {
|
16
|
+
height: auto;
|
17
|
+
opacity: 1;
|
18
|
+
}
|
19
|
+
@media (max-width: 767px) {
|
20
|
+
#snackbar-container {
|
21
|
+
left: 0px !important;
|
22
|
+
right: 0px;
|
23
|
+
width: 100%;
|
24
|
+
}
|
25
|
+
#snackbar-container .snackbar {
|
26
|
+
min-width: 100%;
|
27
|
+
}
|
28
|
+
#snackbar-container [class="snackbar snackbar-opened"] ~ .snackbar.toast {
|
29
|
+
margin-top: 20px;
|
30
|
+
}
|
31
|
+
#snackbar-container [class="snackbar snackbar-opened"] {
|
32
|
+
border-radius: 0;
|
33
|
+
margin-bottom: 0;
|
34
|
+
}
|
35
|
+
}
|
36
|
+
/*# sourceMappingURL=snackbar.css.map */
|
@@ -0,0 +1,137 @@
|
|
1
|
+
/* SnackbarJS - MIT LICENSE (https://github.com/FezVrasta/snackbarjs/blob/master/LICENSE.md) */
|
2
|
+
|
3
|
+
(function( $ ){
|
4
|
+
|
5
|
+
$(document).ready(function() {
|
6
|
+
$("body").append("<div id=snackbar-container/>");
|
7
|
+
});
|
8
|
+
|
9
|
+
function isset(variable) {
|
10
|
+
if (typeof variable !== "undefined" && variable !== null) {
|
11
|
+
return true;
|
12
|
+
} else {
|
13
|
+
return false;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
17
|
+
$(document)
|
18
|
+
.on("click", "[data-toggle=snackbar]", function() {
|
19
|
+
$(this).snackbar("toggle");
|
20
|
+
})
|
21
|
+
.on("click", "#snackbar-container .snackbar", function() {
|
22
|
+
$(this).snackbar("hide");
|
23
|
+
});
|
24
|
+
|
25
|
+
$.snackbar = function(options) {
|
26
|
+
|
27
|
+
if (isset(options) && options === Object(options)) {
|
28
|
+
var $snackbar;
|
29
|
+
|
30
|
+
if (!isset(options.id)) {
|
31
|
+
$snackbar = $("<div/>").attr("id", "snackbar" + Date.now()).attr("class", "snackbar");
|
32
|
+
} else {
|
33
|
+
$snackbar = $("#" + options.id);
|
34
|
+
}
|
35
|
+
|
36
|
+
var snackbarStatus = $snackbar.hasClass("snackbar-opened");
|
37
|
+
|
38
|
+
if (isset(options.style)) {
|
39
|
+
$snackbar.attr("class", "snackbar " + options.style);
|
40
|
+
} else {
|
41
|
+
$snackbar.attr("class", "snackbar");
|
42
|
+
}
|
43
|
+
|
44
|
+
options.timeout = (isset(options.timeout)) ? options.timeout : 3000;
|
45
|
+
|
46
|
+
if (isset(options.content)) {
|
47
|
+
if ($snackbar.find(".snackbar-content").length) {
|
48
|
+
$snackbar.find(".snackbar-content").text(options.content);
|
49
|
+
} else {
|
50
|
+
$snackbar.prepend("<span class=snackbar-content>" + options.content + "</span>");
|
51
|
+
}
|
52
|
+
}
|
53
|
+
|
54
|
+
if (!isset(options.id)) {
|
55
|
+
$snackbar.appendTo("#snackbar-container");
|
56
|
+
} else {
|
57
|
+
$snackbar.insertAfter("#snackbar-container .snackbar:last-child");
|
58
|
+
}
|
59
|
+
|
60
|
+
// Show or hide item
|
61
|
+
if (isset(options.action) && options.action == "toggle") {
|
62
|
+
if (snackbarStatus) {
|
63
|
+
options.action = "hide";
|
64
|
+
} else {
|
65
|
+
options.action = "show";
|
66
|
+
}
|
67
|
+
}
|
68
|
+
|
69
|
+
var animationId1 = Date.now();
|
70
|
+
$snackbar.data("animationId1", animationId1);
|
71
|
+
setTimeout(function() {
|
72
|
+
if ($snackbar.data("animationId1") === animationId1) {
|
73
|
+
if (!isset(options.action) || options.action == "show") {
|
74
|
+
$snackbar.addClass("snackbar-opened");
|
75
|
+
} else if (isset(options.action) && options.action == "hide") {
|
76
|
+
$snackbar.removeClass("snackbar-opened");
|
77
|
+
}
|
78
|
+
}
|
79
|
+
}, 50);
|
80
|
+
|
81
|
+
// Set timer for item autohide
|
82
|
+
var animationId2 = Date.now();
|
83
|
+
$snackbar.data("animationId2", animationId2);
|
84
|
+
|
85
|
+
if (options.timeout !== 0) {
|
86
|
+
setTimeout(function() {
|
87
|
+
if ($snackbar.data("animationId2") === animationId2) {
|
88
|
+
$snackbar.removeClass("snackbar-opened");
|
89
|
+
}
|
90
|
+
}, options.timeout);
|
91
|
+
}
|
92
|
+
|
93
|
+
return $snackbar;
|
94
|
+
|
95
|
+
} else {
|
96
|
+
return false;
|
97
|
+
}
|
98
|
+
};
|
99
|
+
|
100
|
+
$.fn.snackbar = function(action) {
|
101
|
+
|
102
|
+
var options = {};
|
103
|
+
|
104
|
+
if (!this.hasClass("snackbar")) {
|
105
|
+
|
106
|
+
if (!isset(action) || action === "show" || action === "hide" || action == "toggle") {
|
107
|
+
options = {
|
108
|
+
content: $(this).attr("data-content"),
|
109
|
+
style: $(this).attr("data-style"),
|
110
|
+
timeout: $(this).attr("data-timeout")
|
111
|
+
};
|
112
|
+
}
|
113
|
+
|
114
|
+
if (isset(action)) {
|
115
|
+
options.id = this.attr("data-snackbar-id");
|
116
|
+
|
117
|
+
if(action === "show" || action === "hide" || action == "toggle") {
|
118
|
+
options.action = action;
|
119
|
+
}
|
120
|
+
}
|
121
|
+
|
122
|
+
var $snackbar = $.snackbar(options);
|
123
|
+
this.attr("data-snackbar-id", $snackbar.attr("id"));
|
124
|
+
|
125
|
+
return $snackbar;
|
126
|
+
|
127
|
+
} else {
|
128
|
+
|
129
|
+
options.id = this.attr("id");
|
130
|
+
if(action === "show" || action === "hide" || action == "toggle") {
|
131
|
+
options.action = action;
|
132
|
+
}
|
133
|
+
return $.snackbar(options);
|
134
|
+
}
|
135
|
+
|
136
|
+
};
|
137
|
+
})( jQuery );
|
metadata
ADDED
@@ -0,0 +1,108 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: snackbarjs-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 1.0.0
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Michael Elfassy
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2015-01-08 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: railties
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - ">="
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '0'
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - ">="
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '0'
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: bundler
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - "~>"
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '1.7'
|
34
|
+
type: :development
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - "~>"
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '1.7'
|
41
|
+
- !ruby/object:Gem::Dependency
|
42
|
+
name: rake
|
43
|
+
requirement: !ruby/object:Gem::Requirement
|
44
|
+
requirements:
|
45
|
+
- - "~>"
|
46
|
+
- !ruby/object:Gem::Version
|
47
|
+
version: '10.0'
|
48
|
+
type: :development
|
49
|
+
prerelease: false
|
50
|
+
version_requirements: !ruby/object:Gem::Requirement
|
51
|
+
requirements:
|
52
|
+
- - "~>"
|
53
|
+
- !ruby/object:Gem::Version
|
54
|
+
version: '10.0'
|
55
|
+
- !ruby/object:Gem::Dependency
|
56
|
+
name: rails
|
57
|
+
requirement: !ruby/object:Gem::Requirement
|
58
|
+
requirements:
|
59
|
+
- - ">="
|
60
|
+
- !ruby/object:Gem::Version
|
61
|
+
version: '3.0'
|
62
|
+
type: :development
|
63
|
+
prerelease: false
|
64
|
+
version_requirements: !ruby/object:Gem::Requirement
|
65
|
+
requirements:
|
66
|
+
- - ">="
|
67
|
+
- !ruby/object:Gem::Version
|
68
|
+
version: '3.0'
|
69
|
+
description: Integrate Snackbar javascript library with Rails asset pipeline
|
70
|
+
email:
|
71
|
+
- michaelelfassy@gmail.com
|
72
|
+
executables: []
|
73
|
+
extensions: []
|
74
|
+
extra_rdoc_files: []
|
75
|
+
files:
|
76
|
+
- LICENSE.txt
|
77
|
+
- README.md
|
78
|
+
- lib/snackbarjs-rails.rb
|
79
|
+
- lib/snackbarjs-rails/version.rb
|
80
|
+
- vendor/assets/snackbarjs/snackbar-material.css
|
81
|
+
- vendor/assets/snackbarjs/snackbar.css
|
82
|
+
- vendor/assets/snackbarjs/snackbar.js
|
83
|
+
homepage: https://github.com/elfassy/snackbarjs-rails
|
84
|
+
licenses:
|
85
|
+
- MIT
|
86
|
+
metadata: {}
|
87
|
+
post_install_message:
|
88
|
+
rdoc_options: []
|
89
|
+
require_paths:
|
90
|
+
- lib
|
91
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
92
|
+
requirements:
|
93
|
+
- - ">="
|
94
|
+
- !ruby/object:Gem::Version
|
95
|
+
version: '0'
|
96
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
97
|
+
requirements:
|
98
|
+
- - ">="
|
99
|
+
- !ruby/object:Gem::Version
|
100
|
+
version: '0'
|
101
|
+
requirements: []
|
102
|
+
rubyforge_project:
|
103
|
+
rubygems_version: 2.2.2
|
104
|
+
signing_key:
|
105
|
+
specification_version: 4
|
106
|
+
summary: Snackbar is a javascript library for alerts. This gem integrates Snackbar.js
|
107
|
+
with Rails asset pipeline for easy of use.
|
108
|
+
test_files: []
|