Load OCS apps in an ajax call to avoid blocking the WUI.

settings/apps.php

@@ -60,6 +60,7 @@ function app_sort($a, $b){
 }
 usort($apps, 'app_sort');
 
+/*
 // apps from external repo via OCS
  $catagoryNames=OC_OCSClient::getCategories();
  if(is_array($catagoryNames)){
@@ -89,7 +90,7 @@ usort($apps, 'app_sort');
 		}
  	}
  }
-
+*/
 
 
 $tmpl = new OC_Template( "settings", "apps", "user" );

settings/css/settings.css

@@ -43,11 +43,17 @@ div.quota>span { position:absolute; right:0em; white-space:nowrap; top: 0.7em }
 select.quota.active { background: #fff; }
 
 /* APPS */
-li { color:#888; }
+li { color:#888; white-space: nowrap; }
 li.active { color:#000; }
 small.externalapp { color:#FFF; background-color:#BBB; font-weight:bold; font-size:6pt; padding:4px; border-radius: 4px;}
+small.externalapp.list { float: right; }
 span.version { margin-left:3em; color:#ddd; }
 
+.app { position: relative; display: inline-block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; z-index: 100; transition: .2s max-width linear; -o-transition: .2s max-width linear; -moz-transition: .2s max-width linear; -webkit-transition: .2s max-width linear; -ms-transition: .2s max-width linear; }
+.app.externalapp { max-width: 10em; }
+/* Transition to complete width! */
+.app:hover, .app:active { max-width: inherit; }
+
 /* LOG */
 #log { white-space:normal; }
 

settings/js/apps.js

@@ -1,13 +1,51 @@
 /**
  * Copyright (c) 2011, Robin Appelman <icewind1991@gmail.com>
+ * Copyright (c) 2012, Thomas Tanghus <thomas@tanghus.net>
  * This file is licensed under the Affero General Public License version 3 or later.
  * See the COPYING-README file.
  */
 
+OC.Settings = OC.Settings || {};
+OC.Settings.Apps = OC.Settings.Apps || {
+	loadOCS:function() {
+		$.getJSON(OC.filePath('settings', 'ajax', 'apps/ocs.php'), function(jsondata) {
+			if(jsondata.status == 'success'){
+				var apps = jsondata.data;
+				$.each(apps, function(b, appdata) {
+					OC.Settings.Apps.insertApp(appdata);
+				});
+			} else {
+				OC.dialogs.alert(jsondata.data.message, t('core', 'Error'));
+			}
+		});
+	},
+	insertApp:function(appdata) {
+		var applist = $('#leftcontent li');
+		var app =
+				$('<li data-id="'+appdata.id+'" data-type="external" data-installed="0">'
+				+ '<a class="app externalapp" href="'+OC.filePath('settings', 'apps', 'index.php')+'&appid=' + appdata.id+'">'
+				+ appdata.name+'</a><small class="externalapp list">3rd party</small></li>');
+		app.data('app', appdata);
+		var added = false;
+		applist.each(function() {
+			if(!parseInt($(this).data('installed')) && $(this).find('a').text().toLowerCase() > appdata.name.toLowerCase()) {
+				$(this).before(app);
+				added = true;
+				return false; // dang, remember this to get out of loop
+			}
+		});
+		if(!added) {
+			applist.last().after(app);
+		}
+		return app;
+	}
+}
+
 $(document).ready(function(){
 	$('#leftcontent li').each(function(index,li){
-		var app=$.parseJSON($(this).children('span').text());
+		var app = $.parseJSON($(this).children('span').text());
 		$(li).data('app',app);
+		$(this).find('span.hidden').remove();
 	});
 	$('#leftcontent li').keydown(function(event) {
 		if (event.which == 13 || event.which == 32) {
@@ -15,8 +53,12 @@ $(document).ready(function(){
 		}
 		return false;
 	});
-	$('#leftcontent li').click(function(){
-		var app=$(this).data('app');
+
+	$(document).on('click', '#leftcontent', function(event){
+		var tgt = $(event.target);
+		if (tgt.is('li') || tgt.is('a')) {
+			var item = tgt.is('li') ? $(tgt) : $(tgt).parent();
+			var app = item.data('app');
 			$('#rightcontent p.license').show();
 			$('#rightcontent span.name').text(app.name);
 			$('#rightcontent small.externalapp').text(app.internallabel);
@@ -41,6 +83,7 @@ $(document).ready(function(){
 			} else {
 				$('#rightcontent p.appslink').hide();
 			}
+		}
 		return false;
 	});
 	$('#rightcontent input.enable').click(function(){
@@ -86,4 +129,6 @@ $(document).ready(function(){
 			$('#leftcontent').animate({scrollTop: $(item).offset().top-70}, 'slow','swing');
 		}
 	}
+
+	OC.Settings.Apps.loadOCS();
 });

settings/templates/apps.php

@@ -11,12 +11,13 @@
 </div>
 <ul id="leftcontent">
 	<?php foreach($_['apps'] as $app):?>
-	<li <?php if($app['active']) echo 'class="active"'?> data-id="<?php echo $app['id'] ?>">
-		<a href="?appid=<?php echo $app['id'] ?>"><?php  echo htmlentities($app['name']) ?></a>
+	<li <?php if($app['active']) echo 'class="active"'?> data-id="<?php echo $app['id'] ?>"
+		data-type="<?php echo $app['internal'] ? 'internal' : 'external' ?>" data-installed="1">
+		<a class="app<?php if(!$app['internal']) echo ' externalapp' ?>" href="?appid=<?php echo $app['id'] ?>"><?php echo htmlentities($app['name']) ?></a>
 		<span class="hidden">
 			<?php OC_JSON::encodedPrint($app,false) ?>
 		</span>
-		<?php  if(!$app['internal']) echo '<small class="externalapp">3rd party</small>' ?>
+		<?php  if(!$app['internal']) echo '<small class="externalapp list">3rd party</small>' ?>
 	</li>
 	<?php endforeach;?>
 </ul>