porthd/webhelp

使用 viewhelpers 构建简单的 Webcomponents，例如 icalendar

维护者

详细信息

github.com/porthd/webhelp

源代码

问题

安装: 11

依赖项: 0

建议: 0

安全性: 0

星标: 0

关注者: 1

分支: 0

开放性问题: 0

类型：typo3-cms-extension

11.0.0 2021-12-20 17:13 UTC

Requires

Replaces

  • typo3-ter/webhelp: 11.0.0

GPL-2.0-or-later b10e46869ef5b9c546048faeca4af2a1f78a27d7

  • Dr. Dieter Porth

This package is auto-updated.

Last update: 2024-09-09 15:00:49 UTC

README

最后更改

通知：该扩展目前仍处于实验阶段。Webcomponents 还不够成熟。我很乐意接受改进建议。如果您有自己的 WebComponent 代码，我很乐意将其包含在这个扩展中。邮箱：info@mobger.de

扩展的目标是什么？

它为集成者提供 viewhelpers，从而允许使用 WebComponents。Webcomponents 适用于：

  • 提供地址数据作为可下载的 VCard
  • 提供事件作为可下载的 ICalendar 文件
  • 提供联系人详细信息作为可下载的 VCard 文件
  • 容易集成弹出窗口，例如辅助测试的示例
  • ....

安装

通过下载或 composer 安装扩展。然后激活它们。TypoScript 不需要此服务。

Viewhelper

目前定义了两个 viewhelper。您可以在 Fluid 模板中使用前缀 webhelp:。

EasyIcalendar 用于 ICS 文件

<webhelp: easyIcalendar> 允许创建 ICS 文件。您可以单独传递必要的信息，作为 JSON 字符串或作为 fluid 数组/模型。

Fluid 中的示例代码


<!-- TYPO3-Fluidtemplate:-->
<!-- ==================== -->
<div>
    <webhelp:easyICalendar
            description="Meine Beschreibung2"
            location="Mein Ort2"
            organizer="IchSchauWeg"
            contact="info@mobger.de"
            summary="Test2"
            url="Irgendwo im Universum2"
            dateStart="1995-12-17T03:24:00"
            dateEnd="1995-12-17T05:24:00"
            fileName="Klaus2.ics"
    >
        Mein Event (Limits)
    </webhelp:easyICalendar>
    Mein Event (EndDate)
</div>

<!-- Output (Frontend-HTML / Firefox):-->
<!-- ==================== -->
<div>
    <easy-icalendar eventJson="{&quot;description&quot;:&quot;Meine Beschreibung2&quot;,&quot;location&quot;:&quot;Mein Ort2&quot;,&quot;summary&quot;:&quot;Test2&quot;,&quot;uid&quot;:&quot;Irgendwo im Universum2&quot;,&quot;url&quot;:&quot;Irgendwo im Universum2&quot;,&quot;dateStart&quot;:&quot;19951217T022400&quot;,&quot;dateEnd&quot;:&quot;19951217T042400&quot;,&quot;duration&quot;:&quot;&quot;,&quot;organizer&quot;:&quot;IchSchauWeg&quot;,&quot;contact&quot;:&quot;info@mobger.de&quot;,&quot;fileName&quot;:&quot;&quot;}">
        Mein Event (Limits)
    </easy-icalendar>
    Mein Event (EndDate)
</div>


<!-- TYPO3-Fluidtemplate:-->
<!-- ==================== -->
<div>
    <webhelp:easyICalendar
            description="Meine Beschreibung"
            location="Mein Ort"
            organizer="IchSchauWeg"
            contact="info@mobger.de"
            summary="Test"
            url="Irgendwo im Universum"
            dateStart="1995-12-17T03:24:00"
            dateEnd=""
            duration="PT12H"
            fileName="Klaus.ics"
    >
        Mein Event (Duration)
    </webhelp:easyICalendar>
</div>

<!-- Output (Frontend-HTML / Firefox):-->
<!-- ==================== -->
<div>
    <easy-icalendar eventJson="{&quot;description&quot;:&quot;Meine Beschreibung&quot;,&quot;location&quot;:&quot;Mein Ort&quot;,&quot;summary&quot;:&quot;Test&quot;,&quot;uid&quot;:&quot;Irgendwo im Universum&quot;,&quot;url&quot;:&quot;Irgendwo im Universum&quot;,&quot;dateStart&quot;:&quot;19951217T022400&quot;,&quot;dateEnd&quot;:&quot;&quot;,&quot;duration&quot;:&quot;PT12H&quot;,&quot;organizer&quot;:&quot;IchSchauWeg&quot;,&quot;contact&quot;:&quot;info@mobger.de&quot;,&quot;fileName&quot;:&quot;&quot;}">
        Mein Event (Duration)
    </easy-icalendar>
</div>


