imgViewerHelper.js 5.02 KB
define([
  'i18n',
  "photoswipe",
  "photoswipe_ui",
  "mUtil"
], function (i18n, PhotoSwipe, PhotoSwipeUI_Default, mUtil) {
  var imgViewerTpl = '\
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> \
	<div class="pswp__bg"></div> \
	<div class="pswp__scroll-wrap"> \
		<div class="pswp__container"> \
			<div class="pswp__item pswp__item--fit"></div> \
			<div class="pswp__item pswp__item--fit"></div> \
			<div class="pswp__item pswp__item--fit"></div> \
		</div> \
		<div class="pswp__ui pswp__ui--hidden"> \
			<div class="pswp__top-bar"> \
				<div class="pswp__counter"></div> \
				<div class="pswp__preloader"> \
					<div class="pswp__preloader__icn"> \
						<div class="pswp__preloader__cut"> \
							<div class="pswp__preloader__donut"></div> \
						</div> \
					</div> \
				</div> \
			</div> \
			<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> \
				<div class="pswp__share-tooltip"></div> \
			</div> \
			<div class="pswp__caption"> \
				<div class="pswp__caption__center"></div> \
			</div> \
		</div> \
	</div> \
</div>';
  var defOpts = {
    history: true,
    focus: false,
    maxSpreadZoom: 4,
    tapToClose: true,
    mouseUsed: true, // 处理ios中gap的top值为0的问题
    errorMsg: "<div class='pswp__error-msg'>" + i18n.IMAGE_LOADING_ERROER + "</div>",
    loop: false,
    preloaderEl: false
  };
  var viewer = {
    id: 'img-viewer',
    $el: null,
    preInit: function () {
      var viewerEle = document.createElement('div');
      var $viewer = $(viewerEle);

      viewerEle.id = this.id;
      this.$el = $viewer;

      $(document.body).append(viewerEle);
      this.$el.html(imgViewerTpl);
    },
    init: function (pswpItems, opts) {
      var pswpEle = this.$el.find('.pswp')[0];
      var pswpOpts = $.extend({}, defOpts, opts);
      var pswp = new PhotoSwipe(pswpEle, PhotoSwipeUI_Default, pswpItems, pswpOpts);
      
      pswp.init();

      pswp.listen('imageLoadComplete', _.pressImgForSave);
    },
    clean: function () {
      return this.$el.html(imgViewerTpl);
    },
    _: {
      parseToPwspItems: function (imgs) {
        return imgs.map(function (img) {
          return {
            src: img.src,
            msrc: img.src, // photoSwipe中打开动画时,placeholder的src
            w: img.naturalWidth,
            h: img.naturalHeight,
            fit: true, // 通过修改源码添加的配置来兼容图片objectFit
          };
        });
      },
      pressImgForSave: function () {
        if(!mUtil.runtime.isEmobile() && !mUtil.runtime.isEmobile7()) {
          return;
        }

        require(["hammer"], function (Hammer) {
          var mc = new Hammer(viewer.$el[0], {
            recognizers: [
              [Hammer.Press, { time: 500 }]
            ]
          });

          mc.on('press', function (ev) {
            var imgSrc = $(ev.target).attr("src");
            var srcEvent = ev.srcEvent;

            if (srcEvent) {
              srcEvent.stopPropagation();
              srcEvent.preventDefault();
            }

            if(!imgSrc) return;

            Mobile_NS.footerMenu([
              {
                text: "<div style='text-align: center;margin-left: -18px;font-size: 20px;color: #017afd;'>" + i18n.SAVE_IMAGE + "</div>",
                callback: function () {
                  if(mUtil.checkEmpJsApi("downloadImage")) {
                    return mUtil.invokeEmApi("downloadImage", {
                      url: imgSrc,
                      isShowProgressTips: 1,
                      success: function () {
                        Mobile_NS.msg(i18n.SAVE_SUCCESS);//保存成功
                      }
                    });
                  }

                  if(imgSrc.indexOf("data:image") == 0) {
                    try {
                      var baseArr = imgSrc.split(",");
                      var basepic64 = baseArr[1];
                      if(mUtil.checkEmpJsApi("saveBase64Image")) {
                    	mUtil.invokeEmApi("saveBase64Image", {
                          base64Img: basepic64,
                          success: function () {
                            Mobile_NS.msg(i18n.SAVE_SUCCESS);//保存成功
                          }
                    	});
                      }
                    } catch(e) {
                      console.log(e.message);
                    }
                  } else {
                    location = "emobile:saveImage:" + imgSrc + ":111";
                  }
                }
              }
            ]);
          });
        });
      }
    }
  };
  var _ = viewer._;

  viewer.preInit();

  return function (imgs, actIndex) {
    var opts = { 
      index: actIndex,
      getThumbBoundsFn: function (index) {
        var thumbnail = imgs[index];
        var pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
        var rect = thumbnail.getBoundingClientRect();

        return { x: rect.left, y: rect.top + pageYScroll, w: rect.width, h: rect.w };
      }
    };
    var pswpItems = _.parseToPwspItems(imgs);

    viewer.init(pswpItems, opts);
  };
});