effective_bootstrap 0.0.8 → 0.0.9
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/javascripts/effective_bootstrap/base.js.coffee +63 -37
- data/app/assets/stylesheets/effective_bootstrap/forms.scss +25 -7
- data/app/models/effective/form_builder.rb +5 -0
- data/app/models/effective/form_input.rb +1 -1
- data/app/models/effective/form_inputs/delete.rb +87 -0
- data/app/models/effective/form_inputs/form_group.rb +4 -15
- data/app/models/effective/form_inputs/submit.rb +8 -1
- data/lib/effective_bootstrap/version.rb +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 0b2267dfe1d4e1eff1fb5aac89a0d5d20d78c621
|
4
|
+
data.tar.gz: b89a7d646b1b77b61a5733d4e5b8cc8738cf1565
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 9377c256b2b8bc038b2a2d4cc5212e4e0cd788fbce62ecb5ac7f72fdcf7ea7d129890b3e4518a53c2ce48a61718c1fa6e391ce24b011bb9f269168626ce235a1
|
7
|
+
data.tar.gz: f781c96aecfd3666bb8885f32f832a9fc204a6d3d2e1f76ad3eaddae6e07d3d6bdcd4c4837e4b051381dbd36af4f3e3b86b7388930c562ae810158dd6c21008d
|
@@ -1,4 +1,5 @@
|
|
1
1
|
this.EffectiveBootstrap ||= new class
|
2
|
+
current_submit: '' # The $(.form-actions) that clicked
|
2
3
|
remote_form_payload: '' # A fresh form
|
3
4
|
remote_form_flash: '' # Array of Arrays
|
4
5
|
|
@@ -17,41 +18,36 @@ this.EffectiveBootstrap ||= new class
|
|
17
18
|
$element.addClass('initialized')
|
18
19
|
|
19
20
|
validate: (form) ->
|
20
|
-
$form = $(form)
|
21
|
-
|
22
|
-
@reset($form)
|
23
|
-
|
24
21
|
valid = form.checkValidity()
|
22
|
+
$form = $(form)
|
25
23
|
|
26
|
-
|
27
|
-
|
28
|
-
setTimeout((-> EffectiveBootstrap.disable($form)), 0)
|
29
|
-
else
|
30
|
-
$form.addClass('was-validated').addClass('form-is-invalid')
|
31
|
-
|
32
|
-
$('.effective-radios:not(.no-feedback),.effective-checks:not(.no-feedback)').each -> # These controls need a little bit of help with client side validations
|
33
|
-
$(@).addClass(if $(@).find('input:invalid').length > 0 then 'is-invalid' else 'is-valid')
|
34
|
-
|
35
|
-
@flash($form, 'danger')
|
36
|
-
|
37
|
-
if valid and $form.data('remote')
|
38
|
-
$form.one 'ajax:success', (event) -> EffectiveBootstrap.loadRemoteForm($(event.target))
|
39
|
-
|
40
|
-
$form.one 'ajax:error', (event, _, status, message) ->
|
41
|
-
EffectiveBootstrap.reset($(event.target))
|
42
|
-
EffectiveBootstrap.flash($(event.target), 'danger', "Ajax #{status}: #{message}")
|
24
|
+
@clearFlash()
|
25
|
+
@reset($form) if $form.hasClass('was-validated')
|
43
26
|
|
27
|
+
if valid then @submitting($form) else @invalidate($form)
|
44
28
|
valid
|
45
29
|
|
46
30
|
submitting: ($form) ->
|
47
31
|
$form.addClass('form-is-valid').removeClass('form-is-invalid')
|
48
|
-
@
|
32
|
+
@spin()
|
33
|
+
setTimeout((-> EffectiveBootstrap.disable($form)), 0)
|
34
|
+
|
35
|
+
invalidate: ($form) ->
|
36
|
+
$form.addClass('was-validated').addClass('form-is-invalid')
|
37
|
+
$form.find('.form-current-submit').removeClass('form-current-submit')
|
38
|
+
|
39
|
+
# These controls need a little bit of help with client side validations
|
40
|
+
$form.find('.effective-radios:not(.no-feedback),.effective-checks:not(.no-feedback)').each ->
|
41
|
+
$(@).addClass(if $(@).find('input:invalid').length > 0 then 'is-invalid' else 'is-valid')
|
42
|
+
|
43
|
+
@flash($form, 'danger')
|
49
44
|
|
50
45
|
disable: ($form) ->
|
51
46
|
$form.find('[type=submit]').prop('disabled', true)
|
52
47
|
|
53
48
|
reset: ($form) ->
|
54
49
|
$form.removeClass('was-validated').removeClass('form-is-invalid').removeClass('form-is-valid')
|
50
|
+
$form.find('.form-current-submit').removeClass('form-current-submit')
|
55
51
|
|
56
52
|
# Clear any server side validation on individual inputs
|
57
53
|
$form.find('.alert.is-invalid').remove()
|
@@ -60,29 +56,48 @@ this.EffectiveBootstrap ||= new class
|
|
60
56
|
|
61
57
|
$form.find('[type=submit]').removeAttr('disabled')
|
62
58
|
|
63
|
-
|
64
|
-
$actions = $form.children('.form-actions')
|
59
|
+
spin: -> @current_submit.addClass('form-current-submit') if @current_submit.length > 0
|
65
60
|
|
66
|
-
|
67
|
-
|
68
|
-
else
|
69
|
-
$actions.find('.eb-icon-check').show().delay(1000).fadeOut('slow')
|
61
|
+
beforeAjax: ($form) ->
|
62
|
+
return unless $form.data('remote')
|
70
63
|
|
71
|
-
|
72
|
-
|
64
|
+
$form.one 'ajax:success', (event, thing, another) ->
|
65
|
+
EffectiveBootstrap.loadFromAjax($(event.target), $(event.target).data('method') == 'delete')
|
66
|
+
|
67
|
+
$form.one 'ajax:error', (event, _, status, message) ->
|
68
|
+
EffectiveBootstrap.reset($(event.target))
|
69
|
+
EffectiveBootstrap.flash($(event.target), 'danger', "Ajax #{status}: #{message}")
|
73
70
|
|
74
71
|
# Loads remote for payload that was placed here by effective_resources create.js.erb and update.js.erb
|
75
|
-
|
76
|
-
|
72
|
+
loadFromAjax: ($target, was_delete) ->
|
73
|
+
$target = $target.closest('form') unless $target.is('form')
|
74
|
+
|
75
|
+
if @remote_form_payload.length > 0
|
77
76
|
$form = @remote_form_payload.find("form[data-remote-index='#{$target.data('remote-index')}']")
|
78
77
|
$form = @remote_form_payload.find('form') if $form.length == 0
|
79
78
|
$target.replaceWith($form)
|
80
79
|
|
81
|
-
|
82
|
-
|
83
|
-
|
80
|
+
# We update the current submit to point to the new one.
|
81
|
+
unless was_delete
|
82
|
+
if @current_submit.length > 0
|
83
|
+
@current_submit = $form.find("##{@current_submit.attr('id')}.form-actions")
|
84
|
+
|
85
|
+
if @remote_form_flash.length > 0 && was_delete == false
|
86
|
+
for flash in @remote_form_flash
|
87
|
+
@flash($form, flash[0], flash[1], true)
|
88
|
+
|
89
|
+
@remote_form_payload = ''; @remote_form_flash = ''; @current_submit = '';
|
90
|
+
|
91
|
+
flash: ($form, status, message, skip_success = false) ->
|
92
|
+
if status == 'danger' || status == 'error'
|
93
|
+
@current_submit.find('.eb-icon-x').show().delay(1000).fadeOut('slow')
|
94
|
+
else
|
95
|
+
@current_submit.find('.eb-icon-check').show().delay(1000).fadeOut('slow')
|
84
96
|
|
85
|
-
|
97
|
+
if message? && !(status == 'success' && skip_success)
|
98
|
+
@current_submit.prepend(@buildFlash(status, message))
|
99
|
+
|
100
|
+
clearFlash: -> @current_submit.find('.alert').remove() if @current_submit.length > 0
|
86
101
|
|
87
102
|
buildFlash: (status, message) ->
|
88
103
|
$("
|
@@ -94,9 +109,20 @@ this.EffectiveBootstrap ||= new class
|
|
94
109
|
</div>
|
95
110
|
")
|
96
111
|
|
112
|
+
setCurrentSubmit: ($submit) -> @current_submit = $submit if $submit.is('.form-actions')
|
113
|
+
|
97
114
|
$ -> EffectiveBootstrap.initialize()
|
98
115
|
$(document).on 'turbolinks:load', -> EffectiveBootstrap.initialize()
|
99
116
|
$(document).on 'cocoon:after-insert', -> EffectiveBootstrap.initialize()
|
100
117
|
$(document).on 'effective-bootstrap:initialize', (event) -> EffectiveBootstrap.initialize(event.currentTarget)
|
101
118
|
|
102
|
-
|
119
|
+
# Sets EffectiveBootstrap. current_click.
|
120
|
+
# This displays the spinner here, and directs any flash messages before and after loadRemoteForm
|
121
|
+
$(document).on 'click', '.form-actions a[data-remote],.form-actions button[type=submit]', (event) ->
|
122
|
+
EffectiveBootstrap.setCurrentSubmit($(@).parent())
|
123
|
+
EffectiveBootstrap.spin()
|
124
|
+
|
125
|
+
# This actually attached the handlers to a remote ajax form when it or an action inside it triggers a remote thing.
|
126
|
+
$(document).on 'ajax:beforeSend', 'form[data-remote]', (event) ->
|
127
|
+
EffectiveBootstrap.beforeAjax($(@))
|
128
|
+
this.checkValidity()
|
@@ -6,32 +6,50 @@
|
|
6
6
|
|
7
7
|
.alert {
|
8
8
|
position: absolute;
|
9
|
-
top:
|
9
|
+
top: 4.0em;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
|
13
|
+
.form-actions-inline.justify-content-end {
|
14
|
+
margin-left: 0.5em;
|
15
|
+
|
16
|
+
svg {
|
17
|
+
position: absolute;
|
18
|
+
left: -1.6em;
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
22
|
+
.form-actions-inline.justify-content-start {
|
23
|
+
margin-right: 0.5em;
|
24
|
+
|
25
|
+
svg {
|
26
|
+
position: absolute;
|
27
|
+
right: -1.6em;
|
10
28
|
}
|
11
29
|
}
|
12
30
|
|
13
31
|
.form-actions-bordered {
|
14
32
|
border-top: solid 1px #eee;
|
15
|
-
margin-top:
|
33
|
+
margin-top: 1em;
|
16
34
|
|
17
|
-
>
|
35
|
+
> a,button { margin-top: 1em; }
|
18
36
|
}
|
19
37
|
|
20
38
|
.form-actions.justify-content-start {
|
21
|
-
>
|
39
|
+
> a,button { margin-right: 0.5em; }
|
22
40
|
}
|
23
41
|
|
24
42
|
.form-actions.justify-content-end {
|
25
|
-
>
|
43
|
+
> a,button { margin-left: 0.5em; }
|
26
44
|
}
|
27
45
|
|
28
46
|
.form-actions.justify-content-center {
|
29
|
-
>
|
47
|
+
> a,button { margin-left: 0.5em; }
|
30
48
|
}
|
31
49
|
|
32
50
|
// Spinner
|
33
51
|
.form-actions .eb-icon-spinner { display: none; }
|
34
|
-
.form-
|
52
|
+
.form-actions.form-current-submit .eb-icon-spinner { display: inline; }
|
35
53
|
|
36
54
|
// Radio and Checkbox fieldsets
|
37
55
|
fieldset.form-group > label {
|
@@ -36,6 +36,11 @@ module Effective
|
|
36
36
|
Effective::FormInputs::DatetimeField.new(name, options, builder: self).to_html { super(name, options) }
|
37
37
|
end
|
38
38
|
|
39
|
+
def delete(name = 'Remove', url = nil, options = {}, &block)
|
40
|
+
options[:href] ||= url
|
41
|
+
Effective::FormInputs::Delete.new(name, options, builder: self).to_html(&block)
|
42
|
+
end
|
43
|
+
|
39
44
|
def email_field(name, options = {})
|
40
45
|
Effective::FormInputs::EmailField.new(name, options, builder: self).to_html { super(name, options) }
|
41
46
|
end
|
@@ -0,0 +1,87 @@
|
|
1
|
+
module Effective
|
2
|
+
module FormInputs
|
3
|
+
class Delete < Effective::FormInput
|
4
|
+
|
5
|
+
def to_html(&block)
|
6
|
+
return super unless (form_readonly? || form_disabled?)
|
7
|
+
end
|
8
|
+
|
9
|
+
def build_input(&block)
|
10
|
+
tags = [
|
11
|
+
icon('check', style: 'display: none;'),
|
12
|
+
icon('x', style: 'display: none;'),
|
13
|
+
icon('spinner'),
|
14
|
+
(block_given? ? capture(&block) : content_tag(:a, name, options[:input]))
|
15
|
+
]
|
16
|
+
|
17
|
+
(left? ? tags.reverse.join : tags.join).html_safe
|
18
|
+
end
|
19
|
+
|
20
|
+
def label_options
|
21
|
+
false
|
22
|
+
end
|
23
|
+
|
24
|
+
def wrapper_options
|
25
|
+
@right = true unless (left? || center? || right?)
|
26
|
+
|
27
|
+
classes = [
|
28
|
+
('row' if layout == :horizontal),
|
29
|
+
'form-group form-actions',
|
30
|
+
('form-actions-inline' if inline?),
|
31
|
+
('form-actions-bordered' if border?),
|
32
|
+
('justify-content-start' if left? && layout == :vertical),
|
33
|
+
('justify-content-center' if center? && layout == :vertical),
|
34
|
+
('justify-content-end' if right? && layout == :vertical)
|
35
|
+
].compact.join(' ')
|
36
|
+
|
37
|
+
{ class: classes, id: tag_id }
|
38
|
+
end
|
39
|
+
|
40
|
+
def input_html_options
|
41
|
+
{ class: 'btn btn-warning', data: { method: :delete, remote: true, confirm: "Delete #{object}?"} }
|
42
|
+
end
|
43
|
+
|
44
|
+
def border?
|
45
|
+
false
|
46
|
+
end
|
47
|
+
|
48
|
+
def inline?
|
49
|
+
return @form_actions_inline unless @form_actions_inline.nil?
|
50
|
+
@form_actions_inline = (options.delete(:inline) || false)
|
51
|
+
end
|
52
|
+
|
53
|
+
def left?
|
54
|
+
return @left unless @left.nil?
|
55
|
+
@left = (options.delete(:left) || false)
|
56
|
+
end
|
57
|
+
|
58
|
+
def center?
|
59
|
+
return @center unless @center.nil?
|
60
|
+
@center = (options.delete(:center) || false)
|
61
|
+
end
|
62
|
+
|
63
|
+
def right?
|
64
|
+
return @right unless @right.nil?
|
65
|
+
@right = (options.delete(:right) || false)
|
66
|
+
end
|
67
|
+
|
68
|
+
def feedback_options
|
69
|
+
# case layout
|
70
|
+
# when :inline
|
71
|
+
# false
|
72
|
+
# else
|
73
|
+
# {
|
74
|
+
# valid: { class: 'valid-feedback', text: 'Looks good! Submitting...' },
|
75
|
+
# invalid: {
|
76
|
+
# class: 'invalid-feedback',
|
77
|
+
# text: 'one or more errors are present. please fix the errors above and try again.'
|
78
|
+
# }
|
79
|
+
# }
|
80
|
+
# end
|
81
|
+
false
|
82
|
+
end
|
83
|
+
|
84
|
+
|
85
|
+
end
|
86
|
+
end
|
87
|
+
end
|
@@ -2,23 +2,12 @@ module Effective
|
|
2
2
|
module FormInputs
|
3
3
|
class FormGroup < Effective::FormInput
|
4
4
|
|
5
|
-
def
|
6
|
-
|
7
|
-
{ class: 'form-group col-sm-10' }
|
8
|
-
else
|
9
|
-
{ class: 'form-group' }
|
10
|
-
end
|
5
|
+
def build_input(&block)
|
6
|
+
content_tag(:label, (name || ' ').html_safe) + capture(&block)
|
11
7
|
end
|
12
8
|
|
13
|
-
def
|
14
|
-
|
15
|
-
when :horizontal
|
16
|
-
build_wrapper do
|
17
|
-
content_tag(:div, '', class: 'col-sm-2') + content_tag(:div, capture(&block), options[:input])
|
18
|
-
end
|
19
|
-
else
|
20
|
-
content_tag(:div, capture(&block), options[:input])
|
21
|
-
end
|
9
|
+
def feedback_options
|
10
|
+
false
|
22
11
|
end
|
23
12
|
|
24
13
|
end
|
@@ -23,13 +23,14 @@ module Effective
|
|
23
23
|
classes = [
|
24
24
|
('row' if layout == :horizontal),
|
25
25
|
'form-group form-actions',
|
26
|
+
('form-actions-inline' if inline?),
|
26
27
|
('form-actions-bordered' if border?),
|
27
28
|
('justify-content-start' if left? && layout == :vertical),
|
28
29
|
('justify-content-center' if center? && layout == :vertical),
|
29
30
|
('justify-content-end' if right? && layout == :vertical)
|
30
31
|
].compact.join(' ')
|
31
32
|
|
32
|
-
{ class: classes }
|
33
|
+
{ class: classes, id: tag_id }
|
33
34
|
end
|
34
35
|
|
35
36
|
def input_html_options
|
@@ -47,6 +48,12 @@ module Effective
|
|
47
48
|
@border = options.key?(:border) ? options.delete(:border) : true
|
48
49
|
end
|
49
50
|
|
51
|
+
# Changes the svg feedback to use position absolute.
|
52
|
+
def inline?
|
53
|
+
return @form_actions_inline unless @form_actions_inline.nil?
|
54
|
+
@form_actions_inline = (options.delete(:inline) || false)
|
55
|
+
end
|
56
|
+
|
50
57
|
def left?
|
51
58
|
return @left unless @left.nil?
|
52
59
|
@left = (options.delete(:left) || false)
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: effective_bootstrap
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.9
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Code and Effect
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2018-04-
|
11
|
+
date: 2018-04-23 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -419,6 +419,7 @@ files:
|
|
419
419
|
- app/models/effective/form_inputs/collection_input.rb
|
420
420
|
- app/models/effective/form_inputs/date_field.rb
|
421
421
|
- app/models/effective/form_inputs/datetime_field.rb
|
422
|
+
- app/models/effective/form_inputs/delete.rb
|
422
423
|
- app/models/effective/form_inputs/email_field.rb
|
423
424
|
- app/models/effective/form_inputs/error_field.rb
|
424
425
|
- app/models/effective/form_inputs/file_field.rb
|