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)){
@@ -70,7 +71,7 @@ usort($apps, 'app_sort');
 		// show only external apps that are not exist yet
 		$local=false;
  		foreach($apps as $a){
-			if($a['name']==$app['name']) $local=true;			
+			if($a['name']==$app['name']) $local=true;
 		}
 
 		if(!$local) {
@@ -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,31 +53,36 @@ $(document).ready(function(){
 		}
 		return false;
 	});
-	$('#leftcontent li').click(function(){
+
-		var app=$(this).data('app');
+	$(document).on('click', '#leftcontent', function(event){
-		$('#rightcontent p.license').show();
+		var tgt = $(event.target);
-		$('#rightcontent span.name').text(app.name);
+		if (tgt.is('li') || tgt.is('a')) {
-		$('#rightcontent small.externalapp').text(app.internallabel);
+			var item = tgt.is('li') ? $(tgt) : $(tgt).parent();
-		if (app.version) {
+			var app = item.data('app');
-			$('#rightcontent span.version').text(app.version);
+			$('#rightcontent p.license').show();
-		} else {
+			$('#rightcontent span.name').text(app.name);
-			$('#rightcontent span.version').text('');
+			$('#rightcontent small.externalapp').text(app.internallabel);
-		}
+			if (app.version) {
-		$('#rightcontent p.description').text(app.description);
+				$('#rightcontent span.version').text(app.version);
-		$('#rightcontent img.preview').attr('src',app.preview);
+			} else {
-		$('#rightcontent small.externalapp').attr('style','visibility:visible');
+				$('#rightcontent span.version').text('');
-		$('#rightcontent span.author').text(app.author);
+			}
-		$('#rightcontent span.licence').text(app.licence);
+			$('#rightcontent p.description').text(app.description);
-		
+			$('#rightcontent img.preview').attr('src',app.preview);
-		$('#rightcontent input.enable').show();
+			$('#rightcontent small.externalapp').attr('style','visibility:visible');
-		$('#rightcontent input.enable').val((app.active)?t('settings','Disable'):t('settings','Enable'));
+			$('#rightcontent span.author').text(app.author);
-		$('#rightcontent input.enable').data('appid',app.id);
+			$('#rightcontent span.licence').text(app.licence);
-		$('#rightcontent input.enable').data('active',app.active);
+
-		if ( app.internal == false ) {
+			$('#rightcontent input.enable').show();
-			$('#rightcontent p.appslink').show();
+			$('#rightcontent input.enable').val((app.active)?t('settings','Disable'):t('settings','Enable'));
-			$('#rightcontent a').attr('href','http://apps.owncloud.com/content/show.php?content='+app.id);
+			$('#rightcontent input.enable').data('appid',app.id);
-		} else {
+			$('#rightcontent input.enable').data('active',app.active);
-			$('#rightcontent p.appslink').hide();
+			if ( app.internal == false ) {
+				$('#rightcontent p.appslink').show();
+				$('#rightcontent a').attr('href','http://apps.owncloud.com/content/show.php?content='+app.id);
+			} else {
+				$('#rightcontent p.appslink').hide();
+			}
 		}
 		return false;
 	});
@@ -77,7 +120,7 @@ $(document).ready(function(){
 			}
 		}
 	});
-	
+
 	if(appid) {
 		var item = $('#leftcontent li[data-id="'+appid+'"]');
 		if(item) {
@@ -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'] ?>">
+	<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>
+		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>