|
|
@ -1,12 +1,13 @@ |
|
|
;(function($) { |
|
|
;(function($) { |
|
|
"use strict"; |
|
|
'use strict'; |
|
|
|
|
|
|
|
|
$.Browser = { |
|
|
$.Browser = { |
|
|
defaults: { |
|
|
defaults: { |
|
|
title: 'Choose Directory', |
|
|
title: 'Choose Directory (or enter manually)', |
|
|
url: sbRoot + '/browser/', |
|
|
url: sbRoot + '/browser/', |
|
|
autocompleteURL: sbRoot + '/browser/complete', |
|
|
autocompleteURL: sbRoot + '/browser/complete', |
|
|
includeFiles: 0 |
|
|
includeFiles: 0, |
|
|
|
|
|
showBrowseButton: !0 |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
@ -14,7 +15,7 @@ |
|
|
|
|
|
|
|
|
function browse(path, endpoint, includeFiles) { |
|
|
function browse(path, endpoint, includeFiles) { |
|
|
|
|
|
|
|
|
if (currentBrowserPath == path) { |
|
|
if (path === currentBrowserPath) { |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -26,68 +27,91 @@ |
|
|
|
|
|
|
|
|
fileBrowserDialog.dialog('option', 'dialogClass', 'browserDialog busy'); |
|
|
fileBrowserDialog.dialog('option', 'dialogClass', 'browserDialog busy'); |
|
|
|
|
|
|
|
|
currentRequest = $.getJSON(endpoint, { path: path, includeFiles: includeFiles }, function (data) { |
|
|
currentRequest = $.getJSON(endpoint, {path: path, includeFiles: includeFiles}, function(data){ |
|
|
fileBrowserDialog.empty(); |
|
|
fileBrowserDialog.empty(); |
|
|
var first_val = data[0]; |
|
|
var firstVal = data[0], i = 0, list, link = null; |
|
|
var i = 0; |
|
|
data = $.grep(data, function(){ |
|
|
var list, link = null; |
|
|
|
|
|
data = $.grep(data, function (value) { |
|
|
|
|
|
return i++ != 0; |
|
|
return i++ != 0; |
|
|
}); |
|
|
}); |
|
|
$('<h2>').text(first_val.current_path).appendTo(fileBrowserDialog); |
|
|
$('<input type="text" class="form-control input-sm">') |
|
|
|
|
|
.val(firstVal.currentPath) |
|
|
|
|
|
.on('keypress', function(e){ |
|
|
|
|
|
if (13 === e.which) { |
|
|
|
|
|
browse(e.target.value, endpoint, includeFiles); |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
.appendTo(fileBrowserDialog) |
|
|
|
|
|
.fileBrowser({showBrowseButton: !1}) |
|
|
|
|
|
.on('autocompleteselect', |
|
|
|
|
|
function(e, ui){browse(ui.item.value, endpoint, includeFiles); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
list = $('<ul>').appendTo(fileBrowserDialog); |
|
|
list = $('<ul>').appendTo(fileBrowserDialog); |
|
|
$.each(data, function (i, entry) { |
|
|
$.each(data, function(i, entry){ |
|
|
link = $("<a href='javascript:void(0)' />").click(function () { browse(entry.path, endpoint, includeFiles); }).text(entry.name); |
|
|
link = $('<a href="javascript:void(0)">').on('click', |
|
|
$('<span class="ui-icon ui-icon-folder-collapsed"></span>').prependTo(link); |
|
|
function(){ |
|
|
link.hover( |
|
|
if (entry.isFile) { |
|
|
function () {$("span", this).addClass("ui-icon-folder-open"); }, |
|
|
currentBrowserPath = entry.path; |
|
|
function () {$("span", this).removeClass("ui-icon-folder-open"); } |
|
|
$('.browserDialog .ui-button:contains("Ok")').click(); |
|
|
); |
|
|
} else { |
|
|
|
|
|
browse(entry.path, endpoint, includeFiles); |
|
|
|
|
|
} |
|
|
|
|
|
}).text(entry.name); |
|
|
|
|
|
|
|
|
|
|
|
if (entry.isFile) { |
|
|
|
|
|
link.prepend('<span class="ui-icon ui-icon-blank"></span>'); |
|
|
|
|
|
} else { |
|
|
|
|
|
link.prepend('<span class="ui-icon ui-icon-folder-collapsed"></span>') |
|
|
|
|
|
.on('mouseenter', function(){$('span', this).addClass('ui-icon-folder-open');}) |
|
|
|
|
|
.on('mouseleave', function(){$('span', this).removeClass('ui-icon-folder-open');}); |
|
|
|
|
|
} |
|
|
link.appendTo(list); |
|
|
link.appendTo(list); |
|
|
}); |
|
|
}); |
|
|
$("a", list).wrap('<li class="ui-state-default ui-corner-all">'); |
|
|
$('a', list).wrap('<li class="ui-state-default ui-corner-all">'); |
|
|
fileBrowserDialog.dialog('option', 'dialogClass', 'browserDialog'); |
|
|
fileBrowserDialog.dialog('option', 'dialogClass', 'browserDialog'); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
$.fn.nFileBrowser = function (callback, options) { |
|
|
$.fn.nFileBrowser = function(callback, options){ |
|
|
options = $.extend({}, $.Browser.defaults, options); |
|
|
options = $.extend({}, $.Browser.defaults, options); |
|
|
|
|
|
|
|
|
// make a fileBrowserDialog object if one doesn't exist already
|
|
|
// make a fileBrowserDialog object if one doesn't exist already
|
|
|
if (!fileBrowserDialog) { |
|
|
if (fileBrowserDialog) { |
|
|
|
|
|
fileBrowserDialog.dialog('option', 'title', options.title); |
|
|
|
|
|
} else { |
|
|
// set up the jquery dialog
|
|
|
// set up the jquery dialog
|
|
|
fileBrowserDialog = $('<div id="fileBrowserDialog" style="display:hidden"></div>').appendTo('body').dialog({ |
|
|
var docWidth = $(document).width(), dlgWidth = Math.min(docWidth - 80, 650), |
|
|
|
|
|
docHeight = $(document).height() - 80, winHeight = $(window).height() - 80; |
|
|
|
|
|
fileBrowserDialog = $('<div id="fileBrowserDialog" style="display:none"></div>').appendTo('body').dialog({ |
|
|
dialogClass: 'browserDialog', |
|
|
dialogClass: 'browserDialog', |
|
|
title: options.title, |
|
|
title: options.title, |
|
|
position: ['center', 40], |
|
|
position: [(docWidth - dlgWidth)/2, 60], |
|
|
minWidth: Math.min($(document).width() - 80, 650), |
|
|
minWidth: dlgWidth, |
|
|
height: Math.min($(document).height() - 80, $(window).height() - 80), |
|
|
height: Math.min(docHeight, winHeight), |
|
|
maxHeight: Math.min($(document).height() - 80, $(window).height() - 80), |
|
|
maxHeight: Math.min(docHeight, winHeight), |
|
|
maxWidth: $(document).width() - 80, |
|
|
maxWidth: docWidth - 80, |
|
|
modal: true, |
|
|
modal: true, |
|
|
autoOpen: false |
|
|
autoOpen: false |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
fileBrowserDialog.dialog('option', 'buttons', [ |
|
|
fileBrowserDialog.dialog('option', 'buttons', |
|
|
{ |
|
|
[{ |
|
|
text: "Ok", |
|
|
text: 'Ok', |
|
|
"class": "btn", |
|
|
'class': 'btn', |
|
|
click: function() { |
|
|
click: function(){ |
|
|
// store the browsed path to the associated text field
|
|
|
// store the browsed path to the associated text field
|
|
|
callback(currentBrowserPath, options); |
|
|
callback(currentBrowserPath, options); |
|
|
$(this).dialog("close"); |
|
|
$(this).dialog('close'); |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
text: "Cancel", |
|
|
text: 'Cancel', |
|
|
"class": "btn", |
|
|
'class': 'btn', |
|
|
click: function() { |
|
|
click: function(){ |
|
|
$(this).dialog("close"); |
|
|
$(this).dialog('close'); |
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
]); |
|
|
}]); |
|
|
|
|
|
|
|
|
// set up the browser and launch the dialog
|
|
|
// set up the browser and launch the dialog
|
|
|
var initialDir = ''; |
|
|
var initialDir = ''; |
|
|
@ -101,7 +125,7 @@ |
|
|
return false; |
|
|
return false; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
$.fn.fileBrowser = function (options) { |
|
|
$.fn.fileBrowser = function(options){ |
|
|
options = $.extend({}, $.Browser.defaults, options); |
|
|
options = $.extend({}, $.Browser.defaults, options); |
|
|
// text field used for the result
|
|
|
// text field used for the result
|
|
|
options.field = $(this); |
|
|
options.field = $(this); |
|
|
@ -109,45 +133,44 @@ |
|
|
if (options.field.autocomplete && options.autocompleteURL) { |
|
|
if (options.field.autocomplete && options.autocompleteURL) { |
|
|
var query = ''; |
|
|
var query = ''; |
|
|
options.field.autocomplete({ |
|
|
options.field.autocomplete({ |
|
|
position: { my : "top", at: "bottom", collision: "flipfit" }, |
|
|
position: {my: 'top', at: 'bottom', collision: 'flipfit'}, |
|
|
source: function (request, response) { |
|
|
source: function(request, response){ |
|
|
//keep track of user submitted search term
|
|
|
//keep track of user submitted search term
|
|
|
query = $.ui.autocomplete.escapeRegex(request.term, options.includeFiles); |
|
|
query = $.ui.autocomplete.escapeRegex(request.term, options.includeFiles); |
|
|
$.ajax({ |
|
|
$.ajax({ |
|
|
url: options.autocompleteURL, |
|
|
url: options.autocompleteURL, |
|
|
data: request, |
|
|
data: request, |
|
|
dataType: "json", |
|
|
dataType: 'json', |
|
|
success: function (data, item) { |
|
|
success: function(data){ |
|
|
//implement a startsWith filter for the results
|
|
|
//implement a startsWith filter for the results
|
|
|
var matcher = new RegExp("^" + query, "i"); |
|
|
var matcher = new RegExp('^' + query, 'i'); |
|
|
var a = $.grep(data, function (item, index) { |
|
|
var a = $.grep(data, function(item){ |
|
|
return matcher.test(item); |
|
|
return matcher.test(item); |
|
|
}); |
|
|
}); |
|
|
response(a); |
|
|
response(a); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
open: function (event, ui) { |
|
|
open: function(){ |
|
|
$(".ui-autocomplete li.ui-menu-item a").removeClass("ui-corner-all"); |
|
|
$('.ui-autocomplete li.ui-menu-item a').removeClass('ui-corner-all'); |
|
|
$(".ui-autocomplete li.ui-menu-item:odd a").addClass("ui-menu-item-alternate"); |
|
|
$('.ui-autocomplete li.ui-menu-item:odd a').addClass('ui-menu-item-alternate'); |
|
|
} |
|
|
} |
|
|
}) |
|
|
}).data('ui-autocomplete')._renderItem = function(ul, item){ |
|
|
.data("ui-autocomplete")._renderItem = function (ul, item) { |
|
|
|
|
|
//highlight the matched search term from the item -- note that this is global and will match anywhere
|
|
|
//highlight the matched search term from the item -- note that this is global and will match anywhere
|
|
|
var result_item = item.label; |
|
|
var resultItem = item.label; |
|
|
var x = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + query + ")(?![^<>]*>)(?![^&;]+;)", "gi"); |
|
|
var x = new RegExp('(?![^&;]+;)(?!<[^<>]*)(' + query + ')(?![^<>]*>)(?![^&;]+;)', 'gi'); |
|
|
result_item = result_item.replace(x, function (FullMatch, n) { |
|
|
resultItem = resultItem.replace(x, function(fullMatch){ |
|
|
return '<b>' + FullMatch + '</b>'; |
|
|
return '<b>' + fullMatch + '</b>'; |
|
|
}); |
|
|
}); |
|
|
return $("<li></li>") |
|
|
return $('<li></li>') |
|
|
.data("ui-autocomplete-item", item) |
|
|
.data('ui-autocomplete-item', item) |
|
|
.append("<a class='nowrap'>" + result_item + "</a>") |
|
|
.append('<a class="nowrap">' + resultItem + '</a>') |
|
|
.appendTo(ul); |
|
|
.appendTo(ul); |
|
|
}; |
|
|
}; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
var initialDir, path, callback, ls = false; |
|
|
var path, callback, ls = false; |
|
|
// if the text field is empty and we're given a key then populate it with the last browsed value from localStorage
|
|
|
// if empty text field and given a key then populate it with the last browsed value from localStorage
|
|
|
try { ls = !!(localStorage.getItem); } catch (e) {} |
|
|
try { ls = !!(localStorage.getItem); } catch (e) {} |
|
|
if (ls && options.key) { |
|
|
if (ls && options.key) { |
|
|
path = localStorage['fileBrowser-' + options.key]; |
|
|
path = localStorage['fileBrowser-' + options.key]; |
|
|
@ -156,7 +179,7 @@ |
|
|
options.field.val(path); |
|
|
options.field.val(path); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
callback = function (path, options) { |
|
|
callback = function(path, options){ |
|
|
// store the browsed path to the associated text field
|
|
|
// store the browsed path to the associated text field
|
|
|
options.field.val(path); |
|
|
options.field.val(path); |
|
|
|
|
|
|
|
|
@ -164,18 +187,22 @@ |
|
|
if (ls && options.key) { |
|
|
if (ls && options.key) { |
|
|
localStorage['fileBrowser-' + options.key] = path; |
|
|
localStorage['fileBrowser-' + options.key] = path; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
initialDir = options.field.val() || (options.key && path) || ''; |
|
|
|
|
|
|
|
|
|
|
|
options = $.extend(options, {initialDir: initialDir}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
options.field.addClass('fileBrowserField'); |
|
|
|
|
|
if (options.showBrowseButton) { |
|
|
// append the browse button and give it a click behaviour
|
|
|
// append the browse button and give it a click behaviour
|
|
|
return options.field.addClass('fileBrowserField').after($('<input type="button" value="Browse…" class="btn btn-inline fileBrowser" />').click(function () { |
|
|
options.field.after( |
|
|
$(this).nFileBrowser(callback, options); |
|
|
$('<input type="button" value="Browse…" class="btn btn-inline fileBrowser">').on('click', |
|
|
|
|
|
function(){ |
|
|
|
|
|
$(this).nFileBrowser(callback, $.extend( |
|
|
|
|
|
{}, options, {initialDir: options.field.val() || (options.key && path) || ''} |
|
|
|
|
|
)); |
|
|
return false; |
|
|
return false; |
|
|
})); |
|
|
})); |
|
|
|
|
|
} |
|
|
|
|
|
return options.field; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
})(jQuery); |
|
|
})(jQuery); |
|
|
|
JackDandy
9 years ago
