playbook_ui 14.0.0.pre.alpha.PA1477timestampkit3509 → 14.0.0.pre.alpha.PBNTR415starratingform3492
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/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
- data/app/pb_kits/playbook/pb_star_rating/index.js +78 -41
- data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +4 -2
- data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +17 -0
- data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +1 -36
- data/dist/chunks/{_typeahead-D-4y9pbv.js → _typeahead-D6PRvP-1.js} +1 -1
- data/dist/chunks/_weekday_stacked-Dzgi_IL5.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +4 -4
- data/dist/chunks/_weekday_stacked-D5SswkOC.js +0 -45
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 4ea9088edfef4d9e59db2c6597b4f476e37bd6edefb8a76eea7f76d1818910c7
|
4
|
+
data.tar.gz: e101c98a4cb0e480619b4b5f55dbcf2349a32b26d9028f4e80fd701d875887ef
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 0eb4fc44d37ace56aef7b511255e2a62013e60c32213bd096a0b67a5a28f49aa6e7c484d631571914ee97fd3ae78a985cbae8f648b1ab8398816297a7787d4b3
|
7
|
+
data.tar.gz: a2755e31f02392e6116f561337663769a5f358e0b576994197f0aa63ece93faf7398fe5d865bb44d99c5cc745ca368eee7debfe0795526718052a6b2c0565d68
|
@@ -35,6 +35,7 @@
|
|
35
35
|
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
|
36
36
|
<%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
|
37
37
|
<%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
|
38
|
+
<%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true, required: true } %>
|
38
39
|
|
39
40
|
<%= form.actions do |action| %>
|
40
41
|
<%= action.submit %>
|
@@ -1,119 +1,156 @@
|
|
1
|
-
import PbEnhancedElement from "../pb_enhanced_element"
|
1
|
+
import PbEnhancedElement from "../pb_enhanced_element"
|
2
2
|
|
3
|
-
const
|
4
|
-
const
|
3
|
+
const STAR_RATING_WRAPPER_SELECTOR = "[data-pb-star-rating-wrapper]"
|
4
|
+
const STAR_RATING_SELECTOR = "[data-pb-star-rating]"
|
5
|
+
const STAR_RATING_INPUT_DATA_SELECTOR = "[data-pb-star-rating-input]"
|
5
6
|
|
6
7
|
export default class PbStarRating extends PbEnhancedElement {
|
7
8
|
static get selector() {
|
8
|
-
return
|
9
|
+
return STAR_RATING_WRAPPER_SELECTOR
|
9
10
|
}
|
10
11
|
|
11
12
|
connect() {
|
12
|
-
this.
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
13
|
+
this.addEventListeners()
|
14
|
+
this.handleFormReset()
|
15
|
+
}
|
16
|
+
|
17
|
+
addEventListeners() {
|
18
|
+
this.element.querySelectorAll(STAR_RATING_SELECTOR).forEach(star => {
|
19
|
+
star.addEventListener("click", (event) => {
|
20
|
+
const clickedStarId = event.currentTarget.id
|
21
|
+
this.updateStarColors(clickedStarId)
|
22
|
+
this.updateHiddenInputValue(clickedStarId)
|
23
|
+
this.clearFormValidation()
|
24
|
+
})
|
17
25
|
|
18
|
-
document.querySelectorAll(STAR_RATING_SELECTOR).forEach(star => {
|
19
26
|
star.addEventListener("mouseenter", (event) => {
|
20
27
|
const hoveredStarId = event.currentTarget.id
|
21
|
-
this.updateStarHoverColors(hoveredStarId)
|
28
|
+
this.updateStarHoverColors(hoveredStarId)
|
22
29
|
})
|
23
30
|
|
24
31
|
star.addEventListener("mouseleave", () => {
|
25
|
-
this.removeStarHoverColors()
|
32
|
+
this.removeStarHoverColors()
|
26
33
|
})
|
27
34
|
|
28
35
|
star.addEventListener("keydown", (event) => {
|
29
36
|
if (event.key === 'Enter' || event.key === ' ') {
|
30
|
-
event.preventDefault()
|
31
|
-
this.handleStarClick(star.id)
|
37
|
+
event.preventDefault()
|
38
|
+
this.handleStarClick(star.id)
|
32
39
|
}
|
33
40
|
})
|
34
41
|
})
|
35
42
|
}
|
36
43
|
|
37
44
|
handleStarClick(starId) {
|
38
|
-
this.updateStarColors(starId)
|
39
|
-
this.updateHiddenInputValue(starId)
|
45
|
+
this.updateStarColors(starId)
|
46
|
+
this.updateHiddenInputValue(starId)
|
40
47
|
}
|
41
48
|
|
42
49
|
updateStarColors(clickedStarId) {
|
43
|
-
const allStars =
|
50
|
+
const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
|
44
51
|
|
45
52
|
allStars.forEach(star => {
|
46
|
-
const starId = star.id
|
47
|
-
const icon = star.querySelector(".interactive-star-icon")
|
53
|
+
const starId = star.id
|
54
|
+
const icon = star.querySelector(".interactive-star-icon")
|
48
55
|
|
49
56
|
if (icon) {
|
50
57
|
if (starId <= clickedStarId) {
|
51
58
|
if (star.classList.contains("yellow_star")) {
|
52
|
-
icon.classList.add("yellow-star-selected")
|
59
|
+
icon.classList.add("yellow-star-selected")
|
53
60
|
} else if (star.classList.contains("primary_star_light")) {
|
54
|
-
icon.classList.add("primary-star-selected")
|
61
|
+
icon.classList.add("primary-star-selected")
|
55
62
|
} else if (star.classList.contains("primary_star_dark")) {
|
56
|
-
icon.classList.add("primary-star-selected")
|
63
|
+
icon.classList.add("primary-star-selected")
|
57
64
|
} else if (star.classList.contains("subtle_star_light")) {
|
58
|
-
icon.classList.add("subtle-star-selected")
|
65
|
+
icon.classList.add("subtle-star-selected")
|
59
66
|
} else if (star.classList.contains("subtle_star_dark")) {
|
60
|
-
icon.classList.add("subtle-star-selected")
|
67
|
+
icon.classList.add("subtle-star-selected")
|
61
68
|
} else {
|
62
|
-
icon.classList.add("yellow-star-selected")
|
69
|
+
icon.classList.add("yellow-star-selected")
|
63
70
|
}
|
64
71
|
} else {
|
65
|
-
icon.classList.remove("yellow-star-selected", "primary-star-selected", "subtle-star-selected")
|
72
|
+
icon.classList.remove("yellow-star-selected", "primary-star-selected", "subtle-star-selected")
|
66
73
|
}
|
67
|
-
icon.classList.remove("star-hovered")
|
74
|
+
icon.classList.remove("star-hovered")
|
68
75
|
}
|
69
|
-
})
|
76
|
+
})
|
70
77
|
}
|
71
78
|
|
72
79
|
updateHiddenInputValue(value) {
|
73
|
-
const hiddenInput =
|
80
|
+
const hiddenInput = this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR)
|
74
81
|
if (hiddenInput) {
|
75
|
-
hiddenInput.value = value
|
82
|
+
hiddenInput.value = value
|
76
83
|
}
|
77
84
|
}
|
78
85
|
|
79
86
|
updateStarHoverColors(hoveredStarId) {
|
80
|
-
const allStars =
|
87
|
+
const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
|
81
88
|
|
82
89
|
allStars.forEach(star => {
|
83
|
-
const starId = star.id
|
84
|
-
const icon = star.querySelector(".interactive-star-icon")
|
90
|
+
const starId = star.id
|
91
|
+
const icon = star.querySelector(".interactive-star-icon")
|
85
92
|
|
86
93
|
if (icon) {
|
87
94
|
if (starId <= hoveredStarId) {
|
88
95
|
if (!icon.classList.contains("yellow-star-selected") &&
|
89
96
|
!icon.classList.contains("primary-star-selected") &&
|
90
97
|
!icon.classList.contains("subtle-star-selected")) {
|
91
|
-
icon.classList.add("star-hovered")
|
98
|
+
icon.classList.add("star-hovered")
|
92
99
|
}
|
93
100
|
} else {
|
94
|
-
icon.classList.remove("star-hovered")
|
101
|
+
icon.classList.remove("star-hovered")
|
95
102
|
}
|
96
103
|
}
|
97
|
-
})
|
104
|
+
})
|
98
105
|
}
|
99
106
|
|
100
107
|
|
101
108
|
removeStarHoverColors() {
|
102
|
-
const allStars =
|
109
|
+
const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
|
103
110
|
|
104
111
|
allStars.forEach(star => {
|
105
|
-
const icon = star.querySelector(".interactive-star-icon")
|
112
|
+
const icon = star.querySelector(".interactive-star-icon")
|
106
113
|
if (icon) {
|
107
114
|
if (!icon.classList.contains("yellow-star-selected") &&
|
108
115
|
!icon.classList.contains("primary-star-selected") &&
|
109
116
|
!icon.classList.contains("subtle-star-selected")) {
|
110
|
-
icon.classList.remove("star-hovered")
|
117
|
+
icon.classList.remove("star-hovered")
|
111
118
|
}
|
112
119
|
}
|
113
|
-
})
|
120
|
+
})
|
114
121
|
}
|
115
122
|
|
116
123
|
isStarSelected() {
|
117
|
-
return
|
124
|
+
return this.element.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length > 0
|
125
|
+
}
|
126
|
+
|
127
|
+
handleFormReset() {
|
128
|
+
const form = this.element.closest("form")
|
129
|
+
if (form) {
|
130
|
+
form.addEventListener("reset", () => {
|
131
|
+
this.updateHiddenInputValue("")
|
132
|
+
this.resetStarRatingValues()
|
133
|
+
})
|
134
|
+
}
|
135
|
+
}
|
136
|
+
|
137
|
+
resetStarRatingValues() {
|
138
|
+
const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
|
139
|
+
allStars.forEach(star => {
|
140
|
+
const icon = star.querySelector(".interactive-star-icon")
|
141
|
+
if (icon) {
|
142
|
+
icon.classList.remove("yellow-star-selected", "primary-star-selected", "subtle-star-selected")
|
143
|
+
}
|
144
|
+
})
|
145
|
+
}
|
146
|
+
|
147
|
+
clearFormValidation() {
|
148
|
+
const hiddenInput = this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR)
|
149
|
+
if (hiddenInput.checkValidity()) {
|
150
|
+
const errorLabelElement = this.element.querySelector(".pb_body_kit_negative")
|
151
|
+
if (errorLabelElement) {
|
152
|
+
errorLabelElement.remove()
|
153
|
+
}
|
154
|
+
}
|
118
155
|
}
|
119
156
|
}
|
@@ -39,11 +39,13 @@
|
|
39
39
|
<% end %>
|
40
40
|
|
41
41
|
<% else %>
|
42
|
-
<%= pb_rails("flex", props: { orientation: "column" }) do %>
|
42
|
+
<%= pb_rails("flex", props: { data: {"pb-star-rating-wrapper": "true" }, orientation: "column" }) do %>
|
43
43
|
<% if object.label.present? %>
|
44
44
|
<%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
|
45
45
|
<% end %>
|
46
|
-
|
46
|
+
|
47
|
+
<%= hidden_input_tag %>
|
48
|
+
|
47
49
|
<%= pb_rails("flex", props: { orientation: "row" }) do %>
|
48
50
|
<% object.denominator.times do |index| %>
|
49
51
|
<div data-pb-star-rating id="<%= index + 1 %>" class="<%= star_color %>">
|
@@ -30,6 +30,10 @@ module Playbook
|
|
30
30
|
default: "display"
|
31
31
|
prop :label, type: Playbook::Props::String
|
32
32
|
prop :name, type: Playbook::Props::String
|
33
|
+
prop :required, type: Playbook::Props::Boolean,
|
34
|
+
default: false
|
35
|
+
prop :input_options, type: Playbook::Props::HashProp,
|
36
|
+
default: {}
|
33
37
|
|
34
38
|
def one_decimal_rating
|
35
39
|
rating.to_f.round(1)
|
@@ -106,6 +110,19 @@ module Playbook
|
|
106
110
|
def classname
|
107
111
|
generate_classname("pb_star_rating_kit")
|
108
112
|
end
|
113
|
+
|
114
|
+
def hidden_input_tag
|
115
|
+
tag(:input, all_input_options)
|
116
|
+
end
|
117
|
+
|
118
|
+
def all_input_options
|
119
|
+
input_options.merge(
|
120
|
+
data: { "pb-star-rating-input": true },
|
121
|
+
name: name,
|
122
|
+
required: required,
|
123
|
+
style: "display: none"
|
124
|
+
)
|
125
|
+
end
|
109
126
|
end
|
110
127
|
end
|
111
128
|
end
|
@@ -27,15 +27,6 @@ module Playbook
|
|
27
27
|
values: %w[default elapsed updated],
|
28
28
|
default: "default"
|
29
29
|
|
30
|
-
# Variables to use with pb_time_ago method
|
31
|
-
SECS_PER_MIN = 60
|
32
|
-
SECS_PER_HOUR = 60 * SECS_PER_MIN
|
33
|
-
SECS_PER_DAY = 24 * SECS_PER_HOUR
|
34
|
-
SECS_PER_WEEK = 7 * SECS_PER_DAY
|
35
|
-
SECS_PER_MONTH = 4 * SECS_PER_WEEK
|
36
|
-
SECS_PER_YEAR = 12 * SECS_PER_MONTH
|
37
|
-
SECS_PER_CENT = 100 * SECS_PER_YEAR
|
38
|
-
|
39
30
|
def classname
|
40
31
|
generate_classname("pb_timestamp_kit", variant_class, align)
|
41
32
|
end
|
@@ -82,38 +73,12 @@ module Playbook
|
|
82
73
|
|
83
74
|
def format_elapsed_string
|
84
75
|
user_string = show_user ? " by #{text}" : ""
|
85
|
-
datetime_string = " #{
|
76
|
+
datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago"
|
86
77
|
updated_string = hide_updated ? "" : "Last updated"
|
87
78
|
|
88
79
|
"#{updated_string}#{user_string}#{datetime_string}"
|
89
80
|
end
|
90
81
|
|
91
|
-
def pb_time_ago(value)
|
92
|
-
time_ago = DateTime.now.to_i - value.to_i
|
93
|
-
case time_ago
|
94
|
-
when (0...SECS_PER_MIN)
|
95
|
-
time_ago == 1 ? "1 second" : "#{time_ago} seconds"
|
96
|
-
when (SECS_PER_MIN...SECS_PER_HOUR)
|
97
|
-
time = time_ago / SECS_PER_MIN
|
98
|
-
time == 1 ? "1 minute" : "#{time_ago / SECS_PER_MIN} minutes"
|
99
|
-
when (SECS_PER_HOUR...SECS_PER_DAY)
|
100
|
-
time = time_ago / SECS_PER_HOUR
|
101
|
-
time == 1 ? "1 hour" : "#{time_ago / SECS_PER_HOUR} hours"
|
102
|
-
when (SECS_PER_DAY...SECS_PER_WEEK)
|
103
|
-
time = time_ago / SECS_PER_DAY
|
104
|
-
time == 1 ? "1 day" : "#{time_ago / SECS_PER_DAY} days"
|
105
|
-
when (SECS_PER_WEEK...SECS_PER_MONTH)
|
106
|
-
time = time_ago / SECS_PER_WEEK
|
107
|
-
time == 1 ? "1 week" : "#{time_ago / SECS_PER_WEEK} weeks"
|
108
|
-
when (SECS_PER_MONTH...SECS_PER_YEAR)
|
109
|
-
time = time_ago / SECS_PER_MONTH
|
110
|
-
time == 1 ? "1 month" : "#{time_ago / SECS_PER_MONTH} months"
|
111
|
-
when (SECS_PER_YEAR...SECS_PER_CENT)
|
112
|
-
time = time_ago / SECS_PER_YEAR
|
113
|
-
time == 1 ? "1 year" : "#{time_ago / SECS_PER_YEAR} years"
|
114
|
-
end
|
115
|
-
end
|
116
|
-
|
117
82
|
def datetime_or_text
|
118
83
|
timestamp ? format_datetime_string : text
|
119
84
|
end
|