modalist 1.0.0 → 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1cbf3abd0b4787f3ab6afb23b2846b05a0dd92a4de370e388ce249242e29f0f3
4
- data.tar.gz: 38dfacf7c7d68db70b7444e7e8e7bd03a775773287ca35adf36b7b94c175fa1b
3
+ metadata.gz: 7b782323baccf5b9c81bd18326c8e18b4060ce55af8c7a11091f68343b9f1f43
4
+ data.tar.gz: ac6a9e9915dbb8542ecea9af8cc2f92f1d64814c764707656091d7105c831339
5
5
  SHA512:
6
- metadata.gz: 47caee6ccf5fb50518790a4ae534448110b4836262651f284b729471c14fa8132bb1dc1c91f0ed3a050479a8bb8a091b591203c6fb793d85bd243dad614f07ca
7
- data.tar.gz: dc75cd91513f0e666c01914e2bb3b6c6467c22f3077d9d0f8371c110bef7b1c5b2a8f2d35b23f2c167ca1d3cf2a21d2db442e12c50e1c6eb6a173ac44b698a81
6
+ metadata.gz: 78fd5ce85e533ff2f812c803c5886bdaacabd68ff265a1d8fcaaa09cce75421d669091d0654965032f25a752904ff090b4d70942b92c9c27c5054eaddf03d067
7
+ data.tar.gz: 809b847ce174a8fd66f46d69e8caef10dd51776ff86e9f9de5f41a6ac3c411d076ebb8fe6acf4f9d666894edc80004947d968ae0c9c930abe1e971d7b6c27c85
data/CHANGELOG.md CHANGED
@@ -4,6 +4,11 @@
4
4
 
5
5
  * nothing yet
6
6
 
7
- ### 1.0.0 - 2018-01-06
7
+ ### 1.0.1 - 2018/01/06
8
+
9
+ * bugfixes
10
+ * fixed Modalist::ModalHelper render methods
11
+
12
+ ### 1.0.0 - 2018/01/06
8
13
 
9
14
  * initial release
data/README.md CHANGED
@@ -8,7 +8,7 @@ Modalist is a powerful ajaxified modal solution for Rails. Here is how it works:
8
8
  2) Modalist fetches the modal contents from your specific modal-controller-action with AJAX
9
9
  3) The modal opens
10
10
 
