Memory  

    bh_touch
    Memory-Element für die Touch-Erweiterung
    HTML-Template: el-memory.html
    HTML
    {namespace bh=TYPO3\Bh\ViewHelpers} <bh:tmpl.element object="{cObj}"> <style> <f:for each="{cObj.allSettings.pictures}" as="picture" iteration="iteration"><bh:get.file uid="{picture}" as="file"><f:if condition="{file.isPicture}"><f:if condition="{iteration.index} == 0"><f:then>.el-memory__card-front <f:format.raw> { </f:format.raw>background-image: url({f:uri.image(src: '/uploads/tx_bh/{file.file}', minWidth: 600, maxWidth: 600) }); <f:format.raw> } </f:format.raw></f:then><f:else>.el-memory__card[type="{iteration.index}"] .el-memory__card-back <f:format.raw> { </f:format.raw>background-image: { file.file } ; background-image: url({f:uri.image(src: '/uploads/tx_bh/{file.file}', minWidth: 600, maxWidth: 600) }); <f:format.raw> } </f:format.raw></f:else></f:if></f:if></bh:get.file></f:for> </style> <div class="el-memory__container"> <section class="el-memory__score-panel"> <div style="display: none"> <ul class="el-memory__stars"> <li><i class="el-memory__star"></i></li> <li><i class="el-memory__star"></i></li> <li><i class="el-memory__star"></i></li> </ul> <span class="el-memory__moves">0</span> Züge <div class="el-memory__timer"></div> </div> </section> <div class="el-memory__restart"> <i class="bh-font-reload"></i> <div>Karten neu mischen</div> </div> <div class="el-memory__deck" id="card-deck"> <f:variable name="numberOfCards">8</f:variable> <bh:isMobile> <f:variable name="numberOfCards">6</f:variable> </bh:isMobile> <bh:for iterations="{numberOfCards}" startIndex="1"> <div class="el-memory__card" type="{i}"> <div class="el-memory__card-inner"> <div class="el-memory__card-front"></div> <div class="el-memory__card-back"></div> </div> </div> <div class="el-memory__card" type="{i}"> <div class="el-memory__card-inner"> <div class="el-memory__card-front"></div> <div class="el-memory__card-back"></div> </div> </div> </bh:for> </div> <div id="el-memory__popup" class="el-memory__overlay"> <div class="el-memory__popup-content"> <div class="el-memory__popup-title">Geschafft!</div> <div class="el-memory__popup-text"> <p><span id="finalMove"> </span> Züge</p> <p><span id="totalTime"> </span></p> <p style="display: none;">: <span id="starRating"></span></p> </div> <div class="el-memory__restart"> <i class="bh-font-reload"></i> <div>Karten neu mischen</div> </div> </div> </div> </div> </bh:tmpl.element>
    Typoscript: el-memory.typoscript
    TYPOSCRIPT
    ## el-memory plugin.tx_bh.settings.contentElements{ el-memory < abstract.bhElement el-memory { name = Memory description = Ein Element mit super Eigenschaften templateFile = el-memory.html templatePath = EXT:bh_touch/Resources/Public/Elements/el-memory/ iconFile = typo3conf/ext/bh/Resources/Public/Icons/Elemente/puzzle.svg settingsForm = EXT:bh_touch/Resources/Public/Elements/el-memory/el-memory-settings.html bheListgroup = 90 options.translate = 0 options.edit = 0 } } page.includeCSS{ el-memory = EXT:bh_touch/Resources/Public/Elements/el-memory/el-memory.css } page.includeJS.el-memory = EXT:bh_touch/Resources/Public/Elements/el-memory/el-memory.js
    Settings-HTML: el-memory-settings.html
    HTML
    {namespace bh=TYPO3\Bh\ViewHelpers} <bh:form.settingsform content="{cObj}"> <!-- Mini MediaCake --> <div class="bhe-formsettings-option bhe-form-field-type-mediacake"> <label>9 Bilder auswählen. Das erste Bild ist das Abdeckbild.</label> <f:if condition="{cObj.allSettings.pictures}"> <f:then> <bh:repository.load repository="TYPO3\Bh\Domain\Repository\FileRepository" method="findByUids" options="{cObj.allSettings.pictures}" as="pictures"> <bh:form.mediacake name="pictures" value="{pictures}" /> </bh:repository.load> </f:then> <f:else> <bh:form.mediacake name="pictures" value="{pictures}" /> </f:else> </f:if> </div> <f:if condition="{cObj.allSettings.styleOptions.classes}"> <div class="bhe-formsettings-option"> <label>Styles</label> <f:form.select multiple="true" name="style[options]" value="{cObj.allSettings.style.options}" options="{cObj.allSettings.styleOptions.classes}" /> </div> </f:if> <f:form.submit value="Speichern" /> </bh:form.settingsform>