diff --git a/js/views/drawerView.js b/js/views/drawerView.js index 682d2098..f083727b 100644 --- a/js/views/drawerView.js +++ b/js/views/drawerView.js @@ -7,6 +7,7 @@ import { transitionNextFrame, transitionsEnded } from '../transitions'; +import logging from '../logging'; class DrawerView extends Backbone.View { @@ -42,13 +43,40 @@ class DrawerView extends Backbone.View { this._isVisible = false; this.disableAnimation = Adapt.config.get('_disableAnimation') ?? false; this.$el.toggleClass('disable-animation', Boolean(this.disableAnimation)); - this._globalDrawerPosition = Adapt.config.get('_drawer')?._position ?? 'auto'; - const drawerDuration = Adapt.config.get('_drawer')?._duration ?? 400; - document.documentElement.style.setProperty('--adapt-drawer-duration', `${drawerDuration}ms`); + this._globalDrawerPosition = this.config?._position ?? 'auto'; + const drawerDuration = this.config?._duration ?? 400; + let showEasing = this.config?._showEasing || 'easeOutQuart'; + let hideEasing = this.config?._hideEasing || 'easeInQuart'; + showEasing = showEasing.toLowerCase(); + hideEasing = hideEasing.toLowerCase(); + if (showEasing.includes('elastic')) { + logging.removed('drawer show elastic easing is replaced with quint'); + showEasing = showEasing.replace('elastic', 'quint'); + } + if (showEasing.includes('bounce')) { + logging.removed('drawer show bounce easing is replaced with back'); + showEasing = showEasing.replace('bounce', 'back'); + } + if (hideEasing.includes('elastic')) { + logging.removed('drawer hide elastic easing is replaced with quint'); + hideEasing = hideEasing.replace('elastic', 'quint'); + } + if (hideEasing.includes('bounce')) { + logging.removed('drawer hide bounce easing is replaced with back'); + hideEasing = hideEasing.replace('bounce', 'back'); + } + const documentElementStyle = document.documentElement.style; + documentElementStyle.setProperty('--adapt-drawer-duration', `${drawerDuration}ms`); + documentElementStyle.setProperty('--adapt-drawer-show-easing', `var(--adapt-cubic-bezier-${showEasing})`); + documentElementStyle.setProperty('--adapt-drawer-hide-easing', `var(--adapt-cubic-bezier-${hideEasing})`); this.setupEventListeners(); this.render(); } + get config () { + return Adapt.config.get('_drawer'); + } + setupEventListeners() { this.onKeyUp = this.onKeyUp.bind(this); $(window).on('keyup', this.onKeyUp); diff --git a/less/_defaults/easing.less b/less/_defaults/easing.less new file mode 100644 index 00000000..14f4a535 --- /dev/null +++ b/less/_defaults/easing.less @@ -0,0 +1,44 @@ +// sources: +// https://joshcollinsworth.com/blog/easing-curves +// https://easings.net/ + +:root { + --adapt-cubic-bezier-linear: linear; + --adapt-cubic-bezier-ease: ease; + --adapt-cubic-bezier-easein: ease-in; + --adapt-cubic-bezier-easeout: ease-out; + --adapt-cubic-bezier-eastinout: ease-in-out; + --adapt-cubic-bezier-easeinsine: cubic-bezier(0.47, 0, 0.745, 0.715); + --adapt-cubic-bezier-easeoutsine: cubic-bezier(0.39, 0.575, 0.565, 1); + --adapt-cubic-bezier-easeinoutsine: cubic-bezier(0.445, 0.05, 0.55, 0.95); + --adapt-cubic-bezier-easeinquad: cubic-bezier(0.55, 0.085, 0.68, 0.53); + --adapt-cubic-bezier-easeoutquad: cubic-bezier(0.25, 0.46, 0.45, 0.94); + --adapt-cubic-bezier-easeinoutquad: cubic-bezier(0.455, 0.03, 0.515, 0.955); + --adapt-cubic-bezier-easeincubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); + --adapt-cubic-bezier-easeoutcubic: cubic-bezier(0.215, 0.61, 0.355, 1); + --adapt-cubic-bezier-easeinoutcubic: cubic-bezier(0.645, 0.045, 0.355, 1); + --adapt-cubic-bezier-easeinquart: cubic-bezier(0.895, 0.03, 0.685, 0.22); + --adapt-cubic-bezier-easeoutquart: cubic-bezier(0.165, 0.84, 0.44, 1); + --adapt-cubic-bezier-easeinoutquart: cubic-bezier(0.77, 0, 0.175, 1); + --adapt-cubic-bezier-easeinquint: cubic-bezier(0.755, 0.05, 0.855, 0.06); + --adapt-cubic-bezier-easeoutquint: cubic-bezier(0.23, 1, 0.32, 1); + --adapt-cubic-bezier-easeinoutquint: cubic-bezier(0.86, 0, 0.07, 1); + --adapt-cubic-bezier-easeinexpo: cubic-bezier(0.95, 0.05, 0.795, 0.035); + --adapt-cubic-bezier-easeoutexpo: cubic-bezier(0.19, 1, 0.22, 1); + --adapt-cubic-bezier-easeinoutexpo: cubic-bezier(1, 0, 0, 1); + --adapt-cubic-bezier-easeincirc: cubic-bezier(0.55, 0, 1, 0.45); + --adapt-cubic-bezier-easeoutcirc: cubic-bezier(0, 0.55, 0.45, 1); + --adapt-cubic-bezier-easeinoutcirc: cubic-bezier(0.85, 0, 0.15, 1); + --adapt-cubic-bezier-easeinback: cubic-bezier(0.6, -0.28, 0.735, 0.045); + --adapt-cubic-bezier-easeoutback: cubic-bezier(0.175, 0.885, 0.32, 1.275); + --adapt-cubic-bezier-easeinoutback: cubic-bezier(0.68, -0.55, 0.265, 1.55); + // note: the following cannot be represented with cubic-bezier + // elastic should be replaced with quint + // bounce should be replaced with back + // --adapt-cubic-bezier-easeinelastic + // --adapt-cubic-bezier-easeoutelastic + // --adapt-cubic-bezier-easeinoutelastic + // --adapt-cubic-bezier-easeinbounce + // --adapt-cubic-bezier-easeoutbounce + // --adapt-cubic-bezier-easeinoutbounce +} diff --git a/schema/config.model.schema b/schema/config.model.schema index de1e9f73..dc98b78e 100644 --- a/schema/config.model.schema +++ b/schema/config.model.schema @@ -244,6 +244,90 @@ "isSetting": false, "title": "", "properties": { + "_showEasing": { + "type": "string", + "required": true, + "default": "easeOutQuart", + "title": "Show Easing", + "inputType": { + "type": "Select", + "options": [ + "easeInSine", + "easeOutSine", + "easeInOutSine", + "easeInQuad", + "easeOutQuad", + "easeInOutQuad", + "easeInCubic", + "easeOutCubic", + "easeInOutCubic", + "easeInQuart", + "easeOutQuart", + "easeInOutQuart", + "easeInQuint", + "easeOutQuint", + "easeInOutQuint", + "easeInExpo", + "easeOutExpo", + "easeInOutExpo", + "easeInCirc", + "easeOutCirc", + "easeInOutCirc", + "easeInBack", + "easeOutBack", + "easeInOutBack", + "easeInElastic", + "easeOutElastic", + "easeInOutElastic", + "easeInBounce", + "easeOutBounce", + "easeInOutBounce" + ] + }, + "validators": ["required"] + }, + "_hideEasing": { + "type": "string", + "required": true, + "default": "easeInQuart", + "title": "Hide Easing", + "inputType": { + "type": "Select", + "options": [ + "easeInSine", + "easeOutSine", + "easeInOutSine", + "easeInQuad", + "easeOutQuad", + "easeInOutQuad", + "easeInCubic", + "easeOutCubic", + "easeInOutCubic", + "easeInQuart", + "easeOutQuart", + "easeInOutQuart", + "easeInQuint", + "easeOutQuint", + "easeInOutQuint", + "easeInExpo", + "easeOutExpo", + "easeInOutExpo", + "easeInCirc", + "easeOutCirc", + "easeInOutCirc", + "easeInBack", + "easeOutBack", + "easeInOutBack", + "easeInElastic", + "easeOutElastic", + "easeInOutElastic", + "easeInBounce", + "easeOutBounce", + "easeInOutBounce" + ] + }, + "validators": ["required"] + }, "_duration": { "type": "number", "required": true, diff --git a/schema/config.schema.json b/schema/config.schema.json index 06e1ccb6..14139f2e 100644 --- a/schema/config.schema.json +++ b/schema/config.schema.json @@ -215,6 +215,82 @@ "title": "Drawer animation", "default": {}, "properties": { + "_showEasing": { + "type": "string", + "title": "Opening easing function", + "default": "easeOutQuart", + "enum": [ + "easeInSine", + "easeOutSine", + "easeInOutSine", + "easeInQuad", + "easeOutQuad", + "easeInOutQuad", + "easeInCubic", + "easeOutCubic", + "easeInOutCubic", + "easeInQuart", + "easeOutQuart", + "easeInOutQuart", + "easeInQuint", + "easeOutQuint", + "easeInOutQuint", + "easeInExpo", + "easeOutExpo", + "easeInOutExpo", + "easeInCirc", + "easeOutCirc", + "easeInOutCirc", + "easeInBack", + "easeOutBack", + "easeInOutBack", + "easeInElastic", + "easeOutElastic", + "easeInOutElastic", + "easeInBounce", + "easeOutBounce", + "easeInOutBounce" + ], + "_backboneForms": "Select" + }, + "_hideEasing": { + "type": "string", + "title": "Closing easing function", + "default": "easeInQuart", + "enum": [ + "easeInSine", + "easeOutSine", + "easeInOutSine", + "easeInQuad", + "easeOutQuad", + "easeInOutQuad", + "easeInCubic", + "easeOutCubic", + "easeInOutCubic", + "easeInQuart", + "easeOutQuart", + "easeInOutQuart", + "easeInQuint", + "easeOutQuint", + "easeInOutQuint", + "easeInExpo", + "easeOutExpo", + "easeInOutExpo", + "easeInCirc", + "easeOutCirc", + "easeInOutCirc", + "easeInBack", + "easeOutBack", + "easeInOutBack", + "easeInElastic", + "easeOutElastic", + "easeInOutElastic", + "easeInBounce", + "easeOutBounce", + "easeInOutBounce" + ], + "_backboneForms": "Select" + }, "_duration": { "type": "number", "title": "Duration",