Nachrichtendialog in Template überführt

ulrich

2018-01-04 9e336ac4568cb7f319fdf6cf7cb2d3851a9346db

Nachrichtendialog in Template überführt

 app.js

@@ -1,6 +1,7 @@
var TPL_HOME = 'home';
var TPL_PREFS = 'prefs';
var TPL_SENDER = 'sender';
var TPL_DLG_MSG = 'dlg-msg';
var templateCache = {}; // mustache templates 'home', 'prefs', 'sender'
var prefsRendered = false;

@@ -8,6 +9,7 @@
  $('.dialog').hide();
  $('.ost').hide();
  app_menu_init("menu/", "hauptmenue.json", "../jslib/app-menu/app-menu.tpl", ".west");
  app_get_template('tpl/dlg-msg.tpl', TPL_DLG_MSG);
  app_get_template('tpl/sender.tpl', TPL_SENDER);
  //app_get_template('tpl/prefs.tpl', 'prefs');
  $('.sued').text('Bereit.');
@@ -17,11 +19,7 @@
}

function app_nachricht_test() {
  $(".close-btn").on('click', function() {
    $('.close-btn').attr('onclick','').unbind('click');
    $('.dialog').slideUp(300);
  });
  $('.dialog').slideDown(300);
  app_get_nachricht('api/msg-test.json');
}

/* --- Ajax-Aufrufe --- */
@@ -36,6 +34,21 @@
  });
}

function app_get_nachricht(addr) {
  $.ajax({
    url: addr,
    type: "GET",
    dataType : "json"
  }).done(function( msg ) {
    $(".dialog").html(Mustache.render(templateCache[TPL_DLG_MSG], msg));
    $(".close-btn").on('click', function() {
      $('.close-btn').attr('onclick','').unbind('click');
      $('.dialog').slideUp(300);
    });
    $('.dialog').slideDown(300);
  });
}

/*
  Ein Template vom Server in den Cache laden
  template_url - home.tpl, prefs.tpl, sender.tpl

 data/msg-test.json

New file
@@ -0,0 +1,4 @@
{
  "typ": "nachricht",
  "text": "Hier kann eine Mitteilung stehen."
}

 data/sender.json

 index.html

@@ -25,16 +25,8 @@
      <div class="west"></div>
      <!-- zentraler Bereich -->
      <div class="zentrum-behaelter">

        <!-- Einblendbereich -->

        <div class="dialog">
          <div class="nachricht">
            <span class="close-btn pointer-cursor">&#10006;</span>
            Hier kann eine Mitteilung stehen.
          </div>
        </div>

        <div class="dialog"></div>
        <!-- zentraler Inhaltsbereich -->
        <div class="zentrum">
          <div id="prefs"></div>
@@ -57,7 +49,6 @@
    <script src="../jslib/mustache/mustache.min.js"></script>
    <script src="../jslib/app-menu/app-menu.js"></script>
    <script src="app.js"></script>

    <script type="text/javascript" charset="utf-8">
      $(document).ready(function() {
        app_init();

 tpl/dlg-msg.tpl

New file
@@ -0,0 +1,4 @@
<div class="{{typ}}">
  <span class="close-btn pointer-cursor">&#10006;</span>
  {{text}}
</div>