14.06.2023

This commit is contained in:
Plotnikov
2023-06-14 18:08:32 +03:00
parent b0a0566f19
commit bdf6eab9ec
221 changed files with 203557 additions and 585 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

View File

@@ -0,0 +1,128 @@
html::-webkit-scrollbar {
display: none;
}
html {
-ms-overflow-style: none;
scrollbar-width: none;
overflow-y: hidden;
}
body {
font-family: RobotoRegular, Arial, sans-serif;
font-size: 18px;
line-height: 20px;
background: #fff;
color: #212121;
}
div.S1000Dpara {
text-indent: 35px;
text-align: justify;
padding: 3px;
}
td {
border: 1px solid black;
padding: 0.5ex;
}
.grayNote {
color: gray;
text-indent: 35px;
text-align: justify;
padding: 3px;
}
span.foot_label {
display: inline;
vertical-align: super;
font-size: smaller;
/*font-weight: bold;*/
text-decoration: underline;
font-weight: medium;
font-family: serif;
font-variant: normal;
font-style: normal;
padding: 2px;
color: rgb(124, 37, 41);
}
/*
div.foot {
display: inline;
font-size: small;
font-weight: medium;
font-family: serif;
font-variant: normal;
font-style: normal;
}
div.foot_inner { display: none; }
div.foot:hover div.foot_inner {
display: block;
border: 1px double rgb(124, 37, 41);
margin: 0em 1em;
padding: 1em;
} */
.divTable {
justify-content: center;
margin: 0 auto;
max-width: 90%;
overflow-x: auto;
}
#tooltip {
background: rgb(124, 37, 41);
color: white;
border: 1px solid white;
padding: 5px;
border-radius: 5px;
}
#tooltipImg {
position: absolute;
background: white;
border: 2px solid rgb(124, 37, 41);
border-radius: 5px;
padding: 5px;
max-width: 500px;
}
#zoom {
width:34px;
height:34px;
border: 1px solid white;
background: rgba(124, 37, 41, 0.3);
border-radius: 5px;
}
#zoom:hover {
background: rgb(124, 37, 41);
}
.container_text table {
margin-bottom: 10px;
}
.container_text table.S1000DrandomList {
margin: 0;
}
.container_text table.S1000DrandomList td {
height: 10px;
padding: 0px;
padding-left: 0px;
}
.inlineImg {
margin: 0 0 !important;
display: inline-block !important;
vertical-align: bottom !important;
}
.ui-widget-header {
border: 1px solid rgb(124, 37, 41);
background: rgb(124, 37, 41);
color: #ffffff;
font-weight: bold;
}
.ui-widget {
font-family: Arial,sans-serif;
font-size: 1.0em;
}
.ui-widget .ui-widget {
font-size: 0.9em;
}
.jp-playlist {
display: none;
}

View File

