From a3d410776dcaf84ab2a0cb22eebb6e75a3251033 Mon Sep 17 00:00:00 2001
From: ulrich <not disclosed>
Date: Sat, 25 Feb 2017 17:18:59 +0000
Subject: [PATCH] Mustache Templates ausgelagert (noch in Arbeit)
---
web/ui/index.html | 39 ---------
web/ui/tpl-bcr.txt | 3
web/ui/tpl-kacheln.txt | 6 +
web/ui/stile.css | 10 ++
web/ui/tpl-bcr2.txt | 1
web/ui/tpl-liste.txt | 21 +++++
web/ui/ui.js | 115 +++++++++++++++++++---------
7 files changed, 117 insertions(+), 78 deletions(-)
diff --git a/web/ui/index.html b/web/ui/index.html
index b0ee0a7..d74367b 100644
--- a/web/ui/index.html
+++ b/web/ui/index.html
@@ -9,45 +9,6 @@
<link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/jslib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="stile.css">
- <script id="tpl-kacheln" type="x-tmpl-mustache">
- {{#files}}
- <figure class="figure datei-figure text-center text-warning align-top datei-elem">
- <i class="fa {{ typeClass }} fa-3x"></i>
- <figcaption class="figure-caption dateiname">{{ fileName }}</figcaption>
- </figure>
- {{/files}}
- </script>
- <script id="tpl-liste" type="x-tmpl-mustache">
- <table class="table table-hover table-sm table-responsive tableBodyScroll">
- <thead>
- <tr>
- <th colspan="2">Name</th>
- <th>Größe</th>
- <th>Art</th>
- <th>geändert</th>
- </tr>
- </thead>
- <tbody>
- {{#files}}
- <tr class="datei-zeile">
- <td class="datei-elem"><i class="fa {{ typeClass }}"></i></td>
- <td class="dateiname">{{ fileName }}</td>
- <td>{{ fr.length }}</td>
- <td> </td>
- <td>{{ fr.lastModified }}</td>
- </tr>
- {{/files}}
- </tbody>
- </table>
- </script>
- <script id="tpl-bcr" type="x-tmpl-mustache">
- {{#files}}
- <a class="breadcrumb-item" rpath="{{ relPath }}" href="#">{{ fName }}</a>
- {{/files}}
- </script>
- <script id="tpl-bcr2" type="x-tmpl-mustache">
- <span class="breadcrumb-item active">{{ fName }}</span>
- </script>
<script id="tpl-bcr3" type="x-tmpl-mustache">
<div id="ansicht" class="pull-right align-middle">
<i class="fa fa-th-list"></i>
diff --git a/web/ui/stile.css b/web/ui/stile.css
index fab1744..dfae8bb 100644
--- a/web/ui/stile.css
+++ b/web/ui/stile.css
@@ -102,7 +102,15 @@
}
.datei-gewaehlt {
- color: darkslateblue;
+ background-color: lightblue;
+}
+
+.ordner {
+ color: navajowhite;
+}
+
+.datei {
+ color: lightgray;
}
#ansicht {
diff --git a/web/ui/tpl-bcr.txt b/web/ui/tpl-bcr.txt
new file mode 100644
index 0000000..16454c1
--- /dev/null
+++ b/web/ui/tpl-bcr.txt
@@ -0,0 +1,3 @@
+{{#files}}
+ <a class="breadcrumb-item" rpath="{{ relPath }}" href="#">{{ fName }}</a>
+{{/files}}
\ No newline at end of file
diff --git a/web/ui/tpl-bcr2.txt b/web/ui/tpl-bcr2.txt
new file mode 100644
index 0000000..5dc613a
--- /dev/null
+++ b/web/ui/tpl-bcr2.txt
@@ -0,0 +1 @@
+<span class="breadcrumb-item active">{{ fName }}</span>
diff --git a/web/ui/tpl-kacheln.txt b/web/ui/tpl-kacheln.txt
new file mode 100644
index 0000000..0a8102f
--- /dev/null
+++ b/web/ui/tpl-kacheln.txt
@@ -0,0 +1,6 @@
+{{#files}}
+ <figure class="figure datei-figure text-center align-top datei-elem">
+ <i class="fa {{ typeClass }} fa-3x"></i>
+ <figcaption class="figure-caption dateiname">{{ fileName }}</figcaption>
+ </figure>
+{{/files}}
\ No newline at end of file
diff --git a/web/ui/tpl-liste.txt b/web/ui/tpl-liste.txt
new file mode 100644
index 0000000..b71baff
--- /dev/null
+++ b/web/ui/tpl-liste.txt
@@ -0,0 +1,21 @@
+<table class="table table-hover table-sm table-responsive tableBodyScroll">
+ <thead>
+ <tr>
+ <th colspan="2">Name</th>
+ <th>Größe</th>
+ <th>Art</th>
+ <th>geändert</th>
+ </tr>
+ </thead>
+ <tbody>
+ {{#files}}
+ <tr class="datei-zeile">
+ <td class="datei-elem"><i class="fa {{ typeClass }}"></i></td>
+ <td class="dateiname">{{ fileName }}</td>
+ <td>{{ fr.length }}</td>
+ <td> </td>
+ <td>{{ fr.lastModified }}</td>
+ </tr>
+ {{/files}}
+ </tbody>
+</table>
\ No newline at end of file
diff --git a/web/ui/ui.js b/web/ui/ui.js
index 0547019..9f66ee4 100644
--- a/web/ui/ui.js
+++ b/web/ui/ui.js
@@ -301,20 +301,20 @@
function fm_render_list(fl) {
if(modus == 'kacheln') {
// Kachelansicht
- var template = $('#tpl-kacheln').html();
- Mustache.parse(template); // optional, speeds up future uses
+ $.get('tpl-kacheln.txt', function(template) {
+ $('#dateien').empty();
+ $('#dateien').html(Mustache.render(template, fl));
+ $('.figure').click(fm_dateiwahl);
+ });
$('.datei-zeile').attr('onclick','').unbind('click');
- $('#dateien').empty();
- $('#dateien').html(Mustache.render(template, fl));
- $('.figure').click(fm_dateiwahl);
} else {
// Listenansicht
- var template = $('#tpl-liste').html();
- Mustache.parse(template); // optional, speeds up future uses
+ $.get('tpl-liste.txt', function(template) {
+ $('#dateien').empty();
+ $('#dateien').html(Mustache.render(template, fl));
+ $('.datei-zeile').click(fm_dateiwahl);
+ });
$('.figure').attr('onclick','').unbind('click');
- $('#dateien').empty();
- $('#dateien').html(Mustache.render(template, fl));
- $('.datei-zeile').click(fm_dateiwahl);
}
}
@@ -341,7 +341,7 @@
}
// Breadcrumb-Ansicht
- var template;
+ //var template;
$('.breadcrumb-item').attr('onclick','').unbind('click');
$('#bcnav').empty();
var dirList = new Array();
@@ -362,35 +362,74 @@
}
var bl = new BcrFiles(dirList);
- if(dirList.length > 0) {
- template = $('#tpl-bcr').html();
- Mustache.parse(template); // optional, speeds up future uses
- $('#bcnav').html(Mustache.render(template, bl));
- }
-
- if(dirs.length > 0) {
- dirList.push(new BcrFile(rp + '/' + dirs[dirs.length-1], dirs[dirs.length-1]));
- template = $('#tpl-bcr2').html();
- Mustache.parse(template); // optional, speeds up future uses
- $('#bcnav').append(Mustache.render(template, dirList[dirList.length-1]));
+ if(dirList.length > 0) {
+ $.get('tpl-bcr.txt', function(template) {
+ $('#bcnav').html(Mustache.render(template, bl));
+ if(dirs.length > 0) {
+ dirList.push(new BcrFile(rp + '/' + dirs[dirs.length-1], dirs[dirs.length-1]));
+ $.get('tpl-bcr2.txt', function(template) {
+ $('#bcnav').append(Mustache.render(template, dirList[dirList.length-1]));
+ $('#bcnav').append($('#tpl-bcr3').html());
+ fm_bcr_end();
+ });
+ //template = $('#tpl-bcr2').html();
+ //Mustache.parse(template); // optional, speeds up future uses
+ //$('#bcnav').append(Mustache.render(template, dirList[dirList.length-1]));
+ } else {
+ $.get('tpl-bcr2.txt', function(template) {
+ $('#bcnav').append(Mustache.render(template, dirList[0]));
+ $('#bcnav').append($('#tpl-bcr3').html());
+ fm_bcr_end();
+ });
+ //template = $('#tpl-bcr2').html();
+ //Mustache.parse(template); // optional, speeds up future uses
+ //$('#bcnav').append(Mustache.render(template, dirList[0]));
+ }
+ });
} else {
- template = $('#tpl-bcr2').html();
- Mustache.parse(template); // optional, speeds up future uses
- $('#bcnav').append(Mustache.render(template, dirList[0]));
+ if(dirs.length > 0) {
+ dirList.push(new BcrFile(rp + '/' + dirs[dirs.length-1], dirs[dirs.length-1]));
+ $.get('tpl-bcr2.txt', function(template) {
+ $('#bcnav').append(Mustache.render(template, dirList[dirList.length-1]));
+ $('#bcnav').append($('#tpl-bcr3').html());
+ fm_bcr_end();
+ });
+ //template = $('#tpl-bcr2').html();
+ //Mustache.parse(template); // optional, speeds up future uses
+ //$('#bcnav').append(Mustache.render(template, dirList[dirList.length-1]));
+ } else {
+ $.get('tpl-bcr2.txt', function(template) {
+ $('#bcnav').append(Mustache.render(template, dirList[0]));
+ $('#bcnav').append($('#tpl-bcr3').html());
+ fm_bcr_end();
+ });
+ //template = $('#tpl-bcr2').html();
+ //Mustache.parse(template); // optional, speeds up future uses
+ //$('#bcnav').append(Mustache.render(template, dirList[0]));
+ }
}
-
- $('#bcnav').append($('#tpl-bcr3').html());
} else {
pfad = '';
- template = $('#tpl-bcr2').html();
- Mustache.parse(template); // optional, speeds up future uses
- $('#bcnav').append(Mustache.render(template, dirList[0]));
- $('#bcnav').append($('#tpl-bcr3').html());
+ $.get('tpl-bcr2.txt', function(template) {
+ $('#bcnav').append(Mustache.render(template, dirList[0]));
+ $('#bcnav').append($('#tpl-bcr3').html());
+ fm_bcr_end();
+ });
+ //template = $('#tpl-bcr2').html();
+ //Mustache.parse(template); // optional, speeds up future uses
+ //$('#bcnav').append(Mustache.render(template, dirList[0]));
+ //$('#bcnav').append($('#tpl-bcr3').html());
}
- $('.breadcrumb-item').click(fm_bc_click);
- $('#ansicht').click(fm_ansicht_umschalten);
- fm_set_modus();
+ //$('.breadcrumb-item').click(fm_bc_click);
+ //$('#ansicht').click(fm_ansicht_umschalten);
+ //fm_set_modus();
});
+}
+
+function fm_bcr_end() {
+ $('.breadcrumb-item').click(fm_bc_click);
+ $('#ansicht').click(fm_ansicht_umschalten);
+ fm_set_modus();
}
function fm_menu_datei_speichern() {
@@ -523,15 +562,15 @@
this.typeClass = function() {
if(modus == 'kacheln') {
if(self.fr.isDirectory) {
- return 'fa-folder';
+ return 'fa-folder ordner';
} else {
- return 'fa-file';
+ return 'fa-file datei';
}
} else {
if(self.fr.isDirectory) {
- return 'fa-folder';
+ return 'fa-folder ordner';
} else {
- return 'fa-file-o';
+ return 'fa-file-o datei';
}
}
};
--
Gitblit v1.9.3