Support
HelpHelp Center
  1. Dokumentation
  2. Implementierung
  3. Content-Elemente
  4. Content-Element-Bibliothek

    Wetter  

    bh_weather
    Darstellung des Wetters inkl. Schnittstellenanbindung

    HTML-Aufbau und CSS-Klassen

    Das Wetter wird immer dann befüllt, wenn HTML mit folgendem Aufbau gefunden wird. Der umliegende Container mit der Klasse .bh-weather-day bestimmt mit seinem data-day-Attribut, welcher Tag geladen wird. Dabei entspricht die Zahl 1 Heute, 2 Morgen usw... :

    HTML
    <div class="bh-weather"> <div class="bh-weather-day" data-day="1"> <div class="bh-weather-icon"></div> </div> </div>

    mögliche Klassen: 

    • bh-weather-date-weekday - Wochentag 
    • bh-weather-date-readable - Datum
    • bh-weather-temp-min-wrapper - Minimal-Temperatur
    • bh-weather-temp-max-wrapper - Maximal-Temperatur
    • bh-weather-text - Textbeschreibung

    Weitere Infos zum Element, seine Darstellungsoptionen und die direkte Einbindung mit Hilfe von ViewHelpern findest du hier.

    HTML-Template: el-weather.html
    HTML
    {namespace bh=TYPO3\Bh\ViewHelpers} {namespace weather=TYPO3\BhWeather\ViewHelpers} <bh:tmpl.element object="{cObj}"> <weather:forecast code="{cObj.allSettings.code}" days="{cObj.allSettings.showDays}" hideText="{cObj.allSettings.hideText}" round="{cObj.allSettings.round}" pluginSettings="{swiper:cObj.allSettings.swiper}" /> </bh:tmpl.element>
    Settings-HTML: el-weather-settings.html
    HTML
    {namespace bh=TYPO3\Bh\ViewHelpers} {namespace weather=TYPO3\BhWeather\ViewHelpers} <bh:form.settingsform content="{cObj}"> <div class="bhe-tab-box"> <div class="bhe-tab-toggler-box bhe-tab-toggler-style-icon-text"> <div class="bhe-tab-toggler bhe-tab-active"> <div class="bhe-tab-toggler-icon bhe-font-form"></div> <div class="bhe-tab-toggler-text">Wetter</div> </div> <div class="bhe-tab-toggler"> <div class="bhe-tab-toggler-icon bhe-font-form"></div> <div class="bhe-tab-toggler-text">Settings</div> </div> <div class="bhe-tab-toggler"> <div class="bhe-tab-toggler-icon bhe-font-fader"></div> <div class="bhe-tab-toggler-text">Swiper</div> </div> </div> <div class="bhe-tab-content-box"> <div class="bhe-tab-content bhe-tab-content-padding bhe-tab-active"> <weather:locationAutocomplete code="{cObj.allSettings.code}" city="{cObj.allSettings.city}" /> <div class="bhe-formsettings-option"> <label>Icons</label> <f:form.select name="style[color]" value="{cObj.allSettings.style.color}" options="{cObj.allSettings.styleOptions.color}" /> </div> <div class="bhe-formsettings-option"> <label>Textfarbe</label> <f:form.select name="style[fontcolor]" value="{cObj.allSettings.style.fontcolor}" options="{cObj.allSettings.styleOptions.fontcolor}" /> </div> <div class="bhe-formsettings-option"> <label>Anzahl der Tage</label> <f:form.select name="showDays" value="{cObj.allSettings.showDays}" options="{cObj.allSettings.days}" /> </div> <div class="bhe-formsettings-option"> <label>Text ausblenden</label> <f:form.checkbox name="hideText" value="1" checked="{cObj.allSettings.hideText}" /> </div> <div class="bhe-formsettings-option"> <label>Werte runden</label> <f:form.checkbox name="round" value="1" checked="{cObj.allSettings.round}" /> </div> </div> <div class="bhe-tab-content bhe-tab-content-padding"> <div class="bhe-formsettings-option"> <label>Darstellung</label> <f:form.select name="style[options]" value="{cObj.allSettings.style.options}" options="{cObj.allSettings.styleOptions.classes}" /> </div> <bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" /> </div> <div class="bhe-tab-content bhe-tab-content-padding"> <div class="bhe-formsettings-option"> <label>Swiper verwenden</label> <f:form.checkbox name="swiper[enable]" value="1" checked="{cObj.allSettings.swiper.enable}" /> </div> <div class="bhe-formsettings-option"> <label>Effekt</label> <f:form.select name="swiper[effect]" value="{cObj.allSettings.swiper.effect}" options="{slide:'Slide',fade:'Fade'}" /> </div> <div class="bhe-formsettings-option"> <label>Navigation - Pfeile</label> <f:form.checkbox name="swiper[navigation]" value="1" checked="{cObj.allSettings.swiper.navigation}" /> </div> <div class="bhe-formsettings-option"> <label>Navigation - Punkte</label> <f:form.checkbox name="swiper[pagination]" value="1" checked="{cObj.allSettings.swiper.pagination}" /> </div> <div class="bhe-formsettings-option"> <label data-tooltip="wenn leer wird keine Mindesthöhe verwendet" data-tooltip-view="extended">Mindesthöhe (px,%,vh)</label> <f:form.textfield name="swiper[min-height]" value="{cObj.allSettings.swiper.min-height}" /> </div> <div class="bhe-formsettings-option"> <label data-tooltip="wenn leer wird als Default-Wert 0px verwendet" data-tooltip-view="extended">Platz zwischen den Spalten (px)</label> <f:form.textfield name="swiper[spaceBetween]" value="{cObj.allSettings.swiper.spaceBetween}" /> </div> <div class="bhe-formsettings-option"> <label data-tooltip="<b>- '2' ganzzahlige Werte</b><br/>gibt die Spaltenanzahl an<br/><b>- '300px' Werte mit dem Zusatz 'px'</b><br/> gibt die Mindestbreite an (automatische Berechnung)<br/><b>- 'auto'</b><br/> Breite wird über CSS definiert (für Profis)" data-tooltip-view="extended">Spalten Einstellung</label> <f:form.textfield name="swiper[slideMinWidth]" value="{cObj.allSettings.swiper.slideMinWidth}" /> </div> <div class="bhe-formsettings-option"> <label>Spalten zentriert</label> <f:form.checkbox name="swiper[centeredSlides]" value="1" checked="{cObj.allSettings.swiper.centeredSlides}" /> </div> <div class="bhe-formsettings-option"> <label>Loop</label> <f:form.checkbox name="swiper[loop]" value="1" checked="{cObj.allSettings.swiper.loop}" /> </div> <div class="bhe-formsettings-option"> <label>Autoplay</label> <f:form.checkbox name="swiper[autoplay]" value="1" checked="{cObj.allSettings.swiper.autoplay}" /> </div> <div class="bhe-formsettings-option"> <label data-tooltip-view="extended">Autoplay Dauer in Sekunden</label> <input type="number" step="0.01" name="tx_bh_page[data][content][settings][swiper][autoplayOptions][delay]" min="0" value="{cObj.allSettings.swiper.autoplayOptions.delay}" /> </div> </div> </div> </div> <f:form.submit value="Speichern" /> </bh:form.settingsform>