onigetoc/Google Contact Api jQuery

## Google Contact Api jQuery
<!DOCTYPE html>
<html>
<head>
    <script src="https://apis.google.com/js/client.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

    <script>
        var clientId = 'YOUR-CLIENT-ID-HERE';
        var apiKey = ''YOUR-API-KEY-HERE';
        var scopes = 'https://www.google.com/m8/feeds';

        $(document).on("click", "#authconnect", function() {

            if ($(this).hasClass("disabled")) return false;
            $('#contact-list').html('<div style="text-align:center"><div class="preloader-wrapper small active"> <div class="spinner-layer spinner-green-only"> <div class="circle-clipper left"> <div class="circle"></div> </div><div class="gap-patch"> <div class="circle"></div> </div><div class="circle-clipper right"> <div class="circle"></div> </div> </div> </div></div>');

            gapi.client.setApiKey(apiKey);
            window.setTimeout(checkAuth, 3);
        });

        function checkAuth() {
            gapi.auth.authorize({
                client_id: clientId,
                scope: scopes,
                immediate: false
            }, handleAuthResult);
        }

        function handleAuthResult(authResult) {
            if (authResult && !authResult.error) {

                $('#authconnect').addClass('disabled');

                $.ajax({
                    url: "https://www.google.com/m8/feeds/contacts/default/full?alt=json&access_token=" + authResult.access_token + "&max-results=2000&v=3.0",
                    dataType: 'jsonp'
                }).success(function(data) {
                    //console.log(JSON.stringify(data));

                    $('#contact-list').html('');

                    $('#json').val(JSON.stringify(data));

                    //console.log(token['access_token']);
                    var count = 0;

                    $.each(data.feed.entry, function(i, item) {

                        // SHOW ONLY CONTACT WITH PHONE NUMBERS, REMOVE THIS IF TO SEE ALL AND THE CLOSING IF AT LINE 87
                        if (item.hasOwnProperty('gd$phoneNumber')) { // phone number only

                            count++

                            var html = '<li class="collection-item avatar">';

                            if (item.link[0]['href']) {

                                var imagesrc = item.link[0]['href'] + '&access_token=' + authResult.access_token;
                                html += '<img src="' + imagesrc + '" class="circle" onerror="this.src=\'http://lachezleswatts.com/uploads/membres/2015-10-19/1/1.png\'" > ';

                            }

                            html += '<p class="name"><strong>' + item.title.$t + '<\strong><br>';

                            if (item.hasOwnProperty('gd$phoneNumber')) {
                                html += '<i class="zmdi zmdi-phone"></i></a> ' + item.gd$phoneNumber[0]['$t'] + '<br>';

                                //console.log(item.gd$phoneNumber);

                            }
                            if (item.hasOwnProperty('gd$email')) {
                                html += item.gd$email[0]['address'] + '</p>';
                                //console.log(item.gd$email);
                            }

                            html += '<a href="#!" class="secondary-content"><i class="zmdi zmdi-star zmdi-hc-2x"></i></a></li>'

                        // SHOW ONLY CONTACT WITH PHONE NUMBERS, REMOVE THIS CLOSING IF TO SEE ALL AND THE IF AT LINE 57
                        } // if phone number only end

                        $('#contact-list').append(html);

                    });

                    $('#totalfound').text(count + " Contacts Found");

                    /* FILTER SEARCH */
                    var options = {
                        valueNames: ['name', 'email']
                    };
                    var contactList = new List('contact', options);


                }); //Success

            } //if

            setTimeout(function() {
                $('#authconnect').removeClass('disabled');
            }, 2000);


        } //function

        /****************************************************************/

    </script>
</head>

<body>
    <br>
    <div class='container'>

        <button id="authconnect" class="btn waves-effect waves-light">Import Google contacts</button>
        <button class="btn waves-effect waves-light" onclick="revokeConnection();">REVOKE TOKEN DISCONNECT</button>

        <br>

        <div id='contact'>

            <div class="row">
                <div class="input-field col s4">
                    <i class="material-icons prefix zmdi zmdi-account-box-phone"></i>
                    <input class="search" id="icon_prefix" type="text">
                    <label for="icon_prefix">Search Contacts</label>
                </div>
                <div class="input-field col s8">
                    <a class="sort btn waves-effect waves-light" data-sort="name">
                        <i data-sort="name" class="zmdi zmdi-sort-asc"></i>
                    </a>
                </div>
            </div>


            <div class=''><strong id='totalfound'></strong></div>
            <div class='row'>
                <ul id='contact-list' class="collection list"></ul>
            </div>


        </div>

        <textarea style="display:none" id="json" rows="10" cols="100"></textarea>

    </div>
