modalist 2.0.0 → 2.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +6 -1
- data/README.md +10 -16
- data/app/helpers/modalist/modal_helper.rb +0 -12
- data/app/views/mozaic/_modalist.html.erb +5 -13
- data/app/views/mozaic/modalist/{closer.html.erb → _closer.html.erb} +0 -0
- data/app/views/mozaic/modalist/_wrapper.html.erb +13 -0
- data/lib/modalist/railtie.rb +1 -0
- data/lib/modalist/version.rb +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a78c6fdb7a83607e4c7c1986d85877289df20adfe7db50737164c0187fb11e9a
|
|
4
|
+
data.tar.gz: 26633472451d0eaf6a65fafde16b97f5152d87fd4ec4c1529662d80210611444
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: dded7573d0cd6bcef736f36b3958e6d940ad6db6d51d4418e5df5f397d0f2547bd84a3eb26bc6164ce313859952a4ca51847d742df06e22f6f6fda012ac73422
|
|
7
|
+
data.tar.gz: 0ee2032d30064e264b6b2851cabbc499877f68a55c92567c4444c312ffb2d0b1da7403da8080e5e50a9ae3125cce403d5103b6e13a199339fa1cfd0ad0c81dc6
|
data/CHANGELOG.md
CHANGED
data/README.md
CHANGED
|
@@ -73,15 +73,15 @@ Specify where modals should be located in your view:
|
|
|
73
73
|
!!!
|
|
74
74
|
%html
|
|
75
75
|
%head
|
|
76
|
-
|
|
76
|
+
...
|
|
77
77
|
%body
|
|
78
|
-
= component 'modalist'
|
|
78
|
+
= component 'modalist/wrapper'
|
|
79
79
|
= yield
|
|
80
80
|
```
|
|
81
81
|
|
|
82
82
|
### Controllers
|
|
83
83
|
|
|
84
|
-
|
|
84
|
+
Modalist simulates Rails' MVC structure. To add a new modal to your app, you have to create a new controller action, route and view:
|
|
85
85
|
|
|
86
86
|
```ruby
|
|
87
87
|
class SettingsController < ApplicationController
|
|
@@ -117,27 +117,21 @@ get 'modal', to: 'settings#modal', constraints: Modalist::Ajax.new
|
|
|
117
117
|
|
|
118
118
|
### Views
|
|
119
119
|
|
|
120
|
-
In your Modalist
|
|
120
|
+
In your Modalist view you are able to use the `'modalist'` component to customize the modal:
|
|
121
121
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
**`modalist_actions(&block)`:** Specify actions (preferably icons wrapped in links) which will be displayed on the right side of your modal header. Takes a block.
|
|
127
|
-
|
|
128
|
-
**`modalist_closer`:** Renders a default modal close action. Can be passed to `modalist_actions`.
|
|
129
|
-
|
|
130
|
-
#### Example
|
|
122
|
+
* `title` This will specify a title for your modal. If you omit this, your modal will not have a header. Takes a string.
|
|
123
|
+
* `subtitle` Add a subtitle to your modal header. Takes a string.
|
|
124
|
+
* `&block` Specify actions (preferably icons wrapped in links) which will be displayed on the right side of your modal header.
|
|
131
125
|
|
|
132
126
|
```haml
|
|
133
|
-
|
|
134
|
-
- modalist_subtitle 'Subtitle'
|
|
135
|
-
- modalist_actions do
|
|
127
|
+
= component 'modalist', title: 'Modal', subtitle: 'Subtitle' do
|
|
136
128
|
= component 'modalist/closer'
|
|
137
129
|
|
|
138
130
|
Content ...
|
|
139
131
|
```
|
|
140
132
|
|
|
133
|
+
**Note:** The `'modalist/closer'` component renders a default modal close action.
|
|
134
|
+
|
|
141
135
|
### Styles
|
|
142
136
|
|
|
143
137
|
It is often useful to be able to provide view-specific styles. Modalist therefore adds classes for controller and action to the `.modalist--content-body` element which wraps your modals content. Here is how you can utilize it:
|
|
@@ -1,18 +1,6 @@
|
|
|
1
1
|
module Modalist
|
|
2
2
|
module ModalHelper
|
|
3
3
|
|
|
4
|
-
def modalist_title title
|
|
5
|
-
area :modalist_title, title
|
|
6
|
-
end
|
|
7
|
-
|
|
8
|
-
def modalist_subtitle subtitle
|
|
9
|
-
area :modalist_subtitle, subtitle
|
|
10
|
-
end
|
|
11
|
-
|
|
12
|
-
def modalist_actions &block
|
|
13
|
-
area :modalist_actions, capture(&block)
|
|
14
|
-
end
|
|
15
|
-
|
|
16
4
|
def modalist_class_hierarchy options = [], delimiter = ' '
|
|
17
5
|
options.map(&:inspect).join(delimiter).gsub('"', '').gsub(',', '').gsub('[', '').gsub(']', '')
|
|
18
6
|
end
|
|
@@ -1,13 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
<div class="modalist">
|
|
7
|
-
<div class="modalist--loader">
|
|
8
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><g transform="translate(0, 0)"><g class="nc-loop_bars-rotate-24" transform="rotate(270 12 12)"> <rect x="11" fill="#444444" width="2" height="6"></rect> <rect x="17.3639603" y="2.636039" transform="matrix(0.7071068 0.7071068 -0.7071068 0.7071068 9.3639612 -11.3345242)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="18" y="11" fill="#444444" width="6" height="2" style="opacity: 0.4;"></rect> <rect x="17.3639603" y="15.3639612" transform="matrix(-0.7071068 0.7071068 -0.7071068 -0.7071068 44.3345222 18.3639603)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="11" y="18" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="4.6360388" y="15.3639612" transform="matrix(-0.7071068 -0.7071068 0.7071068 -0.7071068 -3.363961 35.3345222)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="0" y="11" fill="#444444" width="6" height="2" style="opacity: 0.5;"></rect> <rect x="4.6360388" y="2.636039" transform="matrix(0.7071068 -0.7071068 0.7071068 0.7071068 -2.3345237 5.6360388)" fill="#444444" width="2" height="6" style="opacity: 0.8;"></rect> </g> <script>!function(){function t(t){this.element=t,this.animationId,this.start=null,this.init()}if(!window.requestAnimationFrame){var i=null;window.requestAnimationFrame=function(t,n){var e=(new Date).getTime();i||(i=e);var a=Math.max(0,16-(e-i)),o=window.setTimeout(function(){t(e+a)},a);return i=e+a,o}}t.prototype.init=function(){var t=this;this.animationId=window.requestAnimationFrame(t.triggerAnimation.bind(t))},t.prototype.reset=function(){var t=this;window.cancelAnimationFrame(t.animationId)},t.prototype.triggerAnimation=function(t){var i=this;this.start||(this.start=t);var n=t-this.start;800>n||(this.start=this.start+800),this.element.setAttribute("transform","rotate("+parseInt(Math.min(n/100,8))%8*45+" 12 12)");if(document.documentElement.contains(this.element))window.requestAnimationFrame(i.triggerAnimation.bind(i))};var n=document.getElementsByClassName("nc-loop_bars-rotate-24"),e=[];if(n)for(var a=0;n.length>a;a++)!function(i){e.push(new t(n[i]))}(a);document.addEventListener("visibilitychange",function(){"hidden"==document.visibilityState?e.forEach(function(t){t.reset()}):e.forEach(function(t){t.init()})})}();</script></g></svg>
|
|
9
|
-
</div>
|
|
10
|
-
<div class="modalist--content">
|
|
11
|
-
<%= block %>
|
|
12
|
-
</div>
|
|
13
|
-
</div>
|
|
1
|
+
<% area :modalist_title, options[:title] %>
|
|
2
|
+
<% area :modalist_subtitle, options[:subtitle] %>
|
|
3
|
+
<% area :modalist_actions do %>
|
|
4
|
+
<%= block %>
|
|
5
|
+
<% end %>
|
|
File without changes
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<div id="modalist--overlay">
|
|
2
|
+
<div class="modalist--loader">
|
|
3
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><g transform="translate(0, 0)"><g class="nc-loop_bars-rotate-24" transform="rotate(270 12 12)"> <rect x="11" fill="#444444" width="2" height="6"></rect> <rect x="17.3639603" y="2.636039" transform="matrix(0.7071068 0.7071068 -0.7071068 0.7071068 9.3639612 -11.3345242)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="18" y="11" fill="#444444" width="6" height="2" style="opacity: 0.4;"></rect> <rect x="17.3639603" y="15.3639612" transform="matrix(-0.7071068 0.7071068 -0.7071068 -0.7071068 44.3345222 18.3639603)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="11" y="18" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="4.6360388" y="15.3639612" transform="matrix(-0.7071068 -0.7071068 0.7071068 -0.7071068 -3.363961 35.3345222)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="0" y="11" fill="#444444" width="6" height="2" style="opacity: 0.5;"></rect> <rect x="4.6360388" y="2.636039" transform="matrix(0.7071068 -0.7071068 0.7071068 0.7071068 -2.3345237 5.6360388)" fill="#444444" width="2" height="6" style="opacity: 0.8;"></rect> </g> <script>!function(){function t(t){this.element=t,this.animationId,this.start=null,this.init()}if(!window.requestAnimationFrame){var i=null;window.requestAnimationFrame=function(t,n){var e=(new Date).getTime();i||(i=e);var a=Math.max(0,16-(e-i)),o=window.setTimeout(function(){t(e+a)},a);return i=e+a,o}}t.prototype.init=function(){var t=this;this.animationId=window.requestAnimationFrame(t.triggerAnimation.bind(t))},t.prototype.reset=function(){var t=this;window.cancelAnimationFrame(t.animationId)},t.prototype.triggerAnimation=function(t){var i=this;this.start||(this.start=t);var n=t-this.start;800>n||(this.start=this.start+800),this.element.setAttribute("transform","rotate("+parseInt(Math.min(n/100,8))%8*45+" 12 12)");if(document.documentElement.contains(this.element))window.requestAnimationFrame(i.triggerAnimation.bind(i))};var n=document.getElementsByClassName("nc-loop_bars-rotate-24"),e=[];if(n)for(var a=0;n.length>a;a++)!function(i){e.push(new t(n[i]))}(a);document.addEventListener("visibilitychange",function(){"hidden"==document.visibilityState?e.forEach(function(t){t.reset()}):e.forEach(function(t){t.init()})})}();</script></g></svg>
|
|
4
|
+
</div>
|
|
5
|
+
</div>
|
|
6
|
+
<div class="modalist">
|
|
7
|
+
<div class="modalist--loader">
|
|
8
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><g transform="translate(0, 0)"><g class="nc-loop_bars-rotate-24" transform="rotate(270 12 12)"> <rect x="11" fill="#444444" width="2" height="6"></rect> <rect x="17.3639603" y="2.636039" transform="matrix(0.7071068 0.7071068 -0.7071068 0.7071068 9.3639612 -11.3345242)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="18" y="11" fill="#444444" width="6" height="2" style="opacity: 0.4;"></rect> <rect x="17.3639603" y="15.3639612" transform="matrix(-0.7071068 0.7071068 -0.7071068 -0.7071068 44.3345222 18.3639603)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="11" y="18" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="4.6360388" y="15.3639612" transform="matrix(-0.7071068 -0.7071068 0.7071068 -0.7071068 -3.363961 35.3345222)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="0" y="11" fill="#444444" width="6" height="2" style="opacity: 0.5;"></rect> <rect x="4.6360388" y="2.636039" transform="matrix(0.7071068 -0.7071068 0.7071068 0.7071068 -2.3345237 5.6360388)" fill="#444444" width="2" height="6" style="opacity: 0.8;"></rect> </g> <script>!function(){function t(t){this.element=t,this.animationId,this.start=null,this.init()}if(!window.requestAnimationFrame){var i=null;window.requestAnimationFrame=function(t,n){var e=(new Date).getTime();i||(i=e);var a=Math.max(0,16-(e-i)),o=window.setTimeout(function(){t(e+a)},a);return i=e+a,o}}t.prototype.init=function(){var t=this;this.animationId=window.requestAnimationFrame(t.triggerAnimation.bind(t))},t.prototype.reset=function(){var t=this;window.cancelAnimationFrame(t.animationId)},t.prototype.triggerAnimation=function(t){var i=this;this.start||(this.start=t);var n=t-this.start;800>n||(this.start=this.start+800),this.element.setAttribute("transform","rotate("+parseInt(Math.min(n/100,8))%8*45+" 12 12)");if(document.documentElement.contains(this.element))window.requestAnimationFrame(i.triggerAnimation.bind(i))};var n=document.getElementsByClassName("nc-loop_bars-rotate-24"),e=[];if(n)for(var a=0;n.length>a;a++)!function(i){e.push(new t(n[i]))}(a);document.addEventListener("visibilitychange",function(){"hidden"==document.visibilityState?e.forEach(function(t){t.reset()}):e.forEach(function(t){t.init()})})}();</script></g></svg>
|
|
9
|
+
</div>
|
|
10
|
+
<div class="modalist--content">
|
|
11
|
+
<%= block %>
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
data/lib/modalist/railtie.rb
CHANGED
data/lib/modalist/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: modalist
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 2.
|
|
4
|
+
version: 2.1.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Jonas Hübotter
|
|
@@ -95,7 +95,8 @@ files:
|
|
|
95
95
|
- app/helpers/modalist/render_helper.rb
|
|
96
96
|
- app/views/layouts/modalist.html.erb
|
|
97
97
|
- app/views/mozaic/_modalist.html.erb
|
|
98
|
-
- app/views/mozaic/modalist/
|
|
98
|
+
- app/views/mozaic/modalist/_closer.html.erb
|
|
99
|
+
- app/views/mozaic/modalist/_wrapper.html.erb
|
|
99
100
|
- lib/modalist.rb
|
|
100
101
|
- lib/modalist/ajax.rb
|
|
101
102
|
- lib/modalist/engine.rb
|