mobileoa-common-modules/app/scripts/modules/info/directives/sinoInfoImg.js

移动办公平台前端公共功能模块

'use strict';
var angular = require('angular'),
  _ = require('jsUtil');
require('../modules');
var module = angular.module('info.directives');

function calcImgSize(scope, element, attrs) {
  var ratio = Math.max(1, Math.min(1.5, (window.devicePixelRatio || 1)));
  var elementWidth = element[0].getBoundingClientRect().width;
  var elementHeight = element[0].getBoundingClientRect().height;
  var setImgSize = attrs.imgWidth && attrs.imgHeight;
  var imgWidth = attrs.imgWidth || 0;
  var imgHeight = attrs.imgHeight || 0;

  if (setImgSize) {
    if (imgWidth < elementWidth) {
      return {
        _w: imgWidth,
        _h: imgHeight,
        w: elementWidth,
        h: imgHeight
      };
    } else {
      var _w = parseInt(Math.min(elementWidth * ratio, imgWidth)),
        _h = parseInt(_w * (imgHeight / imgWidth));
      return {
        _w: _w,
        _h: _h,
        w: elementWidth,
        h: Math.max(1, _h * (elementWidth / _w))
      };
    }
  } else {
    return {
      w: elementWidth,
      h: elementHeight,
      _w: parseInt(elementWidth * ratio),
      _h: parseInt(elementHeight * ratio)
    };
  }
}

module.directive('sinoInfoImg', function(AppConfig, AppConnected, CacheService, $rootScope) {

  function generateImgSrc(ngSrc, width, ngCut, height) {
    var src = ngSrc && ngSrc.indexOf('http') !== 0?
      AppConfig.serverUrl + ngSrc : ngSrc;

    if (!_.isEmpty(src)) {
      src += src.indexOf('?') >= 0? '&' : '?';
      src += (ngCut? 'minWidth=' : 'width=') + width;
      if (ngCut) {
        src += '&minHeight=' + height + '&cut=true';
      }
    }

    return src;
  }

  return {
    restrict: 'E',
    templateUrl: 'views/infoRelease/sinoInfoImg.tpl.html',
    replace: true,
    scope: true,
    link: function(scope, elements, attrs) {
      scope.show = true;
      var load = CacheService.get('infoimg_load', true);
      if(!load && (window.navigator.connection.type === Connection.CELL ||
        window.navigator.connection.type === Connection.CELL_2G ||
        window.navigator.connection.type === Connection.CELL_3G ||
        window.navigator.connection.type === Connection.CELL_4G)) {
        scope.show = false;
        elements[0].style.display = "none";
        return;
      }
      var ngSrc = attrs.imgSrc,//图片链接
        ngCut = attrs.imgCut === 'true',
        size = calcImgSize(scope, elements, attrs);
      elements[0].style.height = size.h + 'px';

      scope.img = {
        url: generateImgSrc(ngSrc, size._w, ngCut, size._h)
      };

      scope.onImageLoad = function() {
        elements[0].classList.add('loaded');
        elements[0].classList.remove('loading');
      };
    }
  };
})
.directive('sinoImgLoad', function() {
  return {
    restrict: 'A',
    link: function(scope, elements, attrs) {
      elements.on('load', function() {
        scope.$eval(attrs.sinoImgLoad);
      });
    }
  }
});