smartphoto - npm Package Compare versions

Comparing version 0.2.11 to 0.2.12

lib/core/index.js

@@ -19,3 +19,3 @@ 'use strict';
 
-var template = '<div class="\\{classNames.smartPhoto\\}"<!-- BEGIN hide:exist --> style="display:none;"<!-- END hide:exist -->>\n\t<div class="\\{classNames.smartPhotoBody\\}">\n\t\t<div class="\\{classNames.smartPhotoInner\\}">\n\t\t\t   <div class="\\{classNames.smartPhotoHeader\\}">\n\t\t\t\t\t<span class="\\{classNames.smartPhotoCount\\}">{currentIndex}[increment]/{total}</span>\n\t\t\t\t\t<span class="\\{classNames.smartPhotoCaption\\}"><!-- BEGIN groupItems:loop --><!-- \\BEGIN currentIndex:touch#{index} -->{caption}<!-- \\END currentIndex:touch#{index} --><!-- END groupItems:loop --></span>\n\t\t\t\t\t<button class="\\{classNames.smartPhotoDismiss\\}" data-action-click="hidePhoto()"></button>\n\t\t\t\t</div>\n\t\t\t\t<div class="\\{classNames.smartPhotoContent\\}"<!-- BEGIN isSmartPhone:exist --> data-action-touchstart="beforeDrag" data-action-touchmove="onDrag" data-action-touchend="afterDrag(false)"<!-- END isSmartPhone:exist -->>\n\t\t\t\t</div>\n\t\t\t\t<ul style="transform:translateX({translateX}px);" class="\\{classNames.smartPhotoList\\}<!-- BEGIN onMoveClass:exist --> \\{classNames.smartPhotoListOnMove\\}<!-- END onMoveClass:exist -->">\n\t\t\t\t\t<!-- BEGIN groupItems:loop -->\n\t\t\t\t\t<li style="transform:translate({translateX}px,{translateY}px);" class="<!-- \\BEGIN currentIndex:touch#{index} -->current<!-- \\END currentIndex:touch#{index} -->">\n\t\t\t\t\t\t<!-- BEGIN loaded:exist -->\n\t\t\t\t\t\t<div style="transform:translate({x}px,{y}px) scale({scale});" class="\\\\{classNames.smartPhotoImgWrap\\\\}"<!-- \\BEGIN isSmartPhone:empty --> data-action-mousemove="onDrag" data-action-mousedown="beforeDrag" data-action-mouseup="afterDrag"<!-- \\END isSmartPhone:empty --><!-- \\BEGIN isSmartPhone:exist --> data-action-touchstart="beforeDrag" data-action-touchmove="onDrag" data-action-touchend="afterDrag"<!-- \\END isSmartPhone:exist -->>\n\t\t\t\t\t\t\t<img style="<!-- \\BEGIN currentIndex:touch#{index} -->transform:translate(\\{photoPosX\\}[virtualPos]px,\\{photoPosY\\}[virtualPos]px) scale(\\{scaleSize\\});<!-- \\END currentIndex:touch#{index} -->" src="{src}" class="\\\\{classNames.smartPhotoImg\\\\}<!-- \\BEGIN scale:exist -->  \\\\{classNames.smartPhotoImgOnMove\\\\}<!-- \\END scale:exist --><!-- \\BEGIN elastic:exist --> \\\\{classNames.smartPhotoImgElasticMove\\\\}<!-- \\END elastic:exist --><!-- \\BEGIN appear:exist --> active<!-- \\END appear:exist -->" ondragstart="return false;">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<!-- END loaded:exist -->\n\t\t\t\t\t\t<!-- BEGIN loaded:empty -->\n\t\t\t\t\t\t<div class="\\\\{classNames.smartPhotoLoaderWrap\\\\}">\n\t\t\t\t\t\t\t<span class="\\\\{classNames.smartPhotoLoader\\\\}"></span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<!-- END loaded:empty -->\n\t\t\t\t\t</li>\n\t\t\t\t\t<!-- END groupItems:loop -->\n\t\t\t\t</ul>\n\t\t\t\t<!-- BEGIN arrows:exist -->\n\t\t\t\t<ul class="\\{classNames.smartPhotoArrows\\}<!-- BEGIN hideUi:exist --> hide<!-- END hideUi:exist -->">\n\t\t\t\t\t<li class="\\{classNames.smartPhotoArrowLeft\\}<!-- BEGIN showPrevArrow:exist --> show<!-- END showPrevArrow:exist -->" data-action-click="gotoSlide({prev})"></li>\n\t\t\t\t\t<li class="\\{classNames.smartPhotoArrowRight\\}<!-- BEGIN showNextArrow:exist --> show<!-- END showNextArrow:exist -->" data-action-click="gotoSlide({next})"></li>\n\t\t\t\t</ul>\n\t\t\t\t<!-- END arrows:exist -->\n\t\t\t\t<!-- BEGIN nav:exist -->\n\t\t\t\t<nav class="\\{classNames.smartPhotoNav\\}<!-- BEGIN hideUi:exist --> hide<!-- END hideUi:exist -->">\n\t\t\t\t\t<ul >\n\t\t\t\t\t\t<!-- BEGIN groupItems:loop -->\n\t\t\t\t\t\t<li data-action-click="gotoSlide({index})" class="<!-- \\BEGIN currentIndex:touch#{index} -->current<!-- \\END currentIndex:touch#{index} -->" style="background-image:url({src});"></li>\n\t\t\t\t\t\t<!-- END groupItems:loop -->\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t\t<!-- END nav:exist -->\n\t\t</div>\n\t\t<!-- BEGIN appearEffect:exist -->\n\t\t<img src=\\{appearEffect.img\\}\n\t\tclass="\\{classNames.smartPhotoImgClone\\}"\n\t\tstyle="width:\\{appearEffect.width\\}px;height:\\{appearEffect.height\\}px;transform:translate(\\{appearEffect.left\\}px,\\{appearEffect.top\\}px) scale(1)" />\n\t\t<!-- END appearEffect:exist -->\n\t</div>\n</div>\n';
+var template = '<div class="\\{classNames.smartPhoto\\}"<!-- BEGIN hide:exist --> style="display:none;"<!-- END hide:exist -->>\n\t<div class="\\{classNames.smartPhotoBody\\}">\n\t\t<div class="\\{classNames.smartPhotoInner\\}">\n\t\t\t   <div class="\\{classNames.smartPhotoHeader\\}">\n\t\t\t\t\t<span class="\\{classNames.smartPhotoCount\\}">{currentIndex}[increment]/{total}</span>\n\t\t\t\t\t<span class="\\{classNames.smartPhotoCaption\\}"><!-- BEGIN groupItems:loop --><!-- \\BEGIN currentIndex:touch#{index} -->{caption}<!-- \\END currentIndex:touch#{index} --><!-- END groupItems:loop --></span>\n\t\t\t\t\t<button class="\\{classNames.smartPhotoDismiss\\}" data-action-click="hidePhoto()"></button>\n\t\t\t\t</div>\n\t\t\t\t<div class="\\{classNames.smartPhotoContent\\}"<!-- BEGIN isSmartPhone:exist --> data-action-touchstart="beforeDrag" data-action-touchmove="onDrag" data-action-touchend="afterDrag(false)"<!-- END isSmartPhone:exist -->>\n\t\t\t\t</div>\n\t\t\t\t<ul style="transform:translate({translateX}px,{translateY}px);" class="\\{classNames.smartPhotoList\\}<!-- BEGIN onMoveClass:exist --> \\{classNames.smartPhotoListOnMove\\}<!-- END onMoveClass:exist -->">\n\t\t\t\t\t<!-- BEGIN groupItems:loop -->\n\t\t\t\t\t<li style="transform:translate({translateX}px,{translateY}px);" class="<!-- \\BEGIN currentIndex:touch#{index} -->current<!-- \\END currentIndex:touch#{index} -->">\n\t\t\t\t\t\t<!-- BEGIN loaded:exist -->\n\t\t\t\t\t\t<div style="transform:translate({x}px,{y}px) scale({scale});" class="\\\\{classNames.smartPhotoImgWrap\\\\}"<!-- \\BEGIN isSmartPhone:empty --> data-action-mousemove="onDrag" data-action-mousedown="beforeDrag" data-action-mouseup="afterDrag"<!-- \\END isSmartPhone:empty --><!-- \\BEGIN isSmartPhone:exist --> data-action-touchstart="beforeDrag" data-action-touchmove="onDrag" data-action-touchend="afterDrag"<!-- \\END isSmartPhone:exist -->>\n\t\t\t\t\t\t\t<img style="<!-- \\BEGIN currentIndex:touch#{index} -->transform:translate(\\{photoPosX\\}[virtualPos]px,\\{photoPosY\\}[virtualPos]px) scale(\\{scaleSize\\});<!-- \\END currentIndex:touch#{index} -->" src="{src}" class="\\\\{classNames.smartPhotoImg\\\\}<!-- \\BEGIN scale:exist -->  \\\\{classNames.smartPhotoImgOnMove\\\\}<!-- \\END scale:exist --><!-- \\BEGIN elastic:exist --> \\\\{classNames.smartPhotoImgElasticMove\\\\}<!-- \\END elastic:exist --><!-- \\BEGIN appear:exist --> active<!-- \\END appear:exist -->" ondragstart="return false;">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<!-- END loaded:exist -->\n\t\t\t\t\t\t<!-- BEGIN loaded:empty -->\n\t\t\t\t\t\t<div class="\\\\{classNames.smartPhotoLoaderWrap\\\\}">\n\t\t\t\t\t\t\t<span class="\\\\{classNames.smartPhotoLoader\\\\}"></span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<!-- END loaded:empty -->\n\t\t\t\t\t</li>\n\t\t\t\t\t<!-- END groupItems:loop -->\n\t\t\t\t</ul>\n\t\t\t\t<!-- BEGIN arrows:exist -->\n\t\t\t\t<ul class="\\{classNames.smartPhotoArrows\\}<!-- BEGIN hideUi:exist --> hide<!-- END hideUi:exist -->">\n\t\t\t\t\t<li class="\\{classNames.smartPhotoArrowLeft\\}<!-- BEGIN showPrevArrow:exist --> show<!-- END showPrevArrow:exist -->" data-action-click="gotoSlide({prev})"></li>\n\t\t\t\t\t<li class="\\{classNames.smartPhotoArrowRight\\}<!-- BEGIN showNextArrow:exist --> show<!-- END showNextArrow:exist -->" data-action-click="gotoSlide({next})"></li>\n\t\t\t\t</ul>\n\t\t\t\t<!-- END arrows:exist -->\n\t\t\t\t<!-- BEGIN nav:exist -->\n\t\t\t\t<nav class="\\{classNames.smartPhotoNav\\}<!-- BEGIN hideUi:exist --> hide<!-- END hideUi:exist -->">\n\t\t\t\t\t<ul >\n\t\t\t\t\t\t<!-- BEGIN groupItems:loop -->\n\t\t\t\t\t\t<li data-action-click="gotoSlide({index})" class="<!-- \\BEGIN currentIndex:touch#{index} -->current<!-- \\END currentIndex:touch#{index} -->" style="background-image:url({src});"></li>\n\t\t\t\t\t\t<!-- END groupItems:loop -->\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t\t<!-- END nav:exist -->\n\t\t</div>\n\t\t<!-- BEGIN appearEffect:exist -->\n\t\t<img src=\\{appearEffect.img\\}\n\t\tclass="\\{classNames.smartPhotoImgClone\\}"\n\t\tstyle="width:\\{appearEffect.width\\}px;height:\\{appearEffect.height\\}px;transform:translate(\\{appearEffect.left\\}px,\\{appearEffect.top\\}px) scale(1)" />\n\t\t<!-- END appearEffect:exist -->\n\t</div>\n</div>\n';
 