@@ -0,0 +1,208 @@
var timerId;
var mouseOverImg;
var unityDivID = "";
Start();
function showTooltip(evt, text) {
let tooltip = document.getElementById("tooltip");
tooltip.innerHTML = text;
tooltip.style.display = "block";
if(evt.pageX > 3*window.innerWidth/4) {
tooltip.style.left = evt.pageX - tooltip.offsetWidth - 10 + 'px';
tooltip.style.top = evt.pageY + 10 + 'px';
tooltip.style.maxWidth = window.innerWidth/2 + 'px';
} else {
tooltip.style.left = evt.pageX + 10 + 'px';
tooltip.style.top = evt.pageY + 10 + 'px';
tooltip.style.maxWidth = window.innerWidth/2 + 'px';
if(evt.pageX + window.innerWidth/2 > window.innerWidth-10)
tooltip.style.maxWidth = window.innerWidth - evt.pageX - 10 + 'px';
}
}
function hideTooltip() {
var tooltip = document.getElementById("tooltip");
tooltip.style.display = "none";
}
function showTooltipImg(evt, filename, title="") {
let tooltip = document.getElementById("tooltipImg");
var imgHTML = "";
if(title != "")
imgHTML += "<div style='text-align: center;'><h3>" + title + "</h3></div>";
imgHTML += "<img src='"+filename+"' align='center' style='max-width: 500px;'>"
tooltip.innerHTML = imgHTML;
tooltip.style.display = "block";
tooltip.style.left = evt.pageX + 'px';
tooltip.style.top = evt.pageY + 'px';
if (evt.clientX < document.documentElement.clientWidth/2) {
if(evt.clientY < document.documentElement.clientHeight/2)
tooltip.style.transform = "translate(10px, 10px)";
else
tooltip.style.transform = "translate(10px, -10px) translate(0, -100%)";
}
else {
if(evt.clientY < document.documentElement.clientHeight/2)
tooltip.style.transform = "translate(-10px, 10px) translate(-100%, 0)";
else
tooltip.style.transform = "translate(-10px, -10px) translate(-100%, -100%)";
}
clearTimeout(timerId); timerID = null;
}
function hideTooltipImg() {
timerId = setTimeout(
() => {
var tooltip = document.getElementById("tooltipImg");
tooltip.style.display = "none";
}, 100
);
}
function showZoomImg(evt, text) {
if(evt.currentTarget.offsetWidth < 300 && evt.currentTarget.offsetHeight < 300)
return;
mouseOverImg = text;
let tooltip = document.getElementById("zoom");
evt = evt || window.event;
x = evt.clientX; y = evt.clientY;
img = document.elementFromPoint(x,y);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var rect = img.getBoundingClientRect();
tooltip.style.display = "block";
tooltip.style.left = (rect.right+scrollLeft-32-7)+'px';
tooltip.style.top = (rect.top+scrollTop+3)+'px';
}
function doZoomImg() {
viewer.show(mouseOverImg);
}
// ----------------------------------------------------------------------------------------
const scList = new Map();
const divList = new Map();
var quitCurUnity = null;
var isClicked = false;
function Start() {
const url = new URL(document.URL);
//var divID = url.searchParams.get('scenario');
var savedPage = window.sessionStorage.getItem('curScenarioPage');
var divID = window.sessionStorage.getItem('scenarioID');
if(savedPage == location.href && divID != null && divID != "")
unityDivID = divID;
//console.log("Start ", unityDivID);
window.addEventListener('resize', onResize);
}
function scRegister(scName, scTitle, divID, iframeSrc) {
var curSc = window.sessionStorage.getItem(scName);
if(curSc != '~done~') {
scList.set(scName, scTitle);
window.sessionStorage.setItem(scName, scTitle);
}
divList.set(divID, iframeSrc);
if(divID == unityDivID)
{
setDivToIFrame(divID);
var elem = document.getElementById(divID);
elem.scrollIntoView();
}
else
setDivToBanner(divID);
}
function scFinished(scName, scTitle) {
window.sessionStorage.setItem(scName, '~done~');
scList.delete(scName);
}
function setDivToBanner(divID) {
var elem = document.getElementById(divID);
if(elem != null) {
if(elem.firstChild != null)
elem.removeChild(elem.firstChild);
elem.innerHTML = "<img src='app/dinamika/banner.png' align='center' height='80px' style='border:1px solid #7C2529; box-shadow: 5px 5px 10px rgba(124,37,41,0.5); padding: 10px; cursor:pointer' onclick='onBannerClick(\""+divID+"\")'>";
}
}
function onBannerClick(divID) {
if(isClicked) return;
if(unityDivID == null)
isClicked = true;
unityDivID = divID;
if(quitCurUnity != null)
quitCurUnity();
else
setDivToIFrame(divID);
}
function afterUnityQuit() {
quitCurUnity = null;
//const url = new URL(document.URL);
//url.searchParams.delete('scenario');
//url.searchParams.append('scenario', unityDivID);
window.sessionStorage.setItem('scenarioID', unityDivID);
window.sessionStorage.setItem('curScenarioPage', location.href);
document.location.replace(location.href); //url.href
}
function setDivToIFrame(divID) {
var elem = document.getElementById(divID);
if(elem != null)
elem.innerHTML = "<iframe src='"+divList.get(divID)+"' width='938px' height='532px' align='center' frameBorder='0' style='text-indent: 0px;'>Узел <b>iframe</b> не поддерживается браузером</iframe>";
}
// ----------------------------------------------------------------------------------------
function onLearnedButton() {
if(scList.size == 0){
learnResult();
let btn = document.getElementById('learnedButton');
btn.style.display = 'none';
} else {
var msgStr;
msgStr = '<p>Не изучены сценарии интерактивной модели ВС:</p><br/>';
for (let sc of scList.values())
msgStr += " - "+sc+"<br/>";
$("#dialog").html(msgStr);
$( function() {
$( "#dialog" ).dialog();
$('#dialog').dialog("option", "width", "auto"); $('#dialog').dialog("option", "height", "auto");
} );
}
}
function onLoadFunction() {
var H = document.getElementById('container_text').offsetHeight;
window.sessionStorage.setItem('contentsHeight', H);
window.sessionStorage.setItem('scrollY', window.scrollY);
//console.log('din.js scrollY = ',window.scrollY);
window.scrollTo({ top: 0, behavior: 'auto' });
if(typeof window.parent.objectHTMLLoaded !== "undefined")
window.parent.objectHTMLLoaded();
let timerId = setInterval(() => {
var h = document.getElementById('container_text').offsetHeight;
if(h != H) {
H = h;
window.sessionStorage.setItem('contentsHeight', H);
window.sessionStorage.setItem('scrollY', window.scrollY);
//console.log('din.js scrollY = ',window.scrollY);
if(typeof window.parent.updateDocHeight !== "undefined")
window.parent.updateDocHeight();
}
}, 50);
setTimeout(() => { clearInterval(timerId); }, 1000);
}
function onResize() {
var H = document.getElementById('container_text').offsetHeight;
window.sessionStorage.setItem('contentsHeight', H);
if(typeof window.parent.updateDocHeight !== "undefined")
window.parent.updateDocHeight();
}

