95 lines
2.9 KiB
JavaScript
95 lines
2.9 KiB
JavaScript
define([
|
|
'lodash',
|
|
'jquery',
|
|
'react',
|
|
'ImageSearch.rt'
|
|
], function (_, $, React, template) {
|
|
'use strict'
|
|
|
|
var ImageSearch = React.createClass({
|
|
|
|
displayName: 'ImageSearch',
|
|
mixins: [React.addons.LinkedStateMixin],
|
|
|
|
seq: 0,
|
|
total: 0,
|
|
hasMore: true,
|
|
heights: [0, 0, 0],
|
|
realTerm: 'cats',
|
|
|
|
getInitialState: function () {
|
|
setTimeout(this.search, 0)
|
|
return {
|
|
searchTerm: this.realTerm,
|
|
items: [[], [], []]
|
|
}
|
|
},
|
|
|
|
search: function () {
|
|
this.state.items = [[], [], []]
|
|
this.total = 0
|
|
this.heights = [0, 0, 0]
|
|
this.hasMore = true
|
|
this.realTerm = this.state.searchTerm
|
|
this.loadMore()
|
|
},
|
|
|
|
indexOfMin: function (array) {
|
|
var indexAndMin = _.reduce(array, function (accum, height, index) {
|
|
/*eslint no-extra-parens:0*/
|
|
return (height < accum.min) ? {i: index, min: height} : accum
|
|
}, {i: -1, min: Number.MAX_VALUE})
|
|
return indexAndMin.i
|
|
},
|
|
|
|
loadMore: function (done) {
|
|
done = done || _.noop
|
|
if (!this.hasMore) {
|
|
done()
|
|
return
|
|
}
|
|
var url = 'https://ajax.googleapis.com/ajax/services/search/images?v=1.0&rsz=8&start=' + this.total + '&q=' + this.realTerm + '&callback=?'
|
|
|
|
var self = this
|
|
$.ajax({url: url, dataType: 'jsonp'})
|
|
.done(function (data) {
|
|
if (!data.responseData) {
|
|
self.hasMore = false
|
|
done()
|
|
return
|
|
}
|
|
var results = data.responseData.results
|
|
var items = _.cloneDeep(self.state.items)
|
|
results.forEach(function (result) {
|
|
var minHeightIndex = self.indexOfMin(self.heights)
|
|
|
|
items[minHeightIndex].push({
|
|
id: self.seq + 1,
|
|
title: result.titleNoFormatting,
|
|
url: result.url,
|
|
ratio: result.width / result.height,
|
|
originalContext: result.originalContextUrl
|
|
})
|
|
|
|
self.heights[minHeightIndex] += result.height / result.width
|
|
self.total++
|
|
self.seq++
|
|
})
|
|
|
|
self.setState({items: items})
|
|
done()
|
|
})
|
|
},
|
|
|
|
shouldComponentUpdate: function (nextProps, nextState) {
|
|
return !_.isEqual(this.state, nextState)
|
|
},
|
|
|
|
render: function () {
|
|
return template.apply(this)
|
|
}
|
|
})
|
|
|
|
return ImageSearch
|
|
})
|