chattigo-webkit 1.19.7

Emoji Button

Ver Ejemplo en CodePen

Implementacion Html

Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       
    </style>
     <script src="https://cdn.jsdelivr.net/npm/emoji-button@latest/dist/index.min.js"></script>
     <link rel="stylesheet" href="./styles.css">
     <link href="https://feature-analytics-layout--chattigo-webkit.netlify.com/css/chattigo.css" rel="stylesheet">
</head>
<body>
    <div class="l-main">
        <!-- start nav -->
        <nav class="l-main__side-menu">
          <a class="l-main__side-menu--close-icon">
            <span class="icon-close"></span>
          </a>
          
          <!-- menu options -->
          <ul class="c-sidebar-menu">
            <div class="c-sidebar-menu__logo">
              <img class="c-sidebar-menu__logo--image" src="https://cdn.chattigo.com/assets/img/logo-white.svg" alt="logo"/>
            </div>
            
            <li class="c-sidebar-menu__item">
              <span class="c-sidebar-menu__icon icon-emoji"></span>
              
              <span class="c-sidebar-menu__label">
                Agente
              </span>
            </li>
            
            <li class="c-sidebar-menu__item">
              <span class="c-sidebar-menu__icon icon-message-visible"></span>
              
              <span class="c-sidebar-menu__label">
                Supervisor
              </span>
            </li>
      
            <hr />
            
            <li class="c-sidebar-menu__item">
              <span class="c-sidebar-menu__icon icon-config"></span>
              
              <span class="c-sidebar-menu__label">
                Configuración
              </span>
            </li>
            
            <li class="c-sidebar-menu__item c-sidebar-menu__item--active">
              <span class="c-sidebar-menu__icon icon-reports"></span>
              
              <span class="c-sidebar-menu__label">
                Analítica
              </span>
            </li>
            
            <li class="c-sidebar-menu__item c-sidebar-menu__item--user-logged-in">
              <div class="c-sidebar-menu__user">
                <img class="c-sidebar-menu__user--image" src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png"/>
              </div>
              
              <span class="c-sidebar-menu__label">
                User Name User Name User Name User Name User Name
              </span>
            </li>
            
            <li class="c-sidebar-menu__item c-sidebar-menu__item--log-out">
              <span class="c-sidebar-menu__icon icon-logout"></span>
              
              <span class="c-sidebar-menu__label">
                Cerrar Sesión
              </span>
            </li>
          </ul>
        </nav>
        <!-- Fin nav -->
        
        <!-- Contenido -->
        <!-- el modificador --two-halfs es la clave -->
        <div class="l-main__content l-main__content--two-halfs">
          <header class="l-dashboard__header">
            <h3 class="l-dashboard__header--title">
              Emoji-button
              
              <a class="l-main__side-menu--open-icon">
                <span class="icon-sidebar"></span>
              </a>
            </h3>
          </header>
          
          <!-- wrapper para ordenar las card en columnas -->
          <div class="l-main__content--wrapper">
            <div class="c-section-card">
              <div class="c-section-card__header">
                <label class="c-section-card__header--label">
                <div class="container">
                    <textarea class="textarea"></textarea>
                </div>
                <div class="c-send-message widget-send-message-box-js">    
                <textarea id="chatText" class="c-input c-send-message__input widget-message-input-js" placeholder="Envía un mensaje..."></textarea>
                
                <div class="c-send-message__actions">
                    <a href="#">
                    <span class="icon-attachment"></span>
                    </a>
                    <a href="#" id="emoji">
                    <span class="icon-emoji"></span>
                    </a>
                    <a class="c-send-button" href="#">
                    <span class="icon-send"></span>
                    </a>
                </div>
                </div>
                </label>
              </div>
              
              <div class="c-section-card__content">
                <!-- ejemplo de tabs -->
                
              </div>
            </div>
            
          
          </div>
          
          <!-- wrapper para ordenar las card en columnas -->
          <div class="l-main__content--wrapper">
      
            
          
            
         
          </div>
        </div>
        <!-- Fin Contenido -->
      </div>
      
   
    <script>
       ```javascript
        var inputText = document.querySelector('#chatText');
        var input = document.querySelector('#emoji');
        var picker = new EmojiButton({
            position:'left-start'
        })
        
        picker.on('emoji',function(emoji){
            inputText.value += emoji;
        })

        input.addEventListener('click',function(){
            picker.pickerVisible ? picker.hidePicker(): picker.showPicker(input)
        })
        ```



    </script>
</body>
</html>

Script ejemplo

       var inputText = document.querySelector('#chatText');
       var input = document.querySelector('#emoji');
       var picker = new EmojiButton({
           position:'left-start'
       })
       
       picker.on('emoji',function(emoji){
           inputText.value += emoji;
       })

       input.addEventListener('click',function(){
           picker.pickerVisible ? picker.hidePicker(): picker.showPicker(input)
       })

CSS ejemplo funcional (layout )

.container{
  width: 600px;
  margin: 20px auto;
  display:flex;
  flex-direction: row;
}
.textarea{
    width: 100%;
    height: 200px;
    font-size: 20pt;
}

