Wrong default chart bug fix, design update

css/vkinject.css

@@ -1,3 +1,112 @@
-.friends-select {
-  margin: 10px;
+.usual-overflow {
+  overflow: visible !important;
+}
+
+/* --------------------------------------------------------------------------- */
+
+.friends-chart-wrapper-dropdown {
+    /* Size & position */
+    position: relative;
+    width: 160px;
+    margin: 0 auto;
+    margin-left: -15px;
+    margin-top: -5px;
+    padding: 6px 15px;
+
+    z-index: 13;
+
+    /* Styles */
+    font-family: tahoma, arial, verdana, sans-serif, Lucida Sans;
+    font-size: 11px;
+    color: #2B587A;
+    cursor: pointer;
+    outline: none;
+    -webkit-transition: all 0.3s ease-out;
+    -moz-transition: all 0.3s ease-out;
+    -ms-transition: all 0.3s ease-out;
+    -o-transition: all 0.3s ease-out;
+    transition: all 0.3s ease-out;
+}
+
+.friends-chart-wrapper-dropdown i{
+    font-size: 15px;
+}
+
+.friends-chart-wrapper-dropdown:after { /* Little arrow */
+    content: "";
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: 58%;
+    right: 10px;
+    margin-top: -3px;
+    border-width: 4px 4px 0 4px;
+    border-style: solid;
+    border-color: #2B587A transparent;
+}
+
+.friends-chart-wrapper-dropdown .friends-chart-dropdown {
+    /* Size & position */
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    padding-left: 0px;
+
+    /* Styles */
+    background: #fff;
+    border-radius: 0 0 5px 5px;
+    border: 1px solid rgba(0,0,0,0.2);
+    border-top: none;
+    border-bottom: none;
+    list-style: none;
+    -webkit-transition: all 0.3s ease-out;
+    -moz-transition: all 0.3s ease-out;
+    -ms-transition: all 0.3s ease-out;
+    -o-transition: all 0.3s ease-out;
+    transition: all 0.3s ease-out;
+
+    /* Hiding */
+    max-height: 0;
+    overflow: hidden;
+
+    margin: 0;
+}
+
+.friends-chart-wrapper-dropdown .friends-chart-dropdown li a {
+    display: block;
+    text-decoration: none;
+    color: #2B587A;
+    padding: 5px 10px;
+    transition: all 0.3s ease-out;
+}
+
+.friends-chart-wrapper-dropdown .friends-chart-dropdown li:last-of-type a {
+    border: none;
+}
+
+.friends-chart-wrapper-dropdown .friends-chart-dropdown li i {
+    margin-right: 5px;
+    color: inherit;
+    vertical-align: middle;
+}
+
+/* Hover state */
+
+.friends-chart-wrapper-dropdown .friends-chart-dropdown li:hover a {
+    background: #e1e7ed;
+}
+
+/* Active state */
+
+.friends-chart-wrapper-dropdown.active {
+    border-radius: 5px 5px 0 0;
+    background: #EDF1F5;
+    box-shadow: none;
+    border-bottom: none;
+}
+
+.friends-chart-wrapper-dropdown.active .friends-chart-dropdown {
+    border-bottom: 1px solid rgba(0,0,0,0.2);
+    max-height: 400px;
 }

js/background.js

@@ -94,7 +94,7 @@ function changeDefaultState(stateIndex) {
 
 /** Returns default chart state. */
 function getDefaultState() {
-    return localStorage.stateIndex || 0;
+    return (localStorage.stateIndex - 0 == localStorage.stateIndex) ? localStorage.stateIndex : 0;
 }
 
 /** Handles data from client. */
@@ -147,7 +147,8 @@ chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
         }
         params.push(request[params_list[i]]);
     }
-    sendResponse(func.apply(this, params) || {});
+    var result = func.apply(this, params);
+    sendResponse(typeof result !== 'undefined' ? result : {});
 });
 
 /** Opening settings on icon click. */

js/statistics.js

@@ -112,7 +112,8 @@ function getCurrentUserInfo() {
         clearSession();
         tmpProfile = sendRequest(url);
     }
-    var profile = (typeof tmpProfile !== 'undefined') ? sendRequest(url)[0] || {} : {};
+
+    var profile = (typeof tmpProfile !== 'undefined') ? tmpProfile[0] || {} : {};
     return profile;
 }
 
@@ -125,9 +126,9 @@ function isUser(username) {
     var access_token = getAccessToken();
     var url = 'https://api.vk.com/method/users.get?user_ids=' + username + '&access_token=' + access_token;
     var resp = sendRequest(url);
-    if (!resp) {
+    if (resp === null) {
         clearSession();
         resp = sendRequest(url);
     }
-    return resp;
+    return resp || {};
 }

js/vkinject.js

@@ -157,26 +157,86 @@ function addSchoolStatistic(response) {
     });
 }
 
