lazy_modal 0.1.1 → 0.1.2
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/README.md +62 -9
- data/app/assets/javascripts/lazy_modal/application.coffee +5 -4
- data/lib/lazy_modal/version.rb +1 -1
- metadata +21 -21
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7cd07cd74daf198a1bf8fac0294a98c0f41adf2c
|
4
|
+
data.tar.gz: a7e1cb5a756aca1dd28b64caaa9fb280bad643bc
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7643e29797117b6a155d87f0ef0efd1639482a4e6ee81cfd1290f8e3e9b6ec222f9833c1921a8a3248b6142fb097b2abe12f68e892984f50542378686dafd86f
|
7
|
+
data.tar.gz: 71550ab5d2040ee440a5fd6e5048db300998b8c21f65d27f581b7ca4bad5b8f951bbecfb70b6656ee075c7ce231acad0383671bb9755400caf03951415cc875f
|
data/README.md
CHANGED
@@ -1,11 +1,66 @@
|
|
1
1
|
# lazy-modal
|
2
2
|
|
3
|
-
|
3
|
+
Show **bootstrap** modal with lazy load. sometimes we have too many modals in html body. and you know always some modal not need rendered. the best pratice to show modal i think is lazy load modal. **bootstrap** modal plugin provide remote away the load modal content when needed.
|
4
4
|
this gem provide way load **bootstrap** modal from remote server. so that we can load the modal when needed it. it's start!
|
5
5
|
|
6
|
+
|
7
|
+
##Example
|
8
|
+
|
9
|
+
###**before**
|
10
|
+
|
11
|
+
app/views/profile/charges.erb
|
12
|
+
|
13
|
+
``` ruby
|
14
|
+
#link_to
|
15
|
+
<%=link_to 'charge', '#charge_modal', class: 'btn btn-default', data: {toggle: :modal}%>
|
16
|
+
|
17
|
+
#modal-dom
|
18
|
+
<div class='modal fade' id='charge_modal'>
|
19
|
+
modal content ...
|
20
|
+
</div>
|
21
|
+
|
22
|
+
#modal-dom2
|
23
|
+
<div class='modal fade' id='other_modal1'>
|
24
|
+
modal content ...
|
25
|
+
</div>
|
26
|
+
|
27
|
+
#modal-dom3
|
28
|
+
<div class='modal fade' id='other_modal3'>
|
29
|
+
modal content ...
|
30
|
+
</div>
|
31
|
+
|
32
|
+
```
|
33
|
+
So you must render **modal-dom, modal-dom2, modal-dom3** with **link_to** in same place.
|
34
|
+
sometimes we have mulitple modals and even some modal have much childrens dom. also maybe some modals no need at the same time like:(**modal-dom2, modal-dom3**).
|
35
|
+
|
36
|
+
Now you can use **lazy_modal** lazy load modal when we need it!
|
37
|
+
|
38
|
+
###**after**
|
39
|
+
|
40
|
+
app/views/profile/charges.erb
|
41
|
+
|
42
|
+
```ruby
|
43
|
+
#link_to
|
44
|
+
<%=link_to 'charge', '#charge_modal', class: 'btn btn-default', data: {lazy_modal: true, dir: 'profile'}%>
|
45
|
+
|
46
|
+
```
|
47
|
+
|
48
|
+
app/views/profile/charge_modal.erb
|
49
|
+
|
50
|
+
```ruby
|
51
|
+
#modal-dom
|
52
|
+
<div class='modal fade' id='charge_modal'>
|
53
|
+
modal content ...
|
54
|
+
</div>
|
55
|
+
```
|
56
|
+
|
57
|
+
You can found out difference? yes we split **link_to** and **modal-dom** to different file. So that we can show modal when we need it.
|
58
|
+
|
59
|
+
It's us use **lazy_modal**
|
60
|
+
|
6
61
|
## Usage
|
7
62
|
|
8
|
-
|
63
|
+
Use **lazy-modal** is simplest! follow this steps:
|
9
64
|
|
10
65
|
Add this line to your rails application's Gemfile:
|
11
66
|
|
@@ -25,9 +80,7 @@ Auto init lazy_modal required file
|
|
25
80
|
$ rails generate lazy_modal:install
|
26
81
|
```
|
27
82
|
|
28
|
-
That's all!
|
29
|
-
|
30
|
-
Now test if `lazy-modal` installed?
|
83
|
+
That's all! now test if `lazy-modal` installed?
|
31
84
|
|
32
85
|
Start server
|
33
86
|
|
@@ -35,7 +88,7 @@ Start server
|
|
35
88
|
$ rails s
|
36
89
|
```
|
37
90
|
|
38
|
-
open below url in any browse [http://localhost:3000/lazy_modals/demo](http://localhost:3000/lazy_modals/demo),
|
91
|
+
open below url in any browse [http://localhost:3000/lazy_modals/demo](http://localhost:3000/lazy_modals/demo), you will see a break style modal demo
|
39
92
|
|
40
93
|
##Options
|
41
94
|
|
@@ -50,9 +103,9 @@ You must set `a` tag with **data-lazy-modal=true** and use **modal_options** to
|
|
50
103
|
ModalOptions | Type | Remark
|
51
104
|
------------- | ------------- | -----------
|
52
105
|
id/target/href | string | **required**, modal id like: `#charge_modal`
|
53
|
-
dir | string | **optional**,
|
54
|
-
title | string | **optional**,before load remote modal,
|
55
|
-
size | string | **optional**,before load remote modal,
|
106
|
+
dir | string | **optional**,set your modal view dir name like: `users` mean's find modal in `app/views/users/modal_id`
|
107
|
+
title | string | **optional**,before load remote modal, you will see simple load modal with placeholder, so the options set the modal title
|
108
|
+
size | string | **optional**,before load remote modal, you will see simple load modal with placeholder, so the options set the modal-content with custom class like: `modal-sm|modal-lg`
|
56
109
|
|
57
110
|
|
58
111
|
|
@@ -3,14 +3,16 @@
|
|
3
3
|
|
4
4
|
window.LM ||= {}
|
5
5
|
|
6
|
+
LM.MODAL_CONTENT_LOADED = 'lm.modal.content.loaded'
|
7
|
+
|
6
8
|
LM.loadRemoteModalByID = (modalID, modalOptions) ->
|
7
9
|
new LazyModalModal(modalID, modalOptions).show()
|
8
10
|
|
9
11
|
LM.triggerLoadRemoteModal = (event) ->
|
10
12
|
event.preventDefault()
|
11
13
|
$target = $(event.currentTarget)
|
12
|
-
modalOptions = $target.data('modal-options')
|
13
|
-
modalID =
|
14
|
+
modalOptions = $target.data('modal-options') || {}
|
15
|
+
modalID = $target.attr('href') || modalOptions.target || modalOptions.id
|
14
16
|
LM.loadRemoteModalByID modalID, modalOptions
|
15
17
|
|
16
18
|
class LazyModalModal
|
@@ -60,7 +62,6 @@ class LazyModalModal
|
|
60
62
|
@modal.on 'shown.bs.modal', =>
|
61
63
|
return if $("##{@modalID}").length
|
62
64
|
data = {modal_dir: @modalOptions?.dir}
|
63
|
-
console.log @modalID, @modalOptions
|
64
65
|
$.get("/lazy_modals/#{@modalID}", data)
|
65
66
|
.done (response) => @_loadRemoteModalSuccessed response
|
66
67
|
.fail (response, xhr, status) =>
|
@@ -70,7 +71,7 @@ class LazyModalModal
|
|
70
71
|
@modal?.modal 'hide'
|
71
72
|
@modal = $(response)
|
72
73
|
$('body').append @modal
|
73
|
-
@modal.trigger
|
74
|
+
@modal.trigger LM.MODAL_CONTENT_LOADED, @modalOptions
|
74
75
|
@show()
|
75
76
|
|
76
77
|
$(document).on 'click', '[data-lazy-modal="true"]', LM.triggerLoadRemoteModal
|
data/lib/lazy_modal/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: lazy_modal
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- MixBo
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-09-
|
11
|
+
date: 2017-09-19 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -16,71 +16,71 @@ dependencies:
|
|
16
16
|
requirements:
|
17
17
|
- - "~>"
|
18
18
|
- !ruby/object:Gem::Version
|
19
|
-
version: 5
|
19
|
+
version: '5'
|
20
20
|
type: :runtime
|
21
21
|
prerelease: false
|
22
22
|
version_requirements: !ruby/object:Gem::Requirement
|
23
23
|
requirements:
|
24
24
|
- - "~>"
|
25
25
|
- !ruby/object:Gem::Version
|
26
|
-
version: 5
|
26
|
+
version: '5'
|
27
27
|
- !ruby/object:Gem::Dependency
|
28
28
|
name: jquery-rails
|
29
29
|
requirement: !ruby/object:Gem::Requirement
|
30
30
|
requirements:
|
31
|
-
- -
|
31
|
+
- - ">="
|
32
32
|
- !ruby/object:Gem::Version
|
33
|
-
version:
|
33
|
+
version: '0'
|
34
34
|
type: :runtime
|
35
35
|
prerelease: false
|
36
36
|
version_requirements: !ruby/object:Gem::Requirement
|
37
37
|
requirements:
|
38
|
-
- -
|
38
|
+
- - ">="
|
39
39
|
- !ruby/object:Gem::Version
|
40
|
-
version:
|
40
|
+
version: '0'
|
41
41
|
- !ruby/object:Gem::Dependency
|
42
42
|
name: coffee-rails
|
43
43
|
requirement: !ruby/object:Gem::Requirement
|
44
44
|
requirements:
|
45
|
-
- -
|
45
|
+
- - ">="
|
46
46
|
- !ruby/object:Gem::Version
|
47
|
-
version:
|
47
|
+
version: '0'
|
48
48
|
type: :runtime
|
49
49
|
prerelease: false
|
50
50
|
version_requirements: !ruby/object:Gem::Requirement
|
51
51
|
requirements:
|
52
|
-
- -
|
52
|
+
- - ">="
|
53
53
|
- !ruby/object:Gem::Version
|
54
|
-
version:
|
54
|
+
version: '0'
|
55
55
|
- !ruby/object:Gem::Dependency
|
56
56
|
name: bootstrap-sass
|
57
57
|
requirement: !ruby/object:Gem::Requirement
|
58
58
|
requirements:
|
59
|
-
- -
|
59
|
+
- - "~>"
|
60
60
|
- !ruby/object:Gem::Version
|
61
|
-
version: 3
|
61
|
+
version: '3'
|
62
62
|
type: :runtime
|
63
63
|
prerelease: false
|
64
64
|
version_requirements: !ruby/object:Gem::Requirement
|
65
65
|
requirements:
|
66
|
-
- -
|
66
|
+
- - "~>"
|
67
67
|
- !ruby/object:Gem::Version
|
68
|
-
version: 3
|
68
|
+
version: '3'
|
69
69
|
- !ruby/object:Gem::Dependency
|
70
70
|
name: sass-rails
|
71
71
|
requirement: !ruby/object:Gem::Requirement
|
72
72
|
requirements:
|
73
|
-
- - "
|
73
|
+
- - ">="
|
74
74
|
- !ruby/object:Gem::Version
|
75
|
-
version: '
|
75
|
+
version: '0'
|
76
76
|
type: :runtime
|
77
77
|
prerelease: false
|
78
78
|
version_requirements: !ruby/object:Gem::Requirement
|
79
79
|
requirements:
|
80
|
-
- - "
|
80
|
+
- - ">="
|
81
81
|
- !ruby/object:Gem::Version
|
82
|
-
version: '
|
83
|
-
description: lazy load bootstrap modal when
|
82
|
+
version: '0'
|
83
|
+
description: lazy load bootstrap modal when needed!
|
84
84
|
email:
|
85
85
|
- lb563@foxmail.com
|
86
86
|
executables: []
|