@banta/sdk 4.0.15 → 4.0.18
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 +120 -25
- 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 +21 -9
- package/esm2015/lib/comments/banta-comments/banta-comments.component.js +23 -5
- package/esm2015/lib/comments/comment/comment.component.js +3 -3
- package/esm2015/lib/comments/comment-field/comment-field.component.js +25 -7
- package/esm2015/lib/emoji/emoji-selector-button.component.js +27 -22
- package/esm2015/lib/emoji/emoji-selector-panel/emoji-selector-panel.component.js +1 -1
- package/fesm2015/banta-sdk.js +94 -41
- package/fesm2015/banta-sdk.js.map +1 -1
- package/lib/comments/attachment-button/attachment-button.component.d.ts +3 -2
- package/lib/comments/banta-comments/banta-comments.component.d.ts +9 -3
- package/lib/comments/comment-field/comment-field.component.d.ts +5 -1
- package/lib/emoji/emoji-selector-button.component.d.ts +3 -0
- package/package.json +2 -2
package/bundles/banta-sdk.umd.js
CHANGED
|
@@ -7097,7 +7097,7 @@
|
|
|
7097
7097
|
{ type: core.Component, args: [{
|
|
7098
7098
|
selector: 'emoji-selector-panel',
|
|
7099
7099
|
template: "<div class=\"search-box\" *ngIf=\"searchVisible\">\r\n\t<a mat-icon-button href=\"javascript:;\" (click)=\"hideSearch()\">\r\n\t\t<mat-icon>arrow_back</mat-icon>\r\n\t</a>\r\n\t<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n\t\t<mat-label>Search for emoji</mat-label>\r\n\t\t<input name=\"search\" type=\"text\" matInput placeholder=\"Start typing\" [(ngModel)]=\"searchQuery\" />\r\n\t</mat-form-field>\r\n</div>\r\n\r\n<div class=\"selector\">\r\n\t<ng-container *ngIf=\"searchVisible\">\r\n\t\t<div class=\"emoji-list\">\r\n\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t*ngFor=\"let emoji of searchResults\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t</a>\r\n\t\t</div>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t<div class=\"categories\">\r\n\t\t\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t\t\t<a [title]=\"humanize(category.name)\" [class.active]=\"activeCategory === category.name\" mat-icon-button *ngFor=\"let category of categories\" (click)=\"activeCategory = category.name\">\r\n\t\t\t\t\t<mat-icon>{{category.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\r\n\t\t\t\t<a title=\"Search\" [class.active] mat-icon-button (click)=\"showSearch()\">\r\n\t\t\t\t\t<mat-icon>search</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngFor=\"let category of categories\">\r\n\t\t\t<div class=\"emoji-list\" *ngIf=\"activeCategory && activeCategory == category.name\">\r\n\t\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t\t*ngFor=\"let emoji of category.emojis\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t\t</a>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</div>",
|
|
7100
|
-
styles: [":host{background:#111;color:#fff;border:1px solid #333;border-radius:5px;padding:.5em;width:calc(9*(32px + 1em));max-width:calc(100vw - 1.5em)}.selector{display:flex;flex-direction:column}.categories a{opacity:.25;transition:opacity .4s ease-in-out}.categories a:hover{opacity:.5}.categories a.active{opacity:1}.emoji-list{flex-grow:1;overflow-y:auto;height:20em}.emoji-list a{display:inline-block;padding:2px;margin:4px;background-color:#111}.emoji-list a ::ng-deep .emoji{width:32px;height:32px}.emoji-list a:hover{background-color:#333}.search-box{display:flex;align-items:baseline}.search-box mat-form-field{flex-grow:1}@media (max-width:500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}"]
|
|
7100
|
+
styles: [":host{background:#111;color:#fff;border:1px solid #333;border-radius:5px;padding:.5em;width:calc(9*(32px + 1em));max-width:calc(100vw - 1.5em - 5px)}.selector{display:flex;flex-direction:column}.categories a{opacity:.25;transition:opacity .4s ease-in-out}.categories a:hover{opacity:.5}.categories a.active{opacity:1}.emoji-list{flex-grow:1;overflow-y:auto;height:20em}.emoji-list a{display:inline-block;padding:2px;margin:4px;background-color:#111}.emoji-list a ::ng-deep .emoji{width:32px;height:32px}.emoji-list a:hover{background-color:#333}.search-box{display:flex;align-items:baseline}.search-box mat-form-field{flex-grow:1}@media (max-width:500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}:host-context(.banta-mobile) .selector{flex-direction:row;height:27em}:host-context(.banta-mobile) .emoji-list{height:auto}"]
|
|
7101
7101
|
},] }
|
|
7102
7102
|
];
|
|
7103
7103
|
EmojiSelectorPanelComponent.ctorParameters = function () { return [
|
|
@@ -7107,6 +7107,7 @@
|
|
|
7107
7107
|
selected: [{ type: core.Output }]
|
|
7108
7108
|
};
|
|
7109
7109
|
|
|
7110
|
+
/// <reference types="@types/resize-observer-browser" />
|
|
7110
7111
|
var EmojiSelectorButtonComponent = /** @class */ (function () {
|
|
7111
7112
|
function EmojiSelectorButtonComponent(elementRef) {
|
|
7112
7113
|
this.elementRef = elementRef;
|
|
@@ -7124,6 +7125,11 @@
|
|
|
7124
7125
|
this.removeListener();
|
|
7125
7126
|
this.panelElement.nativeElement.remove();
|
|
7126
7127
|
};
|
|
7128
|
+
Object.defineProperty(EmojiSelectorButtonComponent.prototype, "widthConstrained", {
|
|
7129
|
+
get: function () { return this.width < 700; },
|
|
7130
|
+
enumerable: false,
|
|
7131
|
+
configurable: true
|
|
7132
|
+
});
|
|
7127
7133
|
EmojiSelectorButtonComponent.prototype.ngAfterViewInit = function () {
|
|
7128
7134
|
};
|
|
7129
7135
|
EmojiSelectorButtonComponent.prototype.putPanelAtRoot = function () {
|
|
@@ -7163,11 +7169,30 @@
|
|
|
7163
7169
|
this.showEmojiPanel = true;
|
|
7164
7170
|
//this.place();
|
|
7165
7171
|
setTimeout(function () {
|
|
7166
|
-
|
|
7172
|
+
var onResize = function () {
|
|
7167
7173
|
if (!_this.showEmojiPanel)
|
|
7168
7174
|
return;
|
|
7169
|
-
_this.
|
|
7175
|
+
_this.width = window.innerWidth;
|
|
7176
|
+
_this.height = window.innerHeight;
|
|
7177
|
+
var edgeOffset = 0;
|
|
7178
|
+
var commentField = _this.elementRef.nativeElement.closest("banta-comment-field");
|
|
7179
|
+
if (commentField) {
|
|
7180
|
+
var size = commentField.getBoundingClientRect();
|
|
7181
|
+
_this.width = size.width;
|
|
7182
|
+
edgeOffset = window.innerWidth - size.right;
|
|
7183
|
+
}
|
|
7184
|
+
var buttonRect = _this.buttonElement.nativeElement.getBoundingClientRect();
|
|
7185
|
+
var buttonRight = window.innerWidth - buttonRect.right - edgeOffset - 10;
|
|
7186
|
+
if (_this.width < 700) {
|
|
7187
|
+
_this.panelElement.nativeElement.style.right = -buttonRight + "px";
|
|
7188
|
+
}
|
|
7189
|
+
else {
|
|
7190
|
+
_this.panelElement.nativeElement.style.right = '';
|
|
7191
|
+
}
|
|
7192
|
+
_this.panelElement.nativeElement.style.maxWidth = _this.width - 15 + "px";
|
|
7170
7193
|
};
|
|
7194
|
+
_this.resizeListener = onResize;
|
|
7195
|
+
onResize();
|
|
7171
7196
|
_this.clickListener = function (ev) {
|
|
7172
7197
|
var parent = ev.target;
|
|
7173
7198
|
var isInDialog = false;
|
|
@@ -7194,7 +7219,7 @@
|
|
|
7194
7219
|
{ type: core.Component, args: [{
|
|
7195
7220
|
selector: 'emoji-selector-button',
|
|
7196
7221
|
template: "\n <button #button type=\"button\" mat-icon-button (click)=\"show()\">\n <mat-icon>emoji_emotions</mat-icon>\n </button>\n <emoji-selector-panel \n #panel\n (selected)=\"insert($event)\"\n [class.visible]=\"showEmojiPanel\"\n ></emoji-selector-panel>\n ",
|
|
7197
|
-
styles: ["\n :host {\n display: block;\n position: relative;\n }\n\n emoji-selector-panel {\n position: absolute;\n top: 2.5em;\n right: 0;\n opacity: 0;\n pointer-events: none;\n z-index: 10;\n }\n\n emoji-selector-panel.visible {\n pointer-events: initial;\n opacity: 1;\n }\n\n button {\n color: #666\n }\n
|
|
7222
|
+
styles: ["\n :host {\n display: block;\n position: relative;\n }\n\n emoji-selector-panel {\n position: absolute;\n top: 2.5em;\n right: 0;\n opacity: 0;\n pointer-events: none;\n z-index: 10;\n }\n\n emoji-selector-panel.visible {\n pointer-events: initial;\n opacity: 1;\n }\n\n button {\n color: #666\n }\n "]
|
|
7198
7223
|
},] }
|
|
7199
7224
|
];
|
|
7200
7225
|
EmojiSelectorButtonComponent.ctorParameters = function () { return [
|
|
@@ -7203,7 +7228,8 @@
|
|
|
7203
7228
|
EmojiSelectorButtonComponent.propDecorators = {
|
|
7204
7229
|
selected: [{ type: core.Output }],
|
|
7205
7230
|
panelElement: [{ type: core.ViewChild, args: ['panel', { read: core.ElementRef },] }],
|
|
7206
|
-
buttonElement: [{ type: core.ViewChild, args: ['button', { read: core.ElementRef },] }]
|
|
7231
|
+
buttonElement: [{ type: core.ViewChild, args: ['button', { read: core.ElementRef },] }],
|
|
7232
|
+
widthConstrained: [{ type: core.HostBinding, args: ['class.width-constrained',] }]
|
|
7207
7233
|
};
|
|
7208
7234
|
|
|
7209
7235
|
var COMPONENTS$1 = [
|
|
@@ -8319,8 +8345,8 @@
|
|
|
8319
8345
|
CommentComponent.decorators = [
|
|
8320
8346
|
{ type: core.Component, args: [{
|
|
8321
8347
|
selector: 'banta-comment',
|
|
8322
|
-
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",
|
|
8323
|
-
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}
|
|
8348
|
+
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\" *ngIf=\"message.attachments && message.attachments?.length > 0\">\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\r\n <ul class=\"message-facts small\">\r\n <li *ngIf=\"message.edits?.length > 0\">(Edited)</li>\r\n </ul>\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\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",
|
|
8349
|
+
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;flex-shrink:0}:host .actions banta-timestamp{color:#666;font-size:10pt;flex-shrink:0}.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}.user-tag,:host-context(.mat-dark-theme) .user .display-name,:host-context(.mat-dark-theme) .user .username{color:#fff}.user-tag{text-transform:uppercase;font-size:12px;border:1px solid #b27373;background:#7a412b;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}ul.message-facts.small{display:none}ul.message-facts.small li{margin-top:.5em}ul.message-facts.small li:first-child{border-left:1px solid transparent;margin-left:0;padding-left:0}@media (max-width:400px){.avatar{height:32px;width:32px}.actions ul.message-facts{display:none}ul.message-facts.small{display:initial}:host .actions{margin-left:0;margin-top:.5em}:host .message-content .content{margin-left:44px;margin-right:.5em}}:host-context(.banta-mobile) .avatar{height:32px;width:32px}:host-context(.banta-mobile) .actions ul.message-facts{display:none}:host-context(.banta-mobile) ul.message-facts.small{display:initial}:host-context(.banta-mobile) :host .actions{margin-left:0;margin-top:.5em}:host-context(.banta-mobile) :host .message-content .content{margin-left:44px;margin-right:.5em}"]
|
|
8324
8350
|
},] }
|
|
8325
8351
|
];
|
|
8326
8352
|
CommentComponent.propDecorators = {
|
|
@@ -8664,12 +8690,13 @@
|
|
|
8664
8690
|
* Comments component
|
|
8665
8691
|
*/
|
|
8666
8692
|
var BantaCommentsComponent = /** @class */ (function () {
|
|
8667
|
-
function BantaCommentsComponent(backend, elementRef, activatedRoute, matSnackBar) {
|
|
8693
|
+
function BantaCommentsComponent(backend, elementRef, activatedRoute, matSnackBar, ngZone) {
|
|
8668
8694
|
var _this = this;
|
|
8669
8695
|
this.backend = backend;
|
|
8670
8696
|
this.elementRef = elementRef;
|
|
8671
8697
|
this.activatedRoute = activatedRoute;
|
|
8672
8698
|
this.matSnackBar = matSnackBar;
|
|
8699
|
+
this.ngZone = ngZone;
|
|
8673
8700
|
// Loading Screen
|
|
8674
8701
|
this._loadingMessage = '';
|
|
8675
8702
|
this.loadingMessageVisible = false;
|
|
@@ -8813,8 +8840,27 @@
|
|
|
8813
8840
|
}
|
|
8814
8841
|
}
|
|
8815
8842
|
};
|
|
8843
|
+
Object.defineProperty(BantaCommentsComponent.prototype, "isMobileSized", {
|
|
8844
|
+
get: function () { return this.width < 500; },
|
|
8845
|
+
enumerable: false,
|
|
8846
|
+
configurable: true
|
|
8847
|
+
});
|
|
8848
|
+
BantaCommentsComponent.prototype.ngAfterViewInit = function () {
|
|
8849
|
+
var _this = this;
|
|
8850
|
+
var callback = function () {
|
|
8851
|
+
var size = _this.elementRef.nativeElement.getBoundingClientRect();
|
|
8852
|
+
_this.ngZone.run(function () {
|
|
8853
|
+
_this.width = size.width;
|
|
8854
|
+
_this.height = size.height;
|
|
8855
|
+
});
|
|
8856
|
+
};
|
|
8857
|
+
this.resizeObserver = new ResizeObserver(callback);
|
|
8858
|
+
this.resizeObserver.observe(this.elementRef.nativeElement);
|
|
8859
|
+
callback();
|
|
8860
|
+
};
|
|
8816
8861
|
BantaCommentsComponent.prototype.ngOnDestroy = function () {
|
|
8817
8862
|
this._subs.unsubscribe();
|
|
8863
|
+
this.resizeObserver.disconnect();
|
|
8818
8864
|
};
|
|
8819
8865
|
BantaCommentsComponent.prototype.setSourceFromTopicID = function (topicID) {
|
|
8820
8866
|
return __awaiter(this, void 0, void 0, function () {
|
|
@@ -9366,16 +9412,18 @@
|
|
|
9366
9412
|
{ type: core.Component, args: [{
|
|
9367
9413
|
selector: 'banta-comments',
|
|
9368
9414
|
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 [genericAvatarUrl]=\"genericAvatarUrl\"\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 [genericAvatarUrl]=\"genericAvatarUrl\"\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 [genericAvatarUrl]=\"genericAvatarUrl\"\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 [genericAvatarUrl]=\"genericAvatarUrl\"\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",
|
|
9369
|
-
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}
|
|
9415
|
+
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}.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:500px){.focused .replies{margin-left:0}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}"]
|
|
9370
9416
|
},] }
|
|
9371
9417
|
];
|
|
9372
9418
|
BantaCommentsComponent.ctorParameters = function () { return [
|
|
9373
9419
|
{ type: ChatBackendBase },
|
|
9374
9420
|
{ type: core.ElementRef },
|
|
9375
9421
|
{ type: router.ActivatedRoute },
|
|
9376
|
-
{ type: snackBar.MatSnackBar }
|
|
9422
|
+
{ type: snackBar.MatSnackBar },
|
|
9423
|
+
{ type: core.NgZone }
|
|
9377
9424
|
]; };
|
|
9378
9425
|
BantaCommentsComponent.propDecorators = {
|
|
9426
|
+
isMobileSized: [{ type: core.HostBinding, args: ['class.banta-mobile',] }],
|
|
9379
9427
|
loadingMessages: [{ type: core.Input }],
|
|
9380
9428
|
signInLabel: [{ type: core.Input }],
|
|
9381
9429
|
sendLabel: [{ type: core.Input }],
|
|
@@ -9563,6 +9611,30 @@
|
|
|
9563
9611
|
if (window.innerWidth < 430)
|
|
9564
9612
|
alert(message);
|
|
9565
9613
|
};
|
|
9614
|
+
Object.defineProperty(CommentFieldComponent.prototype, "isValidMessage", {
|
|
9615
|
+
get: function () {
|
|
9616
|
+
return (this.text || this.chatMessageAttachments.length > 0);
|
|
9617
|
+
},
|
|
9618
|
+
enumerable: false,
|
|
9619
|
+
configurable: true
|
|
9620
|
+
});
|
|
9621
|
+
Object.defineProperty(CommentFieldComponent.prototype, "hasPendingAttachments", {
|
|
9622
|
+
get: function () {
|
|
9623
|
+
return this.chatMessageAttachments.some(function (x) { return x.transientState; });
|
|
9624
|
+
},
|
|
9625
|
+
enumerable: false,
|
|
9626
|
+
configurable: true
|
|
9627
|
+
});
|
|
9628
|
+
Object.defineProperty(CommentFieldComponent.prototype, "sendButtonEnabled", {
|
|
9629
|
+
get: function () {
|
|
9630
|
+
return this.canComment
|
|
9631
|
+
&& this.isValidMessage
|
|
9632
|
+
&& !this.hasPendingAttachments
|
|
9633
|
+
&& !this.sending;
|
|
9634
|
+
},
|
|
9635
|
+
enumerable: false,
|
|
9636
|
+
configurable: true
|
|
9637
|
+
});
|
|
9566
9638
|
CommentFieldComponent.prototype.autocomplete = function (replacement) {
|
|
9567
9639
|
return __awaiter(this, void 0, void 0, function () {
|
|
9568
9640
|
var el;
|
|
@@ -9718,7 +9790,7 @@
|
|
|
9718
9790
|
case 1:
|
|
9719
9791
|
_b.trys.push([1, , 7, 8]);
|
|
9720
9792
|
text = (this.text || '').trim();
|
|
9721
|
-
if (
|
|
9793
|
+
if (!this.isValidMessage)
|
|
9722
9794
|
return [2 /*return*/];
|
|
9723
9795
|
message = {
|
|
9724
9796
|
user: this.user,
|
|
@@ -9726,7 +9798,7 @@
|
|
|
9726
9798
|
url: location.href,
|
|
9727
9799
|
likes: 0,
|
|
9728
9800
|
message: text,
|
|
9729
|
-
attachments: this.chatMessageAttachments
|
|
9801
|
+
attachments: this.chatMessageAttachments.filter(function (x) { return x.url; })
|
|
9730
9802
|
};
|
|
9731
9803
|
_b.label = 2;
|
|
9732
9804
|
case 2:
|
|
@@ -9735,6 +9807,7 @@
|
|
|
9735
9807
|
case 3:
|
|
9736
9808
|
_b.sent();
|
|
9737
9809
|
this.text = '';
|
|
9810
|
+
this.chatMessageAttachments = [];
|
|
9738
9811
|
return [3 /*break*/, 6];
|
|
9739
9812
|
case 4:
|
|
9740
9813
|
e_1 = _b.sent();
|
|
@@ -9752,8 +9825,14 @@
|
|
|
9752
9825
|
});
|
|
9753
9826
|
});
|
|
9754
9827
|
};
|
|
9755
|
-
CommentFieldComponent.prototype.addedAttachment = function (
|
|
9756
|
-
this.chatMessageAttachments.push(
|
|
9828
|
+
CommentFieldComponent.prototype.addedAttachment = function (attachment) {
|
|
9829
|
+
this.chatMessageAttachments.push(attachment);
|
|
9830
|
+
};
|
|
9831
|
+
CommentFieldComponent.prototype.attachmentError = function (attachment) {
|
|
9832
|
+
var _this = this;
|
|
9833
|
+
setTimeout(function () {
|
|
9834
|
+
_this.chatMessageAttachments = _this.chatMessageAttachments.filter(function (x) { return x !== attachment; });
|
|
9835
|
+
}, 3000);
|
|
9757
9836
|
};
|
|
9758
9837
|
CommentFieldComponent.prototype.removeAttachment = function (index) {
|
|
9759
9838
|
this.chatMessageAttachments.splice(index, 1);
|
|
@@ -9768,8 +9847,8 @@
|
|
|
9768
9847
|
CommentFieldComponent.decorators = [
|
|
9769
9848
|
{ type: core.Component, args: [{
|
|
9770
9849
|
selector: 'banta-comment-field',
|
|
9771
|
-
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(' + userAvatarUrl + ')'\"\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)\"
|
|
9772
|
-
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;position:relative;z-index:
|
|
9850
|
+
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(' + userAvatarUrl + ')'\"\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 \r\n *ngIf=\"allowAttachments\"\r\n (addedAttachment)=\"addedAttachment($event)\"\r\n (attachmentError)=\"attachmentError($event)\"\r\n ></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\" [class.with-border]=\"!attachment.url\">\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 <ng-container *ngIf=\"attachment.transientState?.error\">\r\n <mat-icon class=\"error\">close</mat-icon>\r\n <em class=\"error\">{{attachment.transientState?.errorMessage || 'Error'}}</em>\r\n </ng-container>\r\n <ng-container *ngIf=\"!attachment.transientState?.error\">\r\n <ng-container *ngIf=\"attachment.transientState?.uploading\">\r\n <mat-spinner></mat-spinner>\r\n <em>Uploading...</em>\r\n </ng-container>\r\n <ng-container *ngIf=\"!attachment.transientState?.uploading\">\r\n <img [src]=\"attachment.url\" alt=\"Message Attachment\">\r\n </ng-container>\r\n </ng-container>\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]=\"!sendButtonEnabled\"\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>",
|
|
9851
|
+
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;position:relative;z-index:20}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end;flex-shrink:0}.avatar-container .avatar{width:48px;height:48px;background:#000;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}}:host-context(.banta-mobile) :host{margin:0}:host-context(.banta-mobile) .avatar-container{width:auto;flex-shrink:0}:host-context(.banta-mobile) .avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host-context(.banta-mobile) button.send{min-width:auto;margin-top:1.5em}:host-context(.banta-mobile) button.send .label{display:none}.message-attachments-container{display:flex;gap:20px}.message-attachments-container .message-attachment{width:300px;position:relative;text-align:center}.message-attachments-container .message-attachment.with-border{outline:1px solid #333;padding:1em 0}.message-attachments-container .message-attachment mat-spinner{display:block;margin:0 auto .5em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.message-attachments-container .message-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}.message-attachments-container .message-attachment .error{color:#b76363}.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}"]
|
|
9773
9852
|
},] }
|
|
9774
9853
|
];
|
|
9775
9854
|
CommentFieldComponent.propDecorators = {
|
|
@@ -9842,11 +9921,15 @@
|
|
|
9842
9921
|
function AttachmentButtonComponent(cdnProvider) {
|
|
9843
9922
|
this.cdnProvider = cdnProvider;
|
|
9844
9923
|
this._addedAttachment = new rxjs.Subject();
|
|
9924
|
+
this._attachmentError = new rxjs.Subject();
|
|
9845
9925
|
}
|
|
9846
9926
|
Object.defineProperty(AttachmentButtonComponent.prototype, "addedAttachment", {
|
|
9847
|
-
get: function () {
|
|
9848
|
-
|
|
9849
|
-
|
|
9927
|
+
get: function () { return this._addedAttachment.asObservable(); },
|
|
9928
|
+
enumerable: false,
|
|
9929
|
+
configurable: true
|
|
9930
|
+
});
|
|
9931
|
+
Object.defineProperty(AttachmentButtonComponent.prototype, "attachmentError", {
|
|
9932
|
+
get: function () { return this._attachmentError.asObservable(); },
|
|
9850
9933
|
enumerable: false,
|
|
9851
9934
|
configurable: true
|
|
9852
9935
|
});
|
|
@@ -9855,7 +9938,7 @@
|
|
|
9855
9938
|
};
|
|
9856
9939
|
AttachmentButtonComponent.prototype.fileChange = function (event) {
|
|
9857
9940
|
return __awaiter(this, void 0, void 0, function () {
|
|
9858
|
-
var element, file, publicURL, e_1;
|
|
9941
|
+
var element, file, publicURL, attachment, e_1;
|
|
9859
9942
|
return __generator(this, function (_a) {
|
|
9860
9943
|
switch (_a.label) {
|
|
9861
9944
|
case 0:
|
|
@@ -9864,6 +9947,16 @@
|
|
|
9864
9947
|
console.log('[Banta] File Added to comment');
|
|
9865
9948
|
file = element.files[0];
|
|
9866
9949
|
publicURL = void 0;
|
|
9950
|
+
attachment = {
|
|
9951
|
+
type: file.type,
|
|
9952
|
+
url: undefined,
|
|
9953
|
+
transientState: {
|
|
9954
|
+
uploading: true,
|
|
9955
|
+
error: false,
|
|
9956
|
+
errorMessage: undefined
|
|
9957
|
+
}
|
|
9958
|
+
};
|
|
9959
|
+
this._addedAttachment.next(attachment);
|
|
9867
9960
|
_a.label = 1;
|
|
9868
9961
|
case 1:
|
|
9869
9962
|
_a.trys.push([1, 3, , 4]);
|
|
@@ -9873,19 +9966,20 @@
|
|
|
9873
9966
|
return [3 /*break*/, 4];
|
|
9874
9967
|
case 3:
|
|
9875
9968
|
e_1 = _a.sent();
|
|
9969
|
+
attachment.transientState.error = true;
|
|
9970
|
+
attachment.transientState.errorMessage = "Failed to upload";
|
|
9876
9971
|
console.error("[Banta] Caught an error while uploading image to CDN:");
|
|
9877
9972
|
console.error(e_1);
|
|
9878
9973
|
alert("Failed to upload image. Please try again later.");
|
|
9974
|
+
this._attachmentError.next(attachment);
|
|
9879
9975
|
return [2 /*return*/];
|
|
9880
9976
|
case 4:
|
|
9881
9977
|
// If no URL was returned, then an error must have occurred. Presumably the CDN
|
|
9882
9978
|
// provider has conveyed an error to the user.
|
|
9883
9979
|
if (!publicURL)
|
|
9884
9980
|
return [2 /*return*/];
|
|
9885
|
-
|
|
9886
|
-
|
|
9887
|
-
url: publicURL
|
|
9888
|
-
});
|
|
9981
|
+
attachment.url = publicURL;
|
|
9982
|
+
attachment.transientState = undefined;
|
|
9889
9983
|
_a.label = 5;
|
|
9890
9984
|
case 5: return [2 /*return*/];
|
|
9891
9985
|
}
|
|
@@ -9906,7 +10000,8 @@
|
|
|
9906
10000
|
]; };
|
|
9907
10001
|
AttachmentButtonComponent.propDecorators = {
|
|
9908
10002
|
fileInput: [{ type: core.ViewChild, args: ['fileUpload', { static: false },] }],
|
|
9909
|
-
addedAttachment: [{ type: core.Output }]
|
|
10003
|
+
addedAttachment: [{ type: core.Output }],
|
|
10004
|
+
attachmentError: [{ type: core.Output }]
|
|
9910
10005
|
};
|
|
9911
10006
|
|
|
9912
10007
|
var COMPONENTS$3 = [
|