@banta/sdk 4.0.4 → 4.0.7
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 +154 -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 +5 -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/index.js +2 -1
- package/esm2015/lib/common/lightbox/lightbox.component.js +28 -0
- package/fesm2015/banta-sdk.js +132 -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 +1 -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/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' },
|
|
@@ -9294,8 +9333,8 @@
|
|
|
9294
9333
|
BantaCommentsComponent.decorators = [
|
|
9295
9334
|
{ type: core.Component, args: [{
|
|
9296
9335
|
selector: 'banta-comments',
|
|
9297
|
-
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 >\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 >\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
|
|
9298
|
-
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%}}"]
|
|
9299
9338
|
},] }
|
|
9300
9339
|
];
|
|
9301
9340
|
BantaCommentsComponent.ctorParameters = function () { return [
|
|
@@ -9312,6 +9351,7 @@
|
|
|
9312
9351
|
permissionDeniedLabel: [{ type: core.Input }],
|
|
9313
9352
|
postCommentLabel: [{ type: core.Input }],
|
|
9314
9353
|
postReplyLabel: [{ type: core.Input }],
|
|
9354
|
+
allowAttachments: [{ type: core.Input }],
|
|
9315
9355
|
fixedHeight: [{ type: core.Input }],
|
|
9316
9356
|
maxMessages: [{ type: core.Input }],
|
|
9317
9357
|
maxVisibleMessages: [{ type: core.Input }],
|
|
@@ -9414,6 +9454,7 @@
|
|
|
9414
9454
|
var CommentFieldComponent = /** @class */ (function () {
|
|
9415
9455
|
function CommentFieldComponent() {
|
|
9416
9456
|
this.canComment = true;
|
|
9457
|
+
this.allowAttachments = false;
|
|
9417
9458
|
this.signInSelected = new rxjs.Subject();
|
|
9418
9459
|
this.editAvatarSelected = new rxjs.Subject();
|
|
9419
9460
|
this.sending = false;
|
|
@@ -9431,6 +9472,7 @@
|
|
|
9431
9472
|
this.autocompleteVisible = false;
|
|
9432
9473
|
this.autocompleteOptions = [];
|
|
9433
9474
|
this.autoCompleteSelected = 0;
|
|
9475
|
+
this.chatMessageAttachments = [];
|
|
9434
9476
|
}
|
|
9435
9477
|
Object.defineProperty(CommentFieldComponent.prototype, "permissionDeniedError", {
|
|
9436
9478
|
get: function () {
|
|
@@ -9476,6 +9518,9 @@
|
|
|
9476
9518
|
_this.expandError = false;
|
|
9477
9519
|
}, 5 * 1000);
|
|
9478
9520
|
}, 100);
|
|
9521
|
+
// On mobile, just show an alert dialog
|
|
9522
|
+
if (window.innerWidth < 430)
|
|
9523
|
+
alert(message);
|
|
9479
9524
|
};
|
|
9480
9525
|
CommentFieldComponent.prototype.autocomplete = function (replacement) {
|
|
9481
9526
|
return __awaiter(this, void 0, void 0, function () {
|
|
@@ -9639,8 +9684,14 @@
|
|
|
9639
9684
|
sentAt: Date.now(),
|
|
9640
9685
|
url: location.href,
|
|
9641
9686
|
likes: 0,
|
|
9642
|
-
message: text
|
|
9687
|
+
message: text,
|
|
9688
|
+
attachments: this.chatMessageAttachments
|
|
9643
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*/];
|
|
9644
9695
|
_a.label = 2;
|
|
9645
9696
|
case 2:
|
|
9646
9697
|
_a.trys.push([2, 4, , 6]);
|
|
@@ -9665,23 +9716,33 @@
|
|
|
9665
9716
|
});
|
|
9666
9717
|
});
|
|
9667
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
|
+
};
|
|
9668
9730
|
return CommentFieldComponent;
|
|
9669
9731
|
}());
|
|
9670
9732
|
CommentFieldComponent.decorators = [
|
|
9671
9733
|
{ type: core.Component, args: [{
|
|
9672
9734
|
selector: 'banta-comment-field',
|
|
9673
|
-
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
|
|
9674
|
-
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}"]
|
|
9675
9737
|
},] }
|
|
9676
9738
|
];
|
|
9677
9739
|
CommentFieldComponent.propDecorators = {
|
|
9678
9740
|
source: [{ type: core.Input }],
|
|
9679
9741
|
user: [{ type: core.Input }],
|
|
9680
9742
|
canComment: [{ type: core.Input }],
|
|
9743
|
+
allowAttachments: [{ type: core.Input }],
|
|
9681
9744
|
signInSelected: [{ type: core.Output }],
|
|
9682
9745
|
editAvatarSelected: [{ type: core.Output }],
|
|
9683
|
-
sendError: [{ type: core.Input }],
|
|
9684
|
-
expandError: [{ type: core.Input }],
|
|
9685
9746
|
sendLabel: [{ type: core.Input }],
|
|
9686
9747
|
sendingLabel: [{ type: core.Input }],
|
|
9687
9748
|
label: [{ type: core.Input }],
|
|
@@ -9731,8 +9792,8 @@
|
|
|
9731
9792
|
CommentSortComponent.decorators = [
|
|
9732
9793
|
{ type: core.Component, args: [{
|
|
9733
9794
|
selector: 'banta-comment-sort',
|
|
9734
|
-
template: "<
|
|
9735
|
-
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%}"]
|
|
9736
9797
|
},] }
|
|
9737
9798
|
];
|
|
9738
9799
|
CommentSortComponent.propDecorators = {
|
|
@@ -9740,13 +9801,85 @@
|
|
|
9740
9801
|
sortChange: [{ type: core.Output }]
|
|
9741
9802
|
};
|
|
9742
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
|
+
|
|
9743
9875
|
var COMPONENTS$3 = [
|
|
9744
9876
|
CommentComponent,
|
|
9745
9877
|
CommentViewComponent,
|
|
9746
9878
|
BantaCommentsComponent,
|
|
9747
9879
|
LiveCommentComponent,
|
|
9748
9880
|
CommentFieldComponent,
|
|
9749
|
-
CommentSortComponent
|
|
9881
|
+
CommentSortComponent,
|
|
9882
|
+
AttachmentButtonComponent
|
|
9750
9883
|
];
|
|
9751
9884
|
var CommentsModule = /** @class */ (function () {
|
|
9752
9885
|
function CommentsModule() {
|
|
@@ -10191,6 +10324,7 @@
|
|
|
10191
10324
|
* Generated bundle index. Do not edit.
|
|
10192
10325
|
*/
|
|
10193
10326
|
|
|
10327
|
+
exports.AttachmentButtonComponent = AttachmentButtonComponent;
|
|
10194
10328
|
exports.BANTA_SDK_OPTIONS = BANTA_SDK_OPTIONS;
|
|
10195
10329
|
exports.BantaChatComponent = BantaChatComponent;
|
|
10196
10330
|
exports.BantaCommentsComponent = BantaCommentsComponent;
|
|
@@ -10213,6 +10347,7 @@
|
|
|
10213
10347
|
exports.EmojiModule = EmojiModule;
|
|
10214
10348
|
exports.EmojiSelectorButtonComponent = EmojiSelectorButtonComponent;
|
|
10215
10349
|
exports.EmojiSelectorPanelComponent = EmojiSelectorPanelComponent;
|
|
10350
|
+
exports.LightboxComponent = LightboxComponent;
|
|
10216
10351
|
exports.LiveChatMessageComponent = LiveChatMessageComponent;
|
|
10217
10352
|
exports.LiveCommentComponent = LiveCommentComponent;
|
|
10218
10353
|
exports.LiveMessageComponent = LiveMessageComponent;
|