123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551 |
- import _setImmediate from 'babel-runtime/core-js/set-immediate';
- import _Promise from 'babel-runtime/core-js/promise';
- 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';
- import styler from '../ons/styler';
-
- var defaultClassName = 'speed-dial';
- var scheme = {
- '': 'speed-dial--*'
- };
-
-
-
- var SpeedDialElement = function (_BaseElement) {
- _inherits(SpeedDialElement, _BaseElement);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- function SpeedDialElement() {
- _classCallCheck(this, SpeedDialElement);
-
- var _this = _possibleConstructorReturn(this, (SpeedDialElement.__proto__ || _Object$getPrototypeOf(SpeedDialElement)).call(this));
-
- contentReady(_this, function () {
- _this._compile();
- });
-
- _this._itemShown = false;
- _this._boundOnClick = _this._onClick.bind(_this);
- return _this;
- }
-
- _createClass(SpeedDialElement, [{
- key: '_compile',
- value: function _compile() {
- this.classList.add(defaultClassName);
- autoStyle.prepare(this);
- this._updateRipple();
- ModifierUtil.initModifier(this, scheme);
-
- if (this.hasAttribute('direction')) {
- this._updateDirection(this.getAttribute('direction'));
- } else {
- this._updateDirection('up');
- }
-
- this._updatePosition();
- }
- }, {
- 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;
- case 'ripple':
- contentReady(this, function () {
- return _this2._updateRipple();
- });
- break;
- case 'direction':
- contentReady(this, function () {
- return _this2._updateDirection(current);
- });
- break;
- case 'position':
- contentReady(this, function () {
- return _this2._updatePosition();
- });
- break;
- }
- }
- }, {
- key: 'connectedCallback',
- value: function connectedCallback() {
- this.addEventListener('click', this._boundOnClick, false);
- }
- }, {
- key: 'disconnectedCallback',
- value: function disconnectedCallback() {
- this.removeEventListener('click', this._boundOnClick, false);
- }
- }, {
- key: '_onClick',
- value: function _onClick(e) {
- if (this.onClick) {
- this.onClick.apply(this);
- return _Promise.resolve();
- } else if (!this.disabled && this.visible) {
- return this.toggleItems();
- }
- }
- }, {
- key: '_show',
- value: function _show() {
- if (!this.inline) {
- return this.show();
- }
- return _Promise.resolve();
- }
- }, {
- key: '_hide',
- value: function _hide() {
- var _this3 = this;
-
- return new _Promise(function (resolve) {
- if (!_this3.inline) {
- _setImmediate(function () {
- return _this3.hide().then(resolve);
- });
- } else {
- resolve();
- }
- });
- }
- }, {
- key: '_updateRipple',
- value: function _updateRipple() {
- if (this._fab) {
- this.hasAttribute('ripple') ? this._fab.setAttribute('ripple', '') : this._fab.removeAttribute('ripple');
- }
- }
- }, {
- key: '_updateDirection',
- value: function _updateDirection(direction) {
- var children = this.items;
- for (var i = 0; i < children.length; i++) {
- styler(children[i], {
- transitionDelay: 25 * i + 'ms',
- bottom: 'auto',
- right: 'auto',
- top: 'auto',
- left: 'auto'
- });
- }
- switch (direction) {
- case 'up':
- for (var _i = 0; _i < children.length; _i++) {
- children[_i].style.bottom = 72 + 56 * _i + 'px';
- children[_i].style.right = '8px';
- }
- break;
- case 'down':
- for (var _i2 = 0; _i2 < children.length; _i2++) {
- children[_i2].style.top = 72 + 56 * _i2 + 'px';
- children[_i2].style.left = '8px';
- }
- break;
- case 'left':
- for (var _i3 = 0; _i3 < children.length; _i3++) {
- children[_i3].style.top = '8px';
- children[_i3].style.right = 72 + 56 * _i3 + 'px';
- }
- break;
- case 'right':
- for (var _i4 = 0; _i4 < children.length; _i4++) {
- children[_i4].style.top = '8px';
- children[_i4].style.left = 72 + 56 * _i4 + 'px';
- }
- break;
- default:
- util.throw('Argument must be one of up, down, left or right.');
- }
- }
- }, {
- key: '_updatePosition',
- value: function _updatePosition() {
- var position = this.getAttribute('position');
- this.classList.remove('fab--top__left', 'fab--bottom__right', 'fab--bottom__left', 'fab--top__right', 'fab--top__center', 'fab--bottom__center');
- switch (position) {
- case 'top right':
- case 'right top':
- this.classList.add('fab--top__right');
- break;
- case 'top left':
- case 'left top':
- this.classList.add('fab--top__left');
- break;
- case 'bottom right':
- case 'right bottom':
- this.classList.add('fab--bottom__right');
- break;
- case 'bottom left':
- case 'left bottom':
- this.classList.add('fab--bottom__left');
- break;
- case 'center top':
- case 'top center':
- this.classList.add('fab--top__center');
- break;
- case 'center bottom':
- case 'bottom center':
- this.classList.add('fab--bottom__center');
- break;
- default:
- break;
- }
- }
- }, {
- key: '_getTranslate',
- value: function _getTranslate() {
- var isBottom = (this.getAttribute('position') || '').indexOf('bottom') >= 0;
- var translate = isBottom ? 'translate3d(0px, -' + (util.globals.fabOffset || 0) + 'px, 0px) ' : '';
- return translate;
- }
-
-
-
-
- }, {
- key: 'show',
- value: function show() {
- this._fab.show();
- styler(this, { transform: this._getTranslate });
- return _Promise.resolve();
- }
-
-
-
-
- }, {
- key: 'hide',
- value: function hide() {
- var _this4 = this;
-
- return this.hideItems().then(function () {
- return _this4._fab.hide();
- });
- }
-
-
-
-
- }, {
- key: 'showItems',
- value: function showItems() {
- if (this.hasAttribute('direction')) {
- this._updateDirection(this.getAttribute('direction'));
- } else {
- this._updateDirection('up');
- }
-
- var totalDelay = 0;
- if (!this._itemShown) {
- var children = this.items;
- for (var i = 0; i < children.length; i++) {
- var delay = 25 * i;
- totalDelay += delay;
- styler(children[i], {
- transform: 'scale(1)',
- transitionDelay: delay + 'ms'
- });
- }
- totalDelay += 50;
-
- this._itemShown = true;
- util.triggerElementEvent(this, 'open');
- }
-
- var deferred = util.defer();
- setTimeout(deferred.resolve, totalDelay);
- return deferred.promise;
- }
-
-
-
-
- }, {
- key: 'hideItems',
- value: function hideItems() {
- var totalDelay = 0;
- if (this._itemShown) {
- var children = this.items;
- for (var i = 0; i < children.length; i++) {
- var delay = 25 * (children.length - i);
- totalDelay += delay;
- styler(children[i], {
- transform: 'scale(0)',
- transitionDelay: delay + 'ms'
- });
- }
- totalDelay += 50;
-
- this._itemShown = false;
- util.triggerElementEvent(this, 'close');
- }
-
- var deferred = util.defer();
- setTimeout(deferred.resolve, totalDelay);
- return deferred.promise;
- }
-
-
-
-
- }, {
- key: 'isOpen',
-
-
-
-
- value: function isOpen() {
- return this._itemShown;
- }
-
-
-
-
- }, {
- key: 'toggle',
- value: function toggle() {
- return this.visible ? this.hide() : this.show();
- }
-
-
-
-
- }, {
- key: 'toggleItems',
- value: function toggleItems() {
- return this.isOpen() ? this.hideItems() : this.showItems();
- }
- }, {
- key: 'items',
- get: function get() {
- return util.arrayFrom(this.querySelectorAll('ons-speed-dial-item'));
- }
- }, {
- key: '_fab',
- get: function get() {
- return util.findChild(this, 'ons-fab');
- }
- }, {
- key: 'disabled',
- set: function set(value) {
- if (value) {
- this.hideItems();
- }
- util.arrayFrom(this.children).forEach(function (e) {
- util.match(e, '.fab') && util.toggleAttribute(e, 'disabled', value);
- });
-
- return util.toggleAttribute(this, 'disabled', value);
- },
- get: function get() {
- return this.hasAttribute('disabled');
- }
-
-
-
-
- }, {
- key: 'inline',
- get: function get() {
- return this.hasAttribute('inline');
- }
-
-
-
-
- }, {
- key: 'visible',
- get: function get() {
- return this._fab.visible && this.style.display !== 'none';
- }
- }], [{
- key: 'observedAttributes',
- get: function get() {
- return ['class', 'modifier', 'ripple', 'direction', 'position'];
- }
- }, {
- key: 'events',
- get: function get() {
- return ['open', 'close'];
- }
- }]);
-
- return SpeedDialElement;
- }(BaseElement);
-
- export default SpeedDialElement;
-
-
- onsElements.SpeedDial = SpeedDialElement;
- customElements.define('ons-speed-dial', SpeedDialElement);
|