root / drupal7 / sites / all / modules / date / date_api / date_year_range.js @ 651307cd
1 | 85ad3d82 | Assos Assos | (function ($) { |
---|---|---|---|
2 | |||
3 | Drupal.behaviors.dateYearRange = {}; |
||
4 | |||
5 | Drupal.behaviors.dateYearRange.attach = function (context, settings) { |
||
6 | var $textfield, $textfields, i; |
||
7 | |||
8 | // Turn the years back and forward fieldsets into dropdowns.
|
||
9 | $textfields = $('input.select-list-with-custom-option', context).once('date-year-range'); |
||
10 | for (i = 0; i < $textfields.length; i++) { |
||
11 | $textfield = $($textfields[i]); |
||
12 | new Drupal.dateYearRange.SelectListWithCustomOption($textfield); |
||
13 | } |
||
14 | }; |
||
15 | |||
16 | |||
17 | Drupal.dateYearRange = {}; |
||
18 | |||
19 | /**
|
||
20 | * Constructor for the SelectListWithCustomOption object.
|
||
21 | *
|
||
22 | * This object is responsible for turning the years back and forward textfields
|
||
23 | * into dropdowns with an 'other' option that lets the user enter a custom
|
||
24 | * value.
|
||
25 | */
|
||
26 | Drupal.dateYearRange.SelectListWithCustomOption = function ($textfield) { |
||
27 | this.$textfield = $textfield; |
||
28 | this.$description = $textfield.next('div.description'); |
||
29 | this.defaultValue = $textfield.val(); |
||
30 | this.$dropdown = this.createDropdown(); |
||
31 | this.$dropdown.insertBefore($textfield); |
||
32 | }; |
||
33 | |||
34 | /**
|
||
35 | * Get the value of the textfield as it existed on page load.
|
||
36 | *
|
||
37 | * @param {String} type
|
||
38 | * The type of the variable to be returned. Defaults to string.
|
||
39 | * @return
|
||
40 | * The original value of the textfield. Returned as an integer, if the type
|
||
41 | * parameter was 'int'.
|
||
42 | */
|
||
43 | Drupal.dateYearRange.SelectListWithCustomOption.prototype.getOriginal = function (type) { |
||
44 | var original;
|
||
45 | if (type === 'int') { |
||
46 | original = parseInt(this.defaultValue, 10); |
||
47 | if (window.isNaN(original)) {
|
||
48 | original = 0;
|
||
49 | } |
||
50 | } |
||
51 | else {
|
||
52 | original = this.defaultValue;
|
||
53 | } |
||
54 | return original;
|
||
55 | }; |
||
56 | |||
57 | /**
|
||
58 | * Get the correct first value for the dropdown.
|
||
59 | */
|
||
60 | Drupal.dateYearRange.SelectListWithCustomOption.prototype.getStartValue = function () { |
||
61 | var direction = this.getDirection(); |
||
62 | var start;
|
||
63 | switch (direction) {
|
||
64 | case 'back': |
||
65 | // For the 'years back' dropdown, the first option should be -10, unless
|
||
66 | // the default value of the textfield is even smaller than that.
|
||
67 | start = Math.min(this.getOriginal('int'), -10); |
||
68 | break;
|
||
69 | case 'forward': |
||
70 | start = 0;
|
||
71 | break;
|
||
72 | } |
||
73 | return start;
|
||
74 | }; |
||
75 | |||
76 | /**
|
||
77 | * Get the correct last value for the dropdown.
|
||
78 | */
|
||
79 | Drupal.dateYearRange.SelectListWithCustomOption.prototype.getEndValue = function () { |
||
80 | var direction = this.getDirection(); |
||
81 | var end;
|
||
82 | var originalString = this.getOriginal(); |
||
83 | switch (direction) {
|
||
84 | case 'back': |
||
85 | end = 0;
|
||
86 | break;
|
||
87 | case 'forward': |
||
88 | // If the original value of the textfield is an absolute year such as
|
||
89 | // 2020, don't try to include it in the dropdown.
|
||
90 | if (originalString.indexOf('+') === -1) { |
||
91 | end = 10;
|
||
92 | } |
||
93 | // If the original value is a relative value (+x), we want it to be
|
||
94 | // included in the possible dropdown values.
|
||
95 | else {
|
||
96 | end = Math.max(this.getOriginal('int'), 10); |
||
97 | } |
||
98 | break;
|
||
99 | } |
||
100 | return end;
|
||
101 | }; |
||
102 | |||
103 | /**
|
||
104 | * Create a dropdown select list with the correct options for this textfield.
|
||
105 | */
|
||
106 | Drupal.dateYearRange.SelectListWithCustomOption.prototype.createDropdown = function () { |
||
107 | var $dropdown = $('<select>').addClass('form-select date-year-range-select'); |
||
108 | var $option, i, value; |
||
109 | var start = this.getStartValue(); |
||
110 | var end = this.getEndValue(); |
||
111 | var direction = this.getDirection(); |
||
112 | for (i = start; i <= end; i++) {
|
||
113 | // Make sure we include the +/- sign in the option value.
|
||
114 | value = i; |
||
115 | if (i > 0) { |
||
116 | value = '+' + i;
|
||
117 | } |
||
118 | // Zero values must have a + or - in front.
|
||
119 | if (i === 0) { |
||
120 | if (direction === 'back') { |
||
121 | value = '-' + i;
|
||
122 | } |
||
123 | else {
|
||
124 | value = '+' + i;
|
||
125 | } |
||
126 | } |
||
127 | $option = $('<option>' + Drupal.formatPlural(value, '@count year from now', '@count years from now') + '</option>').val(value); |
||
128 | $dropdown.append($option); |
||
129 | } |
||
130 | // Create an 'Other' option.
|
||
131 | $option = $('<option class="custom-option">' + Drupal.t('Other') + '</option>').val(''); |
||
132 | $dropdown.append($option); |
||
133 | |||
134 | // When the user changes the selected option in the dropdown, perform
|
||
135 | // appropriate actions (such as showing or hiding the textfield).
|
||
136 | $dropdown.bind('change', $.proxy(this.handleDropdownChange, this)); |
||
137 | |||
138 | // Set the initial value of the dropdown.
|
||
139 | this._setInitialDropdownValue($dropdown); |
||
140 | return $dropdown; |
||
141 | }; |
||
142 | |||
143 | Drupal.dateYearRange.SelectListWithCustomOption.prototype._setInitialDropdownValue = function ($dropdown) { |
||
144 | var textfieldValue = this.getOriginal(); |
||
145 | // Determine whether the original textfield value exists in the dropdown.
|
||
146 | var possible = $dropdown.find('option[value="' + textfieldValue + '"]'); |
||
147 | // If the original textfield value is one of the dropdown options, preselect
|
||
148 | // it and hide the 'other' textfield.
|
||
149 | if (possible.length) {
|
||
150 | $dropdown.val(textfieldValue);
|
||
151 | this.hideTextfield();
|
||
152 | } |
||
153 | // If the original textfield value isn't one of the dropdown options, choose
|
||
154 | // the 'Other' option in the dropdown.
|
||
155 | else {
|
||
156 | $dropdown.val(''); |
||
157 | } |
||
158 | }; |
||
159 | |||
160 | /**
|
||
161 | * Determine whether this is the "years back" or "years forward" textfield.
|
||
162 | */
|
||
163 | Drupal.dateYearRange.SelectListWithCustomOption.prototype.getDirection = function () { |
||
164 | if (this.direction) { |
||
165 | return this.direction; |
||
166 | } |
||
167 | var direction;
|
||
168 | if (this.$textfield.hasClass('back')) { |
||
169 | direction = 'back';
|
||
170 | } |
||
171 | else if (this.$textfield.hasClass('forward')) { |
||
172 | direction = 'forward';
|
||
173 | } |
||
174 | this.direction = direction;
|
||
175 | return direction;
|
||
176 | }; |
||
177 | |||
178 | /**
|
||
179 | * Change handler for the dropdown, to modify the textfield as appropriate.
|
||
180 | */
|
||
181 | Drupal.dateYearRange.SelectListWithCustomOption.prototype.handleDropdownChange = function () { |
||
182 | // Since the dropdown changed, we need to make the content of the textfield
|
||
183 | // match the (new) selected option.
|
||
184 | this.syncTextfield();
|
||
185 | |||
186 | // Show the textfield if the 'Other' option was selected, and hide it if one
|
||
187 | // of the preset options was selected.
|
||
188 | if ($(':selected', this.$dropdown).hasClass('custom-option')) { |
||
189 | this.revealTextfield();
|
||
190 | } |
||
191 | else {
|
||
192 | this.hideTextfield();
|
||
193 | } |
||
194 | }; |
||
195 | |||
196 | /**
|
||
197 | * Display the textfield and its description.
|
||
198 | */
|
||
199 | Drupal.dateYearRange.SelectListWithCustomOption.prototype.revealTextfield = function () { |
||
200 | this.$textfield.show(); |
||
201 | this.$description.show(); |
||
202 | }; |
||
203 | |||
204 | /**
|
||
205 | * Hide the textfield and its description.
|
||
206 | */
|
||
207 | Drupal.dateYearRange.SelectListWithCustomOption.prototype.hideTextfield = function () { |
||
208 | this.$textfield.hide(); |
||
209 | this.$description.hide(); |
||
210 | }; |
||
211 | |||
212 | /**
|
||
213 | * Copy the selected value of the dropdown to the textfield.
|
||
214 | *
|
||
215 | * FAPI doesn't know about the JS-only dropdown, so the textfield needs to
|
||
216 | * reflect the value of the dropdown.
|
||
217 | */
|
||
218 | Drupal.dateYearRange.SelectListWithCustomOption.prototype.syncTextfield = function () { |
||
219 | var value = this.$dropdown.val(); |
||
220 | this.$textfield.val(value); |
||
221 | }; |
||
222 | |||
223 | })(jQuery); |