<!-- TYPO3-Fluidtemplate:-->
<!-- ==================== -->
<div>
    <webhelp:easyICalendar
            fluidData="{description:'Meine Beschreibung2',
                                    location:'Mein Ort2',
                                    summary:'Test2',
                                    url:'Irgendwo im Universum2',
                                    dateStart:'1995-12-17T03:24:00',
                                    dateEnd:'1995-12-17T05:24:00',
                                    duration:'',
                                    organizer:'IchSchauWeg',
                                    fileName:'Klaus2.ics',
                        contact:'info@mobger.de'}"
    >
        Mein Event (FluidData)
    </webhelp:easyICalendar>
</div>

<!-- Output (Frontend-HTML / Firefox):-->
<!-- ==================== -->
<div>
    <easy-icalendar eventJson="{&quot;description&quot;:&quot;Meine Beschreibung2&quot;,&quot;location&quot;:&quot;Mein Ort2&quot;,&quot;summary&quot;:&quot;Test2&quot;,&quot;uid&quot;:&quot;Irgendwo im Universum2&quot;,&quot;url&quot;:&quot;Irgendwo im Universum2&quot;,&quot;dateStart&quot;:&quot;19951217T022400&quot;,&quot;dateEnd&quot;:&quot;19951217T042400&quot;,&quot;duration&quot;:&quot;&quot;,&quot;organizer&quot;:&quot;IchSchauWeg&quot;,&quot;contact&quot;:&quot;info@mobger.de&quot;,&quot;fileName&quot;:&quot;&quot;}">
        Mein Event (FluidData)
    </easy-icalendar>
</div>


<!-- TYPO3-Fluidtemplate:-->
<!-- ==================== -->
<div>
    <!-- prohibit Fluid from building an array from JSON -->
    <f:alias map="{jsonOneFluid: '{\" description\":\"Meine Beschreibung2\",\"location\":\"Mein Ort2\",\"summary\":\"Test2\",',
                   jsonTwoFluid :'\"url\":\"Irgendwo im Universum2\",\"dateStart\":\"1995-12-17T03:24:00\",\"dateEnd\":\"1995-12-17T05:24:00\",\"duration\":\"\",\"organizer\":\"IchSchauWeg\",\"fileName\":\"Klaus2.ics\",\"contact\":\"info@mobger.de\"}'}">
    <webhelp:easyICalendar
            jsonData="{jsonOneFluid}{jsonTwoFluid}"
    >
        Mein Event (JsonData)
    </webhelp:easyICalendar>
    </f:alias>
</div>

<!-- Output (Frontend-HTML / Firefox):-->
<!-- ==================== -->
<div>
    <!-- prohibit Fluid from building an array from JSON -->

    <easy-icalendar eventJson="{&quot;description&quot;:&quot;Test2&quot;,&quot;location&quot;:&quot;Mein Ort2&quot;,&quot;summary&quot;:&quot;Test2&quot;,&quot;uid&quot;:&quot;Irgendwo im Universum2&quot;,&quot;url&quot;:&quot;Irgendwo im Universum2&quot;,&quot;dateStart&quot;:&quot;19951217T022400&quot;,&quot;dateEnd&quot;:&quot;19951217T042400&quot;,&quot;duration&quot;:&quot;&quot;,&quot;organizer&quot;:&quot;IchSchauWeg&quot;,&quot;contact&quot;:&quot;info@mobger.de&quot;,&quot;fileName&quot;:&quot;&quot;}">
        Mein Event (JsonData)
    </easy-icalendar>
</div>

EasyVCard 用于 ICS 文件

<webhelp: easyVCard> 允许创建 ICS 文件。您可以单独传递必要的信息，作为 JSON 字符串或作为 fluid 数组/模型。用法与上面 <webhelp: easyIcalendar> 的用法相同。

Fluid 中的示例代码

<!-- example input (TYPO3-template)-->
<!-- ===================================== -->
     <webhelp:easyVCard
                                n="Porth;Dieter;;Dr;"
                                fn="Dr. Dieter Porth"
                                adr="{first:';;Grünenstraße 23;Bremen;;28199;Germany'}"
                                adrtype="{first:'TYPE=home;LABEL=\"Grünenstraße 23\n28199 Bremen\nDeutschland\"'}"
                        email="info@mobger.de"
                        tel="{first: 'tel:049-421-51483548', second:'+49-160-99180688'}"
                        teltype="{first:'TYPE=home,voice',second:'TYPE=mobile,voice'}"
                        url="https://www.düddelei.de"
                        uid="https://www.mobger.de/"
                        role="TYPO3-Developer"
     >
         my Imprint (detailData needed)
     </webhelp:easyVCard>

