From 34aa39872f9563a0a872ff1b4eed637ab0410fd1 Mon Sep 17 00:00:00 2001
From: ulrich <not disclosed>
Date: Fri, 30 Mar 2018 15:30:43 +0000
Subject: [PATCH] Weitere Beispielfunktionen hinzugefuegt
---
data/menu/hauptmenue.json | 15 +
app.js | 116 +++++++++++++++++++
data/tpl/dlg-info.tpl | 8 +
jslib/vorlagen.js | 55 +++++++++
index.html | 46 ++++---
data/menu/untermenue-1.json | 10
app.css | 57 +++++++++
data/menu/untermenue-2.json | 12 +-
8 files changed, 280 insertions(+), 39 deletions(-)
diff --git a/app.css b/app.css
index aab1ed3..342caad 100644
--- a/app.css
+++ b/app.css
@@ -16,15 +16,19 @@
height: 100%; /* Anmerkung 2 */
min-height: 0; /* Anmerkung 1 */
background-color: #ededed;
+ overflow: hidden;
}
.nord {
background-color: black;
display: flex;
flex-flow: row;
- height: 2.5em;
+ height: 2em;
align-items: center;
}
.sued {
+ height: 1.5em;
+ overflow: hidden;
+ transition: all 0.3s ease-in;
background-color: lightgray;
}
.west {
@@ -40,13 +44,26 @@
flex-grow: 0;
flex-shrink: 0;
flex-basis: 6em;
+ transition: all 0.3s ease-in;
background-color: antiquewhite;
+ overflow: hidden;
}
+.zentrum-behaelter {
+ display: flex;
+ flex-flow: column;
+ /* background-color: #eaeaea; */
+ width: 100%;
+}
+
.zentrum {
width: 100%;
height: 100%;
- overflow: auto;
+ overflow-x: hidden;
+ overflow-y: auto;
-webkit-overflow-scrolling: touch;
+}
+
+.zentraler-inhalt {
padding: 0.5em;
}
@@ -62,3 +79,39 @@
margin-left: 0.6em;
color: white;
}
+
+.pointer-cursor {
+ cursor: pointer;
+}
+
+.dialog {
+ position: relative;
+}
+
+.dlg-behaelter {
+ line-height: 1.6;
+ padding: 0.4em;
+}
+
+.dlg-info {
+ background-color: #dcf2fb; // blau
+ padding: 0.4em;
+}
+
+/*
+ Close Button
+
+ <div>
+ <span class="close-btn">✖</span>
+ </div>
+*/
+
+.close-btn {
+ position: absolute;
+ top: 0px;
+ right: 0.4em;
+ margin: 0;
+ padding: 0;
+ font-size: 1.3em;
+ color: #b8b8b8;
+}
diff --git a/app.js b/app.js
index 968c3aa..36bae97 100644
--- a/app.js
+++ b/app.js
@@ -1,8 +1,10 @@
function AppVorlage() {
var self = this;
var appMenu;
+ var vorlagen;
this.init = function() {
+ self.vorlagen = new Vorlagen();
self.appMenu = new AppMenu();
self.appMenu.init(
"data/menu/",
@@ -11,13 +13,123 @@
".west",
"8em");
$(".hamburger").on("click", function(e) {
- self.app_menue_umschalten();
+ self.menue_umschalten();
});
};
- this.app_menue_umschalten = function() {
+ this.menue_umschalten = function() {
$(".hamburger").toggleClass("is-active"); // hamburger-icon umschalten
self.appMenu.toggle(); // menue oeffnen/schliessen
};
+
+ this.info_dialog_zeigen = function() {
+ self.dialog_laden_und_zeigen('data/tpl/dlg-info.tpl', '');
+ self.menue_umschalten();
+ };
+
+ this.seitenleiste_umschalten = function() {
+ var ostDiv = $('.ost');
+ if($(ostDiv).hasClass('ost-open')) {
+ $(ostDiv).removeClass('ost-open');
+ $(ostDiv).css("flex-basis", "0em");
+ } else {
+ $(ostDiv).addClass('ost-open');
+ $(ostDiv).css("flex-basis", '6em'); // z.B. "16em"
+ }
+ self.menue_umschalten();
+ };
+
+ this.fusszeile_umschalten = function() {
+ var suedDiv = $('.sued');
+ if($(suedDiv).hasClass('sued-open')) {
+ $(suedDiv).removeClass('sued-open');
+ $(suedDiv).css("height", "0");
+ } else {
+ $(suedDiv).addClass('sued-open');
+ $(suedDiv).css("height", '1.5em'); // z.B. "16em"
+ }
+ self.menue_umschalten();
+ };
+
+ this.menu_message = function(msg) {
+ self.meldung_mit_timeout(msg, 1500);
+ var suedDiv = $('.sued');
+ if($(suedDiv).hasClass('sued-open')) {
+ } else {
+ $(suedDiv).addClass('sued-open');
+ $(suedDiv).css("height", '1.5em'); // z.B. "16em"
+ }
+ self.menue_umschalten();
+ };
+
+ this.message_1 = function() {
+ self.menu_message('Eine Mitteilung.');
+ };
+
+ this.message_2 = function() {
+ self.menu_message('Was wir schon immer sagen wollten.');
+ };
+
+ this.message_3 = function(text) {
+ self.menu_message(text);
+ };
+
+ this.meldung_mit_timeout = function(meldung, timeout) {
+ var s = $('.sued');
+ s.text(meldung);
+ setTimeout(function() {
+ s.text('Bereit.');
+ setTimeout(function() {
+ var suedDiv = $('.sued');
+ if($(suedDiv).hasClass('sued-open')) {
+ $(suedDiv).removeClass('sued-open');
+ $(suedDiv).css("height", "0");
+ }
+ }, 500);
+ }, timeout);
+ };
+
+ /* Dialog-Funktionen */
+
+ /*
+ Einen Dialog aus Vorlagen erzeugen
+
+ vurl - URL zur Dialogvorlage
+ msgTpl - URL mit einer Vorlage eines Mitteilungstextes (optional)
+ */
+ this.dialog_laden_und_zeigen = function(vurl, msgTpl) {
+ if(msgTpl !== '') {
+ $.ajax({
+ url: msgTpl,
+ type: "GET",
+ dataType : "json"
+ }).done(function( msg ) {
+ self.dialog_zeigen(vurl, msg);
+ });
+ } else {
+ self.dialog_zeigen(vurl, '');
+ }
+ };
+
+ this.dialog_zeigen = function(vurl, inhalt) {
+ var dlg = $(".dialog");
+ self.vorlagen.html_erzeugen(
+ vurl,
+ inhalt,
+ function(html) {
+ dlg.html(html);
+ $(".close-btn").on('click', function() {
+ self.dialog_schliessen();
+ });
+ dlg.slideDown(300);
+ });
+ };
+
+ self.dialog_schliessen = function() {
+ $('.close-btn').off('click');
+ $('.dialog').slideUp(300);
+ };
+
+
}
diff --git a/data/menu/hauptmenue.json b/data/menu/hauptmenue.json
index 92d5c89..b0685f0 100644
--- a/data/menu/hauptmenue.json
+++ b/data/menu/hauptmenue.json
@@ -8,19 +8,24 @@
},
"inhalt": [
{
- "titel": "H Menüeintrag 1",
+ "titel": "Seite umschalten",
"umenue": false,
- "funktion": "app_menu_test"
+ "funktion": "app.seitenleiste_umschalten"
},
{
- "titel": "H Menüeintrag 2",
+ "titel": "Fuss umschalten",
+ "umenue": false,
+ "funktion": "app.fusszeile_umschalten"
+ },
+ {
+ "titel": "mehr",
"umenue": true,
"verweis": "untermenue-1.json"
},
{
- "titel": "H Menüeintrag 3",
+ "titel": "Info",
"umenue": false,
- "funktion": "app_menu_test_2"
+ "funktion": "app.info_dialog_zeigen"
}
]
}
diff --git a/data/menu/untermenue-1.json b/data/menu/untermenue-1.json
index dac9873..24f547c 100644
--- a/data/menu/untermenue-1.json
+++ b/data/menu/untermenue-1.json
@@ -8,19 +8,19 @@
},
"inhalt": [
{
- "titel": "U1 Menüeintrag 1",
+ "titel": "Benachrichtigung 1",
"umenue": false,
- "funktion": "app_menu_message"
+ "funktion": "app.message_1"
},
{
- "titel": "U1 Menüeintrag 2",
+ "titel": "noch mehr",
"umenue": true,
"verweis": "untermenue-2.json"
},
{
- "titel": "U1 Menüeintrag 3",
+ "titel": "Benachrichtigung 2",
"umenue": false,
- "funktion": "app_menu_message"
+ "funktion": "app.message_2"
}
]
}
diff --git a/data/menu/untermenue-2.json b/data/menu/untermenue-2.json
index bf54a84..00c0268 100644
--- a/data/menu/untermenue-2.json
+++ b/data/menu/untermenue-2.json
@@ -8,19 +8,19 @@
},
"inhalt": [
{
- "titel": "U2 Menüeintrag 1",
+ "titel": "Funktion U2.1",
"umenue": false,
- "funktion": "app_menu_message"
+ "funktion": "app.message_3('U2.1')"
},
{
- "titel": "U2 Menüeintrag 2",
+ "titel": "Funktion U2.2",
"umenue": false,
- "funktion": "app_menu_message"
+ "funktion": "app.message_3('U2.2')"
},
{
- "titel": "U2 Menüeintrag 3",
+ "titel": "Funktion U2.3",
"umenue": false,
- "funktion": "app_menu_message"
+ "funktion": "app.message_3('U2.3')"
}
]
}
diff --git a/data/tpl/dlg-info.tpl b/data/tpl/dlg-info.tpl
new file mode 100644
index 0000000..692ace2
--- /dev/null
+++ b/data/tpl/dlg-info.tpl
@@ -0,0 +1,8 @@
+<div class="dlg-info">
+ <span class="close-btn pointer-cursor">✖</span>
+ <div class="dlg-behaelter">
+ <div class="dlg-info-app-titel">app-vorlage</div>
+ <div class="dlg-info-app-info">Eine Vorlage für Apps von <a href='https://uhilger.de'>Ulrich Hilger</a>.</div>
+ <div class="dlg-info-app-info">Weitere Infos im <a href='/gitblit/docs/web!app-vorlage.git'>Code-Repository</a>.</div>
+ </div>
+</div>
diff --git a/index.html b/index.html
index e48311c..11284c2 100644
--- a/index.html
+++ b/index.html
@@ -28,36 +28,44 @@
<div class="west">
westliche Seitenleiste
</div>
- <!-- zentraler Inhaltsbereich -->
- <div class="zentrum">
- <p>
- Hier kann beliebiger Inhalt erscheinen.
- </p>
- <p>
- Wenn dessen Darstellung mehr
- Platz benötigt als das Anzeigegerät bietet wird ein
- Rollbalken eingeblendet. Beim Rollen zu anfangs nicht sichtbaren
- Teilen des Inhalts bleiben die den Inhaltsbereich
- umschließenden Elemente sichtbar.
- </p>
- <p>
- Ein Klick auf das Hamburger-Piktogramm oben links bzw. dessen
- Antippen blendet ein Menü ein.
- </p>
+ <div class="zentrum-behaelter">
+ <!-- Einblendbereich -->
+ <div class="dialog"></div>
+ <!-- zentraler Inhaltsbereich -->
+ <div class="zentrum">
+ <div class="zentraler-inhalt">
+ <p>
+ Hier kann beliebiger Inhalt erscheinen.
+ </p>
+ <p>
+ Wenn dessen Darstellung mehr
+ Platz benötigt als das Anzeigegerät bietet wird ein
+ Rollbalken eingeblendet. Beim Rollen zu anfangs nicht sichtbaren
+ Teilen des Inhalts bleiben die den Inhaltsbereich
+ umschließenden Elemente sichtbar.
+ </p>
+ <p>
+ Ein Klick auf das Hamburger-Piktogramm oben links bzw. dessen
+ Antippen blendet ein Menü ein von dem aus weitere Funktionen
+ ausgelöst werden können.
+ </p>
+ </div>
+ </div>
</div>
<!-- oestliche Seitenleiste -->
- <div class="ost">
- östliche Seitenleiste
+ <div class="ost ost-open">
+ östliche Seitenleiste
</div>
</div>
<!-- Fusszeile -->
- <div class="sued">
+ <div class="sued sued-open">
Fußzeile
</div>
<!-- Skripte -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script src="jslib/app-menu/app-menu.js"></script>
+ <script src="jslib/vorlagen.js"></script>
<script src="app.js"></script>
<script>
var app;
diff --git a/jslib/vorlagen.js b/jslib/vorlagen.js
new file mode 100644
index 0000000..af34d22
--- /dev/null
+++ b/jslib/vorlagen.js
@@ -0,0 +1,55 @@
+
+
+function Vorlagen() {
+ var self = this;
+ this.cache = {}; // mustache templates
+
+ /*
+ Das HTML erzeugen, das entsteht, wenn eine Vorlage mit Inhalt
+ gefüllt wird
+
+ Das Füllen erfolgt asynchron, d.h. der Programmlauf geht nach dem
+ Aufruf weiter ohne auf das Laden und Füllen der Vorlage zu warten.
+ Das fertige HTML wird der Callback-Funktion übergeben
+ sobald die Vorlage geladen und gefüllt ist, unabhängig davon, wo der
+ Programmlauf zu diesem Zeitpunkt mittlerweile ist.
+
+ vurl - URL zur Vorlagendatei
+ inhalt - die JSON-Struktur, deren Inhalt in die
+ Vorlage gefüllt werden soll
+ cb - Callback-Funktion, die gerufen wird, wenn die Vorlage gefüllt ist.
+ Dieser Callback-Funktion wird das fertige HTML übergeben
+ */
+ this.html_erzeugen = function(vurl, inhalt, cb) {
+ var vorlage = self.cache[vurl];
+ if(vorlage === undefined) {
+ self.vorlage_laden_und_fuellen(vurl, inhalt, cb);
+ } else {
+ self.vorlage_fuellen(vurl, inhalt, cb);
+ }
+ };
+
+ this.vorlage_fuellen = function(vurl, inhalt, cb) {
+ cb(Mustache.render(self.cache[vurl], inhalt));
+ };
+
+ /*
+ Eine Vorlage vom Server in den lokalen Speicher laden
+ vurl - der URL unter dem die Vorlage zu finden ist
+ inhalt - die JSON-Struktur, deren Inhalt in die
+ Vorlage gefüllt werden soll
+ cb - callback: Diese Funktion wird gerufen, wenn die Vorlage mit dem
+ Inhalt gefüllt ist
+ */
+ this.vorlage_laden_und_fuellen = function(vurl, inhalt, cb) {
+ $.ajax({
+ url: vurl,
+ type: "GET",
+ dataType : "text"
+ }).done(function( vorlage ) {
+ self.cache[vurl] = vorlage;
+ self.vorlage_fuellen(vurl, inhalt, cb);
+ });
+ };
+
+}
--
Gitblit v1.9.3