Remove old filemanager assets
This commit is contained in:
Johannes Zellner
Vendored
-696
File diff suppressed because one or more lines are too long
-639
@@ -1,639 +0,0 @@
|
||||
(function($, angular) {
|
||||
|
||||
// eslint-disable-next-line angular/file-name, angular/no-service-method
|
||||
angular.module('ui.bootstrap.contextMenu', [])
|
||||
.service('CustomService', function () {
|
||||
'use strict';
|
||||
|
||||
return {
|
||||
initialize: function (item) {
|
||||
console.log('got here', item);
|
||||
}
|
||||
};
|
||||
|
||||
})
|
||||
.constant('ContextMenuEvents', {
|
||||
// Triggers when all the context menus have been closed
|
||||
ContextMenuAllClosed: 'context-menu-all-closed',
|
||||
// Triggers when any single conext menu is called.
|
||||
// Closing all context menus triggers this for each level open
|
||||
ContextMenuClosed: 'context-menu-closed',
|
||||
// Triggers right before the very first context menu is opened
|
||||
ContextMenuOpening: 'context-menu-opening',
|
||||
// Triggers right after any context menu is opened
|
||||
ContextMenuOpened: 'context-menu-opened'
|
||||
})
|
||||
.directive('contextMenu', ['$rootScope', 'ContextMenuEvents', '$parse', '$q', 'CustomService', '$sce', '$document', '$window', '$compile',
|
||||
function ($rootScope, ContextMenuEvents, $parse, $q, custom, $sce, $document, $window, $compile) {
|
||||
|
||||
var _contextMenus = [];
|
||||
// Contains the element that was clicked to show the context menu
|
||||
var _clickedElement = null;
|
||||
var DEFAULT_ITEM_TEXT = '"New Item';
|
||||
var _emptyText = 'empty';
|
||||
|
||||
function createAndAddOptionText(params) {
|
||||
// Destructuring:
|
||||
var $scope = params.$scope;
|
||||
var item = params.item;
|
||||
var event = params.event;
|
||||
var modelValue = params.modelValue;
|
||||
var $promises = params.$promises;
|
||||
var nestedMenu = params.nestedMenu;
|
||||
var $li = params.$li;
|
||||
var leftOriented = String(params.orientation).toLowerCase() === 'left';
|
||||
|
||||
var optionText = null;
|
||||
|
||||
if (item.html) {
|
||||
if (angular.isFunction(item.html)) {
|
||||
// runs the function that expects a jQuery/jqLite element
|
||||
optionText = item.html($scope);
|
||||
} else {
|
||||
// Incase we want to compile html string to initialize their custom directive in html string
|
||||
if (item.compile) {
|
||||
optionText = $compile(item.html)($scope);
|
||||
} else {
|
||||
// Assumes that the developer already placed a valid jQuery/jqLite element
|
||||
optionText = item.html;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
||||
var $a = $('<a>');
|
||||
var $anchorStyle = {};
|
||||
|
||||
if (leftOriented) {
|
||||
$anchorStyle.textAlign = 'right';
|
||||
$anchorStyle.paddingLeft = '8px';
|
||||
} else {
|
||||
$anchorStyle.textAlign = 'left';
|
||||
$anchorStyle.paddingRight = '8px';
|
||||
}
|
||||
|
||||
$a.css($anchorStyle);
|
||||
$a.addClass('dropdown-item');
|
||||
$a.attr({ tabindex: '-1', href: '#' });
|
||||
|
||||
var textParam = item.text || item[0];
|
||||
var text = DEFAULT_ITEM_TEXT;
|
||||
|
||||
if (typeof textParam === 'string') {
|
||||
text = textParam;
|
||||
} else if (typeof textParam === 'function') {
|
||||
text = textParam.call($scope, $scope, event, modelValue);
|
||||
}
|
||||
|
||||
var $promise = $q.when(text);
|
||||
$promises.push($promise);
|
||||
$promise.then(function (pText) {
|
||||
if (nestedMenu) {
|
||||
var $arrow;
|
||||
var $boldStyle = {
|
||||
fontFamily: 'monospace',
|
||||
fontWeight: 'bold'
|
||||
};
|
||||
|
||||
if (leftOriented) {
|
||||
$arrow = '<';
|
||||
$boldStyle.float = 'left';
|
||||
} else {
|
||||
$arrow = '>';
|
||||
$boldStyle.float = 'right';
|
||||
}
|
||||
|
||||
var $bold = $('<strong style="font-family:monospace;font-weight:bold;float:right;">' + $arrow + '</strong>');
|
||||
$bold.css($boldStyle);
|
||||
$a.css('cursor', 'default');
|
||||
$a.append($bold);
|
||||
}
|
||||
$a.append(pText);
|
||||
});
|
||||
|
||||
optionText = $a;
|
||||
}
|
||||
|
||||
$li.append(optionText);
|
||||
|
||||
return optionText;
|
||||
};
|
||||
|
||||
/**
|
||||
* Process each individual item
|
||||
*
|
||||
* Properties of params:
|
||||
* - $scope
|
||||
* - event
|
||||
* - modelValue
|
||||
* - level
|
||||
* - item
|
||||
* - $ul
|
||||
* - $li
|
||||
* - $promises
|
||||
*/
|
||||
function processItem(params) {
|
||||
var nestedMenu = extractNestedMenu(params);
|
||||
|
||||
// if html property is not defined, fallback to text, otherwise use default text
|
||||
// if first item in the item array is a function then invoke .call()
|
||||
// if first item is a string, then text should be the string.
|
||||
|
||||
var text = DEFAULT_ITEM_TEXT;
|
||||
var currItemParam = angular.extend({}, params);
|
||||
var item = params.item;
|
||||
var enabled = item.enabled === undefined ? item[2] : item.enabled;
|
||||
|
||||
currItemParam.nestedMenu = nestedMenu;
|
||||
currItemParam.enabled = resolveBoolOrFunc(enabled, params);
|
||||
currItemParam.text = createAndAddOptionText(currItemParam);
|
||||
|
||||
registerCurrentItemEvents(currItemParam);
|
||||
|
||||
};
|
||||
|
||||
/*
|
||||
* Registers the appropriate mouse events for options if the item is enabled.
|
||||
* Otherwise, it ensures that clicks to the item do not propagate.
|
||||
*/
|
||||
function registerCurrentItemEvents (params) {
|
||||
// Destructuring:
|
||||
var item = params.item;
|
||||
var $ul = params.$ul;
|
||||
var $li = params.$li;
|
||||
var $scope = params.$scope;
|
||||
var modelValue = params.modelValue;
|
||||
var level = params.level;
|
||||
var event = params.event;
|
||||
var text = params.text;
|
||||
var nestedMenu = params.nestedMenu;
|
||||
var enabled = params.enabled;
|
||||
var orientation = String(params.orientation).toLowerCase();
|
||||
var customClass = params.customClass;
|
||||
|
||||
if (enabled) {
|
||||
var openNestedMenu = function ($event) {
|
||||
removeContextMenus(level + 1);
|
||||
/*
|
||||
* The object here needs to be constructed and filled with data
|
||||
* on an "as needed" basis. Copying the data from event directly
|
||||
* or cloning the event results in unpredictable behavior.
|
||||
*/
|
||||
/// adding the original event in the object to use the attributes of the mouse over event in the promises
|
||||
var ev = {
|
||||
pageX: orientation === 'left' ? event.pageX - $ul[0].offsetWidth + 1 : event.pageX + $ul[0].offsetWidth - 1,
|
||||
pageY: $ul[0].offsetTop + $li[0].offsetTop - 3,
|
||||
// eslint-disable-next-line angular/window-service
|
||||
view: event.view || window,
|
||||
target: event.target,
|
||||
event: $event
|
||||
};
|
||||
|
||||
/*
|
||||
* At this point, nestedMenu can only either be an Array or a promise.
|
||||
* Regardless, passing them to `when` makes the implementation singular.
|
||||
*/
|
||||
$q.when(nestedMenu).then(function(promisedNestedMenu) {
|
||||
if (angular.isFunction(promisedNestedMenu)) {
|
||||
// support for dynamic subitems
|
||||
promisedNestedMenu = promisedNestedMenu.call($scope, $scope, event, modelValue, text, $li);
|
||||
}
|
||||
var nestedParam = {
|
||||
$scope : $scope,
|
||||
event : ev,
|
||||
options : promisedNestedMenu,
|
||||
modelValue : modelValue,
|
||||
level : level + 1,
|
||||
orientation: orientation,
|
||||
customClass: customClass
|
||||
};
|
||||
renderContextMenu(nestedParam);
|
||||
});
|
||||
};
|
||||
|
||||
$li.on('click', function ($event) {
|
||||
if($event.which == 1) {
|
||||
$event.preventDefault();
|
||||
$scope.$apply(function () {
|
||||
|
||||
var cleanupFunction = function () {
|
||||
$(event.currentTarget).removeClass('context');
|
||||
removeAllContextMenus();
|
||||
};
|
||||
var clickFunction = angular.isFunction(item.click)
|
||||
? item.click
|
||||
: (angular.isFunction(item[1])
|
||||
? item[1]
|
||||
: null);
|
||||
|
||||
if (clickFunction) {
|
||||
var res = clickFunction.call($scope, $scope, event, modelValue, text, $li);
|
||||
if(res === undefined || res) {
|
||||
cleanupFunction();
|
||||
}
|
||||
} else {
|
||||
cleanupFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$li.on('mouseover', function ($event) {
|
||||
$scope.$apply(function () {
|
||||
if (nestedMenu) {
|
||||
openNestedMenu($event);
|
||||
} else {
|
||||
removeContextMenus(level + 1);
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
setElementDisabled($li);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param params - an object containing the `item` parameter
|
||||
* @returns an Array or a Promise containing the children,
|
||||
* or null if the option has no submenu
|
||||
*/
|
||||
function extractNestedMenu(params) {
|
||||
// Destructuring:
|
||||
var item = params.item;
|
||||
|
||||
// New implementation:
|
||||
if (item.children) {
|
||||
if (angular.isFunction(item.children)) {
|
||||
// Expects a function that returns a Promise or an Array
|
||||
return item.children();
|
||||
} else if (angular.isFunction(item.children.then) || angular.isArray(item.children)) {
|
||||
// Returns the promise
|
||||
// OR, returns the actual array
|
||||
return item.children;
|
||||
}
|
||||
|
||||
return null;
|
||||
|
||||
} else {
|
||||
// nestedMenu is either an Array or a Promise that will return that array.
|
||||
// NOTE: This might be changed soon as it's a hangover from an old implementation
|
||||
|
||||
return angular.isArray(item[1]) ||
|
||||
(item[1] && angular.isFunction(item[1].then)) ? item[1] : angular.isArray(item[2]) ||
|
||||
(item[2] && angular.isFunction(item[2].then)) ? item[2] : angular.isArray(item[3]) ||
|
||||
(item[3] && angular.isFunction(item[3].then)) ? item[3] : null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Responsible for the actual rendering of the context menu.
|
||||
*
|
||||
* The parameters in params are:
|
||||
* - $scope = the scope of this context menu
|
||||
* - event = the event that triggered this context menu
|
||||
* - options = the options for this context menu
|
||||
* - modelValue = the value of the model attached to this context menu
|
||||
* - level = the current context menu level (defauts to 0)
|
||||
* - customClass = the custom class to be used for the context menu
|
||||
*/
|
||||
function renderContextMenu (params) {
|
||||
/// <summary>Render context menu recursively.</summary>
|
||||
|
||||
// Destructuring:
|
||||
var $scope = params.$scope;
|
||||
var event = params.event;
|
||||
var options = params.options;
|
||||
var modelValue = params.modelValue;
|
||||
var level = params.level;
|
||||
var customClass = params.customClass;
|
||||
|
||||
// Initialize the container. This will be passed around
|
||||
var $ul = initContextMenuContainer(params);
|
||||
params.$ul = $ul;
|
||||
|
||||
// Register this level of the context menu
|
||||
_contextMenus.push($ul);
|
||||
|
||||
/*
|
||||
* This object will contain any promises that we have
|
||||
* to wait for before trying to adjust the context menu.
|
||||
*/
|
||||
var $promises = [];
|
||||
params.$promises = $promises;
|
||||
|
||||
angular.forEach(options, function (item) {
|
||||
|
||||
if (item === null) {
|
||||
appendDivider($ul);
|
||||
} else {
|
||||
// If displayed is anything other than a function or a boolean
|
||||
var displayed = resolveBoolOrFunc(item.displayed, params);
|
||||
|
||||
// Only add the <li> if the item is displayed
|
||||
if (displayed) {
|
||||
var $li = $('<li>');
|
||||
var itemParams = angular.extend({}, params);
|
||||
itemParams.item = item;
|
||||
itemParams.$li = $li;
|
||||
|
||||
if (typeof item[0] === 'object') {
|
||||
custom.initialize($li, item);
|
||||
} else {
|
||||
processItem(itemParams);
|
||||
}
|
||||
if (resolveBoolOrFunc(item.hasTopDivider, itemParams, false)) {
|
||||
appendDivider($ul);
|
||||
}
|
||||
$ul.append($li);
|
||||
if (resolveBoolOrFunc(item.hasBottomDivider, itemParams, false)) {
|
||||
appendDivider($ul);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if ($ul.children().length === 0) {
|
||||
var $emptyLi = angular.element('<li>');
|
||||
setElementDisabled($emptyLi);
|
||||
$emptyLi.html('<a>' + _emptyText + '</a>');
|
||||
$ul.append($emptyLi);
|
||||
}
|
||||
|
||||
$document.find('body').append($ul);
|
||||
|
||||
doAfterAllPromises(params);
|
||||
|
||||
$rootScope.$broadcast(ContextMenuEvents.ContextMenuOpened, {
|
||||
context: _clickedElement,
|
||||
contextMenu: $ul,
|
||||
params: params
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* calculate if drop down menu would go out of screen at left or bottom
|
||||
* calculation need to be done after element has been added (and all texts are set; thus the promises)
|
||||
* to the DOM the get the actual height
|
||||
*/
|
||||
function doAfterAllPromises (params) {
|
||||
|
||||
// Desctructuring:
|
||||
var $ul = params.$ul;
|
||||
var $promises = params.$promises;
|
||||
var level = params.level;
|
||||
var event = params.event;
|
||||
var leftOriented = String(params.orientation).toLowerCase() === 'left';
|
||||
|
||||
$q.all($promises).then(function () {
|
||||
var topCoordinate = event.pageY;
|
||||
var menuHeight = angular.element($ul[0]).prop('offsetHeight');
|
||||
var winHeight = $window.pageYOffset + event.view.innerHeight;
|
||||
|
||||
/// the 20 pixels in second condition are considering the browser status bar that sometimes overrides the element
|
||||
if (topCoordinate > menuHeight && winHeight - topCoordinate < menuHeight + 20) {
|
||||
topCoordinate = event.pageY - menuHeight;
|
||||
/// If the element is a nested menu, adds the height of the parent li to the topCoordinate to align with the parent
|
||||
if(level && level > 0) {
|
||||
topCoordinate += event.event.currentTarget.offsetHeight;
|
||||
}
|
||||
} else if(winHeight <= menuHeight) {
|
||||
// If it really can't fit, reset the height of the menu to one that will fit
|
||||
angular.element($ul[0]).css({ 'height': winHeight - 5, 'overflow-y': 'scroll' });
|
||||
// ...then set the topCoordinate height to 0 so the menu starts from the top
|
||||
topCoordinate = 0;
|
||||
} else if(winHeight - topCoordinate < menuHeight) {
|
||||
var reduceThresholdY = 5;
|
||||
if(topCoordinate < reduceThresholdY) {
|
||||
reduceThresholdY = topCoordinate;
|
||||
}
|
||||
topCoordinate = winHeight - menuHeight - reduceThresholdY;
|
||||
}
|
||||
|
||||
var leftCoordinate = event.pageX;
|
||||
var menuWidth = angular.element($ul[0]).prop('offsetWidth');
|
||||
var winWidth = event.view.innerWidth + window.pageXOffset;
|
||||
var padding = 5;
|
||||
|
||||
if (leftOriented) {
|
||||
if (winWidth - leftCoordinate > menuWidth && leftCoordinate < menuWidth + padding) {
|
||||
leftCoordinate = padding;
|
||||
} else if (leftCoordinate < menuWidth) {
|
||||
var reduceThresholdX = 5;
|
||||
if (winWidth - leftCoordinate < reduceThresholdX + padding) {
|
||||
reduceThresholdX = winWidth - leftCoordinate + padding;
|
||||
}
|
||||
leftCoordinate = menuWidth + reduceThresholdX + padding;
|
||||
} else {
|
||||
leftCoordinate = leftCoordinate - menuWidth;
|
||||
}
|
||||
} else {
|
||||
if (leftCoordinate > menuWidth && winWidth - leftCoordinate - padding < menuWidth) {
|
||||
leftCoordinate = winWidth - menuWidth - padding;
|
||||
} else if(winWidth - leftCoordinate < menuWidth) {
|
||||
var reduceThresholdX = 5;
|
||||
if(leftCoordinate < reduceThresholdX + padding) {
|
||||
reduceThresholdX = leftCoordinate + padding;
|
||||
}
|
||||
leftCoordinate = winWidth - menuWidth - reduceThresholdX - padding;
|
||||
}
|
||||
}
|
||||
|
||||
$ul.css({
|
||||
display: 'block',
|
||||
position: 'absolute',
|
||||
left: leftCoordinate + 'px',
|
||||
top: topCoordinate + 'px'
|
||||
});
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates the container of the context menu (a <ul> element),
|
||||
* applies the appropriate styles and then returns that container
|
||||
*
|
||||
* @return a <ul> jqLite/jQuery element
|
||||
*/
|
||||
function initContextMenuContainer(params) {
|
||||
// Destructuring
|
||||
var customClass = params.customClass;
|
||||
|
||||
var $ul = $('<ul>');
|
||||
$ul.addClass('dropdown-menu');
|
||||
$ul.attr({ 'role': 'menu' });
|
||||
$ul.css({
|
||||
display: 'block',
|
||||
position: 'absolute',
|
||||
left: params.event.pageX + 'px',
|
||||
top: params.event.pageY + 'px',
|
||||
'z-index': 10000
|
||||
});
|
||||
|
||||
if(customClass) { $ul.addClass(customClass); }
|
||||
|
||||
return $ul;
|
||||
}
|
||||
|
||||
function isTouchDevice() {
|
||||
return 'ontouchstart' in window || navigator.maxTouchPoints; // works on most browsers | works on IE10/11 and Surface
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes the context menus with level greater than or equal
|
||||
* to the value passed. If undefined, null or 0, all context menus
|
||||
* are removed.
|
||||
*/
|
||||
function removeContextMenus (level) {
|
||||
while (_contextMenus.length && (!level || _contextMenus.length > level)) {
|
||||
var cm = _contextMenus.pop();
|
||||
$rootScope.$broadcast(ContextMenuEvents.ContextMenuClosed, { context: _clickedElement, contextMenu: cm });
|
||||
cm.remove();
|
||||
}
|
||||
if(!level) {
|
||||
$rootScope.$broadcast(ContextMenuEvents.ContextMenuAllClosed, { context: _clickedElement });
|
||||
}
|
||||
}
|
||||
|
||||
function removeOnScrollEvent(e) {
|
||||
removeAllContextMenus(e);
|
||||
}
|
||||
|
||||
function removeOnOutsideClickEvent(e) {
|
||||
|
||||
var $curr = $(e.target);
|
||||
var shouldRemove = true;
|
||||
|
||||
while($curr.length) {
|
||||
if ($curr.hasClass('dropdown-menu')) {
|
||||
shouldRemove = false;
|
||||
break;
|
||||
} else {
|
||||
$curr = $curr.parent();
|
||||
}
|
||||
}
|
||||
if (shouldRemove) {
|
||||
removeAllContextMenus(e);
|
||||
}
|
||||
}
|
||||
|
||||
function removeAllContextMenus(e) {
|
||||
$document.find('body').off('mousedown touchstart', removeOnOutsideClickEvent);
|
||||
$document.off('scroll', removeOnScrollEvent);
|
||||
$(_clickedElement).removeClass('context');
|
||||
removeContextMenus();
|
||||
$rootScope.$broadcast('');
|
||||
}
|
||||
|
||||
function isBoolean(a) {
|
||||
return a === false || a === true;
|
||||
}
|
||||
|
||||
/** Resolves a boolean or a function that returns a boolean
|
||||
* Returns true by default if the param is null or undefined
|
||||
* @param a - the parameter to be checked
|
||||
* @param params - the object for the item's parameters
|
||||
* @param defaultValue - the default boolean value to use if the parameter is
|
||||
* neither a boolean nor function. True by default.
|
||||
*/
|
||||
function resolveBoolOrFunc(a, params, defaultValue) {
|
||||
var item = params.item;
|
||||
var $scope = params.$scope;
|
||||
var event = params.event;
|
||||
var modelValue = params.modelValue;
|
||||
|
||||
defaultValue = isBoolean(defaultValue) ? defaultValue : true;
|
||||
|
||||
if (isBoolean(a)) {
|
||||
return a;
|
||||
} else if (angular.isFunction(a)) {
|
||||
return a.call($scope, $scope, event, modelValue);
|
||||
} else {
|
||||
return defaultValue;
|
||||
}
|
||||
}
|
||||
|
||||
function appendDivider($ul) {
|
||||
var $li = angular.element('<li>');
|
||||
$li.addClass('divider');
|
||||
$ul.append($li);
|
||||
}
|
||||
|
||||
function setElementDisabled($li) {
|
||||
$li.on('click', function ($event) {
|
||||
$event.preventDefault();
|
||||
});
|
||||
$li.addClass('disabled');
|
||||
}
|
||||
|
||||
return function ($scope, element, attrs) {
|
||||
var openMenuEvents = ['contextmenu'];
|
||||
_emptyText = $scope.$eval(attrs.contextMenuEmptyText) || 'empty';
|
||||
|
||||
if(attrs.contextMenuOn && typeof(attrs.contextMenuOn) === 'string'){
|
||||
openMenuEvents = attrs.contextMenuOn.split(',');
|
||||
}
|
||||
|
||||
angular.forEach(openMenuEvents, function (openMenuEvent) {
|
||||
element.on(openMenuEvent.trim(), function (event) {
|
||||
// Cleanup any leftover contextmenus(there are cases with longpress on touch where we
|
||||
// still see multiple contextmenus)
|
||||
removeAllContextMenus();
|
||||
|
||||
if(!attrs.allowEventPropagation) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
// Don't show context menu if on touch device and element is draggable
|
||||
if(isTouchDevice() && element.attr('draggable') === 'true') {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Remove if the user clicks outside
|
||||
$document.find('body').on('mousedown touchstart', removeOnOutsideClickEvent);
|
||||
// Remove the menu when the scroll moves
|
||||
$document.on('scroll', removeOnScrollEvent);
|
||||
|
||||
_clickedElement = event.currentTarget;
|
||||
$(_clickedElement).addClass('context');
|
||||
|
||||
$scope.$apply(function () {
|
||||
var options = $scope.$eval(attrs.contextMenu);
|
||||
var customClass = attrs.contextMenuClass;
|
||||
var modelValue = $scope.$eval(attrs.model);
|
||||
var orientation = attrs.contextMenuOrientation;
|
||||
|
||||
$q.when(options).then(function(promisedMenu) {
|
||||
if (angular.isFunction(promisedMenu)) {
|
||||
// support for dynamic items
|
||||
promisedMenu = promisedMenu.call($scope, $scope, event, modelValue);
|
||||
}
|
||||
var params = {
|
||||
'$scope' : $scope,
|
||||
'event' : event,
|
||||
'options' : promisedMenu,
|
||||
'modelValue' : modelValue,
|
||||
'level' : 0,
|
||||
'customClass' : customClass,
|
||||
'orientation': orientation
|
||||
};
|
||||
$rootScope.$broadcast(ContextMenuEvents.ContextMenuOpening, { context: _clickedElement });
|
||||
renderContextMenu(params);
|
||||
});
|
||||
});
|
||||
|
||||
// Remove all context menus if the scope is destroyed
|
||||
$scope.$on('$destroy', function () {
|
||||
removeAllContextMenus();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
if (attrs.closeMenuOn) {
|
||||
$scope.$on(attrs.closeMenuOn, function () {
|
||||
removeAllContextMenus();
|
||||
});
|
||||
}
|
||||
};
|
||||
}]);
|
||||
// eslint-disable-next-line angular/window-service
|
||||
})(window.angular.element, window.angular);
|
||||
@@ -1,80 +0,0 @@
|
||||
|
||||
<!-- Modal image/video viewer -->
|
||||
<div class="modal fade" id="{{ 'mediaViewerModal-' + $id }}" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" style="max-width: 1280px; max-height: calc(100% - 60px);">
|
||||
<div class="modal-content" style="height: 100%; height: 100%; display: flex; background-color: #000; background-clip: border-box;">
|
||||
<img ng-show="mediaViewer.type === 'image'" ng-src="{{ mediaViewer.src }}" style="display: block; margin: auto; max-width: 100%; max-height: 100%;" />
|
||||
<video ng-show="mediaViewer.type === 'video'" controls preload="auto" autoplay ng-src="{{ mediaViewer.src | trustUrl}}" style="display: block; margin: auto; max-width: 100%; max-height: 100%;"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- main content -->
|
||||
|
||||
<div class="toolbar">
|
||||
<div class="btn-group" role="group" style="display: block;">
|
||||
<!-- TODO figure out why a line break in code between the two buttons results in a gap visually without any margin/padding set -->
|
||||
<button class="btn btn-primary" ng-click="goDirectoryUp()" ng-disabled="cwd === ''"><i class="fas fa-arrow-left"></i></button><button class="btn btn-primary" ng-disabled="busyRefresh" ng-click="refresh()"><i class="fas fa-redo" ng-class="{ 'fa-spin': busyRefresh }"></i></button>
|
||||
</div>
|
||||
<div class="btn-group path-parts" role="group">
|
||||
<button class="btn btn-default" ng-disabled="cwd === ''" ng-click="changeDirectory('/')" ng-drop="drop($event, '/')" ng-dragleave="dragExit($event, '/')" ng-dragover="dragEnter($event, '/')"><i class="fas fa-home"></i> {{ rootDirLabel }} </button><button class="btn btn-default" ng-disabled="part.path === cwd" ng-click="changeDirectory(part.path)" ng-drop="drop($event, part.path)" ng-dragleave="dragExit($event, part.path)" ng-dragover="dragEnter($event, part.path)" ng-repeat="part in cwdParts">{{ part.name }}</button>
|
||||
</div>
|
||||
<div style="display: block;">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus"></i> {{ 'filemanager.toolbar.new' | tr }}</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="hand" ng-click="onNewFile()">{{ 'filemanager.toolbar.newFile' | tr }}</a></li>
|
||||
<li><a class="hand" ng-click="onNewFolder()">{{ 'filemanager.toolbar.newFolder' | tr }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-upload"></i> {{ 'filemanager.toolbar.upload' | tr }}</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right">
|
||||
<li><a class="hand" ng-click="onUploadFile()">{{ 'filemanager.toolbar.uploadFile' | tr }}</a></li>
|
||||
<li><a class="hand" ng-click="onUploadFolder()">{{ 'filemanager.toolbar.uploadFolder' | tr }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="file-list-header">
|
||||
<table class="table" style="margin: 0;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 42px"> </th>
|
||||
<th style="">{{ 'filemanager.list.name' | tr }}</th>
|
||||
<th style="width:100px">{{ 'filemanager.list.owner' | tr }}</th>
|
||||
<th style="width: 80px">{{ 'filemanager.list.size' | tr }}</th>
|
||||
<th style="width:100px">{{ 'filemanager.list.mtime' | tr }}</th>
|
||||
<th style="width: 45px;"> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="file-list" ng-class="{ 'entry-hovered': dropToBody, 'busy': busy }" context-menu="menuOptionsBlank" ng-mousedown="onClearSelection($event)" ng-drop="drop($event, null)" ng-dragleave="dragExit($event, null)" ng-dragover="dragEnter($event, null)">
|
||||
<table class="table table-hover" style="margin: 0;">
|
||||
<tbody>
|
||||
<tr ng-show="busy && !busyRefresh">
|
||||
<td colspan="6"><center><h2><i class="fa fa-circle-notch fa-spin"></i></h2></center></td>
|
||||
</tr>
|
||||
<tr ng-show="!(busy && !busyRefresh) && entries.length === 0">
|
||||
<td colspan="" class="text-center">{{ 'filemanager.list.empty' | tr }}</td>
|
||||
</tr>
|
||||
<tr style="cursor: default" ng-hide="busy && !busyRefresh" entry-hashkey="{{ entry['$$hashKey'] }}" ng-repeat="entry in entries" ng-mouseup="onMouseup($event, entry)" draggable="true" ng-dragstart="dragStart($event, entry)" ng-drop="drop($event, entry)" context-menu="menuOptions" ng-mousedown="onMousedown($event, entry)" model="entry" ng-dragleave="dragExit($event, entry)" ng-dragover="dragEnter($event, entry)" ng-class="{ 'entry-hovered': entry.hovered, 'entry-selected': isSelected(entry) }">
|
||||
<td style="width: 42px; height: 42px" ng-dblclick="open(entry)" class="text-center">
|
||||
<i ng-show="!entry.previewUrl" class="fas fa-lg {{ entry.icon }}" ng-class="{ 'text-primary': entry.isDirectory && !isSelected(entry) }"></i>
|
||||
<img ng-show="entry.previewUrl" ng-src="{{ entry.previewUrl }}" height="42" width="42" style="object-fit: cover;"/>
|
||||
</td>
|
||||
<td class="elide-table-cell" ng-dblclick="open(entry)" style="padding-left: 5px;">{{ entry.fileName }}<span ng-show="entry.isSymbolicLink" class="text-muted" style="margin-left: 20px;">{{ 'filemanager.list.symlink' | tr:{ target: entry.target } }}</span></td>
|
||||
<td style="width:100px" class="elide-table-cell" ng-dblclick="open(entry)">{{ entry.uid | prettyOwner }}</td>
|
||||
<td style="width: 80px" class="elide-table-cell" ng-dblclick="open(entry)">{{ entry.size | prettyDecimalSize }}</td>
|
||||
<td style="width:100px" class="elide-table-cell" ng-dblclick="open(entry)" uib-tooltip="{{ entry.mtime | prettyLongDate }}" tooltip-append-to-body="true">{{ entry.mtime | prettyDate }}</td>
|
||||
<td style="width: 45px">
|
||||
<button type="button" class="btn btn-xs btn-default context-menu-action" context-menu="menuOptions" model="entry" context-menu-on="click" ng-click="onEntryContextMenu($event, entry)"><i class="fas fa-ellipsis-h"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -1,513 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
/* global angular */
|
||||
/* global sanitize, isModalVisible */
|
||||
|
||||
angular.module('Application').component('filetree', {
|
||||
bindings: {
|
||||
backendId: '<',
|
||||
backendType: '<',
|
||||
view: '<',
|
||||
clipboard: '<',
|
||||
onUploadFile: '&',
|
||||
onUploadFolder: '&',
|
||||
onNewFile: '&',
|
||||
onNewFolder: '&',
|
||||
onRenameEntry: '&',
|
||||
onExtractEntry: '&',
|
||||
onChownEntries: '&',
|
||||
onDeleteEntries: '&',
|
||||
onCopyEntries: '&',
|
||||
onCutEntries: '&',
|
||||
onPasteEntries: '&'
|
||||
},
|
||||
templateUrl: 'components/filetree.html?<%= revision %>',
|
||||
controller: [ '$scope', '$translate', '$timeout', 'Client', FileTreeController ]
|
||||
});
|
||||
|
||||
function FileTreeController($scope, $translate, $timeout, Client) {
|
||||
var ctrl = this;
|
||||
|
||||
$scope.backendId = this.backendId;
|
||||
$scope.backendType = this.backendType;
|
||||
$scope.view = this.view;
|
||||
|
||||
$scope.busy = true;
|
||||
$scope.busyRefresh = false;
|
||||
$scope.client = Client;
|
||||
$scope.cwd = null;
|
||||
$scope.cwdParts = [];
|
||||
$scope.rootDirLabel = '';
|
||||
$scope.entries = [];
|
||||
$scope.selected = []; // holds selected entries
|
||||
$scope.dropToBody = false;
|
||||
$scope.applicationLink = '';
|
||||
|
||||
// register so parent can call child
|
||||
$scope.$parent.registerChild($scope);
|
||||
|
||||
function isArchive(f) {
|
||||
return f.match(/\.tgz$/) ||
|
||||
f.match(/\.tar$/) ||
|
||||
f.match(/\.7z$/) ||
|
||||
f.match(/\.zip$/) ||
|
||||
f.match(/\.tar\.gz$/) ||
|
||||
f.match(/\.tar\.xz$/) ||
|
||||
f.match(/\.tar\.bz2$/);
|
||||
}
|
||||
|
||||
$scope.menuOptions = []; // shown for entries
|
||||
$scope.menuOptionsBlank = []; // shown for empty space in folder
|
||||
|
||||
function sort() {
|
||||
return $scope.entries.sort(function (a, b) {
|
||||
if (a.fileName.toLowerCase() < b.fileName.toLowerCase()) return -1;
|
||||
return 1;
|
||||
}).sort(function (a, b) {
|
||||
if ((a.isDirectory && b.isDirectory) || (!a.isDirectory && !b.isDirectory)) return 0;
|
||||
if (a.isDirectory && !b.isDirectory) return -1;
|
||||
return 1;
|
||||
});
|
||||
}
|
||||
|
||||
$scope.isSelected = function (entry) {
|
||||
return $scope.selected.indexOf(entry) !== -1;
|
||||
};
|
||||
|
||||
function download(entry) {
|
||||
var filePath = sanitize($scope.cwd + '/' + entry.fileName);
|
||||
|
||||
Client.filesGet($scope.backendId, $scope.backendType, filePath, 'download', function (error) {
|
||||
if (error) return Client.error(error);
|
||||
});
|
||||
}
|
||||
|
||||
$scope.dragStart = function ($event, entry) {
|
||||
var filePaths = $scope.selected.map(function (entry) { return sanitize($scope.cwd + '/' + entry.fileName); });
|
||||
$event.originalEvent.dataTransfer.setData('application/cloudron-filemanager', JSON.stringify(filePaths));
|
||||
};
|
||||
|
||||
$scope.dragEnter = function ($event, entry) {
|
||||
$event.originalEvent.stopPropagation();
|
||||
$event.originalEvent.preventDefault();
|
||||
|
||||
// if entry is string, we come from breadcrumb
|
||||
if (entry && typeof entry === 'string') $event.currentTarget.classList.add('entry-hovered');
|
||||
else if (entry && entry.isDirectory) entry.hovered = true;
|
||||
else $scope.dropToBody = true;
|
||||
|
||||
$event.originalEvent.dataTransfer.dropEffect = 'move';
|
||||
};
|
||||
|
||||
$scope.dragExit = function ($event, entry) {
|
||||
$event.originalEvent.stopPropagation();
|
||||
$event.originalEvent.preventDefault();
|
||||
|
||||
// if entry is string, we come from breadcrumb
|
||||
if (entry && typeof entry === 'string') $event.currentTarget.classList.remove('entry-hovered');
|
||||
else if (entry && entry.isDirectory) entry.hovered = false;
|
||||
$scope.dropToBody = false;
|
||||
|
||||
$event.originalEvent.dataTransfer.dropEffect = 'move';
|
||||
};
|
||||
|
||||
$scope.drop = function (event, entry) {
|
||||
event.originalEvent.stopPropagation();
|
||||
event.originalEvent.preventDefault();
|
||||
|
||||
$scope.dropToBody = false;
|
||||
|
||||
if (!event.originalEvent.dataTransfer.items[0]) return;
|
||||
|
||||
var targetFolder;
|
||||
if (entry === null) targetFolder = $scope.cwd + '/';
|
||||
else if (typeof entry === 'string') targetFolder = sanitize(entry);
|
||||
else targetFolder = sanitize($scope.cwd + '/' + (entry && entry.isDirectory ? entry.fileName : ''));
|
||||
|
||||
var dataTransfer = event.originalEvent.dataTransfer;
|
||||
var dragContent = dataTransfer.getData('application/cloudron-filemanager');
|
||||
|
||||
// check if we have internal drag'n'drop
|
||||
if (dragContent) {
|
||||
var moved = 0;
|
||||
|
||||
// we expect a JSON.stringified Array here
|
||||
try {
|
||||
dragContent = JSON.parse(dragContent);
|
||||
} catch (e) {
|
||||
console.error('Wrong drag content.', e);
|
||||
return;
|
||||
}
|
||||
|
||||
// move files
|
||||
async.eachLimit(dragContent, 5, function (oldFilePath, callback) {
|
||||
var fileName = oldFilePath.split('/').slice(-1);
|
||||
var newFilePath = sanitize(targetFolder + '/' + fileName);
|
||||
|
||||
// if we drop the item on itself
|
||||
if (oldFilePath === targetFolder) return callback();
|
||||
|
||||
// if nothing changes
|
||||
if (newFilePath === oldFilePath) return callback();
|
||||
|
||||
moved++;
|
||||
|
||||
// TODO this will overwrite files in destination!
|
||||
Client.filesRename($scope.backendId, $scope.backendType, oldFilePath, newFilePath, callback);
|
||||
}, function (error) {
|
||||
if (error) return Client.error(error);
|
||||
|
||||
// only refresh if anything has changed
|
||||
if (moved) $scope.refresh();
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// figure if a folder was dropped on a modern browser, in this case the first would have to be a directory
|
||||
var folderItem;
|
||||
try {
|
||||
folderItem = dataTransfer.items[0].webkitGetAsEntry();
|
||||
if (folderItem.isFile) return $scope.$parent.uploadFiles(event.originalEvent.dataTransfer.files, targetFolder, false);
|
||||
} catch (e) {
|
||||
return $scope.$parent.uploadFiles(event.originalEvent.dataTransfer.files, targetFolder, false);
|
||||
}
|
||||
|
||||
// if we got here we have a folder drop and a modern browser
|
||||
// now traverse the folder tree and create a file list
|
||||
var fileList = [];
|
||||
function traverseFileTree(item, path, callback) {
|
||||
if (item.isFile) {
|
||||
// Get file
|
||||
item.file(function (file) {
|
||||
fileList.push(file);
|
||||
callback();
|
||||
});
|
||||
} else if (item.isDirectory) {
|
||||
// Get folder contents
|
||||
var dirReader = item.createReader();
|
||||
dirReader.readEntries(function (entries) {
|
||||
async.each(entries, function (entry, callback) {
|
||||
traverseFileTree(entry, path + item.name + '/', callback);
|
||||
}, callback);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
traverseFileTree(folderItem, '', function (error) {
|
||||
if (error) return console.error(error);
|
||||
|
||||
$scope.$parent.uploadFiles(fileList, targetFolder, false);
|
||||
});
|
||||
};
|
||||
|
||||
$scope.refresh = function () {
|
||||
$scope.$parent.refresh();
|
||||
};
|
||||
|
||||
function amendIcons() {
|
||||
$scope.entries.forEach(function (e) {
|
||||
e.icon = 'fa-file';
|
||||
e.previewUrl = null;
|
||||
|
||||
if (e.isDirectory) e.icon = 'fa-folder';
|
||||
if (e.isSymbolicLink) e.icon = 'fa-link';
|
||||
if (e.isFile) {
|
||||
var mimeType = Mimer().get(e.fileName.toLowerCase());
|
||||
var mimeGroup = mimeType.split('/')[0];
|
||||
if (mimeGroup === 'text') e.icon = 'fa-file-alt';
|
||||
// if (mimeGroup === 'image') e.icon = 'fa-file-image';
|
||||
if (mimeGroup === 'image') {
|
||||
e.icon = 'fa-file-image';
|
||||
e.previewUrl = Client.filesGetLink($scope.backendId, $scope.backendType, sanitize($scope.cwd + '/' + e.fileName));
|
||||
}
|
||||
if (mimeGroup === 'video') e.icon = 'fa-file-video';
|
||||
if (mimeGroup === 'audio') e.icon = 'fa-file-audio';
|
||||
if (mimeType === 'text/csv') e.icon = 'fa-file-csv';
|
||||
if (mimeType === 'application/pdf') e.icon = 'fa-file-pdf';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// called from the parent
|
||||
$scope.onRefresh = function () {
|
||||
$scope.selected = [];
|
||||
$scope.busy = true;
|
||||
$scope.busyRefresh = true;
|
||||
|
||||
Client.filesGet($scope.backendId, $scope.backendType, $scope.cwd, 'data', function (error, result) {
|
||||
if (error && error.statusCode !== 404) return Client.error(error);
|
||||
|
||||
$scope.entries = result ? result.entries : [];
|
||||
amendIcons();
|
||||
sort();
|
||||
|
||||
$scope.busyRefresh = false;
|
||||
$scope.busy = false;
|
||||
});
|
||||
};
|
||||
|
||||
function openDirectory(path) {
|
||||
$scope.cwd = path;
|
||||
$scope.selected = [];
|
||||
|
||||
$scope.cwdParts = path.split('/').filter(function (p) { return !!p; }).map(function (p, i) { return { name: decodeURIComponent(p), path: path.split('/').slice(0, i+1).join('/') }; });
|
||||
|
||||
// refresh will set busy to false once done
|
||||
$scope.refresh();
|
||||
}
|
||||
|
||||
function openFile(entry) {
|
||||
var mimeType = Mimer().get(entry.fileName);
|
||||
var mimeGroup = mimeType.split('/')[0];
|
||||
var path = sanitize($scope.cwd + '/' + entry.fileName);
|
||||
|
||||
if (mimeGroup === 'video' || mimeGroup === 'image') {
|
||||
$scope.mediaViewer.show(entry);
|
||||
} else if (mimeType === 'application/pdf') {
|
||||
Client.filesGet($scope.backendId, $scope.backendType, path, 'open', function (error) { if (error) return Client.error(error); });
|
||||
} else if (mimeGroup === 'text' || mimeGroup === 'application') {
|
||||
$scope.$parent.textEditor.show($scope.cwd, entry);
|
||||
} else {
|
||||
Client.filesGet($scope.backendId, $scope.backendType, path, 'open', function (error) { if (error) return Client.error(error); });
|
||||
}
|
||||
|
||||
$scope.busy = false;
|
||||
}
|
||||
|
||||
$scope.open = function (entry) {
|
||||
if (entry.isDirectory) openDirectory(sanitize($scope.cwd + '/' + entry.fileName));
|
||||
else if (entry.isFile) openFile(entry);
|
||||
};
|
||||
|
||||
$scope.goDirectoryUp = function () {
|
||||
openDirectory(sanitize($scope.cwd + '/..'));
|
||||
};
|
||||
|
||||
$scope.changeDirectory = function (path) {
|
||||
openDirectory(sanitize(path));
|
||||
};
|
||||
|
||||
$scope.onClearSelection = function ($event) {
|
||||
// we don't stop propagation if targets don't match we got the whole list click event
|
||||
if ($event.currentTarget !== $event.target) return;
|
||||
|
||||
$scope.selected = [];
|
||||
};
|
||||
|
||||
$scope.onMousedown = function ($event, entry) {
|
||||
if ($event.button === 2) {
|
||||
$scope.onMouseup($event, entry);
|
||||
}
|
||||
};
|
||||
|
||||
$scope.onMouseup = function ($event, entry) {
|
||||
var i = $scope.selected.indexOf(entry);
|
||||
var multi = ($event.ctrlKey || $event.metaKey);
|
||||
var shift = $event.shiftKey;
|
||||
|
||||
if (shift) {
|
||||
if ($scope.selected.length === 0) {
|
||||
$scope.selected = [ entry ];
|
||||
} else {
|
||||
var pos = $scope.entries.indexOf(entry);
|
||||
var selectedPositions = $scope.selected.map(function (s) { return $scope.entries.indexOf(s); }).sort();
|
||||
|
||||
if (pos < selectedPositions[0]) {
|
||||
$scope.selected = $scope.entries.slice(pos, selectedPositions[0]+1);
|
||||
} else if (selectedPositions[1] && pos > selectedPositions[1]) {
|
||||
$scope.selected = $scope.entries.slice(selectedPositions[1], pos+1);
|
||||
} else {
|
||||
$scope.selected = $scope.entries.slice(selectedPositions[0], pos+1);
|
||||
}
|
||||
}
|
||||
} else if (multi) {
|
||||
if (i === -1) {
|
||||
$scope.selected.push(entry);
|
||||
} else if ($event.button === 0) { // only do this on left click
|
||||
$scope.selected.splice(i, 1);
|
||||
}
|
||||
} else {
|
||||
$scope.selected = [ entry ];
|
||||
}
|
||||
};
|
||||
|
||||
$scope.onEntryContextMenu = function ($event, entry) {
|
||||
if ($scope.selected.indexOf(entry) !== -1) return;
|
||||
$scope.selected.push(entry);
|
||||
};
|
||||
|
||||
$scope.actionSelectAll = function () {
|
||||
$scope.selected = $scope.entries.slice();
|
||||
};
|
||||
|
||||
// just events to the parent controller
|
||||
$scope.onUploadFile = function () { ctrl.onUploadFile({ cwd: $scope.cwd }); };
|
||||
$scope.onUploadFolder = function () { ctrl.onUploadFolder({ cwd: $scope.cwd }); };
|
||||
$scope.onNewFile = function () { ctrl.onNewFile({ cwd: $scope.cwd }); };
|
||||
$scope.onNewFolder = function () { ctrl.onNewFolder({ cwd: $scope.cwd }); };
|
||||
|
||||
$scope.mediaViewer = {
|
||||
type: '',
|
||||
src: '',
|
||||
entry: null,
|
||||
|
||||
show: function (entry) {
|
||||
var filePath = sanitize($scope.cwd + '/' + entry.fileName);
|
||||
|
||||
$scope.mediaViewer.entry = entry;
|
||||
$scope.mediaViewer.type = Mimer().get(entry.fileName).split('/')[0];
|
||||
$scope.mediaViewer.src = Client.filesGetLink($scope.backendId, $scope.backendType, filePath);
|
||||
|
||||
$('#mediaViewerModal-' + $scope.$id).modal('show');
|
||||
},
|
||||
|
||||
close: function () {
|
||||
// set an empty pixel image to bust the cached img to avoid flickering on slow load
|
||||
$scope.mediaViewer.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==';
|
||||
|
||||
$('#mediaViewerModal-' + $scope.$id).modal('hide');
|
||||
}
|
||||
};
|
||||
|
||||
$translate(['filemanager.list.menu.edit', 'filemanager.list.menu.cut', 'filemanager.list.menu.copy', 'filemanager.list.menu.paste', 'filemanager.list.menu.rename', 'filemanager.list.menu.chown', 'filemanager.list.menu.extract', 'filemanager.list.menu.download', 'filemanager.list.menu.delete' ]).then(function (tr) {
|
||||
$scope.menuOptions = [
|
||||
{
|
||||
text: tr['filemanager.list.menu.edit'],
|
||||
displayed: function ($itemScope, $event, entry) { return !entry.isDirectory && !entry.isSymbolicLink; },
|
||||
enabled: function () { return $scope.selected.length === 1; },
|
||||
hasBottomDivider: true,
|
||||
click: function ($itemScope, $event, entry) { $scope.open(entry); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.cut'],
|
||||
click: function ($itemScope, $event, entry) { ctrl.onCutEntries({ cwd: $scope.cwd, entries: $scope.selected.slice() }); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.copy'],
|
||||
click: function ($itemScope, $event, entry) { ctrl.onCopyEntries({ cwd: $scope.cwd, entries: $scope.selected.slice() }); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.paste'],
|
||||
hasBottomDivider: true,
|
||||
enabled: function () { return ctrl.clipboard.length; },
|
||||
click: function ($itemScope, $event, entry) { ctrl.onPasteEntries({ cwd: $scope.cwd, entry: entry }); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.rename'],
|
||||
enabled: function () { return $scope.selected.length === 1; },
|
||||
click: function ($itemScope, $event, entry) { ctrl.onRenameEntry({ cwd: $scope.cwd, entry: entry }); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.chown'],
|
||||
click: function ($itemScope, $event, entry) { ctrl.onChownEntries({ cwd: $scope.cwd, entries: $scope.selected }); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.extract'],
|
||||
displayed: function ($itemScope, $event, entry) { return !entry.isDirectory && isArchive(entry.fileName); },
|
||||
click: function ($itemScope, $event, entry) { ctrl.onExtractEntry({ cwd: $scope.cwd, entry: entry }); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.download'],
|
||||
enabled: function () { return $scope.selected.length === 1; },
|
||||
click: function ($itemScope, $event, entry) { download(entry); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.delete'],
|
||||
hasTopDivider: true,
|
||||
click: function ($itemScope, $event, entry) { ctrl.onDeleteEntries({ cwd: $scope.cwd, entries: $scope.selected }); }
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
$translate(['filemanager.toolbar.newFile', 'filemanager.toolbar.newFolder', 'filemanager.list.menu.paste', 'filemanager.list.menu.selectAll' ]).then(function (tr) {
|
||||
$scope.menuOptionsBlank = [
|
||||
{
|
||||
text: tr['filemanager.toolbar.newFile'],
|
||||
click: function ($itemScope, $event) { ctrl.onNewFile({ cwd: $scope.cwd }); }
|
||||
}, {
|
||||
text: tr['filemanager.toolbar.newFolder'],
|
||||
click: function ($itemScope, $event) { ctrl.onNewFolder({ cwd: $scope.cwd }); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.paste'],
|
||||
hasTopDivider: true,
|
||||
hasBottomDivider: true,
|
||||
enabled: function () { return ctrl.clipboard.length; },
|
||||
click: function ($itemScope, $event) { ctrl.onPasteEntries({ cwd: $scope.cwd, entry: null }); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.selectAll'],
|
||||
click: function ($itemScope, $event) { $scope.actionSelectAll(); }
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
function scrollInView(element) {
|
||||
if (!element) return;
|
||||
|
||||
// This assumes the DOM tree being that rigid
|
||||
function isVisible(ele) {
|
||||
var container = ele.parentElement.parentElement.parentElement;
|
||||
var eleTop = ele.offsetTop;
|
||||
var eleBottom = eleTop + ele.clientHeight;
|
||||
|
||||
var containerTop = container.scrollTop;
|
||||
var containerBottom = containerTop + container.clientHeight;
|
||||
|
||||
// The element is fully visible in the container
|
||||
return (
|
||||
(eleTop >= containerTop && eleBottom <= containerBottom) ||
|
||||
// Some part of the element is visible in the container
|
||||
(eleTop < containerTop && containerTop < eleBottom) ||
|
||||
(eleTop < containerBottom && containerBottom < eleBottom)
|
||||
);
|
||||
}
|
||||
|
||||
if (!isVisible(element)) element.scrollIntoView();
|
||||
}
|
||||
|
||||
function openSelected() {
|
||||
if (!$scope.selected.length) return;
|
||||
|
||||
$scope.open($scope.selected[0]);
|
||||
}
|
||||
|
||||
function selectNext() {
|
||||
var entries = sort();
|
||||
|
||||
if (!$scope.selected.length) return $scope.selected = [ entries[0] ];
|
||||
|
||||
var curIndex = $scope.entries.indexOf($scope.selected[0]);
|
||||
if (curIndex !== -1 && curIndex < $scope.entries.length-1) {
|
||||
var entry = entries[++curIndex];
|
||||
$scope.selected = [ entry ];
|
||||
scrollInView(document.querySelector('[entry-hashkey="' + entry['$$hashKey'] + '"]'));
|
||||
}
|
||||
}
|
||||
|
||||
function selectPrev() {
|
||||
var entries = sort();
|
||||
|
||||
if (!$scope.selected.length) return $scope.selected = [ entries.slice(-1) ];
|
||||
|
||||
var curIndex = $scope.entries.indexOf($scope.selected[0]);
|
||||
if (curIndex !== -1 && curIndex !== 0) {
|
||||
var entry = entries[--curIndex];
|
||||
$scope.selected = [ entry ];
|
||||
scrollInView(document.querySelector('[entry-hashkey="' + entry['$$hashKey'] + '"]'));
|
||||
}
|
||||
}
|
||||
|
||||
openDirectory('.');
|
||||
|
||||
$('.file-list').on('scroll', function (event) {
|
||||
if (event.target.scrollTop > 10) event.target.classList.add('top-scroll-indicator');
|
||||
else event.target.classList.remove('top-scroll-indicator');
|
||||
});
|
||||
|
||||
// handle shortcuts
|
||||
window.addEventListener('keydown', function (event) {
|
||||
if ($scope.$parent.activeView !== $scope.view || $scope.$parent.viewerOpen || isModalVisible()) return;
|
||||
|
||||
if (event.key === 'ArrowDown') {
|
||||
$scope.$apply(selectNext);
|
||||
} else if (event.key === 'ArrowUp') {
|
||||
$scope.$apply(selectPrev);
|
||||
} else if (event.key === 'Enter') {
|
||||
$scope.$apply(openSelected);
|
||||
} else if (event.key === 'Backspace') {
|
||||
if ($scope.view === 'fileTree') $scope.goDirectoryUp();
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1,354 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="Application">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
|
||||
|
||||
<title>Cloudron Filemanager</title>
|
||||
<meta name="description" content="Cloudron Filemanager">
|
||||
|
||||
<link id="favicon" href="/api/v1/cloudron/avatar" rel="icon" type="image/png">
|
||||
<link rel="apple-touch-icon" href="/api/v1/cloudron/avatar">
|
||||
<link rel="icon" href="/api/v1/cloudron/avatar">
|
||||
|
||||
<!-- CSS -->
|
||||
<link type="text/css" rel="stylesheet" href="/3rdparty/angular-ui-notification.css?<%= revision %>"/>
|
||||
<link type="text/css" rel="stylesheet" href="/theme.css?<%= revision %>">
|
||||
|
||||
<!-- Fontawesome -->
|
||||
<link type="text/css" rel="stylesheet" href="/3rdparty/fontawesome/css/all.css?<%= revision %>"/>
|
||||
|
||||
<!-- jQuery-->
|
||||
<script type="text/javascript" src="/3rdparty/js/jquery.min.js?<%= revision %>"></script>
|
||||
|
||||
<!-- async -->
|
||||
<script type="text/javascript" src="/3rdparty/js/async-3.2.0.min.js?<%= revision %>"></script>
|
||||
|
||||
<!-- Showdown (markdown converter) -->
|
||||
<script type="text/javascript" src="/3rdparty/js/showdown-1.9.1.min.js?<%= revision %>"></script>
|
||||
|
||||
<!-- Bootstrap Core JavaScript -->
|
||||
<script type="text/javascript" src="/3rdparty/js/bootstrap.min.js?<%= revision %>"></script>
|
||||
|
||||
<!-- Angularjs scripts -->
|
||||
<script type="text/javascript" src="/3rdparty/js/angular.min.js?<%= revision %>"></script>
|
||||
<script type="text/javascript" src="/3rdparty/js/angular-loader.min.js?<%= revision %>"></script>
|
||||
<script type="text/javascript" src="/3rdparty/js/angular-cookies.min.js?<%= revision %>"></script>
|
||||
<script type="text/javascript" src="/3rdparty/js/angular-animate.min.js?<%= revision %>"></script>
|
||||
<script type="text/javascript" src="/3rdparty/js/angular-base64.min.js?<%= revision %>"></script>
|
||||
<script type="text/javascript" src="/3rdparty/js/angular-md5.min.js?<%= revision %>"></script>
|
||||
<script type="text/javascript" src="/3rdparty/js/angular-sanitize.min.js?<%= revision %>"></script>
|
||||
<script type="text/javascript" src="/3rdparty/js/angular-ui-notification.js?<%= revision %>"></script>
|
||||
|
||||
<!-- Angular directives for bootstrap https://angular-ui.github.io/bootstrap/ -->
|
||||
<script type="text/javascript" src="/3rdparty/js/ui-bootstrap-tpls-1.3.3.min.js?<%= revision %>"></script>
|
||||
|
||||
<!-- Angular translate https://angular-translate.github.io/ -->
|
||||
<script type="text/javascript" src="/3rdparty/js/angular-translate.min.js?<%= revision %>"></script>
|
||||
<script type="text/javascript" src="/3rdparty/js/angular-translate-loader-static-files.min.js?<%= revision %>"></script>
|
||||
<script type="text/javascript" src="/3rdparty/js/angular-translate-storage-cookie.min.js?<%= revision %>"></script>
|
||||
<script type="text/javascript" src="/3rdparty/js/angular-translate-storage-local.min.js?<%= revision %>"></script>
|
||||
|
||||
<!-- colors -->
|
||||
<script type="text/javascript" src="/3rdparty/js/colors.js?<%= revision %>"></script>
|
||||
|
||||
<!-- moment -->
|
||||
<script type="text/javascript" src="/3rdparty/js/moment-with-locales.min.js?<%= revision %>"></script>
|
||||
|
||||
<!-- https://github.com/data-uri/mimer -->
|
||||
<script type="text/javascript" src="/3rdparty/js/mimer.min.js?<%= revision %>"></script>
|
||||
|
||||
<!-- https://github.com/Templarian/ui.bootstrap.contextMenu -->
|
||||
<script type="text/javascript" src="/3rdparty/js/contextMenu.js?<%= revision %>"></script>
|
||||
|
||||
<!-- WARNING this adds an AMD loader! Make sure script tag includes like mimer are above -->
|
||||
<!-- monaco-editor -->
|
||||
<script type="text/javascript" src="/3rdparty/vs/loader.js?<%= revision %>"></script>
|
||||
|
||||
<!-- Main Application -->
|
||||
<script type="text/javascript" src="/js/filemanager.js?<%= revision %>"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body class="filemanager" ng-drop="drop($event)" ng-dragover="dragEnter($event)" ng-dragleave="dragExit($event)" ng-controller="FileManagerController">
|
||||
|
||||
<a class="offline-banner animateMe" ng-show="client.offline" ng-cloak href="https://docs.cloudron.io/troubleshooting/" target="_blank"><i class="fa fa-circle-notch fa-spin"></i> {{ 'main.offline' | tr }}</a>
|
||||
|
||||
<div class="restart-banner animateMe" ng-show="restartBusy" ng-cloak><i class="fa fa-circle-notch fa-spin"></i> {{ 'filemanager.status.restartingApp' | tr}}</div>
|
||||
|
||||
<!-- Modal delete entries -->
|
||||
<div class="modal fade" id="entriesDeleteModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<p class="text-bold text-danger" ng-show="deleteEntries.error">{{ deleteEntries.error }}</p>
|
||||
<h4 ng-hide="deleteEntries.error">{{ 'filemanager.removeDialog.reallyDelete' | tr }}</h4>
|
||||
<ul>
|
||||
<li ng-repeat="entry in deleteEntries.entries">{{ entry.fileName }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.no' | tr }}</button>
|
||||
<button type="button" class="btn btn-danger" ng-click="deleteEntries.submit()" ng-hide="deleteEntries.error" ng-disabled="deleteEntries.busy"><i class="fa fa-circle-notch fa-spin" ng-show="deleteEntries.busy"></i> {{ 'main.dialog.yes' | tr }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal rename entry -->
|
||||
<div class="modal fade" id="renameEntryModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">{{ 'filemanager.renameDialog.title' | tr:{ fileName: renameEntry.entry.fileName } }}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form role="form" name="renameEntryForm" ng-submit="renameEntry.submit()" autocomplete="off">
|
||||
<div class="form-group" ng-class="{ 'has-error': (renameEntryForm.newName.$dirty && renameEntryForm.newName.$invalid) }">
|
||||
<label class="control-label">{{ 'filemanager.renameDialog.newName' | tr }}</label>
|
||||
<div class="control-label" ng-show="renameEntry.error">{{ renameEntry.error }}</div>
|
||||
<input type="text" class="form-control" id="inputNewName" name="newName" ng-model="renameEntry.newName" required autofocus>
|
||||
</div>
|
||||
<input class="ng-hide" type="submit" ng-disabled="renameEntryForm.$invalid || renameEntry.busy"/>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
|
||||
<button type="button" class="btn btn-primary" ng-click="renameEntry.submit()" ng-hide="renameEntry.error" ng-disabled="renameEntry.busy"><i class="fa fa-circle-notch fa-spin" ng-show="renameEntry.busy"></i> {{ 'filemanager.renameDialog.rename' | tr }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal extract -->
|
||||
<div class="modal fade" id="extractModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">{{ 'filemanager.extractDialog.title' | tr:{ fileName: extractStatus.fileName } }}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div ng-show="extractStatus.error">
|
||||
<p class="text-danger">{{ extractStatus.error }}</p>
|
||||
</div>
|
||||
<div class="progress progress-striped active" ng-hide="extractStatus.error">
|
||||
<div class="progress-bar" role="progressbar" style="width: 100%">
|
||||
</div>
|
||||
</div>
|
||||
<p class="no-wrap" ng-hide="extractStatus.error">{{ extractStatus.fileName }}</p>
|
||||
</div>
|
||||
<div class="modal-footer" style="text-align: left;">
|
||||
<small ng-hide="extractStatus.error">{{ 'filemanager.extractDialog.closeWarning' | tr }}</small>
|
||||
<button class="btn btn-primary pull-right" ng-show="extractStatus.error" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal chown entry -->
|
||||
<div class="modal fade" id="chownEntriesModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">{{ 'filemanager.chownDialog.title' | tr }}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form role="form" name="chownEntryForm" ng-submit="chownEntries.submit()" autocomplete="off">
|
||||
<div class="form-group" ng-class="{ 'has-error': (chownEntryForm.newOwner.$dirty && chownEntries.error) }">
|
||||
<label class="control-label">{{ 'filemanager.chownDialog.newOwner' | tr }}</label>
|
||||
<div class="control-label" for="inputNewOwner" ng-show="chownEntries.error">{{ chownEntries.error }}</div>
|
||||
<select class="form-control" id="inputNewOwner" name="newOwner" ng-model="chownEntries.newOwner" ng-options="a.value as a.name for a in OWNERS" ng-disabled="chownEntries.busy"></select>
|
||||
</div>
|
||||
<div class="form-group" ng-show="chownEntries.showRecursiveOption">
|
||||
<input type="checkbox" id="inputNewOwnerRecursive" ng-model="chownEntries.recursive">
|
||||
<label class="control-label" for="inputNewOwnerRecursive">{{ 'filemanager.chownDialog.recursiveCheckbox' | tr }}</label>
|
||||
</div>
|
||||
<input class="ng-hide" type="submit" ng-disabled="chownEntryForm.$invalid || chownEntries.busy"/>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
|
||||
<button type="button" class="btn btn-primary" ng-click="chownEntries.submit()" ng-hide="chownEntries.error" ng-disabled="chownEntries.busy"><i class="fa fa-circle-notch fa-spin" ng-show="chownEntries.busy"></i> {{ 'filemanager.chownDialog.change' | tr }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal new file -->
|
||||
<div class="modal fade" id="newFileModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">{{ 'filemanager.newFileDialog.title' | tr }}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form role="form" name="newFileForm" ng-submit="newFile.submit()" autocomplete="off">
|
||||
<div class="form-group" ng-class="{ 'has-error': newFile.error || (newFileForm.fileName.$dirty && newFileForm.fileName.$invalid) }">
|
||||
<input type="text" class="form-control" id="inputFileName" name="fileName" ng-model="newFile.name" required autofocus>
|
||||
<div class="control-label" ng-show="newFile.error === 'exists'">{{ 'filemanager.newFile.errorAlreadyExists' | tr }}</div>
|
||||
</div>
|
||||
<input class="ng-hide" type="submit" ng-disabled="newFileForm.$invalid || newFile.busy"/>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
|
||||
<button type="button" class="btn btn-primary" ng-click="newFile.submit()" ng-disabled="newFile.busy"><i class="fa fa-circle-notch fa-spin" ng-show="newFile.busy"></i> {{ 'filemanager.newFileDialog.create' | tr }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal new directory -->
|
||||
<div class="modal fade" id="newFolderModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">{{ 'filemanager.newDirectoryDialog.title' | tr }}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form role="form" name="newFolderForm" ng-submit="newFolder.submit()" autocomplete="off">
|
||||
<div class="form-group" ng-class="{ 'has-error': newFolder.error || (newFolderForm.directoryName.$dirty && newFolderForm.directoryName.$invalid) }">
|
||||
<input type="text" class="form-control" id="inputDirectoryName" name="directoryName" ng-model="newFolder.name" required autofocus>
|
||||
<div class="control-label" ng-show="newFolder.error === 'exists'">{{ 'filemanager.newDirectory.errorAlreadyExists' | tr }}</div>
|
||||
</div>
|
||||
<input class="ng-hide" type="submit" ng-disabled="newDirectoryForm.$invalid || newFolder.busy"/>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
|
||||
<button type="button" class="btn btn-primary" ng-click="newFolder.submit()" ng-disabled="newFolder.busy"><i class="fa fa-circle-notch fa-spin" ng-show="newFolder.busy"></i> {{ 'filemanager.newDirectoryDialog.create' | tr }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal editor close -->
|
||||
<div class="modal fade" id="textEditorCloseModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">{{ 'filemanager.textEditorCloseDialog.title' | tr }}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="text-bold text-danger">{{ 'filemanager.textEditorCloseDialog.details' | tr }}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" ng-click="textEditor.onClose()">{{ 'filemanager.textEditorCloseDialog.dontSave' | tr }}</button>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
|
||||
<button type="button" class="btn btn-success" ng-click="textEditor.saveAndClose()"><i class="fa fa-circle-notch fa-spin" ng-show="textEditor.busy"></i> {{ 'main.dialog.save' | tr }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal upload -->
|
||||
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">{{ 'filemanager.uploadingDialog.title' | tr:{ countDone: uploadStatus.countDone, count: uploadStatus.count } }}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div ng-show="uploadStatus.error">
|
||||
<p class="text-danger" ng-show="uploadStatus.error === 'exists'">{{ 'filemanager.uploadingDialog.errorAlreadyExists' | tr }}</p>
|
||||
<p class="text-danger" ng-show="uploadStatus.error === 'generic'">{{ 'filemanager.uploadingDialog.errorFailed' | tr }}</p>
|
||||
</div>
|
||||
<span><b>{{ uploadStatus.sizeDone | prettyDecimalSize }}</b> (total {{ uploadStatus.size | prettyDecimalSize }})</span>
|
||||
<div class="progress progress-striped active" ng-hide="uploadStatus.error">
|
||||
<div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ uploadStatus.percentDone || 0 }}%"></div>
|
||||
</div>
|
||||
<p class="no-wrap" ng-hide="uploadStatus.error">{{ uploadStatus.fileName }}</p>
|
||||
</div>
|
||||
<div class="modal-footer" style="text-align: left;">
|
||||
<small ng-hide="uploadStatus.error">{{ 'filemanager.uploadingDialog.closeWarning' | tr }}</small>
|
||||
<button class="btn btn-default pull-right" ng-show="uploadStatus.error" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
|
||||
<button class="btn btn-primary pull-right" ng-show="uploadStatus.error === 'generic'" ng-click="retryUpload(false)">{{ 'filemanager.uploadingDialog.retry' | tr }}</button>
|
||||
<button class="btn btn-danger pull-right" ng-show="uploadStatus.error === 'exists'" ng-click="retryUpload(true)">{{ 'filemanager.uploadingDialog.overwrite' | tr }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="animateMe ng-hide layout-root" ng-show="initialized">
|
||||
<div class="row" ng-hide="title">
|
||||
<div class="col-md-12 text-center">
|
||||
<h3>{{ 'filemanager.notFound' | tr }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="file" id="uploadFileInput" style="display: none" multiple/>
|
||||
<input type="file" id="uploadFolderInput" style="display: none" multiple webkitdirectory directory/>
|
||||
|
||||
<div class="container card" ng-show="title" style="max-width: unset;">
|
||||
<h4 class="text-left">
|
||||
{{ title }}
|
||||
|
||||
<div class="pull-right">
|
||||
<div class="btn-group" ng-show="volumes.length">
|
||||
<button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-folder"></i> <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu dropdown-menu-right">
|
||||
<li ng-repeat="volume in volumes"><a class="hand" ng-href="{{ '/filemanager.html?type=volume&id=' + volume.id }}" target="_blank"><i class="fas fa-folder fa-fw"></i> {{ volume.name }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-default" ng-class="{ 'active': splitView }" ng-click="toggleSplitView()"><i class="fas fa-columns"></i></button>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-default" ng-show="backendType === 'app'" ng-click="onRestartApp()" uib-tooltip="{{ 'filemanager.toolbar.restartApp' | tr }}" tooltip-placement="bottom" tooltip-append-to-body="true"><i class="fas fa-sync-alt"></i></button>
|
||||
<button type="button" class="btn btn-sm btn-default" ng-show="backendType === 'mail'" ng-click="onRestartMail()" uib-tooltip="{{ 'filemanager.toolbar.restartApp' | tr }}" tooltip-placement="bottom" tooltip-append-to-body="true"><i class="fas fa-sync-alt"></i></button>
|
||||
<a type="button" class="btn btn-sm btn-default" ng-show="backendType === 'app'" ng-href="/frontend/logs.html?{{ backendType === 'app' ? 'appId=' + backendId : 'id=mail' }}" target="_blank" uib-tooltip="{{ 'filemanager.toolbar.openLogs' | tr }}" tooltip-placement="bottom" tooltip-append-to-body="true"><i class="fas fa-align-left"></i></a>
|
||||
<a type="button" class="btn btn-sm btn-default" ng-show="backendType === 'app'" ng-href="{{ '/frontend/terminal.html?id=' + backendId }}" target="_blank" uib-tooltip="{{ 'filemanager.toolbar.openTerminal' | tr }}" tooltip-placement="bottom" tooltip-append-to-body="true"><i class="fa fa-terminal"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</h4>
|
||||
|
||||
<div class="file-trees">
|
||||
<filetree ng-class="{ 'two-pane': splitView }"
|
||||
on-upload-folder="onUploadFolder(cwd)"
|
||||
on-upload-file="onUploadFile(cwd)"
|
||||
on-new-file="newFile.show(cwd)"
|
||||
on-new-folder="newFolder.show(cwd)"
|
||||
on-copy-entries="actionCopy(cwd, entries)"
|
||||
on-cut-entries="actionCut(cwd, entries)"
|
||||
on-paste-entries="actionPaste(cwd, entries)"
|
||||
on-delete-entries="deleteEntries.show(cwd, entries)"
|
||||
on-rename-entry="renameEntry.show(cwd, entry)"
|
||||
on-extract-entry="extractEntry(cwd, entry)"
|
||||
on-chown-entries="chownEntries.show(cwd, entries)"
|
||||
backend-type="backendType" backend-id="backendId" view="VIEW.LEFT" clipboard="clipboard"
|
||||
ng-click="setActiveView(VIEW.LEFT)"></filetree>
|
||||
<filetree ng-show="splitView" class="two-pane"
|
||||
on-upload-folder="onUploadFolder(cwd)"
|
||||
on-upload-file="onUploadFile(cwd)"
|
||||
on-new-file="newFile.show(cwd)"
|
||||
on-new-folder="newFolder.show(cwd)"
|
||||
on-copy-entries="actionCopy(cwd, entries)"
|
||||
on-cut-entries="actionCut(cwd, entries)"
|
||||
on-paste-entries="actionPaste(cwd, entries)"
|
||||
on-delete-entries="deleteEntries.show(cwd, entries)"
|
||||
on-rename-entry="renameEntry.show(cwd, entry)"
|
||||
on-extract-entry="extractEntry(cwd, entry)"
|
||||
on-chown-entries="chownEntries.show(cwd, entries)"
|
||||
backend-type="backendType" backend-id="backendId" view="VIEW.RIGHT" clipboard="clipboard"
|
||||
ng-click="setActiveView(VIEW.RIGHT)"></filetree>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="textEditor.visible" class="text-editor">
|
||||
<div>
|
||||
<div class="toolbar">
|
||||
<div><span>{{ textEditor.entry.fileName }}</span></div>
|
||||
<button type="button" class="btn btn-primary" ng-click="textEditor.maybeClose()">{{ 'main.dialog.close' | tr }}</button>
|
||||
<button type="button" class="btn btn-success" ng-click="textEditor.save()" ng-disabled="textEditor.busy"><i class="fa fa-circle-notch fa-spin" ng-show="textEditor.busy"></i> {{ 'main.dialog.save' | tr }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="textEditorContainer" style="flex-grow: 2; border: 0px solid black"></div>
|
||||
</div>
|
||||
|
||||
<footer class="text-center ng-cloak">
|
||||
<span class="text-muted" ng-bind-html="status.footer | markdown2html"></span>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -80,9 +80,6 @@
|
||||
<!-- Anugular Multiselect https://github.com/sebastianha/angular-bootstrap-multiselect -->
|
||||
<script type="text/javascript" src="/3rdparty/js/angular-bootstrap-multiselect.js?<%= revision %>"></script>
|
||||
|
||||
<!-- colors -->
|
||||
<script type="text/javascript" src="/3rdparty/js/colors.js?<%= revision %>"></script>
|
||||
|
||||
<!-- moment -->
|
||||
<script type="text/javascript" src="/3rdparty/js/moment-with-locales.min.js?<%= revision %>"></script>
|
||||
|
||||
|
||||
@@ -3464,156 +3464,6 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
|
||||
});
|
||||
};
|
||||
|
||||
// FileManager API
|
||||
// mode can be 'download', 'open', 'link' or 'data'
|
||||
function getObjpath(id, type) {
|
||||
if (type === 'mail') return 'mailserver';
|
||||
if (type === 'app') return 'apps/' + id;
|
||||
if (type === 'volume') return 'volumes/' + id;
|
||||
}
|
||||
|
||||
Client.prototype.filesGetLink = function (id, type, path) {
|
||||
var objpath = getObjpath(id, type);
|
||||
return client.apiOrigin + '/api/v1/' + objpath + '/files/' + path + '?download=false&access_token=' + token;
|
||||
};
|
||||
|
||||
Client.prototype.filesGet = function (id, type, path, mode, callback) {
|
||||
var objpath = getObjpath(id, type);
|
||||
|
||||
if (mode === 'download') {
|
||||
window.open(client.apiOrigin + '/api/v1/' + objpath + '/files/' + path + '?download=true&access_token=' + token);
|
||||
callback(null);
|
||||
} else if (mode === 'open') {
|
||||
window.open(client.apiOrigin + '/api/v1/' + objpath + '/files/' + path + '?download=false&access_token=' + token);
|
||||
callback(null);
|
||||
} else {
|
||||
function responseHandler(data, headers, status) {
|
||||
if (headers()['content-type'] && headers()['content-type'].indexOf('application/json') !== -1) return JSON.parse(data);
|
||||
return data;
|
||||
}
|
||||
|
||||
get('/api/v1/' + objpath + '/files/' + path, { transformResponse: responseHandler }, function (error, data, status) {
|
||||
if (error) return callback(error);
|
||||
if (status !== 200) return callback(new ClientError(status, data));
|
||||
|
||||
callback(null, data);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Client.prototype.filesRemove = function (id, type, path, callback) {
|
||||
var objpath = getObjpath(id, type);
|
||||
|
||||
del('/api/v1/' + objpath + '/files/' + path, null, function (error, data, status) {
|
||||
if (error) return callback(error);
|
||||
if (status !== 200) return callback(new ClientError(status, data));
|
||||
|
||||
callback(null, data);
|
||||
});
|
||||
};
|
||||
|
||||
Client.prototype.filesExtract = function (id, type, path, callback) {
|
||||
var objpath = getObjpath(id, type);
|
||||
|
||||
put('/api/v1/' + objpath + '/files/' + path, { action: 'extract' }, {}, function (error, data, status) {
|
||||
if (error) return callback(error);
|
||||
if (status !== 200) return callback(new ClientError(status, data));
|
||||
|
||||
callback(null, data);
|
||||
});
|
||||
};
|
||||
|
||||
Client.prototype.filesChown = function (id, type, path, uid, recursive, callback) {
|
||||
var objpath = getObjpath(id, type);
|
||||
|
||||
put('/api/v1/' + objpath + '/files/' + path, { action: 'chown', uid: uid, recursive: recursive }, {}, function (error, data, status) {
|
||||
if (error) return callback(error);
|
||||
if (status !== 200) return callback(new ClientError(status, data));
|
||||
|
||||
callback(null, data);
|
||||
});
|
||||
};
|
||||
|
||||
Client.prototype.filesRename = function (id, type, path, newPath, callback) {
|
||||
var objpath = getObjpath(id, type);
|
||||
|
||||
put('/api/v1/' + objpath + '/files/' + path, { action: 'rename', newFilePath: decodeURIComponent(newPath) }, {}, function (error, data, status) {
|
||||
if (error) return callback(error);
|
||||
if (status !== 200) return callback(new ClientError(status, data));
|
||||
|
||||
callback(null, data);
|
||||
});
|
||||
};
|
||||
|
||||
Client.prototype.filesCopy = function (id, type, path, newPath, callback) {
|
||||
var that = this;
|
||||
|
||||
var objpath = getObjpath(id, type);
|
||||
|
||||
put('/api/v1/' + objpath + '/files/' + path, { action: 'copy', newFilePath: decodeURIComponent(newPath) }, {}, function (error, data, status) {
|
||||
if (error && error.statusCode === 409) return that.filesCopy(id, type, path, newPath + '-copy', callback);
|
||||
if (error) return callback(error);
|
||||
if (status !== 200) return callback(new ClientError(status, data));
|
||||
|
||||
callback(null, data);
|
||||
});
|
||||
};
|
||||
|
||||
Client.prototype.filesCreateDirectory = function (id, type, path, callback) {
|
||||
var objpath = getObjpath(id, type);
|
||||
|
||||
post('/api/v1/' + objpath + '/files/' + path, { directory: decodeURIComponent(path) }, {}, function (error, data, status) {
|
||||
if (error) return callback(error);
|
||||
if (status !== 200) return callback(new ClientError(status, data));
|
||||
|
||||
callback(null, data);
|
||||
});
|
||||
};
|
||||
|
||||
Client.prototype.filesCreateFile = function (id, type, path, callback) {
|
||||
var objpath = getObjpath(id, type);
|
||||
|
||||
post('/api/v1/' + objpath + '/files/' + path, {}, {}, function (error, data, status) {
|
||||
if (error) return callback(error);
|
||||
if (status !== 200) return callback(new ClientError(status, data));
|
||||
|
||||
callback(null, data);
|
||||
});
|
||||
};
|
||||
|
||||
Client.prototype.filesUpload = function (id, type, path, file, overwrite, progressHandler, callback) {
|
||||
var objpath = getObjpath(id, type);
|
||||
|
||||
var fd = new FormData();
|
||||
fd.append('file', file);
|
||||
|
||||
if (overwrite) fd.append('overwrite', 'true');
|
||||
|
||||
function done(error, data, status) {
|
||||
if (error) return callback(error);
|
||||
if (status !== 200) return callback(new ClientError(status, data));
|
||||
|
||||
callback(null, data);
|
||||
}
|
||||
|
||||
$http({
|
||||
url: client.apiOrigin + '/api/v1/' + objpath + '/files/' + path,
|
||||
method: 'POST',
|
||||
data: fd,
|
||||
transformRequest: angular.identity,
|
||||
headers: {
|
||||
'Content-Type': undefined,
|
||||
Authorization: 'Bearer ' + token
|
||||
},
|
||||
|
||||
uploadEventHandlers: {
|
||||
progress: function (e) {
|
||||
progressHandler(e.loaded);
|
||||
}
|
||||
}
|
||||
}).success(defaultSuccessHandler(done)).error(defaultErrorHandler(done));
|
||||
};
|
||||
|
||||
// ----------------------------------------------
|
||||
// Eventlog helpers
|
||||
// ----------------------------------------------
|
||||
|
||||
@@ -1,890 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
require.config({ paths: { 'vs': '3rdparty/vs' }});
|
||||
|
||||
// create main application module
|
||||
var app = angular.module('Application', ['pascalprecht.translate', 'ngCookies', 'angular-md5', 'ui-notification', 'ngDrag', 'ui.bootstrap', 'ui.bootstrap.contextMenu']);
|
||||
|
||||
angular.module('Application').filter('prettyOwner', function () {
|
||||
return function (uid) {
|
||||
if (uid === 0) return 'root';
|
||||
if (uid === 33) return 'www-data';
|
||||
if (uid === 1000) return 'cloudron';
|
||||
if (uid === 1001) return 'git';
|
||||
|
||||
return uid;
|
||||
};
|
||||
});
|
||||
|
||||
// disable sce for footer https://code.angularjs.org/1.5.8/docs/api/ng/service/$sce
|
||||
app.config(function ($sceProvider) {
|
||||
$sceProvider.enabled(false);
|
||||
});
|
||||
|
||||
app.filter('trustUrl', ['$sce', function ($sce) {
|
||||
return function (recordingUrl) {
|
||||
return $sce.trustAsResourceUrl(recordingUrl);
|
||||
};
|
||||
}]);
|
||||
|
||||
// https://stackoverflow.com/questions/25621321/angularjs-ng-drag
|
||||
var ngDragEventDirectives = {};
|
||||
angular.forEach(
|
||||
'drag dragend dragenter dragexit dragleave dragover dragstart drop'.split(' '),
|
||||
function(eventName) {
|
||||
var directiveName = 'ng' + eventName.charAt(0).toUpperCase() + eventName.slice(1);
|
||||
|
||||
ngDragEventDirectives[directiveName] = ['$parse', '$rootScope', function($parse/*, $rootScope */) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
compile: function($element, attr) {
|
||||
var fn = $parse(attr[directiveName], null, true);
|
||||
|
||||
return function ngDragEventHandler(scope, element) {
|
||||
element.on(eventName, function(event) {
|
||||
var callback = function() {
|
||||
fn(scope, {$event: event});
|
||||
};
|
||||
|
||||
scope.$apply(callback);
|
||||
});
|
||||
};
|
||||
}
|
||||
};
|
||||
}];
|
||||
}
|
||||
);
|
||||
angular.module('ngDrag', []).directive(ngDragEventDirectives);
|
||||
|
||||
function sanitize(filePath) {
|
||||
filePath = filePath.split('/').filter(function (a) { return !!a; }).reduce(function (a, v) {
|
||||
if (v === '.'); // do nothing
|
||||
else if (v === '..') a.pop();
|
||||
else a.push(v);
|
||||
return a;
|
||||
}, []).map(function (p) {
|
||||
// small detour to safely handle special characters and whitespace
|
||||
return encodeURIComponent(decodeURIComponent(p));
|
||||
}).join('/');
|
||||
|
||||
return filePath;
|
||||
}
|
||||
|
||||
function isModalVisible() {
|
||||
return !!document.getElementsByClassName('modal in').length;
|
||||
}
|
||||
|
||||
var VIEW = {
|
||||
LEFT: 'left',
|
||||
RIGHT: 'right'
|
||||
};
|
||||
|
||||
var OWNERS = [
|
||||
{ name: 'cloudron', value: 1000 },
|
||||
{ name: 'www-data', value: 33 },
|
||||
{ name: 'git', value: 1001 },
|
||||
{ name: 'root', value: 0 }
|
||||
];
|
||||
|
||||
app.controller('FileManagerController', ['$scope', '$translate', '$timeout', 'Client', function ($scope, $translate, $timeout, Client) {
|
||||
var search = decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.split('='); }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
|
||||
|
||||
// expose enums
|
||||
$scope.VIEW = VIEW;
|
||||
$scope.OWNERS = OWNERS;
|
||||
|
||||
$scope.initialized = false;
|
||||
$scope.status = null;
|
||||
$scope.client = Client;
|
||||
$scope.title = '';
|
||||
$scope.backendId = search.id;
|
||||
$scope.backendType = search.type;
|
||||
$scope.volumes = [];
|
||||
$scope.splitView = !!window.localStorage.splitView;
|
||||
$scope.activeView = VIEW.LEFT;
|
||||
$scope.viewerOpen = false;
|
||||
|
||||
$scope.clipboard = []; // holds cut or copied entries
|
||||
$scope.clipboardCut = false; // if action is cut or copy
|
||||
|
||||
|
||||
// add a hook for children to refresh both tree views
|
||||
|
||||
$scope.children = [];
|
||||
$scope.registerChild = function (child) { $scope.children.push(child); };
|
||||
$scope.refresh = function () {
|
||||
$scope.children.forEach(function (child) {
|
||||
child.onRefresh();
|
||||
});
|
||||
};
|
||||
|
||||
function collectFiles(entry, callback) {
|
||||
var pathFrom = entry.pathFrom;
|
||||
|
||||
if (entry.isDirectory) {
|
||||
Client.filesGet($scope.backendId, $scope.backendType, entry.fullFilePath, 'data', function (error, result) {
|
||||
if (error) return callback(error);
|
||||
if (!result.entries) return callback(new Error('not a folder'));
|
||||
|
||||
// amend fullFilePath
|
||||
result.entries.forEach(function (e) {
|
||||
e.fullFilePath = sanitize(entry.fullFilePath + '/' + e.fileName);
|
||||
e.pathFrom = pathFrom; // we stash the original path for pasting
|
||||
});
|
||||
|
||||
var collectedFiles = [];
|
||||
async.eachLimit(result.entries, 5, function (entry, callback) {
|
||||
collectFiles(entry, function (error, result) {
|
||||
if (error) return callback(error);
|
||||
|
||||
collectedFiles = collectedFiles.concat(result);
|
||||
|
||||
callback();
|
||||
});
|
||||
}, function (error) {
|
||||
if (error) return callback(error);
|
||||
|
||||
callback(null, collectedFiles);
|
||||
});
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
callback(null, [ entry ]);
|
||||
}
|
||||
|
||||
// entries need to be an actual copy
|
||||
$scope.actionCut = function (cwd, entries) {
|
||||
$scope.clipboard = entries; //$scope.selected.slice();
|
||||
$scope.clipboard.forEach(function (entry) {
|
||||
entry.fullFilePath = sanitize(cwd + '/' + entry.fileName);
|
||||
});
|
||||
$scope.clipboardCut = true;
|
||||
};
|
||||
|
||||
// entries need to be an actual copy
|
||||
$scope.actionCopy = function (cwd, entries) {
|
||||
$scope.clipboard = entries; //$scope.selected.slice();
|
||||
$scope.clipboard.forEach(function (entry) {
|
||||
entry.fullFilePath = sanitize(cwd + '/' + entry.fileName);
|
||||
entry.pathFrom = cwd; // we stash the original path for pasting
|
||||
});
|
||||
$scope.clipboardCut = false;
|
||||
};
|
||||
|
||||
$scope.actionPaste = function (cwd, destinationEntry) {
|
||||
if ($scope.clipboardCut) {
|
||||
// move files
|
||||
async.eachLimit($scope.clipboard, 5, function (entry, callback) {
|
||||
var newFilePath = sanitize(cwd + '/' + ((destinationEntry && destinationEntry.isDirectory) ? destinationEntry.fileName : '') + '/' + entry.fileName);
|
||||
|
||||
// TODO this will overwrite files in destination!
|
||||
Client.filesRename($scope.backendId, $scope.backendType, entry.fullFilePath, newFilePath, callback);
|
||||
}, function (error) {
|
||||
if (error) return Client.error(error);
|
||||
|
||||
// clear clipboard
|
||||
$scope.clipboard = [];
|
||||
|
||||
$scope.refresh();
|
||||
});
|
||||
} else {
|
||||
// copy files
|
||||
|
||||
// first collect all files recursively
|
||||
var collectedFiles = [];
|
||||
|
||||
async.eachLimit($scope.clipboard, 5, function (entry, callback) {
|
||||
collectFiles(entry, function (error, result) {
|
||||
if (error) return callback(error);
|
||||
|
||||
collectedFiles = collectedFiles.concat(result);
|
||||
|
||||
callback();
|
||||
});
|
||||
}, function (error) {
|
||||
if (error) return Client.error(error);
|
||||
|
||||
async.eachLimit(collectedFiles, 5, function (entry, callback) {
|
||||
var newFilePath = sanitize(cwd + '/' + ((destinationEntry && destinationEntry.isDirectory) ? destinationEntry.fileName : '') + '/' + entry.fullFilePath.slice(entry.pathFrom.length));
|
||||
|
||||
// This will NOT overwrite but finds a unique new name to copy to
|
||||
// we prefix with a / to ensure we don't do relative target paths
|
||||
Client.filesCopy($scope.backendId, $scope.backendType, entry.fullFilePath, '/' + newFilePath, callback);
|
||||
}, function (error) {
|
||||
if (error) return Client.error(error);
|
||||
|
||||
// clear clipboard
|
||||
$scope.clipboard = [];
|
||||
|
||||
$scope.refresh();
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// handle uploads
|
||||
|
||||
$scope.uploadStatus = {
|
||||
error: null,
|
||||
busy: false,
|
||||
fileName: '',
|
||||
count: 0,
|
||||
countDone: 0,
|
||||
size: 0,
|
||||
done: 0,
|
||||
percentDone: 0,
|
||||
files: [],
|
||||
targetFolder: ''
|
||||
};
|
||||
|
||||
$scope.uploadFiles = function (files, targetFolder, overwrite) {
|
||||
if (!files || !files.length) return;
|
||||
|
||||
overwrite = !!overwrite;
|
||||
|
||||
// prevent it from getting closed
|
||||
$('#uploadModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
});
|
||||
|
||||
$scope.uploadStatus.files = files;
|
||||
$scope.uploadStatus.targetFolder = targetFolder;
|
||||
$scope.uploadStatus.error = null;
|
||||
$scope.uploadStatus.busy = true;
|
||||
$scope.uploadStatus.count = files.length;
|
||||
$scope.uploadStatus.countDone = 0;
|
||||
$scope.uploadStatus.size = 0;
|
||||
$scope.uploadStatus.sizeDone = 0;
|
||||
$scope.uploadStatus.done = 0;
|
||||
$scope.uploadStatus.percentDone = 0;
|
||||
|
||||
for (var i = 0; i < files.length; ++i) {
|
||||
$scope.uploadStatus.size += files[i].size;
|
||||
}
|
||||
|
||||
async.eachSeries(files, function (file, callback) {
|
||||
var filePath = sanitize(targetFolder + '/' + (file.webkitRelativePath || file.name));
|
||||
|
||||
$scope.uploadStatus.fileName = file.name;
|
||||
|
||||
Client.filesUpload($scope.backendId, $scope.backendType, filePath, file, overwrite, function (loaded) {
|
||||
$scope.uploadStatus.percentDone = ($scope.uploadStatus.done+loaded) * 100 / $scope.uploadStatus.size;
|
||||
$scope.uploadStatus.sizeDone = loaded;
|
||||
}, function (error) {
|
||||
if (error) return callback(error);
|
||||
|
||||
$scope.uploadStatus.done += file.size;
|
||||
$scope.uploadStatus.percentDone = $scope.uploadStatus.done * 100 / $scope.uploadStatus.size;
|
||||
$scope.uploadStatus.countDone++;
|
||||
|
||||
callback();
|
||||
});
|
||||
}, function (error) {
|
||||
$scope.uploadStatus.busy = false;
|
||||
|
||||
if (error && error.statusCode === 409) {
|
||||
$scope.uploadStatus.error = 'exists';
|
||||
return;
|
||||
} else if (error) {
|
||||
console.error(error);
|
||||
$scope.uploadStatus.error = 'generic';
|
||||
return;
|
||||
}
|
||||
|
||||
$('#uploadModal').modal('hide');
|
||||
|
||||
$scope.uploadStatus.fileName = '';
|
||||
$scope.uploadStatus.count = 0;
|
||||
$scope.uploadStatus.size = 0;
|
||||
$scope.uploadStatus.sizeDone = 0;
|
||||
$scope.uploadStatus.done = 0;
|
||||
$scope.uploadStatus.percentDone = 100;
|
||||
$scope.uploadStatus.files = [];
|
||||
$scope.uploadStatus.targetFolder = '';
|
||||
|
||||
$scope.refresh();
|
||||
});
|
||||
};
|
||||
|
||||
$scope.retryUpload = function (overwrite) {
|
||||
$scope.uploadFiles($scope.uploadStatus.files, $scope.uploadStatus.targetFolder, !!overwrite);
|
||||
};
|
||||
|
||||
|
||||
// file and folder upload hooks, stashing $scope.uploadCwd for now
|
||||
|
||||
$scope.uploadCwd = '';
|
||||
$('#uploadFileInput').on('change', function (e ) {
|
||||
$scope.uploadFiles(e.target.files || [], $scope.uploadCwd, false);
|
||||
});
|
||||
$scope.onUploadFile = function (cwd) {
|
||||
$scope.uploadCwd = cwd;
|
||||
$('#uploadFileInput').click();
|
||||
};
|
||||
|
||||
$('#uploadFolderInput').on('change', function (e ) {
|
||||
$scope.uploadFiles(e.target.files || [], $scope.uploadCwd, false);
|
||||
});
|
||||
$scope.onUploadFolder = function (cwd) {
|
||||
$scope.uploadCwd = cwd;
|
||||
$('#uploadFolderInput').click();
|
||||
};
|
||||
|
||||
|
||||
// handle delete
|
||||
|
||||
$scope.deleteEntries = {
|
||||
busy: false,
|
||||
error: null,
|
||||
cwd: '',
|
||||
entries: [],
|
||||
|
||||
show: function (cwd, entries) {
|
||||
$scope.deleteEntries.error = null;
|
||||
$scope.deleteEntries.cwd = cwd;
|
||||
$scope.deleteEntries.entries = entries;
|
||||
|
||||
$('#entriesDeleteModal').modal('show');
|
||||
},
|
||||
|
||||
submit: function () {
|
||||
$scope.deleteEntries.busy = true;
|
||||
|
||||
async.eachLimit($scope.deleteEntries.entries, 5, function (entry, callback) {
|
||||
var filePath = sanitize($scope.deleteEntries.cwd + '/' + entry.fileName);
|
||||
|
||||
Client.filesRemove($scope.backendId, $scope.backendType, filePath, callback);
|
||||
}, function (error) {
|
||||
$scope.deleteEntries.busy = false;
|
||||
if (error) return Client.error(error);
|
||||
|
||||
$scope.refresh();
|
||||
|
||||
$('#entriesDeleteModal').modal('hide');
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
// rename entry
|
||||
|
||||
$scope.renameEntry = {
|
||||
busy: false,
|
||||
error: null,
|
||||
entry: null,
|
||||
cwd: '',
|
||||
newName: '',
|
||||
|
||||
show: function (cwd, entry) {
|
||||
$scope.renameEntry.error = null;
|
||||
$scope.renameEntry.cwd = cwd;
|
||||
$scope.renameEntry.entry = entry;
|
||||
$scope.renameEntry.newName = entry.fileName;
|
||||
$scope.renameEntry.busy = false;
|
||||
|
||||
$('#renameEntryModal').modal('show');
|
||||
},
|
||||
|
||||
submit: function () {
|
||||
$scope.renameEntry.busy = true;
|
||||
|
||||
var oldFilePath = sanitize($scope.renameEntry.cwd + '/' + $scope.renameEntry.entry.fileName);
|
||||
var newFilePath = sanitize(($scope.renameEntry.newName[0] === '/' ? '' : ($scope.renameEntry.cwd + '/')) + $scope.renameEntry.newName);
|
||||
|
||||
Client.filesRename($scope.backendId, $scope.backendType, oldFilePath, newFilePath, function (error) {
|
||||
$scope.renameEntry.busy = false;
|
||||
if (error) return Client.error(error);
|
||||
|
||||
$scope.refresh();
|
||||
|
||||
$('#renameEntryModal').modal('hide');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// chown entries
|
||||
|
||||
$scope.chownEntries = {
|
||||
busy: false,
|
||||
error: null,
|
||||
entries: [],
|
||||
newOwner: 0,
|
||||
recursive: false,
|
||||
showRecursiveOption: false,
|
||||
|
||||
show: function (cwd, entries) {
|
||||
$scope.chownEntries.error = null;
|
||||
$scope.chownEntries.cwd = cwd;
|
||||
$scope.chownEntries.entries = entries;
|
||||
// set default uid from first file
|
||||
$scope.chownEntries.newOwner = entries[0].uid;
|
||||
$scope.chownEntries.busy = false;
|
||||
|
||||
// default for directories is recursive
|
||||
$scope.chownEntries.recursive = !!entries.find(function (entry) { return entry.isDirectory; });
|
||||
$scope.chownEntries.showRecursiveOption = false;
|
||||
|
||||
$('#chownEntriesModal').modal('show');
|
||||
},
|
||||
|
||||
submit: function () {
|
||||
$scope.chownEntries.busy = true;
|
||||
|
||||
async.eachLimit($scope.chownEntries.entries, 5, function (entry, callback) {
|
||||
var filePath = sanitize($scope.chownEntries.cwd + '/' + entry.fileName);
|
||||
|
||||
Client.filesChown($scope.backendId, $scope.backendType, filePath, $scope.chownEntries.newOwner, $scope.chownEntries.recursive, callback);
|
||||
}, function (error) {
|
||||
$scope.chownEntries.busy = false;
|
||||
if (error) return Client.error(error);
|
||||
|
||||
$scope.refresh();
|
||||
|
||||
$('#chownEntriesModal').modal('hide');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// new file
|
||||
|
||||
$scope.newFile = {
|
||||
busy: false,
|
||||
error: null,
|
||||
cwd: '',
|
||||
name: '',
|
||||
|
||||
show: function (cwd) {
|
||||
$scope.newFile.error = null;
|
||||
$scope.newFile.name = '';
|
||||
$scope.newFile.busy = false;
|
||||
$scope.newFile.cwd = cwd;
|
||||
|
||||
$scope.newFileForm.$setUntouched();
|
||||
$scope.newFileForm.$setPristine();
|
||||
|
||||
$('#newFileModal').modal('show');
|
||||
},
|
||||
|
||||
submit: function () {
|
||||
$scope.newFile.busy = true;
|
||||
$scope.newFile.error = null;
|
||||
|
||||
var filePath = sanitize($scope.newFile.cwd + '/' + $scope.newFile.name);
|
||||
|
||||
Client.filesUpload($scope.backendId, $scope.backendType, filePath, new File([], $scope.newFile.name), false, function () {}, function (error) {
|
||||
$scope.newFile.busy = false;
|
||||
if (error && error.statusCode === 409) return $scope.newFile.error = 'exists';
|
||||
if (error) return Client.error(error);
|
||||
|
||||
$scope.refresh();
|
||||
|
||||
$('#newFileModal').modal('hide');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// new folder
|
||||
|
||||
$scope.newFolder = {
|
||||
busy: false,
|
||||
error: null,
|
||||
cwd: '',
|
||||
name: '',
|
||||
|
||||
show: function (cwd) {
|
||||
$scope.newFolder.error = null;
|
||||
$scope.newFolder.name = '';
|
||||
$scope.newFolder.busy = false;
|
||||
$scope.newFolder.cwd = cwd;
|
||||
|
||||
$scope.newFolderForm.$setUntouched();
|
||||
$scope.newFolderForm.$setPristine();
|
||||
|
||||
$('#newFolderModal').modal('show');
|
||||
},
|
||||
|
||||
submit: function () {
|
||||
$scope.newFolder.busy = true;
|
||||
$scope.newFolder.error = null;
|
||||
|
||||
var filePath = sanitize($scope.newFolder.cwd + '/' + $scope.newFolder.name);
|
||||
|
||||
Client.filesCreateDirectory($scope.backendId, $scope.backendType, filePath, function (error) {
|
||||
$scope.newFolder.busy = false;
|
||||
if (error && error.statusCode === 409) return $scope.newFolder.error = 'exists';
|
||||
if (error) return Client.error(error);
|
||||
|
||||
$scope.refresh();
|
||||
|
||||
$('#newFolderModal').modal('hide');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// extract archives
|
||||
|
||||
$scope.extractStatus = {
|
||||
error: null,
|
||||
busy: false,
|
||||
fileName: ''
|
||||
};
|
||||
|
||||
$scope.extractEntry = function (cwd, entry) {
|
||||
var filePath = sanitize(cwd + '/' + entry.fileName);
|
||||
|
||||
if (entry.isDirectory) return;
|
||||
|
||||
// prevent it from getting closed
|
||||
$('#extractModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
});
|
||||
|
||||
$scope.extractStatus.fileName = entry.fileName;
|
||||
$scope.extractStatus.error = null;
|
||||
$scope.extractStatus.busy = true;
|
||||
|
||||
Client.filesExtract($scope.backendId, $scope.backendType, filePath, function (error) {
|
||||
$scope.extractStatus.busy = false;
|
||||
|
||||
if (error) {
|
||||
console.error(error);
|
||||
$scope.extractStatus.error = $translate.instant('filemanager.extract.error', error.message);
|
||||
return;
|
||||
}
|
||||
|
||||
$('#extractModal').modal('hide');
|
||||
|
||||
$scope.refresh();
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// split view handling
|
||||
|
||||
$scope.toggleSplitView = function () {
|
||||
$scope.splitView = !$scope.splitView;
|
||||
if (!$scope.splitView) {
|
||||
$scope.activeView = VIEW.LEFT;
|
||||
delete window.localStorage.splitView;
|
||||
} else {
|
||||
window.localStorage.splitView = true;
|
||||
}
|
||||
};
|
||||
|
||||
$scope.setActiveView = function (view) {
|
||||
$scope.activeView = view;
|
||||
};
|
||||
|
||||
|
||||
// monaco text editor
|
||||
|
||||
var LANGUAGES = [];
|
||||
require(['vs/editor/editor.main'], function() { LANGUAGES = monaco.languages.getLanguages(); });
|
||||
|
||||
function getLanguage(filename) {
|
||||
var ext = '.' + filename.split('.').pop();
|
||||
var language = LANGUAGES.find(function (l) {
|
||||
if (!l.extensions) return false;
|
||||
return !!l.extensions.find(function (e) { return e === ext; });
|
||||
}) || '';
|
||||
return language ? language.id : '';
|
||||
}
|
||||
|
||||
$scope.textEditor = {
|
||||
busy: false,
|
||||
cwd: null,
|
||||
entry: null,
|
||||
editor: null,
|
||||
unsaved: false,
|
||||
visible: false,
|
||||
|
||||
show: function (cwd, entry) {
|
||||
$scope.textEditor.cwd = cwd;
|
||||
$scope.textEditor.entry = entry;
|
||||
$scope.textEditor.busy = false;
|
||||
$scope.textEditor.unsaved = false;
|
||||
$scope.textEditor.visible = true;
|
||||
|
||||
// clear model if any
|
||||
if ($scope.textEditor.editor && $scope.textEditor.editor.getModel()) $scope.textEditor.editor.setModel(null);
|
||||
|
||||
$scope.viewerOpen = true;
|
||||
// document.getElementById('textEditorModal').style['display'] = 'flex';
|
||||
|
||||
var filePath = sanitize($scope.textEditor.cwd + '/' + entry.fileName);
|
||||
var language = getLanguage(entry.fileName);
|
||||
|
||||
Client.filesGet($scope.backendId, $scope.backendType, filePath, 'data', function (error, result) {
|
||||
if (error) return Client.error(error);
|
||||
|
||||
if (!$scope.textEditor.editor) {
|
||||
$timeout(function () {
|
||||
$scope.textEditor.editor = monaco.editor.create(document.getElementById('textEditorContainer'), {
|
||||
value: result,
|
||||
language: language,
|
||||
theme: 'vs-dark'
|
||||
});
|
||||
$scope.textEditor.editor.getModel().onDidChangeContent(function () { $scope.textEditor.unsaved = true; });
|
||||
}, 200);
|
||||
} else {
|
||||
$scope.textEditor.editor.setModel(monaco.editor.createModel(result, language));
|
||||
$scope.textEditor.editor.getModel().onDidChangeContent(function () { $scope.textEditor.unsaved = true; }); // have to re-attach whenever model changes
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
save: function (callback) {
|
||||
$scope.textEditor.busy = true;
|
||||
|
||||
var newContent = $scope.textEditor.editor.getValue();
|
||||
var filePath = sanitize($scope.textEditor.cwd + '/' + $scope.textEditor.entry.fileName);
|
||||
var file = new File([newContent], 'file');
|
||||
|
||||
Client.filesUpload($scope.backendId, $scope.backendType, filePath, file, true, function () {}, function (error) {
|
||||
if (error) return Client.error(error);
|
||||
|
||||
$scope.refresh();
|
||||
|
||||
$timeout(function () {
|
||||
$scope.textEditor.unsaved = false;
|
||||
$scope.textEditor.busy = false;
|
||||
if (typeof callback === 'function') return callback();
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
|
||||
close: function () {
|
||||
$scope.textEditor.visible = false;
|
||||
$scope.viewerOpen = false;
|
||||
$('#textEditorCloseModal').modal('hide');
|
||||
},
|
||||
|
||||
onClose: function () {
|
||||
$scope.textEditor.visible = false;
|
||||
$scope.viewerOpen = false;
|
||||
$('#textEditorCloseModal').modal('hide');
|
||||
},
|
||||
|
||||
saveAndClose: function () {
|
||||
$scope.textEditor.save(function () {
|
||||
$scope.textEditor.onClose();
|
||||
});
|
||||
},
|
||||
|
||||
maybeClose: function () {
|
||||
if (!$scope.textEditor.unsaved) return $scope.textEditor.onClose();
|
||||
$('#textEditorCloseModal').modal('show');
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
// restart app or mail logic
|
||||
|
||||
$scope.restartBusy = false;
|
||||
|
||||
$scope.onRestartApp = function () {
|
||||
$scope.restartBusy = true;
|
||||
|
||||
function waitUntilRestarted(callback) {
|
||||
Client.getApp($scope.backendId, function (error, result) {
|
||||
if (error) return callback(error);
|
||||
|
||||
if (result.installationState === ISTATES.INSTALLED) return callback();
|
||||
setTimeout(waitUntilRestarted.bind(null, callback), 2000);
|
||||
});
|
||||
}
|
||||
|
||||
Client.restartApp($scope.backendId, function (error) {
|
||||
if (error) console.error('Failed to restart app.', error);
|
||||
|
||||
waitUntilRestarted(function (error) {
|
||||
if (error) console.error('Failed wait for restart.', error);
|
||||
|
||||
$scope.restartBusy = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
$scope.onRestartMail = function () {
|
||||
$scope.restartBusy = true;
|
||||
|
||||
function waitUntilRestarted(callback) {
|
||||
Client.getService('mail', function (error, result) {
|
||||
if (error) return callback(error);
|
||||
|
||||
if (result.status === 'active') return callback();
|
||||
setTimeout(waitUntilRestarted.bind(null, callback), 2000);
|
||||
});
|
||||
}
|
||||
|
||||
Client.restartService('mail', function (error) {
|
||||
if (error) console.error('Failed to restart mail.', error);
|
||||
|
||||
waitUntilRestarted(function (error) {
|
||||
if (error) console.error('Failed wait for restart.', error);
|
||||
|
||||
$scope.restartBusy = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// init code
|
||||
|
||||
function fetchVolumesInfo(mounts) {
|
||||
$scope.volumes = [];
|
||||
|
||||
async.each(mounts, function (mount, callback) {
|
||||
Client.getVolume(mount.volumeId, function (error, result) {
|
||||
if (error) return callback(error);
|
||||
|
||||
$scope.volumes.push(result);
|
||||
|
||||
callback();
|
||||
});
|
||||
}, function (error) {
|
||||
if (error) console.error('Failed to fetch volumes info.', error);
|
||||
});
|
||||
}
|
||||
|
||||
function init() {
|
||||
|
||||
Client.getStatus(function (error, status) {
|
||||
if (error) return Client.initError(error, init);
|
||||
|
||||
if (!status.activated) {
|
||||
console.log('Not activated yet, redirecting', status);
|
||||
window.location.href = '/';
|
||||
return;
|
||||
}
|
||||
|
||||
// check version and force reload if needed
|
||||
if (!localStorage.version) {
|
||||
localStorage.version = status.version;
|
||||
} else if (localStorage.version !== status.version) {
|
||||
localStorage.version = status.version;
|
||||
window.location.reload(true);
|
||||
}
|
||||
|
||||
$scope.status = status;
|
||||
|
||||
console.log('Running filemanager version ', localStorage.version);
|
||||
|
||||
// get user profile as the first thing. this populates the "scope" and affects subsequent API calls
|
||||
Client.refreshUserInfo(function (error) {
|
||||
if (error) return Client.initError(error, init);
|
||||
|
||||
var getter;
|
||||
if ($scope.backendType === 'app') {
|
||||
getter = Client.getApp.bind(Client, $scope.backendId);
|
||||
} else if ($scope.backendType === 'volume') {
|
||||
getter = Client.getVolume.bind(Client, $scope.backendId);
|
||||
} else if ($scope.backendType === 'mail') {
|
||||
getter = function (next) { next(null, null); };
|
||||
}
|
||||
|
||||
getter(function (error, result) {
|
||||
if (error) {
|
||||
$scope.initialized = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// fine to do async
|
||||
if ($scope.backendType === 'app') fetchVolumesInfo(result.mounts || []);
|
||||
|
||||
switch ($scope.backendType) {
|
||||
case 'app':
|
||||
$scope.title = result.label || result.fqdn;
|
||||
$scope.rootDirLabel = '/app/data/';
|
||||
$scope.applicationLink = 'https://' + result.fqdn;
|
||||
break;
|
||||
case 'volume':
|
||||
$scope.title = result.name;
|
||||
$scope.rootDirLabel = result.hostPath;
|
||||
break;
|
||||
case 'mail':
|
||||
$scope.title = 'mail';
|
||||
$scope.rootDirLabel = 'mail';
|
||||
break;
|
||||
}
|
||||
|
||||
window.document.title = $scope.title + ' - ' + $translate.instant('filemanager.title');
|
||||
|
||||
// now mark the Client to be ready
|
||||
Client.setReady();
|
||||
|
||||
// openPath('');
|
||||
|
||||
$scope.initialized = true;
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
|
||||
// toplevel key input handling
|
||||
|
||||
window.addEventListener('keydown', function (event) {
|
||||
if((navigator.platform.match('Mac') ? event.metaKey : event.ctrlKey) && event.key === 's') {
|
||||
if (!$scope.textEditor.visible) return;
|
||||
|
||||
event.preventDefault();
|
||||
$scope.$apply($scope.textEditor.save);
|
||||
} else if((navigator.platform.match('Mac') ? event.metaKey : event.ctrlKey) && event.key === 'c') {
|
||||
if ($scope.textEditor.visible) return;
|
||||
if ($scope.selected.length === 0) return;
|
||||
if (isModalVisible()) return;
|
||||
|
||||
event.preventDefault();
|
||||
$scope.$apply($scope.actionCopy);
|
||||
} else if((navigator.platform.match('Mac') ? event.metaKey : event.ctrlKey) && event.key === 'x') {
|
||||
if ($scope.textEditor.visible) return;
|
||||
if ($scope.selected.length === 0) return;
|
||||
if (isModalVisible()) return;
|
||||
|
||||
event.preventDefault();
|
||||
$scope.$apply($scope.actionCut);
|
||||
} else if((navigator.platform.match('Mac') ? event.metaKey : event.ctrlKey) && event.key === 'v') {
|
||||
if ($scope.textEditor.visible) return;
|
||||
if ($scope.clipboard.length === 0) return;
|
||||
if (isModalVisible()) return;
|
||||
|
||||
event.preventDefault();
|
||||
$scope.$apply($scope.actionPaste);
|
||||
} else if((navigator.platform.match('Mac') ? event.metaKey : event.ctrlKey) && event.key === 'a') {
|
||||
if ($scope.textEditor.visible) return;
|
||||
if (isModalVisible()) return;
|
||||
|
||||
event.preventDefault();
|
||||
$scope.$apply($scope.actionSelectAll);
|
||||
} else if(event.key === 'Escape') {
|
||||
if ($scope.textEditor.visible) return $scope.$apply($scope.textEditor.maybeClose);
|
||||
else $scope.$apply(function () { $scope.selected = []; });
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// setup all the dialog focus handling
|
||||
['newFileModal', 'newFolderModal', 'renameEntryModal'].forEach(function (id) {
|
||||
$('#' + id).on('shown.bs.modal', function () {
|
||||
$(this).find('[autofocus]:first').focus();
|
||||
});
|
||||
});
|
||||
|
||||
// selects filename (without extension)
|
||||
['renameEntryModal'].forEach(function (id) {
|
||||
$('#' + id).on('shown.bs.modal', function () {
|
||||
var elem = $(this).find('[autofocus]:first');
|
||||
var text = elem.val();
|
||||
elem[0].setSelectionRange(0, text.indexOf('.'));
|
||||
});
|
||||
});
|
||||
}]);
|
||||
Reference in New Issue
Block a user