From cf92d433004d0d1a6c312627b2220a4570c3fcce Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Thu, 2 Jul 2015 18:05:51 -0500 Subject: [PATCH] BUTTER NUT SQUASH --- ionic/components/app/test/weather/flickr.js | 4 +- ionic/components/app/test/weather/index.js | 84 ++++++++------------- ionic/components/app/test/weather/main.html | 3 +- ionic/components/app/test/weather/style.css | 15 ++-- scripts/e2e/ionic.template.html | 2 + 5 files changed, 50 insertions(+), 58 deletions(-) diff --git a/ionic/components/app/test/weather/flickr.js b/ionic/components/app/test/weather/flickr.js index 6cb32d9964..8ae5dd975d 100644 --- a/ionic/components/app/test/weather/flickr.js +++ b/ionic/components/app/test/weather/flickr.js @@ -25,7 +25,9 @@ export class Flickr { static search(tags, lat, lng) { return new Promise((resolve, reject) => { - Http.get(baseUrl + '?method=flickr.groups.pools.getPhotos&group_id=1463451@N25&safe_search=1&api_key=' + FLICKR_API_KEY + '&format=json&tags=' + tags + '&lat=' + lat + '&lng=' + lng).then((val) => { + Http.get(baseUrl + '?method=flickr.groups.pools.getPhotos&group_id=1463451@N25&safe_search=1&api_key=' + FLICKR_API_KEY + '&jsoncallback=JSON_CALLBACK&format=json&tags=' + tags + '&lat=' + lat + '&lng=' + lng, { + method: 'jsonp' + }).then((val) => { resolve(val); }, (err) => { reject(httpResponse); diff --git a/ionic/components/app/test/weather/index.js b/ionic/components/app/test/weather/index.js index 04abb6ee94..8efcd45f54 100644 --- a/ionic/components/app/test/weather/index.js +++ b/ionic/components/app/test/weather/index.js @@ -17,7 +17,7 @@ console.log('Imported', Geo, Weather, Flickr); }) @View({ templateUrl: 'main.html', - directives: [NgIf, NgFor, Content, Scroll, CurrentWeather, WeatherIcon] + directives: [NgIf, NgFor, Content, Scroll, CurrentWeather, WeatherIcon, BackgroundCycler] }) class WeatherApp { constructor(Modal: Modal) { @@ -65,13 +65,15 @@ class WeatherApp { this.current = resp; // TODO: This should be in a custom pipe - let c, d; + let c, d, h; for(let i = 0; i < this.current.hourly.data.length; i++) { c = this.current.hourly.data[i]; let t = c.temperature; d = new Date(c.time * 1000); c.temperature = Math.floor(t); - c.time_date = d.getHours() % 12 + ' ' + (d.getHours() < 12 ? 'AM' : 'PM'); + h = d.getHours() % 12; + h = (h == 0 ? 12 : h); + c.time_date = h + ' ' + (d.getHours() < 12 ? 'AM' : 'PM'); } for(let i = 0; i < this.current.daily.data.length; i++) { c = this.current.daily.data[i]; @@ -166,9 +168,7 @@ let WEATHER_ICONS = { export class WeatherIcon { constructor() { } - onChange(data) { - console.log('Weather icon onchange', data); - + onAllChangesDone(data) { var icon = this.icon; if(icon in WEATHER_ICONS) { @@ -273,6 +273,33 @@ export class CurrentWeather { } } } + +@Component({ + selector: 'background-cycler', + properties: [ + 'image' + ] +}) +@View({ + template: '
' +}) +export class BackgroundCycler { + constructor(elementRef: ElementRef) { + this.elementRef = elementRef; + this.el = elementRef.nativeElement; + } + onInit() { + this.imageEl = this.el.children[0]; + } + onAllChangesDone() { + var item = this.image; + if(item) { + var url = "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret + "_z.jpg"; + this.imageEl.style.backgroundImage = 'url(' + url + ')'; + } + } +} + /* .directive('weatherBox', function($timeout) { return { @@ -317,50 +344,5 @@ export class CurrentWeather { } }) -.directive('backgroundCycler', function($compile, $animate) { - var animate = function($scope, $element, newImageUrl) { - var child = $element.children()[0]; - - var scope = $scope.$new(); - scope.url = newImageUrl; - var img = $compile('')(scope); - - $animate.enter(img, $element, null, function() { - console.log('Inserted'); - }); - if(child) { - $animate.leave(angular.element(child), function() { - console.log('Removed'); - }); - } - }; - - return { - restrict: 'E', - link: function($scope, $element, $attr) { - $scope.$watch('activeBgImage', function(v) { - if(!v) { return; } - console.log('Active bg image changed', v); - var item = v; - var url = "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret + "_z.jpg"; - animate($scope, $element, url); - }); - } - } -}) - -.directive('backgroundImage', function($compile, $animate) { - return { - restrict: 'E', - template: '
', - replace: true, - scope: true, - link: function($scope, $element, $attr) { - if($scope.url) { - $element[0].style.backgroundImage = 'url(' + $scope.url + ')'; - } - } - } -}); */ diff --git a/ionic/components/app/test/weather/main.html b/ionic/components/app/test/weather/main.html index fb5485a861..6b9d17d32c 100644 --- a/ionic/components/app/test/weather/main.html +++ b/ionic/components/app/test/weather/main.html @@ -1,6 +1,7 @@ - + + {{currentLocationString}}
diff --git a/ionic/components/app/test/weather/style.css b/ionic/components/app/test/weather/style.css index 83c91741f0..9cb891ba19 100644 --- a/ionic/components/app/test/weather/style.css +++ b/ionic/components/app/test/weather/style.css @@ -7,8 +7,13 @@ body { } #scroller { } -.bg-image { +background-cycler { + display: block; position: fixed; + width: 100%; + height: 100%; +} +.bg-image { width: 120%; height: 120%; background-size: cover; @@ -191,10 +196,10 @@ current-weather .current-temp { #forecast-scroll { margin: 10px 0px; - height: 150px; + height: 85px; } #hourly-forecast { - width: 2250px; + width: 2210px; height: 70px; } .hourly-hour { @@ -231,10 +236,10 @@ current-weather .current-temp { ion-view { - background-color: black !important; + background-color: transparent !important; } ion-content { - background-color: black !important; + background-color: transparent !important; } #header { background: transparent; diff --git a/scripts/e2e/ionic.template.html b/scripts/e2e/ionic.template.html index 569a57ffa6..81fc2404d0 100644 --- a/scripts/e2e/ionic.template.html +++ b/scripts/e2e/ionic.template.html @@ -5,6 +5,8 @@ + +