modalist 1.0.0 → 1.0.1

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 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%)