anima-pop - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

examples/index.md

@@ -27,3 +27,22 @@ # Demo
 <div style="display:none;">
-  <p style="border : 1px solid #ededed;" id="c1">pop 内容展示</p>
+  <div style="border : 1px solid #ededed;" id="c1">
+    <h3 class="am-pop-scroll" style="width: 200px; height: 200px; overflow: scroll;">
+      <p>test</p>
+      <p>test</p>
+      <p>test</p>
+      <p>test</p>
+      <p>test</p>
+      <p>test</p>
+      <p>test</p>
+      <p>test</p>
+      <p>test</p>
+      <p>test</p>
+      <p>test</p>
+      <p>test</p>
+      <p>test</p>
+      <p>test</p>
+      <p>test</p>
+      <p>test</p>
+    </h3>
+  </div>
 </div>
@@ -42,4 +61,5 @@
     },
-    width : 100,
-    height : 100
+    width : 500,
+    height : 500,
+    mask: true
   });
@@ -46,0 +66,0 @@ pop.render();

HISTORY.md

@@ -5,2 +5,6 @@ # History
 
+## 2.0.1
+
+`bugfix` 解决页面滚动问题
+
 ## 2.0.0
@@ -7,0 +11,0 @@

package.json

 {
   "name": "anima-pop",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "The best project ever.",
@@ -19,3 +19,2 @@ "homepage": "http://gitlab.alibaba-inc.com/animajs/pop",
   "keywords": [],
-  "main": "./lib/index",
   "entry": {
@@ -22,0 +21,0 @@ "index": "./index.js"

src/align.js

@@ -5,3 +5,4 @@ 'use strict';
 
-var Align = function(){};
+var Align = function () {
+};
 
@@ -13,13 +14,13 @@ Align.ATTRS = {
    */
-  align : null
+  align: null
 };
 
-Align.prototype= {
-  getAlignPoint : function(align){
+Align.prototype = {
+  getAlignPoint: function (align) {
     var _self = this,
       point = null;
-     align = align  || _self.get('align');
-    if(align){
+    align = align || _self.get('align');
+    if (align) {
       _self.element.css('position', 'fixed');
-      _self.element.attr('am-mode','show');
+      _self.element.attr('am-mode', 'show');
 
@@ -35,7 +36,7 @@ var offset = align.offset,
 
-      switch(type){
+      switch (type) {
         case 'top' :
           point = {
-            x : offX,
-            y : offY
+            x: offX,
+            y: offY
           };
@@ -45,4 +46,4 @@ break;
           point = {
-            x : offX,
-            y : offY + vHight - height
+            x: offX,
+            y: offY + vHight - height
           };
@@ -52,4 +53,4 @@ break;
           point = {
-            x : offX,
-            y : offY
+            x: offX,
+            y: offY
           };
@@ -59,4 +60,4 @@ break;
           point = {
-            x : offX + vWidth - width,
-            y : offY
+            x: offX + vWidth - width,
+            y: offY
           };
@@ -66,4 +67,4 @@ break;
           point = {
-            x : offX + (vWidth - width)/2,
-            y : offY + (vHight - height)/2
+            x: offX + (vWidth - width) / 2,
+            y: offY + (vHight - height) / 2
           };
@@ -78,13 +79,13 @@ break;
   },
-  _onRenderAlign : function(align){
-    if(this.rendered){
+  _onRenderAlign: function (align) {
+    if (this.rendered) {
       this.resetAlign(align);
     }
   },
-  resetAlign : function(align){
+  resetAlign: function (align) {
     var _self = this,
       point = _self.getAlignPoint(align);
 
-    if(point){
-      _self.set('xy',[point.x,point.y]);
+    if (point) {
+      _self.set('xy', [point.x, point.y]);
     }
@@ -91,0 +92,0 @@ }

src/animate.js

@@ -6,10 +6,10 @@ 'use strict';
 function addAnimEnd(el, callback) {
-    el.addEventListener(animateEvent, callback, false);
+  el.addEventListener(animateEvent, callback, false);
 }
 
 function removeAnimEnd(el, callback) {
-    el.removeEventListener(animateEvent, callback, false);
+  el.removeEventListener(animateEvent, callback, false);
 }
 
-function ucfirst(s){
+function ucfirst(s) {
   s += '';
@@ -20,9 +20,10 @@ return s.charAt(0).toUpperCase() + s.substring(1);
 var inverse = {
-  'up' : 'down',
-  'down' : 'up',
-  'left' : 'left',
-  'right' : 'right'
+  'up': 'down',
+  'down': 'up',
+  'left': 'left',
+  'right': 'right'
 };
 
-var Animate = function(){};
+var Animate = function () {
+};
 
@@ -34,3 +35,3 @@ Animate.ATTRS = {
    */
-  duration : 400,
+  duration: 400,
   /**
@@ -40,5 +41,5 @@ * 动画类型
    */
-  easing : 'linear',
+  easing: 'linear',
 
-  direction : 'up'
+  direction: 'up'
 };
@@ -48,3 +49,3 @@
   //获取动画名称
-  _getAnimName : function(effect,type){
+  _getAnimName: function (effect, type) {
     var _self = this,
@@ -54,8 +55,8 @@ name = effect + ucfirst(type),
 
-    if(effect == 'slide'){
+    if (effect == 'slide') {
       direction = _self.get('direction');
 
-      if(type == 'in'){
+      if (type == 'in') {
         name = name + ucfirst(direction);
-      }else{ //取反，slideOut，执行的动画有所差异
+      } else { //取反，slideOut，执行的动画有所差异
         name = name + ucfirst(inverse[direction]);
@@ -67,28 +68,28 @@ }
   //显示动画
-  animateEffectIn : function(effect){
+  animateEffectIn: function (effect) {
     var _self = this,
 
       params = {
-        '-webkit-animation-name' : _self._getAnimName(effect,'in')
+        '-webkit-animation-name': _self._getAnimName(effect, 'in')
       };
 
-    _self.set('visible',true);
-    _self.set('closing',false);
-    _self.animate(params,null,true);
+    _self.set('visible', true);
+    _self.set('closing', false);
+    _self.animate(params, null, true);
   },
 
   //隐藏动画
-  animateEffectOut : function(effect){
+  animateEffectOut: function (effect) {
     var _self = this,
       params = {
-        '-webkit-animation-name'  : _self._getAnimName(effect,'out')
+        '-webkit-animation-name': _self._getAnimName(effect, 'out')
       };
 
-    _self.set('closing',true);
-    _self.animate(params,callback,true);
+    _self.set('closing', true);
+    _self.animate(params, callback, true);
 
-    function callback(){
-      if(_self.get('closing')){
-        _self.set('visible',false);
-        _self.set('closing',false);
+    function callback() {
+      if (_self.get('closing')) {
+        _self.set('visible', false);
+        _self.set('closing', false);
       }
@@ -101,19 +102,19 @@ }
    */
-  animate : function(params,endCallback){
+  animate: function (params, endCallback) {
     var _self = this,
       el = _self.element;
 
-    function callback(e){
-        //If el have child, and also have transition, so child transition end event will pop
-        //to el, and make the issue happen. so we should judge the target element ,then kill
-        //the animation
-        //btw: Timeout vs webkitTransitionEnd  http://jsperf.com/timeout-vs-webkittransitionend/3
-        if(e.target == _self.element[0]) {
-              _self.offAnimate();
-              removeAnimEnd(el[0], callback);
-              endCallback && endCallback();
-        }
+    function callback(e) {
+      //If el have child, and also have transition, so child transition end event will pop
+      //to el, and make the issue happen. so we should judge the target element ,then kill
+      //the animation
+      //btw: Timeout vs webkitTransitionEnd  http://jsperf.com/timeout-vs-webkittransitionend/3
+      if (e.target == _self.element[0]) {
+        _self.offAnimate();
+        removeAnimEnd(el[0], callback);
+        endCallback && endCallback();
+      }
     }
 
-    addAnimEnd(el[0],callback);
+    addAnimEnd(el[0], callback);
 
@@ -124,16 +125,16 @@ _self.applyAnimate();
   //应用动画
-  applyAnimate : function(){
+  applyAnimate: function () {
     var _self = this,
-      el =  _self.element;
+      el = _self.element;
     el.css(_self.getAnimateStyle());
   },
   //去除动画
-  offAnimate : function(){
+  offAnimate: function () {
     this.element.css({
       //'-webkit-transition' : 'none',
-      '-webkit-animation' : 'none'
+      '-webkit-animation': 'none'
     });
   },
   //获取动画相关的样式
-  getAnimateStyle : function(){
+  getAnimateStyle: function () {
     var _self = this,
@@ -144,3 +145,3 @@ duration = _self.get('duration');
       '-webkit-animation-duration': duration + 'ms ',
-      '-webkit-animation-timing-function' :  _self.get('easing')
+      '-webkit-animation-timing-function': _self.get('easing')
     };
@@ -150,2 +151,2 @@ }
 
-module.exports =  Animate
+module.exports = Animate

src/mask.js

@@ -6,13 +6,16 @@ 'use strict';
 
-var Mask = function(){};
+function touchMoveCbk(e) {
+  e.preventDefault();
+}
 
+var Mask = function () {
+};
+
 Mask.ATTRS = {
   //是否显示mask
-  mask : false,
-  //遮蔽的节点
-  maskNode : null,
+  mask: false,
   //mask层
-  maskEl : null,
+  maskEl: null,
   //遮蔽的模板
-  maskTpl : '<div class="am-mask" style="width:100%;height:100%;top:0;left:0;"></div>'
+  maskTpl: '<div class="am-mask" style="width:100%;height:100%;top:0;left:0;"></div>'
 };
@@ -25,15 +28,16 @@
    */
-  showMask : function(){
+  showMask: function () {
     var _self = this,
-      maskNode = _self.get('maskNode') || 'body',
+      maskNode = 'body',
       zIndex = _self.get('zIndex'),
       maskEl = _self.get('maskEl');
-    if(!maskEl){
+    if (!maskEl) {
       maskEl = $(_self.get('maskTpl')).appendTo(maskNode);
-      var positon = maskNode == 'body' ? 'fixed' : 'absolute';
-      maskEl.css('position',positon);
+      maskEl.css('position', 'fixed');
       if (zIndex) {
         maskEl.css('zIndex', zIndex - 1);
       }
-      _self.set('maskEl',maskEl);
+      _self.set('maskEl', maskEl);
+      
+      maskEl.on('touchmove', touchMoveCbk);
     }
@@ -46,7 +50,7 @@ $(maskNode).addClass(CLS_MASK_RELATIVE);
    */
-  hideMask : function(){
+  hideMask: function () {
     var _self = this,
-      maskNode = _self.get('maskNode') || 'body',
+      maskNode = 'body',
       maskEl = _self.get('maskEl');
-    if(maskEl){
+    if (maskEl) {
       maskEl.hide();
@@ -59,7 +63,8 @@ $(maskNode).removeClass(CLS_MASK_RELATIVE);
    */
-  destroyMask : function(){
+  destroyMask: function () {
     var _self = this,
-      maskNode = _self.get('maskNode') || 'body',
+      maskNode = 'body',
       maskEl = _self.get('maskEl');
-    if(maskEl){
+    if (maskEl) {
+      maskEl.off('touchmove', touchMoveCbk);
       maskEl.remove();
@@ -66,0 +71,0 @@ $(maskNode).removeClass(CLS_MASK_RELATIVE);

src/pop.js

@@ -20,8 +20,8 @@ /**
 var Pop = Cls.create({
-  attrs : $.extend({},Position.ATTRS,Mask.ATTRS,Animate.ATTRS,Align.ATTRS,{
-    width : null,
-    height : null,
-    visible : false,
-    className : 'am-pop',
-    effect : 'none'
+  attrs: $.extend({}, Position.ATTRS, Mask.ATTRS, Animate.ATTRS, Align.ATTRS, {
+    width: null,
+    height: null,
+    visible: false,
+    className: 'am-pop',
+    effect: 'none'
   })
@@ -32,3 +32,3 @@ });
   //初始化事件
-  initialize : function (config) {
+  initialize: function (config) {
 
@@ -46,3 +46,3 @@ this.attrs = $.extend({}, this.attrs, config);
   // 构建 this.element
-  parseElement: function() {
+  parseElement: function () {
     var element = this.get('element');
@@ -66,3 +66,3 @@
   // 约定：子类覆盖时，需保持 `return this`
-  render: function() {
+  render: function () {
 
@@ -81,2 +81,8 @@ // 让渲染相关属性的初始值生效，并绑定到 change 事件
 
+    this.element.on('touchmove', function (e) {
+      if(e.target.className !== 'am-pop-scroll'){
+        e.preventDefault();
+      }
+    });
+
     this._onRenderAlign(this.attrs.align);
@@ -86,17 +92,17 @@
   },
-  _initElement : function(){
+  _initElement: function () {
     var _self = this,
       element = _self.element;
 
-    if(!_self._isTemplate){
+    if (!_self._isTemplate) {
       element.appendTo('body');
     }
 
-    if(!_self.get('visible')){
-      element.css('visibility','hidden');
+    if (!_self.get('visible')) {
+      element.css('visibility', 'hidden');
     }
   },
-  processMask : function () {
+  processMask: function () {
     var pop = this,
-        _self = $(this);
+      _self = $(this);
 
@@ -113,3 +119,3 @@ if (!pop.get('mask')) return;
   },
-  _renderAndBindAttrs: function() {
+  _renderAndBindAttrs: function () {
     var widget = this;
@@ -136,12 +142,12 @@ var attrs = widget.attrs;
    */
-  show : function(){
+  show: function () {
     var _self = this,
       effect = _self.get('effect');
     if (!this.rendered) {
-        this.render();
+      this.render();
     }
 
-    if(effect == 'none'){
-      _self.set('visible',true);
-    }else{
+    if (effect == 'none') {
+      _self.set('visible', true);
+    } else {
       _self.animateEffectIn(effect);
@@ -155,11 +161,11 @@ }
    */
-  hide : function(){
+  hide: function () {
     var _self = this,
       effect = _self.get('effect');
-    if(!_self.get('visible') || _self.get('closing')){
+    if (!_self.get('visible') || _self.get('closing')) {
       return true;
     }
-    if(effect == 'none'){
-      _self.set('visible',false);
-    }else{
+    if (effect == 'none') {
+      _self.set('visible', false);
+    } else {
       _self.animateEffectOut(effect);
@@ -171,31 +177,31 @@ }
   //更改宽
-  _onRenderWidth: function(val) {
-      this.element.css('width', val);
+  _onRenderWidth: function (val) {
+    this.element.css('width', val);
   },
   //更改高
-  _onRenderHeight: function(val) {
-      this.element.css('height', val);
+  _onRenderHeight: function (val) {
+    this.element.css('height', val);
   },
   //更改zIndex
-  _onRenderZIndex: function(val) {
-      this.element.css('zIndex', val);
+  _onRenderZIndex: function (val) {
+    this.element.css('zIndex', val);
   },
   //更改是否可见
-  _onRenderVisible: function(val) {
+  _onRenderVisible: function (val) {
     var visibility = val ? 'visible' : 'hidden';
-    this.element.css('visibility',visibility);
+    this.element.css('visibility', visibility);
 
-    if(val){
+    if (val) {
       $(this).trigger('show');
-    }else{
+    } else {
       $(this).trigger('hide');
     }
   },
-  _onRenderClassName: function(val) {
+  _onRenderClassName: function (val) {
     this.element.addClass(val);
   },
   //销毁
-  destroy : function (argument) {
+  destroy: function (argument) {
     var _self = this;
-    if(_self.get('mask')){
+    if (_self.get('mask')) {
       _self.hideMask();
@@ -212,6 +218,6 @@ _self.destroyMask();
   },
-  get: function(key){
+  get: function (key) {
     return this.attrs[key] === undefined ? null : this.attrs[key];
   },
-  set: function(key, val){
+  set: function (key, val) {
     this.attrs[key] = val;
@@ -236,3 +242,3 @@
 
-function ucfirst(s){
+function ucfirst(s) {
   s += '';
@@ -239,0 +245,0 @@ return s.charAt(0).toUpperCase() + s.substring(1);

src/position.js

 'use strict';
 
-var Position = function(){};
+var Position = function () {
+};
 
 Position.ATTRS = {
-  x : -999,
-  y : -999,
-  xy : {
+  x: -999,
+  y: -999,
+  xy: {
     /*setter : function(v){
-      this.set('x',v[0]);
-      this.set('y',v[1]);
-    }*/
+     this.set('x',v[0]);
+     this.set('y',v[1]);
+     }*/
   },
@@ -19,16 +20,16 @@ zIndex: 99
   //设置x
-  _onRenderX : function(x){
-    x != null && this.element.css('left',x);
+  _onRenderX: function (x) {
+    x != null && this.element.css('left', x);
   },
   //设置y
-  _onRenderY : function(y){
-    y != null && this.element.css('top',y);
+  _onRenderY: function (y) {
+    y != null && this.element.css('top', y);
   },
   //设置z-Index
-  _onRenderZIndex: function(val) {
+  _onRenderZIndex: function (val) {
     val != null && this.element.css('zIndex', val);
   },
-  _onRenderXy : function(v){
-    this.set('x',v[0]);
-    this.set('y',v[1]);
+  _onRenderXy: function (v) {
+    this.set('x', v[0]);
+    this.set('y', v[1]);
   }
@@ -35,0 +36,0 @@ };

tests/pop-spec.js

@@ -42,3 +42,3 @@ var Pop = require('../src/pop');
 
-describe('显示mask,不设置maskNode', function() {
+describe('显示mask', function() {
   var pop = new Pop({
@@ -77,35 +77,36 @@ width : '100%',
 
-describe('显示mask,设置maskNode', function() {
-  $('<div id="m1"></div>').appendTo('body');
-  var pop = new Pop({
-    width : '100%',
-    height : '50%',
-    mask : true,
-    maskNode : '#m1',
-    x:0,
-    y:0,
-    template : '<div class="myoverlay">阿斯蒂芬撒发生地方</div>'
-  });
+//
+// describe('显示mask,设置maskNode', function() {
+//   $('<div id="m1"></div>').appendTo('body');
+//   var pop = new Pop({
+//     width : '100%',
+//     height : '50%',
+//     mask : true,
+//     maskNode : '#m1',
+//     x:0,
+//     y:0,
+//     template : '<div class="myoverlay">阿斯蒂芬撒发生地方</div>'
+//   });
+//
+//   pop.render();
+//   var el = pop.element;
+//
+//   it('测试mask css', function() {
+//     pop.show();
+//     expect(pop.get('maskNode')).not.to.be(null);
+//     expect($('#m1').hasClass('am-mask-relative')).to.be(true);
+//   });
+//
+//   it('隐藏',function () {
+//     pop.hide();
+//     expect($('#m1').hasClass('am-mask-relative')).to.be(false);
+//   });
+//
+//   it('销毁',function () {
+//     pop.destroy();
+//     expect($('#m1').children().length).to.be(0);
+//   })
+//
+// });
 
-  pop.render();
-  var el = pop.element;
-
-  it('测试mask css', function() {
-    pop.show();
-    expect(pop.get('maskNode')).not.to.be(null);
-    expect($('#m1').hasClass('am-mask-relative')).to.be(true);
-  });
-
-  it('隐藏',function () {
-    pop.hide();
-    expect($('#m1').hasClass('am-mask-relative')).to.be(false);
-  });
-
-  it('销毁',function () {
-    pop.destroy();
-    expect($('#m1').children().length).to.be(0);
-  })
-
-});
-
 describe('设置对齐',function () {
@@ -112,0 +113,0 @@ $('<div id="m1"></div>').appendTo('body');

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30678

increased by3.16%

Lines of code

959

increased by2.02%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes