smartphoto - npm Package Compare versions

Comparing version 1.2.5 to 1.3.0

lib/core/index.js

@@ -74,2 +74,3 @@ 'use strict';
   registance: 0.5,
+  loadOffset: 2,
   resizeStyle: 'fit'
@@ -119,9 +120,6 @@ };
     _this.update();
-    _this._getEachImageSize().then(function () {
-      _this._fireEvent('loadall');
-      var currentItem = _this._getCurrentItemByHash();
-      if (currentItem) {
-        util.triggerEvent(currentItem.element, 'click');
-      }
-    });
+    var currentItem = _this._getCurrentItemByHash();
+    if (currentItem) {
+      util.triggerEvent(currentItem.element, 'click');
+    }
 
@@ -222,28 +220,2 @@ setInterval(function () {
   }, {
-    key: '_getEachImageSize',
-    value: function _getEachImageSize() {
-      var arr = [];
-      var group = this.data.group;
-      var loadItems = function loadItems(item) {
-        var promise = new Promise(function (resolve, reject) {
-          var img = new Image();
-          img.onload = function () {
-            item.width = img.width;
-            item.height = img.height;
-            item.loaded = true;
-            resolve();
-          };
-          img.onerror = function () {
-            reject();
-          };
-          img.src = item.src;
-        });
-        arr.push(promise);
-      };
-      Object.keys(group).forEach(function (key) {
-        group[key].forEach(loadItems);
-      });
-      return Promise.all(arr);
-    }
-  }, {
     key: '_resetTranslate',
@@ -586,2 +558,35 @@ value: function _resetTranslate() {
   }, {
+    key: '_getItemByIndex',
+    value: function _getItemByIndex(index) {
+      var data = this.data;
+      if (data.group[data.currentGroup][index]) {
+        return data.group[data.currentGroup][index];
+      } else {
+        return null;
+      }
+    }
+  }, {
+    key: '_loadNeighborItems',
+    value: function _loadNeighborItems() {
+      var _this10 = this;
+
+      var index = this.data.currentIndex;
+      var loadOffset = this.data.loadOffset;
+      var from = index - loadOffset;
+      var to = index + loadOffset;
+      var promises = [];
+      for (var i = from; i < to; i++) {
+        var item = this._getItemByIndex(i);
+        if (item && !item.loaded) {
+          promises.push(this._loadItem(item));
+        }
+      }
+      if (promises.length) {
+        Promise.all(promises).then(function () {
+          _this10._initPhoto();
+          _this10.update();
+        });
+      }
+    }
+  }, {
     key: '_setSizeByScreen',
@@ -615,3 +620,3 @@ value: function _setSizeByScreen() {
     value: function _slideList() {
-      var _this10 = this;
+      var _this11 = this;
 
@@ -629,9 +634,17 @@ this.data.scaleSize = 1;
       setTimeout(function () {
-        _this10.data.onMoveClass = false;
-        _this10.setArrow();
-        _this10.update();
-        if (_this10.data.oldIndex !== _this10.data.currentIndex) {
-          _this10._fireEvent('change');
+        var item = _this11._getSelectedItem();
+        _this11.data.onMoveClass = false;
+        _this11.setArrow();
+        _this11.update();
+        if (_this11.data.oldIndex !== _this11.data.currentIndex) {
+          _this11._fireEvent('change');
         }
-        _this10.data.oldIndex = _this10.data.currentIndex;
+        _this11.data.oldIndex = _this11.data.currentIndex;
+        _this11._loadNeighborItems();
+        if (!item.loaded) {
+          _this11._loadItem(item).then(function () {
+            _this11._initPhoto();
+            _this11.update();
+          });
+        }
       }, 200);
@@ -786,3 +799,3 @@ }
     value: function zoomPhoto() {
-      var _this11 = this;
+      var _this12 = this;
 
@@ -798,5 +811,5 @@ this.data.hideUi = true;
       setTimeout(function () {
-        _this11.data.scale = true;
-        _this11._photoUpdate();
-        _this11._fireEvent('zoomin');
+        _this12.data.scale = true;
+        _this12._photoUpdate();
+        _this12._fireEvent('zoomin');
       }, 300);
@@ -1012,3 +1025,3 @@ }
     value: function _registerElasticForce(x, y) {
-      var _this12 = this;
+      var _this13 = this;
 
@@ -1030,4 +1043,4 @@ var item = this._getSelectedItem();
       setTimeout(function () {
-        _this12.data.elastic = false;
-        _this12._photoUpdate();
+        _this13.data.elastic = false;
+        _this13._photoUpdate();
       }, 300);
@@ -1034,0 +1047,0 @@ }

package.json

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

readme.md

@@ -37,3 +37,3 @@ # SmartPhoto
 ```js
-const smartPhoto = require('smartphoto');
+const SmartPhoto = require('smartphoto');
 ```
@@ -43,4 +43,4 @@
 ```js
-window.addEventListener('DOMContentLoaded',function(){
-    new smartPhoto(".js-smartphoto");
+document.addEventListener('DOMContentLoaded',function(){
+    new SmartPhoto(".js-smartphoto");
 });
@@ -52,3 +52,3 @@ ```
 $(function(){
-    $(".js-smartphoto").smartPhoto();
+    $(".js-smartphoto").SmartPhoto();
 });
@@ -73,3 +73,3 @@ ```
 document.addEventListener('DOMContentLoaded',function(){
-  new smartPhoto(".js-smartphoto");
+  new SmartPhoto(".js-smartphoto");
 });
@@ -122,3 +122,3 @@ </script>
 document.addEventListener('DOMContentLoaded',function(){
-    new smartPhoto(".js-smartphoto",{
+    new SmartPhoto(".js-smartphoto",{
         arrows: false,
@@ -136,3 +136,3 @@ nav: false
 document.addEventListener('DOMContentLoaded',function(){
-  new smartPhoto(".js-smartphoto",{
+  new SmartPhoto(".js-smartphoto",{
       resizeStyle: 'fit'
@@ -139,0 +139,0 @@ });

src/core/index.js

@@ -54,2 +54,3 @@ import ATemplate from 'a-template';
   registance: 0.5,
+  loadOffset: 2,
   resizeStyle: 'fit',
@@ -96,9 +97,6 @@ };
     this.update();
-    this._getEachImageSize().then(() => {
-      this._fireEvent('loadall');
-      const currentItem = this._getCurrentItemByHash();
-      if (currentItem) {
-        util.triggerEvent(currentItem.element, 'click');
-      }
-    });
+    const currentItem = this._getCurrentItemByHash();
+    if (currentItem) {
+      util.triggerEvent(currentItem.element, 'click');
+    }
 
@@ -191,27 +189,2 @@ setInterval(() => {
 
-  _getEachImageSize() {
-    const arr = [];
-    const group = this.data.group;
-    const loadItems = (item) => {
-      const promise = new Promise((resolve, reject) => {
-        const img = new Image();
-        img.onload = () => {
-          item.width = img.width;
-          item.height = img.height;
-          item.loaded = true;
-          resolve();
-        };
-        img.onerror = () => {
-          reject();
-        };
-        img.src = item.src;
-      });
-      arr.push(promise);
-    };
-    Object.keys(group).forEach((key) => {
-      group[key].forEach(loadItems);
-    });
-    return Promise.all(arr);
-  }
-
   _resetTranslate() {
@@ -524,2 +497,31 @@ const items = this.groupItems();
 
+  _getItemByIndex(index) {
+    const data = this.data;
+    if (data.group[data.currentGroup][index]) {
+      return data.group[data.currentGroup][index];
+    } else {
+      return null;
+    }
+  }
+
+  _loadNeighborItems() {
+    const index = this.data.currentIndex;
+    const loadOffset = this.data.loadOffset;
+    const from = index - loadOffset;
+    const to = index + loadOffset;
+    const promises = [];
+    for (let i = from; i < to; i++) {
+      const item = this._getItemByIndex(i);
+      if (item && !item.loaded) {
+        promises.push(this._loadItem(item));
+      }
+    }
+    if (promises.length) {
+      Promise.all(promises).then(() => {
+        this._initPhoto();
+        this.update();
+      });
+    }
+  }
+
   _setSizeByScreen() {
@@ -562,2 +564,3 @@ const windowX = this._getWindowWidth();
     setTimeout(() => {
+      const item = this._getSelectedItem();
       this.data.onMoveClass = false;
@@ -570,2 +573,9 @@ this.setArrow();
       this.data.oldIndex = this.data.currentIndex;
+      this._loadNeighborItems();
+      if (!item.loaded) {
+        this._loadItem(item).then(() => {
+          this._initPhoto();
+          this.update();
+        });
+      }
     }, 200);
@@ -572,0 +582,0 @@ }

test/test.js

@@ -20,2 +20,3 @@ const Nightmare = require('nightmare');
       .click('[data-caption="lion"]')
+      .wait(1000)
       .click('.smartphoto-arrow-right a')
@@ -22,0 +23,0 @@ .wait(1000)

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

7471006

decreased by-0.57%

Lines of code

11637

decreased by-8.36%

No dependency changes