material_design_lite-sass 1.0.6.3 → 1.1.0

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.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/.travis.yml +5 -2
  3. data/CHANGELOG.md +9 -0
  4. data/README.md +41 -32
  5. data/lib/material_design_lite/sass/version.rb +1 -1
  6. data/vendor/assets/javascripts/material.js +377 -301
  7. data/vendor/assets/javascripts/material/button.js +0 -24
  8. data/vendor/assets/javascripts/material/checkbox.js +0 -26
  9. data/vendor/assets/javascripts/material/data-table.js +18 -10
  10. data/vendor/assets/javascripts/material/icon-toggle.js +0 -26
  11. data/vendor/assets/javascripts/material/layout.js +104 -6
  12. data/vendor/assets/javascripts/material/mdlComponentHandler.js +15 -36
  13. data/vendor/assets/javascripts/material/menu.js +16 -36
  14. data/vendor/assets/javascripts/material/progress.js +0 -22
  15. data/vendor/assets/javascripts/material/radio.js +0 -28
  16. data/vendor/assets/javascripts/material/ripple.js +6 -35
  17. data/vendor/assets/javascripts/material/slider.js +0 -23
  18. data/vendor/assets/javascripts/material/snackbar.js +189 -0
  19. data/vendor/assets/javascripts/material/switch.js +0 -26
  20. data/vendor/assets/javascripts/material/tabs.js +2 -2
  21. data/vendor/assets/javascripts/material/textfield.js +32 -25
  22. data/vendor/assets/javascripts/material/tooltip.js +39 -49
  23. data/vendor/assets/stylesheets/_material.scss +3 -0
  24. data/vendor/assets/stylesheets/material/_badge.scss +6 -0
  25. data/vendor/assets/stylesheets/material/_button.scss +3 -3
  26. data/vendor/assets/stylesheets/material/_checkbox.scss +5 -0
  27. data/vendor/assets/stylesheets/material/_data-table.scss +17 -9
  28. data/vendor/assets/stylesheets/material/_dialog.scss +57 -0
  29. data/vendor/assets/stylesheets/material/_grid.scss +60 -0
  30. data/vendor/assets/stylesheets/material/_layout.scss +77 -3
  31. data/vendor/assets/stylesheets/material/_list.scss +103 -0
  32. data/vendor/assets/stylesheets/material/_mega_footer.scss +1 -1
  33. data/vendor/assets/stylesheets/material/_menu.scss +5 -1
  34. data/vendor/assets/stylesheets/material/_mixins.scss +33 -0
  35. data/vendor/assets/stylesheets/material/_progress.scss +5 -0
  36. data/vendor/assets/stylesheets/material/_radio.scss +5 -0
  37. data/vendor/assets/stylesheets/material/_shadow.scss +4 -0
  38. data/vendor/assets/stylesheets/material/_snackbar.scss +81 -0
  39. data/vendor/assets/stylesheets/material/_switch.scss +5 -1
  40. data/vendor/assets/stylesheets/material/_tabs.scss +0 -1
  41. data/vendor/assets/stylesheets/material/_textfield.scss +13 -3
  42. data/vendor/assets/stylesheets/material/_typography.scss +4 -0
  43. data/vendor/assets/stylesheets/material/_variables.scss +102 -81
  44. metadata +7 -3
@@ -112,28 +112,6 @@
112
112
  }
113
113
  };
114
114
 
115
- /**
116
- * Downgrade the component
117
- *
118
- * @private
119
- */
120
- MaterialProgress.prototype.mdlDowngrade_ = function() {
121
- while (this.element_.firstChild) {
122
- this.element_.removeChild(this.element_.firstChild);
123
- }
124
- };
125
-
126
- /**
127
- * Public alias for the downgrade method.
128
- *
129
- * @public
130
- */
131
- MaterialProgress.prototype.mdlDowngrade =
132
- MaterialProgress.prototype.mdlDowngrade_;
133
-
134
- MaterialProgress.prototype['mdlDowngrade'] =
135
- MaterialProgress.prototype.mdlDowngrade;
136
-
137
115
  // The component registers itself. It can assume componentHandler is available
138
116
  // in the global scope.
139
117
  componentHandler.register({
@@ -268,34 +268,6 @@
268
268
  }
269
269
  };
270
270
 
