From 6b48fb846209b34a38ef21e89d2c224532340f6d Mon Sep 17 00:00:00 2001
From: Florian BLOUET <florian.blouet@gmail.com>
Date: Wed, 4 Nov 2015 14:57:14 +0100
Subject: [PATCH] update share modal with new embed code, added embed bundle
 installation task

---
 .../Controller/Prod/ShareController.php       | 54 ++++++++++-
 templates/web/prod/Share/record.html.twig     | 92 +++++++++++++------
 2 files changed, 117 insertions(+), 29 deletions(-)

diff --git a/lib/Alchemy/Phrasea/Controller/Prod/ShareController.php b/lib/Alchemy/Phrasea/Controller/Prod/ShareController.php
index acf14b43c5..2cff5fdc5f 100644
--- a/lib/Alchemy/Phrasea/Controller/Prod/ShareController.php
+++ b/lib/Alchemy/Phrasea/Controller/Prod/ShareController.php
@@ -23,14 +23,62 @@ class ShareController extends Controller
      */
     public function shareRecord($base_id, $record_id)
     {
+        $outputVars = [
+            'isAvailable' => false,
+            'preview' => [
+              'permalinkUrl' => '',
+              'permaviewUrl' => '',
+              'embedUrl' => '',
+              'width' => '',
+              'height' => ''
+            ]
+        ];
         $record = new \record_adapter($this->app, \phrasea::sbasFromBas($this->app, $base_id), $record_id);
 
         if (!$this->getAclForUser()->has_access_to_subdef($record, 'preview')) {
             $this->app->abort(403);
         }
 
-        return $this->renderResponse('prod/Share/record.html.twig', [
-            'record' => $record,
-        ]);
+        $preview = $record->get_preview();
+
+        if ($preview->get_permalink() !== null) {
+
+
+            $subdefName = $preview->get_name();
+            $subdef = $record->get_subdef($subdefName);
+
+            switch ($record->getType()) {
+
+                case 'flexpaper':
+                case 'document':
+                case 'audio':
+                case 'video':
+                default:
+                    $token = $preview->get_permalink()->get_token();
+                    $permalinkUrl = $preview->get_permalink()->get_url();
+                    $permaviewUrl = $preview->get_permalink()->get_page();
+                    $previewWidth = $preview->get_width();
+                    $previewHeight = $preview->get_height();
+                    break;
+            }
+
+
+            $sbas_id = $record->getDataboxId();
+            $baseUrl = $this->app['request']->getSchemeAndHttpHost().$this->app['request']->getBaseUrl();
+            $embedUrl = $baseUrl.'/embed/'.$sbas_id.'/'.$record_id.'/'.$subdefName.'/?token='.$token;
+
+            $outputVars = [
+                'isAvailable' => true,
+                'preview' => [
+                    'permalinkUrl' => $permalinkUrl,
+                    'permaviewUrl' => $permaviewUrl,
+                    'embedUrl' => $embedUrl,
+                    'width' => $previewWidth,
+                    'height' => $previewHeight
+                ]
+            ];
+        }
+
+        return $this->renderResponse('prod/Share/record.html.twig', $outputVars);
     }
 }
