Status char counter functionnal #57

src/app/components/create-status/create-status.component.html

@@ -5,7 +5,7 @@
 
     <input [(ngModel)]="title" type="text" class="form-control form-control-sm" name="title" autocomplete="off" placeholder="Title, Content Warning (optional)" title="title, content warning (optional)"/>
 
-    <textarea #reply [(ngModel)]="status" name="status" class="form-control form-control-sm" 
+    <textarea #reply [(ngModel)]="status" name="status" class="form-control form-control-sm status-form__status flexcroll" 
         rows="5" required title="content"
         placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"></textarea>
 
@@ -14,7 +14,7 @@
         <option *ngFor="let p of privacyList" [ngValue]="p">{{p}}</option>
     </select>
     <div class="status-form__counter">
-        <span class="status-form__counter--count">5000</span> <span class="status-form__counter--posts">0/1</span>
+        <span class="status-form__counter--count">{{charCountLeft}}</span> <span class="status-form__counter--posts">{{postCounts - 1}}/{{postCounts}}</span>
     </div>
     <button type="submit" class="btn btn-sm btn-custom-primary" *ngIf="statusReplyingToWrapper">REPLY!</button>
     <button type="submit" class="btn btn-sm btn-custom-primary" *ngIf="!statusReplyingToWrapper">POST!</button>

src/app/components/create-status/create-status.component.scss

@@ -35,11 +35,9 @@ $counter-width: 90px;
     // }
 }
 
-
 .status-form {
     position: relative;
     font-size: $default-font-size;
-
     &__sending {
         position: absolute;
         top: 0px;
@@ -48,12 +46,10 @@ $counter-width: 90px;
         bottom: 4px;
         background-color: rgba($column-color, .75);
         z-index: 2;
-
         &--waiting {
             margin-top: calc(25%);
         }
     }
-
     &__counter {
         display: inline-block;
         border: 1px solid $status-secondary-color;
@@ -62,18 +58,15 @@ $counter-width: 90px;
         height: 32px;
         position: relative;
         top: 0px;
-        padding: 4px 7px 0 7px;
+        padding: 4px 7px 0 7px; // color: lighten($font-link-primary-hover, 10);
-        // color: lighten($font-link-primary-hover, 10);
         // position: relative;
         // overflow: hidden;
-
         &--count {
             // position: absolute;
             // left: 0;
             // overflow: hidden;
             // outline: 1px solid greenyellow;
         }
-
         &--posts {
             // position: absolute;
             // right: 0;
@@ -81,4 +74,18 @@ $counter-width: 90px;
             float: right;
         }
     }
+    &__status {
+        &::-webkit-resizer {
+            // border: 2px solid black;
+            background: $font-link-primary-hover;
+            width: 10px;
+            height: 10px;
+            // box-shadow: 0 0 5px 5px blue;
+            // outline: 2px solid yellow;
+        }
+
+        &::-webkit-scrollbar {
+            width: 12px;
+        }
+    }
 }

src/app/components/create-status/create-status.component.ts

@@ -18,13 +18,15 @@ export class CreateStatusComponent implements OnInit {
 
     private _status: string = '';
     set status(value: string){        
+        this.countStatusChar(value);
         this._status = value;        
-        console.warn(value);
     }
     get status(): string {
         return this._status;
     }
 
+    charCountLeft: number = 500;
+    postCounts: number = 1;
 
     isSending: boolean;
 
@@ -64,6 +66,14 @@ export class CreateStatusComponent implements OnInit {
         }, 0);
     }
 
+    private countStatusChar(status: string){
+        const maxLength = 500;
+        const statusLength = status.length;
+        const mod = statusLength % maxLength;
+        this.charCountLeft = maxLength - mod;
+        this.postCounts = Math.trunc(statusLength/maxLength) + 1;
+    }
+
     private getMentions(status: Status, providerInfo: AccountInfo): string[] {
         const mentions = [...status.mentions.map(x => x.acct), status.account.acct];