v-show-slide - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/v-show-slide.js

@@ -107,3 +107,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nvar VShowSlide = function () {\n  function VShowSlide() {\n    _classCallCheck(this, VShowSlide);\n\n    this.easingOptions = {\n      builtIn: ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'],\n      custom: {}\n    };\n  }\n\n  /**\n   * Called when plugin is initialized\n   * @param {Object} Vue The Vue instance\n   * @param {Object} options Options passed to plugin\n   */\n\n\n  _createClass(VShowSlide, [{\n    key: 'install',\n    value: function install(Vue, options) {\n      this.validateOptions(options);\n      Vue.directive('show-slide', {\n        bind: this.bind.bind(this),\n        inserted: this.inserted.bind(this),\n        update: this.update.bind(this)\n      });\n    }\n\n    /**\n     * Bind directive hook. Called only once, when the directive is first bound to the element.\n     * @param {Node} el Element directive is bound to\n     * @param {Object} binding Binding options\n     */\n\n  }, {\n    key: 'bind',\n    value: function bind(el, binding) {\n      this.parseArgs(binding);\n      this.open = binding.value;\n    }\n\n    /**\n     * Inserted directive hook. Called when the bound element has been inserted into its parent node\n     * @param {Node} el Element directive is bound to\n     * @param {Object} binding Binding options\n     */\n\n  }, {\n    key: 'inserted',\n    value: function inserted(el, binding) {\n      this.initializeTarget(el);\n    }\n\n    /**\n     * Update directive hook. Called after the containing component’s VNode has updated\n     * @param {Node} el Element directive is bound to\n     * @param {Object} binding Binding options\n     */\n\n  }, {\n    key: 'update',\n    value: function update(el, binding) {\n      this.toggleSlide(el);\n    }\n\n    /**\n     * Validate options passed to plugin\n     * @param {Object} options Options passed to plugin\n     */\n\n  }, {\n    key: 'validateOptions',\n    value: function validateOptions(options) {\n      if (typeof variable !== 'undefined' && options.hasOwnProperty('customEasing')) {\n        this.easingOptions.custom = options.customEasing;\n      }\n    }\n\n    /**\n     * Convert a string from kebab-case to camelCase\n     * @param {String} string String to convert to camelCase\n     */\n\n  }, {\n    key: 'kebabToCamel',\n    value: function kebabToCamel(string) {\n      return string.replace(/-([a-z])/g, function (g) {\n        return g[1].toUpperCase();\n      });\n    }\n\n    /**\n     * Parse directive arguments\n     * @param {Object} binding Binding options\n     */\n\n  }, {\n    key: 'parseArgs',\n    value: function parseArgs(binding) {\n      if (binding.hasOwnProperty('arg')) {\n        var argsArray = binding.arg.split(':');\n        this.validateEasing(argsArray);\n        this.validateDuration(argsArray);\n      } else {\n        this.duration = 300;\n        this.durationInSeconds = '0.3s';\n        this.easing = 'ease';\n      }\n    }\n\n    /**\n     * Validate easing option\n     * @param {Array} argsArray Array of arguments\n     */\n\n  }, {\n    key: 'validateEasing',\n    value: function validateEasing(argsArray) {\n      if (argsArray.hasOwnProperty(1)) {\n        if (this.easingOptions.builtIn.includes(argsArray[1])) {\n          this.easing = argsArray[1];\n        } else if (this.easingOptions.custom.hasOwnProperty(this.kebabToCamel(argsArray[1]))) {\n          this.easing = this.easingOptions.custom[this.kebabToCamel(argsArray[1])];\n        } else {\n          this.easing = 'ease';\n        }\n      } else {\n        this.easing = 'ease';\n      }\n    }\n\n    /**\n     * Validate duration\n     * @param {Array} argsArray Array of arguments\n     */\n\n  }, {\n    key: 'validateDuration',\n    value: function validateDuration(argsArray) {\n      this.duration = argsArray.hasOwnProperty(0) ? parseInt(argsArray[0]) : 300;\n      this.durationInSeconds = this.duration / 1000 + 's';\n    }\n\n    /**\n     * Initialize styles on target element\n     * @param {Node} el Element directive is bound to\n     */\n\n  }, {\n    key: 'initializeTarget',\n    value: function initializeTarget(el) {\n      if (!this.open) {\n        el.style.height = '0px';\n      }\n\n      el.style.overflow = 'hidden';\n      el.style.transition = 'height ' + this.easing + ' ' + this.durationInSeconds;\n    }\n\n    /**\n     * Slide the target element\n     * @param {Node} el Element directive is bound to\n     */\n\n  }, {\n    key: 'toggleSlide',\n    value: function toggleSlide(el) {\n      if (this.open) {\n        this.slideClosed(el);\n      } else {\n        this.slideOpen(el);\n      }\n    }\n\n    /**\n     * Slide element open\n     * @param {Node} el Element directive is bound to\n     */\n\n  }, {\n    key: 'slideOpen',\n    value: function slideOpen(el) {\n      var _this = this;\n\n      // Check if element is animating\n      if (this.isAnimating) {\n        clearTimeout(this.timeout);\n      }\n\n      // Set animating to true\n      this.isAnimating = true;\n\n      // Set element height to scroll height\n      var scrollHeight = el.scrollHeight;\n      el.style.height = scrollHeight + 'px';\n\n      // Reset element height to auto after animating\n      this.timeout = setTimeout(function () {\n        el.style.height = 'auto';\n        _this.isAnimating = false;\n      }, this.duration);\n\n      // Mark element as closed\n      this.open = true;\n    }\n\n    /**\n     * Slide element closed\n     * @param {Node} el Element directive is bound to\n     */\n\n  }, {\n    key: 'slideClosed',\n    value: function slideClosed(el) {\n      var _this2 = this;\n\n      // Check if element is animating\n      if (this.isAnimating) {\n        clearTimeout(this.timeout);\n      }\n\n      // Set animating to true\n      this.isAnimating = true;\n\n      // Set element height to scroll height\n      var scrollHeight = el.scrollHeight;\n      el.style.height = scrollHeight + 'px';\n\n      // Very short timeout before setting height of element to 0\n      setTimeout(function () {\n        el.style.height = '0px';\n      }, 25);\n\n      // Update isAnimating after animation is done\n      this.timeout = setTimeout(function () {\n        _this2.isAnimating = false;\n      }, this.duration);\n\n      // Mark element as closed\n      this.open = false;\n    }\n  }]);\n\n  return VShowSlide;\n}();\n\nexports.default = VShowSlide;\n\n//# sourceURL=webpack://v-show-slide/./src/classes/VShowSlide.js?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nvar VShowSlide = function () {\n  function VShowSlide() {\n    _classCallCheck(this, VShowSlide);\n\n    this.easingOptions = {\n      builtIn: ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'],\n      custom: {}\n    };\n  }\n\n  /**\n   * Called when plugin is initialized\n   * @param {Object} Vue The Vue instance\n   * @param {Object} options Options passed to plugin\n   */\n\n\n  _createClass(VShowSlide, [{\n    key: 'install',\n    value: function install(Vue, options) {\n      this.validateOptions(options);\n      Vue.directive('show-slide', {\n        bind: this.bind.bind(this),\n        inserted: this.inserted.bind(this),\n        update: this.update.bind(this)\n      });\n    }\n\n    /**\n     * Bind directive hook. Called only once, when the directive is first bound to the element.\n     * @param {Node} el Element directive is bound to\n     * @param {Object} binding Binding options\n     */\n\n  }, {\n    key: 'bind',\n    value: function bind(el, binding) {\n      this.parseArgs(binding);\n      this.open = binding.value;\n    }\n\n    /**\n     * Inserted directive hook. Called when the bound element has been inserted into its parent node\n     * @param {Node} el Element directive is bound to\n     * @param {Object} binding Binding options\n     */\n\n  }, {\n    key: 'inserted',\n    value: function inserted(el, binding) {\n      this.initializeTarget(el);\n    }\n\n    /**\n     * Update directive hook. Called after the containing component’s VNode has updated\n     * @param {Node} el Element directive is bound to\n     * @param {Object} binding Binding options\n     */\n\n  }, {\n    key: 'update',\n    value: function update(el, binding) {\n      this.toggleSlide(el);\n    }\n\n    /**\n     * Validate options passed to plugin\n     * @param {Object} options Options passed to plugin\n     */\n\n  }, {\n    key: 'validateOptions',\n    value: function validateOptions(options) {\n      if (typeof options !== 'undefined' && options.hasOwnProperty('customEasing')) {\n        this.easingOptions.custom = options.customEasing;\n      }\n    }\n\n    /**\n     * Convert a string from kebab-case to camelCase\n     * @param {String} string String to convert to camelCase\n     */\n\n  }, {\n    key: 'kebabToCamel',\n    value: function kebabToCamel(string) {\n      return string.replace(/-([a-z])/g, function (g) {\n        return g[1].toUpperCase();\n      });\n    }\n\n    /**\n     * Parse directive arguments\n     * @param {Object} binding Binding options\n     */\n\n  }, {\n    key: 'parseArgs',\n    value: function parseArgs(binding) {\n      if (binding.hasOwnProperty('arg')) {\n        var argsArray = binding.arg.split(':');\n        this.validateEasing(argsArray);\n        this.validateDuration(argsArray);\n      } else {\n        this.duration = 300;\n        this.durationInSeconds = '0.3s';\n        this.easing = 'ease';\n      }\n    }\n\n    /**\n     * Validate easing option\n     * @param {Array} argsArray Array of arguments\n     */\n\n  }, {\n    key: 'validateEasing',\n    value: function validateEasing(argsArray) {\n      if (argsArray.hasOwnProperty(1)) {\n        if (this.easingOptions.builtIn.includes(argsArray[1])) {\n          this.easing = argsArray[1];\n        } else if (this.easingOptions.custom.hasOwnProperty(this.kebabToCamel(argsArray[1]))) {\n          this.easing = this.easingOptions.custom[this.kebabToCamel(argsArray[1])];\n        } else {\n          this.easing = 'ease';\n        }\n      } else {\n        this.easing = 'ease';\n      }\n    }\n\n    /**\n     * Validate duration\n     * @param {Array} argsArray Array of arguments\n     */\n\n  }, {\n    key: 'validateDuration',\n    value: function validateDuration(argsArray) {\n      this.duration = argsArray.hasOwnProperty(0) ? parseInt(argsArray[0]) : 300;\n      this.durationInSeconds = this.duration / 1000 + 's';\n    }\n\n    /**\n     * Initialize styles on target element\n     * @param {Node} el Element directive is bound to\n     */\n\n  }, {\n    key: 'initializeTarget',\n    value: function initializeTarget(el) {\n      if (!this.open) {\n        el.style.height = '0px';\n      }\n\n      el.style.overflow = 'hidden';\n      el.style.transition = 'height ' + this.easing + ' ' + this.durationInSeconds;\n    }\n\n    /**\n     * Slide the target element\n     * @param {Node} el Element directive is bound to\n     */\n\n  }, {\n    key: 'toggleSlide',\n    value: function toggleSlide(el) {\n      if (this.open) {\n        this.slideClosed(el);\n      } else {\n        this.slideOpen(el);\n      }\n    }\n\n    /**\n     * Slide element open\n     * @param {Node} el Element directive is bound to\n     */\n\n  }, {\n    key: 'slideOpen',\n    value: function slideOpen(el) {\n      var _this = this;\n\n      // Check if element is animating\n      if (this.isAnimating) {\n        clearTimeout(this.timeout);\n      }\n\n      // Set animating to true\n      this.isAnimating = true;\n\n      // Set element height to scroll height\n      var scrollHeight = el.scrollHeight;\n      el.style.height = scrollHeight + 'px';\n\n      // Reset element height to auto after animating\n      this.timeout = setTimeout(function () {\n        el.style.height = 'auto';\n        _this.isAnimating = false;\n      }, this.duration);\n\n      // Mark element as closed\n      this.open = true;\n    }\n\n    /**\n     * Slide element closed\n     * @param {Node} el Element directive is bound to\n     */\n\n  }, {\n    key: 'slideClosed',\n    value: function slideClosed(el) {\n      var _this2 = this;\n\n      // Check if element is animating\n      if (this.isAnimating) {\n        clearTimeout(this.timeout);\n      }\n\n      // Set animating to true\n      this.isAnimating = true;\n\n      // Set element height to scroll height\n      var scrollHeight = el.scrollHeight;\n      el.style.height = scrollHeight + 'px';\n\n      // Very short timeout before setting height of element to 0\n      setTimeout(function () {\n        el.style.height = '0px';\n      }, 25);\n\n      // Update isAnimating after animation is done\n      this.timeout = setTimeout(function () {\n        _this2.isAnimating = false;\n      }, this.duration);\n\n      // Mark element as closed\n      this.open = false;\n    }\n  }]);\n\n  return VShowSlide;\n}();\n\nexports.default = VShowSlide;\n\n//# sourceURL=webpack://v-show-slide/./src/classes/VShowSlide.js?");
 
@@ -110,0 +110,0 @@ /***/ }),

package.json

 {
   "name": "v-show-slide",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Vue.js directive for animating element to and from height: auto in a sliding motion",
@@ -5,0 +5,0 @@ "main": "dist/v-show-slide.js",

src/classes/VShowSlide.js

@@ -62,3 +62,3 @@ export default class VShowSlide {
   validateOptions (options) {
-    if (typeof variable !== 'undefined' && options.hasOwnProperty('customEasing')) {
+    if (typeof options !== 'undefined' && options.hasOwnProperty('customEasing')) {
       this.easingOptions.custom = options.customEasing
@@ -65,0 +65,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

548625

No dependency changes