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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
  2. import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
  3. import _createClass from 'babel-runtime/helpers/createClass';
  4. import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
  5. import _inherits from 'babel-runtime/helpers/inherits';
  6. /*
  7. Copyright 2013-2015 ASIAL CORPORATION
  8. Licensed under the Apache License, Version 2.0 (the "License");
  9. you may not use this file except in compliance with the License.
  10. You may obtain a copy of the License at
  11. http://www.apache.org/licenses/LICENSE-2.0
  12. Unless required by applicable law or agreed to in writing, software
  13. distributed under the License is distributed on an "AS IS" BASIS,
  14. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15. See the License for the specific language governing permissions and
  16. limitations under the License.
  17. */
  18. import onsElements from '../ons/elements';
  19. import styler from '../ons/styler';
  20. import BaseElement from './base/base-element';
  21. /**
  22. * @element ons-col
  23. * @category grid
  24. * @description
  25. * [en]Represents a column in the grid system. Use with `<ons-row>` to layout components.[/en]
  26. * [ja]グリッドシステムにて列を定義します。ons-rowとともに使用し、コンポーネントのレイアウトに利用します。[/ja]
  27. * @note
  28. * [en]For Android 4.3 and earlier, and iOS6 and earlier, when using mixed alignment with ons-row and ons-column, they may not be displayed correctly. You can use only one alignment.[/en]
  29. * [ja]Android 4.3以前、もしくはiOS 6以前のOSの場合、ons-rowとons-columnを組み合わせた場合に描画が崩れる場合があります。[/ja]
  30. * @codepen GgujC {wide}
  31. * @guide theming.html [en]Layouting guide[/en][ja]レイアウト機能[/ja]
  32. * @seealso ons-row
  33. * [en]The `<ons-row>` component is the parent of `<ons-col>`.[/en]
  34. * [ja]ons-rowコンポーネント[/ja]
  35. * @example
  36. * <ons-row>
  37. * <ons-col width="50px"><ons-icon icon="fa-twitter"></ons-icon></ons-col>
  38. * <ons-col>Text</ons-col>
  39. * </ons-row>
  40. */
  41. /**
  42. * @attribute vertical-align
  43. * @type {String}
  44. * @description
  45. * [en]Vertical alignment of the column. Valid values are "top", "center", and "bottom".[/en]
  46. * [ja]縦の配置を指定する。"top", "center", "bottom"のいずれかを指定します。[/ja]
  47. */
  48. /**
  49. * @attribute width
  50. * @type {String}
  51. * @description
  52. * [en]The width of the column. Valid values are css width values ("10%", "50px").[/en]
  53. * [ja]カラムの横幅を指定する。パーセントもしくはピクセルで指定します(10%や50px)。[/ja]
  54. */
  55. var ColElement = function (_BaseElement) {
  56. _inherits(ColElement, _BaseElement);
  57. function ColElement() {
  58. _classCallCheck(this, ColElement);
  59. var _this = _possibleConstructorReturn(this, (ColElement.__proto__ || _Object$getPrototypeOf(ColElement)).call(this));
  60. if (_this.getAttribute('width')) {
  61. _this._updateWidth();
  62. }
  63. return _this;
  64. }
  65. _createClass(ColElement, [{
  66. key: 'attributeChangedCallback',
  67. value: function attributeChangedCallback(name, last, current) {
  68. if (name === 'width') {
  69. this._updateWidth();
  70. }
  71. }
  72. }, {
  73. key: '_updateWidth',
  74. value: function _updateWidth() {
  75. var width = this.getAttribute('width');
  76. if (!width) {
  77. styler.clear(this, 'flex maxWidth');
  78. } else {
  79. width = width.trim().match(/^\d+$/) ? width + '%' : width;
  80. styler(this, {
  81. flex: '0 0 ' + width,
  82. maxWidth: width
  83. });
  84. }
  85. }
  86. }], [{
  87. key: 'observedAttributes',
  88. get: function get() {
  89. return ['width'];
  90. }
  91. }]);
  92. return ColElement;
  93. }(BaseElement);
  94. export default ColElement;
  95. onsElements.Col = ColElement;
  96. customElements.define('ons-col', ColElement);