phone-in-browser

`phone-in-browser`

A. About

Embed a "functional" phone in your web app. Currently there are 2 apps available in the phone: Chat App and Gallery App.

B. Requirements

phone-in-browser's CSS and JS files.
Font Awesome v5.5.0
Roboto Font
jQuery v3.3.1

C. Version

1.0.0

D. Usage

To try phone-in-browser, just create a HTML file and copy the codes below. This is the minimal setup.

<html>
    <head>
        <title>Example</title>

        <!-- Font Awesome -->
        <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
        
        <!-- Roboto Font -->
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        
        <!-- phone-in-browser CSS file -->
        <link rel="stylesheet" type="text/css" href="https://blog.hanmajid.com/css/phone-in-browser/phone-in-browser.min.css">
    </head>                
    <body>
        <div id="my-phone"></div>

        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        
        <!-- phone-in-browser JS file -->
        <script src="https://blog.hanmajid.com/js/phone-in-browser/phone-in-browser.min.js"></script>
        <script>
            // initialize the phone-in-browser
            var ph = phone('#my-phone');
        </script>
    <body>
<html>

E. Options

1. Phone Options

Name	Description	Type	Default
`isOn`	If true, phone is on when first loaded.	boolean	true
`battery`	Battery percentage.	integer	80
`isInternet`	If true, the phone has Internet connection (Can be seen in phone header).	boolean	true
`gallery`	List of images stored in the phone.	GalleryObject (See Object Format section below)	2 albums (Camera and Downloads)

Example:

var ph = phone('#my-phone', {
    isOn: false,
    battery: 99,
    isInternet: false,
    gallery: [ ... ] // see GalleryObject in Objects Format section
});

2. Chat App Options

Chat App is LINE-like app for chatting.

Name	Description	Type	Default
`profile`	Your Chat App profile.	Object (See example below)	(See example below)
`friends`	Your Chat App friends.	Array of Objects (See example below)	(See example below)
`posts`	Your Chat App timeline posts.	Array of Objects (See example below)	(See example below)

Example:

var p = phone('#my-phone', {
    // default Chat App options
    line: {
        profile: {
            avatar: 'http://blog.hanmajid.com/images/me-3.jpg',
            name: 'Farhan Majid',
            status: 'hanmajid.com'
        },
        friends: [
            {
                avatar: 'https://api.adorable.io/avatars/285/abott@adorable.png',
                name: 'Abott',
                status: '',
                profileCover: 'https://picsum.photos/300/400',
                messages: [
                    {
                        isYou: false,
                        text: 'Hi',
                        timestamp: '14.46'
                    },
                    {
                        isYou: true,
                        text: 'Hello',
                        timestamp: '14.40'
                    },
                ]
            },
            {
                avatar: 'https://api.adorable.io/avatars/285/Nana@adorable.png',
                name: 'Nana',
                status: 'lol',
                profileCover: 'https://picsum.photos/270/360',
            }
        ],
        posts: [
            {
                avatar: 'https://api.adorable.io/avatars/285/Nana@adorable.png',
                name: 'Nana',
                text: 'Happy borthday to me!',
                timestamp: 'Nov 12 18:53',
                likes: 1,
                comments: [],
                shares: 2,
            },
        ]
    }
});

F. APIs

1. Power Button

var ph = phone('#my-phone');
ph.powerButton();

2. Home Button

var ph = phone('#my-phone');
ph.homeButton();

3. Back Button

var ph = phone('#my-phone');
ph.backButton();

G. Object Format

1. GalleryObject

This is the default value of gallery option. You can see these images with Gallery app. Follow this structure and modify the contents to change the images you want to store on the phone.

gallery: {
    albums: [
        {
            name: "Camera",
            images: [
                {
                    filename: "Landscape",
                    timestamp: "11/22/2018 15:17:46",
                    width: 1200,
                    height: 1200,
                    url: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Inside_the_Batad_rice_terraces.jpg/220px-Inside_the_Batad_rice_terraces.jpg",
                },
            ]
        },
        {
            name: "Downloads",
            images: [
                {
                    filename: "Kitty",
                    timestamp: "11/22/2018 15:17:46",
                    width: 1200,
                    height: 1200,
                    url: "https://placekitten.com/300/300",
                },
                {
                    filename: "Katty",
                    timestamp: "11/22/2018 15:17:46",
                    width: 1200,
                    height: 1200,
                    url: "https://placekitten.com/200/200",
                }, 
                {
                    filename: "Ketty",
                    timestamp: "11/22/2018 15:17:46",
                    width: 1200,
                    height: 1200,
                    url: "https://placekitten.com/400/400",
                }, 
                {
                    filename: "Kotty",
                    timestamp: "11/22/2018 15:17:46",
                    width: 1200,
                    height: 1200,
                    url: "https://placekitten.com/210/210",
                }, 
            ]
        }
    ]
}