github
/
filebrowser
mirror of https://github.com/filebrowser/filebrowser
1
0
Fork 0
Code Issues Releases Wiki Activity

html5 templates

pull/144/head
Henrique Dias 2016-12-31 10:39:31 +00:00
parent 52b1e8da51
commit 0ceb15fde3
2 changed files with 139 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
_embed/public/js/editor.js
View File

@ -1,5 +1,7 @@
'use strict'; 'use strict';
var templates = [];
function textareaAutoGrow() { function textareaAutoGrow() {
let autogrow = function() { let autogrow = function() {
this.style.height = '5px'; this.style.height = '5px';
@ -26,7 +28,7 @@ function deleteFrontMatterItem(event) {
function addFrontMatterItem(event) { function addFrontMatterItem(event) {
event.preventDefault(); event.preventDefault();
let clone;
let temp = document.getElementById(tempID) let temp = document.getElementById(tempID)
if (temp) { if (temp) {
temp.remove(); temp.remove();
@ -50,47 +52,38 @@ function addFrontMatterItem(event) {
if (fieldsets.length > 0) { if (fieldsets.length > 0) {
let newtype = fieldsets[0].dataset.type, let newtype = fieldsets[0].dataset.type,
bid = id + "[" + fieldsets.length + "]", bid = id + "[" + fieldsets.length + "]",
name = fieldsets.length, name = fieldsets.length;
template = `<fieldset id="${bid}" data-type="${newtype}">
<h3>${name}</h3> clone = document.importNode(templates.base.content, true);
<div class="action add"> clone.querySelector('fieldset').id = bid;
<i class="material-icons">add</i> clone.querySelector('fieldset').dataset.type = newtype;
</div> clone.querySelector('h3').innerHTML = name;
<div class="action delete" data-delete="${bid}"> clone.querySelector('.delete').dataset.delete = bid;
<i class="material-icons">close</i> clone.querySelector('.delete').addEventListener('click', deleteFrontMatterItem);
</div> clone.querySelector('.add').addEventListener('click', addFrontMatterItem);
<div class="group"> block.appendChild(clone);
</div>
</fieldset>`;
block.insertAdjacentHTML('beforeend', template);
document.querySelector(`div[data-delete="${bid}"]`).addEventListener('click', deleteFrontMatterItem);
document.getElementById(bid).querySelector('.action.add').addEventListener('click', addFrontMatterItem);
} else { } else {
block.querySelector('.group').insertAdjacentHTML('beforeend', `<div id="${fieldID}-${count}" data-type="array-item"> clone = document.importNode(templates.arrayItem.content, true);
<input name="${fieldID}" id="${fieldID}" type="text" data-parent-type="array"></input> clone.querySelector('[data-type="array-item"]').id = `${fieldID}-${count}`;
<div class="action delete" data-delete="${fieldID}-${count}"> clone.querySelector('input').name = fieldID;
<i class="material-icons">close</i> clone.querySelector('input').id = fieldID;
</div> clone.querySelector('div.action').dataset.delete = `${fieldID}-${count}`;
</div>`); clone.querySelector('div.action').addEventListener('click', deleteFrontMatterItem);
block.querySelector('.group').appendChild(clone)
document.getElementById(`${fieldID}-${count}`).querySelector('input').focus(); document.getElementById(`${fieldID}-${count}`).querySelector('input').focus();
document.querySelector(`div[data-delete="${fieldID}-${count}"]`).addEventListener('click', deleteFrontMatterItem);
} }
} }
if (type == "object" || type == "parent") { if (type == "object" || type == "parent") {
let template = `<div class="group temp" id="${tempID}"> clone = document.importNode(templates.temporary.content, true);
<div class="block" id="${tempID}"> clone.querySelector('.group').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> clone.querySelector('.block').id = tempID;
<input name="${tempID}" type="text" placeholder="Write the field name and press enter.."></input> clone.querySelector('input').name = tempID;
</div></div>`;
if (type == "parent") { if (type == "parent") {
document.querySelector('div.button.add').insertAdjacentHTML('beforebegin', template); document.querySelector('.frontmatter').insertBefore(clone, document.querySelector('div.button.add'));
} else { } else {
block.querySelector('.delete').insertAdjacentHTML('afterend', template); block.insertBefore(clone, block.querySelector('.group'));
} }
let temp = document.getElementById(tempID), let temp = document.getElementById(tempID),
@ -128,27 +121,21 @@ function addFrontMatterItem(event) {
switch (newtype) { switch (newtype) {
case "array": case "array":
case "object": case "object":
let template = `<fieldset id="${bid}" data-type="${newtype}"> clone = document.importNode(templates.base.content, true);
<h3>${name}</h3> clone.querySelector('fieldset').id = bid;
<div class="action add"> clone.querySelector('fieldset').dataset.type = newtype;
<i class="material-icons">add</i> clone.querySelector('h3').innerHTML = name;
</div> clone.querySelector('.delete').dataset.delete = bid;
<div class="action delete" data-delete="${bid}"> clone.querySelector('.delete').addEventListener('click', deleteFrontMatterItem);
<i class="material-icons">close</i> clone.querySelector('.add').addEventListener('click', addFrontMatterItem);
</div>
<div class="group">
</div>
</fieldset>`;
if (type == "parent") { if (type == "parent") {
document.querySelector('div.button.add').insertAdjacentHTML('beforebegin', template); document.querySelector('.frontmatter').insertBefore(clone, document.querySelector('div.button.add'));
} else { } else {
block.insertAdjacentHTML('beforeend', template); block.appendChild(clone);
} }
document.querySelector(`div[data-delete="${bid}"]`).addEventListener('click', deleteFrontMatterItem);
document.getElementById(bid).querySelector('.action.add').addEventListener('click', addFrontMatterItem);
break; break;
default: default:
let group = block.querySelector('.group'); let group = block.querySelector('.group');
@ -157,17 +144,19 @@ function addFrontMatterItem(event) {
block.insertAdjacentHTML('afterbegin', '<div class="group"></div>'); block.insertAdjacentHTML('afterbegin', '<div class="group"></div>');
group = block.querySelector('.group'); group = block.querySelector('.group');
} }
group.insertAdjacentHTML('beforeend', `<div class="block" id="block-${bid}" data-content="${bid}"> clone = document.importNode(templates.objectItem.content, true);
<label for="${bid}">${name}</label> clone.querySelector('.block').id = `block-${bid}`;
<input name="${bid}" id="${bid}" type="text" data-parent-type="object"></input> clone.querySelector('.block').dataset.content = bid;
<div class="action delete" data-delete="block-${bid}"> clone.querySelector('label').for = bid;
<i class="material-icons">close</i> clone.querySelector('label').innerHTML = name;
</div> clone.querySelector('input').name = bid;
</div>`); clone.querySelector('input').id = bid;
clone.querySelector('.action').dataset.delete = `block-${bid}`;
clone.querySelector('.action').addEventListener('click', deleteFrontMatterItem);
group.appendChild(clone)
document.getElementById(bid).focus(); document.getElementById(bid).focus();
document.querySelector(`div[data-delete="block-${bid}"]`).addEventListener('click', deleteFrontMatterItem);
} }
} }
}); });
@ -178,6 +167,12 @@ function addFrontMatterItem(event) {
document.addEventListener("DOMContentLoaded", (event) => { document.addEventListener("DOMContentLoaded", (event) => {
textareaAutoGrow(); textareaAutoGrow();
templates.array = document.getElementById("array-template");
templates.arrayItem = document.getElementById("array-item-template");
templates.base = document.getElementById('base-template');
templates.objectItem = document.getElementById("object-item-template");
templates.temporary = document.getElementById('temporary-template');
let container = document.getElementById('editor'), let container = document.getElementById('editor'),
button = document.querySelector('#submit span:first-child'), button = document.querySelector('#submit span:first-child'),

113
_embed/templates/editor.tmpl
View File

@ -1,34 +1,87 @@
{{ define "content" }} {{ define "content" }}
{{ with .Data }} {{ with .Data }}
<div id="editor" class="container" data-kind="{{ .Class }}"> <div id="editor" class="container" data-kind="{{ .Class }}">
<form method="POST" action="./"> <form method="POST" action="./">
{{ if or (eq .Class "frontmatter-only") (eq .Class "complete") }} {{ if or (eq .Class "frontmatter-only") (eq .Class "complete") }}
<div class="frontmatter" data-type="parent"> <div class="frontmatter" data-type="parent">
{{ template "blocks" .FrontMatter }} {{ template "blocks" .FrontMatter }}
<div class="button add">Add field</div> <div class="button add">Add field</div>
</div> </div>
{{ end }}
{{ if or (eq .Class "content-only") (eq .Class "complete") }}
{{ if (eq .Class "complete")}}
<h3>Body</h3>
{{ end }}
<div class="content">
<div id="editor-source" data-mode="{{ .Mode }}"></div>
<textarea name="content">{{ .Content }}</textarea>
</div>
{{ end }}
<div>
<button id="submit" type="submit" data-type="{{ .Class }}">
<span>
<i class="material-icons" title="Save">save</i>
</span>
<span>save</span>
</button>
</div>
</form>
</div>
{{ end }} {{ end }}
{{ if or (eq .Class "content-only") (eq .Class "complete") }}
{{ if (eq .Class "complete")}}
<h3>Body</h3>
{{ end }}
<div class="content">
<div id="editor-source" data-mode="{{ .Mode }}"></div>
<textarea name="content">{{ .Content }}</textarea>
</div>
{{ end }}
<div>
<button id="submit" type="submit" data-type="{{ .Class }}">
<span>
<i class="material-icons" title="Save">save</i>
</span>
<span>save</span>
</button>
</div>
</form>
</div>
{{ end }}
<template id="temporary-template">
<div class="group temp" id="">
<div class="block" id="">
<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="" type="text" placeholder="Write the field name and press enter.."></input>
</div></div>
</template>
<template id="base-template">
<fieldset id="" data-type="">
<h3></h3>
<div class="action add">
<i class="material-icons">add</i>
</div>
<div class="action delete" data-delete="">
<i class="material-icons">close</i>
</div>
<div class="group"></div>
</fieldset>
</template>
<template id="object-item-template">
<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>
</template>
<template id="array-template">
<fieldset id="" data-type="">
<h3></h3>
<div class="action add">
<i class="material-icons">add</i>
</div>
<div class="action delete" data-delete="">
<i class="material-icons">close</i>
</div>
<div class="group"></div>
</fieldset>
</template>
<template id="array-item-template">
<div id="" data-type="array-item">
<input name="" id="" type="text" data-parent-type="array"></input>
<div class="action delete" data-delete="">
<i class="material-icons">close</i>
</div>
</div>
</template>
{{ end }} {{ end }}