Weitere Beispielfunktionen hinzugefuegt

ulrich

2018-03-30 34aa39872f9563a0a872ff1b4eed637ab0410fd1

Weitere Beispielfunktionen hinzugefuegt

 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">&#10006;</span>
  </div>
*/

.close-btn {
  position: absolute;
  top: 0px;
  right: 0.4em;
  margin: 0;
  padding: 0;
  font-size: 1.3em;
  color: #b8b8b8;
}

 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);
  };


}

 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"
      }
    ]
  }

 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"
      }
    ]
  }

 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')"
      }
    ]
  }

 data/tpl/dlg-info.tpl

New file
@@ -0,0 +1,8 @@
<div class="dlg-info">
  <span class="close-btn pointer-cursor">&#10006;</span>
  <div class="dlg-behaelter">
    <div class="dlg-info-app-titel">app-vorlage</div>
    <div class="dlg-info-app-info">Eine Vorlage f&uuml;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>

 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&ouml;tigt als das Anzeigeger&auml;t bietet wird ein
          Rollbalken eingeblendet. Beim Rollen zu anfangs nicht sichtbaren
          Teilen des Inhalts bleiben die den Inhaltsbereich
          umschlie&szlig;enden Elemente sichtbar.
        </p>
        <p>
          Ein Klick auf das Hamburger-Piktogramm oben links bzw. dessen
          Antippen blendet ein Men&uuml; 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&ouml;tigt als das Anzeigeger&auml;t bietet wird ein
              Rollbalken eingeblendet. Beim Rollen zu anfangs nicht sichtbaren
              Teilen des Inhalts bleiben die den Inhaltsbereich
              umschlie&szlig;enden Elemente sichtbar.
            </p>
            <p>
              Ein Klick auf das Hamburger-Piktogramm oben links bzw. dessen
              Antippen blendet ein Men&uuml; ein von dem aus weitere Funktionen
              ausgel&ouml;st werden k&ouml;nnen.
            </p>
          </div>
        </div>
      </div>
      <!-- oestliche Seitenleiste -->
      <div class="ost">
        östliche Seitenleiste
      <div class="ost ost-open">
        &ouml;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;

 jslib/vorlagen.js

New file
@@ -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);
    });
  };

}