271
- /**
272
- * Downgrade the element.
273
- *
274
- * @private
275
- */
276
- MaterialRadio.prototype.mdlDowngrade_ = function() {
277
- var rippleContainer = this.element_.querySelector('.' +
278
- this.CssClasses_.RIPPLE_CONTAINER);
279
- this.btnElement_.removeEventListener('change', this.boundChangeHandler_);
280
- this.btnElement_.removeEventListener('focus', this.boundFocusHandler_);
281
- this.btnElement_.removeEventListener('blur', this.boundBlurHandler_);
282
- this.element_.removeEventListener('mouseup', this.boundMouseUpHandler_);
283
- if (rippleContainer) {
284
- rippleContainer.removeEventListener('mouseup', this.boundMouseUpHandler_);
285
- this.element_.removeChild(rippleContainer);
286
- }
287
- };
288
-
289
- /**
290
- * Public alias for the downgrade method.
291
- *
292
- * @public
293
- */
294
- MaterialRadio.prototype.mdlDowngrade = MaterialRadio.prototype.mdlDowngrade_;
295
-
296
- MaterialRadio.prototype['mdlDowngrade'] =
297
- MaterialRadio.prototype.mdlDowngrade;
298
-
299
271
  // The component registers itself. It can assume componentHandler is available
300
272
  // in the global scope.
