From 5f3722ceac635cbd7364875773941bf61c36c22a Mon Sep 17 00:00:00 2001
From: Marco Dickert <marco@misterunknown.de>
Date: Tue, 21 Feb 2017 22:33:24 +0100
Subject: [PATCH 1/4] add editor options menu

---
 ifm.php    | 38 +++++++++++++++++++++++++++++++-------
 src/ifm.js | 38 +++++++++++++++++++++++++++++++-------
 2 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/ifm.php b/ifm.php
index 590d76c..b88ce4f 100644
--- a/ifm.php
+++ b/ifm.php
@@ -597,14 +597,38 @@ function IFM() {
 	this.showFileForm = function () {
 		var filename = arguments.length > 0 ? arguments[0] : "newfile.txt";
 		var content = arguments.length > 1 ? arguments[1] : "";
-		var overlay = '<form id="showFile">';
-		overlay += '<div class="modal-body"><fieldset><label>Filename:</label><input onkeypress="return ifm.preventEnter(event);" type="text" class="form-control" name="filename" value="'+filename+'" /><br>';
-		overlay += '<div id="content" name="content"></div><input type="checkbox" id="aceWordWrap"> word wrap</input></fieldset></div>';
-		overlay += '<div class="modal-footer"><button type="button" class="btn btn-default" onclick="ifm.saveFile();ifm.hideModal();return false;">Save';
-		overlay += '</button><button type="button" onclick="ifm.saveFile();return false;" class="btn btn-default">Save without closing</button>';
-		overlay += '<button type="button" class="btn btn-default" onclick="ifm.hideModal();return false;">Close</button></div></form>';
+		var overlay = '<form id="showFile">' +
+			'<div class="modal-body"><fieldset><label>Filename:</label><input onkeypress="return ifm.preventEnter(event);" type="text" class="form-control" name="filename" value="'+filename+'" /><br>' +
+			'<div id="content" name="content"></div>' +
+			'<button type="button" class="btn btn-default" id="editoroptions">editor options</button><div class="hide" id="editoroptions-head">options</div><div class="hide" id="editoroptions-content">' +
+			'<input type="checkbox" id="editor-wordwrap"> word wrap</input><br>' +
+			'<input type="checkbox" id="editor-softtabs"> use soft tabs</input>' +
+			'<div class="input-group"><span class="input-group-addon">tabsize</span><input class="form-control" type="text" size="2" id="editor-tabsize"title="tabsize"></div>' +
+			'</div></fieldset></div>' +
+			'<div class="modal-footer"><button type="button" class="btn btn-default" onclick="ifm.saveFile();ifm.hideModal();return false;">Save' +
+			'</button><button type="button" onclick="ifm.saveFile();return false;" class="btn btn-default">Save without closing</button>' +
+			'<button type="button" class="btn btn-default" onclick="ifm.hideModal();return false;">Close</button></div></form>';
 		self.showModal( overlay, { large: true } );
-		$('#ifmmodal').on('remove', function () { self.editor = null; self.fileChanged = false; });
+		$('#editoroptions').popover({
+			html: true,
+			title: function() { return $('#editoroptions-head').html(); },
+			content: function() {
+				var content = $('#editoroptions-content').clone()
+				var aceSession = self.editor.getSession();
+				content.removeClass( 'hide' );
+				content.find( '#editor-wordwrap' )
+					.prop( 'checked', ( aceSession.getOption( 'wrap' ) == 'off' ? false : true ) )
+					.on( 'change', function() { self.editor.setOption( 'wrap', $( this ).is( ':checked' ) ); });
+				content.find( '#editor-softtabs' )
+					.prop( 'checked', aceSession.getOption( 'useSoftTabs' ) )
+					.on( 'change', function() { self.editor.setOption( 'useSoftTabs', $( this ).is( ':checked' ) ); });
+				content.find( '#editor-tabsize' )
+					.val( aceSession.getOption( 'tabSize' ) )
+					.on( 'keydown', function( e ) { if( e.key == 'Enter' ) { self.editor.setOption( 'tabSize', $( this ).val() ); } });
+				return content;
+			}
+		});
+		$('#ifmmodal').on( 'remove', function () { self.editor = null; self.fileChanged = false; });
 		// Start ACE
 		self.editor = ace.edit("content");
 		self.editor.$blockScrolling = 'Infinity';
diff --git a/src/ifm.js b/src/ifm.js
index 8f11544..b7dcf16 100644
--- a/src/ifm.js
+++ b/src/ifm.js
@@ -162,14 +162,38 @@ function IFM() {
 	this.showFileForm = function () {
 		var filename = arguments.length > 0 ? arguments[0] : "newfile.txt";
 		var content = arguments.length > 1 ? arguments[1] : "";
-		var overlay = '<form id="showFile">';
-		overlay += '<div class="modal-body"><fieldset><label>Filename:</label><input onkeypress="return ifm.preventEnter(event);" type="text" class="form-control" name="filename" value="'+filename+'" /><br>';
-		overlay += '<div id="content" name="content"></div><input type="checkbox" id="aceWordWrap"> word wrap</input></fieldset></div>';
-		overlay += '<div class="modal-footer"><button type="button" class="btn btn-default" onclick="ifm.saveFile();ifm.hideModal();return false;">Save';
-		overlay += '</button><button type="button" onclick="ifm.saveFile();return false;" class="btn btn-default">Save without closing</button>';
-		overlay += '<button type="button" class="btn btn-default" onclick="ifm.hideModal();return false;">Close</button></div></form>';
+		var overlay = '<form id="showFile">' +
+			'<div class="modal-body"><fieldset><label>Filename:</label><input onkeypress="return ifm.preventEnter(event);" type="text" class="form-control" name="filename" value="'+filename+'" /><br>' +
+			'<div id="content" name="content"></div>' +
+			'<button type="button" class="btn btn-default" id="editoroptions">editor options</button><div class="hide" id="editoroptions-head">options</div><div class="hide" id="editoroptions-content">' +
+			'<input type="checkbox" id="editor-wordwrap"> word wrap</input><br>' +
+			'<input type="checkbox" id="editor-softtabs"> use soft tabs</input>' +
+			'<div class="input-group"><span class="input-group-addon">tabsize</span><input class="form-control" type="text" size="2" id="editor-tabsize"title="tabsize"></div>' +
+			'</div></fieldset></div>' +
+			'<div class="modal-footer"><button type="button" class="btn btn-default" onclick="ifm.saveFile();ifm.hideModal();return false;">Save' +
+			'</button><button type="button" onclick="ifm.saveFile();return false;" class="btn btn-default">Save without closing</button>' +
+			'<button type="button" class="btn btn-default" onclick="ifm.hideModal();return false;">Close</button></div></form>';
 		self.showModal( overlay, { large: true } );
-		$('#ifmmodal').on('remove', function () { self.editor = null; self.fileChanged = false; });
+		$('#editoroptions').popover({
+			html: true,
+			title: function() { return $('#editoroptions-head').html(); },
+			content: function() {
+				var content = $('#editoroptions-content').clone()
+				var aceSession = self.editor.getSession();
+				content.removeClass( 'hide' );
+				content.find( '#editor-wordwrap' )
+					.prop( 'checked', ( aceSession.getOption( 'wrap' ) == 'off' ? false : true ) )
+					.on( 'change', function() { self.editor.setOption( 'wrap', $( this ).is( ':checked' ) ); });
+				content.find( '#editor-softtabs' )
+					.prop( 'checked', aceSession.getOption( 'useSoftTabs' ) )
+					.on( 'change', function() { self.editor.setOption( 'useSoftTabs', $( this ).is( ':checked' ) ); });
+				content.find( '#editor-tabsize' )
+					.val( aceSession.getOption( 'tabSize' ) )
+					.on( 'keydown', function( e ) { if( e.key == 'Enter' ) { self.editor.setOption( 'tabSize', $( this ).val() ); } });
+				return content;
+			}
+		});
+		$('#ifmmodal').on( 'remove', function () { self.editor = null; self.fileChanged = false; });
 		// Start ACE
 		self.editor = ace.edit("content");
 		self.editor.$blockScrolling = 'Infinity';

From f4ff5ec549b05fcf3ddfec7232bd6b463a724c06 Mon Sep 17 00:00:00 2001
From: Marco Dickert <marco@misterunknown.de>
Date: Tue, 21 Feb 2017 22:35:17 +0100
Subject: [PATCH 2/4] removed highlighting with mouse click because of unwanted
 mobile/touchscreen behaviour

---
 ifm.php    | 2 --
 src/ifm.js | 2 --
 2 files changed, 4 deletions(-)

diff --git a/ifm.php b/ifm.php
index b88ce4f..1486c71 100644
--- a/ifm.php
+++ b/ifm.php
@@ -559,8 +559,6 @@ function IFM() {
 			$('.clickable-row').click(function(event) {
 				if( event.ctrlKey ) {
 					$(this).toggleClass( 'selectedItem' );
-				} else {
-					self.highlightItem( $(this) );
 				}
 			});
 		}
diff --git a/src/ifm.js b/src/ifm.js
index b7dcf16..0ff115b 100644
--- a/src/ifm.js
+++ b/src/ifm.js
@@ -124,8 +124,6 @@ function IFM() {
 			$('.clickable-row').click(function(event) {
 				if( event.ctrlKey ) {
 					$(this).toggleClass( 'selectedItem' );
-				} else {
-					self.highlightItem( $(this) );
 				}
 			});
 		}

From 1dd264b1b8b5851ee43eca8d206a06d33fa52689 Mon Sep 17 00:00:00 2001
From: Marco Dickert <marco@misterunknown.de>
Date: Tue, 21 Feb 2017 22:40:15 +0100
Subject: [PATCH 3/4] line break above editor option button

---
 ifm.php    | 2 +-
 src/ifm.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ifm.php b/ifm.php
index 1486c71..8e3199b 100644
--- a/ifm.php
+++ b/ifm.php
@@ -597,7 +597,7 @@ function IFM() {
 		var content = arguments.length > 1 ? arguments[1] : "";
 		var overlay = '<form id="showFile">' +
 			'<div class="modal-body"><fieldset><label>Filename:</label><input onkeypress="return ifm.preventEnter(event);" type="text" class="form-control" name="filename" value="'+filename+'" /><br>' +
-			'<div id="content" name="content"></div>' +
+			'<div id="content" name="content"></div><br>' +
 			'<button type="button" class="btn btn-default" id="editoroptions">editor options</button><div class="hide" id="editoroptions-head">options</div><div class="hide" id="editoroptions-content">' +
 			'<input type="checkbox" id="editor-wordwrap"> word wrap</input><br>' +
 			'<input type="checkbox" id="editor-softtabs"> use soft tabs</input>' +
diff --git a/src/ifm.js b/src/ifm.js
index 0ff115b..f21077a 100644
--- a/src/ifm.js
+++ b/src/ifm.js
@@ -162,7 +162,7 @@ function IFM() {
 		var content = arguments.length > 1 ? arguments[1] : "";
 		var overlay = '<form id="showFile">' +
 			'<div class="modal-body"><fieldset><label>Filename:</label><input onkeypress="return ifm.preventEnter(event);" type="text" class="form-control" name="filename" value="'+filename+'" /><br>' +
-			'<div id="content" name="content"></div>' +
+			'<div id="content" name="content"></div><br>' +
 			'<button type="button" class="btn btn-default" id="editoroptions">editor options</button><div class="hide" id="editoroptions-head">options</div><div class="hide" id="editoroptions-content">' +
 			'<input type="checkbox" id="editor-wordwrap"> word wrap</input><br>' +
 			'<input type="checkbox" id="editor-softtabs"> use soft tabs</input>' +

From cb9b1ffa17a505182fe95f539c6cf451e6acac08 Mon Sep 17 00:00:00 2001
From: Marco Dickert <marco@misterunknown.de>
Date: Tue, 21 Feb 2017 22:56:59 +0100
Subject: [PATCH 4/4] fixed highlighting of items, prepend new tasks to
 waitqueue instead of appending

---
 ifm.php    | 30 ++++++++++++++++--------------
 src/ifm.js | 30 ++++++++++++++++--------------
 2 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/ifm.php b/ifm.php
index 8e3199b..9d12ce3 100644
--- a/ifm.php
+++ b/ifm.php
@@ -1070,7 +1070,7 @@ function IFM() {
 			$(document.body).prepend('<div id="waitqueue"></div>');
 			//$("#waitqueue").on("mouseover", function() { $(this).toggleClass("left"); });
 		}
-		$("#waitqueue").append('<div id="'+id+'" class="panel panel-default"><div class="panel-body"><div class="progress"><div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemax="100" style="width:100%"></div><span class="progbarlabel">'+name+'</span></div></div></div>');
+		$("#waitqueue").prepend('<div id="'+id+'" class="panel panel-default"><div class="panel-body"><div class="progress"><div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemax="100" style="width:100%"></div><span class="progbarlabel">'+name+'</span></div></div></div>');
 	};
 	this.task_done = function(id) {
 		$("#"+id).remove();
@@ -1082,27 +1082,29 @@ function IFM() {
 		$('#'+id+' .progress-bar').css('width', progress+'%').attr('aria-valuenow', progress);    
 	};
 	this.highlightItem = function( param ) {
+		var highlight = function( el ) {
+			el.addClass( 'highlightedItem' ).siblings().removeClass( 'highlightedItem' );
+			el.find( 'a' ).first().focus();
+			if( ! self.isElementInViewport( el ) ) {
+				var scrollOffset =  0;
+				if( param=="prev" )
+					scrollOffset = el.offset().top - ( window.innerHeight || document.documentElement.clientHeight ) + el.height() + 15;
+				else
+					scrollOffset = el.offset().top - 55;
+				$('html, body').animate( { scrollTop: scrollOffset }, 500 );
+			}
+		};
 		if( param.jquery ) {
-			param.addClass( 'highlightedItem' ).siblings().removeClass( 'highlightedItem' );
+			highlight( param );
 		} else {
 			var highlightedItem = $('.highlightedItem');
 			if( ! highlightedItem.length ) {
-				$('#filetable tbody tr:first-child').addClass( 'highlightedItem' );
+				highlight( $('#filetable tbody tr:first-child') );
 			} else  {
 				var newItem = ( param=="next" ? highlightedItem.next() : highlightedItem.prev() );
 
 				if( newItem.is( 'tr' ) ) {
-					highlightedItem.removeClass( 'highlightedItem' );
-					newItem.addClass( 'highlightedItem' );
-					newItem.find( 'a' ).first().focus();
-					if( ! this.isElementInViewport( newItem ) ) {
-						var scrollOffset =  0;
-						if( param=="next" )
-							scrollOffset = highlightedItem.offset().top - 15;
-						else
-							scrollOffset = highlightedItem.offset().top - ( window.innerHeight || document.documentElement.clientHeight ) + highlightedItem.height() + 15;
-						$('html, body').animate( { scrollTop: scrollOffset }, 500 );
-					}
+					highlight( newItem );
 				}
 			}
 		}
diff --git a/src/ifm.js b/src/ifm.js
index f21077a..109e908 100644
--- a/src/ifm.js
+++ b/src/ifm.js
@@ -635,7 +635,7 @@ function IFM() {
 			$(document.body).prepend('<div id="waitqueue"></div>');
 			//$("#waitqueue").on("mouseover", function() { $(this).toggleClass("left"); });
 		}
-		$("#waitqueue").append('<div id="'+id+'" class="panel panel-default"><div class="panel-body"><div class="progress"><div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemax="100" style="width:100%"></div><span class="progbarlabel">'+name+'</span></div></div></div>');
+		$("#waitqueue").prepend('<div id="'+id+'" class="panel panel-default"><div class="panel-body"><div class="progress"><div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemax="100" style="width:100%"></div><span class="progbarlabel">'+name+'</span></div></div></div>');
 	};
 	this.task_done = function(id) {
 		$("#"+id).remove();
@@ -647,27 +647,29 @@ function IFM() {
 		$('#'+id+' .progress-bar').css('width', progress+'%').attr('aria-valuenow', progress);    
 	};
 	this.highlightItem = function( param ) {
+		var highlight = function( el ) {
+			el.addClass( 'highlightedItem' ).siblings().removeClass( 'highlightedItem' );
+			el.find( 'a' ).first().focus();
+			if( ! self.isElementInViewport( el ) ) {
+				var scrollOffset =  0;
+				if( param=="prev" )
+					scrollOffset = el.offset().top - ( window.innerHeight || document.documentElement.clientHeight ) + el.height() + 15;
+				else
+					scrollOffset = el.offset().top - 55;
+				$('html, body').animate( { scrollTop: scrollOffset }, 500 );
+			}
+		};
 		if( param.jquery ) {
-			param.addClass( 'highlightedItem' ).siblings().removeClass( 'highlightedItem' );
+			highlight( param );
 		} else {
 			var highlightedItem = $('.highlightedItem');
 			if( ! highlightedItem.length ) {
-				$('#filetable tbody tr:first-child').addClass( 'highlightedItem' );
+				highlight( $('#filetable tbody tr:first-child') );
 			} else  {
 				var newItem = ( param=="next" ? highlightedItem.next() : highlightedItem.prev() );
 
 				if( newItem.is( 'tr' ) ) {
-					highlightedItem.removeClass( 'highlightedItem' );
-					newItem.addClass( 'highlightedItem' );
-					newItem.find( 'a' ).first().focus();
-					if( ! this.isElementInViewport( newItem ) ) {
-						var scrollOffset =  0;
-						if( param=="next" )
-							scrollOffset = highlightedItem.offset().top - 15;
-						else
-							scrollOffset = highlightedItem.offset().top - ( window.innerHeight || document.documentElement.clientHeight ) + highlightedItem.height() + 15;
-						$('html, body').animate( { scrollTop: scrollOffset }, 500 );
-					}
+					highlight( newItem );
 				}
 			}
 		}