Merge pull request #53 from acsone/9.0-add_image_preview-lmi

[9.0] [IMP] Allow preview of image files
acsone · Mar 23, 2017 · bb4d7ff · bb4d7ff
2 parents 1cef2c4 + 2e91c39
commit bb4d7ff
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 9 deletions.
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -1,6 +1,7 @@
 9.0.?.?.? (?)
 ~~~~~~~~~~~~~
 
+* Improvement: Allow the preview of image files.
 * Fix: Display the node title if set into the CMIS container.
 * Fix: On the import document dialog, rename 'Create' button into 'Add'
 * Fix: For items displayed into the datatable, adjust the dropdown menu

diff --git a/cmis_web/static/src/js/form_widgets.js b/cmis_web/static/src/js/form_widgets.js
@@ -336,10 +336,21 @@
        return QWeb.render("CmisContentActions", ctx);
    },
 
-   get_preview_url : function(){
+   isImage: function(){
+      if (this.baseTypeId === 'cmis:folder') {
+           return false;
+       }
+       return this.mimetype.split('/')[0] === 'image';
+   },
+
+   get_content_url: function(){
+       return this.cmis_session.getContentStreamURL(this.objectId, 'inline');
+   },
+
+   get_preview_url: function(){
        var rendition = _.findWhere(this.renditions, {mimeType: 'application/pdf'});
        if (this.mimetype === 'application/pdf') {
-           return this.cmis_session.getContentStreamURL(this.objectId, 'inline');
+           return this.get_content_url();
        } else if (rendition) {
            return this.cmis_session.getContentStreamURL(rendition['streamId']);
        }
@@ -1029,19 +1040,45 @@ var CmisMixin = {
     },
 
     on_click_preview: function(row){
-        //http://localhost:8080/share/proxy/alfresco/api/node/workspace/SpacesStore/34a2e79c-9118-4d85-890c-32a720d70ad5/content/thumbnails/pdf?c=force&lastModified=pdf%3A146062
-        var previewer_url = this.get_previewer_url(row.data());
-        this.display_preview(previewer_url);
+        var cmisObjectWrapped = row.data();
+        if (cmisObjectWrapped.isImage()){
+            this.display_preview_image(cmisObjectWrapped);
+        } else {
+            this.display_preview_pdf(cmisObjectWrapped);
+        }
+    },
+
+    display_preview_image: function(cmisObjectWrapped){
+        var image_url = cmisObjectWrapped.get_content_url();
+        var image_viewer_el = QWeb.render("CmisImageViewer", {'url': image_url,
+                                                              'object': cmisObjectWrapped});
+        var $document_preview = this.$el.find(".documentpreview");
+        $document_preview.empty();
+        $document_preview.append(image_viewer_el);
+        // Show the previewer
+        var $tables_wrapper = this.$el.find(".dataTables_wrapper");
+        $tables_wrapper.fadeOut(400, function() {
+            $document_preview.fadeIn(400, function() {
+            });
+        });
+         // Attach an event to the "Back to document" icon
+        $document_preview.find(".button-back-browser").on('click', function() {
+            $document_preview.fadeOut(400, function() {
+                $tables_wrapper.fadeIn();
+            });
+        });
     },
 
-    display_preview: function(previewerUrl){
+    display_preview_pdf: function(cmisObjectWrapped){
+        var previewer_url = this.get_previewer_url(cmisObjectWrapped);
         var width="100%";
         var height =  '' + this.$el.height() - 30 + 'px'; //' ' + (H - r.top) + 'px';
         var $document_preview = this.$el.find(".documentpreview");
         $document_preview.empty();
-        $document_preview.append(QWeb.render("CmisDocumentViewer", {'url': previewerUrl,
+        $document_preview.append(QWeb.render("CmisDocumentViewer", {'url': previewer_url,
                                                                     'width': width,
                                                                     'height': height,
+
                                                                     }));
 
         // Show the previewer

diff --git a/cmis_web/static/src/xml/form_widgets.xml b/cmis_web/static/src/xml/form_widgets.xml
@@ -180,15 +180,28 @@
 
 </t>
 
+<t t-name='CmisImageViewer'>
+    <div class="cmis_viewer_image cmis_document_viewer">
+        <div class='cmis_document_viewer_toolbar pull-right'>
+            <button type="button" class="btn btn-primary btn-sm button-back-browser">
+                <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>&amp;nbsp;Back to documents list
+            </button>
+        </div>
+        <div class='cmis_image_container'>
+            <img t-att-src='url' width='100%' allowfullscreen='1' webkitallowfullscreen='1'></img>
+        </div>
+    </div>
+</t>
+
 <t t-name='CmisDocumentViewer'>
-    <div class="cmis_document_viewer">
+    <div class="cmis_viewer_pdf cmis_document_viewer">
         <div class='cmis_document_viewer_toolbar pull-right'>
             <button type="button" class="btn btn-primary btn-sm button-back-browser">
                 <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>&amp;nbsp;Back to documents list
             </button>
         </div>
         <div class='cmis_document_viewer_iframe'>
-            <iframe id='viewer' 
+            <iframe id='viewer'
                     t-att-src='url'
                     t-att-width='width'
                     t-att-height='height'