+function DropDown(el) {
+    this.dd = el;
+    this.initEvents();
+}
+DropDown.prototype = {
+    initEvents : function() {
+        var obj = this;
+        obj.dd.on('click', function(event){
+            $(this).toggleClass('active');
+            if ($(event.target).is('a')){
+                $('.friend-statistic').hide();
+                $('.friend-statistic[statistic-type="' + $(event.target).attr('statistic-type') + '"]').show();
+                $('.friends-chart-current-choice').text($(event.target).text());
+            }
+            event.stopPropagation();
+        });
+    }
+};
+
 function renderCharts() {
     var user = document.location.pathname.slice(1);
     chrome.runtime.sendMessage({method: "isUser", user: user}, function(user_response) {
         if (!$.isEmptyObject(user_response)) {
             $('#profile_short').before('<div class="friend-statistic-container"></div>');
-            $('.friend-statistic-container').append('<div class="friends-select"><select id="friends-select-list"></select></div>');
+            $('.friend-statistic-container').append(
+                '<div class="profile_info"><div class="clear_fix">' +
+                    '<div class="label fl_l">Статистика по друзьям:</div>' +
+                    '<div class="labeled fl_l usual-overflow">' +
+                        '<div id="fcdd" class="friends-chart-wrapper-dropdown"><span class="friends-chart-current-choice">Показать статистику</span>' +
+                            '<ul class="friends-chart-dropdown">' +
+                            '</ul>' +
+                        '</div>' +
+                    '</div>' +
+                '</div></div>'
+            );
+
+            var dd = new DropDown($('#fcdd'));
+            $(document).click(function() {
+                $('.friends-chart-wrapper-dropdown').removeClass('active');
+            });
 
             chrome.runtime.sendMessage({method: "getDefaultState"}, function(stateIndex) {
-                addOption("#friends-select-list", "age", "Статистика возрастов", +stateIndex === 0);
-                addOption("#friends-select-list", "universities", "Статистика университетов", +stateIndex === 1);
-                addOption("#friends-select-list", "schools", "Статистика школ", +stateIndex === 2);
-                addOption("#friends-select-list", "empty", "Скрыть", +stateIndex === 3);
+                var options = [
+                    {
+                        'name': 'Скрыто',
+                        'statistic_type': 'Empty',
+                        'hasCanvas': false,
+                    }, {
+                        'name': 'Статистика возрастов',
+                        'statistic_type': 'age',
+                        'hasCanvas': true,
+                        'width': 400,
+                        'height': 250,
+                    }, {
+                        'name': 'Статистика университетов',
+                        'statistic_type': 'universities',
+                        'hasCanvas': true,
+                        'width': 400,
+                        'height': 350,
+                    }, {
+                        'name': 'Статистика школ',
+                        'statistic_type': 'schools',
+                        'hasCanvas': true,
+                        'width': 400,
+                        'height': 350,
+                    }
+                ];
+
+                for (var option = 0; option < options.length; option++) {
+                    $('.friends-chart-dropdown').append('<li class="friends-chart-dropdown-item"><a statistic-type="' + options[option].statistic_type + '" href="#">' + options[option].name + '</a></li>');
+                }
+                $('.friends-chart-current-choice').text(options[stateIndex].name);
 
+                // TODO: rewrite with one cycle
+                $('.friend-statistic-container').append('<div statistic-type="empty" class="friend-empty-statistic friend-statistic"></div>');
                 $('.friend-statistic-container').append('<div statistic-type="age" class="friend-age-statistic friend-statistic"><canvas id="friend-age-chart" width="400" height="250"></canvas></div>');
                 $('.friend-statistic-container').append('<div statistic-type="universities" class="friend-university-statistic friend-statistic"><canvas id="friend-university-chart" width="400" height="350"></canvas></div>');
                 $('.friend-statistic-container').append('<div statistic-type="schools" class="friend-school-statistic friend-statistic"><canvas id="friend-school-chart" width="400" height="350"></canvas></div>');
-                $('.friend-statistic-container').append('<div statistic-type="empty" class="friend-empty-statistic friend-statistic"></div>');
 
                 $('.friend-statistic').hide();
-                //$('.friend-statistic:eq(' + (+stateIndex + 1) + ')').show();
                 $('.friend-statistic:eq(' + stateIndex + ')').show();
 
                 chrome.runtime.sendMessage({method: "getFriendsInfo", user: user_response[0].uid}, function(response) {
@@ -187,10 +247,11 @@ function renderCharts() {
             });
         }
     });
-    $('#profile_info').on('change', '#friends-select-list', function() {
-        $('.friend-statistic').hide();
-        $('.friend-statistic[statistic-type="' + $('#friends-select-list').val() + '"]').show();
-    });
+
+//    $('#profile_info').on('change', '#friends-select-list', function() {
+//        $('.friend-statistic').hide();
+//        $('.friend-statistic[statistic-type="' + $('#friends-select-list').val() + '"]').show();
+//    });
 }
 
 setInterval(function () {

manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "VK Charts",
   "description": "Диаграмы VK.",
-  "version": "1.0",
+  "version": "1.0.1",
   "permissions": [
     "tabs",
     "storage",

pages/information.html

@@ -145,10 +145,10 @@ <h2>Возраст</h2>
         <h2>Стандартное состояние</h2>
         <div>
           <select class="chart-state">
+            <option>Скрыть</option>
             <option>Статистика возрастов</option>
             <option>Статистика университетов</option>
             <option>Статистика школ</option>
-            <option>Скрыть</option>
           </select>
         </div>
       </div>