code improvements, bugfix, usability adjustments

Author: konradmichalik

TODO.md

@@ -31,14 +31,16 @@
 * ~~Number counting animation~~
 * ~~Auto updater~~
 
-## v0.6.0
+## v0.5.1
 * forecast offset bug
 * endless loading animation bug
-* city history
-* automatic testing
 * open external browser
 * providing a starter api key inside the app
 * usability improvements
+
+## v0.6.0
+* city history
+* automatic testing
 * Less, ECMAScript 5
 * Clean up code
 

app.js

@@ -1,19 +1,19 @@
 'use strict'
 
-var electron = require('electron')
-var app = electron.app
-var globalShortcut = electron.globalShortcut
-var AutoLaunch = require('auto-launch')
-var menubar = require('menubar')
-var Menu = electron.Menu
-var dialog = electron.dialog
-var ipcMain = electron.ipcMain
-var shell = electron.shell
+const electron = require('electron')
+const app = electron.app
+const globalShortcut = electron.globalShortcut
+const AutoLaunch = require('auto-launch')
+const menubar = require('menubar')
+const Menu = electron.Menu
+const dialog = electron.dialog
+const ipcMain = electron.ipcMain
+const shell = electron.shell
 const superagent = require('superagent')
 const semver = require('semver')
 const config = require('./package.json')
 
