Repositorio del curso CCOM4030 el semestre B91 del proyecto Artesanías con el Instituto de Cultura

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
  2. import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
  3. import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
  4. import _createClass from 'babel-runtime/helpers/createClass';
  5. import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
  6. import _get from 'babel-runtime/helpers/get';
  7. import _inherits from 'babel-runtime/helpers/inherits';
  8. /*
  9. Copyright 2013-2015 ASIAL CORPORATION
  10. Licensed under the Apache License, Version 2.0 (the "License");
  11. you may not use this file except in compliance with the License.
  12. You may obtain a copy of the License at
  13. http://www.apache.org/licenses/LICENSE-2.0
  14. Unless required by applicable law or agreed to in writing, software
  15. distributed under the License is distributed on an "AS IS" BASIS,
  16. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17. See the License for the specific language governing permissions and
  18. limitations under the License.
  19. */
  20. import onsElements from '../ons/elements';
  21. import BaseInputElement from './base/base-input';
  22. import contentReady from '../ons/content-ready';
  23. import util from '../ons/util';
  24. var scheme = {
  25. '.text-input': 'text-input--*',
  26. '.text-input__label': 'text-input--*__label'
  27. };
  28. /**
  29. * @element ons-input
  30. * @category form
  31. * @modifier material
  32. * [en]Displays a Material Design input.[/en]
  33. * [ja][/ja]
  34. * @modifier underbar
  35. * [en]Displays a horizontal line underneath a text input.[/en]
  36. * [ja][/ja]
  37. * @modifier transparent
  38. * [en]Displays a transparent input. Works for Material Design.[/en]
  39. * [ja][/ja]
  40. * @description
  41. * [en]
  42. * An input element. The `type` attribute can be used to change the input type. All text input types are supported.
  43. *
  44. * The component will automatically render as a Material Design input on Android devices.
  45. *
  46. * Most attributes that can be used for a normal `<input>` element can also be used on the `<ons-input>` element.
  47. * [/en]
  48. * [ja][/ja]
  49. * @tutorial vanilla/Reference/input
  50. * @seealso ons-checkbox
  51. * [en]The `<ons-checkbox>` element is used to display a checkbox.[/en]
  52. * [ja][/ja]
  53. * @seealso ons-radio
  54. * [en]The `<ons-radio>` element is used to display a radio button.[/en]
  55. * [ja][/ja]
  56. * @seealso ons-range
  57. * [en]The `<ons-range>` element is used to display a range slider.[/en]
  58. * [ja][/ja]
  59. * @seealso ons-switch
  60. * [en]The `<ons-switch>` element is used to display a draggable toggle switch.[/en]
  61. * [ja][/ja]
  62. * @seealso ons-select
  63. * [en]The `<ons-select>` element is used to display a select box.[/en]
  64. * [ja][/ja]
  65. * @guide theming.html#modifiers [en]More details about the `modifier` attribute[/en][ja]modifier属性の使い方[/ja]
  66. * @example
  67. * <ons-input placeholder="Username" float></ons-input>
  68. */
  69. var InputElement = function (_BaseInputElement) {
  70. _inherits(InputElement, _BaseInputElement);
  71. function InputElement() {
  72. _classCallCheck(this, InputElement);
  73. var _this = _possibleConstructorReturn(this, (InputElement.__proto__ || _Object$getPrototypeOf(InputElement)).call(this));
  74. _this._boundOnInput = _this._update.bind(_this);
  75. _this._boundOnFocusin = _this._update.bind(_this);
  76. return _this;
  77. }
  78. /* Inherited props */
  79. _createClass(InputElement, [{
  80. key: '_update',
  81. value: function _update() {
  82. this._updateLabel();
  83. this._updateLabelClass();
  84. }
  85. }, {
  86. key: '_updateLabel',
  87. /* Own props */
  88. value: function _updateLabel() {
  89. var label = this.getAttribute('placeholder') || '';
  90. if (typeof this._helper.textContent !== 'undefined') {
  91. this._helper.textContent = label;
  92. } else {
  93. this._helper.innerText = label;
  94. }
  95. }
  96. }, {
  97. key: '_updateLabelClass',
  98. value: function _updateLabelClass() {
  99. if (this.value === '') {
  100. this._helper.classList.remove('text-input--material__label--active');
  101. } else {
  102. this._helper.classList.add('text-input--material__label--active');
  103. }
  104. }
  105. }, {
  106. key: 'connectedCallback',
  107. value: function connectedCallback() {
  108. var _this2 = this;
  109. _get(InputElement.prototype.__proto__ || _Object$getPrototypeOf(InputElement.prototype), 'connectedCallback', this).call(this);
  110. contentReady(this, function () {
  111. _this2._input.addEventListener('input', _this2._boundOnInput);
  112. _this2._input.addEventListener('focusin', _this2._boundOnFocusin);
  113. });
  114. var type = this.getAttribute('type');
  115. if (['checkbox', 'radio'].indexOf(type) >= 0) {
  116. util.warn('Warn: <ons-input type="' + type + '"> is deprecated since v2.4.0. Use <ons-' + type + '> instead.');
  117. }
  118. }
  119. }, {
  120. key: 'disconnectedCallback',
  121. value: function disconnectedCallback() {
  122. var _this3 = this;
  123. _get(InputElement.prototype.__proto__ || _Object$getPrototypeOf(InputElement.prototype), 'disconnectedCallback', this).call(this);
  124. contentReady(this, function () {
  125. _this3._input.removeEventListener('input', _this3._boundOnInput);
  126. _this3._input.removeEventListener('focusin', _this3._boundOnFocusin);
  127. });
  128. }
  129. }, {
  130. key: 'attributeChangedCallback',
  131. value: function attributeChangedCallback(name, last, current) {
  132. var _this4 = this;
  133. switch (name) {
  134. case 'type':
  135. contentReady(this, function () {
  136. return _this4._input.setAttribute('type', _this4.type);
  137. });
  138. break;
  139. default:
  140. _get(InputElement.prototype.__proto__ || _Object$getPrototypeOf(InputElement.prototype), 'attributeChangedCallback', this).call(this, name, last, current);
  141. }
  142. }
  143. /**
  144. * @attribute placeholder
  145. * @type {String}
  146. * @description
  147. * [en]Placeholder text. In Material Design, this placeholder will be a floating label.[/en]
  148. * [ja][/ja]
  149. */
  150. /**
  151. * @attribute float
  152. * @description
  153. * [en]If this attribute is present, the placeholder will be animated in Material Design.[/en]
  154. * [ja]この属性が設定された時、ラベルはアニメーションするようになります。[/ja]
  155. */
  156. /**
  157. * @attribute type
  158. * @type {String}
  159. * @description
  160. * [en]
  161. * Specify the input type. This is the same as the "type" attribute for normal inputs. It expects strict text types such as `text`, `password`, etc. For checkbox, radio button, select or range, please have a look at the corresponding elements.
  162. *
  163. * Please take a look at [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type) for an exhaustive list of possible values. Depending on the platform and browser version some of these might not work.
  164. * [/en]
  165. * [ja][/ja]
  166. */
  167. /**
  168. * @attribute input-id
  169. * @type {String}
  170. * @description
  171. * [en]Specify the "id" attribute of the inner `<input>` element. This is useful when using `<label for="...">` elements.[/en]
  172. * [ja][/ja]
  173. */
  174. /**
  175. * @property value
  176. * @type {String}
  177. * @description
  178. * [en]The current value of the input.[/en]
  179. * [ja][/ja]
  180. */
  181. /**
  182. * @property disabled
  183. * @type {Boolean}
  184. * @description
  185. * [en]Whether the input is disabled or not.[/en]
  186. * [ja]無効化されている場合に`true`。[/ja]
  187. */
  188. }, {
  189. key: '_scheme',
  190. get: function get() {
  191. return scheme;
  192. }
  193. }, {
  194. key: '_template',
  195. get: function get() {
  196. return '\n <input type="' + this.type + '" class="text-input">\n <span class="text-input__label"></span>\n ';
  197. }
  198. }, {
  199. key: 'type',
  200. get: function get() {
  201. var type = this.getAttribute('type');
  202. return ['checkbox', 'radio'].indexOf(type) < 0 && type || 'text';
  203. }
  204. }, {
  205. key: '_helper',
  206. get: function get() {
  207. return this.querySelector('span');
  208. }
  209. }], [{
  210. key: 'observedAttributes',
  211. get: function get() {
  212. return [].concat(_toConsumableArray(_get(InputElement.__proto__ || _Object$getPrototypeOf(InputElement), 'observedAttributes', this)), ['type']);
  213. }
  214. }]);
  215. return InputElement;
  216. }(BaseInputElement);
  217. export default InputElement;
  218. onsElements.Input = InputElement;
  219. customElements.define('ons-input', InputElement);