123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816 |
- import _Promise from 'babel-runtime/core-js/promise';
- import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
- import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
- import _inherits from 'babel-runtime/helpers/inherits';
- import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
- import _createClass from 'babel-runtime/helpers/createClass';
- import _setImmediate from 'babel-runtime/core-js/set-immediate';
-
-
- import onsElements from '../ons/elements';
- import util from '../ons/util';
- import AnimatorFactory from '../ons/internal/animator-factory';
- import orientation from '../ons/orientation';
- import internal from '../ons/internal';
- import ModifierUtil from '../ons/internal/modifier-util';
- import BaseElement from './base/base-element';
- import SplitterAnimator from './ons-splitter/animator';
- import SwipeReveal from '../ons/internal/swipe-reveal';
- import DoorLock from '../ons/doorlock';
- import contentReady from '../ons/content-ready';
- import { PageLoader, defaultPageLoader } from '../ons/page-loader';
- import SplitterElement from './ons-splitter';
-
- var SPLIT_MODE = 'split';
- var COLLAPSE_MODE = 'collapse';
- var CLOSED_STATE = 'closed';
- var OPEN_STATE = 'open';
- var CHANGING_STATE = 'changing';
-
- var rewritables = {
-
-
- ready: function ready(splitterSideElement, callback) {
- _setImmediate(callback);
- }
- };
-
- var CollapseDetection = function () {
- function CollapseDetection(element, target) {
- _classCallCheck(this, CollapseDetection);
-
- this._element = element;
- this._onChange = this._onChange.bind(this);
- target && this.changeTarget(target);
- }
-
- _createClass(CollapseDetection, [{
- key: 'changeTarget',
- value: function changeTarget(target) {
- this.disable();
- this._target = target;
- if (target) {
- this._orientation = ['portrait', 'landscape'].indexOf(target) !== -1;
- this.activate();
- }
- }
- }, {
- key: '_match',
- value: function _match(value) {
- if (this._orientation) {
- return this._target === (value.isPortrait ? 'portrait' : 'landscape');
- }
- return value.matches;
- }
- }, {
- key: '_onChange',
- value: function _onChange(value) {
- this._element._updateMode(this._match(value) ? COLLAPSE_MODE : SPLIT_MODE);
- }
- }, {
- key: 'activate',
- value: function activate() {
- if (this._orientation) {
- orientation.on('change', this._onChange);
- this._onChange({ isPortrait: orientation.isPortrait() });
- } else {
- this._queryResult = window.matchMedia(this._target);
- this._queryResult.addListener(this._onChange);
- this._onChange(this._queryResult);
- }
- }
- }, {
- key: 'disable',
- value: function disable() {
- if (this._orientation) {
- orientation.off('change', this._onChange);
- } else if (this._queryResult) {
- this._queryResult.removeListener(this._onChange);
- this._queryResult = null;
- }
- }
- }]);
-
- return CollapseDetection;
- }();
-
- var widthToPx = function widthToPx(width, parent) {
- var _ref = [parseInt(width, 10), /px/.test(width)],
- value = _ref[0],
- px = _ref[1];
-
- return px ? value : Math.round(parent.offsetWidth * value / 100);
- };
-
-
-
- var SplitterSideElement = function (_BaseElement) {
- _inherits(SplitterSideElement, _BaseElement);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- function SplitterSideElement() {
- _classCallCheck(this, SplitterSideElement);
-
- var _this = _possibleConstructorReturn(this, (SplitterSideElement.__proto__ || _Object$getPrototypeOf(SplitterSideElement)).call(this));
-
- _this._page = null;
- _this._state = CLOSED_STATE;
- _this._lock = new DoorLock();
- _this._pageLoader = defaultPageLoader;
- _this._collapseDetection = new CollapseDetection(_this);
-
- _this._animatorFactory = new AnimatorFactory({
- animators: SplitterElement.animators,
- baseClass: SplitterAnimator,
- baseClassName: 'SplitterAnimator',
- defaultAnimation: _this.getAttribute('animation')
- });
-
- contentReady(_this, function () {
-
- _this.attributeChangedCallback('width');
- if (!_this.hasAttribute('side')) {
- _this.setAttribute('side', 'left');
- }
-
- rewritables.ready(_this, function () {
- var page = _this._page || _this.getAttribute('page');
- page && _this.load(page);
- });
- });
- return _this;
- }
-
- _createClass(SplitterSideElement, [{
- key: 'connectedCallback',
- value: function connectedCallback() {
- var _this2 = this;
-
- if (!util.match(this.parentNode, 'ons-splitter')) {
- util.throw('Parent must be an ons-splitter element');
- }
-
- this._swipe = new SwipeReveal({
- element: this,
- elementHandler: this.parentElement,
- swipeMax: function swipeMax() {
- _this2._onSwipe && _this2._onSwipe(1, _this2._animationOpt);
- _this2.open();
- },
- swipeMid: function swipeMid(distance, width) {
- _this2._onSwipe && _this2._onSwipe(distance / width);
- _this2._animator.translate(distance);
- },
- swipeMin: function swipeMin() {
- _this2._onSwipe && _this2._onSwipe(0, _this2._animationOpt);
- _this2.close();
- },
- getThreshold: function getThreshold() {
- return Math.max(0, Math.min(1, parseFloat(_this2.getAttribute('open-threshold')) || 0.3));
- },
- getSide: function getSide() {
- return _this2.side;
- },
- isInitialState: function isInitialState() {
- var closed = _this2._state === CLOSED_STATE;
- _this2._state = CHANGING_STATE;
- return closed;
- },
- ignoreSwipe: function ignoreSwipe(event, distance) {
- var isOpen = _this2.isOpen;
- var validDrag = function validDrag(d) {
- return _this2.side === 'left' ? d === 'left' && isOpen || d === 'right' && !isOpen : d === 'left' && !isOpen || d === 'right' && isOpen;
- };
-
- var area = Math.max(0, parseInt(_this2.getAttribute('swipe-target-width'), 10) || 0);
-
- return _this2._mode === SPLIT_MODE || _this2._lock.isLocked() || _this2._isOtherSideOpen() || !validDrag(event.gesture.direction) || !isOpen && area !== 0 && distance > area;
- }
- });
-
- this.attributeChangedCallback('swipeable');
-
- contentReady(this, function () {
- _this2.constructor.observedAttributes.forEach(function (attr) {
- return _this2.attributeChangedCallback(attr, null, _this2.getAttribute(attr));
- });
- });
- }
- }, {
- key: 'disconnectedCallback',
- value: function disconnectedCallback() {
- this._swipe && this._swipe.dispose();
- this._animator = this._animationOpt = this._swipe = null;
- }
- }, {
- key: 'attributeChangedCallback',
- value: function attributeChangedCallback(name, last, current) {
- switch (name) {
- case 'swipeable':
- this._swipe && this._swipe.update();
- break;
- case 'width':
- current = this.getAttribute('width');
- this.style.width = /^\d+(px|%)$/.test(current) ? current : '80%';
- break;
- default:
- this[util.camelize('_update-' + name)](current);
- }
- }
- }, {
- key: '_emitEvent',
- value: function _emitEvent(name) {
- if (name.slice(0, 3) !== 'pre') {
- return util.triggerElementEvent(this, name, { side: this });
- }
- var isCanceled = false;
-
- util.triggerElementEvent(this, name, {
- side: this,
- cancel: function cancel() {
- return isCanceled = true;
- }
- });
-
- return isCanceled;
- }
- }, {
- key: '_isOtherSideOpen',
- value: function _isOtherSideOpen() {
- var _this3 = this;
-
- return !!util.findChild(this.parentElement, function (el) {
- return el instanceof _this3.constructor && el !== _this3 && el._mode === COLLAPSE_MODE && el.isOpen;
- });
- }
- }, {
- key: '_updateCollapse',
- value: function _updateCollapse() {
- var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.getAttribute('collapse');
-
- if (value === null || value === 'split') {
- this._collapseDetection.disable();
- return this._updateMode(SPLIT_MODE);
- }
- if (value === '' || value === 'collapse') {
- this._collapseDetection.disable();
- return this._updateMode(COLLAPSE_MODE);
- }
-
- this._collapseDetection.changeTarget(value);
- }
- }, {
- key: '_updateMode',
- value: function _updateMode(mode) {
- if (mode !== this._mode) {
- this._mode = mode;
- this.setAttribute('mode', mode);
-
- if (mode === SPLIT_MODE) {
- this._animator && this._animator.deactivate();
- this._state = CLOSED_STATE;
- } else {
- this._animator && this._animator.activate(this);
- this._state === OPEN_STATE && this._animator.open();
- }
-
- util.triggerElementEvent(this, 'modechange', { side: this, mode: mode });
- }
- }
- }, {
- key: '_updateAnimation',
- value: function _updateAnimation() {
- var animation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.getAttribute('animation');
-
- if (this.parentNode) {
- this._animator && this._animator.deactivate();
- this._animator = this._animatorFactory.newAnimator({ animation: animation });
- this._animator.activate(this);
- this._animationOpt = {
- timing: this._animator.duration,
- duration: this._animator.duration
- };
- }
- }
- }, {
- key: '_updateAnimationOptions',
- value: function _updateAnimationOptions() {
- var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.getAttribute('animation-options');
-
- this._animator.updateOptions(AnimatorFactory.parseAnimationOptionsString(value));
- }
-
-
-
-
- }, {
- key: 'open',
-
-
-
-
- value: function open(options) {
- return this.toggle(options, true);
- }
-
-
-
-
- }, {
- key: 'close',
- value: function close(options) {
- return this.toggle(options, false);
- }
-
-
-
-
- }, {
- key: 'toggle',
- value: function toggle() {
- var _this4 = this;
-
- var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
- var force = arguments[1];
-
- var shouldOpen = typeof force === 'boolean' ? force : !this.isOpen;
- var action = shouldOpen ? 'open' : 'close';
- var FINAL_STATE = shouldOpen ? OPEN_STATE : CLOSED_STATE;
-
- if (this._mode === SPLIT_MODE) {
- return _Promise.resolve(false);
- }
- if (this._state === FINAL_STATE) {
- return _Promise.resolve(this);
- }
- if (this._lock.isLocked()) {
- return _Promise.reject('Another splitter-side action is already running.');
- }
- if (shouldOpen && this._isOtherSideOpen()) {
- return _Promise.reject('Another menu is already open.');
- }
- if (this._emitEvent('pre' + action)) {
- return _Promise.reject('Canceled in pre' + action + ' event.');
- }
-
- var unlock = this._lock.lock();
- this._state = CHANGING_STATE;
-
- if (options.animation) {
- this._updateAnimation(options.animation);
- }
-
- return new _Promise(function (resolve) {
- _this4._animator[action](function () {
- util.iosPageScrollFix(shouldOpen);
- _this4._state = FINAL_STATE;
- unlock();
- _this4._emitEvent('post' + action);
- options.callback instanceof Function && options.callback(_this4);
- resolve(_this4);
- });
- });
- }
-
-
-
-
- }, {
- key: 'load',
- value: function load(page) {
- var _this5 = this;
-
- var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
- this._page = page;
- var callback = options.callback || function () {};
-
- return new _Promise(function (resolve) {
- var oldContent = _this5._content || null;
-
- _this5._pageLoader.load({ page: page, parent: _this5 }, function (pageElement) {
- if (oldContent) {
- _this5._pageLoader.unload(oldContent);
- oldContent = null;
- }
-
- _setImmediate(function () {
- return _this5._show();
- });
-
- callback(pageElement);
- resolve(pageElement);
- });
- });
- }
- }, {
- key: '_show',
- value: function _show() {
- if (this._content) {
- this._content._show();
- }
- }
- }, {
- key: '_hide',
- value: function _hide() {
- if (this._content) {
- this._content._hide();
- }
- }
- }, {
- key: '_destroy',
- value: function _destroy() {
- if (this._content) {
- this._pageLoader.unload(this._content);
- }
- this.remove();
- }
- }, {
- key: 'side',
- get: function get() {
- return this.getAttribute('side') === 'right' ? 'right' : 'left';
- }
- }, {
- key: 'page',
- get: function get() {
- return this._page;
- }
-
-
-
- ,
- set: function set(page) {
- this._page = page;
- }
- }, {
- key: '_content',
- get: function get() {
- return this.children[0];
- }
-
-
-
-
- }, {
- key: 'pageLoader',
- get: function get() {
- return this._pageLoader;
- },
- set: function set(loader) {
- if (!(loader instanceof PageLoader)) {
- util.throwPageLoader();
- }
- this._pageLoader = loader;
- }
-
-
-
-
- }, {
- key: 'mode',
- get: function get() {
- return this._mode;
- }
-
-
-
-
- }, {
- key: 'onSwipe',
- get: function get() {
- return this._onSwipe;
- },
- set: function set(value) {
- if (value && !(value instanceof Function)) {
- util.throw('"onSwipe" must be a function');
- }
- this._onSwipe = value;
- }
-
-
-
-
- }, {
- key: 'isOpen',
- get: function get() {
- return this._mode === COLLAPSE_MODE && this._state !== CLOSED_STATE;
- }
- }], [{
- key: 'observedAttributes',
- get: function get() {
- return ['animation', 'width', 'collapse', 'swipeable', 'animation-options'];
- }
- }, {
- key: 'events',
- get: function get() {
- return ['preopen', 'postopen', 'preclose', 'postclose', 'modechange'];
- }
- }, {
- key: 'rewritables',
- get: function get() {
- return rewritables;
- }
- }]);
-
- return SplitterSideElement;
- }(BaseElement);
-
- export default SplitterSideElement;
-
-
- onsElements.SplitterSide = SplitterSideElement;
- customElements.define('ons-splitter-side', SplitterSideElement);
|