Information
We are currently investigating an issue with the editor of some pages. Please save your work and avoid to create new pages until this banner is gone.
...
HTML |
---|
<!--
Warning: Do not add an accronym by hand with the edit mode:
There is a button add (+) at the right of the search entry in view page mode (not edit)
-->
<script type="text/javascript">
var array = `| ABM | Antenna Bus Master |
| ACS | ALMA Common Software |
| BACI | Basic Access Control Interfae |
| CDB | Configuration Data Base |
| CORBA | Common Object Request Broker Architecture |
| DDS | Data Distribution Services |
| DEVIO | Device Input and Output |
| IDL | Interface Definition Language |
| IPC | Inter-Process Communication |
| MACI | Management and Control Interface |
| ORB | Object Request Broker |
| RPC | Remote Procedure Call |`
</script>
<style>
body {
background: #fafafa;
color: #444;
font: 100%/30px 'Helvetica Neue', helvetica, arial, sans-serif;
text-shadow: 0 1px 0 #fff;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
input {
font-size: 100%;
padding: 8px;
vertical-align: top;
}
textarea {
padding: 7px;
margin: 0px;
font-size: 150%;
resize: none;
overflow: hidden;
box-sizing: border-box;
vertical-align: top;
}
button {
vertical-align: top;
}
table {
background: #f5f5f5;
border-collapse: separate;
box-shadow: inset 0 1px 0 #fff;
/* font-size: 12px; */
line-height: 24px;
text-align: left;
width: 800px;
}
th {
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
font-weight: bold;
padding: 10px 15px;
position: relative;
}
th:after {
content: '';
display: block;
height: 25%;
left: 0;
margin: 1px 0 0 0;
position: absolute;
top: 25%;
width: 100%;
}
th:first-child {
border-left: 1px solid #777;
box-shadow: inset 1px 1px 0 #999;
}
th:last-child {
box-shadow: inset -1px 1px 0 #999;
}
td {
border-right: 1px solid #fff;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e8e8e8;
padding: 10px 15px;
position: relative;
transition: all 300ms;
}
/* column 1 */
td:first-child {
box-shadow: inset 1px 0 0 #fff;
width: 15%;
}
/* column 1 */
td:last-child {
border-right: 1px solid #e8e8e8;
box-shadow: inset -1px 0 0 #fff;
width: 80%;
}
tr {
background: #e1e1e1;
}
tr:nth-child(odd) td {
background: #f1f1f1;
}
tr:last-of-type td {
box-shadow: inset 0 -1px 0 #fff;
}
tr:last-of-type td:first-child {
box-shadow: inset 1px -1px 0 #fff;
}
tr:last-of-type td:last-child {
box-shadow: inset -1px -1px 0 #fff;
}
</style>
<!---------------------------------------------
START JAVASCRIPT
---------------------------------------------->
<script type="text/javascript">
function filterAcronym(){
// Callback: when typing in input field
// From: https://stackoverflow.com/questions/51187477/how-to-filter-a-html-table-using-simple-javascript
var input, filter, table, tr, td, cell, i, j;
// Get in
input = document.getElementById("idFilter");
filter = input.value.trim().toUpperCase();
// Set URL search parameter
const urlParams = new URLSearchParams(window.location.search);
urlParams.set('search', filter.toLowerCase());
//urlParams.search = searchParam;
window.history.pushState(null, null, '?' + urlParams.toString());
// Set input element <- search
//input.value = searchParam;
// Only display match
table = document.getElementById("idTable");
tr = table.getElementsByTagName("tr");
var num = 0;
for (i = 0; i < tr.length; i++) {
// Hide the row initially.
tr[i].style.display = "none";
// Get line
td = tr[i].getElementsByTagName("td");
// Retrieve only first column (Acronym)
cell = tr[i].getElementsByTagName("td")[0];
// Uppercase current acronym
var current_upper = "";
if (cell){
current_upper = cell.textContent.toUpperCase();
}
// Check if match
var bol = Boolean();
// Display only match
if (current_upper.startsWith(filter)) {
tr[i].style.display = "";
num += 1;
}
}
// Update Text
document.getElementById("idNumber").innerHTML = num;
}
function createTable(){
// Called: at init
// Focus on filter entry
document.getElementById("idFilter").focus();
table = document.getElementById("idTable");
var arrayOfLines = array.split("\n");
var num = 0;
// For each line
arrayOfLines.forEach(function (item, index) {
// Create a Row and 2 cells
var row = document.createElement('tr');
// With '|' as separator (like Markdown)
var a_cell = item.split('|')
// Cell1
var cell1 = document.createElement('td');
bold = document.createElement('strong');
cell1.appendChild(bold);
bold.appendChild(document.createTextNode(a_cell[1].trim()));
row.appendChild(cell1);
// Parse markdown description content
var s_content2 = markdown(a_cell[2].trim());
// Cell2
var cell2 = document.createElement('td');
//cell2.appendChild(document.createTextNode(a_cell[2].trim()));
cell2.innerHTML = s_content2;
row.appendChild(cell2);
// Add line to table
table.appendChild(row);
num += 1;
});
// Update Text: number of acronym
document.getElementById("idNumber").innerHTML = num;
// Get query parameter
const urlParams = new URLSearchParams(window.location.search);
const searchParam = urlParams.get('search');
// Set input element <- search
var input = document.getElementById("idFilter");
input.value = searchParam;
filterAcronym();
}
function getUrl(){
// Helper: Returns current page url for with Confluence API
const site = 'https://confluence.alma.cl';
const pageid = AJS.params.pageId; // '72169314';
return site + "/rest/api/content/" + pageid;
}
function getPage(){
// Helper: Get Confluence page content as string
const req = new XMLHttpRequest();
req.open("GET", getUrl() + '?expand=body.storage,version', false); // false -> synchronous
req.send();
return JSON.parse(req.responseText);
}
function setPage(o_page){
// Helper: set Confluence page content from string
const req = new XMLHttpRequest();
req.open("PUT", getUrl(), false); // false -> synchronous
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
req.setRequestHeader("Accept", "application/json; charset=utf-8");
req.send(JSON.stringify(o_page));
}
// TODO put in thread
function addAcronym(){
// Callback: at press "Fire"
console.log('Button clicked')
const r_array=/(var array = `)([^`]*)/;
const b_is_in_confluence = (typeof AJS != 'undefined')
// Get user entry
var acronym = document.getElementById('idNewAcronym').value.trim();
let description = document.getElementById('idNewDescription').value.trim();
// Sanityze entry
let s_err = ''
s_err += acronym.length == 0 ? 'Cannot add an empty acronym\n' : '';
s_err += description.length == 0 ? 'Cannot add an empty description\n' : '';
s_err += (acronym + description).match('[|`]') ? 'Characters ` and | are note alowed\n' : '';
if (s_err.length != 0) {
alert(s_err);
return;
}
description = description.replaceAll('\\', '\\\\');
description = description.replace(/(?:\r\n|\r|\n)/g, '<br/>');
// Convert to upper case
if (isLowerCase(acronym)){
acronym = acronym.toUpperCase();
}
// Craft new data line
const s_new_line = '| ' + acronym.toUpperCase() + ' | ' + description + ' |';
console.log('Adding acronym:' + acronym + ',' + description);
// Pull current page
let o_page = getPage()
// Get array of lines <- Json
const s_content = o_page.body.storage.value;
let s_lines = s_content.match(r_array)[2];
let a_lines = s_lines.split('\n');
// Insert line at good index
let i_new = 0
while ((i_new < a_lines.length)
&& a_lines[i_new].toUpperCase() < s_new_line.toUpperCase()){
i_new++;
}
a_lines.splice(i_new, 0, s_new_line);
// Restore Json
s_lines = a_lines.join('\n');
o_page.body.storage.value = s_content.replace(r_array, '\$1' + s_lines);
o_page.version.number++;
o_page.version.message = "Add: " + s_new_line;
// Push
setPage(o_page);
console.log('Reloading');
window.location.reload(true);
console.log('Click end');
}
function toogleAdd() {
// Callback: At press "+"
// Toogle visibility of div
let divAdd = document.getElementById('idRow2');
divAdd.style.display = divAdd.style.display == 'none' ? 'inline-block' : 'none';
// Set acronym accroding to the one in filter
var input_new = document.getElementById('idNewAcronym');
if (!input_new.value.trim()){
const s_filter = document.getElementById('idFilter').value.trim();
input_new.value = s_filter;
}
}
function toogleHelp() {
// Callback: At press "?"
let divAdd = document.getElementById('idRow3');
divAdd.style.display = divAdd.style.display == 'none' ? 'inline-block' : 'none';
}
function markdown(src) {
// Helper: convert Markdown -> Html
// Inspired from: https://github.com/adamvleggett/drawdown/blob/master/drawdown.js
var rx_lt = /</g;
var rx_gt = />/g;
var rx_space = /\t|\r|\uf8ff/g;
var rx_escape = /\\([\\\|`*_{}\[\]()#+\-~])/g;
var rx_highlight = /(^|[^A-Za-z\d\\])(([*_])|(~)|(\^)|(--)|(\+\+)|`)(\2?)([^<]*?)\2\8(?!\2)(?=\W|_|$)/g;
var rx_link = /((!?)\[(.*?)\]\((.*?)( ".*")?\)|\\([\\`*_{}\[\]()#+\-.!~]))/g;
function replace(rex, fn) {
src = src.replace(rex, fn);
}
function element(tag, content) {
return '<' + tag + '>' + content + '</' + tag + '>';
}
function highlight(src) {
return src.replace(rx_highlight, function(all, _, p1, emp, sub, sup, small, big, p2, content) {
return _ + element(
emp ? (p2 ? 'strong' : 'em')
: sub ? (p2 ? 's' : 'sub')
: sup ? 'sup'
: small ? 'small'
: big ? 'big'
: 'code',
highlight(content));
});
}
function unesc(str) {
return str.replace(rx_escape, '$1');
}
var stash = [];
var si = 0;
// Highlight
src = highlight(src);
// Link
replace(rx_link, function(all, p1, p2, p3, p4, p5, p6) {
return '<a href="' + p4 + '">' + unesc(highlight(p3)) + '</a>'
});
return src.trim();
};
function isLowerCase(str) {
// Helper: Check if string is lower case
return str.toLowerCase() == str;
}
function auto_height(elem) {
elem.style.height = "1px";
elem.style.height = (elem.scrollHeight)+"px";
}
window.onload = createTable;
</script>
<div id="idDead" style="width:100%">
<div id=idRow1 style="width:100%;">
<input onkeyup="filterAcronym()" tabindex="1" style="display:inline-block" type="text" id="idFilter" placeholder="Search for acronyms (ignorecase)" title="Type in part of an acronym">
<div style="display: inline-block">Results: <span id="idNumber"></span></div>
<input onclick="toogleAdd()" style="display: inline-block" type="button" id="idNew" value="➕" title="Add a new acronym to the dataset">
</div>
<div id=idRow2 style="display:none; width:100%; vertical-align:top;">
<input onkeyup="" style="display:inline-block; width:15%" type="text" id="idNewAcronym" placeholder="ALMA" title="Type acronym initials">
<textarea style="display:inline-block; width:60%;" rows="1" oninput="auto_height(this)" type="text" id="idNewDescription" placeholder="Atacama Large Milimeter Array" title="Type acronym description"></textarea>
<input onclick="addAcronym()" style="display:inline-block; width:15%;" type="button" id="idNewAdd" value="Add now" title="Add a new acronym to the dataset">
<input onclick="toogleHelp()" style="display: inline-block" type="button" id="idToogleHelp" value="❓" title="Help">
<div id=idRow3 style="display:none; width:100%; color:#888;">
<b>Add an acronym!</b><br/>
<b>1/ Acronym</b>: will be converted to uppercase<br>
<b>2/ Description</b>: support some markdown plus any html syntax
<ul style="margin:0;">
<li><b>Newline</b>: press enter, don't be shy, newlines will be converted to <br/></li>
<li><b>Link</b>: [link](http://example.com)</li>
<li><b>Typeface</b>: **bold**, *italic*, ***both***, ~~strikethrough~~, `monospace`, --subscript--, and ^^superscript^^</li>
<li><b>Html</b>: beware badly formed html that can break the page (ex: unclosed tag)
</div>
</div>
</div>
<table id="idTable" style="width:100%;">
<!--
<tr class="header">
<th style="width:10%;">Acronym</th>
<th style="width:80%;">Meaning</th>
</tr>
-->
</table> |
...