@@ -385,2 +385,4 @@
     value: function hidePhoto() {
+      var _this6 = this;
+
       this.data.hide = true;
@@ -394,5 +396,36 @@ this.data.appear = false;
       (0, _zeptoBrowserify.$)(window).scrollTop(scrollLocation);
-      this.update();
+      this._doHideEffect().then(function () {
+        _this6.update();
+      });
     }
   }, {
+    key: '_doHideEffect',
+    value: function _doHideEffect() {
+      var _this7 = this;
+
+      return new Promise(function (resolve, reject) {
+        var classNames = _this7.data.classNames;
+        var photo = _this7._getElementByClass(classNames.smartPhoto);
+        var img = _this7._getElementByQuery('.current .' + classNames.smartPhotoImg);
+        var height = window.innerHeight;
+        var handler = function handler() {
+          photo.removeEventListener('transitionend', handler, true);
+          resolve();
+        };
+        photo.style.opacity = 0;
+        img.style.transform = 'translateY(' + height + 'px)';
+        photo.addEventListener('transitionend', handler, true);
+      });
+    }
+  }, {
+    key: '_getElementByClass',
+    value: function _getElementByClass(className) {
+      return document.querySelector('[data-id="' + this.id + '"] .' + className);
+    }
+  }, {
+    key: '_getElementByQuery',
+    value: function _getElementByQuery(query) {
+      return document.querySelector('[data-id="' + this.id + '"] ' + query);
+    }
+  }, {
     key: '_getTouchPos',
@@ -426,3 +459,3 @@ value: function _getTouchPos(e) {
     value: function setPosByCurrentIndex() {
-      var _this6 = this;
+      var _this8 = this;
 
@@ -433,4 +466,5 @@ var items = this.groupItems();
       setTimeout(function () {
-        _this6.data.translateX = moveX;
-        _this6._listUpdate();
+        _this8.data.translateX = moveX;
+        _this8.data.translateY = 0;
+        _this8._listUpdate();
       }, 1);
@@ -507,3 +541,3 @@ }
     value: function slideList() {
-      var _this7 = this;
+      var _this9 = this;
 
@@ -515,5 +549,5 @@ this.data.onMoveClass = true;
       setTimeout(function () {
-        _this7.data.onMoveClass = false;
-        _this7.setArrow();
-        _this7.update();
+        _this9.data.onMoveClass = false;
+        _this9.setArrow();
+        _this9.update();
       }, 200);
@@ -561,2 +595,3 @@ }
       this.isSwipable = true;
+      this.dragStart = true;
       this.firstPos = pos;
@@ -568,5 +603,11 @@ this.oldPos = pos;
     value: function afterDrag(value) {
+      var items = this.groupItems();
+      var date = new Date();
+      var tapSecond = date.getTime();
+      var offset = this.tapSecond - tapSecond;
+      var swipeWidth = this.oldPos.x - this.firstPos.x;
+      var swipeHeight = this.oldPos.y - this.firstPos.y;
       this.isSwipable = false;
       this.onListMove = false;
-      var items = this.groupItems();
+
       if (this.isBeingZoomed) {
@@ -579,11 +620,7 @@ this.afterGesture();
         return;
-      } else if (!util.isSmartPhone() && this.oldPos.x === this.firstPos.x) {
+      } else if (!util.isSmartPhone() && swipeWidth === 0 && swipeHeight === 0) {
         this.zoomPhoto();
         return;
       }
-      var date = new Date();
-      var tapSecond = date.getTime();
-      var offset = this.tapSecond - tapSecond;
-      var swipeWidth = this.oldPos.x - this.firstPos.x;
-      if (Math.abs(offset) <= 500 && swipeWidth === 0) {
+      if (Math.abs(offset) <= 500 && swipeWidth === 0 && swipeHeight === 0) {
         this.e.preventDefault();
@@ -594,8 +631,18 @@ this.zoomPhoto();
       this.tapSecond = tapSecond;
-      if (swipeWidth >= this.data.swipeOffset && this.data.currentIndex !== 0) {
-        this.data.currentIndex--;
-      } else if (swipeWidth <= -this.data.swipeOffset && this.data.currentIndex != items.length - 1) {
-        this.data.currentIndex++;
+      if (this.moveDir === 'horizontal') {
+        if (swipeWidth >= this.data.swipeOffset && this.data.currentIndex !== 0) {
+          this.data.currentIndex--;
+        } else if (swipeWidth <= -this.data.swipeOffset && this.data.currentIndex != items.length - 1) {
+          this.data.currentIndex++;
+        }
+        this.slideList();
       }
-      this.slideList();
+      if (this.moveDir === 'vertical') {
+        if (swipeHeight >= this.data.swipeOffset) {
+          this.hidePhoto();
+        } else {
+          this.data.translateY = 0;
+          this.slideList();
+        }
+      }
     }
@@ -620,7 +667,23 @@ }, {
       }
+
       var pos = this._getTouchPos(this.e);
       var x = pos.x - this.oldPos.x;
-      this.pos.x += x;
+      var y = pos.y - this.firstPos.y;
+
+      if (this.dragStart) {
+        this.dragStart = false;
+        if (Math.abs(x) > Math.abs(y)) {
+          this.moveDir = 'horizontal';
+        } else {
+          this.moveDir = 'vertical';
+        }
+      }
+
+      if (this.moveDir === 'horizontal') {
+        this.pos.x += x;
+        this.data.translateX = this.pos.x;
+      } else {
+        this.data.translateY = y;
+      }
       this.onListMove = true;
-      this.data.translateX = this.pos.x;
       this.oldPos = pos;
@@ -632,3 +695,3 @@ this._listUpdate();
     value: function zoomPhoto() {
-      var _this8 = this;
+      var _this10 = this;
 
@@ -641,4 +704,4 @@ this.data.hideUi = true;
       setTimeout(function () {
-        _this8.data.scale = true;
-        _this8._photoUpdate();
+        _this10.data.scale = true;
+        _this10._photoUpdate();
       }, 300);
@@ -828,3 +891,3 @@ }
     value: function _registerElasticForce(x, y) {
-      var _this9 = this;
+      var _this11 = this;
 
@@ -846,4 +909,4 @@ var item = this._getSelectedItem();
       setTimeout(function () {
-        _this9.data.elastic = false;
-        _this9._photoUpdate();
+        _this11.data.elastic = false;
+        _this11._photoUpdate();
       }, 300);
@@ -964,3 +1027,3 @@ }
       var $list = (0, _zeptoBrowserify.$)('.' + classNames.smartPhotoList, '[data-id="' + this.id + '"]');
-      var transform = 'translateX(' + this.data.translateX + 'px)';
+      var transform = 'translate(' + this.data.translateX + 'px,' + this.data.translateY + 'px)';
       $list.css('transform', transform);
@@ -967,0 +1030,0 @@ // $list

package.json

 {
   "name": "smartphoto",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "smartphoto",
@@ -5,0 +5,0 @@ "homepage": "http://developer.a-blogcms.jp",

readme.md

@@ -11,3 +11,3 @@ # SmartPhoto
 
-## Instration
+## Installation
 - [npm](https://www.npmjs.com/package/smartphoto)
@@ -14,0 +14,0 @@ - [standalone](https://raw.githubusercontent.com/appleple/smart-photo/master/js/smartphoto.js)

src/core/index.js

@@ -350,5 +350,31 @@ import aTemplate from 'a-template';
     $(window).scrollTop( scrollLocation );
-    this.update();
+    this._doHideEffect().then(() => {
+      this.update();
+    });
   }
 
+  _doHideEffect () {
+    return new Promise((resolve,reject) => {
+      const classNames = this.data.classNames;
+      const photo = this._getElementByClass(classNames.smartPhoto);
+      const img = this._getElementByQuery(`.current .${classNames.smartPhotoImg}`);
+      const height = window.innerHeight;
+      const handler = () => {
+        photo.removeEventListener('transitionend', handler, true);
+        resolve();
+      };
+      photo.style.opacity = 0;
+      img.style.transform = `translateY(${height}px)`;
+      photo.addEventListener('transitionend',  handler, true); 
+    });
+  }
+
+  _getElementByClass (className) {
+    return document.querySelector(`[data-id="${this.id}"] .${className}`);
+  }
+
+  _getElementByQuery (query) {
+    return document.querySelector(`[data-id="${this.id}"] ${query}`);
+  }
+
   _getTouchPos (e) {
@@ -387,2 +413,3 @@ let x = 0;
       this.data.translateX = moveX;
+      this.data.translateY = 0;
       this._listUpdate();
@@ -502,2 +529,3 @@ },1);
     this.isSwipable = true;
+    this.dragStart = true;
     this.firstPos = pos;
@@ -508,5 +536,11 @@ this.oldPos = pos;
   afterDrag (value) {
+    const items = this.groupItems();
+    const date = new Date();
+    const tapSecond = date.getTime();
+    const offset = this.tapSecond - tapSecond;
+    const swipeWidth = this.oldPos.x - this.firstPos.x;
+    const swipeHeight = this.oldPos.y - this.firstPos.y;
     this.isSwipable = false;
     this.onListMove = false;
-    const items = this.groupItems();
+
     if (this.isBeingZoomed) {
@@ -519,11 +553,7 @@ this.afterGesture();
       return;
-    } else if (!util.isSmartPhone() && this.oldPos.x === this.firstPos.x) {
+    } else if (!util.isSmartPhone() && swipeWidth === 0 && swipeHeight === 0) {
       this.zoomPhoto();
       return;
     }
-    const date = new Date();
-    const tapSecond = date.getTime();
-    const offset = this.tapSecond - tapSecond;
-    const swipeWidth = this.oldPos.x - this.firstPos.x;
-    if(Math.abs(offset) <= 500 && swipeWidth === 0) {
+    if(Math.abs(offset) <= 500 && swipeWidth === 0 && swipeHeight === 0) {
       this.e.preventDefault();
@@ -534,8 +564,18 @@ this.zoomPhoto();
     this.tapSecond = tapSecond;
-    if (swipeWidth >= this.data.swipeOffset && this.data.currentIndex !== 0 ) {
-      this.data.currentIndex--;
-    } else if (swipeWidth <= - this.data.swipeOffset && this.data.currentIndex != items.length -1 ) {
-      this.data.currentIndex++;
+    if (this.moveDir === 'horizontal') {
+      if (swipeWidth >= this.data.swipeOffset && this.data.currentIndex !== 0 ) {
+        this.data.currentIndex--;
+      } else if (swipeWidth <= - this.data.swipeOffset && this.data.currentIndex != items.length -1 ) {
+        this.data.currentIndex++;
+      }
+      this.slideList();
     }
-    this.slideList();
+    if (this.moveDir === 'vertical') {
+      if (swipeHeight >= this.data.swipeOffset) {
+        this.hidePhoto();
+      } else {
+        this.data.translateY = 0;
+        this.slideList();
+      }
+    }
   }
@@ -559,7 +599,23 @@
     }
+
     const pos = this._getTouchPos(this.e);
     const x = pos.x - this.oldPos.x;
-    this.pos.x += x;
+    const y = pos.y - this.firstPos.y;
+
+    if (this.dragStart) {
+      this.dragStart = false;
+      if( Math.abs(x) > Math.abs(y) ) {
+        this.moveDir = 'horizontal';
+      } else {
+        this.moveDir = 'vertical';
+      }
+    }
+
+    if (this.moveDir === 'horizontal') {
+      this.pos.x += x;
+      this.data.translateX = this.pos.x;
+    } else {
+      this.data.translateY = y;
+    }
     this.onListMove = true;
-    this.data.translateX = this.pos.x;
     this.oldPos = pos;
@@ -871,3 +927,3 @@ this._listUpdate();
     const $list = $(`.${classNames.smartPhotoList}`,`[data-id="${this.id}"]`);
-    const transform = `translateX(${this.data.translateX}px)`;
+    const transform = `translate(${this.data.translateX}px,${this.data.translateY}px)`;
     $list.css('transform',transform);
@@ -874,0 +930,0 @@ // $list

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7385202

increased by0.11%

Lines of code

13271

increased by1.69%

No dependency changes