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: '/{file.relativeFile}', 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: '/{file.relativeFile}', 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>