From 7ea1c0e6f22577b091f9e9da826332c51d5e5bd3 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Tue, 6 Sep 2016 17:28:39 +0200
Subject: [PATCH] hide the documentlist during the show of a file

---
 .../app/components/files/files.component.html | 378 +++++++++---------
 .../src/componets/pdfViewer.component.ts      |   3 +-
 2 files changed, 192 insertions(+), 189 deletions(-)

diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html
index d7e4dc935f..0fc290de5f 100644
--- a/demo-shell-ng2/app/components/files/files.component.html
+++ b/demo-shell-ng2/app/components/files/files.component.html
@@ -1,196 +1,200 @@
-<div class="container">
-    <alfresco-upload-drag-area
-            [showUploadDialog]="true"
-            [currentFolderPath]="currentPath"
-            [uploaddirectory]=""
-            [versioning] = "versioning"
-            (onSuccess)="documentList.reload()">
-        <alfresco-document-list-breadcrumb
-            [currentFolderPath]="currentPath"
-            [target]="documentList">
-        </alfresco-document-list-breadcrumb>
-        <alfresco-document-list
-                #documentList
+<div *ngIf="!fileShowed">
+    <div class="container">
+        <alfresco-upload-drag-area
+                [showUploadDialog]="true"
                 [currentFolderPath]="currentPath"
-                [contextMenuActions]="true"
-                [contentActions]="true"
-                (preview)="showFile($event)"
-                (folderChange)="onFolderChanged($event)">
-            <!--
-            <empty-folder-content>
-                <template>
-                    <h1>Sorry, no content here</h1>
-                </template>
-            </empty-folder-content>
-            -->
-            <content-columns>
-                <content-column key="$thumbnail" type="image"></content-column>
-                <content-column
-                        title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
-                        key="name"
-                        sortable="true"
-                        class="full-width ellipsis-cell">
-                </content-column>
+                [uploaddirectory]=""
+                [versioning] = "versioning"
+                (onSuccess)="documentList.reload()">
+            <alfresco-document-list-breadcrumb
+                [currentFolderPath]="currentPath"
+                [target]="documentList">
+            </alfresco-document-list-breadcrumb>
+            <alfresco-document-list
+                    #documentList
+                    [currentFolderPath]="currentPath"
+                    [contextMenuActions]="true"
+                    [contentActions]="true"
+                    (preview)="showFile($event)"
+                    (folderChange)="onFolderChanged($event)">
                 <!--
-                <content-column
-                        title="Type"
-                        source="content.mimeType">
-                </content-column>
+                <empty-folder-content>
+                    <template>
+                        <h1>Sorry, no content here</h1>
+                    </template>
+                </empty-folder-content>
                 -->
-                <content-column
-                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
-                        key="createdByUser.displayName"
-                        sortable="true"
-                        class="desktop-only">
-                </content-column>
-                <content-column
-                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
-                        key="createdAt"
-                        type="date"
-                        format="medium"
-                        sortable="true"
-                        class="desktop-only">
-                </content-column>
-            </content-columns>
+                <content-columns>
+                    <content-column key="$thumbnail" type="image"></content-column>
+                    <content-column
+                            title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
+                            key="name"
+                            sortable="true"
+                            class="full-width ellipsis-cell">
+                    </content-column>
+                    <!--
+                    <content-column
+                            title="Type"
+                            source="content.mimeType">
+                    </content-column>
+                    -->
+                    <content-column
+                            title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
+                            key="createdByUser.displayName"
+                            sortable="true"
+                            class="desktop-only">
+                    </content-column>
+                    <content-column
+                            title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
+                            key="createdAt"
+                            type="date"
+                            format="medium"
+                            sortable="true"
+                            class="desktop-only">
+                    </content-column>
+                </content-columns>
 
