modalist 2.2.0 → 2.3.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.
Files changed (8) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +7 -0
  3. data/README.md +2 -1
  4. data/app/views/mozaic/modalist/_overlay.html +5 -0
  5. data/app/views/mozaic/modalist/_wrapper.html.erb +1 -6
  6. data/lib/modalist/railtie.rb +1 -0
  7. data/lib/modalist/version.rb +1 -1
  8. metadata +2 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 0f9e3dc91ecdc17b163999e63db243bcba45094a51165368b353230e960e7baa
4
- data.tar.gz: 571a1e1fdca1b39aba741823b7b4ead1ed3523b57a49b06a6e91ffbc7a2cb386
3
+ metadata.gz: e7039d4b85836f9719e6c8aa9aa22410651e9fd2d0e1df97cb7f8d85b124217d
4
+ data.tar.gz: e97874daaa6cb397d0619ec9016fdea4abf4dacbd75d73d0e3e91258a094312d
5
5
  SHA512:
6
- metadata.gz: a6a025fe50735fbbecfe9454f8c4acf5170fd7f7b5ac9d848ba3c943281ccd61fb6cebb6ac3b15bd17565958f8dd4f7978c446de0a97cc756e55ec3037376ec8
7
- data.tar.gz: 51e861ad55b93ba5a1d7ff0efb08498307bef612801a0faa63bdf8169822709eb3dd84bf95ee95e82c89c97de12235101b1dd40aa730e3bdc3bda20c5b013e63
6
+ metadata.gz: f5538a7b9008206aa668da1ffd2d124f9e169101ce9181fadc75fa19f87e91d23be5f276f3fd1f67418537bfd3cfaa2a2d74e274463a28351c5d565b4a631dd8
7
+ data.tar.gz: 829242220c4e9f91e0b1de06e310b1dfeb59c68078107c11503b34f5b5e6e162bad67ef0d97595a3350e73495d7320942643fadb880bf55d259d74caa0a624ef
data/CHANGELOG.md CHANGED
@@ -4,6 +4,13 @@
4
4
 
5
5
  * nothing yet
6
6
 
7
+ ### 2.3.0 - 2018/02/11
8
+
9
+ * features
10
+ * add `modalist/overlay` component
11
+ * enhancements
12
+ * add `id` option to `modalist/wrapper` component
13
+
7
14
  ### 2.2.0 - 2018/02/11
8
15
 
9
16
  * features
data/README.md CHANGED
@@ -76,6 +76,7 @@ Specify where modals should be located in your view:
76
76
  %head
77
77
  ...
78
78
  %body
79
+ = component 'modalist/overlay'
79
80
  = component 'modalist/wrapper'
80
81
  = yield
81
82
  ```
@@ -153,7 +154,7 @@ It is often useful to be able to provide view-specific styles. Modalist therefor
153
154
  You can also setup synchronous modals wherever you like:
154
155
 
155
156
  ```haml
156
- = component 'modalist/wrapper', class: 'signup' do
157
+ = component 'modalist/wrapper', id: 'signup' do
157
158
  %h1 Signup
158
159
  ...
159
160
  ```
data/app/views/mozaic/modalist/_overlay.html ADDED
@@ -0,0 +1,5 @@
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&gt;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&gt;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>
data/app/views/mozaic/modalist/_wrapper.html.erb CHANGED
@@ -1,9 +1,4 @@
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&gt;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&gt;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 <%= options[:class] %>">
1
+ <div class="modalist <%= options[:class] %>" id="<%= options[:id] %>">
7
2
  <div class="modalist--loader">
8
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&gt;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&gt;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
4
  </div>
data/lib/modalist/railtie.rb CHANGED
@@ -6,6 +6,7 @@ module Modalist
6
6
  initializer 'modalist.mozaic' do
7
7
  Mozaic.configure do |config|
8
8
  config.define_component 'modalist'
9
+ config.define_component 'modalist/overlay'
9
10
  config.define_component 'modalist/wrapper'
10
11
  config.define_component 'modalist/closer'
11
12
  end
data/lib/modalist/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Modalist
2
2
 
3
- VERSION = '2.2.0'
3
+ VERSION = '2.3.0'
4
4
 
5
5
  end
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.2.0
4
+ version: 2.3.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Jonas Hübotter
@@ -96,6 +96,7 @@ files:
96
96
  - app/views/layouts/modalist.html.erb
97
97
  - app/views/mozaic/_modalist.html.erb
98
98
  - app/views/mozaic/modalist/_closer.html.erb
99
+ - app/views/mozaic/modalist/_overlay.html
99
100
  - app/views/mozaic/modalist/_wrapper.html.erb
100
101
  - lib/modalist.rb
101
102
  - lib/modalist/ajax.rb