integration of react component preview generator

tracim/tracim/i18n/fr/LC_MESSAGES/tracim.po

@@ -1559,6 +1559,18 @@ msgstr "Voir la dernière version"
 msgid "<b>This file is deprecated</b>"
 msgstr "<b>Ce fichier est obsolète</b>"
 
+#: tracim/templates/file/getone.mak:114
+msgid "Preview"
+msgstr "Prévisualisation"
+
+#: tracim/templates/file/getone.mak:136
+msgid "this page"
+msgstr "cette page"
+
+#: tracim/templates/file/getone.mak:143
+msgid "all pages"
+msgstr "toutes les pages"
+
 #: tracim/templates/file/getone.mak:83 tracim/templates/file/toolbar.mak:23
 msgid "Download the file"
 msgstr "Télécharger le fichier"

tracim/tracim/public/assets/css/dashboard.css

@@ -1,4 +1,11 @@
 /*
+ * Bootstrap overrides
+ */
+.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
+  border-top-right-radius: 4px
+}
+
+/*
  * Base structure
  */
 

tracim/tracim/public/assets/js/main.js

@@ -1,7 +1,7 @@
 $(document).ready(function () {
 
   // toggle sidebar-left width to fixed or auto
-  $('#toggle-left-sidebar-width').click( function() {
+  $('#toggle-left-sidebar-width').click(function() {
     const sidebar = $('#sidebar-left')
     const buttonIcon = $('> i', this)
 

tracim/tracim/templates/file/getone.mak

@@ -101,117 +101,36 @@
 
     <div class="content__detail file">
         <% download_url = tg.url('/workspaces/{}/folders/{}/files/{}/download?revision_id={}'.format(result.file.workspace.id, result.file.parent.id,result.file.id,result.file.selected_revision)) %>
-        <div class="t-half-spacer-above download-file-button">
-            <a style="" class="btn btn-default" tittle="${_('Download the file')}"
-                href="${download_url}" >
-                ${ICON.FA_FW('fa fa-download fa-2x')}
-            </a>
-        </div>
-
         <div class="t-half-spacer-above">
-            <table class="table table-hover table-condensed table-striped table-bordered">
-                <tr>
-                    <td class="tracim-title">${_('Preview')}</td>
-                    <td>
-                        <table>
-                            <tr>
-                                <td>
-                                    <button type="button" id="pg_previous_page" onclick="previous_page()">
-                                        <span class="pull-left">
-                                            ${ICON.FA_FW('fa fa-chevron-left')}
-                                        </span>
-                                    </button>
-                                </td>
-                                <td>
-                                    <div id="pg_link"><img id='preview_generator' alt="Preview"></div>
-                                </td>
-                                <td>
-                                    <button type="button" id="pg_next_page" onclick="next_page()">
-                                        <span>
-                                            ${ICON.FA_FW('fa fa-chevron-right')}
-                                        </span>
-                                    </button>
-                                </td>
-                                <td>
-                                    <a type="button" id="dl_one_pdf">${_('this page')}
-                                        <span class="pull-left">
-                                            ${ICON.FA_FW('fa fa-download')}
-                                        </span>
-                                    </a>
-                                </td>
-                                <td>
-                                    <a type="button" id="dl_full_pdf">${_('all pages')}
-                                        <span class="pull-left">
-                                            ${ICON.FA_FW('fa fa-download')}
-                                        </span>
-                                    </a>
-                                </td>
-                            </tr>
-                        </table>
-
-                        <script type="text/javascript">
-                            var nb_page = parseInt(${nb_page})
-                            var page = 0
-                            var urls = [
-                                % for one_url in url:
-                                    '${one_url}',
-                                % endfor
-                            ]
-
-                            document.getElementById('preview_generator').src = urls[page]
-                            refresh_button()
-
-                            function next_page () {
-                                page = page + 1
-                                document.getElementById('preview_generator').src = urls[page]
-                                refresh_button()
-                            }
-
-                            function previous_page () {
-                                page = page - 1
-                                document.getElementById('preview_generator').src = urls[page]
-                                refresh_button()
-                            }
-
-                            function refresh_button () {
-                                document.getElementById('pg_previous_page').disabled = false
-                                document.getElementById('pg_next_page').disabled = false
-                                document.getElementById('dl_one_pdf').href = '/previews/${result.file.id}/pages/' + page + '/download_pdf_one?revision_id=${result.file.selected_revision}'
-                                document.getElementById('dl_full_pdf').href = '/previews/${result.file.id}/pages/' + page + '/download_pdf_full?revision_id=${result.file.selected_revision}'
-                                document.getElementById('pg_link').href = '/previews/${result.file.id}/pages/' + page + '/high_quality?revision_id=${result.file.selected_revision}'
-
-                                if (page >= nb_page - 1) {
-                                    document.getElementById('pg_next_page').disabled = true
-                                }
-                                if (page <= 0) {
-                                    document.getElementById('pg_previous_page').disabled = true
-                                }
-                            }
-                        </script>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="tracim-title">${_('File')}</td>
-                    <td>
-                        <a href="${download_url}" tittle="${_('Download the file (last revision)')}">
-                            ${result.file.file.name}
-                            <span class="pull-right">
-                                ${ICON.FA_FW('fa fa-download')}
-                            </span>
-
-                        </a>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="tracim-title">${_('Size')}</td>
-                    <td>${h.user_friendly_file_size(result.file.file.size)}</td>
-                </tr>
-                <tr>
-                    <td class="tracim-title">${_('Modified')}</td>
-                    <% created_localized = h.get_with_timezone(result.file.created) %>
-                    <td>${h.format_short(created_localized)|n} ${_('by {}').format(result.file.owner.name)}</td>
-                </tr>
-            </table>
+            <div id='previewGenerator'></div>
+            <script src="${tg.url('/assets/js/previewGenerator.vendor.bundle.js')}" type="text/javascript"></script>
+            <script src="${tg.url('/assets/js/previewGenerator.app.entry.js')}" type="text/javascript"></script>
+            <script type="text/javascript">
+              <% created_localized = h.get_with_timezone(result.file.created) %>
+              (function initialisePreviewGenerator() {
+                previewGenerator(
+                  document.getElementById('previewGenerator'),
+                  [
+                    % for one_url in url:
+                      '${one_url}',
+                    % endfor
+                  ],
+                  '${nb_page}',
+                  '/previews/__FILE_ID__/pages/__CURRENT_PAGE__/__DOWNLOAD_TYPE__?revision_id=__REVISION_ID__',
+                  {
+                    id: '${result.file.id}',
+                    name: '${result.file.file.name}',
+                    selectedRevision: '${result.file.selected_revision}',
+                    weight: '${h.user_friendly_file_size(result.file.file.size)}',
+                    height: '300',
+                    modifiedAt: '${h.format_short(created_localized)|n}',
+                    owner: '${result.file.owner.name}',
+                    sourceLink: '${download_url}',
+                    pdfAvailable: false // Côme - 2017/07/24 - backend should return this information
+                  }
+                )
+              })()
+            </script>
         </div>
 
         <div class="t-half-spacer-above">