window.onload = function () {
|
'use strict';
|
|
var Viewer = window.Viewer;
|
var console = window.console || { log: function () {} };
|
var pictures = document.querySelector('.docs-pictures');
|
var toggles = document.querySelector('.docs-toggles');
|
var buttons = document.querySelector('.docs-buttons');
|
var options = {
|
// inline: true,
|
url: 'data-original',
|
ready: function (e) {
|
console.log(e.type);
|
},
|
show: function (e) {
|
console.log(e.type);
|
},
|
shown: function (e) {
|
console.log(e.type);
|
},
|
hide: function (e) {
|
console.log(e.type);
|
},
|
hidden: function (e) {
|
console.log(e.type);
|
},
|
view: function (e) {
|
console.log(e.type);
|
},
|
viewed: function (e) {
|
console.log(e.type);
|
},
|
move: function (e) {
|
console.log(e.type);
|
},
|
moved: function (e) {
|
console.log(e.type);
|
},
|
rotate: function (e) {
|
console.log(e.type);
|
},
|
rotated: function (e) {
|
console.log(e.type);
|
},
|
scale: function (e) {
|
console.log(e.type);
|
},
|
scaled: function (e) {
|
console.log(e.type);
|
},
|
zoom: function (e) {
|
console.log(e.type);
|
},
|
zoomed: function (e) {
|
console.log(e.type);
|
},
|
play: function (e) {
|
console.log(e.type);
|
},
|
stop: function (e) {
|
console.log(e.type);
|
}
|
};
|
var viewer = new Viewer(pictures, options);
|
|
function toggleButtons(mode) {
|
var targets;
|
var target;
|
var length;
|
var i;
|
|
if (/modal|inline|none/.test(mode)) {
|
targets = buttons.querySelectorAll('button[data-enable]');
|
|
for (i = 0, length = targets.length; i < length; i++) {
|
target = targets[i];
|
target.disabled = true;
|
|
if (String(target.getAttribute('data-enable')).indexOf(mode) > -1) {
|
target.disabled = false;
|
}
|
}
|
}
|
}
|
|
function addEventListener(element, type, handler) {
|
if (element.addEventListener) {
|
element.addEventListener(type, handler, false);
|
} else if (element.attachEvent) {
|
element.attachEvent('on' + type, handler);
|
}
|
}
|
|
toggleButtons(options.inline ? 'inline' : 'modal');
|
|
toggles.onchange = function (event) {
|
var e = event || window.event;
|
var input = e.target || e.srcElement;
|
var name;
|
|
if (viewer) {
|
name = input.getAttribute('name');
|
options[name] = name === 'inline' ? JSON.parse(input.getAttribute('data-value')) : input.checked;
|
viewer.destroy();
|
viewer = new Viewer(pictures, options);
|
toggleButtons(options.inline ? 'inline' : 'modal');
|
}
|
};
|
|
buttons.onclick = function (event) {
|
var e = event || window.event;
|
var button = e.target || e.srcElement;
|
var method = button.getAttribute('data-method');
|
var target = button.getAttribute('data-target');
|
var args = JSON.parse(button.getAttribute('data-arguments')) || [];
|
|
if (viewer && method) {
|
if (target) {
|
viewer[method](document.querySelector(target).value);
|
} else {
|
viewer[method](args[0], args[1]);
|
}
|
|
switch (method) {
|
case 'scaleX':
|
case 'scaleY':
|
args[0] = -args[0];
|
break;
|
|
case 'destroy':
|
viewer = null;
|
toggleButtons('none');
|
break;
|
}
|
}
|
};
|
|
$('[data-toggle="tooltip"]').tooltip();
|
};
|
