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)
This commit is contained in:
Vincent Petry 2014-05-08 19:00:42 +02:00
parent 88ebb15f1d
commit fb10bf4048
9 changed files with 124 additions and 7 deletions

View File

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

View File

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

25
apps/files/js/app.js Normal file
View File

@ -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
});

View File

@ -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;
})();

View File

@ -1,9 +1,9 @@
<div id="app-navigation"> <div id="app-navigation">
<ul> <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> <li class="sep"></li>
<?php foreach ($_['navigationItems'] as $item) { ?> <?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 } ?> <?php } ?>
</ul> </ul>
<div id="app-settings"> <div id="app-settings">

View File

@ -113,7 +113,7 @@
</div> </div>
</div><!-- closing app-content-files --> </div><!-- closing app-content-files -->
<?php foreach ($_['appContents'] as $content) { ?> <?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']) ?> <?php print_unescaped($content['content']) ?>
</div> </div>
<?php } ?> <?php } ?>

View File

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

View File

@ -3,12 +3,14 @@
// Check if we are a user // Check if we are a user
OCP\User::checkLoggedIn(); OCP\User::checkLoggedIn();
OCP\Util::addScript('files_trashbin', 'disableDefaultActions');
$tmpl = new OCP\Template('files_trashbin', 'index', ''); $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::addStyle('files_trashbin', 'trash');
OCP\Util::addScript('files_trashbin', 'filelist'); OCP\Util::addScript('files_trashbin', 'filelist');
OCP\Util::addScript('files_trashbin', 'trash'); OCP\Util::addScript('files_trashbin', 'trash');
*/
$tmpl->printPage(); $tmpl->printPage();

View File

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