-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathshowFile.html
192 lines (122 loc) · 6.67 KB
/
showFile.html
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="pt">
<head>
<link rel="icon" href="images/codeIcon.png">
<link rel="stylesheet" type="text/css" href="google-code-prettify/prettify.css">
<script type="text/javascript" src="google-code-prettify/prettify.js"></script>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--importar o meu código CSS-->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<main>
<!--Side Nav for Mobile-->
<ul id="slide-out" class="side-nav hide-on-large-only">
<br>
<!--
<div class="input-field" style="width: 93%; padding-left: 5%">
<i class="material-icons prefix" style="padding-left: 4%; padding-top: 5%">search</i>
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input">Search here</label>
</div>-->
<li><a href="https://www.facebook.com/ricardo.petronilho98"><i class="fa fa-facebook-square" style="font-size:36px"></i>My facebook</a></li>
<br>
<li><a href="https://github.com/RicardoPetronilho98"><i class="fa fa-github" style="font-size:36px"></i>My github</a></li>
<br>
<li><a href="https://stackoverflow.com/users/8709667/ricardo-petronilho?"><i class="fa fa-stack-overflow" style="font-size:36px"></i>My stackoveflow</a></li>
<br>
<li><a href="repositories.html"><i class="fa fa-code" style="font-size:36px"></i>My repositories</a></li>
<br>
<li><div class="divider"></div></li>
<br>
<li><a href="settings.html"><i class="material-icons" style="font-size:36px">settings</i>Settings</a></li>
</ul>
<!--Navigation bar for Mobile-->
<nav class="hide-on-large-only">
<!--botão para abrir a Side Bar-->
<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
<a href="index.html" class="brand-logo right-align" style="padding-left: 2%">Ricardo Petronilho</a>
</nav>
<!--Navigation bar for Desktop-->
<nav class="hide-on-med-and-down">
<div class="container">
<div class="nav-wrapper">
<a href="index.html" class="brand-logo waves-effect">Ricardo Petronilho</a>
<ul class="right">
<li><a class="waves-effect" href="repositories.html">My repositories</a>
<li><a class="waves-effect" href="https://github.com/RicardoPetronilho98">github</a></li>
<li><a class="waves-effect" href="https://www.facebook.com/ricardo.petronilho98">facebook</a></li>
<li><a class="waves-effect" href="https://stackoverflow.com/users/8709667/ricardo-petronilho?">stackoverflow</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<br>
<!--Mostra código html SEM ser renderizado-->
<pre style="font-size:14px" class="prettyprint" id="showHTML"></pre>
</div>
<div id="botaoVoltar" class="fixed-action-btn" style="bottom: 20px; right: 24px;">
<a id="botaoVoltarHref" href="javascript:history.back()" class="waves-effect waves-light btn"><i class="material-icons right">arrow_back</i>Voltar</a>
</div>
</main>
<!--<div class="footer">
<div>
<span>©2017 Ricardo Petronilho</span>
</div>
</div>-->
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/myScript.js"></script>
<script type="text/javascript">
$('document').ready(function(){ //JQuery library functions
$('ul.tabs').tabs();
//side Nav for Mobile
$('.button-collapse').sideNav({
menuWidth: 300, // Default is 300
edge: 'left', // Choose the horizontal origin
closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
draggable: true, // Choose whether you can drag to open on touch screens,
onOpen: function(el) { }, // 'rounded' is the class I'm applying to the toast) { }, // A function to be called when sideNav is opened
onClose: function(el) { }, // A function to be called when sideNav is closed
});
// Initialize collapse button
$(".button-collapse").sideNav();
//-----------------------------------------------------------------------------------------------------
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
var JSONcode = JSON.parse(this.responseText);
//o valor do i foi enviado como argumento no link para que se possa saber qual o ficheiro a ser apresentado na diretoria tb enviado pelo link
var link = JSONcode[getParameterByName("file")].url;
//neste momento o link toma o valor do url onde se encontra o content do ficheiro em base 64
//--------------------------------------------------------------------------------
//captura o conteudo dentro de cada ficheiro
var xmlhttp2 = new XMLHttpRequest();
xmlhttp2.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
var JSONcode2 = JSON.parse(this.responseText);
//remove os caracteres especiais para que possa ser apresentado como código e antes é descodificado da base 64 para ASCII
document.getElementById("showHTML").innerHTML = escapeHtml(window.atob(JSONcode2.content));
}
}
xmlhttp2.open("GET", link, true);
xmlhttp2.send();
//--------------------------------------------------------------------------------
}
};
//consoante a diretoria e o repositorio onde nos encontramos, o link é gerado
var linkCONTENT = "https://api.github.com/repos/RicardoPetronilho98/" + getParameterByName("rep") + "/contents/" + getParameterByName("path");
xmlhttp.open("GET", linkCONTENT, true);
xmlhttp.send();
//-----------------------------------------------------------------------------------------------------
PR.prettyPrint();
});
</script>
</html>