<!-- example output-->
<!-- ===============================-->
    <easy-vcard eventJson="{&quot;n&quot;:&quot;Porth;Dieter;;Dr;&quot;,&quot;uid&quot;:&quot;https:\/\/www.d\u00fcddelei.de&quot;,&quot;email&quot;:&quot;info@mobger.de&quot;,&quot;fn&quot;:&quot;Dr. Dieter Porth&quot;,&quot;geo&quot;:&quot;&quot;,&quot;logo&quot;:&quot;&quot;,&quot;note&quot;:&quot;&quot;,&quot;org&quot;:&quot;private&quot;,&quot;photo&quot;:&quot;&quot;,&quot;role&quot;:&quot;TYPO3-Developer&quot;,&quot;tz&quot;:&quot;&quot;,&quot;url&quot;:&quot;https:\/\/www.d\u00fcddelei.de&quot;,&quot;adr&quot;:[&quot;;TYPE=TYPE=home;LABEL=\&quot;Gr\u00fcnenstra\u00dfe 23\\n28199 Bremen\\nDeutschland\&quot;:;;Gr\u00fcnenstra\u00dfe 23;Bremen;;28199;Germany&quot;],&quot;key&quot;:&quot;&quot;,&quot;keytype&quot;:&quot;&quot;,&quot;tel&quot;:[&quot;;MEDIATYPE=TYPE=mobile,voice:+49-160-99180688&quot;,&quot;;MEDIATYPE=TYPE=home,voice:tel:049-421-51483548&quot;],&quot;filename&quot;:&quot;&quot;}">
         my Imprint (detailData needed)
     </easy-vcard>

EasyTextLogo 用于基于标志的弹出窗口

<webhelp: easyTextLogo> 预期一个（HTML）文本和标志的路径。如果缺少标志，则使用默认的停止标志。

Fluid 中的示例代码

<!-- TYPO3-Fluidtemplate:-->
<!-- ==================== -->
<div>
    <webhelp:EasyTextLogo
            value="Hallo Welt, morgen sind wir schon weiter. Heute stehen wir vor dem Abgrund; die Hungerkriege haben längst begonnen, wie die Corona-Maßnahmen in den Entwicklungsländern zeigen."
            logopath="EXT:webhelp/Resources/Public/Icons/Cursor/DownloadCursor.svg"
    />
</div>

<!-- Output (Frontend-HTML / Firefox):-->
<!-- ==================== -->
<div>
    <popup-info
            value="Hallo Welt, morgen sind wir schon weiter. Heute stehen wir vor dem Abgrund; die Hungerkriege haben längst begonnen, wie die Corona-Maßnahmen in den Entwicklungsländern zeigen."
            logopath="EXT:webhelp/Resources/Public/Icons/Cursor/DownloadCursor.svg"
            my-text-json="&quot;Hallo Welt, morgen sind wir schon weiter. Heute stehen wir vor dem Abgrund; die Hungerkriege haben l\u00e4ngst begonnen, wie die Corona-Ma\u00dfnahmen in den Entwicklungsl\u00e4ndern zeigen.&quot;"
            my-logo="/typo3conf/ext/webhelp/Resources/Public/Icons/Cursor/DownloadCursor.svg">
    </popup-info>
</div>


<!-- TYPO3-Fluidtemplate:-->
<!-- &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
<div>
    <webhelp:EasyTextLogo
            value="Hallo Welt, alles ist super; dann vieler Politiker, die +über Forschung und Technik reden, oder?"/>
</div>

<!--Output (Frontend-HTML / Firefox):-->
<!-- ==================== -->
<div>
    <popup-info value="Hallo Welt, alles ist Super"
                my-ext="Hallo Welt, alles ist Super"
                my-logo="">

    </popup-info>
</div>


<!-- TYPO3-Fluidtemplate:-->
<!-- &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
<webhelp:easyTextLogo>
    <h1>Hallo Welt,</h1>
    <div>Ohne Klimaschutzmaßnahmen muss bis 2050 die Menschheitsmasse auf 4G Menschen ausgedünnt werden, weil Öl und
        Phosphate als Dünger fehlen. <br/> Ohne Klimaschutzmaßnahmen wird dank Verbot der Pfanzenschutzmitteln 2050 die
        Menschheitsmasse durch Verhungern auf 3G Menschen ausgedünnt. Öl und Phosphate als Dünger fehlen auch dann, weil
        die Rohstoffe in Elektroautos investiert wurden. <br> Heil dem Ökofaschismus!
    </div>
</webhelp:easyTextLogo>

<!-- Output (Frontend-HTML / Firefox):-->
<!-- ==================== -->
<div>
    <popup-info my-ext="&amp;lt;h1&amp;gt;Hallo Welt&amp;lt;/h1&amp;gt;&amp;lt;div&amp;gt;alles ist Super.&amp;lt;/div&amp;gt;"
                my-logo="">
    </popup-info>
</div>

开发您自己的 web components 吗？

Viewhelper

您可以编写和使用自己的 viewhelpers 和 JavaScript 代码。

JavaScript 和样式表扩展

使用扩展 webhelp 的常量编辑器，您可以在逗号分隔的列表中指定 JavaScript 和 CSS 文件的路径，这样 JavaScript 和样式表将通过中间件上传。

待办事项