acha-framework
Version:
is a modular framework on both client (angular.js) and server (node.js) side, it provides security, orm, ioc, obfuscation and ...
205 lines • 7.08 kB
JavaScript
(function ($, angular, underscore, window, document, undefined) {
'use strict';
angular.module('frontend.directives').directive('fileExplorer', [
'$document',
'translateService',
'fileService',
function ($document, translateService, fileService) {
return {
restrict: 'E',
replace: true,
scope: {
tag: '<?',
disabled: '=?',
visible: '=?',
cssClass: '=?',
items: '=?',
search: '=?',
onDoubleSelect: '=?',
onSelect: '=?',
onParent: '=?',
path: '=?',
multipleSelection: '=?',
newFolder: '=?',
onNewFolder: '<?',
onRename: '<?',
mode: '=?',
model: '=?'
},
templateUrl: '/templates/framework/directives/file-explorer/template.html',
link: function (scope, element, attr) {
scope.vm = {
newFolder: '',
creating: false,
namePlate: false,
datePlate: false,
typePlate: false,
sizePlate: false
};
scope.vm.init = function () {
if (angular.isUndefined(scope.disabled)) {
scope.disabled = false;
}
if (angular.isUndefined(scope.multipleSelection)) {
scope.multipleSelection = false;
}
if (angular.isUndefined(scope.visible)) {
scope.visible = true;
}
if (angular.isUndefined(scope.cssClass)) {
scope.cssClass = '';
}
if (angular.isUndefined(scope.mode)) {
scope.mode = 'large';
}
if (angular.isUndefined(scope.items)) {
scope.items = [];
}
if (angular.isUndefined(scope.model)) {
scope.model = [];
}
scope.vm.bind();
};
scope.vm.showSort = function (name, $event) {
scope.vm.closeElseWhere($event);
scope.vm[name] = true;
};
scope.vm.closeElseWhere = function ($event) {
scope.vm.prevent($event);
scope.vm.namePlate = false;
scope.vm.datePlate = false;
scope.vm.typePlate = false;
scope.vm.sizePlate = false;
};
scope.vm.onNewFolder = function () {
if (scope.disabled || scope.vm.creating)
return;
if (scope.onNewFolder) {
scope.vm.creating = true;
scope.onNewFolder(scope.vm.newFolder).then(function () {
scope.vm.newFolder = '';
scope.newFolder = false;
scope.vm.creating = false;
}, function () {
scope.vm.creating = false;
});
}
};
scope.vm.onRename = function (item) {
if (scope.disabled || scope.vm.creating)
return;
if (item.name === item.newName || !item.newName)
return;
if (scope.onRename) {
item.updating = true;
scope.onRename(item).then(function () {
item.updating = false;
item.editting = false;
}, function () {
item.updating = false;
});
}
};
scope.vm.onSort = function (column, asc, $event) {
$event.stopPropagation();
$event.preventDefault(); //do sort stuff
};
scope.vm.onParent = function () {
if (angular.isFunction(scope.onParent)) {
scope.onParent();
}
};
scope.vm.getIcon = function (item) {
if (item.folder)
return 'af-icon-folder';
var ext = fileService.getExtention(item.path).replace('.', '');
return 'af-icon-{0} af-icon-file'.format([ext]);
};
scope.vm.prevent = function ($event) {
$event.stopPropagation();
$event.preventDefault();
};
scope.vm.onDoubleClick = function (item, $event) {
scope.vm.prevent($event);
if (angular.isFunction(scope.onDoubleSelect)) {
scope.onDoubleSelect(item);
}
};
scope.vm.unSelect = function () {
scope.newFolder = false;
scope.vm.newFolder = '';
if (scope.model && scope.model.length && !scope.model[0].updating) {
scope.model[0].editting = false;
scope.model[0].updating = false;
}
scope.model = [];
scope.items.forEach(function (itm) {
itm.selected = false;
});
if (angular.isFunction(scope.onSelect)) {
scope.onSelect(scope.model);
}
};
scope.vm.onClick = function (item, $event) {
scope.vm.prevent($event);
if ($event.ctrlKey || macKeys.ctrlKey) {
if (!scope.multipleSelection)
return;
if (item.selected) {
item.selected = false;
scope.model.del(item);
} else {
item.selected = true;
scope.model.push(item);
}
} else {
scope.items.forEach(function (itm) {
itm.selected = item === itm;
});
scope.model = [item];
}
if (angular.isFunction(scope.onSelect)) {
scope.onSelect(scope.model);
}
};
scope.vm.getExtention = function (item) {
if (item.folder) {
return translateService('general.folder');
}
return fileService.getExtention(item.path);
};
scope.vm.bind = function () {
$document.on('click', scope.vm.closeElseWhere);
scope.$on('$destroy', function () {
$document.off('click', scope.vm.closeElseWhere);
});
scope.$watch('mode', function (val) {
val = val || 'large';
var icons = element.find('.details-mode li .details i');
icons.removeClass('af-icon-20').removeClass('af-icon-40').removeClass('af-icon-50').removeClass('af-icon-70');
switch (val) {
case 'x-large':
icons.addClass('af-icon-70');
break;
case 'large':
icons.addClass('af-icon-50');
break;
case 'medium':
icons.addClass('af-icon-40');
break;
case 'small':
case 'detailed':
icons.addClass('af-icon-20');
break;
case 'tiles':
icons.addClass('af-icon-40');
break;
}
});
};
scope.vm.init();
}
};
}
]);
}(jQuery, angular, _, window, document));