UNPKG

devextreme

Version:

HTML5 JavaScript Component Suite for Responsive Web Development

427 lines (384 loc) • 15.3 kB
"use strict"; var Component = require("../../core/component"), each = require("../../core/utils/iterator").each, extend = require("../../core/utils/extend").extend, devices = require("../../core/devices"), fx = require("../fx"); var directionPostfixes = { forward: " dx-forward", backward: " dx-backward", none: " dx-no-direction", undefined: " dx-no-direction" }; var optionPrefix = "preset_"; var AnimationPresetCollection = Component.inherit({ ctor: function ctor() { this.callBase.apply(this, arguments); this._registeredPresets = []; this.resetToDefaults(); }, _getDefaultOptions: function _getDefaultOptions() { return extend(this.callBase(), { defaultAnimationDuration: 400, defaultAnimationDelay: 0, defaultStaggerAnimationDuration: 300, defaultStaggerAnimationDelay: 40, defaultStaggerAnimationStartDelay: 500 // hack for better animations on ipad mini }); }, _defaultOptionsRules: function _defaultOptionsRules() { return this.callBase().concat([{ device: function device(_device) { return _device.phone; }, options: { defaultStaggerAnimationDuration: 350, defaultStaggerAnimationDelay: 50, defaultStaggerAnimationStartDelay: 0 } }, { // T254756 device: function device() { return devices.current().android || devices.real.android; }, options: { defaultAnimationDelay: 100 } }]); }, _getPresetOptionName: function _getPresetOptionName(animationName) { return optionPrefix + animationName; }, // T257755 _createAndroidSlideAnimationConfig: function _createAndroidSlideAnimationConfig(throughOpacity, widthMultiplier) { var that = this; var createBaseConfig = function createBaseConfig(configModifier) { return { type: "slide", delay: configModifier.delay === undefined ? that.option("defaultAnimationDelay") : configModifier.delay, duration: configModifier.duration === undefined ? that.option("defaultAnimationDuration") : configModifier.duration }; }; return { enter: function enter($element, configModifier) { var width = $element.parent().width() * widthMultiplier, direction = configModifier.direction, config = createBaseConfig(configModifier); config.to = { left: 0, opacity: 1 }; if (direction === "forward") { config.from = { left: width, opacity: throughOpacity }; } else if (direction === "backward") { config.from = { left: -width, opacity: throughOpacity }; } else { config.from = { left: 0, opacity: 0 }; } return fx.createAnimation($element, config); }, leave: function leave($element, configModifier) { var width = $element.parent().width() * widthMultiplier, direction = configModifier.direction, config = createBaseConfig(configModifier); config.from = { left: 0, opacity: 1 }; if (direction === "forward") { config.to = { left: -width, opacity: throughOpacity }; } else if (direction === "backward") { config.to = { left: width, opacity: throughOpacity }; } else { config.to = { left: 0, opacity: 0 }; } return fx.createAnimation($element, config); } }; }, _createOpenDoorConfig: function _createOpenDoorConfig() { var that = this; var createBaseConfig = function createBaseConfig(configModifier) { return { type: "css", extraCssClasses: "dx-opendoor-animation", delay: configModifier.delay === undefined ? that.option("defaultAnimationDelay") : configModifier.delay, duration: configModifier.duration === undefined ? that.option("defaultAnimationDuration") : configModifier.duration }; }; return { enter: function enter($element, configModifier) { var direction = configModifier.direction, config = createBaseConfig(configModifier); config.delay = direction === "none" ? config.delay : config.duration; config.from = "dx-enter dx-opendoor-animation" + directionPostfixes[direction]; config.to = "dx-enter-active"; return fx.createAnimation($element, config); }, leave: function leave($element, configModifier) { var direction = configModifier.direction, config = createBaseConfig(configModifier); config.from = "dx-leave dx-opendoor-animation" + directionPostfixes[direction]; config.to = "dx-leave-active"; return fx.createAnimation($element, config); } }; }, _createWinPopConfig: function _createWinPopConfig() { var that = this, baseConfig = { type: "css", extraCssClasses: "dx-win-pop-animation", duration: that.option("defaultAnimationDuration") }; return { enter: function enter($element, configModifier) { var config = baseConfig, direction = configModifier.direction; config.delay = direction === "none" ? that.option("defaultAnimationDelay") : that.option("defaultAnimationDuration") / 2; config.from = "dx-enter dx-win-pop-animation" + directionPostfixes[direction]; config.to = "dx-enter-active"; return fx.createAnimation($element, config); }, leave: function leave($element, configModifier) { var config = baseConfig, direction = configModifier.direction; config.delay = that.option("defaultAnimationDelay"); config.from = "dx-leave dx-win-pop-animation" + directionPostfixes[direction]; config.to = "dx-leave-active"; return fx.createAnimation($element, config); } }; }, resetToDefaults: function resetToDefaults() { this.clear(); this.registerDefaultPresets(); this.applyChanges(); }, clear: function clear(name) { var that = this, newRegisteredPresets = []; each(this._registeredPresets, function (index, preset) { if (!name || name === preset.name) { that.option(that._getPresetOptionName(preset.name), undefined); } else { newRegisteredPresets.push(preset); } }); this._registeredPresets = newRegisteredPresets; this.applyChanges(); }, registerPreset: function registerPreset(name, config) { this._registeredPresets.push({ name: name, config: config }); }, applyChanges: function applyChanges() { var that = this; var customRules = []; each(this._registeredPresets, function (index, preset) { var rule = { device: preset.config.device, options: {} }; rule.options[that._getPresetOptionName(preset.name)] = preset.config.animation; customRules.push(rule); }); this._setOptionsByDevice(customRules); }, getPreset: function getPreset(name) { var result = name; while (typeof result === "string") { result = this.option(this._getPresetOptionName(result)); } return result; }, registerDefaultPresets: function registerDefaultPresets() { this.registerPreset("pop", { animation: { extraCssClasses: "dx-android-pop-animation", delay: this.option("defaultAnimationDelay"), duration: this.option("defaultAnimationDuration") } }); this.registerPreset("openDoor", { animation: this._createOpenDoorConfig() }); this.registerPreset("win-pop", { animation: this._createWinPopConfig() }); this.registerPreset("fade", { animation: { extraCssClasses: "dx-fade-animation", delay: this.option("defaultAnimationDelay"), duration: this.option("defaultAnimationDuration") } }); this.registerPreset("slide", { device: function device() { return devices.current().android || devices.real.android; }, animation: this._createAndroidSlideAnimationConfig(1, 1) }); this.registerPreset("slide", { device: function device() { return !devices.current().android && !devices.real.android; }, animation: { extraCssClasses: "dx-slide-animation", delay: this.option("defaultAnimationDelay"), duration: this.option("defaultAnimationDuration") } }); this.registerPreset("ios7-slide", { animation: { extraCssClasses: "dx-ios7-slide-animation", delay: this.option("defaultAnimationDelay"), duration: this.option("defaultAnimationDuration") } }); this.registerPreset("overflow", { animation: { extraCssClasses: "dx-overflow-animation", delay: this.option("defaultAnimationDelay"), duration: this.option("defaultAnimationDuration") } }); this.registerPreset("ios7-toolbar", { device: function device() { return !devices.current().android && !devices.real.android; }, animation: { extraCssClasses: "dx-ios7-toolbar-animation", delay: this.option("defaultAnimationDelay"), duration: this.option("defaultAnimationDuration") } }); this.registerPreset("ios7-toolbar", { device: function device() { return devices.current().android || devices.real.android; }, animation: this._createAndroidSlideAnimationConfig(0, 0.4) }); this.registerPreset("stagger-fade", { animation: { extraCssClasses: "dx-fade-animation", staggerDelay: this.option("defaultStaggerAnimationDelay"), duration: this.option("defaultStaggerAnimationDuration"), delay: this.option("defaultStaggerAnimationStartDelay") } }); this.registerPreset("stagger-slide", { animation: { extraCssClasses: "dx-slide-animation", staggerDelay: this.option("defaultStaggerAnimationDelay"), duration: this.option("defaultStaggerAnimationDuration"), delay: this.option("defaultStaggerAnimationStartDelay") } }); this.registerPreset("stagger-fade-slide", { animation: { extraCssClasses: "dx-fade-slide-animation", staggerDelay: this.option("defaultStaggerAnimationDelay"), duration: this.option("defaultStaggerAnimationDuration"), delay: this.option("defaultStaggerAnimationStartDelay") } }); this.registerPreset("stagger-drop", { animation: { extraCssClasses: "dx-drop-animation", staggerDelay: this.option("defaultStaggerAnimationDelay"), duration: this.option("defaultStaggerAnimationDuration"), delay: this.option("defaultStaggerAnimationStartDelay") } }); this.registerPreset("stagger-fade-drop", { animation: { extraCssClasses: "dx-fade-drop-animation", staggerDelay: this.option("defaultStaggerAnimationDelay"), duration: this.option("defaultStaggerAnimationDuration"), delay: this.option("defaultStaggerAnimationStartDelay") } }); this.registerPreset("stagger-fade-rise", { animation: { extraCssClasses: "dx-fade-rise-animation", staggerDelay: this.option("defaultStaggerAnimationDelay"), duration: this.option("defaultStaggerAnimationDuration"), delay: this.option("defaultStaggerAnimationStartDelay") } }); this.registerPreset("stagger-3d-drop", { animation: { extraCssClasses: "dx-3d-drop-animation", staggerDelay: this.option("defaultStaggerAnimationDelay"), duration: this.option("defaultStaggerAnimationDuration"), delay: this.option("defaultStaggerAnimationStartDelay") } }); this.registerPreset("stagger-fade-zoom", { animation: { extraCssClasses: "dx-fade-zoom-animation", staggerDelay: this.option("defaultStaggerAnimationDelay"), duration: this.option("defaultStaggerAnimationDuration"), delay: this.option("defaultStaggerAnimationStartDelay") } }); } }); exports.PresetCollection = AnimationPresetCollection; /** * @name animationPresetsMethods.resetToDefaults * @publicName resetToDefaults() */ /** * @name animationPresetsMethods.clear * @publicName clear() */ /** * @name animationPresetsMethods.clear * @publicName clear(name) * @param1 name:string */ /** * @name animationPresetsMethods.registerPreset * @publicName registerPreset(name, config) * @param1 name:string * @param2 config:object * @param2_field1 animation:animationConfig * @param2_field2 device:Device */ /** * @name animationPresetsMethods.applyChanges * @publicName applyChanges() */ /** * @name animationPresetsMethods.getPreset * @publicName getPreset(name) * @param1 name:string * @return any */ /** * @name animationPresetsMethods.registerDefaultPresets * @publicName registerDefaultPresets() */ var animationPresets = new AnimationPresetCollection(); exports.presets = animationPresets;