@banta/sdk 3.1.2 → 3.2.1
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 +46 -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/banta-comments/banta-comments.component.js +3 -3
- package/esm2015/lib/comments/comment/comment.component.js +3 -3
- package/esm2015/lib/comments/comment-field/comment-field.component.js +17 -7
- package/esm2015/lib/comments/comment-view/comment-view.component.js +3 -3
- package/esm2015/lib/common/chat-backend.service.js +1 -1
- package/esm2015/lib/emoji/emoji-selector-button.component.js +20 -7
- package/esm2015/lib/emoji/emoji-selector-panel/emoji-selector-panel.component.js +3 -3
- package/fesm2015/banta-sdk.js +42 -19
- package/fesm2015/banta-sdk.js.map +1 -1
- package/lib/comments/comment-field/comment-field.component.d.ts +5 -1
- package/lib/common/chat-backend.service.d.ts +1 -0
- package/lib/emoji/emoji-selector-button.component.d.ts +4 -2
- package/package.json +1 -1
|
@@ -18,6 +18,18 @@ export class EmojiSelectorButtonComponent {
|
|
|
18
18
|
}
|
|
19
19
|
removeListener() {
|
|
20
20
|
document.removeEventListener('click', this.clickListener);
|
|
21
|
+
window.removeEventListener('resize', this.resizeListener);
|
|
22
|
+
}
|
|
23
|
+
place() {
|
|
24
|
+
let pos = this.buttonElement.nativeElement.getBoundingClientRect();
|
|
25
|
+
let size = this.panelElement.nativeElement.getBoundingClientRect();
|
|
26
|
+
let left = window.scrollX + pos.left + pos.width - size.width;
|
|
27
|
+
if (left < 0)
|
|
28
|
+
left = (window.scrollX + window.innerWidth) / 2 - size.width / 2;
|
|
29
|
+
Object.assign(this.panelElement.nativeElement.style, {
|
|
30
|
+
top: `${window.scrollY + pos.top + pos.height}px`,
|
|
31
|
+
left: `${Math.max(0, left)}px`
|
|
32
|
+
});
|
|
21
33
|
}
|
|
22
34
|
show() {
|
|
23
35
|
if (this.showEmojiPanel) {
|
|
@@ -25,13 +37,13 @@ export class EmojiSelectorButtonComponent {
|
|
|
25
37
|
return;
|
|
26
38
|
}
|
|
27
39
|
this.showEmojiPanel = true;
|
|
28
|
-
|
|
29
|
-
let size = this.panelElement.nativeElement.getBoundingClientRect();
|
|
30
|
-
Object.assign(this.panelElement.nativeElement.style, {
|
|
31
|
-
top: `${pos.top + pos.height}px`,
|
|
32
|
-
right: `${Math.max(0, window.innerWidth - pos.left - pos.width)}px`
|
|
33
|
-
});
|
|
40
|
+
this.place();
|
|
34
41
|
setTimeout(() => {
|
|
42
|
+
this.resizeListener = () => {
|
|
43
|
+
if (!this.showEmojiPanel)
|
|
44
|
+
return;
|
|
45
|
+
this.place();
|
|
46
|
+
};
|
|
35
47
|
this.clickListener = (ev) => {
|
|
36
48
|
let parent = ev.target;
|
|
37
49
|
let isInDialog = false;
|
|
@@ -46,6 +58,7 @@ export class EmojiSelectorButtonComponent {
|
|
|
46
58
|
this.removeListener();
|
|
47
59
|
};
|
|
48
60
|
document.addEventListener('click', this.clickListener);
|
|
61
|
+
window.addEventListener('resize', this.resizeListener);
|
|
49
62
|
});
|
|
50
63
|
}
|
|
51
64
|
insert(str) {
|
|
@@ -113,4 +126,4 @@ EmojiSelectorButtonComponent.propDecorators = {
|
|
|
113
126
|
panelElement: [{ type: ViewChild, args: ['panel', { read: ElementRef },] }],
|
|
114
127
|
buttonElement: [{ type: ViewChild, args: ['button', { read: ElementRef },] }]
|
|
115
128
|
};
|
|
116
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
129
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW1vamktc2VsZWN0b3ItYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJEOi9EZXYvYXN0cm9uYXV0bGFicy9iYW50YS9wYWNrYWdlcy9mcm9udGVuZC9wcm9qZWN0cy9zZGsvc3JjLyIsInNvdXJjZXMiOlsibGliL2Vtb2ppL2Vtb2ppLXNlbGVjdG9yLWJ1dHRvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6RSxPQUFPLEVBQUUsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLE1BQU0sQ0FBQztBQXdEM0MsTUFBTSxPQUFPLDRCQUE0QjtJQXREekM7UUF3RFksY0FBUyxHQUFHLElBQUksT0FBTyxFQUFVLENBQUM7UUFHMUMsbUJBQWMsR0FBRyxLQUFLLENBQUM7SUF1RjNCLENBQUM7SUFyRkcsSUFDSSxRQUFRO1FBQ1IsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQzFCLENBQUM7SUFRRCxXQUFXO1FBQ1AsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3RCLElBQUksQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLE1BQU0sRUFBRSxDQUFDO0lBQzdDLENBQUM7SUFFRCxlQUFlO1FBQ1gsSUFBSSxJQUFJLEdBQUcsUUFBUSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsY0FBYyxDQUFDLElBQUksUUFBUSxDQUFDLElBQUksQ0FBQztRQUN4RSxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDdEQsQ0FBQztJQUVPLGNBQWM7UUFDbEIsUUFBUSxDQUFDLG1CQUFtQixDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDMUQsTUFBTSxDQUFDLG1CQUFtQixDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsY0FBYyxDQUFD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bnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBPdXRwdXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBTdWJqZWN0LCBPYnNlcnZhYmxlIH0gZnJvbSAncnhqcyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnZW1vamktc2VsZWN0b3ItYnV0dG9uJyxcclxuICAgIHRlbXBsYXRlOiBgXHJcbiAgICAgICAgPGJ1dHRvbiAjYnV0dG9uIHR5cGU9XCJidXR0b25cIiBtYXQtaWNvbi1idXR0b24gKGNsaWNrKT1cInNob3coKVwiPlxyXG4gICAgICAgICAgICA8bWF0LWljb24+ZW1vamlfZW1vdGlvbnM8L21hdC1pY29uPlxyXG4gICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICAgIDxlbW9qaS1zZWxlY3Rvci1wYW5lbCBcclxuICAgICAgICAgICAgI3BhbmVsXHJcbiAgICAgICAgICAgIChzZWxlY3RlZCk9XCJpbnNlcnQoJGV2ZW50KVwiXHJcbiAgICAgICAgICAgIFtjbGFzcy52aXNpYmxlXT1cInNob3dFbW9qaVBhbmVsXCJcclxuICAgICAgICAgICAgPjwvZW1vamktc2VsZWN0b3ItcGFuZWw+XHJcbiAgICBgLFxyXG4gICAgc3R5bGVzOiBbYFxyXG4gICAgICAgIDpob3N0IHtcclxuICAgICAgICAgICAgZGlzcGxheTogYmxvY2s7XHJcbiAgICAgICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIGVtb2ppLXNlbGVjdG9yLXBhbmVsIHtcclxuICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gICAgICAgICAgICAvKiBib3R0b206IDIuNWVtO1xyXG4gICAgICAgICAgICByaWdodDogMDsgKi9cclxuICAgICAgICAgICAgb3BhY2l0eTogMDtcclxuICAgICAgICAgICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XHJcbiAgICAgICAgICAgIHotaW5kZXg6IDEwO1xyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgZW1vamktc2VsZWN0b3ItcGFuZWwudmlzaWJsZSB7XHJcbiAgICAgICAgICAgIHBvaW50ZXItZXZlbnRzOiBpbml0aWFsO1xyXG4gICAgICAgICAgICBvcGFjaXR5OiAxO1xyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgYnV0dG9uIHtcclxuICAgICAgICAgICAgY29sb3I6ICM2NjZcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIC8qIDpob3N0LmJvdHRvbS1sZWZ0IGVtb2ppLXNlbGVjdG9yLXBhbmVsIHtcclxuICAgICAgICAgICAgcmlnaHQ6IGF1dG87XHJcbiAgICAgICAgICAgIGxlZnQ6IDA7XHJcbiAgICAgICAgfVxyXG5cclxuICAgICAgICA6aG9zdC50b3AtcmlnaHQgZW1vamktc2VsZWN0b3ItcGFuZWwge1xyXG4gICAgICAgICAgICB0b3A6IDIuNGVtO1xyXG4gICAgICAgICAgICBib3R0b206IGF1dG87XHJcbiAgICAgICAgfVxyXG5cclxuICAgICAgICA6aG9zdC50b3AtbGVmdCBlbW9qaS1zZWxlY3Rvci1wYW5lbCB7XHJcbiAgICAgICAgICAgIHRvcDogMi40ZW07XHJcbiAgICAgICAgICAgIGJvdHRvbTogYXV0bztcclxuICAgICAgICAgICAgbGVmdDogMDtcclxuICAgICAgICAgICAgcmlnaHQ6IGF1dG87XHJcbiAgICAgICAgfSAqL1xyXG4gICAgYF1cclxufSlcclxuZXhwb3J0IGNsYXNzIEVtb2ppU2VsZWN0b3JCdXR0b25Db21wb25lbnQge1xyXG5cclxuICAgIHByaXZhdGUgX3NlbGVjdGVkID0gbmV3IFN1YmplY3Q8c3RyaW5nPigpO1xyXG4gICAgcHJpdmF0ZSBjbGlja0xpc3RlbmVyIDogYW55O1xyXG4gICAgcHJpdmF0ZSByZXNpemVMaXN0ZW5lciA6IGFueTtcclxuICAgIHNob3dFbW9qaVBhbmVsID0gZmFsc2U7XHJcblxyXG4gICAgQE91dHB1dCgpXHJcbiAgICBnZXQgc2VsZWN0ZWQoKSA6IE9ic2VydmFibGU8c3RyaW5nPiB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMuX3NlbGVjdGVkO1xyXG4gICAgfVxyXG5cclxuICAgIEBWaWV3Q2hpbGQoJ3BhbmVsJywgeyByZWFkOiBFbGVtZW50UmVmIH0pXHJcbiAgICBwYW5lbEVsZW1lbnQgOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PjtcclxuXHJcbiAgICBAVmlld0NoaWxkKCdidXR0b24nLCB7IHJlYWQ6IEVsZW1lbnRSZWYgfSlcclxuICAgIGJ1dHRvbkVsZW1lbnQgOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PjtcclxuXHJcbiAgICBuZ09uRGVzdHJveSgpIHtcclxuICAgICAgICB0aGlzLnJlbW92ZUxpc3RlbmVyKCk7XHJcbiAgICAgICAgdGhpcy5wYW5lbEVsZW1lbnQubmF0aXZlRWxlbWVudC5yZW1vdmUoKTtcclxuICAgIH1cclxuXHJcbiAgICBuZ0FmdGVyVmlld0luaXQoKSB7XHJcbiAgICAgICAgbGV0IHJvb3QgPSBkb2N1bWVudC5ib2R5LnF1ZXJ5U2VsZWN0b3IoJ1tuZy12ZXJzaW9uXScpIHx8IGRvY3VtZW50LmJvZHk7XHJcbiAgICAgICAgcm9vdC5hcHBlbmRDaGlsZCh0aGlzLnBhbmVsRWxlbWVudC5uYXRpdmVFbGVtZW50KTtcclxuICAgIH1cclxuXHJcbiAgICBwcml2YXRlIHJlbW92ZUxpc3RlbmVyKCkge1xyXG4gICAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgdGhpcy5jbGlja0xpc3RlbmVyKTtcclxuICAgICAgICB3aW5kb3cucmVtb3ZlRXZlbnRMaXN0ZW5lcigncmVzaXplJywgdGhpcy5yZXNpemVMaXN0ZW5lcik7XHJcbiAgICB9XHJcblxyXG4gICAgcGxhY2UoKSB7XHJcbiAgICAgICAgbGV0IHBvcyA9IHRoaXMuYnV0dG9uRWxlbWVudC5uYXRpdmVFbGVtZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xyXG4gICAgICAgIGxldCBzaXplID0gdGhpcy5wYW5lbEVsZW1lbnQubmF0aXZlRWxlbWVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcclxuICAgICAgICBsZXQgbGVmdCA9IHdpbmRvdy5zY3JvbGxYICsgcG9zLmxlZnQgKyBwb3Mud2lkdGggLSBzaXplLndpZHRoO1xyXG4gICAgICAgIGlmIChsZWZ0IDwgMClcclxuICAgICAgICAgICAgbGVmdCA9ICh3aW5kb3cuc2Nyb2xsWCArIHdpbmRvdy5pbm5lcldpZHRoKSAvIDIgLSBzaXplLndpZHRoIC8gMjtcclxuXHJcbiAgICAgICAgT2JqZWN0LmFzc2lnbihcclxuICAgICAgICAgICAgdGhpcy5wYW5lbEVsZW1lbnQubmF0aXZlRWxlbWVudC5zdHlsZSxcclxuICAgICAgICAgICAge1xyXG4gICAgICAgICAgICAgICAgdG9wOiBgJHt3aW5kb3cuc2Nyb2xsWSArIHBvcy50b3AgKyBwb3MuaGVpZ2h0fXB4YCxcclxuICAgICAgICAgICAgICAgIGxlZnQ6IGAke01hdGgubWF4KDAsIGxlZnQpfXB4YFxyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgKTtcclxuICAgIH1cclxuXHJcbiAgICBzaG93KCkge1xyXG4gICAgICAgIGlmICh0aGlzLnNob3dFbW9qaVBhbmVsKSB7XHJcbiAgICAgICAgICAgIHRoaXMuc2hvd0Vtb2ppUGFuZWwgPSBmYWxzZTtcclxuICAgICAgICAgICAgcmV0dXJuO1xyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgdGhpcy5zaG93RW1vamlQYW5lbCA9IHRydWU7XHJcbiAgICAgICAgdGhpcy5wbGFjZSgpO1xyXG5cclxuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcclxuICAgICAgICAgICAgdGhpcy5yZXNpemVMaXN0ZW5lciA9ICgpID0+IHtcclxuICAgICAgICAgICAgICAgIGlmICghdGhpcy5zaG93RW1vamlQYW5lbClcclxuICAgICAgICAgICAgICAgICAgICByZXR1cm47XHJcbiAgICAgICAgICAgICAgICB0aGlzLnBsYWNlKCk7XHJcbiAgICAgICAgICAgIH07XHJcblxyXG4gICAgICAgICAgICB0aGlzLmNsaWNrTGlzdGVuZXIgPSAoZXYgOiBNb3VzZUV2ZW50KSA9PiB7XHJcblxyXG4gICAgICAgICAgICAgICAgbGV0IHBhcmVudCA9IDxIVE1MRWxlbWVudD4gZXYudGFyZ2V0O1xyXG4gICAgICAgICAgICAgICAgbGV0IGlzSW5EaWFsb2cgPSBmYWxzZTtcclxuICAgICAgICAgICAgICAgIFxyXG4gICAgICAgICAgICAgICAgd2hpbGUgKHBhcmVudCkge1xyXG4gICAgICAgICAgICAgICAgICAgIGlmIChwYXJlbnQubWF0Y2hlcygnZW1vamktc2VsZWN0b3ItcGFuZWwnKSlcclxuICAgICAgICAgICAgICAgICAgICAgICAgaXNJbkRpYWxvZyA9IHRydWU7XHJcblxyXG4gICAgICAgICAgICAgICAgICAgIHBhcmVudCA9IHBhcmVudC5wYXJlbnRFbGVtZW50O1xyXG4gICAgICAgICAgICAgICAgfVxyXG5cclxuICAgICAgICAgICAgICAgIGlmIChpc0luRGlhbG9nKVxyXG4gICAgICAgICAgICAgICAgICAgIHJldHVybjtcclxuXHJcbiAgICAgICAgICAgICAgICB0aGlzLnNob3dFbW9qaVBhbmVsID0gZmFsc2U7XHJcbiAgICAgICAgICAgICAgICB0aGlzLnJlbW92ZUxpc3RlbmVyKCk7XHJcbiAgICAgICAgICAgIH07XHJcbiAgICBcclxuICAgICAgICAgICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCB0aGlzLmNsaWNrTGlzdGVuZXIpO1xyXG4gICAgICAgICAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcigncmVzaXplJywgdGhpcy5yZXNpemVMaXN0ZW5lcik7XHJcbiAgICAgICAgfSk7XHJcbiAgICB9XHJcblxyXG4gICAgaW5zZXJ0KHN0cikge1xyXG4gICAgICAgIHRoaXMuX3NlbGVjdGVkLm5leHQoc3RyKTtcclxuICAgIH1cclxufSJdfQ==
|
|
@@ -73,8 +73,8 @@ export class EmojiSelectorPanelComponent {
|
|
|
73
73
|
EmojiSelectorPanelComponent.decorators = [
|
|
74
74
|
{ type: Component, args: [{
|
|
75
75
|
selector: 'emoji-selector-panel',
|
|
76
|
-
template: "<
|
|
77
|
-
styles: [":host{background:#111;border:1px solid #333;border-radius:5px;color:#fff;
|
|
76
|
+
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>",
|
|
77
|
+
styles: [":host{background:#111;border:1px solid #333;border-radius:5px;color:#fff;max-width:calc(100vw - 1.5em);padding:.5em;width:calc(288px + 9em)}.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;height:20em;overflow-y:auto}.emoji-list a{background-color:#111;display:inline-block;margin:4px;padding:2px}.emoji-list a ::ng-deep .emoji{height:32px;width:32px}.emoji-list a:hover{background-color:#333}.search-box{align-items:baseline;display:flex}.search-box mat-form-field{flex-grow:1}@media (max-width:500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}"]
|
|
78
78
|
},] }
|
|
79
79
|
];
|
|
80
80
|
EmojiSelectorPanelComponent.ctorParameters = () => [
|
|
@@ -83,4 +83,4 @@ EmojiSelectorPanelComponent.ctorParameters = () => [
|
|
|
83
83
|
EmojiSelectorPanelComponent.propDecorators = {
|
|
84
84
|
selected: [{ type: Output }]
|
|
85
85
|
};
|
|
86
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
86
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW1vamktc2VsZWN0b3ItcGFuZWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IkQ6L0Rldi9hc3Ryb25hdXRsYWJzL2JhbnRhL3BhY2thZ2VzL2Zyb250ZW5kL3Byb2plY3RzL3Nkay9zcmMvIiwic291cmNlcyI6WyJsaWIvZW1vamkvZW1vamktc2VsZWN0b3ItcGFuZWwvZW1vamktc2VsZWN0b3ItcGFuZWwuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlBLE9BQU8sRUFBRSxTQUFTLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzFELE9BQU8sRUFBRSxZQUFZLEVBQVksTUFBTSwyQkFBMkIsQ0FBQztBQUNuRSxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBUy9CLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFPbkMsTUFBTSxPQUFPLDJCQUEyQjtJQUV2QyxZQUNTLFNBQXdCO1FBQXhCLGNBQVMsR0FBVCxTQUFTLENBQWU7UUFJakMsbUJBQWMsR0FBWSxRQUFRLENBQUM7UUFDbkMsa0JBQWEsR0FBVyxFQUFFLENBQUM7UUFDeEIsa0JBQWEsR0FBRyxLQUFLLENBQUM7UUFHakIsYUFBUSxHQUFxQixJQUFJLE9BQU8sRUFBRSxDQUFDO0lBUi9DLENBQUM7SUFZTCxJQUFJLFdBQVc7UUFDZCxPQUFPLElBQUksQ0FBQyxZQUFZLENBQUM7SUFDMUIsQ0FBQztJQUVELElBQUksV0FBVyxDQUFDLEtBQUs7UUFDcEIsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7UUFDMUIsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNmLElBQUksQ0FBQyxhQUFhLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxF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QUM7OztZQTNGRCxTQUFTLFNBQUM7Z0JBQ1YsUUFBUSxFQUFFLHNCQUFzQjtnQkFDaEMsb3NEQUFvRDs7YUFFcEQ7OztZQWhCUSxZQUFZOzs7dUJBNEJuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiZGVjbGFyZSB2YXIgdHdlbW9qaToge1xyXG4gICAgcGFyc2Uoc3RyOiBzdHJpbmcsIG9wdGlvbnM/OiB7IGZvbGRlcjogc3RyaW5nLCBleHQ6IHN0cmluZyB9KTogc3RyaW5nO1xyXG59XHJcblxyXG5pbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IERvbVNhbml0aXplciwgU2FmZUh0bWwgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcclxuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xyXG5cclxuaW50ZXJmYWNlIEVtb2ppIHtcclxuXHRrZXl3b3JkcyA6IHN0cmluZ1tdO1xyXG5cdGNoYXIgOiBzdHJpbmc7XHJcblx0aHRtbD8gOiBTYWZlSHRtbDtcclxuXHRjYXRlZ29yeSA6IHN0cmluZztcclxufVxyXG5cclxuaW1wb3J0IHsgRU1PSklTIH0gZnJvbSAnLi4vZW1vamlzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG5cdHNlbGVjdG9yOiAnZW1vamktc2VsZWN0b3ItcGFuZWwnLFxyXG5cdHRlbXBsYXRlVXJsOiAnLi9lbW9qaS1zZWxlY3Rvci1wYW5lbC5jb21wb25lbnQuaHRtbCcsXHJcblx0c3R5bGVVcmxzOiBbJy4vZW1vamktc2VsZWN0b3ItcGFuZWwuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgRW1vamlTZWxlY3RvclBhbmVsQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcblx0Y29uc3RydWN0b3IoXHJcblx0XHRwcml2YXRlIHNhbml0aXplciA6IERvbVNhbml0aXplclxyXG5cdCkgeyB9XHJcblxyXG5cdGNhdGVnb3JpZXMgOiBhbnlbXTtcclxuXHRhY3RpdmVDYXRlZ29yeSA6IHN0cmluZyA9ICdwZW9wbGUnO1xyXG5cdHNlYXJjaFJlc3VsdHMgOiBhbnlbXSA9IFtdO1xyXG4gICAgc2VhcmNoVmlzaWJsZSA9IGZhbHNlO1xyXG5cdFxyXG5cdEBPdXRwdXQoKVxyXG5cdHByaXZhdGUgc2VsZWN0ZWQgOiBTdWJqZWN0PHN0cmluZz4gPSBuZXcgU3ViamVjdCgpO1xyXG5cclxuXHRwcml2YXRlIF9zZWFyY2hRdWVyeSA6IHN0cmluZztcclxuXHJcblx0Z2V0IHNlYXJjaFF1ZXJ5KCkge1xyXG5cdFx0cmV0dXJuIHRoaXMuX3NlYXJjaFF1ZXJ5O1xyXG5cdH1cclxuXHJcblx0c2V0IHNlYXJjaFF1ZXJ5KHZhbHVlKSB7XHJcblx0XHR0aGlzLl9zZWFyY2hRdWVyeSA9IHZhbHVlO1xyXG5cdFx0c2V0VGltZW91dCgoKSA9PiB7XHJcblx0XHRcdHRoaXMuc2VhcmNoUmVzdWx0cyA9IE9iamVjdC5rZXlzKEVNT0pJUykuZmlsdGVyKGsgPT4gay5pbmNsdWRlcyh2YWx1ZSkpLm1hcChrID0+IEVNT0pJU1trXSk7XHJcblx0XHRcdHRoaXMuc2VhcmNoUmVzdWx0cy5zcGxpY2UoNTAsIHRoaXMuc2VhcmNoUmVzdWx0cy5sZW5ndGgpO1xyXG5cdFx0XHRjb25zb2xlLmxvZyhgbG9va2luZyBmb3IgJyR7dmFsdWV9JyA9PiAke3RoaXMuc2VhcmNoUmVzdWx0cy5sZW5ndGh9IHJlc3VsdHNgKTtcclxuXHRcdH0pO1xyXG5cdH1cclxuXHJcblx0aHVtYW5pemUoc3RyIDogc3RyaW5nKSB7XHJcblx0XHRyZXR1cm4gc3RyLnJlcGxhY2UoLyhefCApW2Etel0vZywgayA9PiBrLnRvVXBwZXJDYXNlKCkpLnJlcGxhY2UoL18vZywgJyAnKTtcclxuXHR9XHJcblxyXG5cdHNlbGVjdChjaGFyIDogc3RyaW5nKSB7XHJcblx0XHR0aGlzLnNlbGVjdGVkLm5leHQoY2hhcik7XHJcblx0fVxyXG5cclxuXHRwYWlycyhvYmplY3QpIHtcclxuXHRcdHJldHVybiBPYmplY3Qua2V5cyhvYmplY3QpLm1hcChrZXkgPT4gW2tleSwgb2JqZWN0W2tleV1dKTtcclxuXHR9XHJcblxyXG5cdGhpZGVTZWFyY2goKSB7XHJcblx0XHQvLyBiZWNhdXNlIG9mIHRoZSBcIm91dHNpZGUgY2xpY2sgZGV0ZWN0aW9uXCJcclxuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcclxuICAgICAgICAgICAgdGhpcy5zZWFyY2hWaXNpYmxlID0gZmFsc2U7XHJcbiAgICAgICAgfSk7XHJcblx0fVxyXG5cdFxyXG4gICAgc2hvd1NlYXJjaCgpIHtcclxuXHRcdC8vIGJlY2F1c2Ugb2YgdGhlIFwib3V0c2lkZSBjbGljayBkZXRlY3Rpb25cIlxyXG4gICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xyXG4gICAgICAgICAgICB0aGlzLnNlYXJjaFZpc2libGUgPSB0cnVlO1xyXG4gICAgICAgIH0pO1xyXG4gICAgfVxyXG5cclxuXHRuZ09uSW5pdCgpIHtcclxuXHJcblx0XHRsZXQgY2F0cyA9IHt9O1xyXG5cdFx0bGV0IGNhdGVnb3J5SWNvbnMgPSB7XHJcblx0XHRcdHN5bWJvbHM6ICd3YXJuaW5nJyxcclxuXHRcdFx0cGVvcGxlOiAncGVvcGxlJyxcclxuXHRcdFx0YW5pbWFsc19hbmRfbmF0dXJlOiAnbmF0dXJlJyxcclxuXHRcdFx0dHJhdmVsX2FuZF9wbGFjZXM6ICdsb2NhdGlvbl9vbicsXHJcblx0XHRcdGFjdGl2aXR5OiAnbG9jYWxfYWN0aXZpdHknLFxyXG5cdFx0XHRmb29kX2FuZF9kcmluazogJ3Jlc3RhdXJhbnQnLFxyXG5cdFx0XHRvYmplY3RzOiAnY29tcHV0ZXInLFxyXG5cdFx0XHRmbGFnczogJ2ZsYWcnXHJcblx0XHR9O1xyXG5cdFx0Zm9yIChsZXQgcGFpciBvZiB0aGlzLnBhaXJzKEVNT0pJUykpIHtcclxuXHRcdFx0bGV0IG5hbWUgPSBwYWlyWzBdO1xyXG5cdFx0XHRsZXQgZW1vamkgOiBFbW9qaSA9IHBhaXJbMV07XHJcblxyXG5cdFx0XHRpZiAoIWNhdHNbZW1vamkuY2F0ZWdvcnldKSB7XHJcblx0XHRcdFx0Y2F0c1tlbW9qaS5jYXRlZ29yeV0gPSB7XHJcblx0XHRcdFx0XHRuYW1lOiBlbW9qaS5jYXRlZ29yeSxcclxuXHRcdFx0XHRcdGljb246IGNhdGVnb3J5SWNvbnNbZW1vamkuY2F0ZWdvcnldIHx8ICdjb2RlJyxcclxuXHRcdFx0XHRcdGVtb2ppczogW11cclxuXHRcdFx0XHR9XHJcblx0XHRcdH1cclxuXHJcblx0XHRcdGVtb2ppLmh0bWwgPSB0aGlzLnNhbml0aXplci5ieXBhc3NTZWN1cml0eVRydXN0SHRtbCh0d2Vtb2ppLnBhcnNlKGVtb2ppLmNoYXIgfHwgJycpKTtcclxuXHJcblx0XHRcdGNhdHNbZW1vamkuY2F0ZWdvcnldLmVtb2ppcy5wdXNoKGVtb2ppKTtcclxuXHRcdH1cclxuXHJcblx0XHR0aGlzLmNhdGVnb3JpZXMgPSB0aGlzLnBhaXJzKGNhdHMpLm1hcChwYWlyID0+IHBhaXJbMV0pO1xyXG5cdH1cclxuXHJcbn1cclxuIl19
|
package/fesm2015/banta-sdk.js
CHANGED
|
@@ -6753,8 +6753,8 @@ class EmojiSelectorPanelComponent {
|
|
|
6753
6753
|
EmojiSelectorPanelComponent.decorators = [
|
|
6754
6754
|
{ type: Component, args: [{
|
|
6755
6755
|
selector: 'emoji-selector-panel',
|
|
6756
|
-
template: "<
|
|
6757
|
-
styles: [":host{background:#111;border:1px solid #333;border-radius:5px;color:#fff;
|
|
6756
|
+
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>",
|
|
6757
|
+
styles: [":host{background:#111;border:1px solid #333;border-radius:5px;color:#fff;max-width:calc(100vw - 1.5em);padding:.5em;width:calc(288px + 9em)}.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;height:20em;overflow-y:auto}.emoji-list a{background-color:#111;display:inline-block;margin:4px;padding:2px}.emoji-list a ::ng-deep .emoji{height:32px;width:32px}.emoji-list a:hover{background-color:#333}.search-box{align-items:baseline;display:flex}.search-box mat-form-field{flex-grow:1}@media (max-width:500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}"]
|
|
6758
6758
|
},] }
|
|
6759
6759
|
];
|
|
6760
6760
|
EmojiSelectorPanelComponent.ctorParameters = () => [
|
|
@@ -6782,6 +6782,18 @@ class EmojiSelectorButtonComponent {
|
|
|
6782
6782
|
}
|
|
6783
6783
|
removeListener() {
|
|
6784
6784
|
document.removeEventListener('click', this.clickListener);
|
|
6785
|
+
window.removeEventListener('resize', this.resizeListener);
|
|
6786
|
+
}
|
|
6787
|
+
place() {
|
|
6788
|
+
let pos = this.buttonElement.nativeElement.getBoundingClientRect();
|
|
6789
|
+
let size = this.panelElement.nativeElement.getBoundingClientRect();
|
|
6790
|
+
let left = window.scrollX + pos.left + pos.width - size.width;
|
|
6791
|
+
if (left < 0)
|
|
6792
|
+
left = (window.scrollX + window.innerWidth) / 2 - size.width / 2;
|
|
6793
|
+
Object.assign(this.panelElement.nativeElement.style, {
|
|
6794
|
+
top: `${window.scrollY + pos.top + pos.height}px`,
|
|
6795
|
+
left: `${Math.max(0, left)}px`
|
|
6796
|
+
});
|
|
6785
6797
|
}
|
|
6786
6798
|
show() {
|
|
6787
6799
|
if (this.showEmojiPanel) {
|
|
@@ -6789,13 +6801,13 @@ class EmojiSelectorButtonComponent {
|
|
|
6789
6801
|
return;
|
|
6790
6802
|
}
|
|
6791
6803
|
this.showEmojiPanel = true;
|
|
6792
|
-
|
|
6793
|
-
let size = this.panelElement.nativeElement.getBoundingClientRect();
|
|
6794
|
-
Object.assign(this.panelElement.nativeElement.style, {
|
|
6795
|
-
top: `${pos.top + pos.height}px`,
|
|
6796
|
-
right: `${Math.max(0, window.innerWidth - pos.left - pos.width)}px`
|
|
6797
|
-
});
|
|
6804
|
+
this.place();
|
|
6798
6805
|
setTimeout(() => {
|
|
6806
|
+
this.resizeListener = () => {
|
|
6807
|
+
if (!this.showEmojiPanel)
|
|
6808
|
+
return;
|
|
6809
|
+
this.place();
|
|
6810
|
+
};
|
|
6799
6811
|
this.clickListener = (ev) => {
|
|
6800
6812
|
let parent = ev.target;
|
|
6801
6813
|
let isInDialog = false;
|
|
@@ -6810,6 +6822,7 @@ class EmojiSelectorButtonComponent {
|
|
|
6810
6822
|
this.removeListener();
|
|
6811
6823
|
};
|
|
6812
6824
|
document.addEventListener('click', this.clickListener);
|
|
6825
|
+
window.addEventListener('resize', this.resizeListener);
|
|
6813
6826
|
});
|
|
6814
6827
|
}
|
|
6815
6828
|
insert(str) {
|
|
@@ -7683,8 +7696,8 @@ class CommentComponent {
|
|
|
7683
7696
|
CommentComponent.decorators = [
|
|
7684
7697
|
{ type: Component, args: [{
|
|
7685
7698
|
selector: 'banta-comment',
|
|
7686
|
-
template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"report()\">Report</button>\r\n <button mat-menu-item>Help</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)=\"selectUser()\"\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)=\"selectUser()\">@{{message.user.username}}</a>\r\n
|
|
7687
|
-
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;padding:.5em;position:relative;visibility:hidden}:host.new{-webkit-animation-duration:.4s;-webkit-animation-fill-mode:both;-webkit-animation-name:comment-appear;animation-duration:.4s;animation-fill-mode:both;animation-name:comment-appear}:host.new,:host.visible{visibility:visible}:host:hover{background:#eee}:host .message-content .content{margin-left:
|
|
7699
|
+
template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"report()\">Report</button>\r\n <button mat-menu-item>Help</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)=\"selectUser()\"\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)=\"selectUser()\">@{{message.user.username}}</a>\r\n </div>\r\n <div class=\"content\">\r\n {{message.message}}\r\n </div>\r\n \r\n <div class=\"actions\">\r\n <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\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 || 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\">\r\n <div class=\"count-indicator\"> \r\n {{message.upvotes}}\r\n </div>\r\n <button mat-icon-button matTooltip=\"Upvote\" matTooltipPosition=\"below\" (click)=\"upvote()\">\r\n <mat-icon [inline]=\"true\">thumb_up</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",
|
|
7700
|
+
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;padding:.5em;position:relative;visibility:hidden}:host.new{-webkit-animation-duration:.4s;-webkit-animation-fill-mode:both;-webkit-animation-name:comment-appear;animation-duration:.4s;animation-fill-mode:both;animation-name:comment-appear}:host.new,:host.visible{visibility:visible}:host:hover{background:#eee}:host .message-content .content{margin-left:60px;margin-right:.5em}:host.abbreviated .message-content .content{max-height:8.5em;overflow-y:hidden;text-overflow:ellipsis}:host .actions{align-items:center;display:flex;margin-left:60px;padding-right:10px}:host .actions button{color:#666}:host .actions banta-timestamp{color:#666;font-size:10pt}.user{align-items:center;display:flex;margin:1em 0 0;position:relative}.user .display-name,.user .username{color:#000;display:block;flex-grow:0;flex-shrink:1;font-size:10pt;margin:0 auto 0 0;max-width:100%;overflow:hidden;padding:0 0 0 1em;position:relative;text-overflow:ellipsis;white-space:nowrap;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:1}.user .display-name.username,.user .username.username{color:#666;flex-grow:1;flex-shrink:0}.avatar{background-color:#333;background-position:50%;background-size:cover;border-radius:100%;flex-grow:0;flex-shrink:0;height:48px;width:48px}.counted-action{align-items:center;display:flex}.count-indicator{color:#666;font-size:9pt;padding:0 0 0 3px}: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}}"]
|
|
7688
7701
|
},] }
|
|
7689
7702
|
];
|
|
7690
7703
|
CommentComponent.propDecorators = {
|
|
@@ -7866,8 +7879,8 @@ class CommentViewComponent {
|
|
|
7866
7879
|
CommentViewComponent.decorators = [
|
|
7867
7880
|
{ type: Component, args: [{
|
|
7868
7881
|
selector: 'banta-comment-view',
|
|
7869
|
-
template: "<div class=\"message-container\">\r\n <ng-content select=\"[data-before]\"></ng-content>\r\n \r\n <a mat-button class=\"nav\" [class.visible]=\"isViewingMore\" href=\"javascript:;\" (click)=\"showNew()\">\r\n
|
|
7870
|
-
styles: [":host{display:flex;flex-direction:column;flex-grow:1;opacity:1;transition:opacity .2s ease-in}.message-container{background:#fff;color:#111;flex-grow:1;opacity:1;overflow-x:hidden;padding:.5em 1em
|
|
7882
|
+
template: "<div class=\"message-container\">\r\n <ng-content select=\"[data-before]\"></ng-content>\r\n \r\n <a mat-button class=\"nav\" [class.visible]=\"isViewingMore\" href=\"javascript:;\" (click)=\"showNew()\">\r\n <mat-icon>file_upload</mat-icon>\r\n New\r\n <ng-container *ngIf=\"newMessages.length >= 1\">\r\n ({{newMessages.length}})\r\n </ng-container>\r\n </a>\r\n\r\n <ng-container *ngIf=\"messages.length === 0\">\r\n <div class=\"empty-state\" *ngIf=\"showEmptyState\">\r\n Be the first to comment!\r\n </div>\r\n </ng-container>\r\n <banta-comment \r\n *ngFor=\"let message of messages; trackBy: messageIdentity\"\r\n class=\"abbreviated\"\r\n [message]=\"message\"\r\n (click)=\"isViewingMore = true\"\r\n [showReplyAction]=\"allowReplies\"\r\n (userSelected)=\"selectMessageUser(message)\"\r\n (upvoted)=\"upvoteMessage(message)\"\r\n (reported)=\"reportMessage(message)\"\r\n (selected)=\"selectMessage(message)\"\r\n ></banta-comment>\r\n\r\n <a mat-button class=\"nav\" [class.visible]=\"hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show more</a>\r\n\r\n <div class=\"loading-more\" *ngIf=\"isLoadingMore\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n\r\n <!-- <div style=\"color: #666\">\r\n n={{newMessages.length}}, m={{messages.length}}, o={{olderMessages.length}},\r\n v={{maxVisibleMessages}}, M={{maxMessages}}\r\n </div> -->\r\n\r\n <ng-content select=\":not([data-before])\"></ng-content>\r\n</div>",
|
|
7883
|
+
styles: [":host{display:flex;flex-direction:column;flex-grow:1;opacity:1;transition:opacity .2s ease-in}.message-container{background:#fff;color:#111;flex-grow:1;opacity:1;overflow-x:hidden;padding:.5em 1em 3em .5em;position:relative;transition:opacity .5s ease-in-out}.message-container.no-scroll{height:auto;overflow-y:visible}.message-container.faded{opacity:.25}.message-container .overlay{bottom:0;left:0;position:absolute;right:0;top:0;z-index:10}:host.fixed-height .message-container{overflow-y:auto}:host-context(.mat-dark-theme) .message-container{background:#111;color:#fff}.empty-state{color:#666;margin:3em;text-align:center}:host-context(.mat-dark-theme) .empty-state{color:#666}a.nav{background:#222;border-radius:2em;opacity:0;pointer-events:none;position:absolute;right:.5em;text-align:center;transition:opacity .4s ease-in-out;z-index:10}a.nav.visible{opacity:1;pointer-events:auto}.loading-more{margin:0 auto;padding:2em;text-align:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (max-width:400px){.message-container{padding:0 0 3em}}"]
|
|
7871
7884
|
},] }
|
|
7872
7885
|
];
|
|
7873
7886
|
CommentViewComponent.ctorParameters = () => [
|
|
@@ -8118,8 +8131,8 @@ class BantaCommentsComponent {
|
|
|
8118
8131
|
BantaCommentsComponent.decorators = [
|
|
8119
8132
|
{ type: Component, args: [{
|
|
8120
8133
|
selector: 'banta-comments',
|
|
8121
|
-
template: "\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 ></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 ></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]=\"canComment\"\r\n [signInLabel]=\"signInLabel\"\r\n [user]=\"user\"\r\n [label]=\"postReplyLabel\"\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]=\"canComment\"\r\n [hashtags]=\"hashtags\"\r\n [participants]=\"participants\"\r\n [label]=\"postCommentLabel\"\r\n (editAvatarSelected)=\"showEditAvatar()\"\r\n (signInSelected)=\"showSignIn()\"\r\n ></banta-comment-field>\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 (selected)=\"selectMessage($event)\"\r\n (upvoted)=\"upvoteMessage($event)\"\r\n (reported)=\"reportMessage($event)\"\r\n ></banta-comment-view>\r\n</div>",
|
|
8122
|
-
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-duration:.4s;-webkit-animation-fill-mode:both;-webkit-animation-name:select-comment;animation-duration:.4s;animation-fill-mode:both;animation-name:select-comment}.focused .replies{margin-left:4em;margin-top:1em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;margin:0 auto;min-height:16em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.main.hidden{display:none}"]
|
|
8134
|
+
template: "\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 ></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 ></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]=\"canComment\"\r\n [signInLabel]=\"signInLabel\"\r\n [permissionDeniedLabel]=\"permissionDeniedLabel\"\r\n (permissionDeniedError)=\"showPermissionDenied()\"\r\n [user]=\"user\"\r\n [label]=\"postReplyLabel\"\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]=\"canComment\"\r\n [hashtags]=\"hashtags\"\r\n [participants]=\"participants\"\r\n [label]=\"postCommentLabel\"\r\n (editAvatarSelected)=\"showEditAvatar()\"\r\n (signInSelected)=\"showSignIn()\"\r\n [permissionDeniedLabel]=\"permissionDeniedLabel\"\r\n (permissionDeniedError)=\"showPermissionDenied()\"\r\n ></banta-comment-field>\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 (selected)=\"selectMessage($event)\"\r\n (upvoted)=\"upvoteMessage($event)\"\r\n (reported)=\"reportMessage($event)\"\r\n ></banta-comment-view>\r\n</div>",
|
|
8135
|
+
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-duration:.4s;-webkit-animation-fill-mode:both;-webkit-animation-name:select-comment;animation-duration:.4s;animation-fill-mode:both;animation-name:select-comment}.focused .replies{margin-left:4em;margin-top:1em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;margin:0 auto;min-height:16em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.main.hidden{display:none}@media (max-width:500px){.focused .replies{margin-left:0}}"]
|
|
8123
8136
|
},] }
|
|
8124
8137
|
];
|
|
8125
8138
|
BantaCommentsComponent.ctorParameters = () => [
|
|
@@ -8233,22 +8246,30 @@ class CommentFieldComponent {
|
|
|
8233
8246
|
this.label = 'Post a comment';
|
|
8234
8247
|
this.permissionDeniedLabel = 'Unavailable';
|
|
8235
8248
|
this.signInLabel = 'Sign In';
|
|
8249
|
+
this.placeholder = '';
|
|
8236
8250
|
this.participants = [];
|
|
8251
|
+
this._permissionDeniedError = new Subject();
|
|
8237
8252
|
this.autocompleteVisible = false;
|
|
8238
8253
|
this.autocompleteOptions = [];
|
|
8239
8254
|
this.autoCompleteSelected = 0;
|
|
8240
8255
|
}
|
|
8256
|
+
get permissionDeniedError() {
|
|
8257
|
+
return this._permissionDeniedError;
|
|
8258
|
+
}
|
|
8241
8259
|
ngAfterViewInit() {
|
|
8242
8260
|
let root = document.body.querySelector('[ng-version]') || document.body;
|
|
8243
8261
|
root.appendChild(this.autocompleteEl.nativeElement);
|
|
8244
8262
|
}
|
|
8263
|
+
showPermissionDenied() {
|
|
8264
|
+
this._permissionDeniedError.next();
|
|
8265
|
+
}
|
|
8245
8266
|
showAutoComplete(options) {
|
|
8246
8267
|
this.autoCompleteSelected = 0;
|
|
8247
8268
|
this.autocompleteOptions = options;
|
|
8248
8269
|
let pos = this.autocompleteContainerEl.nativeElement.getBoundingClientRect();
|
|
8249
8270
|
let size = this.autocompleteEl.nativeElement.getBoundingClientRect();
|
|
8250
|
-
this.autocompleteEl.nativeElement.style.left = `${pos.left}px`;
|
|
8251
|
-
this.autocompleteEl.nativeElement.style.top = `${pos.top}px`;
|
|
8271
|
+
this.autocompleteEl.nativeElement.style.left = `${window.scrollX + pos.left}px`;
|
|
8272
|
+
this.autocompleteEl.nativeElement.style.top = `${window.scrollY + pos.top}px`;
|
|
8252
8273
|
this.autocompleteEl.nativeElement.style.width = `${pos.width}px`;
|
|
8253
8274
|
this.autocompleteVisible = true;
|
|
8254
8275
|
}
|
|
@@ -8429,8 +8450,8 @@ class CommentFieldComponent {
|
|
|
8429
8450
|
CommentFieldComponent.decorators = [
|
|
8430
8451
|
{ type: Component, args: [{
|
|
8431
8452
|
selector: 'banta-comment-field',
|
|
8432
|
-
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 <mat-label>{{label}}</mat-label>\r\n <textarea \r\n #textarea\r\n name=\"message\" \r\n placeholder=\"
|
|
8433
|
-
styles: ["@-webkit-keyframes comment-field-appear{0%{opacity:0;transform:translateY(128px)}to{opacity:1;transform:translate(0)}}@keyframes comment-field-appear{0%{opacity:0;transform:translateY(128px)}to{opacity:1;transform:translate(0)}}:host{-webkit-animation-delay:.4s;-webkit-animation-duration:.8s;-webkit-animation-fill-mode:both;-webkit-animation-name:comment-field-appear;animation-delay:.4s;animation-duration:.8s;animation-fill-mode:both;animation-name:comment-field-appear;display:block;margin:0 2em 0 0}.avatar-container{display:flex;justify-content:flex-end;width:calc(48px + 1.75em)}.avatar-container .avatar{background:pink;background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:100%;height:48px;margin-right:.75em;margin-top:.75em;width:48px}form{align-items:center;display:flex;padding:.5em
|
|
8453
|
+
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 <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 #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\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 </div>\r\n\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\">\r\n <mat-icon *ngIf=\"sendError\">error</mat-icon>\r\n {{sendError.message}}\r\n </div>\r\n <emoji-selector-button \r\n class=\"top-right\"\r\n (selected)=\"insertEmoji($event)\"\r\n ></emoji-selector-button>\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 *ngIf=\"canComment\"\r\n mat-raised-button \r\n class=\"send\"\r\n color=\"primary\"\r\n [disabled]=\"!text || sending\" \r\n >\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 <span class=\"label\">\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 </span>\r\n\r\n </button>\r\n <button \r\n *ngIf=\"!canComment\"\r\n type=\"button\"\r\n (click)=\"showPermissionDenied()\"\r\n mat-raised-button \r\n color=\"primary\"\r\n >{{permissionDeniedLabel}}</button>\r\n </ng-container>\r\n </div>\r\n</form>\r\n",
|
|
8454
|
+
styles: ["@-webkit-keyframes comment-field-appear{0%{opacity:0;transform:translateY(128px)}to{opacity:1;transform:translate(0)}}@keyframes comment-field-appear{0%{opacity:0;transform:translateY(128px)}to{opacity:1;transform:translate(0)}}:host{-webkit-animation-delay:.4s;-webkit-animation-duration:.8s;-webkit-animation-fill-mode:both;-webkit-animation-name:comment-field-appear;animation-delay:.4s;animation-duration:.8s;animation-fill-mode:both;animation-name:comment-field-appear;display:block;margin:0 2em 0 0}.avatar-container{display:flex;justify-content:flex-end;width:calc(48px + 1.75em)}.avatar-container .avatar{background:pink;background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:100%;height:48px;margin-right:.75em;margin-top:.75em;width:48px}form{align-items:center;display:flex;padding:.5em}form .text-container{display:flex;flex-grow:1;position:relative}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-form-field{margin-bottom:1em}form .text-container emoji-selector-button{bottom:0;position:absolute;right:0}form .text-container .error-message,form .text-container mat-spinner.loading{bottom:.5em;left:.5em;position:absolute}form .text-container .error-message{color:#683333;max-width:1.5em;overflow-x:hidden;transition:max-width 2s ease-in-out;white-space:nowrap}form .text-container .error-message.expanded,form .text-container .error-message:hover{max-width:100%}form .text-container .error-message mat-icon{vertical-align:middle}form input[type=text]{background:#000;border:1px solid #333;color:#fff;height:1em;width:100%}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}form.new-message{align-items:flex-start;display:flex}form.new-message .field-container{display:flex;flex-direction:column;flex-grow:1}form.new-message mat-form-field{width:100%}form.new-message button{margin:1.25em 0 0}button.send{min-width:9em}textarea{max-height:7em}.autocomplete-container{pointer-events:none;position:relative;top:-2em;width:calc(100% - 2em)}.autocomplete{background:#333;display:flex;flex-direction:column;padding:.5em;pointer-events:none;position:absolute;visibility:hidden;z-index:100}.autocomplete.visible{pointer-events:auto;visibility:visible}.autocomplete a{text-align:left;width:100%}.autocomplete a.active{background:#555}@media (max-width:500px){:host{margin:0}.avatar-container{width:auto}.avatar-container .avatar{height:32px;margin-top:1.5em;width:32px}button.send{margin-top:1.5em;min-width:auto}button.send .label{display:none}}"]
|
|
8434
8455
|
},] }
|
|
8435
8456
|
];
|
|
8436
8457
|
CommentFieldComponent.propDecorators = {
|
|
@@ -8444,11 +8465,13 @@ CommentFieldComponent.propDecorators = {
|
|
|
8444
8465
|
label: [{ type: Input }],
|
|
8445
8466
|
permissionDeniedLabel: [{ type: Input }],
|
|
8446
8467
|
signInLabel: [{ type: Input }],
|
|
8468
|
+
placeholder: [{ type: Input }],
|
|
8447
8469
|
autocompleteEl: [{ type: ViewChild, args: ['autocomplete',] }],
|
|
8448
8470
|
autocompleteContainerEl: [{ type: ViewChild, args: ['autocompleteContainer',] }],
|
|
8449
8471
|
textareaEl: [{ type: ViewChild, args: ['textarea',] }],
|
|
8450
8472
|
hashtags: [{ type: Input }],
|
|
8451
|
-
participants: [{ type: Input }]
|
|
8473
|
+
participants: [{ type: Input }],
|
|
8474
|
+
permissionDeniedError: [{ type: Output }]
|
|
8452
8475
|
};
|
|
8453
8476
|
|
|
8454
8477
|
const COMPONENTS$3 = [
|