lazy_modal 0.1.2 → 0.1.3
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
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 761ede6762db2ce4c45ba67b824d9e42b35c342a
|
4
|
+
data.tar.gz: fe33d8158a26acc5859bfa25838e91b70ec0ae62
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e22bf638afb91c073843b5ea06a7d04f95907589b82a0b783a3d32c33b97f8ab77f974279f72125a09477707594215816a60469d9f7340f728d58f10072c2c57
|
7
|
+
data.tar.gz: 94aff4f9609d041949d12a01c484ec4a50f6706042d068632c0eb4d4fc4c1677570366390c37ebeac381df54978a422401bc229ea43ca68526f2a1ede21e2bbf
|
data/README.md
CHANGED
@@ -1,16 +1,12 @@
|
|
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
|
-
this gem provide way load **bootstrap** modal from remote server. so that we can load the modal when needed it. it's start!
|
5
|
-
|
6
|
-
|
7
|
-
##Example
|
8
|
-
|
9
|
-
###**before**
|
4
|
+
this gem provide way load **bootstrap** modal from remote server. so that we can load the modal when needed it. it's start!
|
10
5
|
|
6
|
+
## Before
|
11
7
|
app/views/profile/charges.erb
|
12
8
|
|
13
|
-
```
|
9
|
+
``` html
|
14
10
|
#link_to
|
15
11
|
<%=link_to 'charge', '#charge_modal', class: 'btn btn-default', data: {toggle: :modal}%>
|
16
12
|
|
@@ -28,18 +24,17 @@ app/views/profile/charges.erb
|
|
28
24
|
<div class='modal fade' id='other_modal3'>
|
29
25
|
modal content ...
|
30
26
|
</div>
|
31
|
-
|
32
27
|
```
|
28
|
+
|
33
29
|
So you must render **modal-dom, modal-dom2, modal-dom3** with **link_to** in same place.
|
34
30
|
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
31
|
|
36
32
|
Now you can use **lazy_modal** lazy load modal when we need it!
|
37
33
|
|
38
|
-
|
39
|
-
|
34
|
+
## After
|
40
35
|
app/views/profile/charges.erb
|
41
36
|
|
42
|
-
```
|
37
|
+
```html
|
43
38
|
#link_to
|
44
39
|
<%=link_to 'charge', '#charge_modal', class: 'btn btn-default', data: {lazy_modal: true, dir: 'profile'}%>
|
45
40
|
|
@@ -47,7 +42,7 @@ app/views/profile/charges.erb
|
|
47
42
|
|
48
43
|
app/views/profile/charge_modal.erb
|
49
44
|
|
50
|
-
```
|
45
|
+
```html
|
51
46
|
#modal-dom
|
52
47
|
<div class='modal fade' id='charge_modal'>
|
53
48
|
modal content ...
|
@@ -59,7 +54,6 @@ You can found out difference? yes we split **link_to** and **modal-dom** to diff
|
|
59
54
|
It's us use **lazy_modal**
|
60
55
|
|
61
56
|
## Usage
|
62
|
-
|
63
57
|
Use **lazy-modal** is simplest! follow this steps:
|
64
58
|
|
65
59
|
Add this line to your rails application's Gemfile:
|
@@ -5,20 +5,29 @@ window.LM ||= {}
|
|
5
5
|
|
6
6
|
LM.MODAL_CONTENT_LOADED = 'lm.modal.content.loaded'
|
7
7
|
|
8
|
-
LM.loadRemoteModalByID = (modalID, modalOptions) ->
|
9
|
-
new LazyModalModal(modalID, modalOptions)
|
8
|
+
LM.loadRemoteModalByID = (modalID, modalOptions={}) ->
|
9
|
+
lazyModal = new LazyModalModal(modalID, modalOptions)
|
10
|
+
lazyModal.show()
|
11
|
+
lazyModal
|
10
12
|
|
11
13
|
LM.triggerLoadRemoteModal = (event) ->
|
12
14
|
event.preventDefault()
|
13
15
|
$target = $(event.currentTarget)
|
16
|
+
$target = $(event.currentTarget)
|
14
17
|
modalOptions = $target.data('modal-options') || {}
|
15
|
-
modalID = $target
|
18
|
+
modalID = _parseModalIDFromHref($target) || modalOptions.target || modalOptions.id
|
16
19
|
LM.loadRemoteModalByID modalID, modalOptions
|
17
20
|
|
21
|
+
_parseModalIDFromHref = ($target)->
|
22
|
+
href = $target.attr('href')
|
23
|
+
return href if href != 'javascript:void(0)' and href != '#' and href
|
24
|
+
return null
|
25
|
+
|
18
26
|
class LazyModalModal
|
19
27
|
constructor: (@originModalID, @modalOptions) ->
|
28
|
+
@modalOptions.reload ||= false #force load remote modal
|
20
29
|
@modalTitle = @modalOptions?.default_modal?.title || ''
|
21
|
-
alert('
|
30
|
+
alert('you must set modal ID in dom with data-target or attributes href') unless @originModalID
|
22
31
|
if @originModalID.indexOf('#') !=-1
|
23
32
|
@modalID = @originModalID?.split("#").pop()
|
24
33
|
else
|
@@ -39,6 +48,11 @@ class LazyModalModal
|
|
39
48
|
@_addModalEventListener()
|
40
49
|
|
41
50
|
_showModal: ->
|
51
|
+
@modal.on 'hidden.bs.modal', =>
|
52
|
+
if @modalOptions.reload
|
53
|
+
@modal.remove()
|
54
|
+
@modal = null
|
55
|
+
|
42
56
|
@modal?.modal 'show' unless @modal?.isShown
|
43
57
|
|
44
58
|
_createModalDom: ->
|
@@ -51,7 +65,7 @@ class LazyModalModal
|
|
51
65
|
<h4 class="modal-title">#{@modalTitle || ''}</h4>
|
52
66
|
</div>
|
53
67
|
<div class="modal-body clearfix">
|
54
|
-
<h5 class="text-center">loading
|
68
|
+
<h5 class="text-center">loading…</h5>
|
55
69
|
</div>
|
56
70
|
</div>
|
57
71
|
</div>
|
@@ -65,7 +79,7 @@ class LazyModalModal
|
|
65
79
|
$.get("/lazy_modals/#{@modalID}", data)
|
66
80
|
.done (response) => @_loadRemoteModalSuccessed response
|
67
81
|
.fail (response, xhr, status) =>
|
68
|
-
|
82
|
+
@modal.find('.modal-body').html response.responseText
|
69
83
|
|
70
84
|
_loadRemoteModalSuccessed: (response)->
|
71
85
|
@modal?.modal 'hide'
|
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.3
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- MixBo
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-
|
11
|
+
date: 2017-10-16 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|