updates; fixes; progresses #5
This commit is contained in:
Henrique Dias
32
assets/embed/public/js/.jsbeautifyrc
Normal file
32
assets/embed/public/js/.jsbeautifyrc
Normal file
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"js": {
|
||||
"allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc"],
|
||||
|
||||
// Set brace_style
|
||||
// collapse: (old default) Put braces on the same line as control statements
|
||||
// collapse-preserve-inline: (new default) Same as collapse but better support for ES6 destructuring and other features. https://github.com/victorporof/Sublime-HTMLPrettify/issues/231
|
||||
// expand: Put braces on own line (Allman / ANSI style)
|
||||
// end-expand: Put end braces on own line
|
||||
// none: Keep them where they are
|
||||
"brace_style": "collapse-preserve-inline",
|
||||
|
||||
"break_chained_methods": false, // Break chained method calls across subsequent lines
|
||||
"e4x": false, // Pass E4X xml literals through untouched
|
||||
"end_with_newline": false, // End output with newline
|
||||
"indent_char": " ", // Indentation character
|
||||
"indent_level": 0, // Initial indentation level
|
||||
"indent_size": 4, // Indentation size
|
||||
"indent_with_tabs": false, // Indent with tabs, overrides `indent_size` and `indent_char`
|
||||
"jslint_happy": false, // If true, then jslint-stricter mode is enforced
|
||||
"keep_array_indentation": false, // Preserve array indentation
|
||||
"keep_function_indentation": false, // Preserve function indentation
|
||||
"max_preserve_newlines": 0, // Maximum number of line breaks to be preserved in one chunk (0 disables)
|
||||
"preserve_newlines": true, // Whether existing line breaks should be preserved
|
||||
"space_after_anon_function": false, // Should the space before an anonymous function's parens be added, "function()" vs "function ()"
|
||||
"space_before_conditional": true, // Should the space before conditional statement be added, "if(true)" vs "if (true)"
|
||||
"space_in_empty_paren": false, // Add padding spaces within empty paren, "f()" vs "f( )"
|
||||
"space_in_paren": false, // Add padding spaces within paren, ie. f( a, b )
|
||||
"unescape_strings": false, // Should printable characters in strings encoded in \xNN notation be unescaped, "example" vs "\x65\x78\x61\x6d\x70\x6c\x65"
|
||||
"wrap_line_length": 0 // Lines should wrap at next opportunity after this number of characters (0 disables)
|
||||
}
|
||||
}
|
||||
803
assets/embed/public/js/application.js
Normal file
803
assets/embed/public/js/application.js
Normal file
@@ -0,0 +1,803 @@
|
||||
'use strict';
|
||||
|
||||
const tempID = "_fm_internal_temporary_id"
|
||||
var selectedItems = [];
|
||||
|
||||
/* * * * * * * * * * * * * * * *
|
||||
* *
|
||||
* GENERAL FUNCTIONS *
|
||||
* *
|
||||
* * * * * * * * * * * * * * * */
|
||||
|
||||
// Removes an element, if exists, from an array
|
||||
Array.prototype.removeElement = function(element) {
|
||||
var i = this.indexOf(element);
|
||||
if (i != -1) {
|
||||
this.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Replaces an element inside an array by another
|
||||
Array.prototype.replaceElement = function(begin, end) {
|
||||
var i = this.indexOf(begin);
|
||||
if (i != -1) {
|
||||
this[i] = end;
|
||||
}
|
||||
}
|
||||
|
||||
// Sends a costum event to itself
|
||||
Document.prototype.sendCostumEvent = function(text) {
|
||||
this.dispatchEvent(new CustomEvent(text));
|
||||
}
|
||||
|
||||
// Gets the content of a cookie
|
||||
Document.prototype.getCookie = function(name) {
|
||||
var re = new RegExp("(?:(?:^|.*;\\s*)" + name + "\\s*\\=\\s*([^;]*).*$)|^.*$");
|
||||
return document.cookie.replace(re, "$1");
|
||||
}
|
||||
|
||||
// Changes a button to the loading animation
|
||||
Element.prototype.changeToLoading = function() {
|
||||
let element = this;
|
||||
let originalText = element.innerHTML;
|
||||
|
||||
element.style.opacity = 0;
|
||||
|
||||
setTimeout(function() {
|
||||
element.innerHTML = '<i class="material-icons spin">autorenew</i>';
|
||||
element.style.opacity = 1;
|
||||
}, 200);
|
||||
|
||||
return originalText;
|
||||
}
|
||||
|
||||
// Changes an element to done animation
|
||||
Element.prototype.changeToDone = function(error, html) {
|
||||
this.style.opacity = 0;
|
||||
|
||||
let thirdStep = () => {
|
||||
this.innerHTML = html;
|
||||
this.style.opacity = 1;
|
||||
|
||||
if (selectedItems.length == 0 && document.getElementById('listing')) {
|
||||
document.sendCostumEvent('changed-selected');
|
||||
}
|
||||
}
|
||||
|
||||
let secondStep = () => {
|
||||
this.style.opacity = 0;
|
||||
setTimeout(thirdStep, 200);
|
||||
}
|
||||
|
||||
let firstStep = () => {
|
||||
if (error) {
|
||||
this.innerHTML = '<i class="material-icons">close</i>';
|
||||
} else {
|
||||
this.innerHTML = '<i class="material-icons">done</i>';
|
||||
}
|
||||
|
||||
this.style.opacity = 1;
|
||||
|
||||
setTimeout(secondStep, 1000);
|
||||
}
|
||||
|
||||
setTimeout(firstStep, 200);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Handles the open file button event
|
||||
var openEvent = function(event) {
|
||||
if (this.classList.contains('disabled')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (selectedItems.length) {
|
||||
window.open(selectedItems[0] + '?raw=true');
|
||||
return false;
|
||||
}
|
||||
|
||||
window.open(window.location + '?raw=true');
|
||||
return false;
|
||||
}
|
||||
|
||||
// Handles the delete button event
|
||||
var deleteEvent = function(event) {
|
||||
let single = false;
|
||||
|
||||
if (!selectedItems.length) {
|
||||
selectedItems = [window.location];
|
||||
single = true;
|
||||
}
|
||||
|
||||
if (selectedItems.length) {
|
||||
Array.from(selectedItems).forEach(link => {
|
||||
let html = document.getElementById("delete").changeToLoading();
|
||||
let request = new XMLHttpRequest();
|
||||
|
||||
request.open('DELETE', link);
|
||||
request.send();
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState == 4) {
|
||||
if (request.status == 200) {
|
||||
if (single) {
|
||||
window.location.pathname = RemoveLastDirectoryPartOf(window.location.pathname);
|
||||
} else {
|
||||
document.getElementById(link).remove();
|
||||
selectedItems.removeElement(link);
|
||||
}
|
||||
}
|
||||
document.getElementById('delete').changeToDone((request.status != 200), html);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// Prevent Default event
|
||||
var preventDefault = function(event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
// Download file event
|
||||
var downloadEvent = function(event) {
|
||||
if (this.classList.contains('disabled')) {
|
||||
return false;
|
||||
}
|
||||
if (selectedItems.length) {
|
||||
Array.from(selectedItems).forEach(item => {
|
||||
window.open(item + "?download=true");
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
window.open(window.location + "?download=true");
|
||||
return false;
|
||||
}
|
||||
|
||||
// Remove the last directory of an url
|
||||
var RemoveLastDirectoryPartOf = function(url) {
|
||||
var arr = url.split('/');
|
||||
arr.pop();
|
||||
return (arr.join('/'));
|
||||
}
|
||||
|
||||
/* * * * * * * * * * * * * * * *
|
||||
* *
|
||||
* LISTING SPECIFIC FUNCTIONS *
|
||||
* *
|
||||
* * * * * * * * * * * * * * * */
|
||||
|
||||
var reloadListing = function() {
|
||||
let request = new XMLHttpRequest();
|
||||
request.open('GET', window.location);
|
||||
request.setRequestHeader('Minimal', 'true');
|
||||
request.send();
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState == 4) {
|
||||
if (request.status == 200) {
|
||||
document.querySelector('body main').innerHTML = request.responseText;
|
||||
// Handle date times
|
||||
let timeList = document.getElementsByTagName("time");
|
||||
Array.from(timeList).forEach(localizeDatetime);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Rename file event
|
||||
var renameEvent = function(event) {
|
||||
if (this.classList.contains('disabled') || !selectedItems.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// This mustn't happen
|
||||
if (selectedItems.length > 1) {
|
||||
alert("Something went wrong. Please refresh the page.");
|
||||
location.refresh();
|
||||
}
|
||||
|
||||
Array.from(selectedItems).forEach(link => {
|
||||
let item = document.getElementById(link);
|
||||
let span = item.getElementsByTagName('span')[0];
|
||||
let name = span.innerHTML;
|
||||
|
||||
item.addEventListener('click', preventDefault);
|
||||
item.removeEventListener('click', itemClickEvent);
|
||||
span.setAttribute('contenteditable', 'true');
|
||||
span.focus();
|
||||
|
||||
let keyDownEvent = (event) => {
|
||||
if (event.keyCode == 13) {
|
||||
let newName = span.innerHTML;
|
||||
let html = document.getElementById('rename').changeToLoading();
|
||||
let request = new XMLHttpRequest();
|
||||
request.open('PATCH', link);
|
||||
request.setRequestHeader('Rename-To', newName);
|
||||
request.send();
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState == 4) {
|
||||
if (request.status != 200) {
|
||||
span.innerHTML = name;
|
||||
} else {
|
||||
let newLink = link.replace(name, newName);
|
||||
item.id = newLink;
|
||||
selectedItems.replaceElement(link, newLink);
|
||||
span.innerHTML = newName;
|
||||
}
|
||||
|
||||
document.getElementById('rename').changeToDone((request.status != 200), html);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.KeyCode == 27) {
|
||||
span.innerHTML = name;
|
||||
}
|
||||
|
||||
if (event.keyCode == 13 || event.keyCode == 27) {
|
||||
span.setAttribute('contenteditable', 'false');
|
||||
span.removeEventListener('keydown', keyDownEvent);
|
||||
item.removeEventListener('click', preventDefault);
|
||||
item.addEventListener('click', itemClickEvent);
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
span.addEventListener('keydown', keyDownEvent);
|
||||
span.addEventListener('blur', (event) => {
|
||||
span.innerHTML = name;
|
||||
span.setAttribute('contenteditable', 'false');
|
||||
span.removeEventListener('keydown', keyDownEvent);
|
||||
item.removeEventListener('click', preventDefault);
|
||||
});
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// Upload files
|
||||
var handleFiles = function(files) {
|
||||
let button = document.getElementById("upload");
|
||||
let html = button.changeToLoading();
|
||||
let data = new FormData();
|
||||
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
data.append(files[i].name, files[i]);
|
||||
}
|
||||
|
||||
let request = new XMLHttpRequest();
|
||||
request.open('POST', window.location.pathname);
|
||||
request.setRequestHeader("Upload", "true");
|
||||
request.send(data);
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState == 4) {
|
||||
if (request.status == 200) {
|
||||
reloadListing();
|
||||
}
|
||||
|
||||
button.changeToDone((request.status != 200), html);
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// Handles the back button event
|
||||
var backEvent = function(event) {
|
||||
var items = document.getElementsByClassName('item');
|
||||
Array.from(items).forEach(link => {
|
||||
link.classList.remove('selected');
|
||||
});
|
||||
selectedItems = [];
|
||||
|
||||
var event = new CustomEvent('changed-selected');
|
||||
document.dispatchEvent(event);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Handles the click event
|
||||
var itemClickEvent = function(event) {
|
||||
var url = this.dataset.href;
|
||||
var el = document.getElementById(url);
|
||||
|
||||
if (selectedItems.length != 0) event.preventDefault();
|
||||
if (selectedItems.indexOf(url) == -1) {
|
||||
el.classList.add('selected');
|
||||
selectedItems.push(url);
|
||||
} else {
|
||||
el.classList.remove('selected');
|
||||
selectedItems.removeElement(url);
|
||||
}
|
||||
|
||||
var event = new CustomEvent('changed-selected');
|
||||
document.dispatchEvent(event);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Handles the datetimes present on the document
|
||||
var localizeDatetime = function(e, index, ar) {
|
||||
if (e.textContent === undefined) {
|
||||
return;
|
||||
}
|
||||
var d = new Date(e.getAttribute('datetime'));
|
||||
if (isNaN(d)) {
|
||||
d = new Date(e.textContent);
|
||||
if (isNaN(d)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
e.textContent = d.toLocaleString();
|
||||
}
|
||||
|
||||
// Toggles the view mode
|
||||
var viewEvent = function(event) {
|
||||
let cookie = document.getCookie('view-list');
|
||||
let listing = document.getElementById('listing');
|
||||
|
||||
if (cookie != 'true') {
|
||||
document.cookie = 'view-list=true';
|
||||
} else {
|
||||
document.cookie = 'view-list=false';
|
||||
}
|
||||
|
||||
handleViewType(document.getCookie('view-list'));
|
||||
return false;
|
||||
}
|
||||
|
||||
// Handles the view mode change
|
||||
var handleViewType = function(viewList) {
|
||||
let listing = document.getElementById('listing');
|
||||
let button = document.getElementById('view');
|
||||
|
||||
if (viewList == "true") {
|
||||
listing.classList.add('list');
|
||||
button.innerHTML = '<i class="material-icons">view_module</i> <span>Switch view</span>';
|
||||
return false;
|
||||
}
|
||||
|
||||
button.innerHTML = '<i class="material-icons">view_list</i> <span>Switch view</span>';
|
||||
listing.classList.remove('list');
|
||||
return false;
|
||||
}
|
||||
|
||||
// Handles the new directory event
|
||||
var newDirEvent = function(event) {
|
||||
if (event.keyCode == 27) {
|
||||
document.getElementById('newdir').classList.toggle('enabled');
|
||||
setTimeout(() => {
|
||||
document.getElementById('newdir').value = '';
|
||||
}, 200);
|
||||
}
|
||||
|
||||
if (event.keyCode == 13) {
|
||||
event.preventDefault();
|
||||
|
||||
let button = document.getElementById('new');
|
||||
let html = button.changeToLoading();
|
||||
let request = new XMLHttpRequest();
|
||||
request.open("POST", window.location);
|
||||
request.setRequestHeader('Filename', document.getElementById('newdir').value);
|
||||
request.send();
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState == 4) {
|
||||
button.changeToDone((request.status != 200), html);
|
||||
reloadListing();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Handles the event when there is change on selected elements
|
||||
document.addEventListener("changed-selected", function(event) {
|
||||
var toolbar = document.getElementById("toolbar");
|
||||
var selectedNumber = selectedItems.length;
|
||||
document.getElementById("selected-number").innerHTML = selectedNumber;
|
||||
|
||||
if (selectedNumber) {
|
||||
toolbar.classList.add("enabled");
|
||||
|
||||
if (selectedNumber > 1) {
|
||||
document.getElementById("open").classList.add("disabled");
|
||||
document.getElementById("rename").classList.add("disabled");
|
||||
}
|
||||
|
||||
if (selectedNumber == 1) {
|
||||
document.getElementById("open").classList.remove("disabled");
|
||||
document.getElementById("rename").classList.remove("disabled");
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
toolbar.classList.remove("enabled");
|
||||
return false;
|
||||
});
|
||||
|
||||
var searchEvent = function(event) {
|
||||
let value = this.value;
|
||||
let box = document.querySelector('#search div');
|
||||
|
||||
if (value.length == 0) {
|
||||
box.innerHTML = "Write your git, mercurial or svn command and press enter.";
|
||||
return;
|
||||
}
|
||||
|
||||
let pieces = value.split(' ');
|
||||
|
||||
if (pieces[0] != "git" && pieces[0] != "hg" && pieces[0] != "svn") {
|
||||
box.innerHTML = "Command not supported."
|
||||
return;
|
||||
}
|
||||
|
||||
box.innerHTML = "Press enter to continue."
|
||||
|
||||
if (event.keyCode == 13) {
|
||||
box.innerHTML = '<i class="material-icons spin">autorenew</i>';
|
||||
|
||||
let request = new XMLHttpRequest();
|
||||
request.open('POST', window.location);
|
||||
request.setRequestHeader('Command', value);
|
||||
request.send();
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState == 4) {
|
||||
if (request.status == 501) {
|
||||
box.innerHTML = "Command not implemented."
|
||||
}
|
||||
|
||||
if (request.status == 500) {
|
||||
box.innerHTML = "Something went wrong."
|
||||
}
|
||||
|
||||
if (request.status == 200) {
|
||||
let text = request.responseText;
|
||||
text = text.substring(1, text.length - 1);
|
||||
text = text.replace('\\n', "\n");
|
||||
box.innerHTML = text;
|
||||
reloadListing();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('listing', event => {
|
||||
// Handle date times
|
||||
let timeList = document.getElementsByTagName("time");
|
||||
Array.from(timeList).forEach(localizeDatetime);
|
||||
|
||||
// Handles the current view mode and adds the event to the button
|
||||
handleViewType(document.getCookie("view-list"));
|
||||
document.getElementById("view").addEventListener("click", viewEvent);
|
||||
|
||||
// Add event to items
|
||||
let items = document.getElementsByClassName('checkbox');
|
||||
Array.from(items).forEach(link => {
|
||||
link.addEventListener('click', itemClickEvent);
|
||||
});
|
||||
|
||||
// Add event to back button and executes back event on ESC
|
||||
document.getElementById("back").addEventListener("click", backEvent)
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.keyCode == 27) {
|
||||
backEvent(event);
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelector('#search input').addEventListener('focus', event => {
|
||||
document.getElementById('search').classList.add('active');
|
||||
});
|
||||
|
||||
document.querySelector('#search input').addEventListener('blur', event => {
|
||||
document.getElementById('search').classList.remove('active');
|
||||
document.querySelector('#search input').value = '';
|
||||
});
|
||||
|
||||
document.querySelector('#search input').addEventListener('keyup', searchEvent);
|
||||
|
||||
// Enables upload button
|
||||
document.getElementById("upload").addEventListener("click", (event) => {
|
||||
document.getElementById("upload-input").click();
|
||||
});
|
||||
|
||||
// Enables rename button
|
||||
document.getElementById("rename").addEventListener("click", renameEvent);
|
||||
|
||||
document.getElementById('new').addEventListener('click', event => {
|
||||
let newdir = document.getElementById('newdir');
|
||||
newdir.classList.add('enabled');
|
||||
newdir.focus();
|
||||
});
|
||||
|
||||
document.getElementById('newdir').addEventListener('blur', event => {
|
||||
document.getElementById('newdir').classList.remove('enabled');
|
||||
});
|
||||
|
||||
document.getElementById('newdir').addEventListener('keydown', newDirEvent);
|
||||
|
||||
// Drag and Drop
|
||||
document.addEventListener("dragover", function(event) {
|
||||
event.preventDefault();
|
||||
}, false);
|
||||
|
||||
document.addEventListener("dragover", (event) => {
|
||||
Array.from(items).forEach(file => {
|
||||
file.style.opacity = 0.5;
|
||||
});
|
||||
}, false);
|
||||
|
||||
document.addEventListener("dragleave", (event) => {
|
||||
Array.from(items).forEach(file => {
|
||||
file.style.opacity = 1;
|
||||
});
|
||||
}, false);
|
||||
|
||||
document.addEventListener("drop", function(event) {
|
||||
event.preventDefault();
|
||||
var dt = event.dataTransfer;
|
||||
var files = dt.files;
|
||||
|
||||
handleFiles(files);
|
||||
}, false);
|
||||
});
|
||||
|
||||
/* * * * * * * * * * * * * * * *
|
||||
* *
|
||||
* EDITOR SPECIFIC FUNCTIONS *
|
||||
* *
|
||||
* * * * * * * * * * * * * * * */
|
||||
|
||||
// auto grow textareas
|
||||
var textareaAutoGrow = function() {
|
||||
let autogrow = function() {
|
||||
this.style.height = '5px';
|
||||
this.style.height = this.scrollHeight + 'px';
|
||||
}
|
||||
|
||||
let textareas = document.getElementsByTagName('textarea');
|
||||
|
||||
let addAutoGrow = () => {
|
||||
Array.from(textareas).forEach(textarea => {
|
||||
autogrow.bind(textarea)();
|
||||
textarea.addEventListener('keyup', autogrow);
|
||||
});
|
||||
}
|
||||
|
||||
addAutoGrow();
|
||||
window.addEventListener('resize', addAutoGrow)
|
||||
}
|
||||
|
||||
var deleteFrontMatterItem = function(event) {
|
||||
event.preventDefault();
|
||||
document.getElementById(this.dataset.delete).remove();
|
||||
}
|
||||
|
||||
var addFrontMatterItem = function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
let temp = document.getElementById(tempID)
|
||||
if (temp) {
|
||||
temp.remove();
|
||||
}
|
||||
|
||||
let block = this.parentNode;
|
||||
let type = block.dataset.type;
|
||||
let id = block.id;
|
||||
|
||||
// If the block is an array
|
||||
if (type === "array") {
|
||||
let fieldID = id + "[]"
|
||||
let input = fieldID
|
||||
let count = block.querySelectorAll('.group > div').length
|
||||
input = input.replace(/\[/, '\\[');
|
||||
input = input.replace(/\]/, '\\]');
|
||||
|
||||
block.querySelector('.group').insertAdjacentHTML('beforeend', `<div id="${fieldID}-${count}" data-type="array-item">
|
||||
<input name="${fieldID}" id="${fieldID}" type="text" data-parent-type="array"></input>
|
||||
<div class="action delete" data-delete="${fieldID}-${count}">
|
||||
<i class="material-icons">close</i>
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
document.getElementById(`${fieldID}-${count}`).querySelector('input').focus();
|
||||
document.querySelector(`div[data-delete="${fieldID}-${count}"]`).addEventListener('click', deleteFrontMatterItem);
|
||||
}
|
||||
|
||||
if (type == "object" || type == "parent") {
|
||||
let template = `<div class="group temp" id="${tempID}">
|
||||
<div class="block" id="${tempID}">
|
||||
<label>Write the field name and then press enter. If you want to create an array or an object, end the name with ":array" or ":object".</label>
|
||||
<input name="${tempID}" type="text" placeholder="Write the field name and press enter.."></input>
|
||||
</div></div>`;
|
||||
|
||||
if (type == "parent") {
|
||||
document.querySelector('div.button.add').insertAdjacentHTML('beforebegin', template);
|
||||
} else {
|
||||
block.querySelector('.delete').insertAdjacentHTML('afterend', template);
|
||||
}
|
||||
|
||||
let temp = document.getElementById(tempID);
|
||||
let input = temp.querySelector('input');
|
||||
input.focus();
|
||||
input.addEventListener('keydown', (event) => {
|
||||
if (event.keyCode == 27) {
|
||||
event.preventDefault();
|
||||
temp.remove();
|
||||
}
|
||||
|
||||
if (event.keyCode == 13) {
|
||||
event.preventDefault();
|
||||
|
||||
let value = input.value;
|
||||
if (value === '') {
|
||||
temp.remove();
|
||||
return true;
|
||||
}
|
||||
|
||||
let name = value.substring(0, value.lastIndexOf(':'));
|
||||
let newtype = value.substring(value.lastIndexOf(':') + 1, value.length);
|
||||
if (newtype !== "" && newtype !== "array" && newtype !== "object") {
|
||||
name = value;
|
||||
}
|
||||
|
||||
name = name.replace(' ', '_');
|
||||
|
||||
let bid = name;
|
||||
if (id != '') {
|
||||
bid = id + "." + bid;
|
||||
}
|
||||
|
||||
temp.remove();
|
||||
|
||||
switch (newtype) {
|
||||
case "array":
|
||||
case "object":
|
||||
let template = `<fieldset id="${bid}" data-type="${newtype}">
|
||||
<h3>${name}</h3>
|
||||
<div class="action add">
|
||||
<i class="material-icons">add</i>
|
||||
</div>
|
||||
<div class="action delete" data-delete="${bid}">
|
||||
<i class="material-icons">close</i>
|
||||
</div>
|
||||
<div class="group">
|
||||
</div>
|
||||
</fieldset>`;
|
||||
|
||||
if (type == "parent") {
|
||||
document.querySelector('div.button.add').insertAdjacentHTML('beforebegin', template);
|
||||
} else {
|
||||
block.insertAdjacentHTML('beforeend', template);
|
||||
}
|
||||
|
||||
document.querySelector(`div[data-delete="${bid}"]`).addEventListener('click', deleteFrontMatterItem);
|
||||
document.getElementById(bid).querySelector('.action.add').addEventListener('click', addFrontMatterItem);
|
||||
break;
|
||||
default:
|
||||
let group = block.querySelector('.group');
|
||||
|
||||
if (group == null) {
|
||||
block.insertAdjacentHTML('afterbegin', '<div class="group"></div>');
|
||||
group = block.querySelector('.group');
|
||||
}
|
||||
|
||||
group.insertAdjacentHTML('beforeend', `<div class="block" id="block-${bid}" data-content="${bid}">
|
||||
<label for="${bid}">${name}</label>
|
||||
<input name="${bid}" id="${bid}" type="text" data-parent-type="object"></input>
|
||||
<div class="action delete" data-delete="block-${bid}">
|
||||
<i class="material-icons">close</i>
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
document.getElementById(bid).focus();
|
||||
document.querySelector(`div[data-delete="block-${bid}"]`).addEventListener('click', deleteFrontMatterItem);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
document.addEventListener("editor", (event) => {
|
||||
textareaAutoGrow();
|
||||
|
||||
let container = document.getElementById('editor');
|
||||
let button = document.querySelector('#submit span:first-child');
|
||||
let kind = container.dataset.kind;
|
||||
|
||||
if (kind != 'frontmatter-only') {
|
||||
let editor = document.getElementById('editor-source');
|
||||
let mode = editor.dataset.mode;
|
||||
let textarea = document.querySelector('textarea[name="content"]');
|
||||
let aceEditor = ace.edit('editor-source');
|
||||
aceEditor.getSession().setMode("ace/mode/" + mode);
|
||||
aceEditor.getSession().setValue(textarea.value);
|
||||
aceEditor.getSession().on('change', function() {
|
||||
textarea.value = aceEditor.getSession().getValue();
|
||||
});
|
||||
aceEditor.setOptions({
|
||||
wrap: true,
|
||||
maxLines: Infinity,
|
||||
theme: "ace/theme/github",
|
||||
showPrintMargin: false,
|
||||
fontSize: "1em",
|
||||
minLines: 20
|
||||
});
|
||||
}
|
||||
|
||||
let deleteFrontMatterItemButtons = document.getElementsByClassName('delete');
|
||||
Array.from(deleteFrontMatterItemButtons).forEach(button => {
|
||||
button.addEventListener('click', deleteFrontMatterItem);
|
||||
});
|
||||
|
||||
let addFrontMatterItemButtons = document.getElementsByClassName('add');
|
||||
Array.from(addFrontMatterItemButtons).forEach(button => {
|
||||
button.addEventListener('click', addFrontMatterItem);
|
||||
});
|
||||
|
||||
document.querySelector('form').addEventListener('submit', (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
let data = form2js(document.querySelector('form'));
|
||||
let html = button.changeToLoading();
|
||||
let request = new XMLHttpRequest();
|
||||
request.open("PUT", window.location);
|
||||
request.setRequestHeader('Kind', kind);
|
||||
request.send(JSON.stringify(data));
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState == 4) {
|
||||
button.changeToDone((request.status != 200), html);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
/* * * * * * * * * * * * * * * *
|
||||
* *
|
||||
* BOOTSTRAP *
|
||||
* *
|
||||
* * * * * * * * * * * * * * * */
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
// Add event to logout button
|
||||
document.getElementById("logout").addEventListener("click", event => {
|
||||
let request = new XMLHttpRequest();
|
||||
request.open('GET', window.location.pathname, true, "username", "password");
|
||||
request.send();
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState == 4) {
|
||||
window.location = "/";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Enables open, delete and download buttons
|
||||
document.getElementById("open").addEventListener("click", openEvent);
|
||||
document.getElementById("delete").addEventListener("click", deleteEvent);
|
||||
document.getElementById("download").addEventListener("click", downloadEvent);
|
||||
document.getElementById("open-nav").addEventListener("click", event => {
|
||||
document.querySelector("header > div:nth-child(2)").classList.toggle("active");
|
||||
});
|
||||
document.getElementById("overlay").addEventListener("click", event => {
|
||||
document.querySelector("header > div:nth-child(2)").classList.toggle("active");
|
||||
});
|
||||
|
||||
if (document.getElementById('listing')) {
|
||||
document.sendCostumEvent('listing');
|
||||
}
|
||||
|
||||
if (document.getElementById('editor')) {
|
||||
document.sendCostumEvent('editor');
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
2
assets/embed/public/js/form2js.js
Normal file
2
assets/embed/public/js/form2js.js
Normal file
@@ -0,0 +1,2 @@
|
||||
/* https://github.com/maxatwork/form2js */
|
||||
(function(a,b){if(typeof exports!=="undefined"&&typeof module!=="undefined"&&module.exports){module.exports=b()}else{if(typeof define==="function"&&define.amd){define(b)}else{a.form2js=b()}}}(this,function(){function e(m,k,j,q,l,r){r=r?true:false;if(typeof j=="undefined"||j==null){j=true}if(typeof k=="undefined"||k==null){k="."}if(arguments.length<5){l=false}m=typeof m=="string"?document.getElementById(m):m;var p=[],o,n=0;if(m.constructor==Array||(typeof NodeList!="undefined"&&m.constructor==NodeList)){while(o=m[n++]){p=p.concat(d(o,q,l,r))}}else{p=d(m,q,l,r)}return b(p,j,k)}function b(s,A,C){var p={},q={},y,x,w,v,u,r,n,t,o,m,z,D,B;for(y=0;y<s.length;y++){u=s[y].value;if(A&&(u===""||u===null)){continue}D=s[y].name;B=D.split(C);r=[];n=p;t="";for(x=0;x<B.length;x++){z=B[x].split("][");if(z.length>1){for(w=0;w<z.length;w++){if(w==0){z[w]=z[w]+"]"}else{if(w==z.length-1){z[w]="["+z[w]}else{z[w]="["+z[w]+"]"}}m=z[w].match(/([a-z_]+)?\[([a-z_][a-z0-9_]+?)\]/i);if(m){for(v=1;v<m.length;v++){if(m[v]){r.push(m[v])}}}else{r.push(z[w])}}}else{r=r.concat(z)}}for(x=0;x<r.length;x++){z=r[x];if(z.indexOf("[]")>-1&&x==r.length-1){o=z.substr(0,z.indexOf("["));t+=o;if(!n[o]){n[o]=[]}n[o].push(u)}else{if(z.indexOf("[")>-1){o=z.substr(0,z.indexOf("["));m=z.replace(/(^([a-z_]+)?\[)|(\]$)/gi,"");t+="_"+o+"_"+m;if(!q[t]){q[t]={}}if(o!=""&&!n[o]){n[o]=[]}if(x==r.length-1){if(o==""){n.push(u);q[t][m]=n[n.length-1]}else{n[o].push(u);q[t][m]=n[o][n[o].length-1]}}else{if(!q[t][m]){if((/^[0-9a-z_]+\[?/i).test(r[x+1])){n[o].push({})}else{n[o].push([])}q[t][m]=n[o][n[o].length-1]}}n=q[t][m]}else{t+=z;if(x<r.length-1){if(!n[z]){n[z]={}}n=n[z]}else{n[z]=u}}}}}return p}function d(l,k,m,j){var i=a(l,k,m,j);return i.length>0?i:g(l,k,m,j)}function g(l,k,n,j){var i=[],m=l.firstChild;while(m){i=i.concat(a(m,k,n,j));m=m.nextSibling}return i}function a(m,k,o,j){if(m.disabled&&!j){return[]}var l,n,i,p=f(m,o);l=k&&k(m);if(l&&l.name){i=[l]}else{if(p!=""&&m.nodeName.match(/INPUT|TEXTAREA/i)){n=c(m,j);if(null===n){i=[]}else{i=[{name:p,value:n}]}}else{if(p!=""&&m.nodeName.match(/SELECT/i)){n=c(m,j);i=[{name:p.replace(/\[\]$/,""),value:n}]}else{i=g(m,k,o,j)}}}return i}function f(i,j){if(i.name&&i.name!=""){return i.name}else{if(j&&i.id&&i.id!=""){return i.id}else{return""}}}function c(j,i){if(j.disabled&&!i){return null}switch(j.nodeName){case"INPUT":case"TEXTAREA":switch(j.type.toLowerCase()){case"radio":if(j.checked&&j.value==="false"){return false}case"checkbox":if(j.checked&&j.value==="true"){return true}if(!j.checked&&j.value==="true"){return false}if(j.checked){return j.value}break;case"button":case"reset":case"submit":case"image":return"";break;default:return j.value;break}break;case"SELECT":return h(j);break;default:break}return null}function h(o){var k=o.multiple,j=[],n,p,m;if(!k){return o.value}for(n=o.getElementsByTagName("option"),p=0,m=n.length;p<m;p++){if(n[p].selected){j.push(n[p].value)}}return j}return e}));
|
||||
Reference in New Issue
Block a user