@banta/sdk 4.0.3 → 4.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/banta-sdk.umd.js +163 -19
- package/bundles/banta-sdk.umd.js.map +1 -1
- package/bundles/banta-sdk.umd.min.js +1 -1
- package/bundles/banta-sdk.umd.min.js.map +1 -1
- package/esm2015/lib/comments/attachment-button/attachment-button.component.js +58 -0
- package/esm2015/lib/comments/banta-comments/banta-comments.component.js +15 -3
- package/esm2015/lib/comments/comment/comment.component.js +12 -5
- package/esm2015/lib/comments/comment-field/comment-field.component.js +27 -6
- package/esm2015/lib/comments/comment-sort/comment-sort.component.js +3 -3
- package/esm2015/lib/comments/comments.module.js +4 -2
- package/esm2015/lib/comments/index.js +2 -1
- package/esm2015/lib/common/common.module.js +7 -3
- package/esm2015/lib/common/lightbox/lightbox.component.js +28 -0
- package/fesm2015/banta-sdk.js +142 -19
- package/fesm2015/banta-sdk.js.map +1 -1
- package/lib/comments/attachment-button/attachment-button.component.d.ts +12 -0
- package/lib/comments/banta-comments/banta-comments.component.d.ts +2 -0
- package/lib/comments/comment/comment.component.d.ts +4 -1
- package/lib/comments/comment-field/comment-field.component.d.ts +6 -1
- package/lib/comments/index.d.ts +1 -0
- package/lib/common/lightbox/lightbox.component.d.ts +11 -0
- package/package.json +1 -1
package/bundles/banta-sdk.umd.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators'), require('@angular/core'), require('@angular/common'), require('@angular/
|
|
3
|
-
typeof define === 'function' && define.amd ? define('@banta/sdk', ['exports', 'rxjs', 'rxjs/operators', '@angular/core', '@angular/common', '@angular/
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.banta = global.banta || {}, global.banta.sdk = {}), global.rxjs, global.rxjs.operators, global.ng.core, global.ng.common, global.ng.
|
|
5
|
-
}(this, (function (exports, rxjs, operators, core, common,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators'), require('@angular/core'), require('@angular/common'), require('@angular/material/icon'), require('@angular/platform-browser'), require('@angular/material/button'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/forms'), require('@angular/material/dialog'), require('@banta/common'), require('@angular/router'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/cdk/text-field'), require('@angular/material/tooltip'), require('@angular/material/select')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define('@banta/sdk', ['exports', 'rxjs', 'rxjs/operators', '@angular/core', '@angular/common', '@angular/material/icon', '@angular/platform-browser', '@angular/material/button', '@angular/material/form-field', '@angular/material/input', '@angular/forms', '@angular/material/dialog', '@banta/common', '@angular/router', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/cdk/text-field', '@angular/material/tooltip', '@angular/material/select'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.banta = global.banta || {}, global.banta.sdk = {}), global.rxjs, global.rxjs.operators, global.ng.core, global.ng.common, global.ng.material.icon, global.ng.platformBrowser, global.ng.material.button, global.ng.material.formField, global.ng.material.input, global.ng.forms, global.ng.material.dialog, global.common$1, global.ng.router, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.cdk.textField, global.ng.material.tooltip, global.ng.material.select));
|
|
5
|
+
}(this, (function (exports, rxjs, operators, core, common, icon, platformBrowser, button, formField, input, forms, dialog, common$1, router, menu, progressSpinner, textField, tooltip, select) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function lazyConnection(options) {
|
|
8
8
|
var obs = new rxjs.Observable(function (observer) {
|
|
@@ -121,8 +121,39 @@
|
|
|
121
121
|
value: [{ type: core.Input }]
|
|
122
122
|
};
|
|
123
123
|
|
|
124
|
+
var LightboxComponent = /** @class */ (function () {
|
|
125
|
+
function LightboxComponent() {
|
|
126
|
+
}
|
|
127
|
+
LightboxComponent.prototype.ngAfterViewInit = function () {
|
|
128
|
+
document.body.appendChild(this.containerElement.nativeElement);
|
|
129
|
+
};
|
|
130
|
+
LightboxComponent.prototype.ngOnDestroy = function () {
|
|
131
|
+
this.containerElement.nativeElement.remove();
|
|
132
|
+
};
|
|
133
|
+
LightboxComponent.prototype.close = function () {
|
|
134
|
+
this.isOpen = false;
|
|
135
|
+
};
|
|
136
|
+
LightboxComponent.prototype.open = function (currentImage, images) {
|
|
137
|
+
this.currentImage = currentImage;
|
|
138
|
+
this.images = images;
|
|
139
|
+
this.isOpen = true;
|
|
140
|
+
};
|
|
141
|
+
return LightboxComponent;
|
|
142
|
+
}());
|
|
143
|
+
LightboxComponent.decorators = [
|
|
144
|
+
{ type: core.Component, args: [{
|
|
145
|
+
selector: 'banta-lightbox',
|
|
146
|
+
template: "<div \r\n class=\"banta-lightbox-container\" \r\n #container\r\n [class.open]=\"isOpen\"\r\n >\r\n\r\n <a class=\"underlay\" (click)=\"close()\" href=\"javascript:;\"></a>\r\n\r\n <a class=\"close-button\" href=\"javascript:;\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </a>\r\n\r\n <img [src]=\"currentImage\" />\r\n</div>\r\n",
|
|
147
|
+
styles: ["::ng-deep .banta-lightbox-container{position:fixed;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;background-color:rgba(0,0,0,.75);color:#fff;z-index:10000;transition:opacity .25s ease-in-out;display:flex;align-items:center;justify-content:center}::ng-deep .banta-lightbox-container a.underlay{z-index:0;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0}::ng-deep .banta-lightbox-container img{z-index:10;max-width:95%}::ng-deep .banta-lightbox-container.open{opacity:1;pointer-events:auto}::ng-deep .banta-lightbox-container a.close-button{position:absolute;top:0;right:0;padding:.75em;z-index:20}"]
|
|
148
|
+
},] }
|
|
149
|
+
];
|
|
150
|
+
LightboxComponent.propDecorators = {
|
|
151
|
+
containerElement: [{ type: core.ViewChild, args: ['container',] }]
|
|
152
|
+
};
|
|
153
|
+
|
|
124
154
|
var COMPONENTS = [
|
|
125
|
-
TimestampComponent
|
|
155
|
+
TimestampComponent,
|
|
156
|
+
LightboxComponent
|
|
126
157
|
];
|
|
127
158
|
var BantaCommonModule = /** @class */ (function () {
|
|
128
159
|
function BantaCommonModule() {
|
|
@@ -133,7 +164,8 @@
|
|
|
133
164
|
{ type: core.NgModule, args: [{
|
|
134
165
|
declarations: COMPONENTS,
|
|
135
166
|
imports: [
|
|
136
|
-
common.CommonModule
|
|
167
|
+
common.CommonModule,
|
|
168
|
+
icon.MatIconModule
|
|
137
169
|
],
|
|
138
170
|
exports: COMPONENTS
|
|
139
171
|
},] }
|
|
@@ -8255,6 +8287,11 @@
|
|
|
8255
8287
|
this._avatarSelected.next(user);
|
|
8256
8288
|
this.selectUser();
|
|
8257
8289
|
};
|
|
8290
|
+
CommentComponent.prototype.showLightbox = function (image) {
|
|
8291
|
+
this.lightbox.open(image.url, this.message.attachments
|
|
8292
|
+
.filter(function (x) { return x.type === 'image/png'; })
|
|
8293
|
+
.map(function (x) { return x.url; }));
|
|
8294
|
+
};
|
|
8258
8295
|
CommentComponent.prototype.avatarForUser = function (user) {
|
|
8259
8296
|
if (user && user.avatarUrl) {
|
|
8260
8297
|
var url = user.avatarUrl;
|
|
@@ -8267,8 +8304,8 @@
|
|
|
8267
8304
|
CommentComponent.decorators = [
|
|
8268
8305
|
{ type: core.Component, args: [{
|
|
8269
8306
|
selector: 'banta-comment',
|
|
8270
|
-
template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n <button *ngIf=\"!mine\" mat-menu-item (click)=\"report()\">Report</button>\r\n <button *ngIf=\"mine\" [disabled]=\"!permissions?.canEdit\" mat-menu-item (click)=\"startEdit()\">Edit</button>\r\n <button *ngIf=\"mine\" [disabled]=\"!permissions?.canDelete\" mat-menu-item (click)=\"delete()\">Delete</button>\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n <div class=\"user\">\r\n <a\r\n href=\"javascript:;\"\r\n class=\"avatar\"\r\n (click)=\"selectAvatar(message.user)\"\r\n [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n <a href=\"javascript:;\" class=\"username\" (click)=\"selectUsername(message.user)\">@{{message.user.username}}</a>\r\n <span class=\"user-tag\" *ngIf=\"message.user.tag\">{{message.user.tag}}</span>\r\n <span class=\"spacer\"></span>\r\n </div>\r\n <div class=\"content\" *ngIf=\"!editing\">\r\n {{message.message}}\r\n </div>\r\n <div class=\"content\" *ngIf=\"editing\" style=\"padding-bottom: 2em;\">\r\n <div>\r\n <mat-form-field floatLabel=\"always\" appearance=\"outline\" style=\"width: 100%;\">\r\n <mat-label>Edit Message</mat-label>\r\n <textarea matInput [(ngModel)]=\"editedMessage\"></textarea>\r\n </mat-form-field>\r\n </div>\r\n <button mat-raised-button (click)=\"saveEdit()\">Save</button> \r\n <button mat-button (click)=\"endEditing()\">Cancel</button>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n <ul class=\"message-facts\">\r\n <li *ngIf=\"message.edits?.length > 0\">Edited</li>\r\n </ul>\r\n <div class=\"spacer\"></div>\r\n <div class=\"counted-action\" *ngIf=\"showReplyAction\">\r\n <div class=\"count-indicator\">\r\n {{message.submessages?.length || message.submessageCount || 0}}\r\n </div>\r\n <button mat-icon-button matTooltip=\"Comment\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n <mat-icon [inline]=\"true\">comment</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"counted-action\" [class.active]=\"message.userState?.liked\">\r\n <div class=\"count-indicator\">\r\n {{message.likes}}\r\n </div>\r\n <button \r\n *ngIf=\"message.transientState?.liking\"\r\n mat-icon-button \r\n [disabled]=\"true\" \r\n [matTooltip]=\"upvoting ? 'Please wait...' : message.userState?.liked ? 'Unlike' : 'Like'\" \r\n matTooltipPosition=\"below\" \r\n >\r\n <mat-spinner [diameter]=\"15\" style=\"margin-left: 1em;\"></mat-spinner>\r\n </button>\r\n <button \r\n *ngIf=\"!message.transientState?.liking\"\r\n mat-icon-button \r\n [disabled]=\"!permissions?.canLike\" \r\n [matTooltip]=\"upvoting ? 'Please wait...' : 'Like'\" \r\n matTooltipPosition=\"below\" \r\n (click)=\"message.userState?.liked ? unlike() : like()\" \r\n >\r\n <mat-icon [inline]=\"true\">thumb_up</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"counted-action\">\r\n <button mat-icon-button matTooltip=\"Share this comment\" matTooltipPosition=\"below\" (click)=\"share()\">\r\n <mat-icon [inline]=\"true\" >share</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <button mat-icon-button [matMenuTriggerFor]=\"pointItemMenu\">\r\n <mat-icon [inline]=\"true\">more_vert</mat-icon>\r\n </button>\r\n </div>\r\n</div>\r\n",
|
|
8271
|
-
styles: ["@-webkit-keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}@keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}:host{display:flex;flex-direction:column;position:relative;padding:.5em;visibility:hidden}:host.new{visibility:visible;-webkit-animation-name:comment-appear;animation-name:comment-appear;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}:host.highlighted{background:#00223a;outline:2px solid #003277}:host.visible{visibility:visible}:host:hover{background:#eee}:host .message-content .content{margin-left:60px;margin-right:.5em}:host.
|
|
8307
|
+
template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n <button *ngIf=\"!mine\" mat-menu-item (click)=\"report()\">Report</button>\r\n <button *ngIf=\"mine\" [disabled]=\"!permissions?.canEdit\" mat-menu-item (click)=\"startEdit()\">Edit</button>\r\n <button *ngIf=\"mine\" [disabled]=\"!permissions?.canDelete\" mat-menu-item (click)=\"delete()\">Delete</button>\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n <div class=\"user\">\r\n <a\r\n href=\"javascript:;\"\r\n class=\"avatar\"\r\n (click)=\"selectAvatar(message.user)\"\r\n [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n <a href=\"javascript:;\" class=\"username\" (click)=\"selectUsername(message.user)\">@{{message.user.username}}</a>\r\n <span class=\"user-tag\" *ngIf=\"message.user.tag\">{{message.user.tag}}</span>\r\n <span class=\"spacer\"></span>\r\n </div>\r\n <div class=\"content\" *ngIf=\"!editing\">\r\n {{message.message}}\r\n\r\n <ng-container *ngIf=\"message.attachments?.length > 0\">\r\n <banta-lightbox #lightbox></banta-lightbox>\r\n <div class=\"attachments-row\" [class.single]=\"message.attachments?.length === 1\">\r\n <a \r\n href=\"javascript:;\" \r\n (click)=\"showLightbox(attachment)\"\r\n *ngFor=\"let attachment of message.attachments\" \r\n >\r\n <img [src]=\"attachment.url\" alt=\"\">\r\n </a>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"content\" *ngIf=\"editing\" style=\"padding-bottom: 2em;\">\r\n <div>\r\n <mat-form-field floatLabel=\"always\" appearance=\"outline\" style=\"width: 100%;\">\r\n <mat-label>Edit Message</mat-label>\r\n <textarea matInput [(ngModel)]=\"editedMessage\"></textarea>\r\n </mat-form-field>\r\n </div>\r\n <button mat-raised-button (click)=\"saveEdit()\">Save</button> \r\n <button mat-button (click)=\"endEditing()\">Cancel</button>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n <ul class=\"message-facts\">\r\n <li *ngIf=\"message.edits?.length > 0\">Edited</li>\r\n </ul>\r\n <div class=\"spacer\"></div>\r\n <div class=\"counted-action\" *ngIf=\"showReplyAction\">\r\n <div class=\"count-indicator\">\r\n {{message.submessages?.length || message.submessageCount || 0}}\r\n </div>\r\n <button mat-icon-button matTooltip=\"Comment\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n <mat-icon [inline]=\"true\">comment</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"counted-action\" [class.active]=\"message.userState?.liked\">\r\n <div class=\"count-indicator\">\r\n {{message.likes}}\r\n </div>\r\n <button \r\n *ngIf=\"message.transientState?.liking\"\r\n mat-icon-button \r\n [disabled]=\"true\" \r\n [matTooltip]=\"upvoting ? 'Please wait...' : message.userState?.liked ? 'Unlike' : 'Like'\" \r\n matTooltipPosition=\"below\" \r\n >\r\n <mat-spinner [diameter]=\"15\" style=\"margin-left: 1em;\"></mat-spinner>\r\n </button>\r\n <button \r\n *ngIf=\"!message.transientState?.liking\"\r\n mat-icon-button \r\n [disabled]=\"!permissions?.canLike\" \r\n [matTooltip]=\"upvoting ? 'Please wait...' : 'Like'\" \r\n matTooltipPosition=\"below\" \r\n (click)=\"message.userState?.liked ? unlike() : like()\" \r\n >\r\n <mat-icon [inline]=\"true\">thumb_up</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"counted-action\">\r\n <button mat-icon-button matTooltip=\"Share this comment\" matTooltipPosition=\"below\" (click)=\"share()\">\r\n <mat-icon [inline]=\"true\" >share</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <button mat-icon-button [matMenuTriggerFor]=\"pointItemMenu\">\r\n <mat-icon [inline]=\"true\">more_vert</mat-icon>\r\n </button>\r\n </div>\r\n</div>\r\n",
|
|
8308
|
+
styles: ["@-webkit-keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}@keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}:host{display:flex;flex-direction:column;position:relative;padding:.5em;visibility:hidden}:host.new{visibility:visible;-webkit-animation-name:comment-appear;animation-name:comment-appear;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}:host.highlighted{background:#00223a;outline:2px solid #003277}:host.visible{visibility:visible}:host:hover{background:#eee}:host .message-content .content{margin-left:60px;margin-right:.5em}:host .message-content .attachments-row{margin-top:15px;display:flex;gap:10px}:host .message-content .attachments-row img{border-radius:10px;width:300px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}:host.abbreviated .message-content .content{text-overflow:ellipsis;overflow-y:hidden}:host .actions{display:flex;padding-right:10px;margin-left:60px;align-items:center}:host .actions button{color:#666}:host .actions banta-timestamp{color:#666;font-size:10pt}.user{position:relative;margin:1em 0 0;display:flex;align-items:center}.user .display-name,.user .username{z-index:1;position:relative;padding:0 0 0 1em;font-size:10pt;color:#000;margin:0 auto 0 0;display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:1;flex-grow:0}.user .display-name.username.username.username,.user .username.username.username.username{color:#666}.avatar{height:48px;width:48px;background-position:50%;background-size:cover;background-color:#333;border-radius:100%;flex-shrink:0;flex-grow:0}.counted-action{display:flex;align-items:center}.counted-action.active .count-indicator,.counted-action.active button{color:#00a5ff}.count-indicator{font-size:9pt;padding:0 0 0 3px;color:#666}:host-context(.mat-dark-theme) .count-indicator{border-color:#333}:host-context(.mat-dark-theme):hover{background:#060606}:host-context(.mat-dark-theme) .user .display-name,:host-context(.mat-dark-theme) .user .username{color:#fff}@media (max-width:400px){.avatar{height:32px;width:32px}:host .actions{margin-left:44px}:host .message-content .content{margin-left:44px;margin-right:.5em}}.user-tag{text-transform:uppercase;font-size:12px;border:1px solid #b27373;background:#7a412b;color:#fff;padding:3px 5px;margin:0 .5em 0 1em;border-radius:3px}.spacer{flex-shrink:1;flex-grow:1}ul.message-facts{margin:0;padding:0;color:#666}ul.message-facts li{list-style-type:none;border-left:1px solid #666;font-size:10pt;padding-left:.5em;margin-left:.5em}"]
|
|
8272
8309
|
},] }
|
|
8273
8310
|
];
|
|
8274
8311
|
CommentComponent.propDecorators = {
|
|
@@ -8292,7 +8329,8 @@
|
|
|
8292
8329
|
editStarted: [{ type: core.Output }],
|
|
8293
8330
|
editEnded: [{ type: core.Output }],
|
|
8294
8331
|
shared: [{ type: core.Output }],
|
|
8295
|
-
commentId: [{ type: core.HostBinding, args: ['attr.data-comment-id',] }]
|
|
8332
|
+
commentId: [{ type: core.HostBinding, args: ['attr.data-comment-id',] }],
|
|
8333
|
+
lightbox: [{ type: core.ViewChild, args: ['lightbox',] }]
|
|
8296
8334
|
};
|
|
8297
8335
|
|
|
8298
8336
|
var CommentViewComponent = /** @class */ (function () {
|
|
@@ -8657,6 +8695,7 @@
|
|
|
8657
8695
|
this.permissionDeniedLabel = 'Send';
|
|
8658
8696
|
this.postCommentLabel = 'Post a comment';
|
|
8659
8697
|
this.postReplyLabel = 'Post a reply';
|
|
8698
|
+
this.allowAttachments = false;
|
|
8660
8699
|
this.participants = [];
|
|
8661
8700
|
this.hashtags = [
|
|
8662
8701
|
{ hashtag: 'error', description: 'Cause an error' },
|
|
@@ -9023,6 +9062,16 @@
|
|
|
9023
9062
|
});
|
|
9024
9063
|
});
|
|
9025
9064
|
};
|
|
9065
|
+
BantaCommentsComponent.prototype.handlePermissionDenied = function (errorMessage) {
|
|
9066
|
+
// This is what other components call when handling permission errors
|
|
9067
|
+
if (errorMessage.startsWith("app-handle|")) {
|
|
9068
|
+
// If this is an error during authorizeAction on the backend, pass control to the user-provided
|
|
9069
|
+
// permission-denied handler.
|
|
9070
|
+
this.sendPermissionDenied(errorMessage.replace(/^app-handle\|/, ''));
|
|
9071
|
+
return;
|
|
9072
|
+
}
|
|
9073
|
+
alert(errorMessage);
|
|
9074
|
+
};
|
|
9026
9075
|
BantaCommentsComponent.prototype.sendPermissionDenied = function (message) {
|
|
9027
9076
|
this._permissionDeniedError.next(message);
|
|
9028
9077
|
};
|
|
@@ -9284,8 +9333,8 @@
|
|
|
9284
9333
|
BantaCommentsComponent.decorators = [
|
|
9285
9334
|
{ type: core.Component, args: [{
|
|
9286
9335
|
selector: 'banta-comments',
|
|
9287
|
-
template: "<ng-container *ngIf=\"loading\">\r\n <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n <h1>Loading Comments</h1>\r\n <div>\r\n <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n </div>\r\n\r\n <p class=\"loading-message\" [class.visible]=\"loadingMessageVisible\">{{loadingMessage}}</p>\r\n </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!loading\">\r\n <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\r\n\r\n <div>\r\n <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n Latest Comments\r\n </a>\r\n </div>\r\n\r\n <banta-comment\r\n [message]=\"selectedMessage\"\r\n [liking]=\"selectedMessage.transientState.liking\"\r\n [mine]=\"user?.id === selectedMessage.user?.id\"\r\n [permissions]=\"source?.permissions\"\r\n [showReplyAction]=\"false\"\r\n [editing]=\"selectedMessage.transientState.editing\"\r\n (editStarted)=\"startEditing(selectedMessage)\"\r\n (editEnded)=\"selectedMessage.transientState.editing = false\"\r\n (edited)=\"saveEdit(selectedMessage, $event)\"\r\n (userSelected)=\"selectMessageUser(selectedMessage)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (liked)=\"likeMessage(source, selectedMessage)\"\r\n (unliked)=\"unlikeMessage(source, selectedMessage)\"\r\n (reported)=\"reportMessage(selectedMessage)\"\r\n (selected)=\"selectMessage(selectedMessage)\"\r\n (shared)=\"shareMessage($event)\"\r\n (deleted)=\"deleteMessage(selectedMessage)\"\r\n ></banta-comment>\r\n\r\n <div class=\"replies\">\r\n\r\n <ng-container *ngIf=\"!selectedMessageThread\">\r\n <div class=\"loading\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"selectedMessageThread\">\r\n <banta-comment-view\r\n [source]=\"selectedMessageThread\"\r\n [allowReplies]=\"false\"\r\n [fixedHeight]=\"false\"\r\n [showEmptyState]=\"false\"\r\n [newestLast]=\"true\"\r\n (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n (reported)=\"reportMessage($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (shared)=\"shareMessage($event)\"\r\n (deleted)=\"deleteMessage($event)\"\r\n ></banta-comment-view>\r\n\r\n <banta-comment-field\r\n [sendLabel]=\"replyLabel\"\r\n [sendingLabel]=\"sendingLabel\"\r\n [hashtags]=\"hashtags\"\r\n [participants]=\"participants\"\r\n (signInSelected)=\"showSignIn()\"\r\n (editAvatarSelected)=\"showEditAvatar()\"\r\n [source]=\"selectedMessageThread\"\r\n [canComment]=\"source?.permissions?.canPost\"\r\n [signInLabel]=\"signInLabel\"\r\n [permissionDeniedLabel]=\"permissionDeniedLabel\"\r\n (permissionDeniedError)=\"
|
|
9288
|
-
styles: [":host{display:flex;flex-direction:column}@-webkit-keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{-webkit-animation-name:select-comment;animation-name:select-comment;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:4em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}@media (max-width:500px){.focused .replies{margin-left:0}}.loading-screen{text-align:center;opacity:0;transition:opacity .25s ease-in-out}.loading-screen.visible{opacity:1}.loading-screen h1{font-weight:100}.loading-screen mat-spinner{margin:5em auto}.loading-screen .loading-message{opacity:0;transition:opacity .25s ease-in-out;width:500px;max-width:100%;margin:0 auto}.loading-screen .loading-message.visible{opacity:1}"]
|
|
9336
|
+
template: "<ng-container *ngIf=\"loading\">\r\n <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n <h1>Loading Comments</h1>\r\n <div>\r\n <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n </div>\r\n\r\n <p class=\"loading-message\" [class.visible]=\"loadingMessageVisible\">{{loadingMessage}}</p>\r\n </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!loading\">\r\n <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\r\n\r\n <div>\r\n <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n Latest Comments\r\n </a>\r\n </div>\r\n\r\n <banta-comment\r\n [message]=\"selectedMessage\"\r\n [liking]=\"selectedMessage.transientState.liking\"\r\n [mine]=\"user?.id === selectedMessage.user?.id\"\r\n [permissions]=\"source?.permissions\"\r\n [showReplyAction]=\"false\"\r\n [editing]=\"selectedMessage.transientState.editing\"\r\n (editStarted)=\"startEditing(selectedMessage)\"\r\n (editEnded)=\"selectedMessage.transientState.editing = false\"\r\n (edited)=\"saveEdit(selectedMessage, $event)\"\r\n (userSelected)=\"selectMessageUser(selectedMessage)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (liked)=\"likeMessage(source, selectedMessage)\"\r\n (unliked)=\"unlikeMessage(source, selectedMessage)\"\r\n (reported)=\"reportMessage(selectedMessage)\"\r\n (selected)=\"selectMessage(selectedMessage)\"\r\n (shared)=\"shareMessage($event)\"\r\n (deleted)=\"deleteMessage(selectedMessage)\"\r\n ></banta-comment>\r\n\r\n <div class=\"replies\">\r\n\r\n <ng-container *ngIf=\"!selectedMessageThread\">\r\n <div class=\"loading\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"selectedMessageThread\">\r\n <banta-comment-view\r\n [source]=\"selectedMessageThread\"\r\n [allowReplies]=\"false\"\r\n [fixedHeight]=\"false\"\r\n [showEmptyState]=\"false\"\r\n [newestLast]=\"true\"\r\n (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n (reported)=\"reportMessage($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (shared)=\"shareMessage($event)\"\r\n (deleted)=\"deleteMessage($event)\"\r\n ></banta-comment-view>\r\n\r\n <banta-comment-field\r\n [sendLabel]=\"replyLabel\"\r\n [sendingLabel]=\"sendingLabel\"\r\n [hashtags]=\"hashtags\"\r\n [participants]=\"participants\"\r\n (signInSelected)=\"showSignIn()\"\r\n (editAvatarSelected)=\"showEditAvatar()\"\r\n [source]=\"selectedMessageThread\"\r\n [canComment]=\"source?.permissions?.canPost\"\r\n [signInLabel]=\"signInLabel\"\r\n [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n [user]=\"user\"\r\n [label]=\"postReplyLabel\"\r\n [submit]=\"sendReply\"\r\n [allowAttachments]=\"allowAttachments\"\r\n >\r\n <ng-content select=\".reply-send-options\"></ng-content>\r\n </banta-comment-field>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"main\" [class.hidden]=\"selectedMessage\">\r\n <banta-comment-field\r\n [source]=\"source\"\r\n [user]=\"user\"\r\n [sendLabel]=\"sendLabel\"\r\n [sendingLabel]=\"sendingLabel\"\r\n [signInLabel]=\"signInLabel\"\r\n [canComment]=\"source?.permissions?.canPost\"\r\n [hashtags]=\"hashtags\"\r\n [participants]=\"participants\"\r\n [label]=\"postCommentLabel\"\r\n (editAvatarSelected)=\"showEditAvatar()\"\r\n (signInSelected)=\"showSignIn()\"\r\n [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n [submit]=\"sendMessage\"\r\n [allowAttachments]=\"allowAttachments\"\r\n >\r\n \r\n </banta-comment-field>\r\n\r\n <banta-comment-sort\r\n [(sort)]=\"sortOrder\"></banta-comment-sort>\r\n\r\n <banta-comment-view\r\n [class.faded]=\"selectedMessage\"\r\n [source]=\"source\"\r\n [fixedHeight]=\"fixedHeight\"\r\n [maxMessages]=\"maxMessages\"\r\n [maxVisibleMessages]=\"maxVisibleMessages\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n (userSelected)=\"selectMessageUser($event)\"\r\n (sortOrderChanged)=\"sortOrder = $event\"\r\n (selected)=\"selectMessage($event)\"\r\n (liked)=\"likeMessage(source, $event)\"\r\n (unliked)=\"unlikeMessage(source, $event)\"\r\n (messageEdited)=\"editMessage(source, $event.message, $event.newMessage)\"\r\n (reported)=\"reportMessage($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (shared)=\"shareMessage($event)\"\r\n (deleted)=\"deleteMessage($event)\"\r\n ></banta-comment-view>\r\n </div>\r\n</ng-container>\r\n",
|
|
9337
|
+
styles: [":host{display:flex;flex-direction:column}@-webkit-keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{-webkit-animation-name:select-comment;animation-name:select-comment;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:4em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}@media (max-width:500px){.focused .replies{margin-left:0}}.loading-screen{text-align:center;opacity:0;transition:opacity .25s ease-in-out}.loading-screen.visible{opacity:1}.loading-screen h1{font-weight:100}.loading-screen mat-spinner{margin:5em auto}.loading-screen .loading-message{opacity:0;transition:opacity .25s ease-in-out;width:500px;max-width:100%;margin:0 auto}.loading-screen .loading-message.visible{opacity:1}banta-comment-sort{margin:0 0 0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;display:block}@media (max-width:450px){banta-comment-sort{margin:0;width:100%}}"]
|
|
9289
9338
|
},] }
|
|
9290
9339
|
];
|
|
9291
9340
|
BantaCommentsComponent.ctorParameters = function () { return [
|
|
@@ -9302,6 +9351,7 @@
|
|
|
9302
9351
|
permissionDeniedLabel: [{ type: core.Input }],
|
|
9303
9352
|
postCommentLabel: [{ type: core.Input }],
|
|
9304
9353
|
postReplyLabel: [{ type: core.Input }],
|
|
9354
|
+
allowAttachments: [{ type: core.Input }],
|
|
9305
9355
|
fixedHeight: [{ type: core.Input }],
|
|
9306
9356
|
maxMessages: [{ type: core.Input }],
|
|
9307
9357
|
maxVisibleMessages: [{ type: core.Input }],
|
|
@@ -9404,6 +9454,7 @@
|
|
|
9404
9454
|
var CommentFieldComponent = /** @class */ (function () {
|
|
9405
9455
|
function CommentFieldComponent() {
|
|
9406
9456
|
this.canComment = true;
|
|
9457
|
+
this.allowAttachments = false;
|
|
9407
9458
|
this.signInSelected = new rxjs.Subject();
|
|
9408
9459
|
this.editAvatarSelected = new rxjs.Subject();
|
|
9409
9460
|
this.sending = false;
|
|
@@ -9421,6 +9472,7 @@
|
|
|
9421
9472
|
this.autocompleteVisible = false;
|
|
9422
9473
|
this.autocompleteOptions = [];
|
|
9423
9474
|
this.autoCompleteSelected = 0;
|
|
9475
|
+
this.chatMessageAttachments = [];
|
|
9424
9476
|
}
|
|
9425
9477
|
Object.defineProperty(CommentFieldComponent.prototype, "permissionDeniedError", {
|
|
9426
9478
|
get: function () {
|
|
@@ -9466,6 +9518,9 @@
|
|
|
9466
9518
|
_this.expandError = false;
|
|
9467
9519
|
}, 5 * 1000);
|
|
9468
9520
|
}, 100);
|
|
9521
|
+
// On mobile, just show an alert dialog
|
|
9522
|
+
if (window.innerWidth < 430)
|
|
9523
|
+
alert(message);
|
|
9469
9524
|
};
|
|
9470
9525
|
CommentFieldComponent.prototype.autocomplete = function (replacement) {
|
|
9471
9526
|
return __awaiter(this, void 0, void 0, function () {
|
|
@@ -9629,8 +9684,14 @@
|
|
|
9629
9684
|
sentAt: Date.now(),
|
|
9630
9685
|
url: location.href,
|
|
9631
9686
|
likes: 0,
|
|
9632
|
-
message: text
|
|
9687
|
+
message: text,
|
|
9688
|
+
attachments: this.chatMessageAttachments
|
|
9633
9689
|
};
|
|
9690
|
+
// this.sendError = new Error('Could not send: This has been a test of the emergency broadcast system.');
|
|
9691
|
+
// this.expandError = true;
|
|
9692
|
+
this.indicateError('Could not send: This has been a test of the emergency broadcast system.');
|
|
9693
|
+
if (1)
|
|
9694
|
+
return [2 /*return*/];
|
|
9634
9695
|
_a.label = 2;
|
|
9635
9696
|
case 2:
|
|
9636
9697
|
_a.trys.push([2, 4, , 6]);
|
|
@@ -9655,23 +9716,33 @@
|
|
|
9655
9716
|
});
|
|
9656
9717
|
});
|
|
9657
9718
|
};
|
|
9719
|
+
CommentFieldComponent.prototype.addedAttachment = function (file) {
|
|
9720
|
+
this.chatMessageAttachments.push(file);
|
|
9721
|
+
};
|
|
9722
|
+
CommentFieldComponent.prototype.removeAttachment = function (index) {
|
|
9723
|
+
this.chatMessageAttachments.splice(index, 1);
|
|
9724
|
+
};
|
|
9725
|
+
CommentFieldComponent.prototype.alertError = function () {
|
|
9726
|
+
if (!this.sendError)
|
|
9727
|
+
return;
|
|
9728
|
+
alert(this.sendError.message);
|
|
9729
|
+
};
|
|
9658
9730
|
return CommentFieldComponent;
|
|
9659
9731
|
}());
|
|
9660
9732
|
CommentFieldComponent.decorators = [
|
|
9661
9733
|
{ type: core.Component, args: [{
|
|
9662
9734
|
selector: 'banta-comment-field',
|
|
9663
|
-
template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n <div class=\"avatar-container\">\r\n <a href=\"javascript:;\"\r\n class=\"avatar\"\r\n (click)=\"showEditAvatar()\"\r\n [style.background-image]=\"'url(' + user?.avatarUrl + ')'\"\r\n ></a>\r\n </div>\r\n <div class=\"text-container\">\r\n <div class=\"field-container\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n
|
|
9664
|
-
styles: ["@-webkit-keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;-webkit-animation-name:comment-field-appear;animation-name:comment-field-appear;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end}.avatar-container .avatar{width:48px;height:48px;background:pink;border-radius:100%;background-size:cover;background-repeat:no-repeat;background-position:50%;margin-top:.75em;margin-right:.75em}form{display:flex;padding:.5em;align-items:center}form .text-container{position:relative;display:flex;flex-grow:1}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-
|
|
9735
|
+
template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n <div class=\"avatar-container\">\r\n <a href=\"javascript:;\"\r\n class=\"avatar\"\r\n (click)=\"showEditAvatar()\"\r\n [style.background-image]=\"'url(' + user?.avatarUrl + ')'\"\r\n ></a>\r\n </div>\r\n <div class=\"text-container\">\r\n <div class=\"field-container\">\r\n <div class=\"field-row\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label>{{label}}</mat-label>\r\n <textarea\r\n #textarea\r\n name=\"message\"\r\n [placeholder]=\"placeholder\"\r\n matInput\r\n cdkTextareaAutosize\r\n (keydown)=\"onKeyDown($event)\"\r\n (blur)=\"onBlur()\"\r\n [disabled]=\"sending\"\r\n [(ngModel)]=\"text\"></textarea>\r\n </mat-form-field>\r\n <div class=\"options-line\">\r\n <mat-spinner *ngIf=\"sending\" class=\"icon loading\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n <div *ngIf=\"sendError\" class=\"error-message\" [class.expanded]=\"expandError\" [matTooltip]=\"sendError.message\" (click)=\"alertError()\">\r\n <mat-icon *ngIf=\"sendError\">error</mat-icon>\r\n {{sendError.message}}\r\n </div>\r\n <div class=\"spacer\"></div>\r\n <div class=\"custom\">\r\n <ng-content></ng-content>\r\n </div>\r\n <banta-attachment-button (addedAttachment)=\"addedAttachment($event)\" *ngIf=\"allowAttachments\"></banta-attachment-button>\r\n <emoji-selector-button (selected)=\"insertEmoji($event)\"></emoji-selector-button>\r\n </div>\r\n \r\n </div>\r\n <div #autocompleteContainer class=\"autocomplete-container\">\r\n <div #autocomplete class=\"autocomplete\" [class.visible]=\"autocompleteVisible\">\r\n\r\n <div>\r\n <strong>{{completionPrefix}}</strong>...\r\n </div>\r\n <a\r\n mat-button\r\n *ngFor=\"let option of autocompleteOptions; index as index\"\r\n (click)=\"activateAutoComplete(option)\"\r\n [class.active]=\"autoCompleteSelected === index\"\r\n >\r\n {{option.label}}\r\n </a>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"chatMessageAttachments && chatMessageAttachments.length\" class=\"message-attachments-container\">\r\n <div *ngFor=\"let attachment of chatMessageAttachments; index as attachmentIndex\"\r\n class=\"message-attachment\">\r\n <button (click)=\"removeAttachment(attachmentIndex)\" mat-mini-fab color=\"primary\" class=\"remove-img\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <img [src]=\"attachment.url\" alt=\"Message Attachment\">\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <ng-container *ngIf=\"!user\">\r\n <button\r\n mat-raised-button\r\n color=\"primary\"\r\n type=\"button\"\r\n (click)=\"showSignIn()\"\r\n >{{signInLabel}}</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"user\">\r\n <button\r\n mat-raised-button\r\n class=\"send\"\r\n color=\"primary\"\r\n [disabled]=\"canComment && ((!text && !chatMessageAttachments.length) || sending)\"\r\n >\r\n <ng-container *ngIf=\"canComment\">\r\n <mat-icon *ngIf=\"!sending\">chevron_right</mat-icon>\r\n <mat-spinner *ngIf=\"sending\" class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n </ng-container>\r\n <span class=\"label\">\r\n <ng-container *ngIf=\"!canComment\">\r\n {{permissionDeniedLabel}}\r\n </ng-container>\r\n <ng-container *ngIf=\"canComment\">\r\n <ng-container *ngIf=\"!sending\">\r\n {{sendLabel}}\r\n </ng-container>\r\n <ng-container *ngIf=\"sending\">\r\n {{sendingLabel}}\r\n </ng-container>\r\n </ng-container>\r\n </span>\r\n </button>\r\n </ng-container>\r\n </div>\r\n</form>",
|
|
9736
|
+
styles: ["@-webkit-keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;-webkit-animation-name:comment-field-appear;animation-name:comment-field-appear;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end;flex-shrink:0}.avatar-container .avatar{width:48px;height:48px;background:pink;border-radius:100%;background-size:cover;background-repeat:no-repeat;background-position:50%;margin-top:.75em;margin-right:.75em}form{display:flex;padding:.5em;align-items:center}form .text-container{position:relative;display:flex;flex-grow:1;min-width:0}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-spinner.loading{position:absolute;left:.5em;bottom:.5em}form .text-container .options-line{display:flex;align-items:center}form .text-container .options-line>*{flex-shrink:0}form .text-container .options-line .error-message{left:.5em;bottom:.5em;color:#683333;overflow-x:hidden;max-width:1.5em;white-space:nowrap;transition:max-width 2s ease-in-out;text-overflow:ellipsis;overflow:hidden;flex-shrink:1}form .text-container .options-line .error-message.expanded,form .text-container .options-line .error-message:hover{max-width:100%}form .text-container .options-line .error-message mat-icon{vertical-align:middle}form input[type=text]{background:#000;color:#fff;border:1px solid #333;width:100%;height:1em}form .actions{margin-left:1em;flex-shrink:0}form button{display:block;margin:0 0 0 auto}form.new-message{display:flex;align-items:flex-start;min-width:0}form.new-message .field-container{flex-grow:1;display:flex;flex-direction:column;min-width:0}form.new-message mat-form-field{width:100%}form.new-message mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}form.new-message button{margin:1.25em 0 0}button.send{min-width:9em}textarea{max-height:7em}.autocomplete-container{width:calc(100% - 2em);position:relative;pointer-events:none;top:-2em}.autocomplete{visibility:hidden;pointer-events:none;position:absolute;background:#333;padding:.5em;display:flex;flex-direction:column;z-index:100}.autocomplete.visible{visibility:visible;pointer-events:auto}.autocomplete a{width:100%;text-align:left}.autocomplete a.active{background:#555}@media (max-width:500px){:host{margin:0}.avatar-container{width:auto;flex-shrink:0}.avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}button.send{min-width:auto;margin-top:1.5em}button.send .label{display:none}}.message-attachments-container{display:flex;gap:20px}.message-attachments-container .message-attachment{width:300px;position:relative}.message-attachments-container .message-attachment img{width:300px;border-radius:10px}.message-attachments-container .message-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}.field-row{position:relative}"]
|
|
9665
9737
|
},] }
|
|
9666
9738
|
];
|
|
9667
9739
|
CommentFieldComponent.propDecorators = {
|
|
9668
9740
|
source: [{ type: core.Input }],
|
|
9669
9741
|
user: [{ type: core.Input }],
|
|
9670
9742
|
canComment: [{ type: core.Input }],
|
|
9743
|
+
allowAttachments: [{ type: core.Input }],
|
|
9671
9744
|
signInSelected: [{ type: core.Output }],
|
|
9672
9745
|
editAvatarSelected: [{ type: core.Output }],
|
|
9673
|
-
sendError: [{ type: core.Input }],
|
|
9674
|
-
expandError: [{ type: core.Input }],
|
|
9675
9746
|
sendLabel: [{ type: core.Input }],
|
|
9676
9747
|
sendingLabel: [{ type: core.Input }],
|
|
9677
9748
|
label: [{ type: core.Input }],
|
|
@@ -9721,8 +9792,8 @@
|
|
|
9721
9792
|
CommentSortComponent.decorators = [
|
|
9722
9793
|
{ type: core.Component, args: [{
|
|
9723
9794
|
selector: 'banta-comment-sort',
|
|
9724
|
-
template: "<
|
|
9725
|
-
styles: ["
|
|
9795
|
+
template: "<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label>Sort by</mat-label>\r\n <mat-select [(value)]=\"sort\" >\r\n <mat-option [value]=\"commentsOrder.NEWEST\">Newest</mat-option>\r\n <mat-option [value]=\"commentsOrder.OLDEST\">Oldest</mat-option>\r\n <mat-option [value]=\"commentsOrder.LIKES\">Likes</mat-option>\r\n </mat-select>\r\n</mat-form-field>",
|
|
9796
|
+
styles: ["mat-form-field{width:100%}"]
|
|
9726
9797
|
},] }
|
|
9727
9798
|
];
|
|
9728
9799
|
CommentSortComponent.propDecorators = {
|
|
@@ -9730,13 +9801,85 @@
|
|
|
9730
9801
|
sortChange: [{ type: core.Output }]
|
|
9731
9802
|
};
|
|
9732
9803
|
|
|
9804
|
+
var AttachmentButtonComponent = /** @class */ (function () {
|
|
9805
|
+
function AttachmentButtonComponent(cdnProvider) {
|
|
9806
|
+
this.cdnProvider = cdnProvider;
|
|
9807
|
+
this._addedAttachment = new rxjs.Subject();
|
|
9808
|
+
}
|
|
9809
|
+
Object.defineProperty(AttachmentButtonComponent.prototype, "addedAttachment", {
|
|
9810
|
+
get: function () {
|
|
9811
|
+
return this._addedAttachment.asObservable();
|
|
9812
|
+
},
|
|
9813
|
+
enumerable: false,
|
|
9814
|
+
configurable: true
|
|
9815
|
+
});
|
|
9816
|
+
AttachmentButtonComponent.prototype.show = function () {
|
|
9817
|
+
this.fileInput.nativeElement.click();
|
|
9818
|
+
};
|
|
9819
|
+
AttachmentButtonComponent.prototype.fileChange = function (event) {
|
|
9820
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
9821
|
+
var element, file, publicURL, e_1;
|
|
9822
|
+
return __generator(this, function (_a) {
|
|
9823
|
+
switch (_a.label) {
|
|
9824
|
+
case 0:
|
|
9825
|
+
element = event.currentTarget;
|
|
9826
|
+
if (!element.files.length) return [3 /*break*/, 5];
|
|
9827
|
+
console.log('[Banta] File Added to comment');
|
|
9828
|
+
file = element.files[0];
|
|
9829
|
+
publicURL = void 0;
|
|
9830
|
+
_a.label = 1;
|
|
9831
|
+
case 1:
|
|
9832
|
+
_a.trys.push([1, 3, , 4]);
|
|
9833
|
+
return [4 /*yield*/, this.cdnProvider.uploadImage(file)];
|
|
9834
|
+
case 2:
|
|
9835
|
+
publicURL = _a.sent();
|
|
9836
|
+
return [3 /*break*/, 4];
|
|
9837
|
+
case 3:
|
|
9838
|
+
e_1 = _a.sent();
|
|
9839
|
+
console.error("[Banta] Caught an error while uploading image to CDN:");
|
|
9840
|
+
console.error(e_1);
|
|
9841
|
+
alert("Failed to upload image. Please try again later.");
|
|
9842
|
+
return [2 /*return*/];
|
|
9843
|
+
case 4:
|
|
9844
|
+
// If no URL was returned, then an error must have occurred. Presumably the CDN
|
|
9845
|
+
// provider has conveyed an error to the user.
|
|
9846
|
+
if (!publicURL)
|
|
9847
|
+
return [2 /*return*/];
|
|
9848
|
+
this._addedAttachment.next({
|
|
9849
|
+
type: file.type,
|
|
9850
|
+
url: publicURL
|
|
9851
|
+
});
|
|
9852
|
+
_a.label = 5;
|
|
9853
|
+
case 5: return [2 /*return*/];
|
|
9854
|
+
}
|
|
9855
|
+
});
|
|
9856
|
+
});
|
|
9857
|
+
};
|
|
9858
|
+
return AttachmentButtonComponent;
|
|
9859
|
+
}());
|
|
9860
|
+
AttachmentButtonComponent.decorators = [
|
|
9861
|
+
{ type: core.Component, args: [{
|
|
9862
|
+
selector: 'banta-attachment-button',
|
|
9863
|
+
template: "<button matTooltip=\"Add an image or gif\" #button type=\"button\" mat-icon-button (click)=\"show()\">\r\n\t<mat-icon>image</mat-icon>\r\n</button>\r\n<input style=\"display: none;\" #fileUpload [multiple]=\"false\" (change)=\"fileChange($event)\" type=\"file\" >",
|
|
9864
|
+
styles: [""]
|
|
9865
|
+
},] }
|
|
9866
|
+
];
|
|
9867
|
+
AttachmentButtonComponent.ctorParameters = function () { return [
|
|
9868
|
+
{ type: common$1.CDNProvider }
|
|
9869
|
+
]; };
|
|
9870
|
+
AttachmentButtonComponent.propDecorators = {
|
|
9871
|
+
fileInput: [{ type: core.ViewChild, args: ['fileUpload', { static: false },] }],
|
|
9872
|
+
addedAttachment: [{ type: core.Output }]
|
|
9873
|
+
};
|
|
9874
|
+
|
|
9733
9875
|
var COMPONENTS$3 = [
|
|
9734
9876
|
CommentComponent,
|
|
9735
9877
|
CommentViewComponent,
|
|
9736
9878
|
BantaCommentsComponent,
|
|
9737
9879
|
LiveCommentComponent,
|
|
9738
9880
|
CommentFieldComponent,
|
|
9739
|
-
CommentSortComponent
|
|
9881
|
+
CommentSortComponent,
|
|
9882
|
+
AttachmentButtonComponent
|
|
9740
9883
|
];
|
|
9741
9884
|
var CommentsModule = /** @class */ (function () {
|
|
9742
9885
|
function CommentsModule() {
|
|
@@ -10181,6 +10324,7 @@
|
|
|
10181
10324
|
* Generated bundle index. Do not edit.
|
|
10182
10325
|
*/
|
|
10183
10326
|
|
|
10327
|
+
exports.AttachmentButtonComponent = AttachmentButtonComponent;
|
|
10184
10328
|
exports.BANTA_SDK_OPTIONS = BANTA_SDK_OPTIONS;
|
|
10185
10329
|
exports.BantaChatComponent = BantaChatComponent;
|
|
10186
10330
|
exports.BantaCommentsComponent = BantaCommentsComponent;
|