ot_typo3/ot_templating/Resources/Private/Partials/Modern/Assets.html

{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<f:comment><!--
Assets included with the VHS viewhelpers

/!\ Warning: assets'names shall be uniques, even among styles and scripts viewhelpers!
--></f:comment>

<v:variable.set name="assets_dir" value="EXT:ot_templating/Resources/Public/assets/Modern" />
<v:variable.set name="force_standalone" value="1" />

<f:comment><!-- Fonts assets --></f:comment>

<v:asset.style name="montserrat-font"
               path="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,500,500i,600,700,800,900|Poppins:200,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900"
               external="1"
               standalone="{force_standalone}" />

<v:asset.style name="dosis-font"
               path="https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700,800"
               external="1"
               standalone="{force_standalone}"/>

<style>
    @font-face {
    font-family: "fontawesome";
    src: url("/typo3conf/ext/ot_templating/Resources/Public/assets/Modern/fonts/fontawesome-webfont.ttf") format("truetype");
    }
    @font-face {
    font-family: "themify";
    src: url("/typo3conf/ext/ot_templating/Resources/Public/assets/Modern/fonts/themify.ttf") format("truetype");
    }
    @font-face {
    font-family: "slick";
    src: url("/typo3conf/ext/ot_templating/Resources/Public/assets/Modern/fonts/slick.ttf") format("truetype");
    }
    @font-face {
    font-family: "revicons";
    src: url("/typo3conf/ext/ot_templating/Resources/Public/assets/Modern/fonts/revicons.ttf") format("truetype");
    }
</style>



<f:comment><!-- Style assets --></f:comment>

<f:comment><!-- includes all plugins ; can be removed if none of those plugins are used --></f:comment>
<v:asset.style name="plugins-css"
               path="{assets_dir}/style/plugins-css.css"
               standalone="{force_standalone}"/>

<f:comment><!-- includes revolution stylesheets --></f:comment>
<v:asset.style name="revolution-settings"
               path="{assets_dir}/style/revolution/settings.css"
               standalone="{force_standalone}"/>

<f:comment><!-- includes all typography stylesheets --></f:comment>
<v:asset.style name="typography"
               path="{assets_dir}/style/typography.css"
               standalone="{force_standalone}"/>

<v:asset.style name="datetimepicker-css"
               path="{assets_dir}/style/plugins/bootstrap-datetimepicker.min.css"
               standalone="{force_standalone}"/>

<v:asset.style name="slick-css"
               path="{assets_dir}/style/plugins/slick.css"
               standalone="{force_standalone}"/>

<v:asset.style name="slick-theme-css"
               path="{assets_dir}/style/plugins/slick-theme.css"
               standalone="{force_standalone}"/>

<v:asset.style name="leaflet-css"
               path="{assets_dir}/style/plugins/leaflet.css"
               standalone="{force_standalone}"
               rewrite="0"/>

<f:comment><!-- main stylesheet of the template --></f:comment>
<v:asset.style name="style-css"
               path="{assets_dir}/style/style.css"
               standalone="1"
               rewrite="0"/>

<f:comment><!-- responsive stylesheet of the template (mediaqueries) --></f:comment>
<v:asset.style name="responsive-css"
               path="{assets_dir}/style/responsive.css"
               standalone="{force_standalone}"/>

<v:asset.style name="custom-css"
               path="{assets_dir}/style/custom.css"
               standalone="{force_standalone}"/>


<f:comment><!-- Chosen theme --></f:comment>
<v:variable.set name="themeColor" value ="{ot:template.getPreference(key: 'themeColor')}"/>

<f:if condition="{themeColor}=='light-blue'">
    <f:then>
        <v:asset.style name="theme"
                       path="{assets_dir}/style/skins/skin-blue.css"
                       standalone="1"/>
    </f:then>
    <f:else if="{themeColor}=='blue'">
        <v:asset.style name="theme"
                       path="{assets_dir}/style/skins/skin-steelblue.css"
                       standalone="1"/>
    </f:else>
    <f:else if="{themeColor}=='green'">
        <v:asset.style name="theme"
                       path="{assets_dir}/style/skins/skin-green.css"
                       standalone="1"/>
    </f:else>
    <f:else if="{themeColor}=='orange'">
        <v:asset.style name="theme"
                       path="{assets_dir}/style/skins/skin-orange.css"
                       standalone="1"/>
    </f:else>
    <f:else if="{themeColor}=='grey'">
        <v:asset.style name="theme"
                       path="{assets_dir}/style/skins/skin-grey.css"
                       standalone="1"/>
    </f:else>
    <f:else if="{themeColor}=='red'">
        <v:asset.style name="theme"
                       path="{assets_dir}/style/skins/skin-red.css"
                       standalone="1"/>
    </f:else>
    <f:else if="{themeColor}=='light-red'">
        <v:asset.style name="theme"
                       path="{assets_dir}/style/skins/skin-red-light.css"
                       standalone="1"/>
    </f:else>
    <f:else if="{themeColor}=='purple'">
        <v:asset.style name="theme"
                       path="{assets_dir}/style/skins/skin-purple.css"
                       standalone="1"/>
    </f:else>
</f:if>


<f:comment><!-- Script assets --></f:comment>

<f:comment><!-- Defines the path of all plugin folders to allow dynamic loading --></f:comment>
<script>
    var plugin_path = '/typo3conf/ext/ot_templating/Resources/Public/assets/Modern/script/';
</script>

<v:asset.script name="jquery"
                path="{assets_dir}/script/jquery-3.3.1.min.js"
                standalone="{force_standalone}"
                defer="1"/>

<f:comment><!-- includes all plugins ; can be removed if none of those plugins are used --></f:comment>
<v:asset.script name="plugins-jquery"
                path="{assets_dir}/script/plugins-jquery.js"
                standalone="{force_standalone}"
                dependencies="jquery"
                defer="1" />

<v:asset.script name="recaptcha"
                path="https://www.google.com/recaptcha/api.js"
                external="1"
                standalone="{force_standalone}"
                dependencies="jquery"
                defer="1"/>

<v:asset.script name="jquery-tools"
                path="{assets_dir}/script/revolution/jquery.themepunch.tools.min.js"
                standalone="{force_standalone}"
                defer="1"/>

<v:asset.script name="jquery-revolution"
                path="{assets_dir}/script/revolution/jquery.themepunch.revolution.min.js"
                standalone="{force_standalone}"
                dependencies="jquery"
                defer="1"/>

<v:asset.script name="revolution-actions"
                path="{assets_dir}/script/revolution/extensions/revolution.extension.actions.min.js"
                standalone="{force_standalone}"
                dependencies="jquery"
                defer="1"/>

<v:asset.script name="revolution-carousel"
                path="{assets_dir}/script/revolution/extensions/revolution.extension.carousel.min.js"
                standalone="{force_standalone}"
                dependencies="jquery"
                defer="1"/>

<v:asset.script name="revolution-kenburn"
                path="{assets_dir}/script/revolution/extensions/revolution.extension.kenburn.min.js"
                standalone="{force_standalone}"
                dependencies="jquery"
                defer="1"/>

<v:asset.script name="revolution-layeranimation"
                path="{assets_dir}/script/revolution/extensions/revolution.extension.layeranimation.min.js"
                standalone="{force_standalone}"
                dependencies="jquery"
                defer="1"/>

<v:asset.script name="revolution-parallax"
                path="{assets_dir}/script/revolution/extensions/revolution.extension.parallax.min.js"
                standalone="{force_standalone}"
                dependencies="jquery"
                defer="1"/>

<v:asset.script name="revolution-navigation"
                path="{assets_dir}/script/revolution/extensions/revolution.extension.navigation.min.js"
                standalone="{force_standalone}"
                defer="1"/>

<v:asset.script name="revolution-slideanims"
                path="{assets_dir}/script/revolution/extensions/revolution.extension.slideanims.min.js"
                standalone="{force_standalone}"
                dependencies="jquery"
                defer="1"/>

<v:asset.script name="revolution-navigation"
                path="{assets_dir}/script/revolution/extensions/revolution.extension.navigation.min.js"
                standalone="{force_standalone}"
                dependencies="jquery"
                defer="1"/>

<v:asset.script name="revolution-video"
                path="{assets_dir}/script/revolution/extensions/revolution.extension.video.min.js"
                standalone="{force_standalone}"
                dependencies="jquery"
                defer="1"/>

<v:asset.script name="revolution-custom"
                path="{assets_dir}/script/revolution/revolution-custom.js"
                standalone="{force_standalone}"
                dependencies="jquery"
                defer="1"/>

<v:asset.script name="moment-js"
                path="{assets_dir}/script/bootstrap-datetimepicker/moment-datepicker.js"
                standalone="{force_standalone}"
                dependencies="jquery"
                defer="1"/>

<v:asset.script name="datetimepicker-js"
                path="{assets_dir}/script/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"
                standalone="{force_standalone}"
                dependencies="jquery,moment-js"
                defer="1"/>

<v:asset.script name="slick-js"
                path="{assets_dir}/script/slick/slick.min.js"
                standalone="{force_standalone}"
                dependencies="jquery"
                defer="1"/>

<v:asset.script name="leaflet-js"
                path="{assets_dir}/script/leaflet/leaflet.js"
                standalone="{force_standalone}"
                dependencies="jquery"
                defer="1"/>

<v:asset.script name="magnific-popup"
                path="{assets_dir}/script/magnific-popup/jquery.magnific-popup.min.js"
                standalone="{force_standalone}"
                dependencies="jquery"
                defer="1"/>

<v:asset.script name="custom-js"
                path="{assets_dir}/script/custom.js"
                standalone="{force_standalone}"
                dependencies="jquery"
                defer="1"/>

<v:asset.script name="custom-ot-js"
                path="{assets_dir}/script/custom-ot.js"
                standalone="{force_standalone}"
                dependencies="jquery"
                defer="1"/>