Implementacion Angular

Instalacion

añadir script en carpetas assets

src/assets/emoji-button-script.js

  1. crear archivo de script en ./src/assets con el siguiente contenido:

         function emojiButton(){
         var inputText = document.querySelector('#chatText');
         var input = document.querySelector('#emoji');
         var picker = new EmojiButton({
             position:'left-start'
         })
     
     picker.on('emoji',function(emoji){
         inputText.value += emoji;
     })
     
     input.addEventListener('click',function(){
         picker.pickerVisible ? picker.hidePicker(): picker.showPicker(input)
     })
 }

  2. declarar en el componente a usar la constante emojiButton para usar funcion del script

     import { Component, AfterViewInit} from '@angular/core';
 declare const emojiButton: any;
 
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })

 export class AppComponent implements AfterViewInit {
   title = 'emoji-button';
 
   ngAfterViewInit(){
     
     emojiButton();

   }
 }

  3. declarar el archivo de script en el archivo angular.json

     "scripts": [
           "src/assets/emoji-button-script.js"
         ]

app.component.html

layout de sidebar + card y textarea (solo el boton de emoji gatilla el inicio del emoji-picker)

<div class="l-main">
  <!-- start nav -->
  <nav class="l-main__side-menu">
    <a class="l-main__side-menu--close-icon">
      <span class="icon-close"></span>
    </a>
    
    <!-- menu options -->
    <ul class="c-sidebar-menu">
      <div class="c-sidebar-menu__logo">
        <img class="c-sidebar-menu__logo--image" src="https://cdn.chattigo.com/assets/img/logo-white.svg" alt="logo"/>
      </div>
      
      <li class="c-sidebar-menu__item">
        <span class="c-sidebar-menu__icon icon-emoji"></span>
        
        <span class="c-sidebar-menu__label">
          Agente
        </span>
      </li>
      
      <li class="c-sidebar-menu__item">
        <span class="c-sidebar-menu__icon icon-message-visible"></span>
        
        <span class="c-sidebar-menu__label">
          Supervisor
        </span>
      </li>

      <hr />
      
      <li class="c-sidebar-menu__item">
        <span class="c-sidebar-menu__icon icon-config"></span>
        
        <span class="c-sidebar-menu__label">
          Configuración
        </span>
      </li>
      
      <li class="c-sidebar-menu__item c-sidebar-menu__item--active">
        <span class="c-sidebar-menu__icon icon-reports"></span>
        
        <span class="c-sidebar-menu__label">
          Analítica
        </span>
      </li>
      
      <li class="c-sidebar-menu__item c-sidebar-menu__item--user-logged-in">
        <div class="c-sidebar-menu__user">
          <img class="c-sidebar-menu__user--image" src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png"/>
        </div>
        
        <span class="c-sidebar-menu__label">
          User Name User Name User Name User Name User Name
        </span>
      </li>
      
      <li class="c-sidebar-menu__item c-sidebar-menu__item--log-out">
        <span class="c-sidebar-menu__icon icon-logout"></span>
        
        <span class="c-sidebar-menu__label">
          Cerrar Sesión
        </span>
      </li>
    </ul>
  </nav>
  <!-- Fin nav -->
  
  <!-- Contenido -->
  <!-- el modificador --two-halfs es la clave -->
  <div class="l-main__content l-main__content--two-halfs">
    <header class="l-dashboard__header">
      <h3 class="l-dashboard__header--title">
        Emoji-button
        
        <a class="l-main__side-menu--open-icon">
          <span class="icon-sidebar"></span>
        </a>
      </h3>
    </header>
    
    <!-- wrapper para ordenar las card en columnas -->
    <div class="l-main__content--wrapper">
      <div class="c-section-card">
        <div class="c-section-card__header">
          <label class="c-section-card__header--label">
          <div class="container">
              <textarea class="textarea"></textarea>
          </div>
          <div class="c-send-message widget-send-message-box-js">    
          <textarea id="chatText" class="c-input c-send-message__input widget-message-input-js" placeholder="Envía un mensaje..."></textarea>
          
          <div class="c-send-message__actions">
              <a href="#">
              <span class="icon-attachment"></span>
              </a>
              <a href="#" id="emoji">
              <span class="icon-emoji"></span>
              </a>
              <a class="c-send-button" href="#">
              <span class="icon-send"></span>
              </a>
          </div>
          </div>
          </label>
        </div>
        
        <div class="c-section-card__content">
          <!-- ejemplo de tabs -->
          
        </div>
      </div>
      
    
    </div>
    
    <!-- wrapper para ordenar las card en columnas -->
    <div class="l-main__content--wrapper">

      
    
      
   
    </div>
  </div>
  <!-- Fin Contenido -->
</div>

app.component.css

.container{
    width: 600px;
    margin: 20px auto;
    display:flex;
    flex-direction: row;
  }
  .textarea{
      width: 100%;
      height: 200px;
      font-size: 20pt;
  }