Mirror/filebrowser
1
0
Fork 0
mirror of https://github.com/filebrowser/filebrowser.git synced 2024-06-07 23:00:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

add button working

Browse Source
This commit is contained in:
Henrique Dias 2016-06-27 21:40:51 +01:00
parent 429b67f661
commit a7bffd2e76
4 changed files with 130 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
assets/public/css/styles.css
View File

@ -99,10 +99,10 @@ button, input {
button, select {
text-transform: none
}
button, html [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button;
button, .button, html [type="button"], [type="reset"], [type="submit"] {
/* -webkit-appearance: button; */
text-decoration: none;
color: #fff;
color: #fff !important;
background-color: #26a69a;
text-align: center;
letter-spacing: .5px;
@ -121,11 +121,11 @@ button, html [type="button"], [type="reset"], [type="submit"] {
vertical-align: middle;
-webkit-tap-highlight-color: transparent;
}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
button::-moz-focus-inner,.button::-moz-focus-inner, . [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0
}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
button:-moz-focusring, .button:-moz-focusring,, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
@ -380,21 +380,21 @@ header form input {
outline: 0;
background-color: transparent;
}
::-webkit-input-placeholder {
header form::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgba(255, 255, 255, .5);
}
:-moz-placeholder {
header form:-moz-placeholder {
opacity: 1;
/* Mozilla Firefox 4 to 18 */
color: rgba(255, 255, 255, .5);
}
::-moz-placeholder {
header form::-moz-placeholder {
opacity: 1;
/* Mozilla Firefox 19+ */
color: rgba(255, 255, 255, .5);
}
:-ms-input-placeholder {
header form:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: rgba(255, 255, 255, .5);
}
@ -507,20 +507,13 @@ header form input {
position: relative;
}
#listing .item .checkbox {
position: absolute;
top: 0;
right: 0;
border-radius: 50%;
background: #000;
border: 0;
-webkit-appearance: initial;
position: absolute;
top: 0;
right: 0;
border-radius: 50%;
background: #000;
border: 0;
-webkit-appearance: initial;
}
.item:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !important;
@ -655,17 +648,27 @@ i.spin {
display: none;
}
#editor fieldset fieldset {
margin-left: 1em;
margin-left: 1em;
}
#editor #submit span {
vertical-align: middle;
transition: 0.2s ease-in-out all;
vertical-align: middle;
transition: 0.2s ease-in-out all;
}
#editor #submit span i {
vertical-align: sub;
font-size: 1.3rem;
margin-right: .2em;
vertical-align: sub;
font-size: 1.3rem;
margin-right: .2em;
}
#editor .group.temp {
background-color: #f5f5f5;
}
#editor .group.temp label {
font-weight: lighter;
font-size: .8em;
margin-bottom: 1em;
color: #7d7d7d;
}
#editor .group.temp input {
color: #212121;
}

187
assets/public/js/application.js
View File

@ -379,6 +379,11 @@ document.addEventListener("DOMContentLoaded", function (event) {
});
document.getElementById("open").addEventListener("click", openEvent);
document.addEventListener('keydown', (event) => {
if (event.keyCode == 27) {
backEvent(event);
}
});
if (document.getElementById("back")) {
document.getElementById("back").addEventListener("click", backEvent)
};
@ -517,9 +522,9 @@ const tempID = "_fm_internal_temporary_id"
var addFrontMatterItem = function(event) {
event.preventDefault();
let newItem = document.getElementById(tempID)
if (newItem) {
newItem.remove();
let temp = document.getElementById(tempID)
if (temp) {
temp.remove();
}
let block = this.parentNode;
@ -536,110 +541,102 @@ var addFrontMatterItem = function(event) {
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="none">
<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);
}
/*
// Main add button, after all blocks
if (block.is('div') && block.hasClass("frontmatter")) {
block = $('.blocks');
blockType = "object";
}
// If the Block is an object
if (blockType == "object") {
block.append('<div class="block" id="' + defaultID + '"></div>');
newItem = $("#" + defaultID);
newItem.html('<input id="name-' + defaultID + '" placeholder="Write the field name and press enter..."></input>');
field = $("#name-" + defaultID);
// Show a notification with some information for newbies
if (!document.cookie.replace(/(?:(?:^|.*;\s*)placeholdertip\s*\=\s*([^;]*).*$)|^.*$/, "$1")) {
var date = new Date();
date.setDate(date.getDate() + 365);
document.cookie = 'placeholdertip=true; expires=' + date.toUTCString + '; path=/';
notification({
text: '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".',
type: 'information'
});
}
$(field).keypress(function(event) {
// When you press enter within the new name field:
if (event.which == 13) {
event.preventDefault();
// This var should have a value of the type "name[:array, :object]"
value = field.val();
if (value == "") {
newItem.remove();
return false;
}
elements = value.split(":")
if (elements.length > 2) {
notification({
text: "Invalid syntax. It must be 'name[:type]'.",
type: 'error'
});
return false;
}
if (elements.length == 2 && elements[1] != "array" && elements[1] != "object") {
notification({
text: "Only arrays and objects are allowed.",
type: 'error'
});
return false;
}
field.remove();
if (typeof blockID === "undefined") {
blockID = elements[0];
} else {
blockID = blockID + '[' + elements[0] + ']';
}
if (elements.length == 1) {
newItem.attr('id', 'block-' + blockID);
newItem.append('<input name="' + blockID + ':auto" id="' + blockID + '"></input><br>');
newItem.prepend('<label for="' + blockID + '">' + value + '</label> <span class="actions"><button class="delete">&#8722;</button></span>');
} else {
type = "";
if (elements[1] == "array") {
type = "array";
} else {
type = "object"
let temp = document.getElementById(tempID);
let input = temp.querySelector('input');
input.focus();
input.addEventListener('keydown', (event) => {
if (event.keyCode == 27) {
event.preventDefault();
temp.remove();
}
template = "<fieldset id=\"${blockID}\" data-type=\"${type}\"> <h3>${elements[0]}</h3> <span class=\"actions\"> <button class=\"add\">&#43;</button> <button class=\"delete\">&#8722;</button> </span> </fieldset>"
template = template.replace("${blockID}", blockID);
template = template.replace("${elements[0]}", elements[0]);
template = template.replace("${type}", type);
newItem.after(template);
newItem.remove();
}
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
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:
block.querySelector('.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;
*/
return false;
}

4
assets/templates/base.tmpl
View File

@ -32,10 +32,10 @@
<div>
{{ if .IsDir}}
<form>
<!-- <form>
<i class="material-icons">search</i>
<input type="text" placeholder="Search or command">
</form>
</form> -->
<div class="action" id="view">
<i class="material-icons">view_headline</i>
</div>

2
assets/templates/editor.tmpl
View File

@ -4,7 +4,7 @@
{{ if or (eq .Class "frontmatter-only") (eq .Class "complete") }}
<div class="frontmatter" data-type="parent">
{{ template "blocks" .FrontMatter }}
<button class="add">Add field</button>
<div class="button add">Add field</div>
</div>
{{ end }}