Removed old code

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

Removed duplicate collapse-button and changed api-endpoints

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

Removed app-navigation-caption from apps.scss

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

Changed api-endpoints

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

Fixed Codestyle (.js)

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

Hid away extended Settings

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

Fixed reverse state

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

Fixed Missing reverse after changing sort-strategy

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

Fixed Copyright-Header

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

Removed UI-Flickering

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

hid dotmenu on toggle while favorites are empty

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

Added Draggable to listelements (WIP)

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

Rebuild appnavigation.php with recursive function to allow easy implementation of sublists

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

Fixed draggable Sublist-Elements

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

Fixed draggable Sublist-Elements

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

Added date-modified sorting option to quickaccess

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

Added custom order sorting option to quickaccess

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

Added custom order sorting option to quickaccess

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

Added fallback for custom ordering

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

2 files changed, 238 insertions, 206 deletions

diff --git a/apps/files/js/navigation.js b/apps/files/js/navigation.js
index db39cac987e..b83cd82128c 100644
--- a/apps/files/js/navigation.js
+++ b/apps/files/js/navigation.js
@@ -1,10 +1,9 @@
 /*
- * Copyright (c) 2014
+ * @Copyright 2014 Vincent Petry <pvince81@owncloud.com>
  *
  * @author Vincent Petry
- * @copyright 2014 Vincent Petry <pvince81@owncloud.com>
+ * @author Felix Nüsse <felix.nuesse@t-online.de>
  *
- * Edited by: Felix Nüsse <felix.nuesse@t-online.de> 2018
  *
  * This file is licensed under the Affero General Public License version 3
  * or later.
@@ -13,7 +12,7 @@
  *
  */
 
