✨ Give more control on output

Close #9
la-haute-societe · Jan 27, 2021 · 4b7f5e2 · 4b7f5e2
1 parent 19113c7
commit 4b7f5e2
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 102 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 
+## [2.4.0] - 2021-01-26
+### Added
+- Add `craft.tarteaucitron.javascriptImportTag()` to output the tarteaucitron.js
+  import tag. See [#9][ticket-9].
+- Add `craft.tarteaucitron.javascriptConfigTag()` to output the tarteaucitron.js
+  configuration inline JS tag. See [#9][ticket-9].
+- Add `craft.tarteaucitron.stylesheetTag()` to output the tarteaucitron.js
+  stylesheet import tag. See [#9][ticket-9].
+
+### Changed
+- `craft.tarteaucitron.initScript()` now renders tarteaucitron.js import tag &
+  tarteaucitron.js configuration inline JS tag in place.
+  It used to render at the end of the `<body>` tag, no matter where it was
+  called in the source.
+
+### Fixed
+- Honor the `useExternalCss` setting. See [#9][ticket-9].
+
+
 ## [2.3.1] - 2020-12-01
 ### Fixed
 - Fix reference error when reCaptcha service is enabled
@@ -67,7 +86,8 @@ Updated tarteaucitron.js (we're currently using the
 ## [2.0.0] - 2020-31-01
 First public release
 
-[Unreleased]: https://github.com/la-haute-societe/craft-tarteaucitron/compare/2.3.1...HEAD
+[Unreleased]: https://github.com/la-haute-societe/craft-tarteaucitron/compare/2.4.0...HEAD
+[2.4.0]: https://github.com/la-haute-societe/craft-tarteaucitron/compare/2.3.1...2.4.0
 [2.3.1]: https://github.com/la-haute-societe/craft-tarteaucitron/compare/2.3.0...2.3.1
 [2.3.0]: https://github.com/la-haute-societe/craft-tarteaucitron/compare/2.2.0...2.3.0
 [2.2.0]: https://github.com/la-haute-societe/craft-tarteaucitron/compare/2.1.1...2.2.0
@@ -77,3 +97,4 @@ First public release
 [2.0.1]: https://github.com/la-haute-societe/craft-tarteaucitron/compare/2.0.0...2.0.1
 [2.0.0]: https://github.com/la-haute-societe/craft-tarteaucitron/releases/tag/2.0.0
 [nstCactus/tarteaucitron.js]: https://github.com/nstCactus/tarteaucitron.js
+[ticket-9]: https://github.com/la-haute-societe/craft-tarteaucitron/issues/9
diff --git a/README.md b/README.md
@@ -100,7 +100,7 @@ Example :
 
 If for some reason, you'd rather not use the `craft.tarteaucitron.xxx()` methods
 to instantiate your services, you can always add the tarteaucitron.js
-placeceholder element by yourself.
+placeholder element by yourself.
 
 These two examples will have the exact same result (you still need to enable the
 Vimeo service in the plugin settings):
@@ -127,9 +127,9 @@ Vimeo service in the plugin settings):
 
 ### Checking if a service is enabled
 
-You may need to check whether or not a service is enabled (as in "enabled in the
-plugin settings", this has nothing to do with whether or not the user has given
-its consent) :
+You may need to check whether a service is enabled (as in "enabled in the
+plugin settings", this has nothing to do with whether the user has given
+its consent):
 
 ````twig
 {% if not craft.tarteaucitron.isTwitterEnabled() %}
@@ -173,8 +173,26 @@ tarteaucitron.services.vimeo[tarteaucitron.state.vimeo ? 'js' : 'fallback']();
 
 ### JS - Reacting to the user giving its consent to a service
 
-Unfortunately, there is no clean way to do this at the moment but a PR will be
-submitted to try and improve tarteaucitron.js.
+Unfortunately, there is no clean way to do this at the moment, but a PR will be
+submitted to try to improve tarteaucitron.js.
+
+### Customizing JS output in the page
+
+Instead of using `{{ craft.tarteaucitron.initScript() }}` to output both the
+tarteaucitron.js tag and the configuation JS tag, use:
+  - `{{ craft.tarteaucitron.javascriptImportTag() }}` to output just the
+    tarteaucitron.js import tag
+  - `{{ craft.tarteaucitron.javascriptConfigTag() }}` to output just the
+    tarteaucitron.js configuration inline JS tag
+
+### Customizing CSS output
+
+By default, tarteaucitron.js imports the _css/tarteaucitron.css_ stylesheet
+located next to the _tarteaucitron.js_ file. You can prevent this using the
+`useCustomCss` setting of the plugin.
+You can provide your own stylesheet or use
+`{{ craft.tarteaucitron.stylesheetTag() }}` to output the tarteaucitron.js
+stylesheet import tag
 
 
 ## Contribute

diff --git a/composer.json b/composer.json
@@ -2,7 +2,7 @@
   "name": "la-haute-societe/craft-tarteaucitron",
   "description": "Manage your sites' cookies with this tarteaucitron.js Craft CMS 3 integration",
   "type": "craft-plugin",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "keywords": [
     "craft",
     "cms",
@@ -29,11 +29,6 @@
       "lhs\\tarteaucitron\\": "src/"
     }
   },
-  "config": {
-    "platform": {
-      "php": "7.1"
-    }
-  },
   "support": {
     "email": "[email protected]",
     "issues": "https://github.com/la-haute-societe/craft-tarteaucitron/issues"

diff --git a/src/bundles/FrontAsset.php b/src/bundles/FrontAsset.php
@@ -10,21 +10,13 @@
  */
 class FrontAsset extends AssetBundle
 {
+    /**
+     * Just publish the asset bundle but do not auto inject assets in the page
+     */
     public function init()
     {
-        // define the path that your publishable resources live
         $this->sourcePath = '@lhs/tarteaucitron/resources/tarteaucitron';
 
-        // define the relative path to CSS/JS files that should be registered with the page
-        // when this asset bundle is registered
-        $this->js = [
-            'tarteaucitron.js',
-        ];
-
-        $this->css = [
-            'css/tarteaucitron.css'
-        ];
-
         parent::init();
     }
 }
diff --git a/src/services/TarteaucitronService.php b/src/services/TarteaucitronService.php
@@ -30,24 +30,55 @@ class TarteaucitronService extends Component
      * Call tarteaucitron init script
      *
      * @return Markup
-     *
-     * @throws \Twig\Error\LoaderError
-     * @throws \Twig\Error\RuntimeError
-     * @throws \Twig\Error\SyntaxError
-     * @throws \yii\base\Exception
-     * @throws \yii\base\InvalidConfigException
      */
     public function renderInitScript(): Markup
     {
-        Craft::$app->getView()->registerAssetBundle(FrontAsset::class);
+        return new Markup($this->renderJavascriptImportTag() . $this->renderJavascriptConfigTag(), 'UTF-8');
+    }
+
+    /**
+     * Render tarteaucitron main JS tag
+     * @param array $options See [[HTML::tag()]] for details on how options are being used.
+     * @return Markup
+     * @throws \yii\base\InvalidConfigException
+     */
+    public function renderJavascriptImportTag(array $options = []): Markup
+    {
+        $assetBundle = Craft::$app->getView()->registerAssetBundle(FrontAsset::class);
+        $options = array_merge(['src' => $assetBundle->baseUrl . '/tarteaucitron.js' ], $options);
 
+        return new Markup(Html::tag('script', null, $options), 'UTF-8');
+    }
+
+    /**
+     * Render tarteaucitron config JS tag
+     */
+    public function renderJavascriptConfigTag(): Markup
+    {
         /** @noinspection NullPointerExceptionInspection */
         $settings = Tarteaucitron::getInstance()->getSettings();
         $html = $this->getInitHtml([ 'settings' => $settings ]);
 
         return new Markup($html, 'UTF-8');
     }
 
+    /**
+     * Render tarteaucitron stylesheet tag
+     * @param array $options See [[HTML::tag()]] for details on how options are being used.
+     * @return Markup
+     * @throws \yii\base\InvalidConfigException
+     */
+    public function renderStylesheetTag(array $options = []): Markup
+    {
+        $assetBundle = Craft::$app->getView()->registerAssetBundle(FrontAsset::class);
+        $options = array_merge([
+            'rel' => 'stylesheet',
+            'href' => $assetBundle->baseUrl . '/css/tarteaucitron.css',
+        ], $options);
+
+        return new Markup(Html::tag('link', null, $options), 'UTF-8');
+    }
+
     /**
      *
      * @param array $vars

diff --git a/src/templates/init.twig b/src/templates/init.twig
@@ -4,7 +4,7 @@
     {{ settings.customCss }}
 {% endcss %}
 
-{% js %}
+<script>
     {% if settings.forceLanguage -%}
         var tarteaucitronForceLanguage = {{ craft.app.language|json_encode|raw }};
     {% endif -%}
@@ -48,31 +48,23 @@
 
         mandatory: {{ settings.mandatory|json_encode|raw }},
     });
-{% endjs %}
 
-{# Google Tag Manager #}
-{% if settings.isGoogleTagManagerEnabled and settings.googleTagManagerId is not empty %}
-    {% js %}
+    {# Google Tag Manager #}
+    {% if settings.isGoogleTagManagerEnabled and settings.googleTagManagerId is not empty %}
         tarteaucitron.user.googletagmanagerId = '{{ settings.googleTagManagerId }}';
         (tarteaucitron.job = tarteaucitron.job || []).push('googletagmanager');
-    {% endjs %}
-{% endif %}
+    {% endif %}
 
-{# reCAPTCHA #}
-{% if settings.isReCAPTCHAEnabled and settings.reCAPTCHASiteKey is not empty %}
-    {% if settings.reCAPTCHAMore is not empty %}
-        {% js %}
+    {# reCAPTCHA #}
+    {% if settings.isReCAPTCHAEnabled and settings.reCAPTCHASiteKey is not empty %}
+        {% if settings.reCAPTCHAMore is not empty %}
             tarteaucitron.user.recaptchaOnLoad = function() { {{ settings.reCAPTCHAMore | raw }} };
-        {% endjs %}
-    {% endif %}
-    {% js %}
+        {% endif %}
         (tarteaucitron.job = tarteaucitron.job || []).push('recaptcha');
-    {% endjs %}
-{% endif %}
+    {% endif %}
 
-{# Google Maps #}
-{% if settings.isGoogleMapsEnabled and settings.googleMapsAPIKey is not empty %}
-    {% js %}
+    {# Google Maps #}
+    {% if settings.isGoogleMapsEnabled and settings.googleMapsAPIKey is not empty %}
         tarteaucitron.user.googlemapsKey = '{{ settings.googleMapsAPIKey }}';
         (tarteaucitron.job = tarteaucitron.job || []).push('googlemaps');
 
@@ -83,81 +75,61 @@
         {% if settings.googleMapsAPIKey %}
             tarteaucitron.user.googlemapsLibraries = '{{ settings.googleMapsLibraries | join (',') }}';
         {% endif %}
-    {% endjs %}
-{% endif %}
+    {% endif %}
 
-{# Google Analytics Universal #}
-{% if settings.isGoogleAnalyticsUniversalEnabled and settings.googleAnalyticsUniversalUa is not empty %}
-    {% js %}
+    {# Google Analytics Universal #}
+    {% if settings.isGoogleAnalyticsUniversalEnabled and settings.googleAnalyticsUniversalUa is not empty %}
         tarteaucitron.user.analyticsUa = '{{ settings.googleAnalyticsUniversalUa }}';
         tarteaucitron.user.analyticsMore = function () { {{ settings.googleAnalyticsUniversalMore | raw }} };
         (tarteaucitron.job = tarteaucitron.job || []).push('analytics');
-    {% endjs %}
-{% endif %}
+    {% endif %}
 
-{# Google AdWords Conversion #}
-{% if settings.isGoogleAdWordsConversionEnabled %}
-    {% js %}
+    {# Google AdWords Conversion #}
+    {% if settings.isGoogleAdWordsConversionEnabled %}
         (tarteaucitron.job = tarteaucitron.job || []).push('googleadwordsconversion');
-    {% endjs %}
-{% endif %}
+    {% endif %}
 
-{# Google AdWords Remarketing #}
-{% if settings.isGoogleAdWordsRemarketingEnabled and settings.googleAdWordsRemarketingId is not empty %}
-    {% js %}
+    {# Google AdWords Remarketing #}
+    {% if settings.isGoogleAdWordsRemarketingEnabled and settings.googleAdWordsRemarketingId is not empty %}
         tarteaucitron.user.adwordsremarketingId = '{{ settings.googleAdWordsRemarketingId }}';
         (tarteaucitron.job = tarteaucitron.job || []).push('googleadwordsremarketing');
-    {% endjs %}
-{% endif %}
+    {% endif %}
 
-{# Facebook Pixel #}
-{% if settings.isFacebookPixelEnabled and settings.facebookPixelId is not empty %}
-    {% js %}
+    {# Facebook Pixel #}
+    {% if settings.isFacebookPixelEnabled and settings.facebookPixelId is not empty %}
         tarteaucitron.user.facebookpixelId = '{{ settings.facebookPixelId }}';
         tarteaucitron.user.facebookpixelMore = function () { {{ settings.facebookPixelMore | raw }} };
         (tarteaucitron.job = tarteaucitron.job || []).push('facebookpixel');
-    {% endjs %}
-{% endif %}
+    {% endif %}
 
-{# FACIL'iti #}
-{% if settings.isFacilitiEnabled and settings.facilitiId is not empty %}
-    {% js %}
+    {# FACIL'iti #}
+    {% if settings.isFacilitiEnabled and settings.facilitiId is not empty %}
         tarteaucitron.user.facilitiID = '{{ settings.facilitiId }}';
         (tarteaucitron.job = tarteaucitron.job || []).push('faciliti');
-    {% endjs %}
-{% endif %}
+    {% endif %}
 
-{# Linkedin #}
-{% if settings.isLinkedInEnabled %}
-    {% js %}
+    {# Linkedin #}
+    {% if settings.isLinkedInEnabled %}
         (tarteaucitron.job = tarteaucitron.job || []).push('linkedin');
-    {% endjs %}
-{% endif %}
+    {% endif %}
 
-{# Twitter #}
-{% if settings.isTwitterEnabled %}
-    {% js %}
+    {# Twitter #}
+    {% if settings.isTwitterEnabled %}
         (tarteaucitron.job = tarteaucitron.job || []).push('twitter');
-    {% endjs %}
-{% endif %}
+    {% endif %}
 
-{# Vimeo #}
-{% if settings.isVimeoEnabled %}
-    {% js %}
+    {# Vimeo #}
+    {% if settings.isVimeoEnabled %}
         (tarteaucitron.job = tarteaucitron.job || []).push('vimeo');
-    {% endjs %}
-{% endif %}
+    {% endif %}
 
-{# Youtube #}
-{% if settings.isYoutubeEnabled %}
-    {% js %}
+    {# Youtube #}
+    {% if settings.isYoutubeEnabled %}
         (tarteaucitron.job = tarteaucitron.job || []).push('youtube');
-    {% endjs %}
-{% endif %}
+    {% endif %}
 
-{# Youtube JS API #}
-{% if settings.isYoutubeJsApiEnabled %}
-    {% js %}
+    {# Youtube JS API #}
+    {% if settings.isYoutubeJsApiEnabled %}
         (tarteaucitron.job = tarteaucitron.job || []).push('youtubeapi');
-    {% endjs %}
-{% endif %}
+    {% endif %}
+</script>
diff --git a/src/variables/TarteaucitronVariable.php b/src/variables/TarteaucitronVariable.php
@@ -19,6 +19,32 @@ public function initScript(): Markup
         return Plugin::getInstance()->tarteaucitron->renderInitScript();
     }
 
+    /**
+     * @param array $options See [[HTML::tag()]] for details on how options are being used.
+     * @return Markup
+     */
+    public function javascriptImportTag($options = []): Markup
+    {
+        return Plugin::getInstance()->tarteaucitron->renderJavascriptImportTag($options);
+    }
+
+    /**
+     * @return Markup
+     */
+    public function javascriptConfigTag(): Markup
+    {
+        return Plugin::getInstance()->tarteaucitron->renderJavascriptConfigTag();
+    }
+
+    /**
+     * @param array $options See [[HTML::tag()]] for details on how options are being used.
+     * @return Markup
+     */
+    public function stylesheetTag($options = []): Markup
+    {
+        return Plugin::getInstance()->tarteaucitron->renderStylesheetTag($options);
+    }
+
     /**
      * @param array $options
      * @return Markup