</body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://apis.google.com/js/client.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>

	<!-- Compiled and minified CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">

	<!-- Compiled and minified JavaScript -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

	<script>
	var clientId = 'YOUR-CLIENT-ID-HERE';
	var apiKey = ''YOUR-API-KEY-HERE';
	var scopes = 'https://www.google.com/m8/feeds';

	$(document).on("click", "#authconnect", function() {

	if ($(this).hasClass("disabled")) return false;
	$('#contact-list').html('<div style="text-align:center"><div class="preloader-wrapper small active"> <div class="spinner-layer spinner-green-only"> <div class="circle-clipper left"> <div class="circle"></div> </div><div class="gap-patch"> <div class="circle"></div> </div><div class="circle-clipper right"> <div class="circle"></div> </div> </div> </div></div>');

	gapi.client.setApiKey(apiKey);
	window.setTimeout(checkAuth, 3);
	});

	function checkAuth() {
	gapi.auth.authorize({
	client_id: clientId,
	scope: scopes,
	immediate: false
	}, handleAuthResult);
	}

	function handleAuthResult(authResult) {
	if (authResult && !authResult.error) {

	$('#authconnect').addClass('disabled');

	$.ajax({
	url: "https://www.google.com/m8/feeds/contacts/default/full?alt=json&access_token=" + authResult.access_token + "&max-results=2000&v=3.0",
	dataType: 'jsonp'
	}).success(function(data) {
	//console.log(JSON.stringify(data));

	$('#contact-list').html('');

	$('#json').val(JSON.stringify(data));

	//console.log(token['access_token']);
	var count = 0;

	$.each(data.feed.entry, function(i, item) {

	// SHOW ONLY CONTACT WITH PHONE NUMBERS, REMOVE THIS IF TO SEE ALL AND THE CLOSING IF AT LINE 87
	if (item.hasOwnProperty('gd$phoneNumber')) { // phone number only

	count++

	var html = '<li class="collection-item avatar">';

	if (item.link[0]['href']) {

	var imagesrc = item.link[0]['href'] + '&access_token=' + authResult.access_token;
	html += '<img src="' + imagesrc + '" class="circle" onerror="this.src=\'http://lachezleswatts.com/uploads/membres/2015-10-19/1/1.png\'" > ';

	}

	html += '<p class="name"><strong>' + item.title.$t + '<\strong><br>';

	if (item.hasOwnProperty('gd$phoneNumber')) {
	html += '<i class="zmdi zmdi-phone"></i></a> ' + item.gd$phoneNumber[0]['$t'] + '<br>';

	//console.log(item.gd$phoneNumber);

	}
	if (item.hasOwnProperty('gd$email')) {
	html += item.gd$email[0]['address'] + '</p>';
	//console.log(item.gd$email);
	}

	html += '<a href="#!" class="secondary-content"><i class="zmdi zmdi-star zmdi-hc-2x"></i></a></li>'

	// SHOW ONLY CONTACT WITH PHONE NUMBERS, REMOVE THIS CLOSING IF TO SEE ALL AND THE IF AT LINE 57
	} // if phone number only end

	$('#contact-list').append(html);

	});

	$('#totalfound').text(count + " Contacts Found");

	/* FILTER SEARCH */
	var options = {
	valueNames: ['name', 'email']
	};
	var contactList = new List('contact', options);


	}); //Success

	} //if

	setTimeout(function() {
	$('#authconnect').removeClass('disabled');
	}, 2000);


	} //function

	/****************************************************************/

	</script>
	</head>

	<body>
	<br>
	<div class='container'>

	<button id="authconnect" class="btn waves-effect waves-light">Import Google contacts</button>
	<button class="btn waves-effect waves-light" onclick="revokeConnection();">REVOKE TOKEN DISCONNECT</button>

	<br>

	<div id='contact'>

	<div class="row">
	<div class="input-field col s4">
	<i class="material-icons prefix zmdi zmdi-account-box-phone"></i>
	<input class="search" id="icon_prefix" type="text">
	<label for="icon_prefix">Search Contacts</label>
	</div>
	<div class="input-field col s8">
	<a class="sort btn waves-effect waves-light" data-sort="name">
	<i data-sort="name" class="zmdi zmdi-sort-asc"></i>
	</a>
	</div>
	</div>


	<div class=''><strong id='totalfound'></strong></div>
	<div class='row'>
	<ul id='contact-list' class="collection list"></ul>
	</div>


	</div>

	<textarea style="display:none" id="json" rows="10" cols="100"></textarea>

	</div>
	</body>

	</html>