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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. import _Object$defineProperty from 'babel-runtime/core-js/object/define-property';
  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 _inherits from 'babel-runtime/helpers/inherits';
  7. /*
  8. Copyright 2013-2015 ASIAL CORPORATION
  9. Licensed under the Apache License, Version 2.0 (the "License");
  10. you may not use this file except in compliance with the License.
  11. You may obtain a copy of the License at
  12. http://www.apache.org/licenses/LICENSE-2.0
  13. Unless required by applicable law or agreed to in writing, software
  14. distributed under the License is distributed on an "AS IS" BASIS,
  15. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16. See the License for the specific language governing permissions and
  17. limitations under the License.
  18. */
  19. import onsElements from '../ons/elements';
  20. import util from '../ons/util';
  21. import autoStyle from '../ons/autostyle';
  22. import ModifierUtil from '../ons/internal/modifier-util';
  23. import BaseElement from './base/base-element';
  24. import contentReady from '../ons/content-ready';
  25. var scheme = {
  26. '': 'select-* select--*',
  27. '.select-input': 'select-input--*'
  28. };
  29. var defaultClassName = 'select';
  30. var INPUT_ATTRIBUTES = ['autofocus', 'disabled', 'form', 'multiple', 'name', 'required', 'size'];
  31. /**
  32. * @element ons-select
  33. * @category form
  34. * @modifier material
  35. * [en]Displays a Material Design select input.[/en]
  36. * [ja][/ja]
  37. * @modifier underbar
  38. * [en]Displays a horizontal line underneath a select input.[/en]
  39. * [ja][/ja]
  40. * @description
  41. * [en]
  42. * Select component. If you want to place a select with an ID of `my-id` on a page, use `<ons-select select-id="my-id">`.
  43. *
  44. * The component will automatically display as a Material Design select on Android.
  45. *
  46. * Most attributes that can be used for a normal `<select>` element can also be used on the `<ons-select>` element.
  47. * [/en]
  48. * [ja]セレクトボックスを表示するコンポーネントです。`select` 要素に使用できる属性の多くが `ons-select` 要素でも利用できます。[/ja]
  49. * @codepen hLayx
  50. * @tutorial vanilla/Reference/select
  51. * @guide theming.html#modifiers [en]More details about the `modifier` attribute[/en][ja]modifier属性の使い方[/ja]
  52. * @guide theming.html#cross-platform-styling-autostyling [en]Information about cross platform styling[/en][ja]Information about cross platform styling[/ja]
  53. * @example
  54. * <ons-select>
  55. * <option value="1">1</option>
  56. * <option value="2">2nd</option>
  57. * <option value="3">3rd option</option>
  58. * </ons-select>
  59. */
  60. var SelectElement = function (_BaseElement) {
  61. _inherits(SelectElement, _BaseElement);
  62. /**
  63. * @attribute autofocus
  64. * @type {Boolean}
  65. * @default false
  66. * @description
  67. * [en]Element automatically gains focus on page load.[/en]
  68. * [ja]ページロード時にこのセレクトボックスにフォーカスが移るようにします。[/ja]
  69. */
  70. /**
  71. * @attribute disabled
  72. * @type {Boolean}
  73. * @default false
  74. * @description
  75. * [en]Specify if select input should be disabled.[/en]
  76. * [ja]このセレクトボックスを無効化する場合に指定します。[/ja]
  77. */
  78. /**
  79. * @attribute form
  80. * @type {String}
  81. * @description
  82. * [en]Associate a select element to an existing form on the page, even if not nested.[/en]
  83. * [ja]このセレクトボックスを、指定した `form` 要素に紐付けます。セレクトボックスを `form` 要素の外側に配置する際に使用します。[/ja]
  84. */
  85. /**
  86. * @attribute multiple
  87. * @type {Boolean}
  88. * @default false
  89. * @description
  90. * [en]If this attribute is defined, multiple options can be selected at once.[/en]
  91. * [ja]選択肢の複数選択を有効にします。[/ja]
  92. */
  93. /**
  94. * @attribute name
  95. * @type {String}
  96. * @description
  97. * [en]Name the select element, useful for instance if it is part of a form.[/en]
  98. * [ja]このセレクトボックスの名前を指定します。通常 `form` 要素と共に使用します。[/ja]
  99. */
  100. /**
  101. * @attribute required
  102. * @type {Boolean}
  103. * @description
  104. * [en]Make the select input required for submitting the form it is part of.[/en]
  105. * [ja]このセレクトボックスを入力必須にする場合に指定します。通常 `form` 要素と共に使用します。[/ja]
  106. */
  107. /**
  108. * @attribute select-id
  109. * @type {String}
  110. * @description
  111. * [en]ID given to the inner select, useful for dynamic manipulation.[/en]
  112. * [ja]このセレクトボックスが内部に持つ select 要素に与える ID を指定します。セレクトボックスの内容を動的に変更する必要がある場合に使用します。[/ja]
  113. */
  114. /**
  115. * @attribute size
  116. * @type {Number}
  117. * @default 1
  118. * @description
  119. * [en]How many options are displayed; if there are more than the size then a scroll appears to navigate them.[/en]
  120. * [ja]一度に表示する選択肢の個数を指定します。選択肢がこの属性で指定した個数よりも多い場合、スクロールが有効になります。[/ja]
  121. */
  122. function SelectElement() {
  123. _classCallCheck(this, SelectElement);
  124. var _this = _possibleConstructorReturn(this, (SelectElement.__proto__ || _Object$getPrototypeOf(SelectElement)).call(this));
  125. contentReady(_this, function () {
  126. return _this._compile();
  127. });
  128. _this._deriveGetters();
  129. return _this;
  130. }
  131. _createClass(SelectElement, [{
  132. key: 'attributeChangedCallback',
  133. value: function attributeChangedCallback(name, last, current) {
  134. var _this2 = this;
  135. switch (name) {
  136. case 'class':
  137. util.restoreClass(this, defaultClassName, scheme);
  138. break;
  139. case 'modifier':
  140. ModifierUtil.onModifierChanged(last, current, this, scheme);
  141. break;
  142. }
  143. if (INPUT_ATTRIBUTES.indexOf(name) >= 0) {
  144. contentReady(this, function () {
  145. return _this2._updateBoundAttributes();
  146. });
  147. }
  148. }
  149. }, {
  150. key: '_updateBoundAttributes',
  151. value: function _updateBoundAttributes() {
  152. var _this3 = this;
  153. INPUT_ATTRIBUTES.forEach(function (attr) {
  154. if (_this3.hasAttribute(attr)) {
  155. _this3._select.setAttribute(attr, _this3.getAttribute(attr));
  156. } else {
  157. _this3._select.removeAttribute(attr);
  158. }
  159. });
  160. }
  161. /**
  162. * @property length
  163. * @description
  164. * [en]Number of options in the select box.[/en]
  165. * [ja]このセレクトボックスに含まれる選択肢の個数を返します。 `select` 要素[/ja]
  166. */
  167. /**
  168. * @property options
  169. * @description
  170. * [en]Several options for handling the select DOM object.[/en]
  171. * [ja]このセレクトボックスに含まれる `option` 要素の配列を返します。[/ja]
  172. */
  173. /**
  174. * @property selectedIndex
  175. * @description
  176. * [en]Index of the currently selected option.[/en]
  177. * [ja]現在選択されている選択肢のインデックスを返します。[/ja]
  178. */
  179. /**
  180. * @property value
  181. * @description
  182. * [en]Value of the currently selected option.[/en]
  183. * [ja]現在選択されている選択肢の値を返します。[/ja]
  184. */
  185. }, {
  186. key: '_compile',
  187. value: function _compile() {
  188. autoStyle.prepare(this);
  189. this.classList.add(defaultClassName);
  190. var sel = this._select || document.createElement('select');
  191. if (!sel.id && this.hasAttribute('select-id')) {
  192. sel.id = this.getAttribute('select-id');
  193. }
  194. sel.classList.add('select-input');
  195. if (!this._select) {
  196. util.arrayFrom(this.childNodes).forEach(function (element) {
  197. return sel.appendChild(element);
  198. });
  199. this.appendChild(sel);
  200. }
  201. ModifierUtil.initModifier(this, scheme);
  202. }
  203. }, {
  204. key: '_deriveGetters',
  205. value: function _deriveGetters() {
  206. var _this4 = this;
  207. ['disabled', 'length', 'multiple', 'name', 'options', 'selectedIndex', 'size', 'value', 'form', 'type'].forEach(function (key) {
  208. _Object$defineProperty(_this4, key, {
  209. configurable: true,
  210. enumerable: true,
  211. get: function get() {
  212. return _this4._select[key];
  213. },
  214. set: ['form', 'type'].indexOf(key) === -1 ? function (value) {
  215. return contentReady(_this4, function () {
  216. return _this4._select[key] = value;
  217. });
  218. } : undefined
  219. });
  220. });
  221. }
  222. }, {
  223. key: 'add',
  224. value: function add(option) {
  225. var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
  226. this._select.add(option, index);
  227. }
  228. }, {
  229. key: 'remove',
  230. value: function remove(index) {
  231. this._select.remove(index);
  232. }
  233. }, {
  234. key: '_select',
  235. get: function get() {
  236. return this.querySelector('select');
  237. }
  238. }], [{
  239. key: 'observedAttributes',
  240. get: function get() {
  241. return ['modifier', 'class'].concat(INPUT_ATTRIBUTES);
  242. }
  243. }]);
  244. return SelectElement;
  245. }(BaseElement);
  246. export default SelectElement;
  247. onsElements.Select = SelectElement;
  248. customElements.define('ons-select', SelectElement);