-var autoLaunch = true
+let autoLaunch = true
 
 // Quit when all windows are closed.
 app.on('window-all-closed', function () {
@@ -29,7 +29,7 @@ app.on('will-quit', function () {
   globalShortcut.unregisterAll()
 })
 
-var mb = menubar({
+const mb = menubar({
   index: 'file://' + __dirname + '/index.html',
   icon: __dirname + '/assets/IconTemplate.png',
   width: 280,
@@ -73,7 +73,7 @@ mb.on('ready', function ready () {
   })
 
   ipcMain.on('set-title', function (event, args) {
-    var temperature = Math.round(args.temperature) + '°'
+    const temperature = Math.round(args.temperature) + '°'
     mb.tray.setToolTip(args.location + ' - ' + temperature)
     mb.tray.setTitle(temperature)
     if (process.platform === 'darwin') {
@@ -87,6 +87,11 @@ mb.on('ready', function ready () {
     app.quit()
   })
 
+  ipcMain.on('will-navigate', function (event, args) {
+    const url = args.url
+    electron.shell.openExternal(url)
+  })
+
   ipcMain.on('auto-launch', function (event, args) {
 
         // ToDo: appLauncher.isEnabled() not working for now
@@ -114,7 +119,7 @@ mb.on('show', function show () {
   mb.window.webContents.send('show')
 })
 
-var appLauncher = new AutoLaunch({
+const appLauncher = new AutoLaunch({
   name: 'temps'
 })
 
@@ -128,7 +133,7 @@ appLauncher.isEnabled().then(function (enabled) {
 appLauncher.enable()
 
 // Menu template and shortcuts
-var template = [{
+const template = [{
   label: 'Temps',
   submenu: [
         { label: 'About Temps', selector: 'orderFrontStandardAboutPanel:' },

assets/icons/icon-close.png

@@ -15,7 +15,10 @@
         <div id="main">
             <div class="header">
                 <div class="settings">
-                    <img src="assets/icons/icon-adjust.png" alt="settings" width="16"/>
+                    <div id="nav-icon">
+                        <span></span>
+                        <span></span>
+                    </div>
                 </div>
                 <div class="clock">
 

index.html

@@ -1,6 +1,7 @@
 {
   "name": "temps",
   "version": "v0.5.0",
+  "apikey": "547bbdc38bd641bef6645cd2c4bc613f",
   "timezone": {
     "url": "https://maps.googleapis.com/maps/api/timezone/json",
     "apikey": "AIzaSyD7CnHeMDQV_XCXlimoPwiPSB_83Wfq7LE",

src/config.json

@@ -95,10 +95,18 @@ var loadEventListener = function () {
     refreshWeather()
   })
 
-  jQuery('#main .settings img').click(function () {
+  jQuery('#nav-icon').click(function() {
     toggleSettings()
   })
 
+  jQuery('a').click(function (e) {
+    e.preventDefault()
+    const target = jQuery(this).attr('href')
+    ipcRenderer.send('will-navigate', {
+      url: target
+    })
+  })
+
   jQuery('#settings .close').click(function () {
     ipcRenderer.send('close')
   })
@@ -120,7 +128,7 @@ var init = function () {
   if (store.get('actual-city')) {
     setCity(store.get('actual-city'))
   } else {
-    setCity('Dresden, DE')
+    setCity('Berlin, DE')
   }
 
   if (store.get('format')) {

src/main.js

@@ -55,7 +55,7 @@ var getApiKey = function () {
   if (store.get('apikey')) {
     return store.get('apikey')
   } else {
-    showErrorMessage('No API Key')
+    return config.apikey
   }
 }
 

src/store.js

@@ -530,6 +530,79 @@ input[type="checkbox"][name="favorite-city"]:checked + span {
     100% { opacity: 0; }
 }
 
+#nav-icon {
+    width: 60px;
+    height: 45px;
+    position: relative;
+    margin-left: -20px;
+    margin-top: -12px;
+    -webkit-transform: rotate(0deg) scale(.3);
+    -moz-transform: rotate(0deg) scale(.3);
+    -o-transform: rotate(0deg) scale(.3);
+    transform: rotate(0deg) scale(.3);
+    -webkit-transition: .5s ease-in-out;
+    -moz-transition: .5s ease-in-out;
+    -o-transition: .5s ease-in-out;
+    transition: .5s ease-in-out;
+    cursor: pointer;
+}
+
+#nav-icon span {
+    display: block;
+    position: absolute;
+    height: 7px;
+    width: 100%;
+    background: #FFFFFF;
+    border-radius: 9px;
+    opacity: 1;
+    left: 0;
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+    -webkit-transition: .25s ease-in-out;
+    -moz-transition: .25s ease-in-out;
+    -o-transition: .25s ease-in-out;
+    transition: .25s ease-in-out;
+}
+
+#nav-icon {
+}
+
+#nav-icon span:nth-child(1) {
+    top: 0px;
+    -webkit-transform-origin: left center;
+    -moz-transform-origin: left center;
+    -o-transform-origin: left center;
+    transform-origin: left center;
+}
+
+#nav-icon span:nth-child(2) {
+    top: 25px;
+    -webkit-transform-origin: left center;
+    -moz-transform-origin: left center;
+    -o-transform-origin: left center;
+    transform-origin: left center;
+}
+
+#nav-icon.open span:nth-child(1) {
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+    top: -3px;
+    left: 8px;
+}
+
+#nav-icon.open span:nth-child(2) {
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+    top: 39px;
+    left: 8px;
+}
+
 body {
     margin: 0;
 }

src/style.css

@@ -1,15 +1,21 @@
-function getTimezone () {
-  jQuery.get(config.timezone.url + '?location=' + wdata[0].coord.lat + ',' + wdata[0].coord.lon + '&timestamp=1331161200&key=' + config.timezone.apikey, function (data) {
-    timeoffset = data.rawOffset + 3600
-  }).done(function () {
-    jQuery('#details .header .date').html(getTodayDate())
-    refreshClock()
-    loading[3] = false
-    checkLoading()
-    showHourlyWeatherData()
-  }).fail(function () {
-        // showErrorMessage('Failure during data fetching');
-  })
+const getTimezone = function () {
+  superagent
+      .get(config.timezone.url)
+      .query({location: wdata[0].coord.lat + ',' + wdata[0].coord.lon})
+      .query({timestamp: '1331161200'})
+      .query({key: config.timezone.apikey})
+      .end(function (err, res) {
+        loading[3] = false
+        if (err || !res.ok) {
+          showErrorMessage('Failure during data fetching')
+        } else {
+          timeoffset = res.body.rawOffset + 3600
+          jQuery('#details .header .date').html(getTodayDate())
+          refreshClock()
+          checkLoading()
+          showHourlyWeatherData()
+        }
+      })
 }
 
 function convertDateToUTC (date) {

src/timezone.js

@@ -96,15 +96,16 @@ var toggleSettings = function () {
     jQuery('#details').delay(500).fadeIn()
     jQuery('#settings').height('0px')
     jQuery('#settings .content').fadeOut()
+    jQuery('#nav-icon').removeClass('open')
   } else {
     jQuery('#main').height('120px')
     jQuery('#main .content').fadeOut()
     jQuery('#main .actual-icon').fadeOut()
     jQuery('#details').fadeOut()
     jQuery('#settings').height('340px')
     jQuery('#settings .content').delay(500).fadeIn()
+    jQuery('#nav-icon').addClass('open')
   }
-
 }
 
 var addZero = function (i) {
@@ -151,6 +152,8 @@ var showErrorMessage = function (message) {
   numAnim = null
   jQuery('#main .content .temp-note').html(message)
   jQuery('#main .actual-icon svg').html('<image xlink:href="assets/icons/11d.svg" src="assets/icons/11d.svg" width="80" height="80"/>')
+  timeoffset = config.timezone.offset
+  refreshClock()
 
 }