Apps drag and drop feature

8 files changed, 184 insertions, 8 deletions

diff --git a/view/css/bootstrap-red.css b/view/css/bootstrap-red.css
index 79817ebd0..d1e8b87cf 100644
--- a/view/css/bootstrap-red.css
+++ b/view/css/bootstrap-red.css
@@ -52,6 +52,12 @@ nav .dropdown-menu {
 .navbar-dark .navbar-toggler {
 	color: rgba(255,255,255,1);
 }
+
+.offcanvas,
+.modal-backdrop.fade {
+	transition: none;
+}
+
 /* nav overrides end */
 
 label {
diff --git a/view/js/mod_cloud.js b/view/js/mod_cloud.js
index 5ca1f52a9..928ce8689 100644
--- a/view/js/mod_cloud.js
+++ b/view/js/mod_cloud.js
@@ -47,7 +47,7 @@ $(document).ready(function () {
 		let id = $(this).data('id');
 		activate_id(id);
 		$('#id_categories_' + id).tagsinput({
-			tagClass: 'badge badge-pill badge-warning text-dark'
+			tagClass: 'badge rounded-pill bg-warning text-dark'
 		});
 		$('#cloud-tool-categories-' + id).show();
 	});
@@ -278,7 +278,7 @@ $(document).ready(function () {
 		disable_multi_acl();
 
 		$('#id_categories').tagsinput({
-			tagClass: 'badge badge-pill badge-warning text-dark'
+			tagClass: 'badge rounded-pill bg-warning text-dark'
 		});
 
 		$('#cloud-multi-tool-submit, #cloud-multi-tool-categories').show();
diff --git a/view/php/theme_init.php b/view/php/theme_init.php
index bf34f210a..4aa695aeb 100644
--- a/view/php/theme_init.php
+++ b/view/php/theme_init.php
@@ -33,6 +33,7 @@ head_add_js('/library/colorbox/jquery.colorbox-min.js');
 
 head_add_js('/library/jquery.AreYouSure/jquery.are-you-sure.js');
 head_add_js('/library/tableofcontents/jquery.toc.js');
+head_add_js('/library/Sortable/Sortable.min.js');
 head_add_js('/vendor/desandro/imagesloaded/imagesloaded.pkgd.min.js');
 
 /**
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 9312d8390..c0c03d4f8 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -50,7 +50,7 @@ $(document).ready(function() {
 	});
 
 	$("input[data-role=cat-tagsinput]").tagsinput({
-		tagClass: 'badge badge-pill badge-warning text-dark'
+		tagClass: 'badge rounded-pill bg-warning text-dark'
 	});
 
 	$('a.disabled').click(function(e) {
diff --git a/view/tpl/app.tpl b/view/tpl/app.tpl
index 774b75b31..597e38637 100644
--- a/view/tpl/app.tpl
+++ b/view/tpl/app.tpl
@@ -1,7 +1,7 @@
 {{if ! ($navapps || $order)}}
 <div class="app-container">
 	<div class="app-detail{{if $deleted}} app-deleted{{/if}}">
-		<a href="{{$app.url}}"{{if $app.target}} target="{{$app.target}}"{{/if}}{{if $app.desc}} title="{{$app.desc}}{{if $app.price}} ({{$app.price}}){{/if}}"{{else}}title="{{$app.name}}"{{/if}}>{{if $icon}}<i class="app-icon fa fa-fw fa-{{$icon}}"></i>{{else}}<img src="{{$app.photo}}" width="80" height="80" />{{/if}}
+		<a class="app-link" href="{{$app.url}}"{{if $app.target}} target="{{$app.target}}"{{/if}}{{if $app.desc}} title="{{$app.desc}}{{if $app.price}} ({{$app.price}}){{/if}}"{{else}}title="{{$app.name}}"{{/if}}{{if $installed}} data-papp="{{$app.papp}}" data-icon="{{$icon}}" data-url="{{$app.url}}"{{/if}}>{{if $icon}}<i class="app-icon fa fa-fw fa-{{$icon}}"></i>{{else}}<img src="{{$app.photo}}" width="80" height="80" />{{/if}}
 			<div class="app-name" style="text-align:center;">{{$app.name}}</div>
 		</a>
 	</div>
diff --git a/view/tpl/item_categories.tpl b/view/tpl/item_categories.tpl
index fa07fa39f..68f8944bc 100644
--- a/view/tpl/item_categories.tpl
+++ b/view/tpl/item_categories.tpl
@@ -1,7 +1,7 @@
 {{if $categories}}
 <!--div class="categorytags"-->
 {{foreach $categories as $cat}}
-<span class="item-category badge badge-pill badge-warning"><i class="fa fa-asterisk"></i>&nbsp;{{if $cat.url}}<a class="text-dark" href="{{$cat.url}}">{{$cat.term}}</a>{{else}}{{$cat.term}}{{/if}}</span>
+<span class="item-category badge rounded-pill bg-warning text-dark"><i class="fa fa-asterisk"></i>&nbsp;{{if $cat.url}}<a class="text-dark" href="{{$cat.url}}">{{$cat.term}}</a>{{else}}{{$cat.term}}{{/if}}</span>
 {{/foreach}}
 <!--/div-->
 {{/if}}
diff --git a/view/tpl/item_filer.tpl b/view/tpl/item_filer.tpl
index f814b374c..3ecf9aa41 100644
--- a/view/tpl/item_filer.tpl
+++ b/view/tpl/item_filer.tpl
@@ -1,7 +1,7 @@
 {{if $categories}}
 <!--div class="filesavetags"-->
 {{foreach $categories as $cat}}
-<span class="item-category badge badge-pill badge-danger"><i class="fa fa-folder-o"></i>&nbsp;{{$cat.term}}&nbsp;<a href="{{$cat.removelink}}" class="text-white" title="{{$remove}}" onClick="itemFilerRm({{$cat.id}}, '{{$cat.term}}'); return false;"><i class="fa fa-close"></i></a></span>
+<span class="item-category badge rounded-pill bg-danger"><i class="fa fa-folder-o"></i>&nbsp;{{$cat.term}}&nbsp;<a href="{{$cat.removelink}}" class="text-white" title="{{$remove}}" onClick="itemFilerRm({{$cat.id}}, '{{$cat.term}}'); return false;"><i class="fa fa-close"></i></a></span>
 {{/foreach}}
 <!--/div-->
 {{/if}}
diff --git a/view/tpl/navbar_default.tpl b/view/tpl/navbar_default.tpl
index 6c3cf3ff5..5e46c2263 100644
--- a/view/tpl/navbar_default.tpl
+++ b/view/tpl/navbar_default.tpl
@@ -168,7 +168,7 @@
 			{{/if**}}
 			{{if $navbar_apps}}
 			{{foreach $navbar_apps as $navbar_app}}
-			<li>
+			<li class="nav-app-sortable">
 			{{$navbar_app}}
 			</li>
 			{{/foreach}}
@@ -262,13 +262,182 @@
 			{{$sysapps}}
 		</div>
 		{{/if}}
+		<div id="nav-app-bin-container" class="d-lg-none">
+		{{foreach $navbar_apps as $navbar_app}}
+			{{$navbar_app|replace:'navbar-app nav-link':'dropdown-item nav-app-sortable'|replace:'fa':'generic-icons-nav fa'}}
+		{{/foreach}}
+		<div class="dropdown-divider"></div>
+		</div>
+		{{if $is_owner}}
+		<div id="app-bin-container" data-token="{{$form_security_token}}">
+		{{/if}}
 		{{foreach $nav_apps as $nav_app}}
 			{{$nav_app}}
 		{{/foreach}}
 		{{if $is_owner}}
+		</div>
+		{{/if}}
+		{{if $is_owner}}
 		<div class="dropdown-divider"></div>
 		<a class="dropdown-item" href="/apps"><i class="generic-icons-nav fa fa-fw fa-plus-circle"></i>{{$addapps}}</a>
-		<a class="dropdown-item" href="/apporder"><i class="generic-icons-nav fa fa-fw fa-sort"></i>{{$orderapps}}</a>
 		{{/if}}
 	</div>
 </div>
+{{if $is_owner}}
+<script>
+	var app_bin = document.getElementById('app-bin-container');
+	new Sortable(app_bin, {
+		animation: 150,
+		delay: 200,
+		delayOnTouchOnly: true,
+		onEnd: function (e) {
+			let app_str = '';
+			$('#app-bin-container a').each(function () {
+				if(app_str.length) {
+					app_str = app_str.concat(',', $(this).text());
+				}
+				else {
+					app_str = app_str.concat($(this).text());
+				}
+			});
+			$.post(
+				'pconfig',
+				{
+					'aj' : 1,
+					'cat' : 'system',
+					'k' : 'app_order',
+					'v' : app_str,
+					'form_security_token' : $('#app-bin-container').data('token')
+				}
+			);
+
+		}
+	});
+
+	var nav_app_bin = document.getElementById('nav-right');
+	new Sortable(nav_app_bin, {
+		animation: 150,
+		delay: 200,
+		delayOnTouchOnly: true,
+		draggable: '.nav-app-sortable',
+		onEnd: function (e) {
+			let nav_app_str = '';
+			$('#nav-right .nav-app-sortable').each(function () {
+				if(nav_app_str.length) {
+					nav_app_str = nav_app_str.concat(',', $(this).text());
+				}
+				else {
+					nav_app_str = nav_app_str.concat($(this).text());
+				}
+			});
+			$.post(
+				'pconfig',
+				{
+					'aj' : 1,
+					'cat' : 'system',
+					'k' : 'app_pin_order',
+					'v' : nav_app_str,
+					'form_security_token' : $('#app-bin-container').data('token')
+				}
+			);
+
+		}
+	});
+
+	var nav_app_bin_container = document.getElementById('nav-app-bin-container');
+	new Sortable(nav_app_bin_container, {
+		animation: 150,
+		delay: 200,
+		delayOnTouchOnly: true,
+		onEnd: function (e) {
+			let nav_app_str = '';
+			$('#nav-app-bin-container a').each(function () {
+				if(nav_app_str.length) {
+					nav_app_str = nav_app_str.concat(',', $(this).text());
+				}
+				else {
+					nav_app_str = nav_app_str.concat($(this).text());
+				}
+			});
+			$.post(
+				'pconfig',
+				{
+					'aj' : 1,
+					'cat' : 'system',
+					'k' : 'app_pin_order',
+					'v' : nav_app_str,
+					'form_security_token' : $('#app-bin-container').data('token')
+				}
+			);
+
+		}
+	});
+
+	$('#nav-right').on('dragover', function (e) {
+		e.preventDefault();
+		e.stopPropagation();
+		$(this).css('box-shadow', '0px 0px 3px red inset');
+	});
+	$('#nav-right').on('dragleave', function (e) {
+		e.preventDefault();
+		e.stopPropagation();
+		$(this).css('box-shadow', '');
+
+	});
+	$('#nav-right').on('drop', function (e) {
+		e.preventDefault();
+		e.stopPropagation();
+		$(this).css('box-shadow', '');
+
+		if (papp === null)
+			return;
+
+		$.post(
+			'appman',
+			{
+				'aj' : 1,
+				'feature' : 'nav_pinned_app',
+				'papp' : papp
+			}
+		);
+
+		$('<li><a class="navbar-app nav-link" href="' + app_url + '"><i class="fa fa-fw fa-' + app_icon + '"></i></li>').insertBefore('#app-menu');
+	});
+
+	$('#app-menu').on('dragover', function (e) {
+		e.preventDefault();
+		e.stopPropagation();
+		$(this).css('box-shadow', '0px 0px 1px red inset');
+	});
+	$('#app-menu').on('dragleave', function (e) {
+		e.preventDefault();
+		e.stopPropagation();
+		$(this).css('box-shadow', '');
+
+	});
+	$('#app-menu').on('drop', function (e) {
+		e.preventDefault();
+		e.stopPropagation();
+		$(this).css('box-shadow', '');
+
+		if (papp === null)
+			return;
+
+		$.post(
+			'appman',
+			{
+				'aj' : 1,
+				'feature' : 'nav_featured_app',
+				'papp' : papp
+			}
+		);
+	});
+
+	var papp, app_icon, app_url;
+	$(document).on('dragstart', function (e) {
+		papp = e.target.dataset.papp || null;
+		app_icon = e.target.dataset.icon || null;
+		app_url = e.target.dataset.url || null;
+	});
+</script>
+{{/if}}