View File

@@ -0,0 +1,275 @@
html,
body {
margin: 0;
padding: 0;
height:100%;
width: 100%;
scrollbar-width: auto;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
}
body {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #f5f5f5;
color: #7c2529;
min-width: 230px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-y: auto;
display: flex;
}
.div, .aside {
display: block;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
font-family: 'Trebuchet MS', sans-serif;
font-weight: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.dropbtn {
background-color: f5f5f5;
color: #7c2529;
height: 30px;
font-size: 14px;
border: none;
border-bottom: 1px solid #7c2529cc;
cursor: pointer;
width: 290px;
text-align: left;
}
.dropdown {
display: none;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 250px;
z-index: 1;
background-color: f5f5f5;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.dropdown-content button {
color: #7c2529;
background-color: #f5f5f5;
border: none;
border-bottom: 1px solid #f0d1d3;
padding: 8px 16px;
text-decoration: none;
display: block;
width: 100%;
cursor: pointer;
border-bottom-right-radius: 15px;
border-top-left-radius: 15px;
}
.dropdown-content button:hover {background-color: #dfb2b6}
.btnToTop {
position: fixed;
bottom: 0px;
right: 0px;
width: 67px;
height: 64px;
background: url(../images/BG_rightIcon.png) no-repeat;
cursor: pointer;
transform: scale(0.8);
}
.btnToTop:hover {
animation: bounce 2s infinite linear;
}
@keyframes bounce {
0% {transform: scale(0.8) translateY(0%)}
25% {transform: scale(0.8) translateY(-10%)}
50% {transform: scale(0.8) translateY(-0%)}
75% {transform: scale(0.8) translateY(-10%)}
100% {transform: scale(0.8) translateY(0%)}
}
.btnToTop i {
display: block;
width: 33px;
height: 30px;
border: none;
background: url(../images/toTop.svg) no-repeat;
position: absolute;
left: -2px;
right: 0;
top: -7px;
bottom: 0;
margin: auto;
}
.view-toc {
position: sticky;
overflow-y: auto;
overflow-x: hidden;
top: 5px;
left: 0;
width: 20vw;
height: 100%;
padding: 0px 0 0 0;
min-width: 20vw;
}
.view-toc-container {
position:fixed;
scrollbar-width: thin;
width: 20vw;
min-width: 20vw;
height: calc(100vh - 10px);
padding: 0;
overflow-x: hidden;
overflow-y: auto;
vertical-align: top;
}
.view-toc h1 {
padding: 50px 0;
font-weight: 400;
text-align: center;
}
.view-toc p {
margin: 0 0 20px;
line-height: 1.5;
}
.view-body::-webkit-scrollbar {
width: 5px;
height: 8px;
background-color: rgb(207, 73, 73);
}
body::-webkit-scrollbar-track, .view-toc-container::-webkit-scrollbar-track {
background-color: #f0f0f0;
border-radius: 50px;
}
body::-webkit-scrollbar-thumb, .view-toc-container::-webkit-scrollbar-thumb {
border-radius: 50px;
background-color: #ce9494;
box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
min-height: 50px;
}
.view-toc-container::-webkit-scrollbar-thumb {
background-color: #ce94947a;
}
body::-webkit-scrollbar {
width: 15px;
}
.view-toc-container::-webkit-scrollbar {
width: 5px;
}
.tree {
}
.tree ul {
display: block;
margin: 0px;
padding: 0px;
list-style:none;
color:#7c2529;
position:relative;
font-size: 1rem;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
.tree ul {margin-left: 0.5em} /* (indentation/2) */
.tree ul:before {
content:"";
display:block;
width:0;
position:absolute;
top:0;
bottom:0;
border-left:none;
}
.tree li {
display: block;
margin:0px;
padding:0 5px; /* indentation + .5em = 1.5em*/
/*line-height:1.8em; default list item's `line-height` */
position:relative;
}
.tree container, .tree folder {
display: block;
padding: 3px;
}
.tree folder {
padding-top: 7px;
font-weight: bold;
}
.tree container icon {
background-repeat: no-repeat;
background-position: center center;
padding: 32px;
background-image: url('../icons/book2.png');
background-size: 16px 16px;
/* url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAQCAYAAADwMZRfAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAnJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpDb21wcmVzc2lvbj41PC90aWZmOkNvbXByZXNzaW9uPgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjwvdGlmZjpYUmVzb2x1dGlvbj4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5GbHlpbmcgTWVhdCBBY29ybiA1LjIuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxNi0wMi0wMlQxMjo0ODo1ODwveG1wOk1vZGlmeURhdGU+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgqitOMRAAABuklEQVQ4EZVSvy9sQRT+Znfseh4rfuUVSCQahSBeIZaORqURT6L1FyjlFSJER0In0RMajeqphEVHqxIhmydYrL137sydce5ds9lYWesk9557vvOdb+acexjebXrtMqHjv2I2VtEnvTPT/mDjcp7bpKypX4Vxxm3MTOyKvn/buJwPRQYXTzYn+yLj3W2JJkvO5OTP68XUEWAmU3+TNxb/zLM/G+n1gc7I1FBnork5EYeQgCOAuxcf++f/ce+wXWmiz8XFDOxqe6Zl4Xhl8EdyNuVww9h0f0dDQ2Mdh+cDngakAeKxKMZ6W3D7LCaUT0CReQo3eiP9dHa3vAWQSJCrpndNYaRFbHD00PPRrh9V6+Flbj4T6doLchx0iKcNXLpFpSYLXDcs4dAKgkCnkPhayg3a8yVcVOdFpBJwlEZOfV1sGQFfSUESmbyIki6JmIpE2LuKS3xFh1vjSnkQBH5nJkE7gYgr8kJcKxm280r7UZHRdcJ2aCbWuO/L0/SjM5z1dK0Fy/mgpWxOZLWvTl2vKrxK2Obo0vE/gPWWKy7OGWYuDuaSIxYLN4kmPUFA6VZZVqn/xr8sLf4UeQNldMTNDtyI9wAAAABJRU5ErkJggg=='); */
}
.tree folder icon {
background-repeat: no-repeat;
background-position: 0 center;
padding-left: 0px;
/* background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAQCAYAAADwMZRfAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAnJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpDb21wcmVzc2lvbj41PC90aWZmOkNvbXByZXNzaW9uPgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjwvdGlmZjpYUmVzb2x1dGlvbj4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5GbHlpbmcgTWVhdCBBY29ybiA1LjIuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxNi0wMi0wMlQxMjo0OTowOTwveG1wOk1vZGlmeURhdGU+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgrkd8ulAAACb0lEQVQ4EZVSTWgTQRT+ZjP5L21KIeAfFpTWikJVqJdeiuJF0qulePHqRcGriAdPXqrFQy8i6EHwIGigFEQQvbRQxP5pSkzbxCbpT9o0SZvs7uzu+HabTeslxQcz7++bb957Mwx1mRy92sp1w+f6lV3TGHj8Y8f1m2neSOoYE5LfcP1AmE+RfdP1j9Tx+12v/0y+3S5nZ6S78t8/lOL3ut4feZgAbOLR5RedvVeGT1y63s5DHTB0AcswsbuZw+r0xF4xt/KO+xSpKIBpWHREgcLx5drD6TfuBXY7t6PdvW3BFg5DFKFYBmAJhMIMnX0D4Ug+c0fxMDACWpZEMZtCKZ/WyT0gkcIE97bBwyPw+OojsonqEj1z3jUdvfhtHIXM8j8xbmgqLL0CqYcaCbslrbq370tJTdt17EutXIIQViT+4OI5QAOCIZPDH4SubUGtErgu+eRvzH76TC1IeIQK0xsg64CIKWxIcgwxoUCaKHNoNUDaAwOEJpBbmEO1WET/8C0nxqgSeagSJ0ibTWnjZuIfwUHD8pp0m6oiO78AWavgVPdZ+AMBBLmFXV1Bi8863JHDU9ooIDs3m4Yp7zqTrFZqKGfmiXoHHcePIdzeBiYq0C0//EYNOoIIQIWAlx6YiDfXsbq4kiisLD2NjSbHHZJcKk1pDSdPR9EajcCkyrx0VKNHCqKKqkG9E4kkgp3CFtZTqUQmsTwWG0m+sssiEjm19nOuv6fvQoh5FFQ21pxy3U11jG2i2Jf1pdX08q+ll4PPks9djDNy+vZfKdDjBptqxp7ERhYbBDbWaceAPsgbP60pBTqsvfoHao777+xfmRQTxswccNgAAAAASUVORK5CYII=');
*/
}
.tree container:hover {
cursor: pointer;
background: linear-gradient(to top, #ebc4c4, #ebc4c405);
border-radius:5px;
transform: scale(1.03);
}
.tree button {
width: 100%;
font: 0.9em 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-align: left;
}
.view-body {
display: flex;
padding: 45px 0px 0px 0px;
}
.view-doc {
display: flex;
width: 100%;
height: 100%;
margin: 0px 0px 0px 5px;
padding: 10px 20px;
min-width: 500px;
background: #fff;
border: 1px solid #e6e6e6;
border-radius: 8px;
box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.2),
0px 2px 15px 0 rgba(0, 0, 0, 0.1);
flex-grow: 1;
overflow-y: visible;
}
.view-obj {
display: flex;
height: 100%;
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,15 @@
#iv-container{position:fixed;width:100vw;background:rgba(10,10,10,0.6);height:100vh;top:0;left:0;display:none;z-index:1000;
border:2px solid rgb(124, 37, 41);border-radius: 5px;box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.2), 0px 2px 50px 0 rgba(0, 0, 0, 0.1);
padding: 0px;}
.iv-container{overflow:hidden}
.iv-close{width:32px;height:32px;position:absolute;border: 1px solid white; right:20px;top:20px;background: rgba(124, 37, 41, 0.5); cursor:pointer;text-align:center;overflow:hidden;text-shadow:0 0 3px #6d6d6d;-webkit-transition:all ease 200ms;-moz-transition:all ease 200ms;-o-transition:all ease 200ms;transition:all ease 200ms}
.iv-close:after,.iv-close:before{content:"";height:2px;width:26px;background:white;position:absolute;left:3px;top:17px;margin-top:-3px;border-radius:2px}
.iv-close:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.iv-close:after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.iv-close:hover{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg); background: rgb(124, 37, 41)}
.iv-image-view{position:absolute;height:100%;width:100%}
.iv-image-wrap{display:inline-block}
.iv-image-wrap:active{cursor:move}
.iv-large-image{cursor:move;max-width:100%;max-height:100%;position:absolute;background-color:#FFFFFF;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}
.iv-loader{top:50%;left:50%;border-radius:50%;width:32px;height:32px;z-index:100;margin-top:-16px;margin-left:-16px;font-size:5px;position:absolute;text-indent:-9999em;border-top:1em solid rgba(255, 255, 255, .2);border-right:1em solid rgba(255, 255, 255, .2);border-bottom:1em solid rgba(255, 255, 255, .2);border-left:1em solid #fff;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear}
.iv-loader:after{width:10em;height:10em;border-radius:50%}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}

View File

@@ -0,0 +1,285 @@
var container=null;
var parentScrollListener=null;
!function(e,t)
{"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.ViewBigimg=t()}
(this,
function()
{
"use strict";
function l(){
var e=!1;try{addEventListener("test",null,Object.defineProperty({},"passive",{get:function(){e=!0}}))}catch(e){}return e
}
function o(e,t)
{
this.container=e;
var i=function(){};
this.onStart=t.onStart||i,
this.onMove=t.onMove||i,
this.onEnd=t.onEnd||i,
//this.onKeyDown=t.onKeyDown||i,
this.onMouseWheel=t.onMouseWheel||i,
this.onClick=t.onClick||i,
this.onPinch=t.onPinch||i
}
o.prototype.init=function()
{
var r=this;
return this.startHandle=function(e)
{
e.preventDefault();
var t=e.type,
i="touchstart"===t?"touchmove":"mousemove",
n="touchstart"===t?"touchend":"mouseup",
o=e.clientX||e.touches[0].clientX,
a=e.clientY||e.touches[0].clientY;
function s(e)
{
e.preventDefault();
var t=e.clientX||e.touches[0].clientX,i=e.clientY||e.touches[0].clientY;
r.onMove(e,{dx:t-o,dy:i-a,mx:t,my:i})
}
!1!==r.onStart(e,{x:o,y:a})&&("touchstart"===t&&e.touches[1]&&r.onPinch(e),
document.addEventListener(i,s,!("touchmove"!==i||!l())&&{capture:!1,passive:!1}),
document.addEventListener(n,function e()
{
document.removeEventListener(i,s),
document.removeEventListener(n,e),
r.onEnd()
}))
},
this.container.addEventListener("touchstart",this.startHandle,!1),
this.container.addEventListener("mousedown",this.startHandle,!1),
//this.container.addEventListener("onkeydown",this.onKeyDown,!1),
//this.container.onkeydown = function(e){alert('!!close')},
//document.getElementById('iv-container').contentEditable=true,
//document.getElementById('iv-container').focus(),
this.container.addEventListener("wheel",this.onMouseWheel,!1),
this.container.addEventListener("click",this.onClick,!1),
this
},
o.prototype.destroy=function()
{
this.container.removeEventListener("touchstart",this.startHandle),
this.container.removeEventListener("mousedown",this.startHandle),
//this.container.removeEventListener("onkeydown",this.onKeyDown),
this.container.removeEventListener("wheel",this.onMouseWheel),
this.container.removeEventListener("click",this.onClick)
};
var r=function(e)
{return e.preventDefault()};
function n(e,t)
{
this.container=e,
this.options=Object.assign({},n.defaults,t),
this.zoomValue=100,
e.classList.add("iv-container"),
this.imageWrap=e.querySelector(".iv-image-wrap"),
this.closeBtn=e.querySelector(".iv-close")
}
return function()
{
var o=0;
if(!window.requestAnimationFrame){
for(var e=["ms","moz","webkit","o"],t=0;t<e.length&&!window.requestAnimationFrame;++t)
window.requestAnimationFrame=window[e[t]+"RequestAnimationFrame"],
window.cancelAnimationFrame=window[e[t]+"CancelAnimationFrame"]||window[e[t]+"CancelRequestAnimationFrame"];
window.requestAnimationFrame||(window.requestAnimationFrame=function(e)
{
var t=(new Date).getTime(),
i=Math.max(0,16-(t-o)),
n=window.setTimeout(function(){e(t+i)},i);
return o=t+i,n
}),
window.cancelAnimationFrame||(window.cancelAnimationFrame=function(e)
{
clearTimeout(e)
})
}
}(),
n.prototype={constructor:n,_init:function()
{
var t,
h=this,
a=h.options,
c=!1,
e=h.container,
i=h.imageWrap,
s=0,
n=0;
h._imageSlider=new o(i,{
onStart:function()
{
if(!h.loaded)return!1;
if(!c){
this.imgWidth=h.imageDim.w*h.zoomValue/100,
this.imgHeight=h.imageDim.h*h.zoomValue/100,
this.curImgLeft=parseFloat(h.currentImg.style.left),
this.curImgTop=parseFloat(h.currentImg.style.top)}
},
onMove:function(e,t)
{
if(!c)
{
this.currentPos=t;
var i=this.curImgLeft+t.dx,
n=this.curImgTop+t.dy,
o=Math.max((h.containerDim.w-this.imgWidth)/2,0),
a=Math.max((h.containerDim.h-this.imgHeight)/2,0),
s=h.containerDim.w-o,
r=h.containerDim.h-a;
i=Math.min(i,o),
n=Math.min(n,a),
i+this.imgWidth<s&&(i=s-this.imgWidth),
n+this.imgHeight<r&&(n=r-this.imgHeight),
h.currentImg.style.left=i+"px",
h.currentImg.style.top=n+"px"
}
},
onEnd:function(){},
onMouseWheel:function(e){
if(a.zoomOnMouseWheel&&h.loaded){
var t=Math.max(-1,Math.min(1,e.wheelDelta)),
i=h.zoomValue*(100+30*t)/100; // 15*t
if(100<=i&&i<=a.maxZoom?s=0:s+=Math.abs(t),!(5<s)){var n=e.pageX,o=e.pageY;h.zoom(i,{x:n,y:o})}
}
},
//onKeyDown:function(e){
// alert('!!close');
// var keycode = e.keyCode || e.which;
// if(keycode === 27){ this._close(); }
//},
onClick:function(e){
0==n?(n=Date.now(),t={x:e.pageX,y:e.pageY}):(Date.now()-n<500&&Math.abs(e.pageX-t.x)<50&&Math.abs(e.pageY-t.y)<50&&(h.zoomValue==a.zoomValue?h.zoom(200):h.resetZoom()),n=0)
},
onPinch:function(e){
if(h.loaded){
var t=e.touches[0],
i=e.touches[1];
if(t&&i){c=!0;var a=Math.sqrt(Math.pow(i.pageX-t.pageX,2)+Math.pow(i.pageY-t.pageY,2)),s=h.zoomValue,r={x:(i.pageX+t.pageX)/2,y:(i.pageY+t.pageY)/2},
n=function(e){
e.preventDefault();
var t=e.touches[0],
i=e.touches[1],
n=Math.sqrt(Math.pow(i.pageX-t.pageX,2)+Math.pow(i.pageY-t.pageY,2)),o=s+(n-a)/2;h.zoom(o,r)
};
document.addEventListener("touchmove",n,!!l()&&{capture:!1,passive:!1}),
document.addEventListener("touchend",function e(){document.removeEventListener("touchmove",n),document.removeEventListener("touchend",e),c=!1})
}
}
}
}).init(),
a.refreshOnResize&&(this._resizeHandler=this.refresh.bind(this),
window.addEventListener("resize",this._resizeHandler)),
e.addEventListener("touchmove",r,!!l()&&{capture:!1,passive:!1}),
e.addEventListener("wheel",r),
this._close=this.hide.bind(this),
this.closeBtn.addEventListener("click",this._close)},
zoom:function(d,v){
var p=this,e=this.options.maxZoom,
g=this.zoomValue,
f=this.currentImg,
w=this.containerDim,
y=this.imageDim,
x=parseFloat(f.style.left),
M=parseFloat(f.style.top);
d=Math.round(Math.max(100,d)),
d=Math.min(e,d),v=v||{x:w.w/2,y:w.h/2},
p._clearFrames();
var z=0;
!function e(){
++z<20&&(p._zoomFrame=requestAnimationFrame(e));var t,i,n=(t=z,t/=20,-(d-(i=g))*(--t*t*t*t-1)+i),o=n/g,a=y.w*n/100,s=y.h*n/100,r=-((v.x-x)*o-v.x),h=-((v.y-M)*o-v.y),c=Math.max((w.w-a)/2,0),l=Math.max((w.h-s)/2,0),m=w.w-c,u=w.h-l;(r=Math.min(r,c))+a<m&&(r=m-a),(h=Math.min(h,l))+s<u&&(h=u-s),f.style.width=a+"px",f.style.height=s+"px",f.style.left=r+"px",f.style.top=h+"px",p.zoomValue=n
}()
},
_clearFrames:function(){cancelAnimationFrame(this._zoomFrame)},
resetZoom:function(){this.zoom(this.options.zoomValue)},
_calculateDimensions:function(){
var e,t,i=this.currentImg,
n=this.container,
o=i.getBoundingClientRect().width,
a=i.getBoundingClientRect().height,
s=n.getBoundingClientRect().width,
r=n.getBoundingClientRect().height;
this.containerDim={w:s,h:r};
var h=o/a;t=(e=a<o&&s<=r||s<h*r?s:h*r)/h,
this.imageDim={w:e,h:t},i.style.width=e+"px",i.style.height=t+"px",i.style.left=(s-e)/2+"px",i.style.top=(r-t)/2+"px",i.style.maxWidth="none",i.style.maxHeight="none"
},
refresh:function(){
this.loaded&&(this._calculateDimensions(),this.resetZoom())
},
show:function(e){
this.container.style.top = (window.parent.scrollY)+'px';
this.container.style.width = window.innerWidth+'px';
this.container.style.height = (window.parent.innerHeight-70)+'px';
container = this.container;
parentScrollListener = function(e) { container.style.top = (window.parent.scrollY)+'px';};
window.parent.document.body.style.overflowY = "hidden";
window.parent.addEventListener('scroll', parentScrollListener);
this.container.style.display="block",e&&this.load(e)
},
hide:function(){
this.container.style.display="none";
window.parent.document.body.style.overflowY = "auto";
window.parent.removeEventListener('scroll', parentScrollListener);
},
destroy:function(){
window.removeEventListener("resize",this._resizeHandler),
this._imageSlider.destroy(),
this.closeBtn.removeEventListener("click",this._close),
this.container.parentNode.removeChild(this.container),
this.closeBtn=null,
this.container=null,
this.imageWrap=null,
this.options=null,
this._close=null,
this._imageSlider=null,
this._resizeHandler=null
},
load:function(e){
var t=this,i=this.container,
n=this.imageWrap,
o=n.querySelector(".iv-large-image");
o&&n.removeChild(o);
var a,s=document.createElement("img");
function r(){
t.loaded=!0,
t.zoomValue=100,
s.style.display="block",
t.refresh(),
i.querySelector(".iv-loader").style.display="none"
}
s.classList.add("iv-large-image"),
s.src=e,
this.currentImg=s,
this.imageWrap.appendChild(s),
this.loaded=!1,
i.querySelector(".iv-loader").style.display="block",s.style.display="none",
!(a=s).compvare||void 0!==a.naturalWidth&&0===a.naturalWidth?s.onload=function(){r()}:r()
}
},
n.defaults={zoomValue:100,maxZoom:800,refreshOnResize:!0,zoomOnMouseWheel:!0},
function(e){
var t=document.createElement("div");
t.id="iv-container",
t.innerHTML='<div class="iv-loader"></div><div class="iv-image-view"><div class="iv-image-wrap"></div><div class="iv-close"></div></div>',
document.body.appendChild(t);
t.onkeypress = function(){alert('');};
//t.addEventListener("click",this._close)};
//t.onkeydown = function(e){
// alert('!!close');
// var keycode = e.keyCode || e.which;
// if(keycode === 27){ this._close(); }
//}
//document.getElementById('iv-container').contentEditable=true;
//document.getElementById('iv-container').focus();
var i=new n(t,e);
return i._init(),i
}
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB