DEMO-147: Added RichText Custom Tags: ezyoutube, eztwitter, ezfacebook (

ezsystems#75)

app/Resources/translations/custom_tags.en.yaml

@@ -0,0 +1,26 @@
+# ezyoutube
+ezrichtext.custom_tags.ezyoutube.label: YouTube
+ezrichtext.custom_tags.ezyoutube.description: ''
+ezrichtext.custom_tags.ezyoutube.attributes.autoplay.label: Autoplay
+ezrichtext.custom_tags.ezyoutube.attributes.height.label: Height
+ezrichtext.custom_tags.ezyoutube.attributes.title.label: Title
+ezrichtext.custom_tags.ezyoutube.attributes.video_url.label: 'Video url'
+ezrichtext.custom_tags.ezyoutube.attributes.width.label: Width
+
+# eztwitter
+ezrichtext.custom_tags.eztwitter.label: Twitter
+ezrichtext.custom_tags.eztwitter.description: ''
+ezrichtext.custom_tags.eztwitter.attributes.cards.label: Cards
+ezrichtext.custom_tags.eztwitter.attributes.conversation.label: Conversation
+ezrichtext.custom_tags.eztwitter.attributes.dnt.label: DNT
+ezrichtext.custom_tags.eztwitter.attributes.lang.label: Lang
+ezrichtext.custom_tags.eztwitter.attributes.link_color.label: 'Link color'
+ezrichtext.custom_tags.eztwitter.attributes.theme.label: Theme
+ezrichtext.custom_tags.eztwitter.attributes.tweet_url.label: 'Tweet url'
+ezrichtext.custom_tags.eztwitter.attributes.width.label: Width
+
+# ezfacebook
+ezrichtext.custom_tags.ezfacebook.label: Facebook
+ezrichtext.custom_tags.ezfacebook.description: ''
+ezrichtext.custom_tags.ezfacebook.attributes.post_url.label: 'Post URL'
+ezrichtext.custom_tags.ezfacebook.attributes.width.label: Width

app/Resources/views/themes/tastefulplanet/fields/ezrichtext/custom_tags/ezfacebook.html.twig

@@ -0,0 +1,24 @@
+{% if align is defined %}
+    {% if align == 'left' %}
+        {% set justify_content = 'flex-start' %}
+    {% elseif align == 'right' %}
+        {% set justify_content = 'flex-end' %}
+    {% elseif align == 'center' %}
+        {% set justify_content = 'center' %}
+    {% endif %}
+{% endif %}
+<div
+    class="fb-post"
+    style="display: flex;{% if justify_content is defined %} justify-content: {{ justify_content }};{% endif %}"
+    data-href="{{ params.post_url }}"
+    data-width="{{ params.width is defined ? params.width : '' }}">
+</div>
+<script>
+    (function(d, s, id) {
+        var js, fjs = d.getElementsByTagName(s)[0];
+        if (d.getElementById(id)) return;
+        js = d.createElement(s); js.id = id;
+        js.src = 'https://connect.facebook.net/en_EN/sdk.js#xfbml=1&version=v2.11';
+        fjs.parentNode.insertBefore(js, fjs);
+    }(document, 'script', 'facebook-jssdk'));
+</script>

app/Resources/views/themes/tastefulplanet/fields/ezrichtext/custom_tags/eztwitter.html.twig

@@ -0,0 +1,42 @@
+<div class="tweet-container" data-url="{{ params.tweet_url }}"></div>
+<script>
+    (function (global, doc) {
+        global.twttr = global.twttr || (function (d, s, id) {
+            var js, fjs = d.getElementsByTagName(s)[0],
+                t = global.twttr || {};
+            if (d.getElementById(id)) return t;
+            js = d.createElement(s);
+            js.id = id;
+            js.src = 'https://platform.twitter.com/widgets.js';
+            fjs.parentNode.insertBefore(js, fjs);
+
+            t._e = [];
+            t.ready = function (f) {
+                t._e.push(f);
+            };
+
+            return t;
+        }(doc, 'script', 'twitter-wjs'));
+
+        const tweetContainer = doc.querySelector('.tweet-container[data-url="{{ params.tweet_url }}"]');
+        const tweetUrlParts = tweetContainer.dataset.url.split('/');
+        const tweetId = tweetUrlParts[tweetUrlParts.length - 1];
+
+        global.twttr.ready(function () {
+            global.twttr.widgets.createTweet(
+                tweetId,
+                tweetContainer,
+                {
+                    'cards': '{{ params.cards is defined ? params.cards : '' }}',
+                    'conversation': '{{ params.conversation is defined ? params.conversation : '' }}',
+                    'theme': '{{ params.theme is defined ? params.theme : '' }}',
+                    'linkColor': '{{ params.link_color is defined ? params.link_color : '' }}',
+                    'width': '{{ params.width is defined ? params.width : '' }}',
+                    'align': '{{ align is defined ? align : '' }}',
+                    'lang': '{{ params.lang is defined ? params.lang : '' }}',
+                    'dnt': '{{ params.dnt is defined ? params.dnt : '' }}',
+                }
+            );
+        });
+    })(window, window.document);
+</script>

app/Resources/views/themes/tastefulplanet/fields/ezrichtext/custom_tags/ezyoutube.html.twig

@@ -0,0 +1,9 @@
+<div{% if align is defined %} style="text-align: {{ align }};"{% endif %}>
+    <iframe
+        type="text/html"
+        width="{{ params.width }}"
+        height="{{ params.height }}"
+        src="{{ params.video_url|replace({'https://youtu.be/' : 'https://www.youtube.com/embed/'}) }}?autoplay={{ params.autoplay == 'true' ? 1 : 0 }}"
+        frameborder="0">
+    </iframe>
+</div>

app/config/ezplatform.yml

@@ -1,6 +1,7 @@
 imports:
     - { resource: image_variations.yml }
     - { resource: views.yml }
+    - { resource: fields/ezrichtext/custom_tags.yml }
 
 ezpublish:
     # HttpCache settings, By default 'local' (Symfony HttpCache Proxy), by setting it to 'http' you can point it to Varnish

app/config/fields/ezrichtext/custom_tags.yml

@@ -0,0 +1,73 @@
+ezpublish:
+    system:
+        admin_group:
+            fieldtypes:
+                ezrichtext:
+                    custom_tags: [ezyoutube, eztwitter, ezfacebook]
+
+    ezrichtext:
+        # Define Custom Tags
+        custom_tags:
+            ezyoutube:
+                template: '@ezdesign/fields/ezrichtext/custom_tags/ezyoutube.html.twig'
+                icon: '/bundles/ezplatformadminui/img/ez-icons.svg#video'
+                attributes:
+                    video_url:
+                        type: 'string'
+                        required: true
+                    width:
+                        type: 'number'
+                        required: true
+                        default_value: 640
+                    height:
+                        type: 'number'
+                        required: true
+                        default_value: 360
+                    autoplay:
+                        type: 'boolean'
+                        default_value: false
+
+            eztwitter:
+                template: '@ezdesign/fields/ezrichtext/custom_tags/eztwitter.html.twig'
+                icon: '/bundles/ezplatformadminui/img/ez-icons.svg#twitter'
+                attributes:
+                    tweet_url:
+                        type: 'string'
+                        required: true
+                    # see https://dev.twitter.com/web/embedded-tweets/parameters
+                    cards:
+                        type: 'choice'
+                        required: false
+                        default_value: ''
+                        choices: ['', 'hidden']
+                    conversation:
+                        type: 'choice'
+                        default_value: ''
+                        choices: ['', 'none']
+                    theme:
+                        type: 'choice'
+                        default_value: 'light'
+                        required: true
+                        choices: ['light', 'dark']
+                    link_color:
+                        type: 'string'
+                        default_value: ''
+                    width:
+                        type: 'number'
+                        default_value: 500
+                    lang:
+                        type: 'string'
+                        default_value: 'en'
+                    dnt:
+                        type: 'boolean'
+                        default_value: true
+
+            ezfacebook:
+                template: '@ezdesign/fields/ezrichtext/custom_tags/ezfacebook.html.twig'
+                icon: '/assets/images/custom_tags/admin/icons/ezfacebook.svg#facebook'
+                attributes:
+                    post_url:
+                        type: 'string'
+                        required: true
+                    width:
+                        type: 'number'