Senderübersicht wird jetzt dynamisch aus einer JSON-Beschreibung gelesen.
3 files modified
2 files added
| New file |
| | |
|---|
| | | { |
|---|
| | | "senderliste": { |
|---|
| | | "titel": "Senderliste", |
|---|
| | | "inhalt": [ |
|---|
| | | { |
|---|
| | | "sendername": "hr info", |
|---|
| | | "senderurl": "http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3", |
|---|
| | | "senderlogo": "../bilder/hr-info.png" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "sendername": "radiobob", |
|---|
| | | "senderurl": "http://bob.hoerradar.de/radiobob-live-mp3-hq", |
|---|
| | | "senderlogo": "../bilder/radio-bob-logo-80.png" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "sendername": "hr3", |
|---|
| | | "senderurl": "http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3", |
|---|
| | | "senderlogo": "../bilder/hr3.png" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "sendername": "FFH", |
|---|
| | | "senderurl": "http://mp3.ffh.de/radioffh/hqlivestream.mp3", |
|---|
| | | "senderlogo": "../bilder/ffh.svg" |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* Sender */ |
|---|
| | | |
|---|
| | | .sender-behaelter { |
|---|
| | | display: flex; |
|---|
| | | flex-flow: column; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sender { |
|---|
| | | display: flex; |
|---|
| | | flex-flow: row; |
|---|
| | | padding: 0.4em; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | background-color: #eaeaea; |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sender-kachel { |
|---|
| | | display: flex; |
|---|
| | | flex-flow: column; |
|---|
| | | align-items: center; |
|---|
| | | margin: 0.4em; |
|---|
| | | padding: 0.4em; |
|---|
| | | background-color: white; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sender-name { |
|---|
| | | font-family: RobotoCondensedBold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sender-bild { |
|---|
| | | width: 5em; |
|---|
| | | background-color: #ebe6e6; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* fonts */ |
|---|
| | | |
|---|
| | | @font-face { |
|---|
| | |
|---|
| | | var TPL_HOME = 'home'; |
|---|
| | | var TPL_PREFS = 'prefs'; |
|---|
| | | var templateCache = {}; // mustache templates 'home', 'prefs' |
|---|
| | | var TPL_SENDER = 'sender'; |
|---|
| | | var templateCache = {}; // mustache templates 'home', 'prefs', 'sender' |
|---|
| | | var prefsRendered = false; |
|---|
| | | |
|---|
| | | function app_init() { |
|---|
| | | $('.ost').hide(); |
|---|
| | | app_menu_init("menu/", "hauptmenue.json", "../jslib/app-menu/app-menu.tpl", ".west"); |
|---|
| | | //app_get_template('tpl/home.tpl', 'home'); |
|---|
| | | app_get_template('tpl/sender.tpl', TPL_SENDER); |
|---|
| | | //app_get_template('tpl/prefs.tpl', 'prefs'); |
|---|
| | | $('.sued').text('Bereit.'); |
|---|
| | | /* |
|---|
| | | setTimeout(function() { |
|---|
| | | app_seitenwechsel('home', 'vor'); |
|---|
| | | $("#sender").html(Mustache.render(templateCache[TPL_SENDER], '')); |
|---|
| | | }, 200); |
|---|
| | | */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* --- Ajax-Aufrufe --- */ |
|---|
| | | |
|---|
| | | /* |
|---|
| | | Ein Template vom Server in den Cache laden |
|---|
| | | template_url - home.tpl, prefs.tpl, sender.tpl |
|---|
| | | tname - 'home', 'prefs', 'sender' |
|---|
| | | */ |
|---|
| | | function app_get_template(template_url, tname) { |
|---|
| | | $.ajax({ |
|---|
| | | url: template_url, |
|---|
| | | type: "GET", |
|---|
| | | dataType : "text" |
|---|
| | | }).done(function( template ) { |
|---|
| | | templateCache[tname] = template; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | |
|---|
| | | <body> |
|---|
| | | <!-- Kopfzeile --> |
|---|
| | | <div class="nord"> |
|---|
| | | <a id="nav-toggle" href="#"><span></span></a> <span id="app-titel">Home</span> |
|---|
| | | <div id="nav-menu"> |
|---|
| | | <a id="nav-toggle" href="#"><span></span></a> |
|---|
| | | </div> |
|---|
| | | <div class="app-titel"> |
|---|
| | | <span id="app-titel">Home</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- Inhalt --> |
|---|
| | | <div class="inhalt"> |
|---|
| | | <!-- westliche Seitenleiste --> |
|---|
| | | <div class="west"></div> |
|---|
| | |
|---|
| | | <div class="zentrum"> |
|---|
| | | <div id="prefs"></div> |
|---|
| | | <div id="home"></div> |
|---|
| | | </div> |
|---|
| | | <div class="cond"> |
|---|
| | | Dieser Teil (Klasse cond für conditional) erscheint nur, wenn das |
|---|
| | | Anzeigegerät rechts genügend Platz hat. |
|---|
| | | <div class="sender-behaelter"> |
|---|
| | | <div id="sender" class="sender"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- oestliche Seitenleiste --> |
|---|
| | | <div class="ost"> |
|---|
| New file |
| | |
|---|
| | | <div class="sender-kachel"> |
|---|
| | | <div class="sender-name">hr info</div> |
|---|
| | | <div class="sender-bild-behaelter"><img class="sender-bild" src="../bilder/hr-info.png"></div> |
|---|
| | | </div> |
|---|
| | | <div class="sender-kachel"> |
|---|
| | | <div class="sender-name">radiobob</div> |
|---|
| | | <div class="sender-bild-behaelter"><img class="sender-bild" src="../bilder/radio-bob-logo-80.png"></div> |
|---|
| | | </div> |
|---|
| | | <div class="sender-kachel"> |
|---|
| | | <div class="sender-name">hr3</div> |
|---|
| | | <div class="sender-bild-behaelter"><img class="sender-bild" src="../bilder/hr3.png"></div> |
|---|
| | | </div> |
|---|
| | | <div class="sender-kachel"> |
|---|
| | | <div class="sender-name">FFH</div> |
|---|
| | | <div class="sender-bild-behaelter"><img class="sender-bild" src="../bilder/ffh.svg"></div> |
|---|
| | | </div> |
|---|
