modalist 2.0.0 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|