npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nativescript-chatview

v1.0.3

Published

NativeScript UI module for implementing WhatsApp like chat applications.

Downloads

10

Readme

npm npm

NativeScript ChatView

A NativeScript UI module for implementing WhatsApp like chat applications.

Donate

License

MIT license

Platforms

  • Android
  • iOS

Installation

Run

tns plugin add nativescript-chatview

inside your app project to install the module.

Demo

The demo app can be found here.

Demo app

Usage

Include

import ChatView = require("nativescript-chatview");

Create view

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      navigatingTo="onNavigatingTo">
</Page>
import ChatView = require("nativescript-chatview");

function getTime() : string {
    var now = new Date();
    
    var hours = now.getHours();
    return numberToString(hours == 12 ? 12 : (hours % 12)) + ":" + numberToString(now.getMinutes()) + " " + 
           (hours < 13 ? "AM" : "PM");
}

export function onNavigatingTo(args) {
    var page = args.object;

    // create view
    var chatView = new ChatView.ChatView();
    
    // register event when user taps
    // on SEND button
    chatView.notifyOnSendMessageTap((eventData: ChatView.SendMessageTappedEventData) => {
        // add a chat message
        eventData.object.appendMessages({            
            date: getTime(),
            isRight: true,
            image: "~/img/avatar.jpg",
            message: eventData.message,    
        });
    });
    
    // focus text field
    chatView.focusMessageField();
    
    page.content = chatView;
}

The XML way

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:chatView="nativescript-chatview"
      navigatingTo="onNavigatingTo">
      
  <chatView:ChatView id="myChatView" />
</Page>

Styling

Add the following CSS to your code:

.nsChatView-view .nsChatView-sendMessageArea {
    margin: 4,0,0,0;
    background-color: #e8e8e8;
}

.nsChatView-view .nsChatView-sendMessageArea Button {
    background-color: transparent;
    margin: 0;
}

