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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. import _setImmediate from 'babel-runtime/core-js/set-immediate';
  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 styler from '../ons/styler';
  22. import autoStyle from '../ons/autostyle';
  23. import ModifierUtil from '../ons/internal/modifier-util';
  24. import BaseElement from './base/base-element';
  25. import contentReady from '../ons/content-ready';
  26. var defaultClassName = 'fab';
  27. var scheme = {
  28. '': 'fab--*',
  29. '.fab__icon': 'fab--*__icon'
  30. };
  31. /**
  32. * @element ons-fab
  33. * @category form
  34. * @description
  35. * [en]
  36. * The Floating action button is a circular button defined in the [Material Design specification](https://www.google.com/design/spec/components/buttons-floating-action-button.html). They are often used to promote the primary action of the app.
  37. *
  38. * It can be displayed either as an inline element or in one of the corners. Normally it will be positioned in the lower right corner of the screen.
  39. * [/en]
  40. * [ja][/ja]
  41. * @tutorial vanilla/Reference/fab
  42. * @modifier mini
  43. * [en]Makes the `ons-fab` smaller.[/en]
  44. * [ja][/ja]
  45. * @guide theming.html#cross-platform-styling-autostyling [en]Information about cross platform styling[/en][ja]Information about cross platform styling[/ja]
  46. * @seealso ons-speed-dial
  47. * [en]The `<ons-speed-dial>` component is a Floating action button that displays a menu when tapped.[/en]
  48. * [ja][/ja]
  49. */
  50. var FabElement = function (_BaseElement) {
  51. _inherits(FabElement, _BaseElement);
  52. /**
  53. * @attribute modifier
  54. * @type {String}
  55. * @description
  56. * [en]The appearance of the button.[/en]
  57. * [ja]ボタンの表現を指定します。[/ja]
  58. */
  59. /**
  60. * @attribute ripple
  61. * @description
  62. * [en]If this attribute is defined, the button will have a ripple effect when tapped.[/en]
  63. * [ja][/ja]
  64. */
  65. /**
  66. * @attribute position
  67. * @type {String}
  68. * @description
  69. * [en]The position of the button. Should be a string like `"bottom right"` or `"top left"`. If this attribute is not defined it will be displayed as an inline element.[/en]
  70. * [ja][/ja]
  71. */
  72. /**
  73. * @attribute disabled
  74. * @description
  75. * [en]Specify if button should be disabled.[/en]
  76. * [ja]ボタンを無効化する場合は指定します。[/ja]
  77. */
  78. function FabElement() {
  79. _classCallCheck(this, FabElement);
  80. // The following statements can be executed before contentReady
  81. // since these do not access the children
  82. var _this = _possibleConstructorReturn(this, (FabElement.__proto__ || _Object$getPrototypeOf(FabElement)).call(this));
  83. _this._hide();
  84. _this.classList.add(defaultClassName);
  85. contentReady(_this, function () {
  86. _this._compile();
  87. });
  88. return _this;
  89. }
  90. _createClass(FabElement, [{
  91. key: '_compile',
  92. value: function _compile() {
  93. autoStyle.prepare(this);
  94. if (!util.findChild(this, '.fab__icon')) {
  95. var content = document.createElement('span');
  96. content.classList.add('fab__icon');
  97. util.arrayFrom(this.childNodes).forEach(function (element) {
  98. if (!element.tagName || element.tagName.toLowerCase() !== 'ons-ripple') {
  99. content.appendChild(element);
  100. }
  101. });
  102. this.appendChild(content);
  103. }
  104. this._updateRipple();
  105. ModifierUtil.initModifier(this, scheme);
  106. this._updatePosition();
  107. }
  108. }, {
  109. key: 'connectedCallback',
  110. value: function connectedCallback() {
  111. var _this2 = this;
  112. _setImmediate(function () {
  113. return _this2._show();
  114. });
  115. }
  116. }, {
  117. key: 'attributeChangedCallback',
  118. value: function attributeChangedCallback(name, last, current) {
  119. switch (name) {
  120. case 'class':
  121. util.restoreClass(this, defaultClassName, scheme);
  122. break;
  123. case 'modifier':
  124. ModifierUtil.onModifierChanged(last, current, this, scheme);
  125. break;
  126. case 'ripple':
  127. this._updateRipple();
  128. break;
  129. case 'position':
  130. this._updatePosition();
  131. break;
  132. }
  133. }
  134. }, {
  135. key: '_show',
  136. value: function _show() {
  137. if (!this._manuallyHidden) {
  138. // if user has not called ons-fab.hide()
  139. this._toggle(true);
  140. }
  141. }
  142. }, {
  143. key: '_hide',
  144. value: function _hide() {
  145. var _this3 = this;
  146. _setImmediate(function () {
  147. return _this3._toggle(false);
  148. });
  149. }
  150. }, {
  151. key: '_updateRipple',
  152. value: function _updateRipple() {
  153. util.updateRipple(this);
  154. }
  155. }, {
  156. key: '_updatePosition',
  157. value: function _updatePosition() {
  158. var position = this.getAttribute('position');
  159. this.classList.remove('fab--top__left', 'fab--bottom__right', 'fab--bottom__left', 'fab--top__right', 'fab--top__center', 'fab--bottom__center');
  160. switch (position) {
  161. case 'top right':
  162. case 'right top':
  163. this.classList.add('fab--top__right');
  164. break;
  165. case 'top left':
  166. case 'left top':
  167. this.classList.add('fab--top__left');
  168. break;
  169. case 'bottom right':
  170. case 'right bottom':
  171. this.classList.add('fab--bottom__right');
  172. break;
  173. case 'bottom left':
  174. case 'left bottom':
  175. this.classList.add('fab--bottom__left');
  176. break;
  177. case 'center top':
  178. case 'top center':
  179. this.classList.add('fab--top__center');
  180. break;
  181. case 'center bottom':
  182. case 'bottom center':
  183. this.classList.add('fab--bottom__center');
  184. break;
  185. default:
  186. break;
  187. }
  188. }
  189. /**
  190. * @method show
  191. * @signature show()
  192. * @description
  193. * [en]Show the floating action button.[/en]
  194. * [ja][/ja]
  195. */
  196. }, {
  197. key: 'show',
  198. value: function show() {
  199. this.toggle(true);
  200. }
  201. /**
  202. * @method hide
  203. * @signature hide()
  204. * @description
  205. * [en]Hide the floating action button.[/en]
  206. * [ja][/ja]
  207. */
  208. }, {
  209. key: 'hide',
  210. value: function hide() {
  211. this.toggle(false);
  212. }
  213. /**
  214. * @method toggle
  215. * @signature toggle()
  216. * @description
  217. * [en]Toggle the visibility of the button.[/en]
  218. * [ja][/ja]
  219. */
  220. }, {
  221. key: 'toggle',
  222. value: function toggle() {
  223. var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !this.visible;
  224. this._manuallyHidden = !action;
  225. this._toggle(action);
  226. }
  227. }, {
  228. key: '_toggle',
  229. value: function _toggle() {
  230. var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !this.visible;
  231. var isBottom = (this.getAttribute('position') || '').indexOf('bottom') >= 0;
  232. var translate = isBottom ? 'translate3d(0px, -' + (util.globals.fabOffset || 0) + 'px, 0px)' : '';
  233. styler(this, { transform: translate + ' scale(' + Number(action) + ')' });
  234. }
  235. /**
  236. * @property disabled
  237. * @type {Boolean}
  238. * @description
  239. * [en]Whether the element is disabled or not.[/en]
  240. * [ja]無効化されている場合に`true`。[/ja]
  241. */
  242. }, {
  243. key: 'disabled',
  244. set: function set(value) {
  245. return util.toggleAttribute(this, 'disabled', value);
  246. },
  247. get: function get() {
  248. return this.hasAttribute('disabled');
  249. }
  250. /**
  251. * @property visible
  252. * @readonly
  253. * @type {Boolean}
  254. * @description
  255. * [en]Whether the element is visible or not.[/en]
  256. * [ja]要素が見える場合に`true`。[/ja]
  257. */
  258. }, {
  259. key: 'visible',
  260. get: function get() {
  261. return this.style.transform.indexOf('scale(0)') === -1 && this.style.display !== 'none';
  262. }
  263. }], [{
  264. key: 'observedAttributes',
  265. get: function get() {
  266. return ['modifier', 'ripple', 'position', 'class'];
  267. }
  268. }]);
  269. return FabElement;
  270. }(BaseElement);
  271. export default FabElement;
  272. onsElements.Fab = FabElement;
  273. customElements.define('ons-fab', FabElement);