11
- Modalist does not reinvent the wheel and uses the best modal-engine [iziModal.js](https://github.com/dolce/iziModal) to backup its code.
11
+ Modalist does not reinvent the wheel and uses todays best modal-engine [iziModal.js](https://github.com/dolce/iziModal) to backup its code.
12
12
 
13
13
  ---
14
14
 
@@ -18,11 +18,8 @@ Modalist does not reinvent the wheel and uses the best modal-engine [iziModal.js
18
18
  * [Usage](#usage)
19
19
  * [Controllers](#controllers)
20
20
  * [Views](#views)
21
- * [Trigger a modal](#trigger-a-modal)
22
- * [Modalist functions](#modalist-functions)
23
- * [Options](#options)
24
21
  * [Styles](#styles)
25
- * [Events](#events)
22
+ * [Modalist.js](#modalistjs)
26
23
  * [To Do](#to-do)
27
24
  * [Contributing](#contributing)
28
25
  * [Contributors](#contributors)
@@ -65,7 +62,7 @@ First let's add the necessary assets to your pipeline:
65
62
  ```css
66
63
  /*
67
64
  *= require iziModal
68
- *= require modalist
65
+ *= require modalist.min
69
66
  */
70
67
  ```
71
68
 
@@ -79,7 +76,7 @@ Specify where modals should be located in your view:
79
76
  %head
80
77
  -# ...
81
78
  %body
82
- = modalist
79
+ = render_modalist
83
80
  = yield
84
81
  ```
85
82
 
@@ -142,86 +139,6 @@ In your Modalist views are a couple of helper methods available:
142
139
  Content ...
143
140
  ```
144
141
 
145
- ### Trigger a modal
146
-
147
- There are numerous ways to trigger/open a modal with Modalist.
148
-
149
- One options is to open the modal by calling a JavaScript function - more on that [here](#functions).
150
-
151
- #### Links
152
-
153
- The most common scenario is using a link to trigger the opening of a modal:
154
-
155
- ```haml
156
- = link_to 'Open modal', settings_modalist_url, class: 'modalist--trigger'
157
- ```
158
-
159
- You can use [data attributes](#options) to pass options customizing the modal.
160
-
161
- #### Forms
162
-
163
- When you want to open a modal after submitting a form - this is as simple as it gets:
164
-
165
- ```haml
166
- = simple_form_for @setting, settings_modalist_url(id: @setting.id), method: :get do |f|
167
- -# ...
168
- = f.input :submit, input_html: { class: 'modalist--trigger', data: { modalist_form: true } }
169
- ```
170
-
171
- You can use [data attributes](#options) to pass options customizing the modal.
172
-
173
- #### Elements
174
-
175
- You can also trigger a modal from any other HTML element in your view:
176
-
177
- ```haml
178
- .modalist--trigger{ data: { modalist_url: settings_modalist_url } }
179
- ```
180
-
181
- You can use [data attributes](#options) to pass options customizing the modal.
182
-
183
- ### Modalist functions
184
-
185
- Modalist's JavaScript component provides a set of functions to handle your modals:
186
-
187
- #### Open modals
188
-
189
- ```js
190
- Modalist.open({ url: 'http://localhost:3000/settings/modal' });
191
- ```
192
-
193
- You can pass [options](#options) to customize the modal:
194
-
195
- ```js
196
- Modalist.open({
197
- url: 'http://localhost:3000/settings/modal',
198
- form: false,
199
- fullScreen: false
200
- });
201
- ```
202
-
203
- #### Close modals
204
-
205
- ```js
206
- Modalist.close();
207
- ```
208
-
209
- ### Options
210
-
211
- There are two sets of options you can pass to Modalist. Those who get passed on initialization and those who get passed on any subsequent calls of a function.
212
-
213
- #### Initialization
214
-
215
- **`ìziModal`:** Options hash utilized to initialize [iziModal](https://github.com/dolce/iziModal).
216
-
217
- #### Subsequent calls
218
-
219
- **`url`:** URL to fetch content of the modal from. Takes a string.
220
-
221
- **`form`:** Submit a form and use the response to populate the modal. Takes a string to specify a jQuery selector for the form or `false`.
222
-
223
- **`fullScreen`:** Show a full screen modal instead of the default windowed modal. Takes a 'true', `'mobile'` (uses a full screen modal on devices smaller than `800px`) or `false`.
224
-
225
142
  ### Styles
226
143
 
227
144
  To customize the styles of your modals, require the vendored default styles and then override them with your custom CSS.
@@ -239,21 +156,9 @@ It is often useful to be able to provide view-specific styles. Modalist therefor
239
156
  }
240
157
  ```
241
158
 
242
- ### Events
243
-
244
- Modalist emits events that allow you to track the navigation lifecycle and respond to content loading. Modalist fires events on the `$(document)` object.
245
-
246
- * `modalist:click` fires when you click a Modal enabled link to trigger a modal opening. The clicked element is the event target. Access the requested location with `event.data.url`.
247
-
248
- * `modalist:request-start` fires before Modal issues a network request to fetch the modal content.
249
-
250
- * `modalist:request-end` fires after the network request completes.
251
-
252
- * `modalist:before-render` fires before rendering the content.
253
-
254
- * `modalist:render` fires after Modal renders the content in the modal.
159
+ ### Modalist.js
255
160
 
256
- * `modalist:load` fires after Modal completed preparing and opened the modal.
161
+ Continue reading [here](https://github.com/jonhue/modalist.js) to learn how to use modalist.js to open modals and fetch their content vie AJAX.
257
162
 
258
163
  ---
259
164
 
@@ -1,12 +1,12 @@
1
1
  module Modalist
2
2
  module ModalHelper
3
3
 
4
- def modalist
5
- render 'modalist/modal'
4
+ def render_modalist
5
+ render partial: 'modalist/modal'
6
6
  end
7
7
 
8
8
  def modalist_close
9
- render 'modalist/close'
9
+ render partial: 'modalist/close'
10
10
  end
11
11
 
12
12
  def modalist_title title
@@ -1,5 +1,5 @@
1
1
  module Modalist
2
2
 
3
- VERSION = '1.0.0'
3
+ VERSION = '1.0.1'
4
4
 
5
5
  end
@@ -1,3 +1,29 @@
1
+ /**!
2
+ * @fileOverview modalist.js - A powerful AJAX modal plugin extending iziModal
3
+ * @version 1.0.0
4
+ * @license
5
+ * MIT License
6
+ *
7
+ * Copyright (c) 2017 Jonas Hübotter
8
+ *
9
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
10
+ * of this software and associated documentation files (the "Software"), to deal
11
+ * in the Software without restriction, including without limitation the rights
12
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
13
+ * copies of the Software, and to permit persons to whom the Software is
14
+ * furnished to do so, subject to the following conditions:
15
+ *
16
+ * The above copyright notice and this permission notice shall be included in all
17
+ * copies or substantial portions of the Software.
18
+ *
19
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
24
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
25
+ * SOFTWARE.
26
+ */
1
27
  (function($) {
2
28
  var Modalist = new function(options) {
3
29
 
@@ -0,0 +1,27 @@
1
+ /**!
2
+ * @fileOverview modalist.js - A powerful AJAX modal plugin extending iziModal
3
+ * @version 1.0.0
4
+ * @license
5
+ * MIT License
6
+ *
7
+ * Copyright (c) 2017 Jonas Hübotter
8
+ *
9
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
10
+ * of this software and associated documentation files (the "Software"), to deal
11
+ * in the Software without restriction, including without limitation the rights
12
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
13
+ * copies of the Software, and to permit persons to whom the Software is
14
+ * furnished to do so, subject to the following conditions:
15
+ *
16
+ * The above copyright notice and this permission notice shall be included in all
17
+ * copies or substantial portions of the Software.
18
+ *
19
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
24
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
25
+ * SOFTWARE.
26
+ */
27
+ (function(b){var a=new function(c){var d={iziModal:{}};c=b.extend(d,c);this.modal=b("#modalist");this.iziModal=b(a.modal).iziModal(c.iziModal);b(".modalist--trigger").unbind("click");b(".modalist--trigger").click(function(h){h.preventDefault();var h=jQuery.Event("modalist:click"),e=b(this).data("modalist-url")||b(this).attr("href"),g=b(this).data("modalist-form")||false,f=b(this).data("modalist-full-screen");h.target=b(this);h.data={url:e};b(document).trigger(h);a.reset();a.fullScreen(f);a.load(e,g)});this.open=function(e){var f={url:null,form:false,fullScreen:false};e=b.extend(f,e);a.reset();a.fullScreen(e.fullScreen);a.load(e.url,e.form)};this.close=function(){b(a.modal).iziModal("close")};this.reset=function(){b(a.modal).iziModal("setTransitionIn","comingIn");b(a.modal).iziModal("setTransitionOut","comingOut");b(a.modal).data("full-screen",false);b(a.modal).iziModal("setTop","auto");b(a.modal).iziModal("setBottom","auto")};this.fullScreen=function(e){if(e=="true"||(e=="mobile"&&b(window).width()<=800)){b(a.modal).iziModal("setTransitionIn","fadeInRight");b(a.modal).iziModal("setTransitionOut","fadeOutRight");b(a.modal).data("full-screen",true)}};this.load=function(f,e){var g={form:false};e=b.extend(g,e);b(document).trigger("modalist:request-start");if(e.form){b.ajax({url:b(e.form).attr("action"),type:"GET",data:b(e.form).serialize(),success:function(h){b(document).trigger("modalist:request-end");a.data(h)}})}else{b.get(f,function(h){b(document).trigger("modalist:request-end");a.data(h)})}};this.data=function(e){b(document).trigger("modalist:before-render");b(a.modal).find(".iziModal-content").html(e);b(document).trigger("modal:render");b(a.modal).iziModal("open");if(b(a.modal).height()+60>b(window).height()){b(a.modal).iziModal("setTop",30);b(a.modal).iziModal("setBottom",30)}b(document).trigger("modalist:load")}}})(jQuery);
@@ -0,0 +1,27 @@
1
+ /**!
2
+ * @fileOverview modalist.js - A powerful AJAX modal plugin extending iziModal
3
+ * @version 1.0.0
4
+ * @license
5
+ * MIT License
6
+ *
7
+ * Copyright (c) 2017 Jonas Hübotter
8
+ *
9
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
10
+ * of this software and associated documentation files (the "Software"), to deal
11
+ * in the Software without restriction, including without limitation the rights
12
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
13
+ * copies of the Software, and to permit persons to whom the Software is
14
+ * furnished to do so, subject to the following conditions:
15
+ *
16
+ * The above copyright notice and this permission notice shall be included in all
17
+ * copies or substantial portions of the Software.
18
+ *
19
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
24
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
25
+ * SOFTWARE.
26
+ */
27
+ #modalist.iziModal{box-shadow:0 0.0625em 0.3125em 0 rgba(101,119,134,0.05);border:.0625rem solid #DCE2E7;border-radius:.3125rem !important;max-width:90% !important;width:37.5rem;transition:margin-top .25s ease-out !important}#modalist.iziModal::after{content:none}#modalist.iziModal[data-full-screen="true"]{max-width:100% !important;width:100%;border-radius:0 !important;border:none;height:100vh !important}#modalist.iziModal[data-full-screen="true"].fadeInRight{animation:modalist-fadeInRight .35s ease-out !important}#modalist.iziModal[data-full-screen="true"].fadeOutRight{animation:modalist-fadeOutRight .35s ease-out !important}#modalist.iziModal ::-webkit-scrollbar{width:.3125rem}#modalist.iziModal ::-webkit-scrollbar-track{background:transparent}#modalist.iziModal ::-webkit-scrollbar-thumb{border-radius:.15625rem;background:#DCE2E7}#modalist.iziModal ::-webkit-scrollbar-thumb:hover{background:#bec7cf}#modalist.iziModal>.iziModal-wrap{border-radius:.3125rem;border-bottom:.0625rem solid #DCE2E7}#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header{background:#FCFCFC;border-radius:.3125rem .3125rem 0 0;display:flex;align-items:center;justify-content:space-between;padding:1.25rem;border-bottom:.0625rem solid #DCE2E7}#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header h4,#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header p{margin:0}#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header h4{line-height:1.58;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight:600;font-size:1.125rem;color:#14171A}@media (min-width: 800px){#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header h4{font-size:1.25rem}}#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header p{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:#3d4553;font-weight:normal;letter-spacing:-.003em;font-size:.875rem;line-height:1.75}@media (min-width: 800px){#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header p{font-size:1rem}}#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header .modalist--close{display:flex;align-items:center;justify-content:center;opacity:.85}#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header .modalist--close:hover,#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--header .modalist--close:focus{opacity:1}#modalist.iziModal>.iziModal-wrap>.iziModal-content>.modalist--content{background:white;border-radius:.3125rem;padding:1.25rem}.iziModal-overlay{background:rgba(231,236,240,0.87) !important}#modalist.iziModal,.iziModal-overlay{animation-duration:.5s !important}@keyframes modalist-fadeInRight{from{transform:translateX(100%)}to{transform:none}}@keyframes modalist-fadeOutRight{from{transform:none}to{transform:translateX(100%)}}
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: 1.0.0
4
+ version: 1.0.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Jonas Hübotter
@@ -89,9 +89,10 @@ files:
89
89
  - vendor/javascripts/iziModal.js
90
90
  - vendor/javascripts/iziModal.min.js
91
91
  - vendor/javascripts/modalist.js
92
+ - vendor/javascripts/modalist.min.js
92
93
  - vendor/stylesheets/iziModal.css
93
94
  - vendor/stylesheets/iziModal.min.css
94
- - vendor/stylesheets/modalist.sass
95
+ - vendor/stylesheets/modailst.min.css
95
96
  homepage: https://github.com/jonhue/modalist
96
97
  licenses:
97
98
  - MIT
@@ -1,86 +0,0 @@
1
- #modalist.iziModal
2
- box-shadow: 0 .0625em .3125em 0 rgba(color(text, base, true), .05)
3
- border: .0625rem solid #DCE2E7
4
- border-radius: .3125rem !important
5
- max-width: 90% !important
6
- width: 37.5rem
7
- // temporarily fixing height resizing
8
- transition: margin-top .25s ease-out !important
9
- &::after
10
- content: none
11
- &[data-full-screen="true"]
12
- max-width: 100% !important
13
- width: 100%
14
- border-radius: 0 !important
15
- border: none
16
- height: 100vh !important
17
- &.fadeInRight
18
- animation: modalist-fadeInRight .35s ease-out !important
19
- &.fadeOutRight
20
- animation: modalist-fadeOutRight .35s ease-out !important
21
- ::-webkit-scrollbar
22
- width: .3125rem
23
- ::-webkit-scrollbar-track
24
- background: transparent
25
- ::-webkit-scrollbar-thumb
26
- border-radius: .15625rem
27
- background: #DCE2E7
28
- ::-webkit-scrollbar-thumb:hover
29
- background: #bec7cf
30
- & > .iziModal-wrap
31
- border-radius: .3125rem
32
- border-bottom: .0625rem solid #DCE2E7
33
- & > .iziModal-content
34
- & > .modalist--header
35
- background: #FCFCFC
36
- border-radius: .3125rem .3125rem 0 0
37
- display: flex
38
- align-items: center
39
- justify-content: space-between
40
- padding: 1.25rem
41
- border-bottom: .0625rem solid #DCE2E7
42
- h4, p
43
- margin: 0
44
- h4
45
- line-height: 1.58
46
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
47
- font-weight: 600
48
- font-size: 1.125rem
49
- color: #14171A
50
- @media (min-width: 800px)
51
- font-size: 1.25rem
52
- p
53
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
54
- color: #3d4553
55
- font-weight: normal
56
- letter-spacing: -.003em
57
- font-size: .875rem
58
- line-height: 1.75
59
- @media (min-width: 800px)
60
- font-size: 1rem
61
- .modalist--close
62
- display: flex
63
- align-items: center
64
- justify-content: center
65
- opacity: .85
66
- &:hover, &:focus
67
- opacity: 1
68
- & > .modalist--content
69
- background: white
70
- border-radius: .3125rem
71
- padding: 1.25rem
72
- .iziModal-overlay
73
- background: transparentize(#E7ECF0, 0.13) !important
74
- #modalist.iziModal, .iziModal-overlay
75
- animation-duration: .5s !important
76
-
77
- @keyframes modalist-fadeInRight
78
- from
79
- transform: translateX(100%)
80
- to
81
- transform: none
82
- @keyframes modalist-fadeOutRight
83
- from
84
- transform: none
85
- to
86
- transform: translateX(100%)