Repository navigation
Expand file tree
/
Copy pathdrawLocal.html
More file actions
129 lines (129 loc) · 5.48 KB
/
Copy pathdrawLocal.html
File metadata and controls
129 lines (129 loc) · 5.48 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
<title>FlowgorithmJS offline</title>
<meta charset="utf-8">
<script src="lib/jquery-3.7.1.min.js"></script>
<script src="flowgorithm.js?100"></script>
<script>
function loadFile(){
var file = $('#source').get(0).files[0];
var reader = new FileReader();
reader.addEventListener("load",function(){
let xml = reader.result;
let config = {};
config.groupInput = ($("input[name='o1']:checked").val()==='1') ? true : false;
config.aH = parseInt($("#o2").val());
config.aT = parseInt($("#o2b").val());
config.itMode = parseInt($("#o3").val());
config.labelTrue = $("#o5").val();
config.labelFalse = $("#o6").val();
$('#f').off()
.on("flowgorithmjs:preload",function(){console.log('draw start ...');})
.on("flowgorithmjs:postload",function(){console.log('draw end');});
var flowchart = FlowgorithmJS.drawFromSource(xml,'#f',config);
$('#choose').removeClass('big');
$('body').addClass('view');
let $box = $('#info');
$box.empty().append('<p><i>Name:</i> '+flowchart.name+'</p>')
.append('<p><i>Authors:</i> '+flowchart.authors+'</p>')
.append('<p><i>About:</i> '+flowchart.about+'</p>')
.append('<p><i>Saved:</i> '+flowchart.saved+'</p>')
.append('<p><i>Created:</i> '+flowchart.created+'</p>')
.append('<p><i>Edit history:</i> '+flowchart.edited.join(' | ')+'</p>');
let title = flowchart.name;
if(title==='') title="flowchart";
$('#dsvg').off().click(function(){
FlowgorithmJS.downloadSVG('#f',title+'.svg');
return false;
});
},false);
if(file) reader.readAsText(file);
}
$(function(){
$('#oc').click(function(){
if($('#info').is(':visible')){
$('#info').hide();
$(this).html('«');
$('#f').addClass('noinf');
}
else{
$('#info').show();
$(this).html('x');
$('#f').removeClass('noinf');
}
});
});
</script>
<style>
h1{font-size:1.2em}
body #oc{display:none}
#choose{width:100%;text-align:right;background:#eee;margin:0}
#choose label{color:#888}
#choose a{display:inline-block;color:red;margin-right:.5em}
#choose.big{border:1px solid #ddd;padding:5em 0;text-align:center;font-size:1.2em;background:none}
#choose.big #source{font-size:1.5em}
#choose.big a{display:none}
#chooseOption .row{border-bottom:1px dotted #ddd;padding:.5em 0}
#chooseOption input,#chooseOption select{font-size:.9em}
body.view{margin-top:2.5em}
body.view #chooseOption{display:none}
body.view h1{font-size:1em;z-index:2;position:absolute;top:6px;margin:0;left:13px}
body.view #choose{position:absolute;top:0;left:0;width:100%;text-align:right;padding:4px 0;}
body.view #oc{display:block}
#oc{position:absolute;right:18px;top:40px;font-size:1.4em;text-decoration:none;color:#333;font-family:Arial}
#info{display:none}
body.view #info{display:grid;font-size:.9em;padding:.5em;grid-template-columns:2fr 1fr;margin:0;border:1px solid #ddd}
#info p{margin:0;padding:.2em 0;border-bottom:1px dotted #ccc}
#info p:last-child{border:0}
#info p:nth-child(5),#info p:nth-child(6){grid-column:1/span 2}
@media print{
.noprint{display:none}
body{margin:1cm;padding:0}
#info{border:1px solid #333 !important;margin-bottom:20px}
#f{page-break-inside:avoid;vertical-align:top}
@page{margin:0}
#oc{display:none !important}
svg{max-height:24cm}
#f.noinf svg{max-height:27cm}
}
</style>
</head>
<body>
<h1 class="noprint">Flowgorithm JS Viewer</h1>
<div id="choose" class="big noprint">
<label for="source">Select .fprg file</label>
<input type="file" onchange="loadFile()" id="source" accept=".fprg">
<a id="dsvg" href="#">Download SVG</a>
</div>
<div id="chooseOption" class="noprint">
<div class="row">
Grouping consecutive input:
<label for="o1">Yes<input type="radio" value="1" name="o1" id="o1"></label>
<label for="o1b">No<input type="radio" value="0" name="o1" id="o1b" checked></label>
</div>
<div class="row">
<label for="o2">Arrow length: <input type="number" min="5" max="100" value="12" style="width:50px" name="groupInput" id="o2"></label>
</div>
<div class="row">
<label for="o2b">Arrow tip size: <input type="number" min="5" max="100" value="7" style="width:50px" name="groupInput" id="o2b"></label>
</div>
<div class="row">
<label for="o3">Style of pre-conditional iterations:</label>
<select name="o3" id="o3">
<option value="2" selected>Flowgorithm style</option>
<option value="3">Variant 1</option>
</select>
</div>
<div class="row">
<label for="o2b">Label True: <input type="text" value="True" style="width:50px" id="o5"></label>
</div>
<div class="row">
<label for="o2b">Label False: <input type="text" value="False" style="width:50px" id="o6"></label>
</div>
</div>
<a id="oc" href="#">x</a>
<section id="info"></section>
<div id="f"></div>
</body>
</html>