beyond-rails 0.0.184 → 0.0.189
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/src/js/components/Modal.js +63 -12
- data/src/js/jquery/bindModalFn.js +57 -6
- data/src/sass/_beyond.scss +1 -0
- data/src/sass/abstracts/_variables.scss +5 -0
- data/src/sass/components/_breadcrumb.scss +3 -0
- data/src/sass/components/_mega-menu.scss +57 -0
- data/src/sass/components/_modal.scss +12 -1
- data/src/sass/components/_nav.scss +1 -0
- data/src/sass/components/_tooltip.scss +10 -0
- data/src/sass/layout/_flex-util.scss +3 -0
- metadata +26 -14
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d267ba7a547c15723330eee12769f3902a397c29827ca1f86ca869ce532e0f95
|
|
4
|
+
data.tar.gz: 9591c982bac2e9f92c4e6615f7220fe30b4c0801a3cee29c21529f45aacaa0e3
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 28c9d93b2579b5dfc806702ecacb468aecf10684a00068afd4e44552da0fecdda0b195d0b3d4fe08f877122df51febf9d0fe9730735b96661c812b1bfbca96aa
|
|
7
|
+
data.tar.gz: 19b3c86011070fc942892147d0b57402798c1862fea976f58f01e9be431d82eca5b067739ae7078229007ab79aad8aacf0bd3a4e0889b8a74c1fb3da053b1620
|
data/src/js/components/Modal.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import supportDom from '../utils/supportDom'
|
|
2
2
|
import { noop } from '../utils'
|
|
3
3
|
|
|
4
|
+
let globalModalId = 0
|
|
5
|
+
|
|
4
6
|
@supportDom
|
|
5
7
|
export default class Modal {
|
|
6
8
|
|
|
@@ -15,19 +17,41 @@ export default class Modal {
|
|
|
15
17
|
}
|
|
16
18
|
|
|
17
19
|
init() {
|
|
18
|
-
this.
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
20
|
+
this.bindEvents()
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
bindEvents() {
|
|
24
|
+
this.setModalDom()
|
|
24
25
|
this.closeBtn = this.modal.querySelector('[data-close]')
|
|
25
26
|
this.cancelBtn = this.modal.querySelector('[data-cancel]')
|
|
26
27
|
this.confirmBtn = this.modal.querySelector('[data-confirm]')
|
|
27
28
|
this.addEvents()
|
|
28
29
|
}
|
|
29
30
|
|
|
30
|
-
|
|
31
|
+
setModalDom() {
|
|
32
|
+
const { modalOpener, modal } = this.dom.dataset
|
|
33
|
+
|
|
34
|
+
if (modalOpener) {
|
|
35
|
+
this.modalId = this.dom.dataset.modalOpener
|
|
36
|
+
const selector = `[data-modal="${this.modalId}"]`
|
|
37
|
+
this.modal = document.querySelector(selector)
|
|
38
|
+
return
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
if (modal) {
|
|
42
|
+
this.modalId = modal
|
|
43
|
+
}
|
|
44
|
+
else {
|
|
45
|
+
this.modalId = `modal-${++globalModalId}`
|
|
46
|
+
this.dom.dataset.modal = this.modalId
|
|
47
|
+
}
|
|
48
|
+
this.modal = this.dom
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
show(html) {
|
|
52
|
+
if (html) {
|
|
53
|
+
this.replace(html)
|
|
54
|
+
}
|
|
31
55
|
this.isVisible = true
|
|
32
56
|
this.modal.style.display = 'block'
|
|
33
57
|
setTimeout(() => {
|
|
@@ -43,20 +67,47 @@ export default class Modal {
|
|
|
43
67
|
}, 300)
|
|
44
68
|
}
|
|
45
69
|
|
|
70
|
+
replace(html) {
|
|
71
|
+
this.destroy()
|
|
72
|
+
this.modalId = null
|
|
73
|
+
|
|
74
|
+
// replace with new dom
|
|
75
|
+
const div = document.createElement('div')
|
|
76
|
+
div.innerHTML = html.trim()
|
|
77
|
+
const dom = div.firstChild
|
|
78
|
+
this.dom.parentNode.replaceChild(dom, this.dom)
|
|
79
|
+
|
|
80
|
+
this.dom = dom
|
|
81
|
+
this.dom._modal = this
|
|
82
|
+
this.init()
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
visible() {
|
|
86
|
+
return this.isVisible
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
addEventIfDomExists(dom, event, cb) {
|
|
90
|
+
if (dom) {
|
|
91
|
+
this.addEvent(dom, event, cb)
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
46
95
|
addEvents() {
|
|
47
|
-
|
|
96
|
+
if (this.dom.dataset.modalOpener) {
|
|
97
|
+
this.addEventIfDomExists(this.dom, 'click', () => this.show())
|
|
98
|
+
}
|
|
48
99
|
|
|
49
|
-
this.
|
|
100
|
+
this.addEventIfDomExists(this.closeBtn, 'click', () => {
|
|
50
101
|
this.hide()
|
|
51
102
|
this.options.cancel('close')
|
|
52
103
|
})
|
|
53
104
|
|
|
54
|
-
this.
|
|
105
|
+
this.addEventIfDomExists(this.cancelBtn, 'click', () => {
|
|
55
106
|
this.hide()
|
|
56
107
|
this.options.cancel('cancel')
|
|
57
108
|
})
|
|
58
109
|
|
|
59
|
-
this.
|
|
110
|
+
this.addEventIfDomExists(this.modal, 'click', event => {
|
|
60
111
|
// is backdrop
|
|
61
112
|
if (event.target.dataset.modal === this.modalId) {
|
|
62
113
|
this.hide()
|
|
@@ -64,7 +115,7 @@ export default class Modal {
|
|
|
64
115
|
}
|
|
65
116
|
})
|
|
66
117
|
|
|
67
|
-
this.
|
|
118
|
+
this.addEventIfDomExists(this.confirmBtn, 'click', () => {
|
|
68
119
|
if (typeof this.options.confirm === 'function') {
|
|
69
120
|
this.options.confirm()
|
|
70
121
|
}
|
|
@@ -1,14 +1,65 @@
|
|
|
1
1
|
export default function bindModalFn(beyond, $) {
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
$.fn.modal = function(settings) {
|
|
3
|
+
$.fn.modal = function(settings, html) {
|
|
6
4
|
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
if (typeof settings === 'string') {
|
|
6
|
+
const method = settings
|
|
7
|
+
initModals(this, $.fn.modal.defaults)
|
|
8
|
+
if (method === 'open?') {
|
|
9
|
+
return this.map((i, dom) => dom._modal.visible())
|
|
10
|
+
}
|
|
11
|
+
this.each((i, dom) => dom._modal[method](html))
|
|
12
|
+
}
|
|
13
|
+
else {
|
|
14
|
+
const options = $.extend({}, $.fn.modal.defaults, settings)
|
|
15
|
+
initModals(this, options)
|
|
16
|
+
}
|
|
9
17
|
|
|
10
|
-
this.destroy = () =>
|
|
18
|
+
this.destroy = () => this.each((i, dom) => dom._modal && dom._modal.destroy())
|
|
11
19
|
|
|
12
20
|
return this
|
|
13
21
|
}
|
|
22
|
+
|
|
23
|
+
$.uniqModal = getUniqModalSelector
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function initModals(self, options) {
|
|
27
|
+
const { Modal } = beyond
|
|
28
|
+
self.each((i, dom) => {
|
|
29
|
+
if (! dom._modal) {
|
|
30
|
+
dom._modal = new Modal(dom, options)
|
|
31
|
+
}
|
|
32
|
+
})
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function getUniqModalSelector() {
|
|
36
|
+
const id = 'beyond-uniq-modal'
|
|
37
|
+
const dom = document.getElementById(id)
|
|
38
|
+
if (dom) {
|
|
39
|
+
return $(`#${id}`)
|
|
40
|
+
}
|
|
41
|
+
const div = document.createElement('div')
|
|
42
|
+
div.id = id
|
|
43
|
+
div.className = 'modal'
|
|
44
|
+
div.innerHTML = `
|
|
45
|
+
<div class="modal-dialog">
|
|
46
|
+
<div class="modal-content">
|
|
47
|
+
<div class="modal-header">
|
|
48
|
+
<h5 class="modal-title">視窗標題</h5>
|
|
49
|
+
<button type="button" class="btn-close" data-close aria-label="Close">
|
|
50
|
+
<i class="icon icon-cross"></i>
|
|
51
|
+
</button>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="modal-body bg-content">
|
|
54
|
+
視窗內文
|
|
55
|
+
</div>
|
|
56
|
+
<div class="modal-footer">
|
|
57
|
+
<button data-cancel class="btn btn-outline">取消</button>
|
|
58
|
+
<button data-confirm class="btn btn-primary">確認</button>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
`
|
|
63
|
+
document.body.appendChild(div)
|
|
64
|
+
return $(div)
|
|
14
65
|
}
|
data/src/sass/_beyond.scss
CHANGED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
$mega-menu-text-color: #0a2540;
|
|
2
|
+
$mega-menu-text-color-ex: #8A8D90;
|
|
3
|
+
|
|
4
|
+
@mixin mega-menu-text() {
|
|
5
|
+
transition: .3s color;
|
|
6
|
+
color: $mega-menu-text-color;
|
|
7
|
+
&:hover {
|
|
8
|
+
color: $mega-menu-text-color-ex;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.mega-menu {
|
|
13
|
+
font-size: .9375rem;
|
|
14
|
+
}
|
|
15
|
+
.mega-menu-divider {
|
|
16
|
+
border-bottom: 1px solid #ebebeb;
|
|
17
|
+
}
|
|
18
|
+
.mega-menu-col {
|
|
19
|
+
padding: .7rem 1.5rem;
|
|
20
|
+
flex-grow: 1;
|
|
21
|
+
min-width: 180px;
|
|
22
|
+
display: flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
@include mega-menu-text;
|
|
25
|
+
}
|
|
26
|
+
.mega-menu-item {
|
|
27
|
+
transition: .3s background-color;
|
|
28
|
+
display: block;
|
|
29
|
+
padding: .7rem 1.5rem;
|
|
30
|
+
@include mega-menu-text;
|
|
31
|
+
}
|
|
32
|
+
.mega-menu-icon-box {
|
|
33
|
+
display: table;
|
|
34
|
+
width: 100%;
|
|
35
|
+
> div {
|
|
36
|
+
display: table-row;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
.mega-menu-icon-box-item {
|
|
40
|
+
cursor: pointer;
|
|
41
|
+
transition: .3s all;
|
|
42
|
+
display: table-cell;
|
|
43
|
+
padding: 1rem 1.5rem;
|
|
44
|
+
text-align: center;
|
|
45
|
+
@include mega-menu-text;
|
|
46
|
+
&:hover {
|
|
47
|
+
i {
|
|
48
|
+
color: $mega-menu-text-color;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
i {
|
|
52
|
+
transition: .3s color;
|
|
53
|
+
color: #88add2;
|
|
54
|
+
display: block;
|
|
55
|
+
margin-bottom: .4rem;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
@@ -61,7 +61,6 @@
|
|
|
61
61
|
text-align: right;
|
|
62
62
|
.btn {
|
|
63
63
|
padding: 6px 12px;
|
|
64
|
-
min-width: 62px;
|
|
65
64
|
font-size: 14px;
|
|
66
65
|
font-weight: 400;
|
|
67
66
|
}
|
|
@@ -70,3 +69,15 @@
|
|
|
70
69
|
}
|
|
71
70
|
}
|
|
72
71
|
}
|
|
72
|
+
|
|
73
|
+
.modal.static {
|
|
74
|
+
overflow-y: initial;
|
|
75
|
+
background-color: transparent;
|
|
76
|
+
opacity: 1;
|
|
77
|
+
position: static;
|
|
78
|
+
display: block;
|
|
79
|
+
.modal-dialog {
|
|
80
|
+
transform: scale(1);
|
|
81
|
+
margin: 0 auto;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
@@ -10,10 +10,12 @@
|
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
.tooltip.tooltip-popover {
|
|
13
|
+
$border-color: #e8e8e8;
|
|
13
14
|
background-color: #fff;
|
|
14
15
|
color: #3c4257;
|
|
15
16
|
padding: 10px 13px;
|
|
16
17
|
box-shadow: 4px 4px 15px 1px rgba(68, 68, 72, .12);
|
|
18
|
+
border: 1px solid $border-color;
|
|
17
19
|
|
|
18
20
|
&:after {
|
|
19
21
|
content: ' ';
|
|
@@ -31,6 +33,8 @@
|
|
|
31
33
|
right: 0;
|
|
32
34
|
margin-left: auto;
|
|
33
35
|
margin-right: auto;
|
|
36
|
+
border-right: 1px solid $border-color;
|
|
37
|
+
border-bottom: 1px solid $border-color;
|
|
34
38
|
}
|
|
35
39
|
&.bottom:after {
|
|
36
40
|
top: -6px;
|
|
@@ -38,6 +42,8 @@
|
|
|
38
42
|
right: 0;
|
|
39
43
|
margin-left: auto;
|
|
40
44
|
margin-right: auto;
|
|
45
|
+
border-left: 1px solid $border-color;
|
|
46
|
+
border-top: 1px solid $border-color;
|
|
41
47
|
}
|
|
42
48
|
&.left:after {
|
|
43
49
|
right: -6px;
|
|
@@ -45,6 +51,8 @@
|
|
|
45
51
|
bottom: 0;
|
|
46
52
|
margin-top: auto;
|
|
47
53
|
margin-bottom: auto;
|
|
54
|
+
border-right: 1px solid $border-color;
|
|
55
|
+
border-top: 1px solid $border-color;
|
|
48
56
|
}
|
|
49
57
|
&.right:after {
|
|
50
58
|
left: -6px;
|
|
@@ -52,5 +60,7 @@
|
|
|
52
60
|
bottom: 0;
|
|
53
61
|
margin-top: auto;
|
|
54
62
|
margin-bottom: auto;
|
|
63
|
+
border-left: 1px solid $border-color;
|
|
64
|
+
border-bottom: 1px solid $border-color;
|
|
55
65
|
}
|
|
56
66
|
}
|
metadata
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: beyond-rails
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.189
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- kmsheng
|
|
8
8
|
- Eddie Li
|
|
9
|
-
autorequire:
|
|
9
|
+
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2020-
|
|
12
|
+
date: 2020-09-01 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: sassc
|
|
@@ -18,6 +18,9 @@ dependencies:
|
|
|
18
18
|
- - ">="
|
|
19
19
|
- !ruby/object:Gem::Version
|
|
20
20
|
version: 2.0.0
|
|
21
|
+
- - "~>"
|
|
22
|
+
- !ruby/object:Gem::Version
|
|
23
|
+
version: '2.0'
|
|
21
24
|
type: :runtime
|
|
22
25
|
prerelease: false
|
|
23
26
|
version_requirements: !ruby/object:Gem::Requirement
|
|
@@ -25,49 +28,58 @@ dependencies:
|
|
|
25
28
|
- - ">="
|
|
26
29
|
- !ruby/object:Gem::Version
|
|
27
30
|
version: 2.0.0
|
|
31
|
+
- - "~>"
|
|
32
|
+
- !ruby/object:Gem::Version
|
|
33
|
+
version: '2.0'
|
|
28
34
|
- !ruby/object:Gem::Dependency
|
|
29
35
|
name: autoprefixer-rails
|
|
30
36
|
requirement: !ruby/object:Gem::Requirement
|
|
31
37
|
requirements:
|
|
38
|
+
- - "~>"
|
|
39
|
+
- !ruby/object:Gem::Version
|
|
40
|
+
version: '9.7'
|
|
32
41
|
- - ">="
|
|
33
42
|
- !ruby/object:Gem::Version
|
|
34
|
-
version:
|
|
43
|
+
version: 9.7.6
|
|
35
44
|
type: :runtime
|
|
36
45
|
prerelease: false
|
|
37
46
|
version_requirements: !ruby/object:Gem::Requirement
|
|
38
47
|
requirements:
|
|
48
|
+
- - "~>"
|
|
49
|
+
- !ruby/object:Gem::Version
|
|
50
|
+
version: '9.7'
|
|
39
51
|
- - ">="
|
|
40
52
|
- !ruby/object:Gem::Version
|
|
41
|
-
version:
|
|
53
|
+
version: 9.7.6
|
|
42
54
|
- !ruby/object:Gem::Dependency
|
|
43
55
|
name: actionpack
|
|
44
56
|
requirement: !ruby/object:Gem::Requirement
|
|
45
57
|
requirements:
|
|
46
|
-
- - "
|
|
58
|
+
- - "~>"
|
|
47
59
|
- !ruby/object:Gem::Version
|
|
48
60
|
version: '5.0'
|
|
49
61
|
type: :runtime
|
|
50
62
|
prerelease: false
|
|
51
63
|
version_requirements: !ruby/object:Gem::Requirement
|
|
52
64
|
requirements:
|
|
53
|
-
- - "
|
|
65
|
+
- - "~>"
|
|
54
66
|
- !ruby/object:Gem::Version
|
|
55
67
|
version: '5.0'
|
|
56
68
|
- !ruby/object:Gem::Dependency
|
|
57
69
|
name: activemodel
|
|
58
70
|
requirement: !ruby/object:Gem::Requirement
|
|
59
71
|
requirements:
|
|
60
|
-
- - "
|
|
72
|
+
- - "~>"
|
|
61
73
|
- !ruby/object:Gem::Version
|
|
62
74
|
version: '5.0'
|
|
63
75
|
type: :runtime
|
|
64
76
|
prerelease: false
|
|
65
77
|
version_requirements: !ruby/object:Gem::Requirement
|
|
66
78
|
requirements:
|
|
67
|
-
- - "
|
|
79
|
+
- - "~>"
|
|
68
80
|
- !ruby/object:Gem::Version
|
|
69
81
|
version: '5.0'
|
|
70
|
-
description:
|
|
82
|
+
description:
|
|
71
83
|
email: kmsh3ng@gmail.com
|
|
72
84
|
executables: []
|
|
73
85
|
extensions: []
|
|
@@ -191,6 +203,7 @@ files:
|
|
|
191
203
|
- src/sass/components/_icon.scss
|
|
192
204
|
- src/sass/components/_input.scss
|
|
193
205
|
- src/sass/components/_list.scss
|
|
206
|
+
- src/sass/components/_mega-menu.scss
|
|
194
207
|
- src/sass/components/_modal.scss
|
|
195
208
|
- src/sass/components/_nav.scss
|
|
196
209
|
- src/sass/components/_navbar.scss
|
|
@@ -225,7 +238,7 @@ homepage: https://superlanding.github.io/beyond/
|
|
|
225
238
|
licenses:
|
|
226
239
|
- MIT
|
|
227
240
|
metadata: {}
|
|
228
|
-
post_install_message:
|
|
241
|
+
post_install_message:
|
|
229
242
|
rdoc_options: []
|
|
230
243
|
require_paths:
|
|
231
244
|
- lib
|
|
@@ -240,9 +253,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
240
253
|
- !ruby/object:Gem::Version
|
|
241
254
|
version: '0'
|
|
242
255
|
requirements: []
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
signing_key:
|
|
256
|
+
rubygems_version: 3.0.6
|
|
257
|
+
signing_key:
|
|
246
258
|
specification_version: 4
|
|
247
259
|
summary: beyond is a collection of frontend components which aims for admin website.
|
|
248
260
|
test_files: []
|