Added sidebar to the viewer

lib/Controller/PageController.php

@@ -11,25 +11,31 @@
 
 namespace OCA\Maps\Controller;
 
+use OCA\Files\Event\LoadSidebar;
+use OCA\Viewer\Event\LoadViewer;
 use OCP\IConfig;
 use OCP\IRequest;
 use OCP\AppFramework\Http\TemplateResponse;
-use OCP\AppFramework\Http\Template\PublicTemplateResponse;
-use OCP\AppFramework\Http\DataResponse;
+use OCP\EventDispatcher\IEventDispatcher;
 use OCP\AppFramework\Controller;
 use OCP\IInitialStateService;
 
 class PageController extends Controller {
     private $userId;
     private $config;
 
+    /** @var IEventDispatcher */
+    private $eventDispatcher;
+
     public function __construct($AppName,
                                 IRequest $request,
+                                IEventDispatcher $eventDispatcher,
                                 IConfig $config,
                                 IInitialStateService $initialStateService,
                                 $UserId){
         parent::__construct($AppName, $request);
         $this->userId = $UserId;
+        $this->eventDispatcher = $eventDispatcher;
         $this->config = $config;
         $this->initialStateService = $initialStateService;
     }
@@ -44,7 +50,10 @@ public function __construct($AppName,
      * @NoAdminRequired
      * @NoCSRFRequired
      */
-    public function index() {
+    public function index(): TemplateResponse {
+        $this->eventDispatcher->dispatch(LoadSidebar::class, new LoadSidebar());
+        $this->eventDispatcher->dispatch(LoadViewer::class, new LoadViewer());
+
         $params = array('user' => $this->userId);
         $this->initialStateService->provideInitialState($this->appName, 'photos', $this->config->getAppValue('photos', 'enabled', 'no') === 'yes');
         $response = new TemplateResponse('maps', 'index', $params);

src/contactsController.js

@@ -1,6 +1,7 @@
 import { generateUrl } from '@nextcloud/router';
 
 import { basename, formatAddress } from './utils';
+import escapeHTML from 'escape-html';
 
 function ContactsController (optionsController, searchController) {
     this.contact_MARKER_VIEW_SIZE = 40;

src/nonLocalizedPhotosController.js

@@ -1,4 +1,5 @@
 import { generateUrl } from '@nextcloud/router';
+import escapeHTML from 'escape-html';
 
 function NonLocalizedPhotosController (optionsController, timeFilterController, photosController) {
     this.PHOTO_MARKER_VIEW_SIZE = 40;

src/photosController.js

@@ -2,6 +2,8 @@ import { generateUrl } from '@nextcloud/router';
 
 import { basename } from './utils';
 
+import escapeHTML from 'escape-html';
+
 function PhotosController (optionsController, timeFilterController) {
     this.PHOTO_MARKER_VIEW_SIZE = 40;
     this.photosDataLoaded = false;
@@ -205,7 +207,7 @@ PhotosController.prototype = {
                 iconUrl = _app.getImageIconUrl();
             }
             var label = cluster.getChildCount();
-            if( availZoomLevels == 0 && label > 1){ 
+            if( availZoomLevels == 0 && label > 1){
                 // lets generate a preview slideshow for cluster of images at max zoom level
                 var iMarkerList = cluster.getAllChildMarkers();
                 // sort by dateTaken
@@ -220,18 +222,18 @@ PhotosController.prototype = {
                     var img = '<div id="imgdiv' + i + '" style="display: none">' +
                     '<img class="photo-tooltip" src=' + iIconUrl + '/>' +
                     '<p class="tooltip-photo-date">' + iDateStr + '</p>' +
-                    '<p class="tooltip-photo-name">' + iPhotoName + '</p>' + 
-                    '<p class="tooltip-photo-name">' + (parseInt(i)+1) + ' of ' + label  + '</p>' + 
+                    '<p class="tooltip-photo-name">' + iPhotoName + '</p>' +
+                    '<p class="tooltip-photo-name">' + (parseInt(i)+1) + ' of ' + label  + '</p>' +
                     '</div>';
                     imgList += img;
                 }
                 imgList += '</div>'
                 cluster.bindTooltip(imgList, {permanent: false, className: 'leaflet-marker-photo-tooltip', direction: 'right', offset: L.point(0, -150)});
-                cluster.on( "tooltipopen", function( event, ui ) { 
+                cluster.on( "tooltipopen", function( event, ui ) {
                     var maxI = parseInt(cluster.getChildCount())-1;
                     var imgIndexAttr = $('#imgdiv').parent().parent().attr('imgindex');
-                    if ( imgIndexAttr >= 0 ){ 
-                        // a preview image loop was already running before. 
+                    if ( imgIndexAttr >= 0 ){
+                        // a preview image loop was already running before.
                         // need to check if again opening the same preview image loop as before to continue or if opening another preview image loop and start at first image. We identify this using the attribute firstImageFileId we stored in 2nd parent above #imgdiv
                         var lastFirstImageFileId = $('#imgdiv').parent().parent().attr('firstImageFileId');
                         if ( lastFirstImageFileId == firstImageFileId ){
@@ -240,54 +242,54 @@ PhotosController.prototype = {
                             // we start a new preview loop
                             imgIndexAttr = 0;
                             // we store imgindex of preview loop in attribute imgindex in 2nd parent above #imgdiv
-                            $('#imgdiv').parent().parent().attr('imgindex', '0' ); 
+                            $('#imgdiv').parent().parent().attr('imgindex', '0' );
                         }
                     }
                     $('#imgdiv').parent().parent().attr('firstImageFileId', firstImageFileId);
                     $('#imgdiv').show();
                     // For some browsers, `attr` is undefined; for others,
                     // `attr` is false.  Check for both.
                     if ( typeof imgIndexAttr == typeof undefined || imgIndexAttr == false ) {
-                        // imgindex not yet defined therefore this is the fist time tooltipopen running 
+                        // imgindex not yet defined therefore this is the fist time tooltipopen running
                         // for this cluster. Therefore we start with imgindex 0
                         $('#imgdiv').parent().parent().attr('imgindex', '0' ); // saving 0 as start value to attribute imgindex
                         $('#imgdiv0').show(); // showing first image
                     }else{
                         // this loop was previously visible therefore we continue with last visible image
-                        $('#imgdiv' + imgIndexAttr ).show();  
+                        $('#imgdiv' + imgIndexAttr ).show();
                     }
-                    var randomId = Math.random(); // 
+                    var randomId = Math.random(); //
                     $('#imgdiv').parent().parent().attr('randomId', randomId);
                     function toolTipImgLoop(maxI, randomId){
-                        // will will only continue the loop if randomId is matching randomId stored in imgdiv 
+                        // will will only continue the loop if randomId is matching randomId stored in imgdiv
                         // to prevent running multiple loops in parallel could be caused by to fast mouseout / mouseover events
                         setTimeout(function(maxI){  // this function content will be executed after timeout of 3 sec (3000 ms)
                             var randomIdFromImgdiv = $('#imgdiv').parent().parent().attr('randomId');
-                            if ( randomId == randomIdFromImgdiv ){ 
+                            if ( randomId == randomIdFromImgdiv ){
                                 var i = $('#imgdiv').parent().parent().attr('imgindex');
                                 var j = (parseInt(i)+1);
         		        if ( i == maxI ){ // if i reached max image j need to start with 0 again to continue with 1st image again
                                     j = 0;
                                 }
                                 // now we will fade out the current img and fade in the next image
-                                $('#imgdiv' + i ).fadeOut('fast', function(){ 
-                                    $('#imgdiv' + j ).fadeIn('fast'); 
-                                });  
-		                if ( i == maxI ){ // and now we also need to switch i back to 0 to contine 
+                                $('#imgdiv' + i ).fadeOut('fast', function(){
+                                    $('#imgdiv' + j ).fadeIn('fast');
+                                });
+		                if ( i == maxI ){ // and now we also need to switch i back to 0 to contine
                                     i = 0;
                                 }else{
                                     i++;
                                 }
-                                $('#imgdiv').parent().parent().attr('imgindex', i); 
+                                $('#imgdiv').parent().parent().attr('imgindex', i);
                                 // after storing current value of i (loop img index) in imgdiv imgindex attribute
                                 // we will call again toolTipImgLoop to continue the loop
                                 toolTipImgLoop(maxI, randomId);
                             }
                         }, 3000, maxI); // timeout and variable of above setTimeout
                     };
-                    // initial call of toolTipImgLoop 
-                    // we will do the inital call of toolTipImgLoop using setTimeout with timeout 500 ms to ensure that tooltipopen has been completed 
-                    setTimeout(toolTipImgLoop(maxI, randomId), 500, maxI, randomId); 
+                    // initial call of toolTipImgLoop
+                    // we will do the inital call of toolTipImgLoop using setTimeout with timeout 500 ms to ensure that tooltipopen has been completed
+                    setTimeout(toolTipImgLoop(maxI, randomId), 500, maxI, randomId);
                 });
                 cluster.on( "tooltipclose", function( event, ui ) {
                     // clearing randomId in imgdiv on mouseout to stop the img preview loop (see above)

src/script.js

@@ -51,6 +51,7 @@ import 'nouislider/distribute/nouislider.css';
 import opening_hours from 'opening_hours';
 
 import { generateUrl } from '@nextcloud/router';
+import escapeHTML from 'escape-html';
 
 import ContactsController from './contactsController';
 import DevicesController from './devicesController';
@@ -62,6 +63,17 @@ import TracksController from './tracksController';
 import { brify, getUrlParameter, formatAddress } from './utils';
 
 (function($, OC) {
+    // TODO: remove when we have a proper fileinfo standalone library
+    // original scripts are loaded from
+    // https://github.com/nextcloud/server/blob/5bf3d1bb384da56adbf205752be8f840aac3b0c5/lib/private/legacy/template.php#L120-L122
+    window.addEventListener('DOMContentLoaded', () => {
+        if (!window.OCA.Files) {
+            window.OCA.Files = {}
+        }
+        // register unused client for the sidebar to have access to its parser methods
+        Object.assign(window.OCA.Files, { App: { fileList: { filesClient: OC.Files.getClient() } } }, window.OCA.Files)
+    })
+
     $(function() {
         // avoid sidebar to appear when grabing map to the right
         OC.disallowNavigationBarSlideGesture();
@@ -2160,3 +2172,4 @@ import { brify, getUrlParameter, formatAddress } from './utils';
     };
 
 })(jQuery, OC);
+

src/tracksController.js

@@ -2,6 +2,8 @@ import { generateUrl } from '@nextcloud/router';
 
 import { dirname, brify, metersToDistance, metersToElevation, kmphToSpeed, minPerKmToPace, formatTimeSeconds, getUrlParameter } from './utils';
 
+import escapeHTML from 'escape-html';
+
 function TracksController(optionsController, timeFilterController) {
     this.track_MARKER_VIEW_SIZE = 30;
     this.optionsController = optionsController;

templates/index.php

@@ -21,6 +21,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>
  *
  */
+script('maps', 'mockupFilesApp');
 script('maps', 'script');
 ?>