golden/modules/multi-zoom-sk/multi-zoom-sk-demo.js

import './index';

import dialogPolyfill from 'dialog-polyfill';

import { $$ } from 'common-sk/modules/dom';
import { digestDiffImagePath, digestImagePath, setImageEndpointsForDemos } from '../common';
import { diff16x16, left16x16, right16x16 } from './test_data';
import { isPuppeteerTest } from '../demo_util';

setImageEndpointsForDemos();

const isPuppeteer = isPuppeteerTest();

let ele = document.createElement('multi-zoom-sk');
ele._cyclingView = !isPuppeteer;
ele.details = {
  leftImageSrc: digestImagePath('99c58c7002073346ff55f446d47d6311'),
  diffImageSrc: digestDiffImagePath('99c58c7002073346ff55f446d47d6311', '6246b773851984c726cb2e1cb13510c2'),
  rightImageSrc: digestImagePath('6246b773851984c726cb2e1cb13510c2'),
  leftLabel: '99c58c700207...',
  rightLabel: 'Closest Positive',
};
// These coordinates show an interesting difference.
ele._x = 77;
ele._y = 199;
$$('#normal').appendChild(ele);


ele = document.createElement('multi-zoom-sk');
ele._cyclingView = !isPuppeteer;
ele.details = {
  leftImageSrc: digestImagePath('ec3b8f27397d99581e06eaa46d6d5837'),
  diffImageSrc: digestDiffImagePath('ec3b8f27397d99581e06eaa46d6d5837', '6246b773851984c726cb2e1cb13510c2'),
  rightImageSrc: digestImagePath('6246b773851984c726cb2e1cb13510c2'),
  leftLabel: 'ec3b8f27397...',
  rightLabel: '6246b773851...',
};
$$('#mismatch').appendChild(ele);

ele = document.createElement('multi-zoom-sk');
ele._cyclingView = !isPuppeteer;
ele.details = {
  leftImageSrc: left16x16,
  diffImageSrc: diff16x16,
  rightImageSrc: right16x16,
  leftLabel: 'left16x16',
  rightLabel: 'right16x16',
};
$$('#base64').appendChild(ele);

ele = document.createElement('multi-zoom-sk');
ele._cyclingView = !isPuppeteer;
ele.details = {
  leftImageSrc: digestImagePath('99c58c7002073346ff55f446d47d6311'),
  diffImageSrc: digestDiffImagePath('99c58c7002073346ff55f446d47d6311', '6246b773851984c726cb2e1cb13510c2'),
  rightImageSrc: digestImagePath('6246b773851984c726cb2e1cb13510c2'),
  leftLabel: '99c58c700207...',
  rightLabel: 'Closest Positive',
};
ele._zoomLevel = 32;
ele._showGrid = true;
// These coordinates show an interesting difference.
ele._x = 77;
ele._y = 199;
$$('#zoomed_grid').appendChild(ele);

const nthPixel = document.createElement('multi-zoom-sk');
nthPixel.addEventListener('sources-loaded', () => {
  nthPixel._moveToNextLargestDiff(false);
});
nthPixel._cyclingView = !isPuppeteer;
nthPixel.details = {
  leftImageSrc: left16x16,
  diffImageSrc: diff16x16,
  rightImageSrc: right16x16,
  leftLabel: 'left16x16',
  rightLabel: 'right16x16',
};

$$('#base64_nthpixel').appendChild(nthPixel);

// This element demonstrates how to use multi-zoom-sk in a dialog. It is not meant for use on
// puppeteer.
dialogPolyfill.registerDialog($$('#the_dialog'));
$$('#in_dialog').details = {
  leftImageSrc: digestImagePath('99c58c7002073346ff55f446d47d6311'),
  diffImageSrc: digestDiffImagePath('99c58c7002073346ff55f446d47d6311', '6246b773851984c726cb2e1cb13510c2'),
  rightImageSrc: digestImagePath('6246b773851984c726cb2e1cb13510c2'),
  leftLabel: '99c58c700207...',
  rightLabel: 'Closest Positive',
};

$$('#dialog_btn').addEventListener('click', () => {
  $$('#the_dialog').showModal();
});

$$('#close_btn').addEventListener('click', () => {
  $$('#the_dialog').close();
});