anima-toast - npm Package Compare versions

Comparing version 1.0.6 to 1.1.0

examples/index.md

@@ -8,3 +8,4 @@ # Demo
 ````html
-
+<link href="../src/toast.css" rel="stylesheet" />
+<style type="text/css">html{font-size: 100px;}</style>
 <button id="btnChange">改变再次显示</button>
@@ -15,10 +16,10 @@
 ````javascript
-seajs.use(['index','anima-yocto-lite'], function(Toast,$) {
+  var $ = require('anima-yocto-lite');
+  require('../src/toast.less');
+  var Toast = require('anima-toast');
   var toast = new Toast({
-      content : '成功加载成功功加载成功加载成功功加载成功加载成功功加载成功加载',
-      type : 'none'
-    });
+    content : '成功加载成功功加载成功加载成功功加载成功加载成功功加载成功加载',
+    type : 'none'
+  });
   toast.show();
-
-
   //修改,再次显示
@@ -29,4 +30,2 @@ $('#btnChange').on('click',function(){
   });
-
-});
 ````

HISTORY.md

 # History
 
 ---
+## 1.1.0
 
+`change` 去除pop依赖，当前toast只依赖anima-yocto-lite
+
 ## 1.0.6
@@ -6,0 +9,0 @@

package.json

 {
   "name": "anima-toast",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "The best project ever.",
@@ -8,3 +8,4 @@ "homepage": "http://gitlab.alibaba-inc.com/animajs/toast",
   "maintainers": [
-    "dxq613"
+    "dxq613",
+    "zhenyi.szy"
   ],
@@ -21,5 +22,3 @@ "repository": {
   "spm": {
-    "output": [
-      "src/toast.css"
-    ],
+    "extractCSS": true,
     "tests": "tests/*-spec.js"
@@ -29,3 +28,2 @@ },
   "dependencies": {
-    "anima-pop": "~1.0.0",
     "anima-yocto-lite": "~1.1.0",
@@ -32,0 +30,0 @@ "import-style": "~1.0.0"

README.md

@@ -11,6 +11,7 @@ # toast
 
-成功、失败之类的提示信息，显示后延迟2s（默认）隐藏,此控件基于Pop 控件
+成功、失败之类的提示信息，显示后延迟2s（默认）隐藏
 
 ```javascript
-seajs.use('anima-toast', function(Toast) {
+  var $ = require('anima-yocto-lite');
+  var Toast = require('anima-toast');
   var toast = new Toast({
@@ -28,3 +29,2 @@ content : '成功加载', //文本
   });
-});
 ```
@@ -31,0 +31,0 @@

src/toast.js

@@ -1,101 +0,110 @@
-var $ = require('anima-yocto-lite'),
-  Pop = require('anima-pop');
-
-require('./toast.css');
-
-var delayHandler = null;
-
-var Toast = Pop.extend({
-  attrs : {
-    /**
-     * 延迟隐藏的时间，显示后，默认2000ms自动隐藏
-     * @type {Number}
-     */
+var $ = require('anima-yocto-lite');
+var Toast = function(option){
+  this.attrs = {
     hideDelay : 2000,
-    /**
-     * 内容
-     * @type {String}
-     */
+    animateDuration: 600,
     content : null,
     template : '<div class="am-toast" style="background-color: transparent;"></div>',
-    effect : 'fade',
-    align : {
-      type : 'center'
-    },
-    /**
-     * toast 类型
-     * @type {String}
-     */
-    type : 'none'
-  },
-  setup : function(){
-    var _self = this;
+    type: 'none'
+  };
 
-    Toast.superclass.setup.call(this);
-    _self._intContent();
-  },
-  /**
-   * 更改内容和类型
-   * @param  {String} content 内容
-   * @param  {String} type   类型
-   */
-  change : function(content,type){
-    var _self = this;
+  //merge
+  if(option && typeof option == 'object'){
+     $.extend(this.attrs, option);
+  }
+  this.setup();
+};
 
-    this.changed = true;
-
-    type = type || _self.get('type');
-
-    _self.set({
-      content : content,
-      type : type
-    });
-    _self._intContent();
+Toast.prototype = {
+  get: function(key){
+    return this.attrs[key];
   },
-  //初始化内容
-  _intContent : function(){
-    var _self = this,
-       el = _self.element,
-      tpl = _self._getInnerTpl();
+  set: function(key, value){
+    return this.attrs[key] = value;
+  },
+  //初始化
+  setup: function(){
+    var self = this;
+    self._initContent();
+  },
+  //填充toast内容
+  _initContent: function(){
+    var self = this;
+    var el = self._getElement();
+    var tpl = self._getInnerTpl();
+    var winWidth = $(window).width();
     el.html(tpl);
+    //定位
+    el.css({
+      left: (winWidth - el.width())/2,
+      opacity: 0
+    });
   },
-  //获取内部的模板
-  _getInnerTpl : function(){
-    var _self = this,
-      content = _self.get('content'),
-      type = _self.get('type'),
-      iconCssTpl = type == 'none' ? '' : '<span class="am-toast-icon ' + 'am-icon-' + type + '"></span>',
-      tpl = '<div class="am-toast-text">'
+  //获取元素，不存在则新建
+  _getElement: function(){
+    var self = this;
+    //不存在
+    if(!self.element && !self.created){
+      var template = self.get('template');
+      var element = $(template).appendTo($('body'));
+      self.element = element;
+      self.created = true;
+    }
+    return self.element;
+  },
+  //获取模板
+  _getInnerTpl: function(){
+    var self = this;
+    var content = self.get('content');
+    var type = self.get('type');
+    var iconCssTpl = type == 'none' ? '' : '<span class="am-toast-icon ' + 'am-icon-' + type + '"></span>';
+    var tpl = '<div class="am-toast-text">'
               + iconCssTpl
               + content
             + '</div>';
-
     return tpl;
   },
   /**
+   * 更改内容和类型
+   * @param  {String} content 内容
+   * @param  {String} type   类型
+   */
+  change: function(content,type){
+    var self = this;
+    self.set('content',content);
+    self.set('type',type);
+    self._initContent();
+  },
+  /**
    * 显示
    */
-  show : function(){
-    var _self = this,
-      effect = _self.get('effect');
-
-    delayHandler && clearTimeout(delayHandler);
-
-    _self.hide(); // 防止重复
-
-    if (!_self.rendered) {
-        _self.render();
+  show: function(){
+    var self = this;
+    //先隐藏
+    self.hide();
+    //隐藏动画时长
+    var animateDuration = parseInt(self.get('animateDuration'), 10);
+    var hideDelay = parseInt(self.get('hideDelay'), 10);
+    var el = self._getElement();
+    var cssString = 'opacity '+ animateDuration/1000 +'s ease-in-out';
+    self.showing = true;
+    if(self.timeflag){
+      clearTimeout(self.timeflag);
     }
-
-    if(effect == 'none'){
-      _self.set('visible',true);
-    }else{
-      _self.animateEffectIn(effect);
-    }
-
-    _self.changed && _self.resetAlign();
-
-    delayHandler = setTimeout(function(){
-      _self.hide();
-    },_self.get('hideDelay'));
+    //显示
+    setTimeout(function(){
+      el.css({
+        '-webkit-transition': cssString,
+        'transition': cssString,
+        'z-index': 99,
+        'visibility': 'visible',
+        'opacity': 1
+      });
+      //设置隐藏flag
+      self.timeflag = setTimeout(function(){
+        self.timeflag = false;
+        self._hide();
+      },hideDelay || 2000);
+    },16);
+    self.set('visible', true);
   },
@@ -105,17 +114,45 @@ /**
    */
-  hide : function(){
-    var _self = this,
-      effect = _self.get('effect');
-    if(!_self.get('visible') || _self.get('closing')){
-      return true;
+  hide: function(){
+    var self = this;
+    var el = self._getElement();
+    el.css({
+      visibility: 'hidden',
+      '-webkit-transition': 'initial',
+      'transition': 'initial',
+      opacity: 0
+    });
+  },
+  //渐隐
+  _hide: function(){
+    var self = this;
+    var el = self._getElement();
+    var animateDuration = parseInt(self.get('animateDuration'), 10);
+    el.css({
+      opacity: 0
+    });
+    //时间到了 隐藏
+    setTimeout(function(){
+      if(!self.timeflag){
+        el.css({
+          'visibility': 'hidden',
+          opacity: 0
+        });
+      }
+    },animateDuration + 16);
+    self.set('visible', false);
+  },
+  //销毁
+  destroy: function(){
+    var self = this;
+    var el = self._getElement();
+    el.remove()
+    for (var p in self) {
+      if (self.hasOwnProperty(p)) {
+        delete self[p];
+      }
     }
-    if(effect == 'none'){
-      _self.set('visible',false);
-    }else{
-      _self.animateEffectOut(effect);
-    }
+    self.destroy = function() {};
   }
-});
+};
 
-
 module.exports = Toast;

tests/toast-spec.js

@@ -8,3 +8,3 @@
 
-  require('../src/toast.css');
+  require('../src/toast.less');
 
@@ -20,3 +20,2 @@ $('body').css('background-color', 'gray');
 
-
     var el = $('<div></div>').appendTo('body');
@@ -28,3 +27,2 @@
 
-
     it('显示', function(done) {
@@ -39,3 +37,2 @@ toast.show();
       },600);
-
     });
@@ -50,3 +47,13 @@
 
-    it('更改信息',function(){
+    it('显示 关闭', function(done) {
+      toast.show();
+
+      setTimeout(function(){
+        toast.hide();
+        done();
+      },600);
+
+    });
+
+    it('更改信息',function(done){
       toast.change('错误信息','fail');
@@ -56,5 +63,13 @@ toast.show();
       expect(toast.element.find('.am-icon-fail').length).to.be(1);
+      setTimeout(function(){
+        done();
+      },1800);
     });
+
+    it('销毁',function(){ 
+      toast.destroy();
+      expect(toast.element).to.be(undefined);
+    });
 /**/
   });
 

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14238

increased by50.05%

Dependency count

2

decreased by-33.33%

Number of package files

11

increased by22.22%

Lines of code

263

increased by31.5%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedanima-pop@~1.0.0

• - Removedanima-pop@1.0.3(transitive)

• - Removedanima-widget@1.1.4(transitive)