301
273
  componentHandler.register({
@@ -122,14 +122,13 @@
122
122
  MaterialRipple.prototype.upHandler_ = function(event) {
123
123
  // Don't fire for the artificial "mouseup" generated by a double-click.
124
124
  if (event && event.detail !== 2) {
125
- this.rippleElement_.classList.remove(this.CssClasses_.IS_VISIBLE);
125
+ // Allow a repaint to occur before removing this class, so the animation
126
+ // shows for tap events, which seem to trigger a mouseup too soon after
127
+ // mousedown.
128
+ window.setTimeout(function() {
129
+ this.rippleElement_.classList.remove(this.CssClasses_.IS_VISIBLE);
130
+ }.bind(this), 0);
126
131
  }
127
- // Allow a repaint to occur before removing this class, so the animation
128
- // shows for tap events, which seem to trigger a mouseup too soon after
129
- // mousedown.
130
- window.setTimeout(function() {
131
- this.rippleElement_.classList.remove(this.CssClasses_.IS_VISIBLE);
132
- }.bind(this), 0);
133
132
  };
134
133
 
135
134
  /**
@@ -250,34 +249,6 @@
250
249
  }
251
250
  };
252
251
 
253
- /**
254
- * Downgrade the component
255
- *
256
- * @private
257
- */
258
- MaterialRipple.prototype.mdlDowngrade_ = function() {
259
- this.element_.removeEventListener('mousedown',
260
- this.boundDownHandler);
261
- this.element_.removeEventListener('touchstart',
262
- this.boundDownHandler);
263
-
264
- this.element_.removeEventListener('mouseup', this.boundUpHandler);
265
- this.element_.removeEventListener('mouseleave', this.boundUpHandler);
266
- this.element_.removeEventListener('touchend', this.boundUpHandler);
267
- this.element_.removeEventListener('blur', this.boundUpHandler);
268
- };
269
-
270
- /**
271
- * Public alias for the downgrade method.
272
- *
273
- * @public
274
- */
275
- MaterialRipple.prototype.mdlDowngrade =
276
- MaterialRipple.prototype.mdlDowngrade_;
277
-
278
- MaterialRipple.prototype['mdlDowngrade'] =
279
- MaterialRipple.prototype.mdlDowngrade;
280
-
281
252
  // The component registers itself. It can assume componentHandler is available
282
253
  // in the global scope.
283
254
  componentHandler.register({
@@ -233,29 +233,6 @@
233
233
  }
234
234
  };
235
235
 
236
- /**
237
- * Downgrade the component
238
- *
239
- * @private
240
- */
241
- MaterialSlider.prototype.mdlDowngrade_ = function() {
242
- this.element_.removeEventListener('input', this.boundInputHandler);
243
- this.element_.removeEventListener('change', this.boundChangeHandler);
244
- this.element_.removeEventListener('mouseup', this.boundMouseUpHandler);
245
- this.element_.parentElement.removeEventListener('mousedown', this.boundContainerMouseDownHandler);
246
- };
247
-
248
- /**
249
- * Public alias for the downgrade method.
250
- *
251
- * @public
252
- */
253
- MaterialSlider.prototype.mdlDowngrade =
254
- MaterialSlider.prototype.mdlDowngrade_;
255
-
256
- MaterialSlider.prototype['mdlDowngrade'] =
257
- MaterialSlider.prototype.mdlDowngrade;
258
-
259
236
  // The component registers itself. It can assume componentHandler is available
260
237
  // in the global scope.
261
238
  componentHandler.register({
@@ -0,0 +1,189 @@
1
+ /**
2
+ * Copyright 2015 Google Inc. All Rights Reserved.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ */
16
+ (function() {
17
+ 'use strict';
18
+
19
+ /**
20
+ * Class constructor for Snackbar MDL component.
21
+ * Implements MDL component design pattern defined at:
22
+ * https://github.com/jasonmayes/mdl-component-design-pattern
23
+ *
24
+ * @constructor
25
+ * @param {HTMLElement} element The element that will be upgraded.
26
+ */
27
+ var MaterialSnackbar = function MaterialSnackbar(element) {
28
+ this.element_ = element;
29
+ this.textElement_ = this.element_.querySelector('.' + this.cssClasses_.MESSAGE);
30
+ this.actionElement_ = this.element_.querySelector('.' + this.cssClasses_.ACTION);
31
+ if (!this.textElement_) {
32
+ throw new Error('There must be a message element for a snackbar.');
33
+ }
34
+ if (!this.actionElement_) {
35
+ throw new Error('There must be an action element for a snackbar.');
36
+ }
37
+ this.active = false;
38
+ this.actionHandler_ = undefined;
39
+ this.message_ = undefined;
40
+ this.actionText_ = undefined;
41
+ this.queuedNotifications_ = [];
42
+ this.setActionHidden_(true);
43
+ };
44
+ window['MaterialSnackbar'] = MaterialSnackbar;
45
+
46
+ /**
47
+ * Store constants in one place so they can be updated easily.
48
+ *
49
+ * @enum {string | number}
50
+ * @private
51
+ */
52
+ MaterialSnackbar.prototype.Constant_ = {
53
+ // The duration of the snackbar show/hide animation, in ms.
54
+ ANIMATION_LENGTH: 250
55
+ };
56
+
57
+ /**
58
+ * Store strings for class names defined by this component that are used in
59
+ * JavaScript. This allows us to simply change it in one place should we
60
+ * decide to modify at a later date.
61
+ *
62
+ * @enum {string}
63
+ * @private
64
+ */
65
+ MaterialSnackbar.prototype.cssClasses_ = {
66
+ SNACKBAR: 'mdl-snackbar',
67
+ MESSAGE: 'mdl-snackbar__text',
68
+ ACTION: 'mdl-snackbar__action',
69
+ ACTIVE: 'mdl-snackbar--active'
70
+ };
71
+
72
+ /**
73
+ * Display the snackbar.
74
+ *
75
+ * @private
76
+ */
77
+ MaterialSnackbar.prototype.displaySnackbar_ = function() {
78
+ this.element_.setAttribute('aria-hidden', 'true');
79
+
80
+ if (this.actionHandler_) {
81
+ this.actionElement_.textContent = this.actionText_;
82
+ this.actionElement_.addEventListener('click', this.actionHandler_);
83
+ this.setActionHidden_(false);
84
+ }
85
+
86
+ this.textElement_.textContent = this.message_;
87
+ this.element_.classList.add(this.cssClasses_.ACTIVE);
88
+ this.element_.setAttribute('aria-hidden', 'false');
89
+ setTimeout(this.cleanup_.bind(this), this.timeout_);
90
+
91
+ };
92
+
93
+ /**
94
+ * Show the snackbar.
95
+ *
96
+ * @param {Object} data The data for the notification.
97
+ * @public
98
+ */
99
+ MaterialSnackbar.prototype.showSnackbar = function(data) {
100
+ if (data === undefined) {
101
+ throw new Error(
102
+ 'Please provide a data object with at least a message to display.');
103
+ }
104
+ if (data['message'] === undefined) {
105
+ throw new Error('Please provide a message to be displayed.');
106
+ }
107
+ if (data['actionHandler'] && !data['actionText']) {
108
+ throw new Error('Please provide action text with the handler.');
109
+ }
110
+ if (this.active) {
111
+ this.queuedNotifications_.push(data);
112
+ } else {
113
+ this.active = true;
114
+ this.message_ = data['message'];
115
+ if (data['timeout']) {
116
+ this.timeout_ = data['timeout'];
117
+ } else {
118
+ this.timeout_ = 2750;
119
+ }
120
+ if (data['actionHandler']) {
121
+ this.actionHandler_ = data['actionHandler'];
122
+ }
123
+ if (data['actionText']) {
124
+ this.actionText_ = data['actionText'];
125
+ }
126
+ this.displaySnackbar_();
127
+ }
128
+ };
129
+ MaterialSnackbar.prototype['showSnackbar'] = MaterialSnackbar.prototype.showSnackbar;
130
+
131
+ /**
132
+ * Check if the queue has items within it.
133
+ * If it does, display the next entry.
134
+ *
135
+ * @private
136
+ */
137
+ MaterialSnackbar.prototype.checkQueue_ = function() {
138
+ if (this.queuedNotifications_.length > 0) {
139
+ this.showSnackbar(this.queuedNotifications_.shift());
140
+ }
141
+ };
142
+
143
+ /**
144
+ * Cleanup the snackbar event listeners and accessiblity attributes.
145
+ *
146
+ * @private
147
+ */
148
+ MaterialSnackbar.prototype.cleanup_ = function() {
149
+ this.element_.classList.remove(this.cssClasses_.ACTIVE);
150
+ setTimeout(function() {
151
+ this.element_.setAttribute('aria-hidden', 'true');
152
+ this.textElement_.textContent = '';
153
+ if (!Boolean(this.actionElement_.getAttribute('aria-hidden'))) {
154
+ this.setActionHidden_(true);
155
+ this.actionElement_.textContent = '';
156
+ this.actionElement_.removeEventListener('click', this.actionHandler_);
157
+ }
158
+ this.actionHandler_ = undefined;
159
+ this.message_ = undefined;
160
+ this.actionText_ = undefined;
161
+ this.active = false;
162
+ this.checkQueue_();
163
+ }.bind(this), /** @type {number} */ (this.Constant_.ANIMATION_LENGTH));
164
+ };
165
+
166
+ /**
167
+ * Set the action handler hidden state.
168
+ *
169
+ * @param {boolean} value
170
+ * @private
171
+ */
172
+ MaterialSnackbar.prototype.setActionHidden_ = function(value) {
173
+ if (value) {
174
+ this.actionElement_.setAttribute('aria-hidden', 'true');
175
+ } else {
176
+ this.actionElement_.removeAttribute('aria-hidden');
177
+ }
178
+ };
179
+
180
+ // The component registers itself. It can assume componentHandler is available
181
+ // in the global scope.
182
+ componentHandler.register({
183
+ constructor: MaterialSnackbar,
184
+ classAsString: 'MaterialSnackbar',
185
+ cssClass: 'mdl-js-snackbar',
186
+ widget: true
187
+ });
188
+
189
+ })();
@@ -262,32 +262,6 @@
262
262
  }
263
263
  };
264
264
 
265
- /**
266
- * Downgrade the component.
267
- *
268
- * @private
269
- */
270
- MaterialSwitch.prototype.mdlDowngrade_ = function() {
271
- if (this.rippleContainerElement_) {
272
- this.rippleContainerElement_.removeEventListener('mouseup', this.boundMouseUpHandler);
273
- }
274
- this.inputElement_.removeEventListener('change', this.boundChangeHandler);
275
- this.inputElement_.removeEventListener('focus', this.boundFocusHandler);
276
- this.inputElement_.removeEventListener('blur', this.boundBlurHandler);
277
- this.element_.removeEventListener('mouseup', this.boundMouseUpHandler);
278
- };
279
-
280
- /**
281
- * Public alias for the downgrade method.
282
- *
283
- * @public
284
- */
285
- MaterialSwitch.prototype.mdlDowngrade =
286
- MaterialSwitch.prototype.mdlDowngrade_;
287
-
288
- MaterialSwitch.prototype['mdlDowngrade'] =
289
- MaterialSwitch.prototype.mdlDowngrade;
290
-
291
265
  // The component registers itself. It can assume componentHandler is available
292
266
  // in the global scope.
293
267
  componentHandler.register({
@@ -24,7 +24,7 @@
24
24
  * https://github.com/jasonmayes/mdl-component-design-pattern
25
25
  *
26
26
  * @constructor
27
- * @param {HTMLElement} element The element that will be upgraded.
27
+ * @param {Element} element The element that will be upgraded.
28
28
  */
29
29
  var MaterialTabs = function MaterialTabs(element) {
30
30
  // Stores the HTML element.
@@ -124,7 +124,7 @@
124
124
  * Constructor for an individual tab.
125
125
  *
126
126
  * @constructor
127
- * @param {HTMLElement} tab The HTML element for the tab.
127
+ * @param {Element} tab The HTML element for the tab.
128
128
  * @param {MaterialTabs} ctx The MaterialTabs object that owns the tab.
129
129
  */
130
130
  function MaterialTab(tab, ctx) {
@@ -98,6 +98,16 @@
98
98
  this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
99
99
  };
100
100
 
101
+ /**
102
+ * Handle reset event from out side.
103
+ *
104
+ * @param {Event} event The event that fired.
105
+ * @private
106
+ */
107
+ MaterialTextfield.prototype.onReset_ = function(event) {
108
+ this.updateClasses_();
109
+ };
110
+
101
111
  /**
102
112
  * Handle class updates.
103
113
  *
@@ -107,6 +117,7 @@
107
117
  this.checkDisabled();
108
118
  this.checkValidity();
109
119
  this.checkDirty();
120
+ this.checkFocus();
110
121
  };
111
122
 
112
123
  // Public methods.
@@ -126,6 +137,21 @@
126
137
  MaterialTextfield.prototype['checkDisabled'] =
127
138
  MaterialTextfield.prototype.checkDisabled;
128
139
 
140
+ /**
141
+ * Check the focus state and update field accordingly.
142
+ *
143
+ * @public
144
+ */
145
+ MaterialTextfield.prototype.checkFocus = function() {
146
+ if (Boolean(this.element_.querySelector(':focus'))) {
147
+ this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
148
+ } else {
149
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
150
+ }
151
+ };
152
+ MaterialTextfield.prototype['checkFocus'] =
153
+ MaterialTextfield.prototype.checkFocus;
154
+
129
155
  /**
130
156
  * Check the validity state and update field accordingly.
131
157
  *
@@ -215,9 +241,11 @@
215
241
  this.boundUpdateClassesHandler = this.updateClasses_.bind(this);
216
242
  this.boundFocusHandler = this.onFocus_.bind(this);
217
243
  this.boundBlurHandler = this.onBlur_.bind(this);
244
+ this.boundResetHandler = this.onReset_.bind(this);
218
245
  this.input_.addEventListener('input', this.boundUpdateClassesHandler);
219
246
  this.input_.addEventListener('focus', this.boundFocusHandler);
220
247
  this.input_.addEventListener('blur', this.boundBlurHandler);
248
+ this.input_.addEventListener('reset', this.boundResetHandler);
221
249
 
222
250
  if (this.maxRows !== this.Constant_.NO_MAX_ROWS) {
223
251
  // TODO: This should handle pasting multi line text.
@@ -232,35 +260,14 @@
232
260
  if (invalid) {
233
261
  this.element_.classList.add(this.CssClasses_.IS_INVALID);
234
262
  }
263
+ if (this.input_.hasAttribute('autofocus')) {
264
+ this.element_.focus();
265
+ this.checkFocus();
266
+ }
235
267
  }
236
268
  }
237
269
  };
238
270
 
239
- /**
240
- * Downgrade the component
241
- *
242
- * @private
243
- */
244
- MaterialTextfield.prototype.mdlDowngrade_ = function() {
245
- this.input_.removeEventListener('input', this.boundUpdateClassesHandler);
246
- this.input_.removeEventListener('focus', this.boundFocusHandler);
247
- this.input_.removeEventListener('blur', this.boundBlurHandler);
248
- if (this.boundKeyDownHandler) {
249
- this.input_.removeEventListener('keydown', this.boundKeyDownHandler);
250
- }
251
- };
252
-
253
- /**
254
- * Public alias for the downgrade method.
255
- *
256
- * @public
257
- */
258
- MaterialTextfield.prototype.mdlDowngrade =
259
- MaterialTextfield.prototype.mdlDowngrade_;
260
-
261
- MaterialTextfield.prototype['mdlDowngrade'] =
262
- MaterialTextfield.prototype.mdlDowngrade;
263
-
264
271
  // The component registers itself. It can assume componentHandler is available
265
272
  // in the global scope.
266
273
  componentHandler.register({