-            <content-actions>
-                <!-- folder actions -->
-                <content-action
-                        target="folder"
-                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
-                        handler="system1">
-                </content-action>
-                <content-action
-                        target="folder"
-                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
-                        (execute)="myFolderAction1($event)">
-                </content-action>
-                <content-action
-                        target="folder"
-                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
-                        handler="delete">
-                </content-action>
-                <!-- document actions -->
-                <content-action
-                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
-                        handler="download">
-                </content-action>
-                <content-action
-                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
-                        handler="system2">
-                </content-action>
-                <content-action
-                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
-                        (execute)="myCustomAction1($event)">
-                </content-action>
-                <content-action
-                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
-                        handler="delete">
-                </content-action>
-                <content-action
-                        target="folder"
-                        title="Activiti: View Form"
-                        (execute)="viewActivitiForm($event)">
-                </content-action>
-            </content-actions>
-        </alfresco-document-list>
-        <alfresco-pagination
-            [provider]="documentList.data"
-            [supportedPageSizes]="[5, 10, 15, 20]">
-        </alfresco-pagination>
-    </alfresco-upload-drag-area>
+                <content-actions>
+                    <!-- folder actions -->
+                    <content-action
+                            target="folder"
+                            title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
+                            handler="system1">
+                    </content-action>
+                    <content-action
+                            target="folder"
+                            title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
+                            (execute)="myFolderAction1($event)">
+                    </content-action>
+                    <content-action
+                            target="folder"
+                            title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
+                            handler="delete">
+                    </content-action>
+                    <!-- document actions -->
+                    <content-action
+                            target="document"
+                            title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
+                            handler="download">
+                    </content-action>
+                    <content-action
+                            target="document"
+                            title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
+                            handler="system2">
+                    </content-action>
+                    <content-action
+                            target="document"
+                            title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
+                            (execute)="myCustomAction1($event)">
+                    </content-action>
+                    <content-action
+                            target="document"
+                            title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
+                            handler="delete">
+                    </content-action>
+                    <content-action
+                            target="folder"
+                            title="Activiti: View Form"
+                            (execute)="viewActivitiForm($event)">
+                    </content-action>
+                </content-actions>
+            </alfresco-document-list>
+            <alfresco-pagination
+                [provider]="documentList.data"
+                [supportedPageSizes]="[5, 10, 15, 20]">
+            </alfresco-pagination>
+        </alfresco-upload-drag-area>
+    </div>
+
+    <context-menu-holder></context-menu-holder>
+
+    <div class="p-10">
+        <ul>
+            <li>Current path: {{documentList.currentFolderPath}}</li>
+            <li>
+                <button (click)="documentList.currentFolderPath = '/Sites/swsdp/documentLibrary';">Go to Document Library</button>
+            </li>
+            <li>
+                <button (click)="documentList.currentFolderPath = '/Sites/swsdp/documentLibrary/Agency Files/Contracts'">Go to agency contracts</button>
+            </li>
+            <li>
+                <button (click)="documentList.currentFolderPath = '/'">Go to root</button>
+            </li>
+            <li>
+                <button (click)="fileDialog.toggleShowDialog()">Show/Hide File Dialog</button>
+            </li>
+        </ul>
+    </div>
+
+
+    <p style="width:250px;margin: 20px;">
+        <label for="switch-multiple-file" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+            <input type="checkbox" id="switch-multiple-file" class="mdl-switch__input" (change)="toggleMultipleFileUpload()" >
+            <span class="mdl-switch__label">Multiple File Upload</span>
+        </label>
+    </p>
+
+
+    <p style="width:250px;margin: 20px;">
+        <label for="switch-folder-upload" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+            <input type="checkbox" id="switch-folder-upload" class="mdl-switch__input" (change)="toggleFolder()">
+            <span class="mdl-switch__label">Folder Upload</span>
+        </label>
+    </p>
+
+    <p style="width:250px;margin: 20px;">
+        <label for="switch-accepted-file-type" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+            <input type="checkbox" id="switch-accepted-file-type" class="mdl-switch__input" (change)="toggleAcceptedFilesType()">
+            <span class="mdl-switch__label">Filter extension</span>
+        </label>
+    </p>
+
+    <p style="width:250px;margin: 20px;">
+        <label for="switch-versioning" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+            <input type="checkbox" id="switch-versioning" class="mdl-switch__input" (change)="toggleVersioning()">
+            <span class="mdl-switch__label">Versioning</span>
+        </label>
+    </p>
+
+    <h5>Upload</h5>
+    <br>
+    <div *ngIf="acceptedFilesTypeShow">
+        <label class="mdl-input__label">Extension accepted
+            <input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
+        </label>
+        <br/>
+    </div>
+    <div *ngIf="!acceptedFilesTypeShow">
+        <alfresco-upload-button data-automation-id="multiple-file-upload"
+                                [uploaddirectory]="currentPath"
+                                [currentFolderPath]="currentPath"
+                                [multipleFiles]="multipleFileUpload"
+                                [uploadFolders]="folderUpload"
+                                [versioning] = "versioning"
+                                (onSuccess)="documentList.reload()">
+            <div class="mdl-spinner mdl-js-spinner is-active"></div>
+        </alfresco-upload-button>
+    </div>
+    <div *ngIf="acceptedFilesTypeShow">
+        <alfresco-upload-button data-automation-id="multiple-file-upload"
+                                [uploaddirectory]="currentPath"
+                                [currentFolderPath]="currentPath"
+                                acceptedFilesType="{{acceptedFilesType}}"
+                                [multipleFiles]="multipleFileUpload"
+                                [uploadFolders]="folderUpload"
+                                [versioning] = "versioning"
+                                (onSuccess)="documentList.reload()">
+            <div class="mdl-spinner mdl-js-spinner is-active"></div>
+        </alfresco-upload-button>
+    </div>
+    <file-uploading-dialog #fileDialog></file-uploading-dialog>
 </div>
 
