Programming Steps: 207 Ionic-v1 Flickr Search Example: Nightly

Flickr Search Example: Nightly
code example:

<title>Flickr</title>

#photos {
  margin: auto;
}

.photo {
  width: 100px;
  height: 100px;
  margin: 1px;
  float: left;
  overflow: hidden;
}
.photo img {
  //min-width: 100%;
  //min-height: 100%;
  //max-width: 100%;
  //max-height: 150%;
}

#search-bar {
  background: none;
  position: absolute;
  width: 100%;
  top: 44px;
  height: 40px;
  z-index: 3;
}
#search-bar .item {
  background: none;
  border: none;
}
#content {
  top: 44px;
  padding-top: 45px;
  padding-bottom: 20px;
}    
  </style>
</head>

<ion-header-bar class="bar-dark">
    <h1 class="title">Flickr Search</h1>
  </ion-header-bar>

<ion-content id="content" push-search>
    <div id="photos" class="clearfix">
      <div class="photo" ng-repeat="photo in photos.items">
        <img ng-src="{{ photo.media.m }}">
      </div>
    </div>
  </ion-content>
<script>
angular.module('ionicApp', ['ionic', 'ngResource'])

.factory('Flickr', function($resource, $q) {
  var photosPublic = $resource('https://api.flickr.com/services/feeds/photos_public.gne', 
      { format: 'json', jsoncallback: 'JSON_CALLBACK' }, 
      { 'load': { 'method': 'JSONP' } });
      
  return {
    search: function(query) {
      var q = $q.defer();
      photosPublic.load({
        tags: query
      }, function(resp) {
        q.resolve(resp);
      }, function(err) {
        q.reject(err);
      })
      
      return q.promise;
    }
  }
})

.controller('FlickrCtrl', function($scope, Flickr) {

})

.directive('pushSearch', function() {
  return {
    restrict: 'A',
    link: function($scope, $element, $attr) {
      var amt, st, header;

$element.bind('scroll', function(e) {
        if(!header) {
          header = document.getElementById('search-bar');
        }
        st = e.detail.scrollTop;
        if(st < 0) {
          header.style.webkitTransform = 'translate3d(0, 0px, 0)';
        } else {
          header.style.webkitTransform = 'translate3d(0, ' + -st + 'px, 0)';
        }
      });
    }
  }
})

.directive('photo', function($window) {
  return {
    restrict: 'C',
    link: function($scope, $element, $attr) {
      var size = ($window.outerWidth / 3) - 2;
      $element.css('width', size + 'px');
    }
  }
});  
  </script>
</body>
</html>

201706,20170602

Programming Steps

Friday, June 2, 2017

207 Ionic-v1 Flickr Search Example: Nightly

No comments:

Post a Comment