Files app navigation can now switch

- added new OCA.Files namespace for files classes
- the sidebar can now switch between views/containers
- the trashbin renders in its own container but currently doesn't work
  due to overrides
- added app.js as entry point for JS code (ideally all other files should
  only contain classes and not trigger anything)

.jshintrc

@@ -26,6 +26,7 @@
 		"fakeServer": true,
 		"_": true,
 		"OC": true,
+		"OCA": true,
 		"t": true,
 		"n": true
 	}

apps/files/index.php

@@ -28,6 +28,7 @@ OCP\User::checkLoggedIn();
 OCP\Util::addStyle('files', 'files');
 OCP\Util::addStyle('files', 'upload');
 OCP\Util::addStyle('files', 'mobile');
+OCP\Util::addscript('files', 'app');
 OCP\Util::addscript('files', 'file-upload');
 OCP\Util::addscript('files', 'jquery.iframe-transport');
 OCP\Util::addscript('files', 'jquery.fileupload');
@@ -110,13 +111,14 @@ foreach ($navItems as $item) {
 		$content = renderScript($item['appname'], $item['script']);
 	}
 	$contentItem = array();
-	$contentItem['appname'] = $item['appname'];
+	$contentItem['id'] = $item['id'];
 	$contentItem['content'] = $content;
 	$contentItems[] = $contentItem;
 }
 
 OCP\Util::addscript('files', 'fileactions');
 OCP\Util::addscript('files', 'files');
+OCP\Util::addscript('files', 'navigation');
 OCP\Util::addscript('files', 'keyboardshortcuts');
 $tmpl = new OCP\Template('files', 'index', 'user');
 $tmpl->assign('dir', $dir);

apps/files/js/app.js

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2014
+ *
+ * @author Vincent Petry
+ * @copyright 2014 Vincent Petry <pvince81@owncloud.com>
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+if (!OCA.Files) {
+	OCA.Files = {};
+}
+
+$(document).ready(function() {
+	var nav = new OCA.Files.Navigation($('#app-navigation ul'));
+
+	nav.setSelectedItem('files');
+
+	// TODO: init file list, actions and others
+});
+

apps/files/js/navigation.js

@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2014
+ *
+ * @author Vincent Petry
+ * @copyright 2014 Vincent Petry <pvince81@owncloud.com>
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+(function() {
+
+	var Navigation = function($el) {
+		this.initialize($el);
+	};
+
+	Navigation.prototype = {
+
+		/**
+		 * Currently selected item in the list
+		 */
+		_selectedItem: null,
+
+		/**
+		 * Currently selected container
+		 */
+		$currentContent: null,
+
+		/**
+		 * Initializes the navigation from the given container
+		 * @param $el element containing the navigation
+		 */
+		initialize: function($el) {
+			this.$el = $el;
+			this._selectedItem = null;
+			this.$currentContent = null;
+			this._setupEvents();
+		},
+
+		/**
+		 * Setup UI events
+		 */
+		_setupEvents: function() {
+			this.$el.on('click', 'li a', _.bind(this._onClickItem, this));
+		},
+
+		/**
+		 * Switch the currently selected item, mark it as selected and
+		 * make the content container visible, if any.
+		 * @param string itemId id of the navigation item to select
+		 */
+		setSelectedItem: function(itemId) {
+			if (itemId === this._selectedItem) {
+				return;
+			}
+			this._selectedItem = itemId;
+			this.$el.find('li').removeClass('selected');
+			if (this.$currentContent) {
+				this.$currentContent.addClass('hidden');
+			}
+			this.$currentContent = $('#app-content-' + itemId);
+			this.$currentContent.removeClass('hidden');
+			this.$el.find('li[data-id=' + itemId + ']').addClass('selected');
+		},
+
+		/**
+		 * Event handler for when clicking on an item.
+		 */
+		_onClickItem: function(ev) {
+			var $target = $(ev.target);
+			var itemId = $target.closest('li').attr('data-id');
+			this.setSelectedItem(itemId);
+		}
+	};
+
+	OCA.Files.Navigation = Navigation;
+
+})();

apps/files/templates/appnavigation.php

@@ -1,9 +1,9 @@
 <div id="app-navigation">
 	<ul>
-		<li class="nav-allfiles"><a href="<?php p(OC_Helper::linkTo('files', '')) ?>"><?php p($l->t('All Files'));?></a></li>
+		<li data-id="files" class="nav-allfiles"><a href="#"><?php p($l->t('All Files'));?></a></li>
 		<li class="sep"></li>
 		<?php foreach ($_['navigationItems'] as $item) { ?>
-		<li class="nav-<?php p($item['appname']) ?>"><a href="<?php p(isset($item['href']) ? $item['href'] : '#') ?>"><?php p($item['name']);?></a></li>
+		<li data-id="<?php p($item['id']) ?>" class="nav-<?php p($item['id']) ?>"><a href="<?php p(isset($item['href']) ? $item['href'] : '#') ?>"><?php p($item['name']);?></a></li>
 		<?php } ?>
 	</ul>
 	<div id="app-settings">

apps/files/templates/index.php

@@ -113,7 +113,7 @@
 </div>
 </div><!-- closing app-content-files -->
 	<?php foreach ($_['appContents'] as $content) { ?>
-	<div id="app-content-<?php p($content['appname']) ?>" class="hidden">
+	<div id="app-content-<?php p($content['id']) ?>" class="hidden">
 	<?php print_unescaped($content['content']) ?>
 	</div>
 	<?php } ?>

apps/files_trashbin/appinfo/app.php

@@ -6,6 +6,7 @@ $l = OC_L10N::get('files_trashbin');
 
 \OCA\Files\App::getNavigationManager()->add(
 	array(
+		"id" => 'trashbin',
 		"appname" => 'files_trashbin',
 		"script" => 'index.php',
 		"order" => 1,

apps/files_trashbin/index.php

@@ -3,12 +3,14 @@
 // Check if we are a user
 OCP\User::checkLoggedIn();
 
-OCP\Util::addScript('files_trashbin', 'disableDefaultActions');
 
 $tmpl = new OCP\Template('files_trashbin', 'index', '');
-
+// TODO: re-enable after making sure the scripts doesn't
+// override the files app
+/*
+OCP\Util::addScript('files_trashbin', 'disableDefaultActions');
 OCP\Util::addStyle('files_trashbin', 'trash');
 OCP\Util::addScript('files_trashbin', 'filelist');
 OCP\Util::addScript('files_trashbin', 'trash');
-
+ */
 $tmpl->printPage();

core/js/js.js

@@ -1367,6 +1367,11 @@ OC.set=function(name, value) {
 	}
 })();
 
+/**
+ * Namespace for apps
+ */
+window.OCA = {};
+
 /**
  * select a range in an input field
  * @link http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area