-<context-menu-holder></context-menu-holder>
-
-<div class="p-10">
-    <ul>
-        <li>Current path: {{documentList.currentFolderPath}}</li>
-        <li>
-            <button (click)="documentList.currentFolderPath = '/Sites/swsdp/documentLibrary';">Go to Document Library</button>
-        </li>
-        <li>
-            <button (click)="documentList.currentFolderPath = '/Sites/swsdp/documentLibrary/Agency Files/Contracts'">Go to agency contracts</button>
-        </li>
-        <li>
-            <button (click)="documentList.currentFolderPath = '/'">Go to root</button>
-        </li>
-        <li>
-            <button (click)="fileDialog.toggleShowDialog()">Show/Hide File Dialog</button>
-        </li>
-    </ul>
-</div>
-
-
-<p style="width:250px;margin: 20px;">
-    <label for="switch-multiple-file" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-        <input type="checkbox" id="switch-multiple-file" class="mdl-switch__input" (change)="toggleMultipleFileUpload()" >
-        <span class="mdl-switch__label">Multiple File Upload</span>
-    </label>
-</p>
-
-
-<p style="width:250px;margin: 20px;">
-    <label for="switch-folder-upload" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-        <input type="checkbox" id="switch-folder-upload" class="mdl-switch__input" (change)="toggleFolder()">
-        <span class="mdl-switch__label">Folder Upload</span>
-    </label>
-</p>
-
-<p style="width:250px;margin: 20px;">
-    <label for="switch-accepted-file-type" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-        <input type="checkbox" id="switch-accepted-file-type" class="mdl-switch__input" (change)="toggleAcceptedFilesType()">
-        <span class="mdl-switch__label">Filter extension</span>
-    </label>
-</p>
-
-<p style="width:250px;margin: 20px;">
-    <label for="switch-versioning" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-        <input type="checkbox" id="switch-versioning" class="mdl-switch__input" (change)="toggleVersioning()">
-        <span class="mdl-switch__label">Versioning</span>
-    </label>
-</p>
-
-<h5>Upload</h5>
-<br>
-<div *ngIf="acceptedFilesTypeShow">
-    <label class="mdl-input__label">Extension accepted
-        <input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
-    </label>
-    <br/>
-</div>
-<div *ngIf="!acceptedFilesTypeShow">
-    <alfresco-upload-button data-automation-id="multiple-file-upload"
-                            [uploaddirectory]="currentPath"
-                            [currentFolderPath]="currentPath"
-                            [multipleFiles]="multipleFileUpload"
-                            [uploadFolders]="folderUpload"
-                            [versioning] = "versioning"
-                            (onSuccess)="documentList.reload()">
+<div *ngIf="fileShowed">
+    <alfresco-viewer [(showViewer)]="fileShowed"
+                     [fileNodeId]="fileNodeId"
+                     [overlayMode]="true">
         <div class="mdl-spinner mdl-js-spinner is-active"></div>
-    </alfresco-upload-button>
-</div>
-<div *ngIf="acceptedFilesTypeShow">
-    <alfresco-upload-button data-automation-id="multiple-file-upload"
-                            [uploaddirectory]="currentPath"
-                            [currentFolderPath]="currentPath"
-                            acceptedFilesType="{{acceptedFilesType}}"
-                            [multipleFiles]="multipleFileUpload"
-                            [uploadFolders]="folderUpload"
-                            [versioning] = "versioning"
-                            (onSuccess)="documentList.reload()">
-        <div class="mdl-spinner mdl-js-spinner is-active"></div>
-    </alfresco-upload-button>
+    </alfresco-viewer>
 </div>
 
-<alfresco-viewer [(showViewer)]="fileShowed"
-                 [fileNodeId]="fileNodeId"
-                 [overlayMode]="true">
-    <div class="mdl-spinner mdl-js-spinner is-active"></div>
-</alfresco-viewer>
-
-<file-uploading-dialog #fileDialog></file-uploading-dialog>
diff --git a/ng2-components/ng2-alfresco-viewer/src/componets/pdfViewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/componets/pdfViewer.component.ts
index c9750c7231..7d9e190ead 100644
--- a/ng2-components/ng2-alfresco-viewer/src/componets/pdfViewer.component.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/componets/pdfViewer.component.ts
@@ -39,7 +39,6 @@ export class PdfViewerComponent {
     @Input()
     showToolbar: boolean = true;
 
-
     currentPdfDocument: any;
     page: number;
     displayPage: number;
@@ -105,7 +104,7 @@ export class PdfViewerComponent {
 
     initPDFViewer(pdfDocument: any) {
         PDFJS.verbosity = 1;
-        PDFJS.disableWorker = true;
+        PDFJS.disableWorker = false;
 
         let documentContainer = document.getElementById('viewer-pdf-container');
         let viewer: any = document.getElementById('viewer-viewerPdf');