|
|
<!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>
|
|
|
|
