From 3a12e4542df893804e3c0617352992978db145db Mon Sep 17 00:00:00 2001
From: Marco Dickert <marco@misterunknown.de>
Date: Fri, 21 Jul 2017 15:25:22 +0200
Subject: [PATCH] enable animations

---
 build/libifm.php                  | 5 ++++-
 ifm.php                           | 5 ++++-
 src/includes/animation.css        | 1 +
 src/main.php                      | 1 +
 src/templates/modal.copymove.html | 2 +-
 5 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 src/includes/animation.css

diff --git a/build/libifm.php b/build/libifm.php
index a953752..4251d82 100644
--- a/build/libifm.php
+++ b/build/libifm.php
@@ -285,7 +285,7 @@ f00bar;
 <fieldset>
 	<div class="modal-body">
 		<label>Select destination:</label>
-		<div id="copyMoveTree"><span class="icon icon-spin5"></span></div>
+		<div id="copyMoveTree"><div class="text-center"><span class="icon icon-spin5 animate-spin"></span></div></div>
 	</div>
 	<div class="modal-footer">
 		<button type="button" class="btn btn-default" id="copyButton">copy</button>
@@ -576,6 +576,8 @@ f00bar;
 .icon-share:before { content: '\f1e0'; } /* '' */
 .icon-share-squared:before { content: '\f1e1'; } /* '' */
 .icon-trash:before { content: '\f1f8'; } /* '' */ <?php print '</style>
+			<style type="text/css">';?> .animate-spin{-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear;display:inline-block}@-moz-keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-o-keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-ms-keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
+ <?php print '</style>
 			<style type="text/css">';?> body {
 	padding-top: 70px;
 	overflow-y: scroll;
@@ -1988,6 +1990,7 @@ function IFM( params ) {
 					case "remoteUpload": $this->remoteUpload( $_REQUEST ); break;
 					case "multidelete": $this->deleteMultipleFiles( $_REQUEST ); break;
 					case "getFolderTree":
+						sleep(10);
 						echo json_encode( array_merge( array( 0 => array( "text" => "/ [root]", "nodes" => array(), "dataAttributes" => array( "path" => realpath( $this->config['root_dir'] ) ) ) ), $this->getFolderTreeRecursive( $this->config['root_dir'] ) ) );
 						break;
 					default:
diff --git a/ifm.php b/ifm.php
index 16b182b..30a0f45 100644
--- a/ifm.php
+++ b/ifm.php
@@ -285,7 +285,7 @@ f00bar;
 <fieldset>
 	<div class="modal-body">
 		<label>Select destination:</label>
-		<div id="copyMoveTree"><span class="icon icon-spin5"></span></div>
+		<div id="copyMoveTree"><div class="text-center"><span class="icon icon-spin5 animate-spin"></span></div></div>
 	</div>
 	<div class="modal-footer">
 		<button type="button" class="btn btn-default" id="copyButton">copy</button>
@@ -576,6 +576,8 @@ f00bar;
 .icon-share:before { content: '\f1e0'; } /* '' */
 .icon-share-squared:before { content: '\f1e1'; } /* '' */
 .icon-trash:before { content: '\f1f8'; } /* '' */ <?php print '</style>
+			<style type="text/css">';?> .animate-spin{-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear;display:inline-block}@-moz-keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-o-keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-ms-keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
+ <?php print '</style>
 			<style type="text/css">';?> body {
 	padding-top: 70px;
 	overflow-y: scroll;
@@ -1988,6 +1990,7 @@ function IFM( params ) {
 					case "remoteUpload": $this->remoteUpload( $_REQUEST ); break;
 					case "multidelete": $this->deleteMultipleFiles( $_REQUEST ); break;
 					case "getFolderTree":
+						sleep(10);
 						echo json_encode( array_merge( array( 0 => array( "text" => "/ [root]", "nodes" => array(), "dataAttributes" => array( "path" => realpath( $this->config['root_dir'] ) ) ) ), $this->getFolderTreeRecursive( $this->config['root_dir'] ) ) );
 						break;
 					default:
diff --git a/src/includes/animation.css b/src/includes/animation.css
new file mode 100644
index 0000000..28b4027
--- /dev/null
+++ b/src/includes/animation.css
@@ -0,0 +1 @@
+.animate-spin{-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear;display:inline-block}@-moz-keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-o-keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-ms-keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
diff --git a/src/main.php b/src/main.php
index 2b6e7bd..4b293bb 100644
--- a/src/main.php
+++ b/src/main.php
@@ -124,6 +124,7 @@ f00bar;
 		print '
 			<style type="text/css">';?> @@@src/includes/bootstrap.min.css@@@ <?php print '</style>
 			<style type="text/css">';?> @@@src/includes/fontello-embedded.css@@@ <?php print '</style>
+			<style type="text/css">';?> @@@src/includes/animation.css@@@ <?php print '</style>
 			<style type="text/css">';?> @@@src/style.css@@@ <?php print '</style>
 		';
 	}
diff --git a/src/templates/modal.copymove.html b/src/templates/modal.copymove.html
index c82dc2f..f8451e6 100644
--- a/src/templates/modal.copymove.html
+++ b/src/templates/modal.copymove.html
@@ -2,7 +2,7 @@
 <fieldset>
 	<div class="modal-body">
 		<label>Select destination:</label>
-		<div id="copyMoveTree"><span class="icon icon-spin5"></span></div>
+		<div id="copyMoveTree"><div class="text-center"><span class="icon icon-spin5 animate-spin"></span></div></div>
 	</div>
 	<div class="modal-footer">
 		<button type="button" class="btn btn-default" id="copyButton">copy</button>