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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  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 util from '../ons/util';
  20. import autoStyle from '../ons/autostyle';
  21. import BaseElement from './base/base-element';
  22. import contentReady from '../ons/content-ready';
  23. var autoPrefix = 'fa'; // FIXME: To be removed in v3
  24. /**
  25. * @element ons-icon
  26. * @category visual
  27. * @description
  28. * [en]
  29. * Displays an icon. The following icon suites are available:
  30. *
  31. * * [Font Awesome](https://fortawesome.github.io/Font-Awesome/)
  32. * * [Ionicons](http://ionicons.com/)
  33. * * [Material Design Iconic Font](http://zavoloklom.github.io/material-design-iconic-font/)
  34. * [/en]
  35. * [ja][/ja]
  36. * @codepen xAhvg
  37. * @tutorial vanilla/Reference/icon
  38. * @guide theming.html#cross-platform-styling-autostyling [en]Information about cross platform styling[/en][ja][/ja]
  39. * @guide appsize.html#removing-icon-packs [en]Removing icon packs.[/en][ja][/ja]
  40. * @guide faq.html#how-can-i-use-custom-icon-packs [en]Adding custom icon packs.[/en][ja][/ja]
  41. * @example
  42. * <ons-icon
  43. * icon="md-car"
  44. * size="20px"
  45. * style="color: red">
  46. * </ons-icon>
  47. *
  48. * <ons-button>
  49. * <ons-icon icon="md-car"></ons-icon>
  50. * Car
  51. * </ons-button>
  52. */
  53. var IconElement = function (_BaseElement) {
  54. _inherits(IconElement, _BaseElement);
  55. /**
  56. * @attribute icon
  57. * @type {String}
  58. * @description
  59. * [en]
  60. * The icon name. `"md-"` prefix for Material Icons, `"fa-"` for Font Awesome and `"ion-"` prefix for Ionicons.
  61. *
  62. * See all available icons on the element description (at the top).
  63. *
  64. * Icons can also be styled based on modifier presence. Add comma-separated icons with `"modifierName:"` prefix.
  65. *
  66. * The code `<ons-icon icon="ion-edit, material:md-edit"></ons-icon>` will display `"md-edit"` for Material Design and `"ion-edit"` as the default icon.
  67. *
  68. * `fa-` prefix is added automatically if none is provided. Check [See also](#seealso) section for more information.
  69. * [/en]
  70. * [ja][/ja]
  71. */
  72. /**
  73. * @attribute size
  74. * @type {String}
  75. * @description
  76. * [en]
  77. * The sizes of the icon. Valid values are lg, 2x, 3x, 4x, 5x, or in the size in pixels.
  78. * Icons can also be styled based on modifier presence. Add comma-separated icons with `"modifierName:"` prefix.
  79. *
  80. * The code:
  81. *
  82. * ```
  83. * <ons-icon
  84. * icon="ion-edit"
  85. * size="32px, material:24px">
  86. * </ons-icon>
  87. * ```
  88. *
  89. * will render as a `24px` icon if the `"material"` modifier is present and `32px` otherwise.
  90. * [/en]
  91. * [ja][/ja]
  92. */
  93. /**
  94. * @attribute rotate
  95. * @type {Number}
  96. * @description
  97. * [en]Number of degrees to rotate the icon. Valid values are 90, 180 and 270.[/en]
  98. * [ja]アイコンを回転して表示します。90, 180, 270から指定できます。[/ja]
  99. */
  100. /**
  101. * @attribute fixed-width
  102. * @type {Boolean}
  103. * @default false
  104. * @description
  105. * [en]When used in a list, you want the icons to have the same width so that they align vertically by defining this attribute.[/en]
  106. * [ja][/ja]
  107. */
  108. /**
  109. * @attribute spin
  110. * @description
  111. * [en]Specify whether the icon should be spinning.[/en]
  112. * [ja]アイコンを回転するかどうかを指定します。[/ja]
  113. */
  114. function IconElement() {
  115. _classCallCheck(this, IconElement);
  116. var _this = _possibleConstructorReturn(this, (IconElement.__proto__ || _Object$getPrototypeOf(IconElement)).call(this));
  117. contentReady(_this, function () {
  118. _this._compile();
  119. });
  120. return _this;
  121. }
  122. _createClass(IconElement, [{
  123. key: 'attributeChangedCallback',
  124. value: function attributeChangedCallback(name, last, current) {
  125. this._cleanClassAttribute(name === 'icon' ? last : this.getAttribute('icon'), name === 'modifier' ? last : undefined);
  126. this._update();
  127. }
  128. }, {
  129. key: '_compile',
  130. value: function _compile() {
  131. autoStyle.prepare(this);
  132. this._update();
  133. }
  134. }, {
  135. key: '_update',
  136. value: function _update() {
  137. var _this2 = this;
  138. var _buildClassAndStyle2 = this._buildClassAndStyle(this._parseAttr('icon'), this._parseAttr('size')),
  139. classList = _buildClassAndStyle2.classList,
  140. style = _buildClassAndStyle2.style;
  141. util.extend(this.style, style);
  142. classList.forEach(function (className) {
  143. return _this2.classList.add(className);
  144. });
  145. }
  146. }, {
  147. key: '_parseAttr',
  148. value: function _parseAttr(attrName) {
  149. var modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getAttribute('modifier') || '';
  150. var attr = this.getAttribute(attrName) || attrName || '';
  151. var parts = attr.split(/\s*,\s*/);
  152. var def = parts[0];
  153. var md = parts[1];
  154. md = (md || '').split(/\s*:\s*/);
  155. return (modifier && RegExp('(^|\\s+)' + md[0] + '($|\\s+)', 'i').test(modifier) ? md[1] : def) || '';
  156. }
  157. /**
  158. * Remove unneeded class value.
  159. */
  160. }, {
  161. key: '_cleanClassAttribute',
  162. value: function _cleanClassAttribute(lastIcon, lastModifier) {
  163. var _this3 = this;
  164. var _prefixIcon2 = this._prefixIcon(this._parseAttr(lastIcon, lastModifier)),
  165. className = _prefixIcon2.className,
  166. prefix = _prefixIcon2.prefix;
  167. var customPrefixRE = className !== prefix ? '|' + prefix + '$|' + prefix + '-' : '|' + className + '$' || '';
  168. var re = new RegExp('^(fa$|fa-|ion-|zmdi$|zmdi-|ons-icon--' + customPrefixRE + ')');
  169. util.arrayFrom(this.classList).filter(function (className) {
  170. return re.test(className);
  171. }).forEach(function (className) {
  172. return _this3.classList.remove(className);
  173. });
  174. }
  175. }, {
  176. key: '_prefixIcon',
  177. value: function _prefixIcon(iconName) {
  178. var className = autoPrefix + (autoPrefix ? '-' : '') + iconName;
  179. return { className: className, prefix: className.split('-')[0] };
  180. }
  181. }, {
  182. key: '_buildClassAndStyle',
  183. value: function _buildClassAndStyle(iconName, size) {
  184. var classList = ['ons-icon'];
  185. var style = {};
  186. // Icon
  187. if (iconName.indexOf('ion-') === 0) {
  188. classList.push(iconName);
  189. classList.push('ons-icon--ion');
  190. } else if (iconName.indexOf('fa-') === 0) {
  191. classList.push(iconName);
  192. // default icon style to Font Awesome Solid if icon style is not specified already
  193. if (!(this.classList.contains('far') || this.classList.contains('fab') || this.classList.contains('fal'))) {
  194. classList.push('fa');
  195. }
  196. } else if (iconName.indexOf('md-') === 0) {
  197. classList.push('zmdi');
  198. classList.push('zmdi-' + iconName.split(/-(.+)?/)[1]);
  199. } else {
  200. var _prefixIcon3 = this._prefixIcon(iconName),
  201. className = _prefixIcon3.className,
  202. prefix = _prefixIcon3.prefix;
  203. prefix && classList.push(prefix);
  204. className && classList.push(className);
  205. }
  206. // Size
  207. if (size.match(/^[1-5]x|lg$/)) {
  208. classList.push('ons-icon--' + size);
  209. this.style.removeProperty('font-size');
  210. } else {
  211. style.fontSize = size;
  212. }
  213. return {
  214. classList: classList,
  215. style: style
  216. };
  217. }
  218. }], [{
  219. key: 'setAutoPrefix',
  220. value: function setAutoPrefix(prefix) {
  221. autoPrefix = prefix ? typeof prefix === 'string' && prefix || 'fa' : '';
  222. }
  223. }, {
  224. key: 'observedAttributes',
  225. get: function get() {
  226. return ['icon', 'size', 'modifier', 'class'];
  227. }
  228. }]);
  229. return IconElement;
  230. }(BaseElement);
  231. export default IconElement;
  232. onsElements.Icon = IconElement;
  233. customElements.define('ons-icon', IconElement);