Created
September 29, 2015 22:15
-
-
Save davidfoerster/257e5f329d0b7d87adb6 to your computer and use it in GitHub Desktop.
Chromatik files (2015/09/30)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window["colorElements"] = { | |
"frontColors" : ["f8c5c5","f8dfc5","f8f8c5","dff8c5","c5f8c5","c5f8df","c5f8f8","c5dff8","c5c5f8","dfc5f8","f8c5f8","f8c5df","f28c8c","f2bf8c","f2f28c","bff28c","8cf28c","8cf2bf", | |
"8cf2f2","8cbff2","8c8cf2","bf8cf2","f28cf2","f28cbf","eb5252","eb9f52","ebeb52","9feb52","52eb52","52eb9f","52ebeb","529feb","5252eb","9f52eb","eb52eb","eb529f", | |
"e51919","e57f19","e5e519","7fe519","19e519","19e57f","19e5e5","197fe5","1919e5","7f19e5","e519e5","e5197f","ac1313","ac5f13","acac13","5fac13","13ac13","13ac5f", | |
"13acac","135fac","1313ac","5f13ac","ac13ac","ac135f","720c0c","723f0c","72720c","3f720c","0c720c","0c723f","0c7272","0c3f72","0c0c72","3f0c72","720c72","720c3f", | |
"390606","391f06","393906","1f3906","063906","06391f","063939","061f39","060639","1f0639","390639","39061f","ffffff","e9e9e9","d4d4d4","bfbfbf","aaaaaa","949494","7f7f7f","6a6a6a", | |
"555555","3f3f3f","2a2a2a","151515"], | |
"frontColors_group" : { | |
"f8c5c5" : "Red","f28c8c" : "Red","eb5252" : "Red","e51919" : "Red","ac1313" : "Red","720c0c" : "Red","390606" : "Red", | |
"f8dfc5" : "Orange","f2bf8c" : "Orange","eb9f52" : "Orange","e57f19" : "Orange","ac5f13" : "Orange","723f0c" : "Orange","391f06" : "Orange", | |
"f8f8c5" : "Yellow","f2f28c" : "Yellow","ebeb52" : "Yellow","e5e519" : "Yellow","acac13" : "Yellow","72720c" : "Yellow","393906" : "Yellow", | |
"dff8c5" : "Green","bff28c" : "Green","9feb52" : "Green","7fe519" : "Green","5fac13" : "Green","3f720c" : "Green","1f3906" : "Green","c5f8c5" : "Green", | |
"8cf28c" : "Green","52eb52" : "Green","19e519" : "Green","13ac13" : "Green","0c720c" : "Green","063906" : "Green","c5f8df" : "Green","8cf2bf" : "Green", | |
"52eb9f" : "Green","19e57f" : "Green","13ac5f" : "Green","0c723f" : "Green","06391f" : "Green", | |
"c5f8f8" : "Cyan","8cf2f2" : "Cyan","52ebeb" : "Cyan","19e5e5" : "Cyan","13acac" : "Cyan","0c7272" : "Cyan","063939" : "Cyan", | |
"c5dff8" : "Blue","8cbff2" : "Blue","529feb" : "Blue","197fe5" : "Blue","135fac" : "Blue","0c3f72" : "Blue","061f39" : "Blue","c5c5f8" : "Blue","8c8cf2" : "Blue", | |
"5252eb" : "Blue","1919e5" : "Blue","1313ac" : "Blue","0c0c72" : "Blue","060639" : "Blue", | |
"dfc5f8" : "Purple","bf8cf2" : "Purple","9f52eb" : "Purple","7f19e5" : "Purple","5f13ac" : "Purple","3f0c72" : "Purple","1f0639" : "Purple", | |
"f8c5f8" : "Pink","f28cf2" : "Pink","eb52eb" : "Pink","e519e5" : "Pink","ac13ac" : "Pink","720c72" : "Pink","390639" : "Pink", | |
"f8c5df" : "Pink","f28cbf" : "Pink","eb529f" : "Pink","e5197f" : "Pink","ac135f" : "Pink","720c3f" : "Pink","39061f" : "Pink", | |
"ffffff" : "White","e9e9e9" : "White","151515" : "Black","d4d4d4" : "Gray","bfbfbf" : "Gray","aaaaaa" : "Gray","949494" : "Gray","7f7f7f" : "Gray", | |
"6a6a6a" : "Gray","555555" : "Gray","3f3f3f" : "Gray","2a2a2a" : "Gray", | |
}, | |
"colorgroups_color" : { | |
"Cyan":"#00FFFF", | |
"Black":"#000000", | |
"Blue":"#0000FF", | |
"Yellow":"#FFFF00", | |
"Red":"#FF0000", | |
"Pink":"#FF00FF", | |
"Purple":"#800080", | |
"Green":"#008000", | |
"Gray":"#808080", | |
"White":"#FFFFFF", | |
"Orange":"#FF8C00" | |
}, | |
"color_colorgroups" : { | |
"#00FFFF":"Cyan", | |
"#000000":"Black", | |
"#0000FF":"Blue", | |
"#FFFF00":"Yellow", | |
"#FF0000":"Red", | |
"#FF00FF":"Pink", | |
"#800080":"Purple", | |
"#008000":"Green", | |
"#808080":"Gray", | |
"#FFFFFF":"White", | |
"#FF8C00":"Orange" | |
} | |
} | |
window["mapElements"] = { | |
"map":null, | |
"markers":[], | |
"markers_event_listeners" : [], | |
"markers_latlng":{}, | |
"infomap": null, | |
"image_overlay":null, | |
"randomMap" : null, | |
"randomMarkers":[], | |
"image_overlay":null, | |
"randombounds":null, | |
"searchbounds":null, | |
"positions" : {}, | |
"map_nhits" : 0, | |
"infomap_marker":null, | |
"infobox":null, | |
"markerClicked":false, | |
"markerClicked_ind":null, | |
} | |
window["searchElements"] = { | |
"query":null, | |
"selectedColors" : [], | |
"leftScore":100, | |
"start":0, | |
"nhits":40, | |
} | |
window["pageElements"] = { | |
"width":window.innerWidth, | |
"height":window.innerHeight, | |
"spinner" : null, | |
} | |
var photosMap = {}; | |
var geolocPhotosMap = {}; | |
var randomPhotosMap = {}; | |
var timer; | |
var ftm = null; | |
var tm = null; | |
var currentPhoto = null; | |
var selected_photo_id = null; | |
var imageGrids = null; | |
var in_grid_cnt = 0; | |
var APP_MEDIA_URL = ""; | |
var YAHOO_API_KEY = "VM.IvzjV34GMLi4mSpXM8PKVl07lgQ.nw0dE9zrmf4LuxV1xlrOy1Ugj.naMJS2SYr0-"; | |
var palette = null; | |
var slider = null; | |
var HL = null; | |
var viewsSelector = null; | |
var inputfocus = false; | |
var request = null; | |
var preload_request = null; | |
window["images"]={ | |
"randomImage":null, | |
} | |
function sortColorsDescending(a, b){ | |
score_a = parseInt(a.split(":")[1]); | |
score_b = parseInt(b.split(":")[1]); | |
return score_b-score_a; | |
} | |
var Searcher = new Class({ | |
initialize: function(){ | |
this.queryElements = {"text":null,"owner":null,"location":null,"darkness":null,"saturation":null,"woeid":null,"locationids":null,"license":null,"ownerid":null,"photoid":null}; | |
this.colors = {}; | |
this.start = 0; | |
this.nhits = 40; | |
this.filters = {}; | |
this.numOfResults = 0; | |
}, | |
resolveRegion: function(locationhash){ | |
var location_parts = locationhash.split(','); | |
var region = location_parts[0]; | |
var country = location_parts[2]; | |
var self = this; | |
var request = new Request.JSON({ | |
url: current_app_url + "resolveregion", | |
data:{ | |
'q':region, | |
}, | |
onSuccess: function(responseJson,responseText) | |
{ | |
var regionwoeid = responseJson.places.place[0].woeid; | |
getnearbyphotos(regionwoeid,locationhash,true); | |
}, | |
}).get(); | |
}, | |
resolveOwner: function(owner){ | |
var self = this; | |
var request = new Request.JSON({ | |
url: current_app_url + "searchowners", | |
data:{ | |
'q':owner, | |
'start':0, | |
'nhits':1 | |
}, | |
onSuccess: function(responseJson,responseText) | |
{ | |
window.searcher.queryElements["owner"] = responseJson[0]["username"]; | |
window.searcher.queryElements["ownerid"] = responseJson[0]["url"]; | |
window.searcher.search(); | |
}, | |
}).get(); | |
}, | |
loadFromHash : function(){ | |
this.clean(); | |
if(window.location.hash == "#home"){ | |
viewsSelector.update("randomView"); | |
return; | |
} | |
var hash_parts = window.location.hash.replace('#','').split("&"); | |
var searchBool = false; | |
var locationids_filled = false; | |
for(var i = 0 ; i < hash_parts.length;i++){ | |
var keyval = hash_parts[i].split(":"); | |
if(keyval[0] == "s"){ | |
this.start = keyval[1]; | |
} | |
if(keyval[0] == "n"){ | |
this.nhits = keyval[1]; | |
} | |
if(keyval[0] != "colors" && keyval[0] != "" && keyval[0] != "s" && keyval[0] != "n"){ | |
this.queryElements[keyval[0]] = decodeURI(keyval[1]); | |
} | |
if(keyval[0] == "colors"){ | |
var colors = keyval[1].split(","); | |
for(var j = 0 ; j < colors.length ; j++ ){ | |
var colorscore = colors[j].split('/'); | |
this.colors[colorscore[0]] = colorscore[1]; | |
} | |
} | |
} | |
renderpaletteAndSlider(); | |
for(var i = 0 ; i < hash_parts.length;i++){ | |
var keyval = hash_parts[i].split(":"); | |
if(keyval[0] == "woeid"){ | |
searchBool = true; | |
this.setFilters(); | |
this.getnearbyphotos(keyval[1],this.queryElements["location"],true); | |
} | |
} | |
if(searchBool == false){ | |
this.setFilters(); | |
this.search(); | |
} | |
}, | |
clean: function(){ | |
this.queryElements = {"text":null,"owner":null,"location":null,"darkness":null,"saturation":null,"locationids":null,"license":null,"woeid":null,"ownerid":null,"photoid":null}; | |
this.colors = {}; | |
this.start = 0; | |
this.nhits = 40; | |
this.filters = {}; | |
this.numOfResults = 0; | |
Array.each($$(".filterclose"),function(elt){elt.destroy();}); | |
}, | |
cleanpagination: function(){ | |
this.start = 0; | |
this.nhits = 40; | |
}, | |
updatequery: function(key,value){ | |
this.queryElements[key] = value; | |
}, | |
updatecolors:function(color,score){ | |
this.colors[color] = score; | |
}, | |
removecolor: function(color){ | |
delete this.colors[color]; | |
}, | |
cleancolors: function(){ | |
this.colors = {}; | |
}, | |
buildcolorquery: function() { | |
var colorgroups = {}; | |
var colorelement = []; | |
for(var color in this.colors) { | |
if (parseInt(this.colors[color]) < 1) continue; | |
var colorgroup = window["colorElements"].frontColors_group[color]; | |
var colorscore = this.colors[color]; | |
colorelement.push("OPT color:" + [colorgroup,color,colorscore].join('/') + "{s=200000}"); | |
if(colorgroup in colorgroups) { | |
colorgroups[colorgroup] += parseInt(colorscore); | |
} | |
else { | |
colorgroups[colorgroup] = parseInt(colorscore); | |
} | |
} | |
var colorgroupelement = []; | |
for(var colorgroup in colorgroups) { | |
colorgroupelement.push("colorgroup:" + [colorgroup,colorgroups[colorgroup]].join('/')); | |
} | |
return [colorelement.join(" "),colorgroupelement.join(" ")].join(" "); | |
}, | |
fillcolorswithJSON: function(responseJSON){ | |
this.colors = {}; | |
var sortedColors = responseJSON.sort(sortColorsDescending); | |
var max_color = Math.min(10,sortedColors.length); | |
for(var k = 0 ; k < max_color ; k++){ | |
var parts = sortedColors[k].split(":"); | |
var score = parseFloat(parts[1]); | |
var new_score = Math.floor((score*75.0)/100.0); | |
if(new_score > 0){ | |
this.colors[parts[0]] = new_score; | |
} | |
} | |
}, | |
filllocationidswithJSON: function(responseJSON){ | |
this.queryElements["locationids"] = []; | |
for(var i = 0;i < responseJSON.length;i++){ | |
this.queryElements["locationids"].push(responseJSON[i]); | |
} | |
}, | |
getnearbyphotos: function(regionwoeid,regiondescription,hashready){ | |
var self = this; | |
var regionrequest = new Request.JSON({ | |
url: current_app_url + "getnearbyphotos", | |
data:{ | |
'q': regionwoeid, | |
}, | |
onRequest: function(){ | |
cleanInfos(); | |
cleanMapCanvas(); | |
cleanFullSize(); | |
}, | |
onSuccess: function(responseJSON,responseText) | |
{ | |
window.searcher.clean(); | |
cleanExternalSearch(); | |
$('textSearchField').value = ""; | |
self.queryElements["location"] = regiondescription; | |
self.queryElements["woeid"] = regionwoeid; | |
self.filllocationidswithJSON(responseJSON["locationids"]); | |
if(hashready == false){ | |
self.setwindowhash(); | |
} | |
else{ | |
self.search(); | |
} | |
} | |
}).get(); | |
}, | |
//get the space available for color | |
getcolorspace: function(){ | |
var space = 100; | |
for(var c in this.colors){ | |
space -= this.colors[c]; | |
} | |
return space; | |
}, | |
buildAjaxQuery: function(){ | |
var ajaxelements = []; | |
if(this.queryElements["text"] != null){ | |
ajaxelements.push(this.queryElements["text"]); | |
} | |
var colorquery = this.buildcolorquery(); | |
if(colorquery != " "){ | |
ajaxelements.push("(" + colorquery + ")"); | |
} | |
if(this.queryElements["locationids"] != null){ | |
var locationidsquery = []; | |
for(var i = 0 ; i < this.queryElements["locationids"].length ; i++){ | |
locationidsquery.push("photo_locationid:" + this.queryElements["locationids"][i]); | |
} | |
ajaxelements.push("(" + locationidsquery.join(" OR ") + ")"); | |
} | |
if(this.queryElements["ownerid"] != null){ | |
ajaxelements.push("photo_ownerid:" + this.queryElements["ownerid"]); | |
} | |
if(this.queryElements["license"] != null){ | |
ajaxelements.push("rights:" + this.queryElements["license"]); | |
} | |
if(this.queryElements["saturation"] != null){ | |
ajaxelements.push("saturation:" + this.queryElements["saturation"]); | |
} | |
if(this.queryElements["darkness"] != null){ | |
ajaxelements.push("darkness:" + this.queryElements["darkness"]); | |
} | |
return ajaxelements.join(" "); | |
}, | |
createFilterDiv: function(elt){ | |
var divclose = new Element("div",{"class":"filterclose"}); | |
var span = new Element('span',{'text':elt}); | |
span.setStyles({ | |
'float':'left', | |
'font-size':'0.8em', | |
'margin-top':'3px', | |
}); | |
span.inject(divclose); | |
var closeimg = new Element("img",{"src":"media/img/btn_close_filter.png"}); | |
closeimg.inject(divclose); | |
return divclose; | |
}, | |
setFilters: function(){ | |
var self = this; | |
$('colorful_btn').set("class","refine_btn"); | |
$('greyscale_btn').set("class","refine_btn"); | |
$('bright_btn').set("class","refine_btn"); | |
$('dark_btn').set("class","refine_btn"); | |
for(var elt in this.queryElements){ | |
if(elt == "text" || elt == "saturation" || elt == "darkness" || elt == "license" || elt == "location" || elt == "owner"){ | |
if(this.queryElements[elt] != null){ | |
if(elt == "saturation"){ | |
if(this.queryElements[elt] == "Colorful") | |
$('colorful_btn').set("class","refine_btn_selected"); | |
else | |
$('greyscale_btn').set("class","refine_btn_selected"); | |
} | |
if(elt == "darkness"){ | |
if(this.queryElements[elt] == "Bright") | |
$('bright_btn').set("class","refine_btn_selected"); | |
else | |
$('dark_btn').set("class","refine_btn_selected"); | |
} | |
for(var i = 1; i<=6;i++) | |
$("license_" + i).getElementsByTagName("img")[0].setStyle("margin-top","0px"); | |
if(elt =="license"){ | |
for(var i = 1; i<=6;i++){ | |
var license_id = "license_" + i; | |
if(this.queryElements[elt] == license_id) | |
$(license_id).getElementsByTagName("img")[0].setStyle("margin-top","-23px"); | |
} | |
} | |
} | |
} | |
} | |
}, | |
setwindowhash: function(){ | |
var hash_arr = []; | |
for(var elt in this.queryElements){ | |
if(elt != "locationids"){ | |
if(this.queryElements[elt] != null){ | |
hash_arr.push([elt,this.queryElements[elt]].join(':')); | |
} | |
} | |
} | |
hash_arr.push("s:" + this.start); | |
hash_arr.push("n:" + this.nhits); | |
var color_hash_arr = []; | |
for(var color in this.colors){ | |
color_hash_arr.push([color,this.colors[color]].join('/')); | |
} | |
if(color_hash_arr.length > 0){ | |
hash_arr.push("colors:" + color_hash_arr.join(',')); | |
} | |
if (navigator.platform != "iPad" || this.isNewSearch(hash_arr)) | |
imageGrids.wipeout(); | |
window.location.hash = encodeURI(hash_arr.join('&')); | |
}, | |
//Méthode qui compare un hash avec le hash actuel | |
//Renvoie false si la nouveau hash correpond à un page suivante/précédente du hash actuel | |
isNewSearch: function (hash) { | |
var current = window.location.hash.replace('#','').split("&"); | |
var identical = current.length == hash.length; | |
for (var i = 0; i < hash.length; i++) { | |
var key = hash[i].split(':')[0]; | |
identical = identical && (hash[i] == current[i] || key == 's' || key == 'n'); | |
} | |
return !identical; | |
}, | |
preloadNextGrid: function () { | |
var self = this; | |
if (preload_request != null && preload_request.isRunning()) | |
return; | |
preload_request = new Request.JSON({ | |
url: current_app_url + "searchphotos", | |
data:{ | |
'q': this.buildAjaxQuery(), | |
'start': imageGrids.loaded, | |
'nhits': this.nhits, | |
}, | |
onSuccess: function (responseJSON, responseText) { | |
if(responseJSON.length > 1){ | |
var images_data = []; | |
for(var k = 1 ; k<responseJSON.length ; k++) { | |
photosMap[responseJSON[k]["id"]] = new Photo(); | |
var photo = photosMap[responseJSON[k]["id"]]; | |
photosMap[responseJSON[k]["id"]].loadFromJSON(responseJSON[k]); | |
images_data.push({"url":photo.thumbnailurl,"id":photo.id, "title": photo.title,"owner" : photo.owner_username,"license": photo.license,"fullsizeurl": photo.squarethumbnailurl.replace("_s","")}); | |
} | |
imageGrids.addGrid(images_data); | |
} | |
} | |
}).get(); | |
}, | |
search: function () { | |
cleanInfos(); | |
$('spinner').setStyle('display','block'); | |
window.pageElements.spinner.show(); | |
var self = this; | |
$('noResults').setStyle('display','none'); | |
if (request != null && request.isRunning()) | |
request.cancel(); | |
if (preload_request != null && preload_request.isRunning()) | |
preload_request.cancel(); | |
request = new Request.JSON({ | |
url: current_app_url + "searchphotos", | |
data:{ | |
'q': self.buildAjaxQuery(), | |
'start': self.start, | |
'nhits': self.nhits, | |
}, | |
onRequest: function() | |
{ | |
$('viewSelector').setStyle('display','block'); | |
photosMap = {}; | |
geolocPhotosMap = {}; | |
window["mapElements"].map_nhits = 0; | |
cleanMap(); | |
cleanInfos(); | |
cleanMapCanvas(); | |
cleanFullSize(); | |
cleanExternalSearch(); | |
viewsSelector.update("gridView"); | |
$('textSearchField').value = self.queryElements["text"]; | |
}, | |
onSuccess: function(responseJSON, responseText) | |
{ | |
$('spinner').setStyle('display','none'); | |
window.pageElements.spinner.hide(); | |
self.setFilters(); | |
self.totalResults = responseJSON[0]; | |
if(self.totalResults > 0) { | |
$('numOfResults').setStyle('display','block'); | |
for(var k = 1;k<responseJSON.length;k++){ | |
photosMap[responseJSON[k]["id"]] = new Photo(); | |
photosMap[responseJSON[k]["id"]].loadFromJSON(responseJSON[k]); | |
} | |
var images_data = []; | |
for(var photoid in photosMap){ | |
photo = photosMap[photoid]; | |
photofullSizeUrl = photo.squarethumbnailurl.replace("_s",""); | |
images_data.push({"url":photo.thumbnailurl,"id":photo.id, "title": photo.title,"owner" : photo.owner_username,"license": photo.license,"fullsizeurl":photofullSizeUrl}); | |
} | |
imageGrids.addGrid(images_data); | |
} | |
else{ | |
$('noResults').setStyle('display','block'); | |
$('numOfResults').setStyle('display','none'); | |
} | |
} | |
}).get(); | |
} | |
}); | |
window["searcher"] = new Searcher(); | |
var ViewsSelector = new Class({ | |
initialize : function(){ | |
this.views = {"gridView":"gridSelector_btn","mapView":"mapSelector_btn","tagsView":"tagsSelector_btn","randomView":"randomSelector_btn"}; | |
this.current = "randomView"; | |
$('viewSelector').setStyle('display','none'); | |
}, | |
update: function(view){ | |
cleanFullSize(); | |
cleanInfos(); | |
cleanInfoBoxMap(); | |
for(var v in this.views){ | |
if(v == view){ | |
$(v).setStyle("visibility","visible"); | |
if(view != "randomView"){ | |
($(this.views[v]).getElementsByTagName("img")[0]).toggleClass("viewbtn_pressed"); | |
$$('.randomZone .spinner').destroy(); | |
} | |
show(view); | |
this.current = view; | |
} | |
else{ | |
$(v).setStyle("visibility","hidden"); | |
if(v != "randomView"){ | |
($(this.views[v]).getElementsByTagName("img")[0]).removeClass("viewbtn_pressed"); | |
} | |
} | |
} | |
} | |
}); | |
function Tag(text,score){ | |
this.text = text; | |
this.score = score; | |
} | |
var Photo = new Class({ | |
initialize : function(){ | |
this.squarethumbnailurl = ""; | |
this.thumbnailurl = ""; | |
this.title = ""; | |
this.width = ""; | |
this.height = ""; | |
this.id = ""; | |
this.latitude = ""; | |
this.longitude = ""; | |
this.owner_ownerid = ""; | |
this.owner_username = ""; | |
this.owner_realname = ""; | |
this.owner_location = ""; | |
this.tags = []; | |
this.license = ""; | |
this.regionwoeid = ""; | |
this.locationdescription = ""; | |
}, | |
loadFromJSON: function(json){ | |
this.squarethumbnailurl = json["squarethumbnailurl"]; | |
this.thumbnailurl = json["thumbnailurl"]; | |
this.title = json["title"]; | |
if(json["width"] == null){ | |
this.width = 240; | |
}else{ | |
this.width = json["width"]; | |
} | |
if(json["height"] == null){ | |
this.height = 240; | |
}else{ | |
this.height = json["height"]; | |
} | |
this.id = json["id"]; | |
this.latitude = json["latitude"]; | |
this.longitude = json["longitude"]; | |
this.owner_ownerid = json["ownerid"]; | |
try{ | |
this.owner_username = json["owner"]["username"]; | |
this.owner_realname = json["owner"]["realname"]; | |
this.owner_location = json["owner"]["location"]; | |
} | |
catch(e){} | |
this.tags = json["tags"]; | |
this.license = json["license"]; | |
this.locationid = json["locationid"]; | |
} | |
}); | |
function Size(width,height){this.width = width;this.height = height;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment