Magnifier.jsを使って添付ファイル画像をAmazon風に拡大表示

(function () {
  "use strict";
  kintone.events.on('app.record.detail.show', function(event){
    [].forEach.call(kintone.app.record.getFieldElement('添付ファイル').getElementsByTagName('li'), function(li, index){
      var thumb = li.getElementsByTagName('img')[0];
      if(!thumb) return;
      thumb.id = 'magnifier-thumb-' + index;
      thumb.parentNode.style.position = 'relative';
      var xhr = new XMLHttpRequest();
      xhr.open('GET', '/k/v1/file.json?fileKey=' + event.record.添付ファイル.value[index].fileKey);
      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
      xhr.responseType = 'blob';
      xhr.addEventListener('load', function(){
        var img = new Image();
        img.src = URL.createObjectURL(xhr.response);
        img.addEventListener('load', function(){
          var width = 400;
          var magnifierLargeWrapper = document.createElement('div');
          magnifierLargeWrapper.id = 'magnifier-large-wrapper-' + index;
          magnifierLargeWrapper.style.width = width + 'px';
          magnifierLargeWrapper.style.height = (width/img.width*img.height) + 'px';
          magnifierLargeWrapper.style.position = 'relative';
          magnifierLargeWrapper.style.overflow = 'hidden';
          kintone.app.record.getSpaceElement('space').appendChild(magnifierLargeWrapper);
          (new Magnifier(new Event())).attach({
            thumb: '#magnifier-thumb-' + index,
            large: URL.createObjectURL(xhr.response),
            largeWrapper: 'magnifier-large-wrapper-' + index,
            zoomable: true,
            onthumbenter: function(){
              magnifierLargeWrapper.style.display = 'block';
            },
            onthumbleave: function(){
              magnifierLargeWrapper.style.display = 'none';
            }
          });
          magnifierLargeWrapper.style.display = 'none';
        });
      });
      xhr.send();
    });
  });
})();