-(function() {
+(function () {
 
 	/**
 	 * @class OCA.Files.Navigation
@@ -21,7 +20,7 @@
 	 *
 	 * @param $el element containing the navigation
 	 */
-	var Navigation = function($el) {
+	var Navigation = function ($el) {
 		this.initialize($el);
 	};
 
@@ -42,29 +41,44 @@
 
 		/**
 		 * Strategy by which the quickaccesslist is sorted
+		 *
+		 * Possible Strategies:
+		 * customorder
+		 * datemodified
+		 * date
+		 * alphabet
+		 *
 		 */
-		$sortingStrategy: 'alphabet',
+		$sortingStrategy: 'customorder',
+
+		/**
+		 * Key for the quick-acces-list
+		 */
+		$quickAccessListKey: 'sublist-favorites',
 		/**
 		 * Initializes the navigation from the given container
 		 *
 		 * @private
 		 * @param $el element containing the navigation
 		 */
-		initialize: function($el) {
+		initialize: function ($el) {
 			this.$el = $el;
 			this._activeItem = null;
 			this.$currentContent = null;
 			this._setupEvents();
-			this.initialSort();
+			this.setInitialQuickaccessSettings();
+
+
 		},
 
 		/**
 		 * Setup UI events
 		 */
-		_setupEvents: function() {
+		_setupEvents: function () {
 			this.$el.on('click', 'li a', _.bind(this._onClickItem, this))
 			this.$el.on('click', 'li button', _.bind(this._onClickMenuButton, this));
-			this.$el.on('click', 'li input', _.bind(this._onClickMenuItem, this));
+			this._setOnDrag();
+
 		},
 
 		/**
@@ -72,16 +86,16 @@
 		 *
 		 * @return app container
 		 */
-		getActiveContainer: function() {
+		getActiveContainer: function () {
 			return this.$currentContent;
 		},
 
 		/**
 		 * Returns the currently active item
-		 * 
+		 *
 		 * @return item ID
 		 */
-		getActiveItem: function() {
+		getActiveItem: function () {
 			return this._activeItem;
 		},
 
@@ -92,12 +106,15 @@
 		 * @param string itemId id of the navigation item to select
 		 * @param array options "silent" to not trigger event
 		 */
-		setActiveItem: function(itemId, options) {
+		setActiveItem: function (itemId, options) {
 			var oldItemId = this._activeItem;
 			if (itemId === this._activeItem) {
 				if (!options || !options.silent) {
 					this.$el.trigger(
-						new $.Event('itemChanged', {itemId: itemId, previousItemId: oldItemId})
+						new $.Event('itemChanged', {
+							itemId: itemId,
+							previousItemId: oldItemId
+						})
 					);
 				}
 				return;
@@ -114,7 +131,10 @@
 			if (!options || !options.silent) {
 				this.$currentContent.trigger(jQuery.Event('show'));
 				this.$el.trigger(
-					new $.Event('itemChanged', {itemId: itemId, previousItemId: oldItemId})
+					new $.Event('itemChanged', {
+						itemId: itemId,
+						previousItemId: oldItemId
+					})
 				);
 			}
 		},
@@ -122,14 +142,14 @@
 		/**
 		 * Returns whether a given item exists
 		 */
-		itemExists: function(itemId) {
+		itemExists: function (itemId) {
 			return this.$el.find('li[data-id=' + itemId + ']').length;
 		},
 
 		/**
 		 * Event handler for when clicking on an item.
 		 */
-		_onClickItem: function(ev) {
+		_onClickItem: function (ev) {
 			var $target = $(ev.target);
 			var itemId = $target.closest('li').attr('data-id');
 			if (!_.isUndefined(itemId)) {
@@ -137,136 +157,148 @@
 			}
 			ev.preventDefault();
 		},
+
 		/**
-		 * Event handler for when clicking on an three-dot-menu.
+		 * Event handler for when dragging an item
 		 */
-		_onClickMenuButton: function(ev) {
-			var $target = $(ev.target);
-			var itemId = $target.closest('button').attr('id');
-			var qaSelector= '#quickaccess-list';
-
-			if(itemId==='button-collapseQuickAccess'){
-
-				document.getElementById('enableQuickAccess').checked=!document.getElementById('enableQuickAccess').checked;
-				$.get(OC.generateUrl("/apps/files/api/v1/showquickaccess"),  {show: document.getElementById('enableQuickAccess').checked}, function(data, status){
-				});
-
-				$("#favorites-toggle" ).toggleClass('open');
-
-			}
-
-			if(itemId==='button-favorites'){
-				document.getElementById('menu-favorites').classList.toggle('open');
-			}
-			ev.preventDefault();
+		_setOnDrag: function () {
+			var scope=this;
+			$(function () {
+				if (document.getElementById(scope.$quickAccessListKey.toString()).hasAttribute("draggable")) {
+					$("#sublist-favorites").sortable({
+						update: function (event, ui) {
+							var list = document.getElementById(scope.$quickAccessListKey.toString()).getElementsByTagName('li');
+							var string=[];
+							for (var j = 0; j < list.length; j++) {
+								var Object = {id:j, name:scope.getCompareValue(list,j,'alphabet') };
+								string.push(Object);
+							}
+							var resultorder=JSON.stringify(string);
+							console.log(resultorder);
+							$.get(OC.generateUrl("/apps/files/api/v1/quickaccess/set/CustomSortingOrder"),{
+							order: resultorder}, function (data, status) {});
+						}
+					});
+				}else{
+					if(scope.$sortingStrategy === 'customorder'){
+						scope.$sortingStrategy = 'datemodified';
+					}
+				}
+			});
 		},
 
 		/**
-		 * Event handler for when clicking on a menuitem.
+		 * Event handler for clicking a button
 		 */
-		_onClickMenuItem: function(ev) {
+		_onClickMenuButton: function (ev) {
+			var $target = $(ev.target);
+			var itemId = $target.closest('button').attr('id');
 
-			var qaSelector= '#quickaccess-list';
-			var qaKey= 'quickaccess-list';
+			var collapsibleToggles = [];
+			var dotmenuToggles = [];
 
-			var itemId = $(ev.target).closest('input').attr('id');
-			var list = document.getElementById(qaKey).getElementsByTagName('li');
+			// The collapsibleToggles-Array consists of a list of Arrays. Every subarray must contain the Button to listen to at the 0th index,
+			// and the parent, which should be toggled at the first arrayindex.
+			collapsibleToggles.push(["#button-collapse-favorites", "#button-collapse-parent-favorites"]);
 
-			if(itemId==='enableQuickAccess' ){
-				$.get(OC.generateUrl("/apps/files/api/v1/showquickaccess"),  {show: document.getElementById('enableQuickAccess').checked}, function(data, status){
-				});
-				$("#favorites-toggle" ).toggleClass('open');
-				document.getElementById('menu-favorites').classList.toggle('open');
-			}
+			// The dotmenuToggles-Array consists of a list of Arrays. Every subarray must contain the Button to listen to at the 0th index,
+			// and the parent, which should be toggled at the first arrayindex.
+			dotmenuToggles.push(["#dotmenu-button-favorites", "dotmenu-content-favorites"]);
 
-			if(itemId==='sortByAlphabet'){
-				//Prevents deselecting Group-Item
-				if(!document.getElementById('sortByAlphabet').checked){
-					ev.preventDefault();
-					return;
+
+			collapsibleToggles.forEach(function foundToggle (item) {
+				if (item[0] === ("#" + itemId)) {
+					$(item[1]).toggleClass('open');
+					var show=1;
+					if(!$(item[1]).hasClass('open')){
+						show=0;
+					}
+					$.get(OC.generateUrl("/apps/files/api/v1/quickaccess/set/showList"), {show: show}, function (data, status) {
+					});
 				}
-				this.sortingStrategy='alphabet';
-				document.getElementById('sortByDate').checked=false;
-				$.get(OC.generateUrl("/apps/files/api/v1/setsortingstrategy"), {strategy: this.sortingStrategy}, function(data, status){});
-				this.QuickSort(list, 0, list.length - 1);
-				document.getElementById('menu-favorites').classList.toggle('open');
-			}
+			});
 
-			if(itemId==='sortByDate'){
-				//Prevents deselecting Group-Item
-				if(!document.getElementById('sortByDate').checked){
-					ev.preventDefault();
-					return;
+			dotmenuToggles.forEach(function foundToggle (item) {
+				if (item[0] === ("#" + itemId)) {
+					document.getElementById(item[1]).classList.toggle('open');
 				}
-				this.sortingStrategy='date';
-				document.getElementById('sortByAlphabet').checked=false;
-				$.get(OC.generateUrl("/apps/files/api/v1/setsortingstrategy"), {strategy: this.sortingStrategy}, function(data, status){});
-				this.QuickSort(list, 0, list.length - 1);
-				document.getElementById('menu-favorites').classList.toggle('open');
-			}
+			});
 
-			if(itemId==='enableReverse'){
-				this.reverse(list);
-				var state = document.getElementById('enableReverse').checked;
-				$.get(OC.generateUrl("/apps/files/api/v1/setreversequickaccess"), {reverse: state}, function(data, status){});
-				document.getElementById('menu-favorites').classList.toggle('open');
-			}
-			//ev.preventDefault();
+			ev.preventDefault();
 		},
 
 		/**
 		 * Sort initially as setup of sidebar for QuickAccess
 		 */
-		initialSort: function() {
+		setInitialQuickaccessSettings: function () {
+
+			var quickAccesKey = this.$quickAccessListKey;
+			var list = document.getElementById(quickAccesKey).getElementsByTagName('li');
+
+			var sort = true;
+			var reverse = false;
+			if (this.$sortingStrategy === 'datemodified') {
+				sort = false;
+				reverse = false;
+
+				var scope = this;
+				$.get(OC.generateUrl("/apps/files/api/v1/quickaccess/get/FavoriteFolders/"), function (data, status) {
+					for (var i = 0; i < data.favoriteFolders.length; i++) {
+						for (var j = 0; j < list.length; j++) {
+							if (scope.getCompareValue(list, j, 'alphabet').toLowerCase() === data.favoriteFolders[i].name.toLowerCase()) {
+								list[j].setAttribute("mtime", data.favoriteFolders[i].mtime);
+							}
+						}
+					}
+					scope.QuickSort(list, 0, list.length - 1);
+					scope.reverse(list);
+				});
 
-			var domRevState=document.getElementById('enableReverse').checked;
-			var domSortAlphabetState=document.getElementById('sortByAlphabet').checked;
-			var domSortDateState=document.getElementById('sortByDate').checked;
 
-			var qaKey= 'quickaccess-list';
-			var list = document.getElementById(qaKey).getElementsByTagName('li');
+			} else if (this.$sortingStrategy === 'alphabet') {
+				sort = true;
+			} else if (this.$sortingStrategy === 'date') {
+				sort = true;
+			} else if (this.$sortingStrategy === 'customorder') {
+				var scope = this;
+				$.get(OC.generateUrl("/apps/files/api/v1/quickaccess/get/CustomSortingOrder"), function (data, status) {
+					console.log("load order:");
+					var ordering=JSON.parse(data)
+					console.log(ordering);
+					for (var i = 0; i < ordering.length; i++) {
+						for (var j = 0; j < list.length; j++) {
+							if (scope.getCompareValue(list, j, 'alphabet').toLowerCase() === ordering[i].name.toLowerCase()) {
+								list[j].setAttribute("folderPosition", ordering[i].id);
+							}
+						}
+					}
+					scope.QuickSort(list, 0, list.length - 1);
+				});
 
-			if(domSortAlphabetState){
-				this.sortingStrategy='alphabet';
-			}
-			if(domSortDateState){
-				this.sortingStrategy='date';
+				sort = false;
 			}
 
-			this.QuickSort(list, 0, list.length - 1);
-
-			if(domRevState){
+			if (sort) {
+				this.QuickSort(list, 0, list.length - 1);
+			}
+			if (reverse) {
 				this.reverse(list);
 			}
 
-			/*This creates flashes the UI, which is bad userexperience. It is the cleaner way to do it, that is why i haven't deleted it yet.
-			var scope=this;
-			$.get(OC.generateUrl("/apps/files/api/v1/getsortingstrategy"), function(data, status){
-				scope.sortingStrategy=data;
-				scope.QuickSort(list, 0, list.length - 1);
-
-			});
-
-			$.get(OC.generateUrl("/apps/files/api/v1/getreversequickaccess"), function(data, status){
-				if(data){
-					scope.reverse(list);
-				}
-			});
-			*/
 		},
 
 		/**
 		 * Sorting-Algorithm for QuickAccess
 		 */
-		QuickSort: function(list, start, end) {
-			var lastmatch;
-			if(list.length > 1){
-				lastmatch = this.quicksort_helper(list, start, end);
-				if(start < lastmatch - 1){
-					this.QuickSort(list, start, lastmatch - 1);
+		QuickSort: function (list, start, end) {
+			var lastMatch;
+			if (list.length > 1) {
+				lastMatch = this.quicksort_helper(list, start, end);
+				if (start < lastMatch - 1) {
+					this.QuickSort(list, start, lastMatch - 1);
 				}
-				if(lastmatch < end){
-					this.QuickSort(list, lastmatch, end);
+				if (lastMatch < end) {
+					this.QuickSort(list, lastMatch, end);
 				}
 			}
 		},
@@ -274,20 +306,20 @@
 		/**
 		 * Sorting-Algorithm-Helper for QuickAccess
 		 */
-		quicksort_helper: function(list, start, end) {
+		quicksort_helper: function (list, start, end) {
 			var pivot = Math.floor((end + start) / 2);
-			var pivotelem = this.getCompareValue(list,pivot);
-			var	i = start;
-			var	j = end;
+			var pivotElement = this.getCompareValue(list, pivot);
+			var i = start;
+			var j = end;
 
-			while(i <= j){
-				while(this.getCompareValue(list,i) < pivotelem){
+			while (i <= j) {
+				while (this.getCompareValue(list, i) < pivotElement) {
 					i++;
 				}
-				while(this.getCompareValue(list,j) > pivotelem){
+				while (this.getCompareValue(list, j) > pivotElement) {
 					j--;
 				}
-				if(i <= j){
+				if (i <= j) {
 					this.swap(list, i, j);
 					i++;
 					j--;
@@ -300,11 +332,20 @@
 		 * Sorting-Algorithm-Helper for QuickAccess
 		 * This method allows easy access to the element which is sorted by.
 		 */
-		getCompareValue: function(nodes, int){
-			if(this.sortingStrategy==='alphabet'){
+		getCompareValue: function (nodes, int, strategy) {
+
+			if ((typeof strategy === 'undefined')) {
+				strategy = this.$sortingStrategy;
+			}
+
+			if (strategy === 'alphabet') {
 				return nodes[int].getElementsByTagName('a')[0].innerHTML.toLowerCase();
-			}else if(this.sortingStrategy==='date'){
+			} else if (strategy === 'date') {
 				return nodes[int].getAttribute('folderPos').toLowerCase();
+			} else if (strategy === 'datemodified') {
+				return nodes[int].getAttribute('mtime');
+			}else if (strategy === 'customorder') {
+				return nodes[int].getAttribute('folderPosition');
 			}
 			return nodes[int].getElementsByTagName('a')[0].innerHTML.toLowerCase();
 		},
@@ -313,7 +354,7 @@
 		 * Sorting-Algorithm-Helper for QuickAccess
 		 * This method allows easy swapping of elements.
 		 */
-		swap: function(list, j, i){
+		swap: function (list, j, i) {
 			list[i].before(list[j]);
 			list[j].before(list[i]);
 		},
@@ -321,10 +362,10 @@
 		/**
 		 * Reverse QuickAccess-List
 		 */
-		reverse: function(list){
-			var len=list.length-1;
-			for(var i = 0; i < len/2; i++) {
-				this.swap(list, i, len-i);
+		reverse: function (list) {
+			var len = list.length - 1;
+			for (var i = 0; i < len / 2; i++) {
+				this.swap(list, i, len - i);
 			}
 		}
 
diff --git a/apps/files/js/tagsplugin.js b/apps/files/js/tagsplugin.js
index ce35f8bcdfd..7729a540d32 100644
--- a/apps/files/js/tagsplugin.js
+++ b/apps/files/js/tagsplugin.js
@@ -10,11 +10,11 @@
 
 /* global Handlebars */
 
-(function(OCA) {
+(function (OCA) {
 
 	_.extend(OC.Files.Client, {
-		PROPERTY_TAGS:	'{' + OC.Files.Client.NS_OWNCLOUD + '}tags',
-		PROPERTY_FAVORITE:	'{' + OC.Files.Client.NS_OWNCLOUD + '}favorite'
+		PROPERTY_TAGS: '{' + OC.Files.Client.NS_OWNCLOUD + '}tags',
+		PROPERTY_FAVORITE: '{' + OC.Files.Client.NS_OWNCLOUD + '}favorite'
 	});
 
 	var TEMPLATE_FAVORITE_MARK =
@@ -30,7 +30,7 @@
 	 * @param {boolean} state true if starred, false otherwise
 	 * @return {string} icon class for star image
 	 */
-	function getStarIconClass(state) {
+	function getStarIconClass (state) {
 		return state ? 'icon-starred' : 'icon-star';
 	}
 
@@ -40,7 +40,7 @@
 	 * @param {boolean} state true if starred, false otherwise
 	 * @return {Object} jQuery object
 	 */
-	function renderStar(state) {
+	function renderStar (state) {
 		if (!this._template) {
 			this._template = Handlebars.compile(TEMPLATE_FAVORITE_MARK);
 		}
@@ -57,7 +57,7 @@
 	 * @param {Object} $favoriteMarkEl favorite mark element
 	 * @param {boolean} state true if starred, false otherwise
 	 */
-	function toggleStar($favoriteMarkEl, state) {
+	function toggleStar ($favoriteMarkEl, state) {
 		$favoriteMarkEl.removeClass('icon-star icon-starred').addClass(getStarIconClass(state));
 		$favoriteMarkEl.toggleClass('permanent', state);
 	}
@@ -65,73 +65,64 @@
 	/**
 	 * Remove Item from Quickaccesslist
 	 *
-	 * @param {String} $appfolder folder to be removed
+	 * @param {String} appfolder folder to be removed
 	 */
-	function removeFavoriteFromList(appfolder) {
+	function removeFavoriteFromList (appfolder) {
 
-		var qaKey= 'quickaccess-list';
-		var listUL = document.getElementById(qaKey);
-		var list = listUL.getElementsByTagName('li');
-		var appname=appfolder.substring(appfolder.lastIndexOf("/")+1, appfolder.length);
+		var quickAccessList = 'sublist-favorites';
+		var collapsibleButtonId = 'button-collapse-favorites';
+		var listULElements = document.getElementById(quickAccessList);
+		var listLIElements = listULElements.getElementsByTagName('li');
+		var appName = appfolder.substring(appfolder.lastIndexOf("/") + 1, appfolder.length);
 
-		for(var i = 0; i <= list.length-1; i++) {
-			if(appname === list[i].getElementsByTagName('a')[0].innerHTML){
-				list[i].remove();
+		for (var i = 0; i <= listLIElements.length - 1; i++) {
+			if (appName === listLIElements[i].getElementsByTagName('a')[0].innerHTML) {
+				listLIElements[i].remove();
 			}
 		}
 
-		if(listUL.childElementCount==0){
-			var dotmenu = document.getElementById("quickaccessbutton");
-			dotmenu.style.display='none';
-
-			var collapsibleButton = document.getElementById("button-collapseQuickAccess");
-			collapsibleButton.style.display='none';
-
-			$("#favorites-toggle" ).removeClass('collapsible');
+		if (listULElements.childElementCount === 0) {
+			var collapsibleButton = document.getElementById(collapsibleButtonId);
+			collapsibleButton.style.display = 'none';
+			$("#favorites-toggle").removeClass('collapsible');
 		}
 	}
 
 	/**
 	 * Add Item to Quickaccesslist
 	 *
-	 * @param {String} $appfolder folder to be added
+	 * @param {String} appfolder folder to be added
 	 */
-	function addFavoriteToList(appfolder) {
-		var qaKey= 'quickaccess-list';
-		var listUL = document.getElementById(qaKey);
-		var list = listUL.getElementsByTagName('li');
-
-		var appname=appfolder.substring(appfolder.lastIndexOf("/")+1, appfolder.length);
-
-		var a = document.createElement('A');
-		a.setAttribute("href","/cloud/index.php/apps/files/?dir="+appfolder);
-		a.setAttribute("class","nav-icon-files svg");
-		a.innerHTML=appname;
-
-		var len=list.length+1;
-		var li = document.createElement('li');
-		li.setAttribute("data-id", "/cloud/index.php/apps/files/?dir="+appfolder);
-		li.setAttribute("class", "nav-"+appname);
-		li.setAttribute("folderpos", len.toString());
-		li.appendChild(a);
-
-
-		if(listUL.childElementCount<=0){
-			listUL.appendChild(li);
-			var dotmenu = document.getElementById("quickaccessbutton");
-			dotmenu.style.display='';
-
-			var collapsibleButton = document.getElementById("button-collapseQuickAccess");
-			collapsibleButton.style.display='';
-
-			$("#favorites-toggle" ).addClass('collapsible');
-		}else{
-			list[list.length-1].after(li);
+	function addFavoriteToList (appfolder) {
+		var quickAccessList = 'sublist-favorites';
+		var collapsibleButtonId = 'button-collapse-favorites';
+		var listULElements = document.getElementById(quickAccessList);
+		var listLIElements = listULElements.getElementsByTagName('li');
+
+		var appName = appfolder.substring(appfolder.lastIndexOf("/") + 1, appfolder.length);
+
+		var innerTagA = document.createElement('A');
+		innerTagA.setAttribute("href", "/cloud/index.php/apps/files/?dir=" + appfolder);
+		innerTagA.setAttribute("class", "nav-icon-files svg");
+		innerTagA.innerHTML = appName;
+
+		var length = listLIElements.length + 1;
+		var innerTagLI = document.createElement('li');
+		innerTagLI.setAttribute("data-id", "/cloud/index.php/apps/files/?dir=" + appfolder);
+		innerTagLI.setAttribute("class", "nav-" + appName);
+		innerTagLI.setAttribute("folderpos", length.toString());
+		innerTagLI.appendChild(innerTagA);
+
+
+		if (listULElements.childElementCount <= 0) {
+			listULElements.appendChild(innerTagLI);
+			var collapsibleButton = document.getElementById(collapsibleButtonId);
+			collapsibleButton.style.display = '';
+
+			$("#favorites-toggle").addClass('collapsible');
+		} else {
+			listLIElements[listLIElements.length - 1].after(innerTagLI);
 		}
-
-		//list[list.length-1].after(li);
-		//document.getElementById('menu-favorites').classList.toggle('open');
-		//this.QuickSort(list, 0, list.length - 1);
 	}
 
 	OCA.Files = OCA.Files || {};
@@ -155,12 +146,12 @@
 			'shares.link'
 		],
 
-		_extendFileActions: function(fileActions) {
+		_extendFileActions: function (fileActions) {
 			var self = this;
 
 			fileActions.registerAction({
 				name: 'Favorite',
-				displayName: function(context) {
+				displayName: function (context) {
 					var $file = context.$file;
 					var isFavorite = $file.data('favorite') === true;
 
@@ -177,7 +168,7 @@
 				mime: 'all',
 				order: -100,
 				permissions: OC.PERMISSION_NONE,
-				iconClass: function(fileName, context) {
+				iconClass: function (fileName, context) {
 					var $file = context.$file;
 					var isFavorite = $file.data('favorite') === true;
 
@@ -187,7 +178,7 @@
 
 					return 'icon-starred';
 				},
-				actionHandler: function(fileName, context) {
+				actionHandler: function (fileName, context) {
 					var $favoriteMarkEl = context.$file.find('.favorite-mark');
 					var $file = context.$file;
 					var fileInfo = context.fileList.files[$file.index()];
@@ -219,7 +210,7 @@
 						tags,
 						$favoriteMarkEl,
 						isFavorite
-					).then(function(result) {
+					).then(function (result) {
 						context.fileInfoModel.trigger('busy', context.fileInfoModel, false);
 						// response from server should contain updated tags
 						var newTags = result.tags;
@@ -235,10 +226,10 @@
 			});
 		},
 
-		_extendFileList: function(fileList) {
+		_extendFileList: function (fileList) {
 			// extend row prototype
 			var oldCreateRow = fileList._createRow;
-			fileList._createRow = function(fileData) {
+			fileList._createRow = function (fileData) {
 				var $tr = oldCreateRow.apply(this, arguments);
 				var isFavorite = false;
 				if (fileData.tags) {
@@ -253,7 +244,7 @@
 				return $tr;
 			};
 			var oldElementToFile = fileList.elementToFile;
-			fileList.elementToFile = function($el) {
+			fileList.elementToFile = function ($el) {
 				var fileInfo = oldElementToFile.apply(this, arguments);
 				var tags = $el.attr('data-tags');
 				if (_.isUndefined(tags)) {
@@ -266,22 +257,22 @@
 			};
 
 			var oldGetWebdavProperties = fileList._getWebdavProperties;
-			fileList._getWebdavProperties = function() {
+			fileList._getWebdavProperties = function () {
 				var props = oldGetWebdavProperties.apply(this, arguments);
 				props.push(OC.Files.Client.PROPERTY_TAGS);
 				props.push(OC.Files.Client.PROPERTY_FAVORITE);
 				return props;
 			};
 
-			fileList.filesClient.addFileInfoParser(function(response) {
+			fileList.filesClient.addFileInfoParser(function (response) {
 				var data = {};
 				var props = response.propStat[0].properties;
 				var tags = props[OC.Files.Client.PROPERTY_TAGS];
 				var favorite = props[OC.Files.Client.PROPERTY_FAVORITE];
 				if (tags && tags.length) {
-					tags = _.chain(tags).filter(function(xmlvalue) {
+					tags = _.chain(tags).filter(function (xmlvalue) {
 						return (xmlvalue.namespaceURI === OC.Files.Client.NS_OWNCLOUD && xmlvalue.nodeName.split(':')[1] === 'tag');
-					}).map(function(xmlvalue) {
+					}).map(function (xmlvalue) {
 						return xmlvalue.textContent || xmlvalue.text;
 					}).value();
 				}
@@ -296,7 +287,7 @@
 			});
 		},
 
-		attach: function(fileList) {
+		attach: function (fileList) {
 			if (this.allowedLists.indexOf(fileList.id) < 0) {
 				return;
 			}
@@ -312,7 +303,7 @@
 		 * @param {Object} $favoriteMarkEl favorite mark element
 		 * @param {boolean} isFavorite Was the item favorited before
 		 */
-		applyFileTags: function(fileName, tagNames, $favoriteMarkEl, isFavorite) {
+		applyFileTags: function (fileName, tagNames, $favoriteMarkEl, isFavorite) {
 			var encodedPath = OC.encodePath(fileName);
 			while (encodedPath[0] === '/') {
 				encodedPath = encodedPath.substr(1);
@@ -325,10 +316,10 @@
 				}),
 				dataType: 'json',
 				type: 'POST'
-			}).fail(function(response) {
+			}).fail(function (response) {
 				var message = '';
 				// show message if it is available
-				if(response.responseJSON && response.responseJSON.message) {
+				if (response.responseJSON && response.responseJSON.message) {
 					message = ': ' + response.responseJSON.message;
 				}
 				OC.Notification.show(t('files', 'An error occurred while trying to update the tags' + message), {type: 'error'});