123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287 |
- import _Object$defineProperty from 'babel-runtime/core-js/object/define-property';
- import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
- import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
- import _createClass from 'babel-runtime/helpers/createClass';
- import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
- import _inherits from 'babel-runtime/helpers/inherits';
-
-
- import onsElements from '../ons/elements';
- import util from '../ons/util';
- import autoStyle from '../ons/autostyle';
- import ModifierUtil from '../ons/internal/modifier-util';
- import BaseElement from './base/base-element';
- import contentReady from '../ons/content-ready';
-
- var scheme = {
- '': 'select-* select--*',
- '.select-input': 'select-input--*'
- };
-
- var defaultClassName = 'select';
-
- var INPUT_ATTRIBUTES = ['autofocus', 'disabled', 'form', 'multiple', 'name', 'required', 'size'];
-
-
-
- var SelectElement = function (_BaseElement) {
- _inherits(SelectElement, _BaseElement);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- function SelectElement() {
- _classCallCheck(this, SelectElement);
-
- var _this = _possibleConstructorReturn(this, (SelectElement.__proto__ || _Object$getPrototypeOf(SelectElement)).call(this));
-
- contentReady(_this, function () {
- return _this._compile();
- });
-
- _this._deriveGetters();
- return _this;
- }
-
- _createClass(SelectElement, [{
- key: 'attributeChangedCallback',
- value: function attributeChangedCallback(name, last, current) {
- var _this2 = this;
-
- switch (name) {
- case 'class':
- util.restoreClass(this, defaultClassName, scheme);
- break;
- case 'modifier':
- ModifierUtil.onModifierChanged(last, current, this, scheme);
- break;
- }
-
- if (INPUT_ATTRIBUTES.indexOf(name) >= 0) {
- contentReady(this, function () {
- return _this2._updateBoundAttributes();
- });
- }
- }
- }, {
- key: '_updateBoundAttributes',
- value: function _updateBoundAttributes() {
- var _this3 = this;
-
- INPUT_ATTRIBUTES.forEach(function (attr) {
- if (_this3.hasAttribute(attr)) {
- _this3._select.setAttribute(attr, _this3.getAttribute(attr));
- } else {
- _this3._select.removeAttribute(attr);
- }
- });
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
- }, {
- key: '_compile',
- value: function _compile() {
- autoStyle.prepare(this);
-
- this.classList.add(defaultClassName);
- var sel = this._select || document.createElement('select');
- if (!sel.id && this.hasAttribute('select-id')) {
- sel.id = this.getAttribute('select-id');
- }
- sel.classList.add('select-input');
- if (!this._select) {
- util.arrayFrom(this.childNodes).forEach(function (element) {
- return sel.appendChild(element);
- });
- this.appendChild(sel);
- }
-
- ModifierUtil.initModifier(this, scheme);
- }
- }, {
- key: '_deriveGetters',
- value: function _deriveGetters() {
- var _this4 = this;
-
- ['disabled', 'length', 'multiple', 'name', 'options', 'selectedIndex', 'size', 'value', 'form', 'type'].forEach(function (key) {
- _Object$defineProperty(_this4, key, {
- configurable: true,
- enumerable: true,
- get: function get() {
- return _this4._select[key];
- },
- set: ['form', 'type'].indexOf(key) === -1 ? function (value) {
- return contentReady(_this4, function () {
- return _this4._select[key] = value;
- });
- } : undefined
- });
- });
- }
- }, {
- key: 'add',
- value: function add(option) {
- var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-
- this._select.add(option, index);
- }
- }, {
- key: 'remove',
- value: function remove(index) {
- this._select.remove(index);
- }
- }, {
- key: '_select',
- get: function get() {
- return this.querySelector('select');
- }
- }], [{
- key: 'observedAttributes',
- get: function get() {
- return ['modifier', 'class'].concat(INPUT_ATTRIBUTES);
- }
- }]);
-
- return SelectElement;
- }(BaseElement);
-
- export default SelectElement;
-
-
- onsElements.Select = SelectElement;
- customElements.define('ons-select', SelectElement);
|