mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
Actions dropdown for document list
- added actions dropdown stub - accessibility improvements for list rows refs #20
This commit is contained in:
Denys Vuika
@@ -1,4 +1,4 @@
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<base href="/">
|
||||
<title>File Share - Angular 2</title>
|
||||
@@ -26,7 +26,8 @@
|
||||
<script src="node_modules/angular2/bundles/router.dev.js"></script>
|
||||
<script src="node_modules/angular2/bundles/http.dev.js"></script>
|
||||
|
||||
<!--<script src="node_modules/ng2-uploader/bundles/ng2-uploader.js"></script>-->
|
||||
<script src="node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
|
||||
<script src="/app/js/xml2json.js"></script>
|
||||
|
||||
|
||||
@@ -14,10 +14,10 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { OnInit, EventEmitter } from "angular2/core";
|
||||
import { AlfrescoService } from "./alfresco.service";
|
||||
import { FolderEntity } from "./core/entities/folder.entity";
|
||||
import { DocumentEntity } from "./core/entities/document.entity";
|
||||
import { OnInit, EventEmitter } from 'angular2/core';
|
||||
import { AlfrescoService } from './alfresco.service';
|
||||
import { FolderEntity } from './core/entities/folder.entity';
|
||||
import { DocumentEntity } from './core/entities/document.entity';
|
||||
export declare class DocumentList implements OnInit {
|
||||
private _alfrescoService;
|
||||
navigate: boolean;
|
||||
@@ -37,12 +37,11 @@ export declare class DocumentList implements OnInit {
|
||||
canNavigateParent(): boolean;
|
||||
constructor(_alfrescoService: AlfrescoService);
|
||||
ngOnInit(): void;
|
||||
private displayFolderContent(path);
|
||||
onNavigateParentClick($event: any): void;
|
||||
onDownloadClick(event: any): void;
|
||||
onItemClick(item: DocumentEntity, $event: any): void;
|
||||
goToRoute(r: any, $event: any): void;
|
||||
private getItemPath(item);
|
||||
getContentUrl(document: DocumentEntity): string;
|
||||
getDocumentThumbnailUrl(document: DocumentEntity): string;
|
||||
private getItemPath(item);
|
||||
private displayFolderContent(path);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
System.register(["angular2/core", "./alfresco.service"], function(exports_1, context_1) {
|
||||
System.register(['angular2/core', './alfresco.service'], function(exports_1, context_1) {
|
||||
"use strict";
|
||||
var __moduleName = context_1 && context_1.id;
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
@@ -24,15 +24,10 @@ System.register(["angular2/core", "./alfresco.service"], function(exports_1, con
|
||||
DocumentList = (function () {
|
||||
function DocumentList(_alfrescoService) {
|
||||
this._alfrescoService = _alfrescoService;
|
||||
// example: <alfresco-document-list [navigate]="false"></alfresco-document-list>
|
||||
this.navigate = true;
|
||||
// example: <alfresco-document-list [breadcrumb]="true"></alfresco-document-list>
|
||||
this.breadcrumb = false;
|
||||
// example: <alfresco-document-list folder-icon-class="fa fa-folder fa-4x"></alfresco-document-list>
|
||||
this.folderIconClass = 'fa fa-folder-o fa-4x';
|
||||
// example: <alfresco-document-list #list [thumbnails]="false"></alfresco-document-list>
|
||||
this.thumbnails = true;
|
||||
// example: <alfresco-document-list #list [downloads]="false"></alfresco-document-list>
|
||||
this.downloads = true;
|
||||
this.itemClick = new core_1.EventEmitter();
|
||||
this.rootFolder = {
|
||||
@@ -51,28 +46,18 @@ System.register(["angular2/core", "./alfresco.service"], function(exports_1, con
|
||||
this.route.push(this.rootFolder);
|
||||
this.displayFolderContent(this.rootFolder.path);
|
||||
};
|
||||
DocumentList.prototype.displayFolderContent = function (path) {
|
||||
var _this = this;
|
||||
this.currentFolderPath = path;
|
||||
this._alfrescoService
|
||||
.getFolder(path)
|
||||
.subscribe(function (folder) { return _this.folder = folder; }, function (error) { return _this.errorMessage = error; });
|
||||
};
|
||||
DocumentList.prototype.onNavigateParentClick = function ($event) {
|
||||
if ($event) {
|
||||
$event.preventDefault();
|
||||
}
|
||||
if (this.navigate) {
|
||||
this.route.pop();
|
||||
var parent = this.route.length > 0 ? this.route[this.route.length - 1] : this.rootFolder;
|
||||
if (parent) {
|
||||
this.displayFolderContent(parent.path);
|
||||
var parent_1 = this.route.length > 0 ? this.route[this.route.length - 1] : this.rootFolder;
|
||||
if (parent_1) {
|
||||
this.displayFolderContent(parent_1.path);
|
||||
}
|
||||
}
|
||||
};
|
||||
DocumentList.prototype.onDownloadClick = function (event) {
|
||||
event.stopPropagation();
|
||||
};
|
||||
DocumentList.prototype.onItemClick = function (item, $event) {
|
||||
if ($event) {
|
||||
$event.preventDefault();
|
||||
@@ -103,17 +88,24 @@ System.register(["angular2/core", "./alfresco.service"], function(exports_1, con
|
||||
}
|
||||
}
|
||||
};
|
||||
DocumentList.prototype.getContentUrl = function (document) {
|
||||
return this._alfrescoService.getContentUrl(document);
|
||||
};
|
||||
DocumentList.prototype.getDocumentThumbnailUrl = function (document) {
|
||||
return this._alfrescoService.getDocumentThumbnailUrl(document);
|
||||
};
|
||||
DocumentList.prototype.getItemPath = function (item) {
|
||||
var container = item.location.container;
|
||||
var path = item.location.path !== '/' ? (item.location.path + '/') : '/';
|
||||
var relativePath = container + path + item.fileName;
|
||||
return item.location.site + '/' + relativePath;
|
||||
};
|
||||
DocumentList.prototype.getContentUrl = function (document) {
|
||||
return this._alfrescoService.getContentUrl(document);
|
||||
};
|
||||
DocumentList.prototype.getDocumentThumbnailUrl = function (document) {
|
||||
return this._alfrescoService.getDocumentThumbnailUrl(document);
|
||||
DocumentList.prototype.displayFolderContent = function (path) {
|
||||
var _this = this;
|
||||
this.currentFolderPath = path;
|
||||
this._alfrescoService
|
||||
.getFolder(path)
|
||||
.subscribe(function (folder) { return _this.folder = folder; }, function (error) { return _this.errorMessage = error; });
|
||||
};
|
||||
__decorate([
|
||||
core_1.Input(),
|
||||
@@ -143,9 +135,9 @@ System.register(["angular2/core", "./alfresco.service"], function(exports_1, con
|
||||
core_1.Component({
|
||||
selector: 'alfresco-document-list',
|
||||
styles: [
|
||||
"\n :host .breadcrumb {\n margin-bottom: 4px;\n }\n\n :host .folder-icon {\n float: left;\n margin-right: 10px;\n }\n\n :host .file-icon {\n width: 52px;\n height: 52px;\n float: left;\n margin-right: 10px;\n }\n\n :host .document-header:hover {\n text-decoration: underline;\n }\n\n :host .download-button {\n color: #777;\n text-decoration: none;\n }\n\n :host .download-button:hover {\n color: #555;\n }\n "
|
||||
"\n :host .breadcrumb {\n margin-bottom: 4px;\n }\n\n :host .folder-icon {\n float: left;\n margin-right: 10px;\n }\n\n :host .file-icon {\n width: 52px;\n height: 52px;\n float: left;\n margin-right: 10px;\n }\n \n :host .document-header {\n font-size: 24px;\n line-height: 32px;\n }\n \n :host .document-header:hover {\n text-decoration: underline;\n }\n "
|
||||
],
|
||||
template: "\n <ol *ngIf=\"breadcrumb\" class=\"breadcrumb\">\n <li *ngFor=\"#r of route; #last = last\" [class.active]=\"last\" [ngSwitch]=\"last\">\n <span *ngSwitchWhen=\"true\">{{r.name}}</span>\n <a *ngSwitchDefault href=\"#\" (click)=\"goToRoute(r, $event)\">{{r.name}}</a>\n </li>\n </ol>\n <div *ngIf=\"folder\" class=\"list-group\">\n <a href=\"#\" *ngIf=\"canNavigateParent()\" (click)=\"onNavigateParentClick($event)\" class=\"list-group-item\">\n <i class=\"fa fa-level-up\"></i> ...\n </a>\n <a href=\"#\" *ngFor=\"#document of folder.items\" (click)=\"onItemClick(document, $event)\" class=\"list-group-item clearfix\">\n <a *ngIf=\"downloads && !document.isFolder\" href=\"{{getContentUrl(document)}}\" (click)=\"onDownloadClick($event)\" class=\"download-button pull-right\" download target=\"_blank\">\n <i class=\"fa fa-download fa-2x\"></i>\n </a>\n <i *ngIf=\"thumbnails && document.isFolder\" class=\"folder-icon {{folderIconClass}}\"></i>\n <img *ngIf=\"thumbnails && !document.isFolder\" class=\"file-icon\" src=\"{{getDocumentThumbnailUrl(document)}}\">\n <h4 class=\"list-group-item-heading document-header\">\n {{document.displayName}}\n </h4>\n <p class=\"list-group-item-text\">{{document.description}}</p>\n <small>\n Modified {{document.modifiedOn}} by {{document.modifiedBy}}\n </small>\n </a>\n </div>\n ",
|
||||
template: "\n <ol *ngIf=\"breadcrumb\" class=\"breadcrumb\">\n <li *ngFor=\"#r of route; #last = last\" [class.active]=\"last\" [ngSwitch]=\"last\">\n <span *ngSwitchWhen=\"true\">{{r.name}}</span>\n <a *ngSwitchDefault href=\"#\" (click)=\"goToRoute(r, $event)\">{{r.name}}</a>\n </li>\n </ol>\n <div *ngIf=\"folder\" class=\"list-group\">\n <a href=\"#\" *ngIf=\"canNavigateParent()\" (click)=\"onNavigateParentClick($event)\" class=\"list-group-item\">\n <i class=\"fa fa-level-up\"></i> ...\n </a>\n <a href=\"#\" *ngFor=\"#document of folder.items\" class=\"list-group-item clearfix\">\n \n <div *ngIf=\"!document.isFolder\" class=\"btn-group pull-right\">\n <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\" \n aria-haspopup=\"true\" aria-expanded=\"false\">\n Actions <span class=\"caret\"></span>\n </button>\n <ul class=\"dropdown-menu\">\n <li>\n <a *ngIf=\"downloads && !document.isFolder\" \n href=\"{{getContentUrl(document)}}\" \n download target=\"_blank\">\n Download\n </a>\n </li>\n <!--\n <li><a href=\"#\">(todo:) Another action</a></li>\n <li><a href=\"#\">(todo:) Something else here</a></li>\n <li role=\"separator\" class=\"divider\"></li>\n <li><a href=\"#\">(todo:) Separated link</a></li>\n -->\n </ul>\n </div>\n \n <i *ngIf=\"thumbnails && document.isFolder\" class=\"folder-icon {{folderIconClass}}\"\n (click)=\"onItemClick(document, $event)\">\n </i>\n <img *ngIf=\"thumbnails && !document.isFolder\" class=\"file-icon\"\n alt=\"\"\n src=\"{{getDocumentThumbnailUrl(document)}}\"\n (click)=\"onItemClick(document, $event)\">\n <h1 class=\"list-group-item-heading document-header\" (click)=\"onItemClick(document, $event)\" >\n {{document.displayName}}\n </h1>\n <p class=\"list-group-item-text\">{{document.description}}</p>\n <small>\n Modified {{document.modifiedOn}} by {{document.modifiedBy}}\n </small>\n </a>\n </div>\n ",
|
||||
providers: [alfresco_service_1.AlfrescoService]
|
||||
}),
|
||||
__metadata('design:paramtypes', [alfresco_service_1.AlfrescoService])
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"document-list.component.js","sourceRoot":"","sources":["document-list.component.ts"],"names":[],"mappings":"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"}
|
||||
{"version":3,"file":"document-list.component.js","sourceRoot":"","sources":["document-list.component.ts"],"names":[],"mappings":"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"}
|
||||
@@ -14,10 +14,10 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {Component, OnInit, Input, Output, EventEmitter} from "angular2/core";
|
||||
import {AlfrescoService} from "./alfresco.service";
|
||||
import {FolderEntity} from "./core/entities/folder.entity";
|
||||
import {DocumentEntity} from "./core/entities/document.entity";
|
||||
import {Component, OnInit, Input, Output, EventEmitter} from 'angular2/core';
|
||||
import {AlfrescoService} from './alfresco.service';
|
||||
import {FolderEntity} from './core/entities/folder.entity';
|
||||
import {DocumentEntity} from './core/entities/document.entity';
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-document-list',
|
||||
@@ -38,19 +38,15 @@ import {DocumentEntity} from "./core/entities/document.entity";
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
:host .document-header {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
:host .document-header:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
:host .download-button {
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
:host .download-button:hover {
|
||||
color: #555;
|
||||
}
|
||||
`
|
||||
],
|
||||
template: `
|
||||
@@ -64,15 +60,40 @@ import {DocumentEntity} from "./core/entities/document.entity";
|
||||
<a href="#" *ngIf="canNavigateParent()" (click)="onNavigateParentClick($event)" class="list-group-item">
|
||||
<i class="fa fa-level-up"></i> ...
|
||||
</a>
|
||||
<a href="#" *ngFor="#document of folder.items" (click)="onItemClick(document, $event)" class="list-group-item clearfix">
|
||||
<a *ngIf="downloads && !document.isFolder" href="{{getContentUrl(document)}}" (click)="onDownloadClick($event)" class="download-button pull-right" download target="_blank">
|
||||
<i class="fa fa-download fa-2x"></i>
|
||||
</a>
|
||||
<i *ngIf="thumbnails && document.isFolder" class="folder-icon {{folderIconClass}}"></i>
|
||||
<img *ngIf="thumbnails && !document.isFolder" class="file-icon" src="{{getDocumentThumbnailUrl(document)}}">
|
||||
<h4 class="list-group-item-heading document-header">
|
||||
<a href="#" *ngFor="#document of folder.items" class="list-group-item clearfix">
|
||||
|
||||
<div *ngIf="!document.isFolder" class="btn-group pull-right">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Actions <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a *ngIf="downloads && !document.isFolder"
|
||||
href="{{getContentUrl(document)}}"
|
||||
download target="_blank">
|
||||
Download
|
||||
</a>
|
||||
</li>
|
||||
<!--
|
||||
<li><a href="#">(todo:) Another action</a></li>
|
||||
<li><a href="#">(todo:) Something else here</a></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">(todo:) Separated link</a></li>
|
||||
-->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<i *ngIf="thumbnails && document.isFolder" class="folder-icon {{folderIconClass}}"
|
||||
(click)="onItemClick(document, $event)">
|
||||
</i>
|
||||
<img *ngIf="thumbnails && !document.isFolder" class="file-icon"
|
||||
alt=""
|
||||
src="{{getDocumentThumbnailUrl(document)}}"
|
||||
(click)="onItemClick(document, $event)">
|
||||
<h1 class="list-group-item-heading document-header" (click)="onItemClick(document, $event)" >
|
||||
{{document.displayName}}
|
||||
</h4>
|
||||
</h1>
|
||||
<p class="list-group-item-text">{{document.description}}</p>
|
||||
<small>
|
||||
Modified {{document.modifiedOn}} by {{document.modifiedBy}}
|
||||
@@ -84,15 +105,10 @@ import {DocumentEntity} from "./core/entities/document.entity";
|
||||
})
|
||||
export class DocumentList implements OnInit {
|
||||
|
||||
// example: <alfresco-document-list [navigate]="false"></alfresco-document-list>
|
||||
@Input() navigate: boolean = true;
|
||||
// example: <alfresco-document-list [breadcrumb]="true"></alfresco-document-list>
|
||||
@Input() breadcrumb: boolean = false;
|
||||
// example: <alfresco-document-list folder-icon-class="fa fa-folder fa-4x"></alfresco-document-list>
|
||||
@Input('folder-icon-class') folderIconClass: string = 'fa fa-folder-o fa-4x';
|
||||
// example: <alfresco-document-list #list [thumbnails]="false"></alfresco-document-list>
|
||||
@Input() thumbnails: boolean = true;
|
||||
// example: <alfresco-document-list #list [downloads]="false"></alfresco-document-list>
|
||||
@Input() downloads: boolean = true;
|
||||
|
||||
@Output() itemClick: EventEmitter<any> = new EventEmitter();
|
||||
@@ -122,16 +138,6 @@ export class DocumentList implements OnInit {
|
||||
this.displayFolderContent(this.rootFolder.path);
|
||||
}
|
||||
|
||||
private displayFolderContent(path) {
|
||||
this.currentFolderPath = path;
|
||||
this._alfrescoService
|
||||
.getFolder(path)
|
||||
.subscribe(
|
||||
folder => this.folder = folder,
|
||||
error => this.errorMessage = <any>error
|
||||
);
|
||||
}
|
||||
|
||||
onNavigateParentClick($event) {
|
||||
if ($event) {
|
||||
$event.preventDefault();
|
||||
@@ -139,17 +145,13 @@ export class DocumentList implements OnInit {
|
||||
|
||||
if (this.navigate) {
|
||||
this.route.pop();
|
||||
var parent = this.route.length > 0 ? this.route[this.route.length - 1] : this.rootFolder;
|
||||
let parent = this.route.length > 0 ? this.route[this.route.length - 1] : this.rootFolder;
|
||||
if (parent) {
|
||||
this.displayFolderContent(parent.path);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onDownloadClick(event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
onItemClick(item: DocumentEntity, $event) {
|
||||
if ($event) {
|
||||
$event.preventDefault();
|
||||
@@ -161,7 +163,7 @@ export class DocumentList implements OnInit {
|
||||
|
||||
if (this.navigate && item) {
|
||||
if (item.isFolder) {
|
||||
var path = this.getItemPath(item);
|
||||
let path = this.getItemPath(item);
|
||||
this.route.push({
|
||||
name: item.displayName,
|
||||
path: path
|
||||
@@ -177,7 +179,7 @@ export class DocumentList implements OnInit {
|
||||
}
|
||||
|
||||
if (this.navigate) {
|
||||
var idx = this.route.indexOf(r);
|
||||
let idx = this.route.indexOf(r);
|
||||
if (idx > -1) {
|
||||
this.route.splice(idx + 1);
|
||||
this.displayFolderContent(r.path);
|
||||
@@ -185,13 +187,6 @@ export class DocumentList implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
private getItemPath(item: DocumentEntity):string {
|
||||
var container = item.location.container;
|
||||
var path = item.location.path !== '/' ? (item.location.path + '/' ) : '/';
|
||||
var relativePath = container + path + item.fileName;
|
||||
return item.location.site + '/' + relativePath;
|
||||
}
|
||||
|
||||
getContentUrl(document: DocumentEntity) {
|
||||
return this._alfrescoService.getContentUrl(document);
|
||||
}
|
||||
@@ -199,4 +194,21 @@ export class DocumentList implements OnInit {
|
||||
getDocumentThumbnailUrl(document: DocumentEntity) {
|
||||
return this._alfrescoService.getDocumentThumbnailUrl(document);
|
||||
}
|
||||
|
||||
private getItemPath(item: DocumentEntity):string {
|
||||
let container = item.location.container;
|
||||
let path = item.location.path !== '/' ? (item.location.path + '/' ) : '/';
|
||||
let relativePath = container + path + item.fileName;
|
||||
return item.location.site + '/' + relativePath;
|
||||
}
|
||||
|
||||
private displayFolderContent(path) {
|
||||
this.currentFolderPath = path;
|
||||
this._alfrescoService
|
||||
.getFolder(path)
|
||||
.subscribe(
|
||||
folder => this.folder = folder,
|
||||
error => this.errorMessage = <any>error
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user