Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature #383 #385

Closed
wants to merge 3 commits into from
Closed

Feature #383 #385

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b5c59dd
feat: enable canvas support
malkomich May 1, 2020
fa6c1b7
feat: encrypt data for canvas option
malkomich May 5, 2020
f698465
feat: canvas listener to resize on image load
malkomich May 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat: enable canvas support 
Fixes #383
  • Loading branch information
@malkomich
malkomich committed May 2, 2020
commit b5c59dd09ed03d33ee493843df468df60c58de18
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
*.map
coverage
node_modules

# OS files
.DS_Store
187 changes: 126 additions & 61 deletions dist/viewer.common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2019-11-23T05:10:26.193Z
* Date: 2020-05-02T21:55:01.617Z
*/

'use strict';

function _typeof(obj) {
"@babel/helpers - typeof";

if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function (obj) {
return typeof obj;
Expand Down Expand Up @@ -315,7 +317,7 @@ var TEMPLATE = '<div class="viewer-container" touch-action="none">' + '<div clas

var IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
var WINDOW = IS_BROWSER ? window : {};
var IS_TOUCH_DEVICE = IS_BROWSER ? 'ontouchstart' in WINDOW.document.documentElement : false;
var IS_TOUCH_DEVICE = IS_BROWSER && WINDOW.document.documentElement ? 'ontouchstart' in WINDOW.document.documentElement : false;
var HAS_POINTER_EVENT = IS_BROWSER ? 'PointerEvent' in WINDOW : false;
var NAMESPACE = 'viewer'; // Actions

Expand Down Expand Up @@ -371,6 +373,35 @@ var REGEXP_SPACES = /\s\s*/; // Misc

var BUTTONS = ['zoom-in', 'zoom-out', 'one-to-one', 'reset', 'prev', 'play', 'next', 'rotate-left', 'rotate-right', 'flip-horizontal', 'flip-vertical'];

/**
* Check if a DOM element is a canvas.
* @param {Object} element - The DOM element.
* @returns {Object} True if it is canvas, False if not.
*/

function isCanvas(element) {
return element.tagName.toLowerCase() === 'canvas';
}
/**
* Draw a canvas given its source image.
* @param {*} canvas - The canvas DOM element to be drawn.
* @param {*} parentNode - The DOM parent of the canvas.
*/

function drawCanvas(canvas) {
var parentNode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : canvas.parentNode;
var context = canvas.getContext('2d');
var image = new Image();
var src = canvas.dataset.src;
canvas.width = parentNode.clientWidth;
canvas.height = parentNode.clientHeight;

image.onload = function () {
context.drawImage(image, 0, 0, canvas.width, canvas.height);
};

image.src = src;
}
/**
* Check if the given value is a string.
* @param {*} value - The value to check.
Expand Down Expand Up @@ -1047,14 +1078,20 @@ var render = {

if (src || url) {
var item = document.createElement('li');
var img = document.createElement('img');
img.src = src || url;
img.alt = alt;
img.setAttribute('data-index', index);
img.setAttribute('data-original-url', url || src);
img.setAttribute('data-viewer-action', 'view');
img.setAttribute('role', 'button');
item.appendChild(img);
var node = document.createElement(image.tagName.toLowerCase());
node.src = src || url;
node.alt = alt;
node.setAttribute('role', 'button');
node.setAttribute('data-index', index);
node.setAttribute('data-original-url', url || src);
node.setAttribute('data-viewer-action', 'view');

if (isCanvas(image)) {
node.setAttribute('data-src', src || url);
node.setAttribute('data-alt', image.dataset.alt);
}

item.appendChild(node);
list.appendChild(item);
items.push(item);
}
Expand All @@ -1077,6 +1114,16 @@ var render = {
}, {
once: true
});

if (isCanvas(image)) {
_this.setupImageDimensions(image);

drawCanvas(image);

if (options.loading) {
removeClass(item, CLASS_LOADING);
}
}
});

if (options.transition) {
Expand All @@ -1089,7 +1136,8 @@ var render = {
},
renderList: function renderList(index) {
var i = index || this.index;
var width = this.items[i].offsetWidth || 30;
var item = this.items[i];
var width = item.offsetWidth || 30;
var outerWidth = width + 1; // 1 pixel of `margin-left` width
// Place the active item in the center of the screen

Expand Down Expand Up @@ -1409,36 +1457,7 @@ var handlers = {
});
},
loadImage: function loadImage(event) {
var image = event.target;
var parent = image.parentNode;
var parentWidth = parent.offsetWidth || 30;
var parentHeight = parent.offsetHeight || 50;
var filled = !!getData(image, 'filled');
getImageNaturalSizes(image, function (naturalWidth, naturalHeight) {
var aspectRatio = naturalWidth / naturalHeight;
var width = parentWidth;
var height = parentHeight;

if (parentHeight * aspectRatio > parentWidth) {
if (filled) {
width = parentHeight * aspectRatio;
} else {
height = parentWidth / aspectRatio;
}
} else if (filled) {
height = parentWidth / aspectRatio;
} else {
width = parentHeight * aspectRatio;
}

setStyle(image, assign({
width: width,
height: height
}, getTransforms({
translateX: (parentWidth - width) / 2,
translateY: (parentHeight - height) / 2
})));
});
this.setupImageDimensions(event.target);
},
keydown: function keydown(event) {
var options = this.options;
Expand Down Expand Up @@ -1657,7 +1676,9 @@ var handlers = {
return;
}

forEach(this.player.getElementsByTagName('img'), function (image) {
forEach(this.player.getElementsByTagName('img, canvas'), function (image) {
_this3.loadImage();

addListener(image, EVENT_LOAD, _this3.loadImage.bind(_this3), {
once: true
});
Expand Down Expand Up @@ -1801,7 +1822,7 @@ var methods = {

var viewer = this.viewer;

if (options.transition && !immediate) {
if (options.transition && hasClass(this.image, CLASS_TRANSITION) && !immediate) {
var hidden = this.hidden.bind(this);

var hide = function hide() {
Expand All @@ -1824,7 +1845,7 @@ var methods = {
}
}; // Note that the `CLASS_TRANSITION` class will be removed on pointer down (#255)

if (this.viewed && hasClass(this.image, CLASS_TRANSITION)) {
if (this.viewed) {
addListener(this.image, EVENT_TRANSITION_END, hide, {
once: true
});
Expand Down Expand Up @@ -1869,13 +1890,19 @@ var methods = {
title = this.title,
canvas = this.canvas;
var item = this.items[index];
var img = item.querySelector('img');
var img = item.querySelector('img') || item.querySelector('canvas');
var url = getData(img, 'originalUrl');
var alt = img.getAttribute('alt');
var image = document.createElement('img');
var image = document.createElement(img.tagName.toLowerCase());
image.src = url;
image.alt = alt;

if (isCanvas(image)) {
image.dataset.src = url;
image.dataset.alt = img.dataset.alt;
drawCanvas(image, canvas);
}

if (isFunction(options.view)) {
addListener(element, EVENT_VIEW, options.view, {
once: true
Expand Down Expand Up @@ -1923,7 +1950,7 @@ var methods = {
abort: function abort() {
removeListener(element, EVENT_VIEWED, onViewed);

if (image.complete) {
if (image.complete || isCanvas(image)) {
if (this.imageRendering) {
this.imageRendering.abort();
} else if (this.imageInitializing) {
Expand All @@ -1941,7 +1968,7 @@ var methods = {
}
};

if (image.complete) {
if (image.complete || isCanvas(image)) {
this.load();
} else {
addListener(image, EVENT_LOAD, onLoad = this.load.bind(this), {
Expand Down Expand Up @@ -2282,8 +2309,8 @@ var methods = {

addClass(player, CLASS_SHOW);
forEach(this.items, function (item, i) {
var img = item.querySelector('img');
var image = document.createElement('img');
var img = item.querySelector('img') || item.querySelector('canvas');
var image = document.createElement(img.tagName.toLowerCase());
image.src = getData(img, 'originalUrl');
image.alt = img.getAttribute('alt');
total += 1;
Expand All @@ -2300,6 +2327,12 @@ var methods = {
once: true
});
player.appendChild(image);

if (isCanvas(img)) {
image.dataset.src = getData(img, 'originalUrl');
image.dataset.alt = img.getAttribute('alt');
drawCanvas(image);
}
});

if (isNumber(options.interval) && options.interval > 0) {
Expand Down Expand Up @@ -2331,7 +2364,7 @@ var methods = {
var player = this.player;
this.played = false;
clearTimeout(this.playing);
forEach(player.getElementsByTagName('img'), function (image) {
forEach(player.getElementsByTagName('img, canvas'), function (image) {
removeListener(image, EVENT_LOAD, _this4.onLoadWhenPlay);
});
removeClass(player, CLASS_SHOW);
Expand Down Expand Up @@ -2519,7 +2552,7 @@ var methods = {
}

var images = [];
forEach(isImg ? [element] : element.querySelectorAll('img'), function (image) {
forEach(isImg ? [element] : element.querySelectorAll('img, canvas'), function (image) {
if (options.filter) {
if (options.filter(image)) {
images.push(image);
Expand All @@ -2539,11 +2572,11 @@ var methods = {
if (this.ready) {
var indexes = [];
forEach(this.items, function (item, i) {
var img = item.querySelector('img');
var img = item.querySelector('img') || item.querySelector('canvas');
var image = images[i];

if (image && img) {
if (image.src !== img.src) {
if (image.src !== img.src || image.dataset.src !== img.dataset.src) {
indexes.push(i);
}
} else {
Expand Down Expand Up @@ -2639,6 +2672,37 @@ var methods = {

element[NAMESPACE] = undefined;
return this;
},
setupImageDimensions: function setupImageDimensions(image) {
var parent = image.parentNode;
var parentWidth = parent.offsetWidth || 30;
var parentHeight = parent.offsetHeight || 50;
var filled = !!getData(image, 'filled');
getImageNaturalSizes(image, function (naturalWidth, naturalHeight) {
var aspectRatio = naturalWidth / naturalHeight;
var width = parentWidth;
var height = parentHeight;

if (parentHeight * aspectRatio > parentWidth) {
if (filled) {
width = parentHeight * aspectRatio;
} else {
height = parentWidth / aspectRatio;
}
} else if (filled) {
height = parentWidth / aspectRatio;
} else {
width = parentHeight * aspectRatio;
}

setStyle(image, assign({
width: width,
height: height
}, getTransforms({
translateX: (parentWidth - width) / 2,
translateY: (parentHeight - height) / 2
})));
});
}
};

Expand Down Expand Up @@ -2785,9 +2849,7 @@ var others = {

var AnotherViewer = WINDOW.Viewer;

var Viewer =
/*#__PURE__*/
function () {
var Viewer = /*#__PURE__*/function () {
/**
* Create a new Viewer.
* @param {Element} element - The target element for viewing.
Expand Down Expand Up @@ -2841,9 +2903,9 @@ function () {
}

element[NAMESPACE] = this;
var isImg = element.tagName.toLowerCase() === 'img';
var isImg = element.tagName.toLowerCase() === 'img' || isCanvas(element);
var images = [];
forEach(isImg ? [element] : element.querySelectorAll('img'), function (image) {
forEach(isImg ? [element] : element.querySelectorAll('img, canvas'), function (image) {
if (isFunction(options.filter)) {
if (options.filter.call(_this, image)) {
images.push(image);
Expand All @@ -2852,6 +2914,9 @@ function () {
images.push(image);
}
});
forEach(isCanvas(element) ? [element] : element.querySelectorAll('canvas'), function (canvas) {
drawCanvas(canvas);
});
this.isImg = isImg;
this.length = images.length;
this.images = images;
Expand Down Expand Up @@ -2898,7 +2963,7 @@ function () {
}
};
forEach(images, function (image) {
if (image.complete) {
if (image.complete || isCanvas(image)) {
progress();
} else {
addListener(image, EVENT_LOAD, progress, {
Expand All @@ -2910,7 +2975,7 @@ function () {
addListener(element, EVENT_CLICK, this.onStart = function (_ref) {
var target = _ref.target;

if (target.tagName.toLowerCase() === 'img' && (!isFunction(options.filter) || options.filter.call(_this, target))) {
if ((target.tagName.toLowerCase() === 'img' || target.tagName.toLowerCase() === 'canvas') && (!isFunction(options.filter) || options.filter.call(_this, target))) {
_this.view(_this.images.indexOf(target));
}
});
Expand Down
Loading