<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>OpenRPA</title>
<link rel="stylesheet" type="text/css" href="3rdParty/Semantic-UI-CSS-master/semantic.min.css">
<script
src="3rdParty/jQuery/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="3rdParty/Semantic-UI-CSS-master/semantic.min.js"></script>
<script>
var mGlobal={}
$(document)
.ready(function() {
mGlobal.GUIElement={}
mGlobal.GenerateUniqueID=function(inPrefix="ID") {
return inPrefix+Math.round(Math.random()*1000)+"-"+Math.round(Math.random()*10000)+"-"+Math.round(Math.random()*1000)
}
mGlobal.TreeLoadSubTree =function (inElementId) {
//Подгрузка массива спецификаций
lSpecificationArray = mGlobal.GUIElement[inElementId].GUISelectorFull
///Загрузка данных
$.ajax({
type: "POST",
url: 'GUIAction',
data: '{"functionName":"ElementGetChildElementList","argsArray":['+JSON.stringify(lSpecificationArray)+']}',
success:
function(lData,l2,l3)
{
var lHTMLTree='<div class="ui list">'
var lResponseJSON=JSON.parse(lData)
for (i=0;i<lResponseJSON.outputObject.length;i++) {
var lElementId = mGlobal.GenerateUniqueID()
var lSubItemHandleId=lResponseJSON.outputObject[i].handle;
var lSubItemActionOnClick=' onclick="mGlobal.TreeLoadSubTree(\''+lElementId+'\');" '
var lSubItemActionOnRightClick=' oncontextmenu="mGlobal.ElementHighlightNew(\''+lElementId+'\');" '
lHTMLTree+='\
<div class="item handle_'+lSubItemHandleId+'" handle_id="'+lSubItemHandleId+'" id="'+lElementId+'">\
<i class="folder icon"></i>\
<div class="content">\
<div class="header" '+lSubItemActionOnClick+lSubItemActionOnRightClick+'>'+lResponseJSON.outputObject[i].name+'</div>\
<div class="description" '+lSubItemActionOnClick+lSubItemActionOnRightClick+'>process_id:'+lResponseJSON.outputObject[i].process_id+'; handle:'+lSubItemHandleId+'; class_name: '+lResponseJSON.outputObject[i].class_name+'; RECT:L'+lResponseJSON.outputObject[i].rectangle.left+' T'+lResponseJSON.outputObject[i].rectangle.top+' R'+lResponseJSON.outputObject[i].rectangle.right+' B'+lResponseJSON.outputObject[i].rectangle.bottom+'</div>\
</div>\
</div>'
//Добавить информацию об элементе в словарь JS
mGlobal.GUIElement[lElementId]={};
mGlobal.GUIElement[lElementId]['GUISelectorLocal']=lResponseJSON.outputObject[i]
mGlobal.GUIElement[lElementId]['GUISelectorFull']=Array.from(lSpecificationArray);
mGlobal.GUIElement[lElementId]['GUISelectorFull'].push(lResponseJSON.outputObject[i])
}
lHTMLTree+='</div>'
$(".ui.main.text.container #"+inElementId+" .content").append(lHTMLTree)
},
dataType: "text"
});
}
mGlobal.ElementHighlight =function (inHandleId) {
///Загрузка данных
$.ajax({
type: "POST",
url: 'GUIAction',
data: '{"functionName":"ElementRunAction","argsArray":[[{"handle":'+inHandleId+'}],"draw_outline"]}',
success:
function(lData,l2,l3)
{
console.log('Success handle:'+inHandleId)
},
dataType: "text"
});
}
mGlobal.ElementHighlightNew =function (inElementId) {
//Подгрузка массива спецификаций
lSpecificationArray = mGlobal.GUIElement[inElementId].GUISelectorFull
///Загрузка данных
$.ajax({
type: "POST",
url: 'GUIAction',
data: '{"functionName":"ElementDrawOutlineNew","argsArray":['+JSON.stringify(lSpecificationArray)+']}',
success:
function(lData,l2,l3)
{
lDataJSON=JSON.parse(lData);
if (lDataJSON.hasOwnProperty("Error")) {
mGlobal.ShowModal("GUI Error",lDataJSON.Error);
}
},
dataType: "text"
});
}
// fix main menu to page on passing
$('.main.menu').visibility({
type: 'fixed'
});
$('.overlay').visibility({
type: 'fixed',
offset: 80
});
// lazy load images
$('.image').visibility({
type: 'image',
transition: 'vertical flip in',
duration: 500
});
// show dropdown on hover
$('.main.menu .ui.dropdown').dropdown({
on: 'hover'
});
///Загрузка данных
$.ajax({
type: "POST",
url: 'GUIAction',
data: '{"functionName":"ElementGetChildElementList","argsArray":[[]]}',
success:
function(lData,l2,l3)
{
var lHTMLTree='<div class="ui list">'
var lResponseJSON=JSON.parse(lData)
for (i=0;i<lResponseJSON.outputObject.length;i++) {
var lElementId = mGlobal.GenerateUniqueID()
var lSubItemHandleId=lResponseJSON.outputObject[i].handle;
var lSubItemActionOnClick=' onclick="mGlobal.TreeLoadSubTree(\''+lElementId+'\');" '
var lSubItemActionOnRightClick=' oncontextmenu="mGlobal.ElementHighlightNew(\''+lElementId+'\');" '
lHTMLTree+='\
<div class="item handle_'+lSubItemHandleId+'" handle_id="'+lSubItemHandleId+'" id="'+lElementId+'">\
<i class="folder icon"></i>\
<div class="content">\
<div class="header" '+lSubItemActionOnClick+lSubItemActionOnRightClick+'>'+lResponseJSON.outputObject[i].name+'</div>\
<div class="description" '+lSubItemActionOnClick+lSubItemActionOnRightClick+'>process_id:'+lResponseJSON.outputObject[i].process_id+'; handle:'+lSubItemHandleId+'; class_name: '+lResponseJSON.outputObject[i].class_name+'; RECT:L'+lResponseJSON.outputObject[i].rectangle.left+' T'+lResponseJSON.outputObject[i].rectangle.top+' R'+lResponseJSON.outputObject[i].rectangle.right+' B'+lResponseJSON.outputObject[i].rectangle.bottom+'</div>\
</div>\
</div>'
//Добавить информацию об элементе в словарь JS
mGlobal.GUIElement[lElementId]={};
mGlobal.GUIElement[lElementId]['GUISelectorLocal']=lResponseJSON.outputObject[i]
mGlobal.GUIElement[lElementId]['GUISelectorFull']=[lResponseJSON.outputObject[i]]
}
lHTMLTree+='</div>'
$(".ui.main.text.container").append(lHTMLTree);
},
dataType: "text"
});
mGlobal.ShowModal=function(inHeaderText,inMessageText)
{
//Установка заголовка
$('.ui.basic.modal div.header').html(inHeaderText);
//Установка текста
$('.ui.basic.modal div.content p').html(inMessageText);
//Активация модального окна
$('.ui.basic.modal').modal('show');
}
})
;
</script>
<style type="text/css">
body {
background-color: #FFFFFF;
}
.main.container {
margin-top: 2em;
}
.main.menu {
margin-top: 4em;
border-radius: 0;
border: none;
box-shadow: none;
transition:
box-shadow 0.5s ease,
padding 0.5s ease
;
}
.main.menu .item img.logo {
margin-right: 1.5em;
}
.overlay {
float: left;
margin: 0em 3em 1em 0em;
}
.overlay .menu {
position: relative;
left: 0;
transition: left 0.5s ease;
}
.main.menu.fixed {
background-color: #FFFFFF;
border: 1px solid #DDD;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}
.overlay.fixed .menu {
left: 800px;
}
.text.container .left.floated.image {
margin: 2em 2em 2em -4em;
}
.text.container .right.floated.image {
margin: 2em -4em 2em 2em;
}
.ui.footer.segment {
margin: 5em 0em 0em;
padding: 5em 0em;
}
</style>
</head>
<body>
<body>
<div class="ui main text container">
<h1 class="ui header">Sticky Example</h1>
<div class="ui three wide column">
<h4 class="ui inverted header">Group 1</h4>
<div class="ui inverted link list">
<a href="#" class="item">Link One</a>
<a href="#" class="item">Link Two</a>
<a href="#" class="item">Link Three</a>
<a href="#" class="item">Link Four</a>
</div>
</div>
<p>This example shows how to use lazy loaded images, a sticky menu, and a simple text container</p>
</div>
<div class="ui borderless main menu">
<div class="ui text container">
<div class="header item">
Project Name
</div>
<a href="#" class="item">Blog</a>
<a href="#" class="item">Articles</a>
<a href="#" class="ui right floated dropdown item">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
<div class="item">Link Item</div>
<div class="item">Link Item</div>
<div class="divider"></div>
<div class="header">Header Item</div>
<div class="item">
<i class="dropdown icon"></i>
Sub Menu
<div class="menu">
<div class="item">Link Item</div>
<div class="item">Link Item</div>
</div>
</div>
<div class="item">Link Item</div>
</div>
</a>
</div>
</div>
<div class="ui inverted vertical footer segment">
<div class="ui center aligned container">
<div class="ui stackable inverted divided grid">
<div class="three wide column">
<h4 class="ui inverted header">Group 1</h4>
<div class="ui inverted link list">
<a href="#" class="item">Link One</a>
<a href="#" class="item">Link Two</a>
<a href="#" class="item">Link Three</a>
<a href="#" class="item">Link Four</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header">Group 2</h4>
<div class="ui inverted link list">
<a href="#" class="item">Link One</a>
<a href="#" class="item">Link Two</a>
<a href="#" class="item">Link Three</a>
<a href="#" class="item">Link Four</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header">Group 3</h4>
<div class="ui inverted link list">
<a href="#" class="item">Link One</a>
<a href="#" class="item">Link Two</a>
<a href="#" class="item">Link Three</a>
<a href="#" class="item">Link Four</a>
</div>
</div>
<div class="seven wide column">
<h4 class="ui inverted header">Footer Header</h4>
<p>Extra space for a call to action inside the footer that could help re-engage users.</p>
</div>
</div>
<div class="ui inverted section divider"></div>
<div class="ui horizontal inverted small divided link list">
<a class="item" href="#">Site Map</a>
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Terms and Conditions</a>
<a class="item" href="#">Privacy Policy</a>
</div>
</div>
</div>
<div class="ui basic modal">
<div class="ui icon header">
</div>
<div class="content">
<p>Here is the message text!</p>
</div>
<div class="actions">
<div class="ui red basic cancel inverted button">
<i class="remove icon"></i>
No
</div>
<div class="ui green ok inverted button">
<i class="checkmark icon"></i>
Yes
</div>
</div>
</div>
</body>
</html>