Attachment #120731 for bug #28179

View | Details | Raw Unified | Return to bug 28179
Collapse All | Expand All




.chocolat-zoomable.chocolat-zoomed {
    cursor: zoom-out;
}
.chocolat-open {
    overflow: hidden;
}
.chocolat-overlay {
    transition: opacity 0.4s ease, visibility 0s 0.4s ease;
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
}
.chocolat-overlay.chocolat-visible {
    transition: opacity 0.4s, visibility 0s;
    visibility: visible;
    opacity: 0.8;
}

.chocolat-wrapper {
    transition: opacity 0.4s ease, visibility 0s 0.4s ease;
    width: 100%;
    height: 100%;
    position: fixed;
    opacity: 0;
    left: 0;
    top: 0;
    z-index: 16;
    color: #fff;
    visibility: hidden;
}
.chocolat-wrapper.chocolat-visible {
    transition: opacity 0.4s, visibility 0s;
    opacity: 1;
    visibility: visible;
}

.chocolat-zoomable .chocolat-img {
    cursor: zoom-in;
}
.chocolat-loader {
    transition: opacity 0.3s;
    height: 32px;
    width: 32px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: -16px;
    z-index: 11;
    background: url(../images/loader.gif);
    opacity: 0;
}
.chocolat-loader.chocolat-visible {
    opacity: 1;
}

.chocolat-image-wrapper {
    position: fixed;
    width: 0px;
    height: 0px;
    left: 50%;
    top: 50%;
    z-index: 14;
    text-align: left;
    transform: translate(-50%, -50%);
}

.chocolat-image-wrapper .chocolat-img {
    position: absolute;
    width: 100%;
    height: 100%;
}
.chocolat-wrapper .chocolat-left {
    width: 50px;
    height: 100px;
    cursor: pointer;
    background: url(../images/left.png) 50% 50% no-repeat;
    z-index: 17;
    visibility: hidden;
}

.chocolat-layout {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.chocolat-image-canvas {
    transition: opacity .2s;
    opacity: 0;
    flex-grow: 1;
    align-self: stretch;
}
.chocolat-image-canvas.chocolat-visible {
    opacity: 1;
}
.chocolat-center {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.chocolat-wrapper .chocolat-right {
    width: 50px;
    height: 100px;
    cursor: pointer;
    background: url(../images/right.png) 50% 50% no-repeat;
    z-index: 17;
    visibility: hidden;
}
.chocolat-wrapper .chocolat-right.active {
    visibility: visible;
}
.chocolat-wrapper .chocolat-left.active {
    visibility: visible;
}
.chocolat-wrapper .chocolat-top {
    height: 50px;
    overflow: hidden;
    z-index: 17;
    flex-shrink: 0;
}
.chocolat-wrapper .chocolat-close {
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    background: url(../images/close.png) 50% 50% no-repeat;
}
.chocolat-wrapper .chocolat-bottom {
    height: 40px;
    font-size: 12px;
    z-index: 17;
    padding-left: 15px;
    padding-right: 15px;
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    display: flex;
    align-items: center;

}
.chocolat-wrapper .chocolat-set-title {
    display: inline-block;
    padding-right: 15px;
    line-height: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.chocolat-wrapper .chocolat-pagination {
    float: right;
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 15px;
    /*border-right: 1px solid rgba(255, 255, 255, 0.2);*/
}
.chocolat-wrapper .chocolat-fullscreen {
    width: 16px;
    height: 40px;
    background: url(../images/fullscreen.png) 50% 50% no-repeat;
    display: block;
    cursor: pointer;
    float: right;
}
.chocolat-wrapper .chocolat-description {
    display: inline-block;
    flex-grow: 1;
    text-align: left;
}

/* no container mode*/
body.chocolat-open > .chocolat-overlay {
    z-index: 15;
}
body.chocolat-open > .chocolat-loader {
    z-index: 15;
}
body.chocolat-open > .chocolat-image-wrapper {
    z-index: 17;
}

/* container mode*/
.chocolat-in-container .chocolat-wrapper,
.chocolat-in-container .chocolat-image-wrapper,
.chocolat-in-container .chocolat-overlay {
    position: absolute;
}
.chocolat-in-container {
    position: relative;
}

.chocolat-zoomable.chocolat-zooming-in .chocolat-image-wrapper,
.chocolat-zoomable.chocolat-zooming-out .chocolat-image-wrapper {
    transition: width .2s ease, height .2s ease;
}
.chocolat-zoomable.chocolat-zooming-in .chocolat-img,
.chocolat-zoomable.chocolat-zooming-out .chocolat-img {
    transition: margin .2s ease;
}

/* uncomment to hide controls when zoomed-in*/
/*
.chocolat-zoomable .chocolat-top,
.chocolat-zoomable .chocolat-bottom,
.chocolat-zoomable .chocolat-right,
.chocolat-zoomable .chocolat-left {
    transition: opacity .3s ease, visibility 0s .3s;
   opacity: 1;
}

.chocolat-zoomable.chocolat-zoomed .chocolat-top,
.chocolat-zoomable.chocolat-zoomed .chocolat-bottom,
.chocolat-zoomable.chocolat-zoomed .chocolat-right,
.chocolat-zoomable.chocolat-zoomed .chocolat-left {
    visibility: hidden;
    opacity: 0;
}
*/




(function () {
    'use strict';

    let timerDebounce = undefined;
    function debounce(duration, callback) {
      clearTimeout(timerDebounce);
      timerDebounce = setTimeout(function () {
        callback();
      }, duration);
      return timerDebounce;
    }
    function transitionAsPromise(triggeringFunc, el) {
      return new Promise(resolve => {
        const handleTransitionEnd = () => {
          el.removeEventListener('transitionend', handleTransitionEnd);
          resolve();
        };

        el.addEventListener('transitionend', handleTransitionEnd);
        const classesBefore = el.getAttribute('class');
        const stylesBefore = el.getAttribute('style');
        triggeringFunc();

        if (classesBefore === el.getAttribute('class') && stylesBefore === el.getAttribute('style')) {
          handleTransitionEnd();
        }

        if (parseFloat(getComputedStyle(el)['transitionDuration']) === 0) {
          handleTransitionEnd();
        }
      });
    }
    function loadImage({
      src,
      srcset,
      sizes
    }) {
      const image = new Image();
      image.src = src;

      if (srcset) {
        image.srcset = srcset;
      }

      if (sizes) {
        image.sizes = sizes;
      }

      if ('decode' in image) {
        return new Promise((resolve, reject) => {
          image.decode().then(() => {
            resolve(image);
          }).catch(() => {
            reject(image);
          });
        });
      } else {
        return new Promise((resolve, reject) => {
          image.onload = resolve(image);
          image.onerror = reject(image);
        });
      }
    }
    function fit(options) {
      let height;
      let width;
      const {
        imgHeight,
        imgWidth,
        containerHeight,
        containerWidth,
        canvasWidth,
        canvasHeight,
        imageSize
      } = options;
      const canvasRatio = canvasHeight / canvasWidth;
      const containerRatio = containerHeight / containerWidth;
      const imgRatio = imgHeight / imgWidth;

      if (imageSize == 'cover') {
        if (imgRatio < containerRatio) {
          height = containerHeight;
          width = height / imgRatio;
        } else {
          width = containerWidth;
          height = width * imgRatio;
        }
      } else if (imageSize == 'native') {
        height = imgHeight;
        width = imgWidth;
      } else {
        if (imgRatio > canvasRatio) {
          height = canvasHeight;
          width = height / imgRatio;
        } else {
          width = canvasWidth;
          height = width * imgRatio;
        }

        if (imageSize === 'scale-down' && (width >= imgWidth || height >= imgHeight)) {
          width = imgWidth;
          height = imgHeight;
        }
      }

      return {
        height: height,
        width: width
      };
    }
    function openFullScreen(wrapper) {
      if (wrapper.requestFullscreen) {
        return wrapper.requestFullscreen();
      } else if (wrapper.webkitRequestFullscreen) {
        return wrapper.webkitRequestFullscreen();
      } else if (wrapper.msRequestFullscreen) {
        return wrapper.msRequestFullscreen();
      } else {
        return Promise.reject();
      }
    }
    function exitFullScreen() {
      if (document.exitFullscreen) {
        return document.exitFullscreen();
      } else if (document.webkitExitFullscreen) {
        return document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        return document.msExitFullscreen();
      } else {
        return Promise.reject();
      }
    }

    const defaults = {
      container: document.body,
      // window or element
      className: undefined,
      imageSize: 'scale-down',
      // 'scale-down', 'contain', 'cover' or 'native'
      fullScreen: false,
      loop: false,
      linkImages: true,
      setIndex: 0,
      firstImageIndex: 0,
      lastImageIndex: false,
      currentImageIndex: undefined,
      allowZoom: true,
      closeOnBackgroundClick: true,
      setTitle: function () {
        return '';
      },
      description: function () {
        return this.images[this.settings.currentImageIndex].title;
      },
      pagination: function () {
        const last = this.settings.lastImageIndex + 1;
        const position = this.settings.currentImageIndex + 1;
        return position + '/' + last;
      },

      afterInitialize() {},

      afterMarkup() {},

      afterImageLoad() {},

      afterClose() {},

      zoomedPaddingX: function (canvasWidth, imgWidth) {
        return 0;
      },
      zoomedPaddingY: function (canvasHeight, imgHeight) {
        return 0;
      }
    };
    class Chocolat {
      constructor(elements, settings) {
        this.settings = settings;
        this.elems = {};
        this.images = [];
        this.events = [];
        this.state = {
          fullScreenOpen: false,
          initialZoomState: null,
          initialized: false,
          timer: false,
          visible: false
        };
        this._cssClasses = ['chocolat-open', 'chocolat-in-container', 'chocolat-cover', 'chocolat-zoomable', 'chocolat-zoomed', 'chocolat-zooming-in', 'chocolat-zooming-out'];

        if (NodeList.prototype.isPrototypeOf(elements) || HTMLCollection.prototype.isPrototypeOf(elements)) {
          elements.forEach((el, i) => {
            this.images.push({
              title: el.getAttribute('title'),
              src: el.getAttribute('href'),
              srcset: el.getAttribute('data-srcset'),
              sizes: el.getAttribute('data-sizes')
            });
            this.off(el, 'click.chocolat');
            this.on(el, 'click.chocolat', e => {
              this.init(i);
              e.preventDefault();
            });
          });
        } else {
          this.images = elements;
        }

        if (this.settings.container instanceof Element || this.settings.container instanceof HTMLElement) {
          this.elems.container = this.settings.container;
        } else {
          this.elems.container = document.body;
        }

        this.api = {
          open: i => {
            i = parseInt(i) || 0;
            return this.init(i);
          },
          close: () => {
            return this.close();
          },
          next: () => {
            return this.change(1);
          },
          prev: () => {
            return this.change(-1);
          },
          goto: i => {
            return this.open(i);
          },
          current: () => {
            return this.settings.currentImageIndex;
          },
          position: () => {
            return this.position(this.elems.img);
          },
          destroy: () => {
            return this.destroy();
          },
          set: (property, value) => {
            this.settings[property] = value;
            return value;
          },
          get: property => {
            return this.settings[property];
          },
          getElem: name => {
            return this.elems[name];
          }
        };
      }

      init(i) {
        if (!this.state.initialized) {
          this.markup();
          this.attachListeners();
          this.settings.lastImageIndex = this.images.length - 1;
          this.state.initialized = true;
        }

        this.settings.afterInitialize.call(this);
        return this.load(i);
      }

      load(index) {
        if (!this.state.visible) {
          this.state.visible = true;
          setTimeout(() => {
            this.elems.overlay.classList.add('chocolat-visible');
            this.elems.wrapper.classList.add('chocolat-visible');
          }, 0);
          this.elems.container.classList.add('chocolat-open');
        }

        if (this.settings.fullScreen) {
          openFullScreen(this.elems.wrapper);
        }

        if (this.settings.currentImageIndex === index) {
          return Promise.resolve();
        }

        let loaderTimer = setTimeout(() => {
          this.elems.loader.classList.add('chocolat-visible');
        }, 1000);
        let fadeOutPromise;
        let image;
        let fadeOutTimer = setTimeout(() => {
          fadeOutTimer = undefined;
          fadeOutPromise = transitionAsPromise(() => {
            this.elems.imageCanvas.classList.remove('chocolat-visible');
          }, this.elems.imageCanvas);
        }, 80);
        return loadImage(this.images[index]).then(loadedImage => {
          image = loadedImage;

          if (fadeOutTimer) {
            clearTimeout(fadeOutTimer);
            return Promise.resolve();
          } else {
            return fadeOutPromise;
          }
        }).then(() => {
          const nextIndex = index + 1;

          if (this.images[nextIndex] != undefined) {
            loadImage(this.images[nextIndex]);
          }

          this.settings.currentImageIndex = index;
          this.elems.description.textContent = this.settings.description.call(this);
          this.elems.pagination.textContent = this.settings.pagination.call(this);
          this.arrows();
          return this.position(image).then(() => {
            this.elems.loader.classList.remove('chocolat-visible');
            clearTimeout(loaderTimer);
            return this.appear(image);
          });
        }).then(() => {
          this.elems.container.classList.toggle('chocolat-zoomable', this.zoomable(image, this.elems.wrapper));
          this.settings.afterImageLoad.call(this);
        });
      }

      position({
        naturalHeight,
        naturalWidth
      }) {
        const fitOptions = {
          imgHeight: naturalHeight,
          imgWidth: naturalWidth,
          containerHeight: this.elems.container.clientHeight,
          containerWidth: this.elems.container.clientWidth,
          canvasWidth: this.elems.imageCanvas.clientWidth,
          canvasHeight: this.elems.imageCanvas.clientHeight,
          imageSize: this.settings.imageSize
        };
        const {
          width,
          height
        } = fit(fitOptions);
        return transitionAsPromise(() => {
          Object.assign(this.elems.imageWrapper.style, {
            width: width + 'px',
            height: height + 'px'
          });
        }, this.elems.imageWrapper);
      }

      appear(image) {
        this.elems.imageWrapper.removeChild(this.elems.img);
        this.elems.img = image;
        this.elems.img.setAttribute('class', 'chocolat-img');
        this.elems.imageWrapper.appendChild(this.elems.img);
        const fadeInPromise = transitionAsPromise(() => {
          this.elems.imageCanvas.classList.add('chocolat-visible');
        }, this.elems.imageCanvas);
        return fadeInPromise;
      }

      change(step) {
        if (!this.state.visible) {
          return;
        }

        if (!this.settings.linkImages) {
          return;
        }

        this.zoomOut();
        const requestedImage = this.settings.currentImageIndex + parseInt(step);

        if (requestedImage > this.settings.lastImageIndex) {
          if (this.settings.loop) {
            return this.load(this.settings.firstImageIndex);
          }
        } else if (requestedImage < this.settings.firstImageIndex) {
          if (this.settings.loop) {
            return this.load(this.settings.lastImageIndex);
          }
        } else {
          return this.load(requestedImage);
        }
      }

      arrows() {
        if (this.settings.loop) {
          this.elems.left.classList.add('active');
          this.elems.right.classList.add('active');
        } else if (this.settings.linkImages) {
          this.elems.right.classList.toggle('active', this.settings.currentImageIndex !== this.settings.lastImageIndex);
          this.elems.left.classList.toggle('active', this.settings.currentImageIndex !== this.settings.firstImageIndex);
        } else {
          this.elems.left.classList.remove('active');
          this.elems.right.classList.remove('active');
        }
      }

      close() {
        if (this.state.fullScreenOpen) {
          exitFullScreen();
          return;
        }

        this.state.visible = false;
        const promiseOverlay = transitionAsPromise(() => {
          this.elems.overlay.classList.remove('chocolat-visible');
        }, this.elems.overlay);
        const promiseWrapper = transitionAsPromise(() => {
          this.elems.wrapper.classList.remove('chocolat-visible');
        }, this.elems.wrapper);
        return Promise.all([promiseOverlay, promiseWrapper]).then(() => {
          this.elems.container.classList.remove('chocolat-open');
          this.settings.afterClose.call(this);
        });
      }

      destroy() {
        for (let i = this.events.length - 1; i >= 0; i--) {
          const {
            element,
            eventName
          } = this.events[i];
          this.off(element, eventName);
        }

        if (!this.state.initialized) {
          return;
        }

        if (this.state.fullScreenOpen) {
          exitFullScreen();
        }

        this.settings.currentImageIndex = undefined;
        this.state.visible = false;
        this.state.initialized = false;
        this.elems.container.classList.remove(...this._cssClasses);
        this.elems.wrapper.parentNode.removeChild(this.elems.wrapper);
      }

      markup() {
        this.elems.container.classList.add('chocolat-open', this.settings.className);

        if (this.settings.imageSize == 'cover') {
          this.elems.container.classList.add('chocolat-cover');
        }

        if (this.elems.container !== document.body) {
          this.elems.container.classList.add('chocolat-in-container');
        }

        this.elems.wrapper = document.createElement('div');
        this.elems.wrapper.setAttribute('id', 'chocolat-content-' + this.settings.setIndex);
        this.elems.wrapper.setAttribute('class', 'chocolat-wrapper');
        this.elems.container.appendChild(this.elems.wrapper);
        this.elems.overlay = document.createElement('div');
        this.elems.overlay.setAttribute('class', 'chocolat-overlay');
        this.elems.wrapper.appendChild(this.elems.overlay);
        this.elems.loader = document.createElement('div');
        this.elems.loader.setAttribute('class', 'chocolat-loader');
        this.elems.wrapper.appendChild(this.elems.loader);
        this.elems.layout = document.createElement('div');
        this.elems.layout.setAttribute('class', 'chocolat-layout');
        this.elems.wrapper.appendChild(this.elems.layout);
        this.elems.top = document.createElement('div');
        this.elems.top.setAttribute('class', 'chocolat-top');
        this.elems.layout.appendChild(this.elems.top);
        this.elems.center = document.createElement('div');
        this.elems.center.setAttribute('class', 'chocolat-center');
        this.elems.layout.appendChild(this.elems.center);
        this.elems.left = document.createElement('div');
        this.elems.left.setAttribute('class', 'chocolat-left');
        this.elems.center.appendChild(this.elems.left);
        this.elems.imageCanvas = document.createElement('div');
        this.elems.imageCanvas.setAttribute('class', 'chocolat-image-canvas');
        this.elems.center.appendChild(this.elems.imageCanvas);
        this.elems.imageWrapper = document.createElement('div');
        this.elems.imageWrapper.setAttribute('class', 'chocolat-image-wrapper');
        this.elems.imageCanvas.appendChild(this.elems.imageWrapper);
        this.elems.img = document.createElement('img');
        this.elems.img.setAttribute('class', 'chocolat-img');
        this.elems.imageWrapper.appendChild(this.elems.img);
        this.elems.right = document.createElement('div');
        this.elems.right.setAttribute('class', 'chocolat-right');
        this.elems.center.appendChild(this.elems.right);
        this.elems.bottom = document.createElement('div');
        this.elems.bottom.setAttribute('class', 'chocolat-bottom');
        this.elems.layout.appendChild(this.elems.bottom);
        this.elems.close = document.createElement('span');
        this.elems.close.setAttribute('class', 'chocolat-close');
        this.elems.top.appendChild(this.elems.close);
        this.elems.description = document.createElement('span');
        this.elems.description.setAttribute('class', 'chocolat-description');
        this.elems.bottom.appendChild(this.elems.description);
        this.elems.pagination = document.createElement('span');
        this.elems.pagination.setAttribute('class', 'chocolat-pagination');
        this.elems.bottom.appendChild(this.elems.pagination);
        this.elems.setTitle = document.createElement('span');
        this.elems.setTitle.setAttribute('class', 'chocolat-set-title');
        this.elems.setTitle.textContent = this.settings.setTitle();
        this.elems.bottom.appendChild(this.elems.setTitle);
        this.elems.fullscreen = document.createElement('span');
        this.elems.fullscreen.setAttribute('class', 'chocolat-fullscreen');
        this.elems.bottom.appendChild(this.elems.fullscreen);
        this.settings.afterMarkup.call(this);
      }

      attachListeners() {
        this.off(document, 'keydown.chocolat');
        this.on(document, 'keydown.chocolat', e => {
          if (this.state.initialized) {
            if (e.keyCode == 37) {
              this.change(-1);
            } else if (e.keyCode == 39) {
              this.change(1);
            } else if (e.keyCode == 27) {
              this.close();
            }
          }
        });
        const right = this.elems.wrapper.querySelector('.chocolat-right');
        this.off(right, 'click.chocolat');
        this.on(right, 'click.chocolat', () => {
          this.change(+1);
        });
        const left = this.elems.wrapper.querySelector('.chocolat-left');
        this.off(left, 'click.chocolat');
        this.on(left, 'click.chocolat', () => {
          this.change(-1);
        });
        this.off(this.elems.close, 'click.chocolat');
        this.on(this.elems.close, 'click.chocolat', this.close.bind(this));
        this.off(this.elems.fullscreen, 'click.chocolat');
        this.on(this.elems.fullscreen, 'click.chocolat', () => {
          if (this.state.fullScreenOpen) {
            exitFullScreen();
            return;
          }

          openFullScreen(this.elems.wrapper);
        });
        this.off(document, 'fullscreenchange.chocolat');
        this.on(document, 'fullscreenchange.chocolat', () => {
          if (document.fullscreenElement || document.webkitCurrentFullScreenElement || document.webkitFullscreenElement) {
            this.state.fullScreenOpen = true;
          } else {
            this.state.fullScreenOpen = false;
          }
        });
        this.off(document, 'webkitfullscreenchange.chocolat');
        this.on(document, 'webkitfullscreenchange.chocolat', () => {
          if (document.fullscreenElement || document.webkitCurrentFullScreenElement || document.webkitFullscreenElement) {
            this.state.fullScreenOpen = true;
          } else {
            this.state.fullScreenOpen = false;
          }
        });

        if (this.settings.closeOnBackgroundClick) {
          this.off(this.elems.overlay, 'click.chocolat');
          this.on(this.elems.overlay, 'click.chocolat', this.close.bind(this));
        }

        this.off(this.elems.wrapper, 'click.chocolat');
        this.on(this.elems.wrapper, 'click.chocolat', () => {
          if (this.state.initialZoomState === null || !this.state.visible) {
            return;
          }

          this.elems.container.classList.add('chocolat-zooming-out');
          this.zoomOut().then(() => {
            this.elems.container.classList.remove('chocolat-zoomed');
            this.elems.container.classList.remove('chocolat-zooming-out');
          });
        });
        this.off(this.elems.imageWrapper, 'click.chocolat');
        this.on(this.elems.imageWrapper, 'click.chocolat', e => {
          if (this.state.initialZoomState === null && this.elems.container.classList.contains('chocolat-zoomable')) {
            e.stopPropagation();
            this.elems.container.classList.add('chocolat-zooming-in');
            this.zoomIn(e).then(() => {
              this.elems.container.classList.add('chocolat-zoomed');
              this.elems.container.classList.remove('chocolat-zooming-in');
            });
          }
        });
        this.on(this.elems.wrapper, 'mousemove.chocolat', e => {
          if (this.state.initialZoomState === null || !this.state.visible) {
            return;
          }

          const rect = this.elems.wrapper.getBoundingClientRect();
          const pos = {
            top: rect.top + window.scrollY,
            left: rect.left + window.scrollX
          };
          const height = this.elems.wrapper.clientHeight;
          const width = this.elems.wrapper.clientWidth;
          const imgWidth = this.elems.img.width;
          const imgHeight = this.elems.img.height;
          const coord = [e.pageX - width / 2 - pos.left, e.pageY - height / 2 - pos.top];
          let mvtX = 0;

          if (imgWidth > width) {
            const paddingX = this.settings.zoomedPaddingX(imgWidth, width);
            mvtX = coord[0] / (width / 2);
            mvtX = ((imgWidth - width) / 2 + paddingX) * mvtX;
          }

          let mvtY = 0;

          if (imgHeight > height) {
            const paddingY = this.settings.zoomedPaddingY(imgHeight, height);
            mvtY = coord[1] / (height / 2);
            mvtY = ((imgHeight - height) / 2 + paddingY) * mvtY;
          }

          this.elems.img.style.marginLeft = -mvtX + 'px';
          this.elems.img.style.marginTop = -mvtY + 'px';
        });
        this.on(window, 'resize.chocolat', e => {
          if (!this.state.initialized || !this.state.visible) {
            return;
          }

          debounce(50, () => {
            const fitOptions = {
              imgHeight: this.elems.img.naturalHeight,
              imgWidth: this.elems.img.naturalWidth,
              containerHeight: this.elems.wrapper.clientHeight,
              containerWidth: this.elems.wrapper.clientWidth,
              canvasWidth: this.elems.imageCanvas.clientWidth,
              canvasHeight: this.elems.imageCanvas.clientHeight,
              imageSize: this.settings.imageSize
            };
            const {
              width,
              height
            } = fit(fitOptions);
            this.position(this.elems.img).then(() => {
              this.elems.container.classList.toggle('chocolat-zoomable', this.zoomable(this.elems.img, this.elems.wrapper));
            });
          });
        });
      }

      zoomable(image, wrapper) {
        const wrapperWidth = wrapper.clientWidth;
        const wrapperHeight = wrapper.clientHeight;
        const isImageZoomable = this.settings.allowZoom && (image.naturalWidth > wrapperWidth || image.naturalHeight > wrapperHeight) ? true : false;
        const isImageStretched = image.clientWidth > image.naturalWidth || image.clientHeight > image.naturalHeight;
        return isImageZoomable && !isImageStretched;
      }

      zoomIn(e) {
        this.state.initialZoomState = this.settings.imageSize;
        this.settings.imageSize = 'native';
        return this.position(this.elems.img);
      }

      zoomOut(e) {
        this.settings.imageSize = this.state.initialZoomState || this.settings.imageSize;
        this.state.initialZoomState = null;
        this.elems.img.style.margin = 0;
        return this.position(this.elems.img);
      }

      on(element, eventName, cb) {
        // const eventName = this.settings.setIndex + '-' + eventName
        const length = this.events.push({
          element,
          eventName,
          cb
        });
        element.addEventListener(eventName.split('.')[0], this.events[length - 1].cb);
      }

      off(element, eventName) {
        // const eventName = this.settings.setIndex + '-' + eventName
        const index = this.events.findIndex(event => {
          return event.element === element && event.eventName === eventName;
        });

        if (this.events[index]) {
          element.removeEventListener(eventName.split('.')[0], this.events[index].cb);
          this.events.splice(index, 1);
        }
      }

    }

    const instances = [];

    window.Chocolat = function (elements, options) {
      const settings = Object.assign({}, defaults, {
        images: []
      }, options, {
        setIndex: instances.length
      });
      const instance = new Chocolat(elements, settings);
      instances.push(instance);
      return instance;
    };

}());

Lines 805-810 Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt (-1 / +4 lines)
805		805
806	<h2>Moment.js</h2>	806	<h2>Moment.js</h2>
807	<p><a href="https://momentjs.com/">Moment.js</a> licensed under the <a href="https://github.com/moment/moment/blob/develop/LICENSE">MIT license</a>.</p>	807	<p><a href="https://momentjs.com/">Moment.js</a> licensed under the <a href="https://github.com/moment/moment/blob/develop/LICENSE">MIT license</a>.</p>
		808
		809	<h2>Chocolat.js</h2>
		810	<p><a href="http://chocolat.insipi.de">Chocolat.js</a> licensed under the <a href="https://github.com/nicolas-t/Chocolat/blob/master/LICENSE">GPL v3 license</a>.</p>
		811
808	</div>	812	</div>
809		813
810	<div id="translations">	814	<div id="translations">
811	-

Return to bug 28179

Line 0 Link Here

(-)a/koha-tmpl/intranet-tmpl/lib/Chocolat/css/chocolat.css (+230 lines)
		1	.chocolat-zoomable.chocolat-zoomed {
		2	cursor: zoom-out;
		3	}
		4	.chocolat-open {
		5	overflow: hidden;
		6	}
		7	.chocolat-overlay {
		8	transition: opacity 0.4s ease, visibility 0s 0.4s ease;
		9	height: 100%;
		10	width: 100%;
		11	position: fixed;
		12	left: 0;
		13	top: 0;
		14	z-index: 10;
		15	background-color: #fff;
		16	visibility: hidden;
		17	opacity: 0;
		18	}
		19	.chocolat-overlay.chocolat-visible {
		20	transition: opacity 0.4s, visibility 0s;
		21	visibility: visible;
		22	opacity: 0.8;
		23	}
		24
		25	.chocolat-wrapper {
		26	transition: opacity 0.4s ease, visibility 0s 0.4s ease;
		27	width: 100%;
		28	height: 100%;
		29	position: fixed;
		30	opacity: 0;
		31	left: 0;
		32	top: 0;
		33	z-index: 16;
		34	color: #fff;
		35	visibility: hidden;
		36	}
		37	.chocolat-wrapper.chocolat-visible {
		38	transition: opacity 0.4s, visibility 0s;
		39	opacity: 1;
		40	visibility: visible;
		41	}
		42
		43	.chocolat-zoomable .chocolat-img {
		44	cursor: zoom-in;
		45	}
		46	.chocolat-loader {
		47	transition: opacity 0.3s;
		48	height: 32px;
		49	width: 32px;
		50	position: absolute;
		51	left: 50%;
		52	top: 50%;
		53	margin-left: -16px;
		54	margin-top: -16px;
		55	z-index: 11;
		56	background: url(../images/loader.gif);
		57	opacity: 0;
		58	}
		59	.chocolat-loader.chocolat-visible {
		60	opacity: 1;
		61	}
		62
		63	.chocolat-image-wrapper {
		64	position: fixed;
65	width: 0px;
66	height: 0px;
67	left: 50%;
68	top: 50%;
69	z-index: 14;
70	text-align: left;
71	transform: translate(-50%, -50%);
72	}
73
74	.chocolat-image-wrapper .chocolat-img {
75	position: absolute;
76	width: 100%;
77	height: 100%;
78	}
79	.chocolat-wrapper .chocolat-left {
80	width: 50px;
81	height: 100px;
82	cursor: pointer;
83	background: url(../images/left.png) 50% 50% no-repeat;
84	z-index: 17;
85	visibility: hidden;
86	}
87
88	.chocolat-layout {
89	display: flex;
90	flex-direction: column;
91	position: absolute;
92	top: 0;
93	bottom: 0;
94	left: 0;
95	right: 0;
96	}
97	.chocolat-image-canvas {
98	transition: opacity .2s;
99	opacity: 0;
100	flex-grow: 1;
101	align-self: stretch;
102	}
103	.chocolat-image-canvas.chocolat-visible {
104	opacity: 1;
105	}
106	.chocolat-center {
107	flex-grow: 1;
108	display: flex;
109	justify-content: center;
110	align-items: center;
111	user-select: none;
112	}
113
114	.chocolat-wrapper .chocolat-right {
115	width: 50px;
116	height: 100px;
117	cursor: pointer;
118	background: url(../images/right.png) 50% 50% no-repeat;
119	z-index: 17;
120	visibility: hidden;
121	}
122	.chocolat-wrapper .chocolat-right.active {
123	visibility: visible;
124	}
125	.chocolat-wrapper .chocolat-left.active {
126	visibility: visible;
127	}
128	.chocolat-wrapper .chocolat-top {
129	height: 50px;
130	overflow: hidden;
131	z-index: 17;
132	flex-shrink: 0;
133	}
134	.chocolat-wrapper .chocolat-close {
135	width: 50px;
136	height: 50px;
137	cursor: pointer;
138	position: absolute;
139	top: 0;
140	right: 0;
141	background: url(../images/close.png) 50% 50% no-repeat;
142	}
143	.chocolat-wrapper .chocolat-bottom {
144	height: 40px;
145	font-size: 12px;
146	z-index: 17;
147	padding-left: 15px;
148	padding-right: 15px;
149	background: rgba(0, 0, 0, 0.2);
150	flex-shrink: 0;
151	display: flex;
152	align-items: center;
153
154	}
155	.chocolat-wrapper .chocolat-set-title {
156	display: inline-block;
157	padding-right: 15px;
158	line-height: 1;
159	border-right: 1px solid rgba(255, 255, 255, 0.3);
160	}
161	.chocolat-wrapper .chocolat-pagination {
162	float: right;
163	display: inline-block;
164	padding-left: 15px;
165	padding-right: 15px;
166	margin-right: 15px;
167	/border-right: 1px solid rgba(255, 255, 255, 0.2);/
168	}
169	.chocolat-wrapper .chocolat-fullscreen {
170	width: 16px;
171	height: 40px;
172	background: url(../images/fullscreen.png) 50% 50% no-repeat;
173	display: block;
174	cursor: pointer;
175	float: right;
176	}
177	.chocolat-wrapper .chocolat-description {
178	display: inline-block;
179	flex-grow: 1;
180	text-align: left;
181	}
182
183	/* no container mode*/
184	body.chocolat-open > .chocolat-overlay {
185	z-index: 15;
186	}
187	body.chocolat-open > .chocolat-loader {
188	z-index: 15;
189	}
190	body.chocolat-open > .chocolat-image-wrapper {
191	z-index: 17;
192	}
193
194	/* container mode*/
195	.chocolat-in-container .chocolat-wrapper,
196	.chocolat-in-container .chocolat-image-wrapper,
197	.chocolat-in-container .chocolat-overlay {
198	position: absolute;
199	}
200	.chocolat-in-container {
201	position: relative;
202	}
203
204	.chocolat-zoomable.chocolat-zooming-in .chocolat-image-wrapper,
205	.chocolat-zoomable.chocolat-zooming-out .chocolat-image-wrapper {
206	transition: width .2s ease, height .2s ease;
207	}
208	.chocolat-zoomable.chocolat-zooming-in .chocolat-img,
209	.chocolat-zoomable.chocolat-zooming-out .chocolat-img {
210	transition: margin .2s ease;
211	}
212
213	/* uncomment to hide controls when zoomed-in*/
214	/*
215	.chocolat-zoomable .chocolat-top,
216	.chocolat-zoomable .chocolat-bottom,
217	.chocolat-zoomable .chocolat-right,
218	.chocolat-zoomable .chocolat-left {
219	transition: opacity .3s ease, visibility 0s .3s;
220	opacity: 1;
221	}
222
223	.chocolat-zoomable.chocolat-zoomed .chocolat-top,
224	.chocolat-zoomable.chocolat-zoomed .chocolat-bottom,
225	.chocolat-zoomable.chocolat-zoomed .chocolat-right,
226	.chocolat-zoomable.chocolat-zoomed .chocolat-left {
227	visibility: hidden;
228	opacity: 0;
229	}
230	*/