.nsChatView-view .nsChatView-messageList {
    background-color: transparent;
    border-color: transparent;
    border-width: 0;
    margin: 0;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-avatar,
.nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-avatar {
    margin: 8;
    border-radius: 32;
    width: 64;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-separator,
.nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-separator {
    border-color: transparent;
    border-width: 0;
    width: 32;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-message,
.nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-message {
    margin: 8;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea,
.nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea {
    border-radius: 8;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea {
    background-color: #edeef2;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea {
    background-color: #00b863;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea .nsChatView-content,
.nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea .nsChatView-content {
    margin: 12,16,12,16;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea Label,
.nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea Label {
    margin: 0;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea .nsChatView-content Label {
    color: black;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea .nsChatView-content Label {
    color: white;
}

.nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea .nsChatView-content .nsChatView-date,
.nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea .nsChatView-content .nsChatView-date {
    font-size: 11;
    margin-bottom: 12;
}

.nsChatView-view .nsChatView-messageField {
    font-size: 14;
}

To understand how a ChatView is defined, you can have a look at the following XML definition:

<ChatView className="nsChatView-view"
          rows="*,auto">
  
  <!-- list of messages -->
  <ListView className="nsChatView-messageList"
            row="0"
            items="{{ messages }}"
            horizontalAlignment="stretch"
            verticalAlignment="stretch">
    
    <!-- template for an IChatMessage item -->
    <ListView.itemTemplate>
      <!-- chat message item -->
      <GridLayout className="{{ 'nsChatView-item-' + (isRight ? 'right' : 'left') }}"
                  rows="auto" columns="auto,*,auto">

        <!-- avatar -->
        <Image row="0" col="{{ isRight ? '2' : '0' }}"
               className="nsChatView-avatar"
               verticalAlignment="top"
               src="{{ image }}"
               visibility="{{ image ? 'visible' : 'collapsed' }}" />
        
        <!-- the message -->
        <StackLayout row="0" col="1"
                     className="nsChatView-message">
          
          <!-- the message area -->
          <Border className="nsChatView-messageArea">
            <StackLayout className="nsChatView-content"
                         verticalAlignment="top" horizontalAlignment="{{ isRight ? 'right' : 'left' }}">
              
              <!-- the date / time -->              
              <Label className="nsChatView-date"
                     horizontalAlignment="{{ isRight ? 'right' : 'left' }}"
                     text="{{ date }}"
                     visibility="{{ date ? 'visible' : 'collapsed' }}" />
          
              <!-- the message text -->
              <Label className="nsChatView-messageText"
                     horizontalAlignment="{{ isRight ? 'right' : 'left' }}"
                     text="{{ message }}" textWrap="true" />
            </StackLayout>
          </Border>
        </StackLayout>

        <!-- The invisible separator -->
        <Border row="0" col="{{ isRight ? '0' : '2' }}"
                className="nsChatView-separator" />
      </GridLayout>
    </ListView.itemTemplate>
  </ListView>
  
  <!-- message input field and SEND button -->
  <GridLayout className="nsChatView-sendMessageArea"
              row="1"
              rows="*,auto">
        
    <!-- chat message field -->
    <TextField className="nsChatView-messageField"
               col="0" row="0"
               hint="{{ typeMessageHint }}" />
      
    <!-- SEND button -->
    <Button className="nsChatView-sendMessageButton"
            col="1" row="0"
            text="{{ sendMessageButtonCaption }}" />
  </GridLayout>
</ChatView>

The following properties of a ChatView can be used to access the controls defined in the XML:

| Name | CSS class | | ---- | --------- | | messageField | nsChatView-messageField | | messageList | nsChatView-messageList | | sendMessageArea | nsChatView-sendMessageArea | | sendMessageButton | nsChatView-sendMessageButton |

Add messages

Chat messages are wrapped into an IChatMessage object:

export interface IChatMessage {
    /**
     * The date.
     */
    date?: any;
    
    /**
     * The image source.
     */
    image?: any;
    
    /**
     * Defines if the displayed item is aligned on the right side or not.
     */
    isRight?: boolean;
    
    /**
     * The message value.
     */
    message?: any;
}

Add

Use appendMessages() method to add one or more chat messages:

object.appendMessages({            
    date: getTime(),
    isRight: true,
    image: "~/img/me.jpg",
    message: "My message",    
}, {            
    date: getTime(),
    isRight: false,
    image: "~/img/friend.jpg",
    message: "Friend's message",    
});

Insert

Use insertMessages() method to insert one or more chat messages at a specific position:

object.insertMessages(1, {            
    date: getTime(),
    isRight: true,
    image: "~/img/me.jpg",
    message: "My message",    
}, {            
    date: getTime(),
    isRight: false,
    image: "~/img/friend.jpg",
    message: "Friend's message",    
});

Prepend

Use insertMessages() method to prepend one or more chat messages:

object.prependMessages({
    date: getTime(),
    isRight: true,
    image: "~/img/me.jpg",
    message: "My message",    
}, {            
    date: getTime(),
    isRight: false,
    image: "~/img/friend.jpg",
    message: "Friend's message",    
});

SEND button

Use the notifyOnSendMessageTap() method to register for a "click" event:

chatView.notifyOnSendMessageTap((eventData: ChatView.SendMessageTappedEventData) => {
    // handle the event
});

The eventData object has the following structure:

import Observable = require("data/observable");

export class SendMessageTappedEventData implements Observable.EventData {
    /** @inheritdoc */
    public eventName: string;
    
    /**
     * Focuses the chat message field.
     * 
     * @return {Boolean} Operation was successful or not.
     */
    public focusTextField(): boolean;
    
    /**
     * Gets the message to send.
     */
    public message: string;
    
    /** @inheritdoc */
    public object: ChatView;
    
    /**
     * Resets the message value.
     */
    public resetMessage();
    
    /**
     * Scrolls to bottom.
     */
    public scrollToBottom();
}