diff --git a/templates/web/prod/Share/record.html.twig b/templates/web/prod/Share/record.html.twig
index 3a59aca14d..edb8321f03 100644
--- a/templates/web/prod/Share/record.html.twig
+++ b/templates/web/prod/Share/record.html.twig
@@ -1,43 +1,56 @@
-{% set preview = record.get_preview()%}
-
-{% if preview is iterable %}
-    <p>{{ 'No preview available.' | trans }}</p>
-{% elseif preview.get_permalink() is none %}
-    <p>{{ 'No permalink available.' | trans }}</p>
+{% if not isAvailable %}
+    <p>{{ 'No permalink available.' | trans }}</p>{#
+    <p>{{ 'No preview available.' | trans }}</p>#}
 {% else %}
-    {% set type = record.get_type() %}
-    {% set url = preview.get_permalink().get_url() %}
-    {% set pageurl = preview.get_permalink().get_page() %}
-
-    {% if url is not empty %}
+    {%  if preview.permalinkUrl is not empty %}
         <div id="share">
-            <div class="well-large">
-                <p>
-                    <a href="http://www.twitter.com/home/?status={{ pageurl }}" target="_blank">
+            <div id="tweet" class="well-large">
+                <div>
+                    <a href="http://www.twitter.com/home/?status={{ preview.permaviewUrl }}" target="_blank">
                         <img src="/assets/common/images/icons/twitter.ico" title="share this on twitter" style="vertical-align:middle;padding:0 5px;"/>
                         {% trans %}Send to Twitter{% endtrans %}
                     </a>
-                </p>
-                <p>
-                    <a href="http://www.facebook.com/sharer.php?u={{ pageurl }}" target="_blank">
+                </div>
+                <div>
+                    <a href="http://www.facebook.com/sharer.php?u={{ preview.permaviewUrl }}" target="_blank">
                         <img src="/assets/common/images/icons/facebook.ico" title="share on facebook" style="vertical-align:middle;padding:0 5px;"/>
                         {% trans %}Send to Facebook{% endtrans %}
                     </a>
                 </p>
 
                 <form action="#">
-                    <label>{% trans %}Resource URL{% endtrans %}</label>
-                    <input class="input-block-level" readonly="readonly" type="text"  value="{{ url }}" />
-                    <label>{% trans %}Detailed view URL{% endtrans %}</label>
-                    <input class="input-block-level" readonly="readonly" type="text"  value="{{ pageurl }}" />
-                    {% if type == 'image' %}
+                    <div class="form-group clearfix">
+                        <label>{% trans %}Resource URL{% endtrans %}</label>
+                        <input class="input-block-level" readonly="readonly" type="text" value="{{ preview.permalinkUrl }}"
+                               id="permalinkUrl"/>
+
+                        <p class="pull-right">
+                            <a href="{{ preview.permalinkUrl }}" target="_blank">previewLabel</a> &nbsp;&nbsp;
+                            <a href="#" class="" id="permalinkUrlCopy">copyClipboardLabel</a>
+                        </p>
+                    </div>
+                    <div class="form-group clearfix">
+                        <label>{% trans %}Detailed view URL{% endtrans %}</label>
+                        <input class="input-block-level" readonly="readonly" type="text" value="{{ preview.permaviewUrl }}" id="permaviewUrl"/>
+                        <p class="pull-right">
+                            <a href="{{ preview.permaviewUrl }}" target="_blank">previewLabel</a> &nbsp;&nbsp;
+                            <a href="#" class="" id="permaviewUrlCopy">copyClipboardLabel</a>
+                        </p>
+                    </div>
+                    <div class="form-group clearfix">
+                        {#{% if type == 'image' %}#}
                         <label>{% trans %}Embed code{% endtrans %}</label>
                         {% spaceless %}
-                            <textarea class="input-block-level" rows="4" readonly="true">
-                                <a href="{{ pageurl }}"><img src="{{ url|url_encode }}" title="" /></a>
+                            <textarea class="input-block-level" rows="4" readonly="true" id="embedRecordUrl">
+                                <iframe width="{{ preview.width }}" height="{{ preview.height }}" src="{{ preview.embedUrl|url_encode }}" frameborder="0" allowfullscreen></iframe>
                             </textarea>
                         {% endspaceless %}
-                    {% endif %}
+                        <p class="pull-right">
+                            <a href="{{ preview.embedUrl }}" target="_blank">previewLabel</a> &nbsp;&nbsp;
+                            <a href="#" class="" id="embedCopy">copyClipboardLabel</a>
+                        </p>
+                    </div>
+                    {#{% endif %}#}
                 </form>
             </div>
         </div>
@@ -48,10 +61,37 @@
                     function(){$(this).addClass('ui-state-hover');},
                     function(){$(this).removeClass('ui-state-hover');}
                 );
+
+                $('#permalinkUrlCopy').on('click', function(event) {
+                    event.preventDefault();
+                    return copyElContentClipboard('permalinkUrl');
+                });
+
+                $('#permaviewUrlCopy').on('click', function(event) {
+                    event.preventDefault();
+                    return copyElContentClipboard('permaviewUrl');
+                });
+
+                $('#embedCopy').on('click', function(event) {
+                    event.preventDefault();
+                    return copyElContentClipboard('embedRecordUrl');
+                });
+
+                var copyElContentClipboard = function(elId) {
+                    var copyEl = document.getElementById(elId);
+                    copyEl.select();
+                    try {
+                        var successful = document.execCommand('copy');
+                        var msg = successful ? 'successful' : 'unsuccessful';
+                        console.log('Copying text command was ' + msg);
+                    } catch (err) {
+                        console.log('unable to copy');
+                    }
+                }
             });
         </script>
     {% else %}
-        <div><{{ 'No URL available' | trans }}</div>
+        <div>{{ 'No URL available' | trans }}</div>
     {% endif %}
 {% endif %}