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)

diff --git a/.jshintrc b/.jshintrc
index 77f9e9f143d4c155ea03549df18202cef36decd4..d5da3e30828193581ecb113f423a69ab83e02bf6 100644 (file)
--- a/.jshintrc
+++ b/.jshintrc
@@ -26,6 +26,7 @@
                "fakeServer": true,
                "_": true,
                "OC": true,
+               "OCA": true,
                "t": true,
                "n": true
        }

diff --git a/apps/files/index.php b/apps/files/index.php
index ea57a548a22ab9f766ea21f14aa7366fd37ffc8b..07c828fffef99b8d153458c21e3aeb941ccd3e39 100644 (file)
--- a/apps/files/index.php
+++ b/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);

diff --git a/apps/files/js/app.js b/apps/files/js/app.js
new file mode 100644 (file)
index 0000000..87f7e2b
--- /dev/null
+++ b/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
+});
+

diff --git a/apps/files/js/navigation.js b/apps/files/js/navigation.js
new file mode 100644 (file)
index 0000000..f53abdd
--- /dev/null
+++ b/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;
+
+})();

diff --git a/apps/files/templates/appnavigation.php b/apps/files/templates/appnavigation.php
index a2fffd4c4b2a601db3a079c1710890f4bd39140b..52e4284d3e5dbf6f207a0b7fd59876caa8e372cf 100644 (file)
--- a/apps/files/templates/appnavigation.php
+++ b/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">

diff --git a/apps/files/templates/index.php b/apps/files/templates/index.php
index 335e2b2acd78a8a07949500416ae6abe1ed0a3d7..e93e93140d13428d46c64e001b932b81363df455 100644 (file)
--- a/apps/files/templates/index.php
+++ b/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 } ?>

diff --git a/apps/files_trashbin/appinfo/app.php b/apps/files_trashbin/appinfo/app.php
index a045b1f0f515436c72f413f6bbe91cdd474a3154..219c5d6cb7e139310e86ab7bb67842651ca868ea 100644 (file)
--- a/apps/files_trashbin/appinfo/app.php
+++ b/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,

diff --git a/apps/files_trashbin/index.php b/apps/files_trashbin/index.php
index 59258a6cf16acea700703517f27521e93009b2c1..4c5527822fbb7344a3918c123e21fbe9d2138345 100644 (file)
--- a/apps/files_trashbin/index.php
+++ b/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();

diff --git a/core/js/js.js b/core/js/js.js
index 27bc3c651e33125ef27986314b3576df4ac27477..93f4196f056b80efe6aa39e97cc2cb03eb5f0113 100644 (file)
--- a/core/js/js.js
+++ b/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